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

// ---------------------------------------------------

//Flexbox

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin inline-flex() {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}


@mixin align-items($alignment) {
    -webkit-box-align: $alignment;
    -webkit-align-items: $alignment;
    -ms-flex-align: $alignment;
    -ms-align-items: $alignment;
    align-items:$alignment;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}

@mixin flex($fg: 1, $fs: null, $fb: null) {

	$fg-boxflex: $fg;

	// Box-Flex only supports a flex-grow value
	@if type-of($fg) == 'list' {
		$fg-boxflex: nth($fg, 1);
	}

	-webkit-box-flex: $fg-boxflex;
	-webkit-flex: $fg $fs $fb;
	-moz-box-flex: $fg-boxflex;
	-moz-flex: $fg $fs $fb;
	-ms-flex: $fg $fs $fb;
	flex: $fg $fs $fb;
}