added scss files

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

Index: chrome/common/extensions/docs/static/sass/_mixins.scss
diff --git a/chrome/common/extensions/docs/static/sass/_mixins.scss b/chrome/common/extensions/docs/static/sass/_mixins.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e25d783d7652a2f782dffd097a9440d5f22d905b
--- /dev/null
+++ b/chrome/common/extensions/docs/static/sass/_mixins.scss
@@ -0,0 +1,145 @@
+// 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;
+}