discourse/app/assets/stylesheets/common/foundation/mixins.scss
Kris ada1d6b987
Composer restyle
* composer restyle, some input normalization

* style adjustments: spacing, preview background, colors

* small spacing adjustments, removing default iOS input appearance, fixing merge

* small width adjustment

* fixing mobile link modal for small devices

* FIX: more resilient allowInitiatlValueMutation implementation

* Build scrollMap only on scroll.

* FIX: pick date and time was not reseting state

* FIX: removes auto sizing and touchstart support for now

* Revert "FIX: reflects discourse icons naming scheme s/d-icon-*/d-*"

This reverts commit b5ed980235.

* tweak icon-library generation

* FIX: regression preventing to set number of hours before closing

This commit also adds a full test suite for editing topic timer.

* FIX: makes allowInitialValueMutation more restrictive

* FIX: invite-list expects initial value mutation

* fixing tag input spacing

* minor input cleanup

* bump onebox version

* FIX: avoids test failing at some times of the day

* FIX: various issues when editing category permissions

This commit also adds multiple tests
2017-11-27 15:23:18 -05:00

119 lines
2.4 KiB
SCSS

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