// -------------------------------------------------- // 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; }