discourse/app/assets/stylesheets/common/foundation/mixins.scss

89 lines
1.7 KiB
SCSS

// --------------------------------------------------
// Mixins used throughout the theme
// --------------------------------------------------
// Media queries
// --------------------------------------------------
$breakpoints: (
mobile-small: 320px,
mobile: 550px,
tablet: 768px,
medium: 850px,
large: 1000px,
extra-large: 1140px
);
@mixin breakpoint($bp, $rule: max-width, $type: screen) {
@media #{$type} and (#{$rule}: map-get($breakpoints, $bp)) {
@content;
}
}
// CSS3 properties
// --------------------------------------------------
// Clearfix
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
//noinspection CssOptimizeSimilarProperties
@mixin linear-gradient($start-color, $end-color) {
background-color: $start-color;
background-image: linear-gradient(to bottom, $start-color, $end-color);
}
// Visibility
// --------------------------------------------------
@mixin hover {
.discourse-no-touch & {
&:hover {
@content;
}
}
}
//
// --------------------------------------------------
// Unselectable (avoids unwanted selections with iPad, touch laptops, etc)
@mixin user-select($mode) {
-webkit-user-select: $mode;
-moz-user-select: $mode;
-ms-user-select: $mode;
}
@mixin unselectable {
@include user-select(none);
}
// Stuff we repeat
@mixin post-aside {
border-left: 5px solid $primary-low;
background-color: blend-primary-secondary(5%);
}
// We still need -webkit for latest iPhone and Safari
@mixin transform($transforms) {
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin appearance-none() {
// resets default browser styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}