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

data/vendor/assets/scss/{Fabric.Utilities.Output.scss → _Utility.scss}

@@ -1,46 +1,44 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Utility classes and mixins used throughout Fabric.
-
-@import "Fabric.Utilities";
-
-// The best box is a border box.
-.ms-u-borderBox, .ms-u-borderBox::before, .ms-u-borderBox::after {
-  @include ms-u-borderBox;
-}
-
-// To apply border base settings
-.ms-u-borderBase {
-  @include ms-u-borderBase;
-}
-
-// Ensures the block expands to the full height to enclose its floated childen.
-.ms-u-clearfix {
-  @include ms-u-clearfix;
-}
-
-// Basic border-box, margin, and padding reset.
-.ms-u-normalize {
-  @include ms-u-normalize;
-}
-
-// Use to set left, center, right text alignment styles 
-@include ms-u-textAlign(left, center, right);
-
-// Use to hide content while still making it readable by screen reader (Accessibility)
-.ms-u-screenReaderOnly {
-  @include ms-u-screenReaderOnly
-}
-
-// Use to add truncation with ellipsis
-.ms-u-textTruncate {
-  @include ms-u-textTruncate
-}
-
-// Use to disable text wrapping
-.ms-u-noWrap{
-  @include ms-u-noWrap
-}
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Some mixins are output to CSS classes as utilities.
+
+// The best box is a border box.
+.ms-borderBox, .ms-borderBox::before, .ms-borderBox::after {
+  @include ms-borderBox;
+}
+
+// To apply border base settings
+.ms-borderBase {
+  @include ms-borderBase;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+.ms-clearfix {
+  @include ms-clearfix;
+}
+
+// Basic border-box, margin, and padding reset.
+.ms-normalize {
+  @include ms-normalize;
+}
+
+// Use to set left, center, right text alignment styles 
+@include ms-textAlign(left, center, right);
+
+// Use to hide content while still making it readable by screen reader (Accessibility)
+.ms-screenReaderOnly {
+  @include ms-screenReaderOnly;
+}
+
+// Use to add truncation with ellipsis
+.ms-textTruncate {
+  @include ms-textTruncate;
+}
+
+// Use to disable text wrapping
+.ms-noWrap{
+  @include ms-noWrap;
+}

data/vendor/assets/scss/_Wrapper.scss

@@ -0,0 +1,41 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Wrapper component to set base typography.
+
+.ms-Fabric {
+  @include ms-Fabric;
+}
+
+// Create overrides for each language that has an alternate font-family.
+@include ms-font-family-language-override('ar', $ms-font-family-arabic);
+@include ms-font-family-language-override('bg', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('cs', $ms-font-family-east-european);
+@include ms-font-family-language-override('el', $ms-font-family-greek);
+@include ms-font-family-language-override('et', $ms-font-family-east-european);
+@include ms-font-family-language-override('he', $ms-font-family-hebrew);
+@include ms-font-family-language-override('hi', $ms-font-family-hindi);
+@include ms-font-family-language-override('hr', $ms-font-family-east-european);
+@include ms-font-family-language-override('hu', $ms-font-family-east-european);
+@include ms-font-family-language-override('ja', $ms-font-family-japanese);
+@include ms-font-family-language-override('kk', $ms-font-family-east-european);
+@include ms-font-family-language-override('ko', $ms-font-family-korean);
+@include ms-font-family-language-override('lt', $ms-font-family-east-european);
+@include ms-font-family-language-override('lv', $ms-font-family-east-european);
+@include ms-font-family-language-override('pl', $ms-font-family-east-european);
+@include ms-font-family-language-override('ru', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('sk', $ms-font-family-east-european);
+@include ms-font-family-language-override('sr-latn', $ms-font-family-east-european);
+@include ms-font-family-language-override('th', $ms-font-family-thai);
+@include ms-font-family-language-override('tr', $ms-font-family-east-european);
+@include ms-font-family-language-override('uk', $ms-font-family-cyrillic);
+@include ms-font-family-language-override('vi', $ms-font-family-vietnamese);
+@include ms-font-family-language-override('zh-hans', $ms-font-family-chinese-simplified);
+@include ms-font-family-language-override('zh-hant', $ms-font-family-chinese-traditional);
+
+// Modifier: Use Selawik as an open source alternative to Segoe UI.
+.ms-Fabric--selawik {
+  font-family: $ms-font-family-selawik;
+}

data/vendor/assets/scss/mixins/_Animation.Mixins.scss

@@ -0,0 +1,360 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Animations
+
+
+// Outputs the keyframes used by the animation classes
+@mixin ms-animation-keyframes() {
+  // Set a default value for the version-scoped variable if it isn't assigned
+  $ms-fabric-version-suffix: '' !default;
+
+  @keyframes ms-slideRightIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-10px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-20px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-40px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightIn400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(-400px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightOut40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0px, 0px); }
+    to { transform: translate3d(40px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideRightOut400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(400px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(10px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(20px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(40px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftIn400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(400px, 0px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftOut40#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(-40px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideLeftOut400#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0, 0px, 0px); }
+    to { transform: translate3d(-400px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 10px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 20px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideDownIn10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, -10px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideDownIn20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, -20px, 0px); }
+    to { transform: translate3d(0px, 0px, 0px); }
+  }
+
+  @keyframes ms-slideUpOut10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, -10px, 0px); }
+  }
+
+  @keyframes ms-slideUpOut20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, -20px, 0px); }
+  }
+
+  @keyframes ms-slideDownOut10#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, 10px, 0px); }
+  }
+
+  @keyframes ms-slideDownOut20#{$ms-fabric-version-suffix} {
+    from { transform: translate3d(0px, 0, 0px); }
+    to { transform: translate3d(0px, 20px, 0px); }
+  }
+
+  @keyframes ms-scaleUp100#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(.98, .98, 1); }
+    to { transform: scale3d(1, 1, 1); }
+  }
+
+  @keyframes ms-scaleUp103#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1, 1, 1); }
+    to { transform: scale3d(1.03, 1.03, 1); }
+  }
+
+  @keyframes ms-scaleDown98#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1, 1, 1); }
+    to { transform: scale3d(0.98, 0.98, 1); }
+  }
+
+  @keyframes ms-scaleDown100#{$ms-fabric-version-suffix} {
+    from { transform: scale3d(1.03, 1.03, 1); }
+    to { transform: scale3d(1, 1, 1); }
+  }
+
+  @keyframes ms-fadeIn#{$ms-fabric-version-suffix} {
+    from {
+      opacity: 0;
+      animation-timing-function: $ms-animation-ease-2;
+    }
+    to { opacity: 1; }
+  }
+
+  @keyframes ms-fadeOut#{$ms-fabric-version-suffix} {
+    from {
+      opacity: 1;
+      animation-timing-function: $ms-animation-ease-2;
+    }
+    to { opacity: 0; }
+  }
+
+  @keyframes ms-rotate90#{$ms-fabric-version-suffix} {
+    from { transform: rotateZ(0deg); }
+    to { transform: rotateZ(90deg); }
+  }
+
+  @keyframes ms-rotateN90#{$ms-fabric-version-suffix} {
+    from { transform: rotateZ(90deg); }
+    to { transform: rotateZ(0deg); }
+  }
+}
+
+// Generate an animation
+@mixin ms-animation($names, $duration, $timing: $ms-animation-ease-1, $fillMode: both) {
+  // Set a default value for the version-scoped variable if it isn't assigned
+  $ms-fabric-version-suffix: '' !default;
+
+  // Append the scoping suffix to each animation name
+  $namelist: ();
+
+  @each $name in $names {
+    $newname: $name#{$ms-fabric-version-suffix};
+
+    $namelist: append($namelist, unquote($newname), 'comma');
+  }
+
+  animation-name: $namelist;
+  animation-duration: $duration;
+  animation-timing-function: $timing;
+  animation-fill-mode: $fillMode;
+}
+
+// Slide
+@mixin ms-slideRightIn10 {
+  @include ms-animation((fadeIn, slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideRightIn20 {
+  @include ms-animation((fadeIn, slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideRightIn40 {
+  @include ms-animation((fadeIn, slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideRightIn400 {
+  @include ms-animation((fadeIn, slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideRightOut40 {
+  @include ms-animation((fadeOut, slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideRightOut400 {
+  @include ms-animation((fadeOut, slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideLeftIn10 {
+  @include ms-animation((fadeIn, slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideLeftIn20 {
+  @include ms-animation((fadeIn, slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideLeftIn40 {
+  @include ms-animation((fadeIn, slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideLeftIn400 {
+  @include ms-animation((fadeIn, slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideLeftOut40 {
+  @include ms-animation((fadeOut, slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideLeftOut400 {
+  @include ms-animation((fadeOut, slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpIn10 {
+  @include ms-animation((fadeIn, slideUpIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpIn20 {
+  @include ms-animation((fadeIn, slideUpIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideDownIn10 {
+  @include ms-animation((fadeIn, slideDownIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownIn20 {
+  @include ms-animation((fadeIn, slideDownIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideUpOut10 {
+  @include ms-animation((fadeOut, slideUpOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpOut20 {
+  @include ms-animation((fadeOut, slideUpOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut10 {
+  @include ms-animation((fadeOut, slideDownOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut20 {
+  @include ms-animation((fadeOut, slideDownOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+// Scale
+@mixin ms-scaleUpIn100 {
+  @include ms-animation((fadeIn, scaleUp100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-scaleUpOut103 {
+  @include ms-animation((fadeOut, scaleUp103), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownOut98 {
+  @include ms-animation((fadeOut, scaleDown98), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownIn100 {
+  @include ms-animation((fadeIn, scaleDown100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+// Rotate
+@mixin ms-rotate90deg {
+  // @todo: The duration should use a variable, likely $ms-animation-duration-1
+  @include ms-animation(rotate90, 0.1s, $ms-animation-ease-2);
+}
+
+@mixin ms-rotateN90deg {
+  // @todo: The duration should use a variable, likely $ms-animation-duration-1
+  @include ms-animation(rotateN90, 0.1s, $ms-animation-ease-2);
+}
+
+
+// Fade
+@mixin ms-fadeIn100 {
+  animation-duration: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.1s
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+}
+
+@mixin ms-fadeIn200 {
+  animation-duration: $ms-animation-duration-2; // @todo: Based on class name, likely intended to be 0.2s
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+}
+
+@mixin ms-fadeIn400 {
+  animation-duration: $ms-animation-duration-3; // @todo: Based on class name, likely intended to be 0.4s
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+}
+
+@mixin ms-fadeIn500 {
+  animation-duration: $ms-animation-duration-4; // @todo: Based on class name, likely intended to be 0.5s
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+}
+
+@mixin ms-fadeOut100 {
+  animation-duration: 0.1s; // @todo: This is the only duration that matches the class name
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+}
+
+@mixin ms-fadeOut200 {
+  animation-duration: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.2s
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+}
+
+@mixin ms-fadeOut400 {
+  animation-duration: $ms-animation-duration-3; // @todo: Based on class name, likely intended to be 0.4s
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+}
+
+@mixin ms-fadeOut500 {
+  animation-duration: $ms-animation-duration-4; // @todo: Based on class name, likely intended to be 0.5s
+  animation-name: fadeOut;
+  animation-fill-mode: both;
+}
+
+// Expand-collapse
+@mixin ms-expandCollapse100 {
+  transition: height 0.1s $ms-animation-ease-2; // @todo: This is the only duration that matches the class name
+}
+
+@mixin ms-expandCollapse200 {
+  transition: height $ms-animation-duration-1 $ms-animation-ease-2; // @todo: Based on class name, likely intended to be 0.2s
+}
+
+@mixin ms-expandCollapse400 {
+  transition: height $ms-animation-duration-3 $ms-animation-ease-2; // @todo: Based on class name, likely intended to be 0.4s
+}
+
+// Delay
+@mixin ms-delay100 {
+  animation-delay: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.1s
+}
+
+@mixin ms-delay200 {
+  animation-delay: $ms-animation-duration-2; // @todo: Based on class name, likely intended to be 0.2s
+}