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

174 lines
3.2 KiB
SCSS

// --------------------------------------------------
// Mixins used throughout the theme
// --------------------------------------------------
// Media queries
// --------------------------------------------------
@mixin small-height {
@media screen and (max-height: 444px) {
@content;
}
}
@mixin regular-height {
@media screen and (min-height: 445px) {
@content;
}
}
@mixin not-small-width {
@media screen and (min-width: 967px) {
@content;
}
}
@mixin small-width {
@media screen and (max-width: 966px) {
@content;
}
}
@mixin medium-width {
@media screen and (min-width: 967px) and (max-width: 1139px) {
@content;
}
}
@mixin large-width {
@media screen and (min-width: 1140px) {
@content;
}
}
// CSS3 properties
// --------------------------------------------------
// Box sizing
@mixin box-sizing($sizing) {
-webkit-box-sizing: $sizing;
-moz-box-sizing: $sizing;
box-sizing: $sizing;
}
// Border radius
@mixin border-radius-all($radius) {
border-radius: $radius;
}
@mixin border-radius-top($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-radius-bottom($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
// Box shadow
@mixin box-shadow($shadow) {
box-shadow: $shadow;
}
// Linear gradient
@mixin linear-gradient($start-color, $end-color) {
background-color: $start-color;
background-image: linear-gradient(to bottom, $start-color, $end-color);
}
// Background size
@mixin background-size($size) {
background-size: $size;
}
// Background clip
@mixin background-clip($clip) {
background-clip: $clip;
}
// Rotate
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
transform: rotate($degrees);
}
// Scale
@mixin scale($ratio) {
-webkit-transform: scale($ratio);
transform: scale($ratio);
}
// Transition
@mixin transition($transition) {
.discourse-no-touch & {
-webkit-transition: #{$transition};
-ms-transition: #{$transition};
transition: #{$transition};
}
}
// Visibility
// --------------------------------------------------
@mixin hover {
.discourse-no-touch & {
&:hover {
@content;
}
}
}
@mixin fades-in($time: 0.5s) {
opacity: 0;
visibility: hidden;
.discourse-no-touch & {
-webkit-transition: visibility 0s linear $time, opacity $time linear;
-ms-transition: visibility 0s linear $time, opacity $time linear;
transition: visibility 0s linear $time, opacity $time linear;
}
}
@mixin fade-soft($time: 1s) {
-webkit-transition: opacity $time ease-in-out;
-ms-transition: opacity $time ease-in-out;
transition: opacity $time ease-in-out;
}
@mixin visible {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
// Decorations
// --------------------------------------------------
// Glow
@mixin glow($color) {
border: 1px solid $color;
box-shadow: 0 0 5px $color;
}
//
// --------------------------------------------------
// Unselectable
@mixin unselectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}