chrome/common/extensions/docs/static/sass/_mixins.scss

// element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
  }
  clip: rect(1px, 1px, 1px, 1px);
}

// Turns off the element-invisible effect.
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

@mixin element-focusable {
  @include element-invisible;
  &:active,
  &:focus {
    @include element-invisible-off;
  }
}

@mixin display-flex() {
  display: -webkit-box; // Old Safari :(
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

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

@mixin flex($val) {
  -webkit-box-flex: $val; // Old Safari :(
  -webkit-flex: $val;
  -moz-flex: $val;
  -ms-flex: $val;
  -o-flex: $val;
  flex: $val;
}

@mixin justify-content($val: center) {
  -webkit-box-pack: 1;  // Old Safari :( TODO: don't hardcode 1.
  -webkit-justify-content: $val;
  -moz-justify-content: $val;
  -ms-justify-content: $val;
  -o-justify-content: $val;
  justify-content: $val;
}

@mixin align-items($val: center) {
  -webkit-box-align: $val;  // Old Safari :(
  -webkit-align-items: $val;
  -moz-align-items: $val;
  -ms-align-items: $val;
  -o-align-items: $val;
  align-items: $val;
}

@mixin align-self($val: center) {
  -webkit-align-self: $val;
  -moz-align-self: $val;
  -ms-align-self: $val;
  -o-align-self: $val;
  align-self: $val;
}

@mixin flex-direction($val) {
  -webkit-box-orient: vertical;  // Old Safari :(. TODO: don't hardcode "vertical".
  -webkit-flex-direction: $val;
  -moz-flex-direction: $val;
  -ms-flex-direction: $val;
  -o-flex-direction: $val;
  flex-direction: $val;
}

@mixin flex-wrap($val: nowrap) {
  -webkit-flex-wrap: $val;
  -moz-flex-wrap: $val;
  -ms-flex-wrap: $val;
  -o-flex-wrap: $val;
  flex-wrap: $val;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val; // Old Safari :(
  -webkit-order: $val;
  -moz-order: $val;
  -ms-order: $val;
  -o-order: $val;
  order: $val;
}

// @mixin width-max-content() {
//   width: -webkit-max-content;
//   width: -moz-max-c;
//   width: -ms-max-content;
//   width: -o-max-content;
//   width: max-content;
// }

// @mixin width-min-content() {
//   width: -webkit-min-content;
//   width: -moz-min-content;
//   width: -ms-min-content;
//   width: -o-min-content;
//   width: min-content;
// }

@mixin user-select($val: none) {
  -webkit-user-select: $val;
  -moz-user-select: $val;
  -o-user-select: $val;
  -ms-user-select: $val;
  user-select: $val;
}

@mixin calc($property, $expression) { 
  #{$property}: -moz-calc(#{$expression}); 
  #{$property}: -o-calc(#{$expression}); 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
}

@mixin filter($val: none) {
  -webkit-filter: $val;
  -moz-filter: $val;
  -o-filter: $val;
  -ms-filter: $val;
  //filter: $val;
}