office-ui-fabric-core-rails 5.1.0.0 → 6.0.0.0

data/vendor/assets/scss/{_Fabric.Mixins.RTL.scss → mixins/_Directionality.Mixins.scss}

@@ -1,325 +1,325 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Internationalization mixins
-
-
-// Base left-to-right mixin definition.
-@mixin LTR {
-  [dir='ltr'] & {
-    @content;
-  }
-}
-
-// Base right-to-left mixin definition.
-@mixin RTL {
-  [dir='rtl'] & {
-    @content;
-  }
-}
-
-// Use baseRTL on a root element (e.g. page or region) that needs RTL support.
-@mixin baseRtl {
-  @include RTL {
-    direction: rtl;
-    unicode-bidi: bidi-override;
-  }
-}
-
-
-// Common CSS property mixins with support for RTL.
-// Use to automatically create RTL versions of your properties.
-
-// Border styles.
-@mixin border-color($top, $right, $bottom, $left) {
-  border-color: $top $right $bottom $left;
-
-  @include RTL {
-    border-color: $top $left $bottom $right;
-  }
-}
-
-@mixin border-left($width, $style, $color) {
-  @include LTR {
-    border-left: $width $style $color;
-  }
-
-  @include RTL {
-    border-right: $width $style $color;
-  }
-}
-
-@mixin border-left-color($color) {
-  @include LTR {
-    border-left-color: $color;
-  }
-
-  @include RTL {
-    border-right-color: $color;
-  }
-}
-
-@mixin border-left-style($style) {
-  @include LTR {
-    border-left-style: $style;
-  }
-
-  @include RTL {
-    border-right-style: $style;
-  }
-}
-
-@mixin border-left-width($width) {
-  @include LTR {
-    border-left-width: $width;
-  }
-
-  @include RTL {
-    border-right-width: $width;
-  }
-}
-
-@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
-  border-radius: $topLeft $topRight $bottomRight $bottomLeft;
-
-  @include RTL {
-    border-radius: $topRight $topLeft $bottomLeft $bottomRight;
-  }
-}
-
-@mixin border-right($width, $style, $color) {
-  @include LTR {
-    border-right: $width $style $color;
-  }
-
-  @include RTL {
-    border-left: $width $style $color;
-  }
-}
-
-@mixin border-right-color($color) {
-  @include LTR {
-      border-right-color: $color;
-  }
-
-  @include RTL {
-      border-left-color: $color;
-  }
-}
-
-@mixin border-right-style($style) {
-  @include LTR {
-    border-right-style: $style;
-  }
-  
-  @include RTL {
-    border-left-style: $style;
-  }
-}
-
-@mixin border-right-width($width) {
-  @include LTR {
-    border-right-width: $width;
-  }
-
-  @include RTL {
-    border-left-width: $width;
-  }
-}
-
-// Floats.
-@mixin clear($side) {
-  @if $side == left {
-    @include LTR {
-      clear: $side;
-    }
-
-    @include RTL {
-      clear: right;
-    }
-  } @else if $side == right {
-    @include LTR {
-      clear: $side;
-    }
-
-    @include RTL {
-      clear: left;
-    }
-  } @else {
-      clear: $side;
-  }
-}
-
-@mixin float($direction) {
-  @if $direction == left {
-    @include LTR {
-      float: left;
-    }
-
-    @include RTL {
-      float: right;
-    }
-  } @else {
-    @include LTR {
-      float: right;
-    }
-
-    @include RTL {
-      float: left;
-    }
-  }
-}
-
-// Positioning.
-@mixin left($distance) {
-  @include LTR {
-    left: $distance;
-  }
-
-  @include RTL {
-    right: $distance;
-  }
-}
-
-@mixin right($distance) {
-  @include LTR {
-    right: $distance;
-  }
-
-  @include RTL {
-    left: $distance;
-  }
-}
-
-// Margins.
-@mixin margin($top, $right, $bottom, $left) {
-  margin: $top $right $bottom $left;
-
-  @include RTL {
-    margin: $top $left $bottom $right;
-  }
-}
-
-@mixin margin-left($distance) {
-  @include LTR {
-    margin-left: $distance;
-  }
-
-  @include RTL {
-    margin-right: $distance;
-  }
-}
-
-@mixin margin-right($distance) {
-  @include LTR {
-    margin-right: $distance;
-  }
-  @include RTL {
-    margin-left: $distance;
-  }
-}
-
-// Padding.
-@mixin padding($top, $right, $bottom, $left) {
-  padding: $top $right $bottom $left;
-
-  @include RTL {
-    padding: $top $left $bottom $right;
-  }
-}
-
-@mixin padding-left($distance) {
-  @include LTR {
-    padding-left: $distance;
-  }
-
-  @include RTL {
-    padding-right: $distance;
-  }
-}
-
-@mixin padding-right($distance) {
-  @include LTR {
-    padding-right: $distance;
-  }
-
-  @include RTL {
-    padding-left: $distance;
-  }
-}
-
-// Text-alignment.
-@mixin text-align($direction) {
-  @if $direction == left {
-    @include LTR {
-      text-align: left;
-    }
-
-    @include RTL {
-      text-align: right;
-    }
-  } @else {
-    @include LTR {
-      text-align: right;
-    }
-
-    @include RTL {
-      text-align: left;
-    }
-  }
-}
-
-// Box-shadow.
-@mixin box-shadow($left, $etc) {
-  @include LTR {
-    box-shadow: $left $etc;
-  }
-
-  @include RTL {
-    box-shadow: -$left $etc;
-  }
-}
-
-// Transforms.
-@mixin transform-scaleX($scaleX: 1) {
-  @include LTR {
-    transform: scaleX($scaleX);
-  }
-
-  @include RTL {
-    transform: scaleX(-$scaleX);
-  }
-}
-
-@mixin transform-translateX($distance) {
-  @include LTR {
-    transform: translateX($distance);
-  }
-
-  @include RTL {
-    transform: translateX(-$distance);
-  }
-}
-
-// Transitions. Only supported when ONLY left/right are declared
-@mixin transition-property($direction) {
-  @if $direction == left {
-    @include LTR {
-      transition-property: left;
-    }
-
-    @include RTL {
-      transition-property: right;
-    }
-  } @else {
-    @include LTR {
-      transition-property: right;
-    }
-
-    @include RTL {
-      transition-property: left;
-    }
-  }
-}
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Directionality mixins to generate LTR and RTL-specific styles
+
+// Base left-to-right mixin definition.
+@mixin ms-LTR {
+  [dir='ltr'] & {
+    @content;
+  }
+}
+
+// Base right-to-left mixin definition.
+@mixin ms-RTL {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+// Use baseRTL to set the default direction to right-to-left on
+// a root element (e.g. page or region) that needs RTL support.
+@mixin ms-base-RTL {
+  @include ms-RTL {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+  }
+}
+
+
+// Common CSS property mixins with support for RTL.
+// Use to automatically create RTL versions of your properties.
+
+// Border styles.
+@mixin ms-border-color($top, $right, $bottom, $left) {
+  border-color: $top $right $bottom $left;
+
+  @include ms-RTL {
+    border-color: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-border-left($width, $style, $color) {
+  @include ms-LTR {
+    border-left: $width $style $color;
+  }
+
+  @include ms-RTL {
+    border-right: $width $style $color;
+  }
+}
+
+@mixin ms-border-left-color($color) {
+  @include ms-LTR {
+    border-left-color: $color;
+  }
+
+  @include ms-RTL {
+    border-right-color: $color;
+  }
+}
+
+@mixin ms-border-left-style($style) {
+  @include ms-LTR {
+    border-left-style: $style;
+  }
+
+  @include ms-RTL {
+    border-right-style: $style;
+  }
+}
+
+@mixin ms-border-left-width($width) {
+  @include ms-LTR {
+    border-left-width: $width;
+  }
+
+  @include ms-RTL {
+    border-right-width: $width;
+  }
+}
+
+@mixin ms-border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+  border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+
+  @include ms-RTL {
+    border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+  }
+}
+
+@mixin ms-border-right($width, $style, $color) {
+  @include ms-LTR {
+    border-right: $width $style $color;
+  }
+
+  @include ms-RTL {
+    border-left: $width $style $color;
+  }
+}
+
+@mixin ms-border-right-color($color) {
+  @include ms-LTR {
+      border-right-color: $color;
+  }
+
+  @include ms-RTL {
+      border-left-color: $color;
+  }
+}
+
+@mixin ms-border-right-style($style) {
+  @include ms-LTR {
+    border-right-style: $style;
+  }
+  
+  @include ms-RTL {
+    border-left-style: $style;
+  }
+}
+
+@mixin ms-border-right-width($width) {
+  @include ms-LTR {
+    border-right-width: $width;
+  }
+
+  @include ms-RTL {
+    border-left-width: $width;
+  }
+}
+
+// Floats.
+@mixin ms-clear($side) {
+  @if $side == left {
+    @include ms-LTR {
+      clear: $side;
+    }
+
+    @include ms-RTL {
+      clear: right;
+    }
+  } @else if $side == right {
+    @include ms-LTR {
+      clear: $side;
+    }
+
+    @include ms-RTL {
+      clear: left;
+    }
+  } @else {
+      clear: $side;
+  }
+}
+
+@mixin ms-float($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      float: left;
+    }
+
+    @include ms-RTL {
+      float: right;
+    }
+  } @else {
+    @include ms-LTR {
+      float: right;
+    }
+
+    @include ms-RTL {
+      float: left;
+    }
+  }
+}
+
+// Positioning.
+@mixin ms-left($distance) {
+  @include ms-LTR {
+    left: $distance;
+  }
+
+  @include ms-RTL {
+    right: $distance;
+  }
+}
+
+@mixin ms-right($distance) {
+  @include ms-LTR {
+    right: $distance;
+  }
+
+  @include ms-RTL {
+    left: $distance;
+  }
+}
+
+// Margins.
+@mixin ms-margin($top, $right, $bottom, $left) {
+  margin: $top $right $bottom $left;
+
+  @include ms-RTL {
+    margin: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-margin-left($distance) {
+  @include ms-LTR {
+    margin-left: $distance;
+  }
+
+  @include ms-RTL {
+    margin-right: $distance;
+  }
+}
+
+@mixin ms-margin-right($distance) {
+  @include ms-LTR {
+    margin-right: $distance;
+  }
+  @include ms-RTL {
+    margin-left: $distance;
+  }
+}
+
+// Padding.
+@mixin ms-padding($top, $right, $bottom, $left) {
+  padding: $top $right $bottom $left;
+
+  @include ms-RTL {
+    padding: $top $left $bottom $right;
+  }
+}
+
+@mixin ms-padding-left($distance) {
+  @include ms-LTR {
+    padding-left: $distance;
+  }
+
+  @include ms-RTL {
+    padding-right: $distance;
+  }
+}
+
+@mixin ms-padding-right($distance) {
+  @include ms-LTR {
+    padding-right: $distance;
+  }
+
+  @include ms-RTL {
+    padding-left: $distance;
+  }
+}
+
+// Text-alignment.
+@mixin ms-text-align($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      text-align: left;
+    }
+
+    @include ms-RTL {
+      text-align: right;
+    }
+  } @else {
+    @include ms-LTR {
+      text-align: right;
+    }
+
+    @include ms-RTL {
+      text-align: left;
+    }
+  }
+}
+
+// Box-shadow.
+@mixin ms-box-shadow($left, $etc) {
+  @include ms-LTR {
+    box-shadow: $left $etc;
+  }
+
+  @include ms-RTL {
+    box-shadow: -$left $etc;
+  }
+}
+
+// Transforms.
+@mixin ms-transform-scaleX($scaleX: 1) {
+  @include ms-LTR {
+    transform: scaleX($scaleX);
+  }
+
+  @include ms-RTL {
+    transform: scaleX(-$scaleX);
+  }
+}
+
+@mixin ms-transform-translateX($distance) {
+  @include ms-LTR {
+    transform: translateX($distance);
+  }
+
+  @include ms-RTL {
+    transform: translateX(-$distance);
+  }
+}
+
+// Transitions. Only supported when ONLY left/right are declared
+@mixin ms-transition-property($direction) {
+  @if $direction == left {
+    @include ms-LTR {
+      transition-property: left;
+    }
+
+    @include ms-RTL {
+      transition-property: right;
+    }
+  } @else {
+    @include ms-LTR {
+      transition-property: right;
+    }
+
+    @include ms-RTL {
+      transition-property: left;
+    }
+  }
+}