// -------------------------------------------------- // Mixins used throughout the theme // -------------------------------------------------- // Media queries // -------------------------------------------------- @mixin small-width { @media all and (max-width: 850px) { @content; } } @mixin medium-width { @media all and (min-width: 1000px) and (max-width: 1139px) { @content; } } @mixin large-width { @media all and (min-width: 1140px) { @content; } } @mixin mobile-portrait { @media all and (max-width : 320px) { @content; } } @mixin not-mobile-portrait { @media all and (min-width : 321px) { @content; } } @mixin mobile-landscape { @media all and (min-width : 321px) and (max-width : 959px) { @content; } } @mixin not-tablet-landscape { @media all and (max-width : 959px) { @content; } } @mixin tablet-landscape { @media all and (min-width : 960px) { @content; } } // CSS3 properties // -------------------------------------------------- // Clearfix @mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } } // Border radius @mixin border-radius-all($radius) { border-radius: $radius; } // Box shadow @mixin box-shadow($shadow) { box-shadow: $shadow; } // Linear gradient //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; } } } @mixin visible { opacity: 1; visibility: visible; transition-delay: 0s; } // // -------------------------------------------------- // Unselectable (avoids unwanted selections with iPad, touch laptops, etc) @mixin unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } // Stuff we repeat @mixin post-aside { border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%); background-color: blend-primary-secondary(5%); } // We definately need -webkit for latest iPhone and Safari // When we deprecate IE9 we should clean up just to have webkit and non prefixed // ms is left around for ie9 // moz is for firefox 15 (do we even work with that?) // -o would be for opera 11.5 @mixin transform($transforms) { -o-transform: $transforms; -moz-transform: $transforms; -ms-transform: $transforms; -webkit-transform: $transforms; transform: $transforms; }