discourse/app/assets/stylesheets/common/foundation/mixins.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;
}