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

   1 // element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   2 @mixin element-invisible {
   3   position: absolute !important;
   4   height: 1px;
   5   width: 1px;
   6   overflow: hidden;
   7   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
   8     clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
   9   }
  10   clip: rect(1px, 1px, 1px, 1px);
  11 }
  12
  13 // Turns off the element-invisible effect.
  14 @mixin element-invisible-off {
  15   position: static !important;
  16   clip: auto;
  17   height: auto;
  18   width: auto;
  19   overflow: auto;
  20 }
  21
  22 @mixin element-focusable {
  23   @include element-invisible;
  24   &:active,
  25   &:focus {
  26     @include element-invisible-off;
  27   }
  28 }
  29
  30 @mixin display-flex() {
  31   display: -webkit-box; // Old Safari :(
  32   display: -webkit-flex;
  33   display: -moz-flex;
  34   display: -ms-flex;
  35   display: -o-flex;
  36   display: flex;
  37 }
  38
  39 @mixin display-inline-flex() {
  40   display: -webkit-inline-flex;
  41   display: -moz-inline-flex;
  42   display: -ms-inline-flex;
  43   display: -o-inline-flex;
  44   display: inline-flex;
  45 }
  46
  47 @mixin flex($val) {
  48   -webkit-box-flex: $val; // Old Safari :(
  49   -webkit-flex: $val;
  50   -moz-flex: $val;
  51   -ms-flex: $val;
  52   -o-flex: $val;
  53   flex: $val;
  54 }
  55
  56 @mixin justify-content($val: center) {
  57   -webkit-box-pack: 1;  // Old Safari :( TODO: don't hardcode 1.
  58   -webkit-justify-content: $val;
  59   -moz-justify-content: $val;
  60   -ms-justify-content: $val;
  61   -o-justify-content: $val;
  62   justify-content: $val;
  63 }
  64
  65 @mixin align-items($val: center) {
  66   -webkit-box-align: $val;  // Old Safari :(
  67   -webkit-align-items: $val;
  68   -moz-align-items: $val;
  69   -ms-align-items: $val;
  70   -o-align-items: $val;
  71   align-items: $val;
  72 }
  73
  74 @mixin align-self($val: center) {
  75   -webkit-align-self: $val;
  76   -moz-align-self: $val;
  77   -ms-align-self: $val;
  78   -o-align-self: $val;
  79   align-self: $val;
  80 }
  81
  82 @mixin flex-direction($val) {
  83   -webkit-box-orient: vertical;  // Old Safari :(. TODO: don't hardcode "vertical".
  84   -webkit-flex-direction: $val;
  85   -moz-flex-direction: $val;
  86   -ms-flex-direction: $val;
  87   -o-flex-direction: $val;
  88   flex-direction: $val;
  89 }
  90
  91 @mixin flex-wrap($val: nowrap) {
  92   -webkit-flex-wrap: $val;
  93   -moz-flex-wrap: $val;
  94   -ms-flex-wrap: $val;
  95   -o-flex-wrap: $val;
  96   flex-wrap: $val;
  97 }
  98
  99 @mixin order($val) {
 100   -webkit-box-ordinal-group: $val; // Old Safari :(
 101   -webkit-order: $val;
 102   -moz-order: $val;
 103   -ms-order: $val;
 104   -o-order: $val;
 105   order: $val;
 106 }
 107
 108 // @mixin width-max-content() {
 109 //   width: -webkit-max-content;
 110 //   width: -moz-max-c;
 111 //   width: -ms-max-content;
 112 //   width: -o-max-content;
 113 //   width: max-content;
 114 // }
 115
 116 // @mixin width-min-content() {
 117 //   width: -webkit-min-content;
 118 //   width: -moz-min-content;
 119 //   width: -ms-min-content;
 120 //   width: -o-min-content;
 121 //   width: min-content;
 122 // }
 123
 124 @mixin user-select($val: none) {
 125   -webkit-user-select: $val;
 126   -moz-user-select: $val;
 127   -o-user-select: $val;
 128   -ms-user-select: $val;
 129   user-select: $val;
 130 }
 131
 132 @mixin calc($property, $expression) {
 133   #{$property}: -moz-calc(#{$expression});
 134   #{$property}: -o-calc(#{$expression});
 135   #{$property}: -webkit-calc(#{$expression});
 136   #{$property}: calc(#{$expression});
 137 }
 138
 139 @mixin filter($val: none) {
 140   -webkit-filter: $val;
 141   -moz-filter: $val;
 142   -o-filter: $val;
 143   -ms-filter: $val;
 144   //filter: $val;
 145 }