first commit

node_modules/@fluentui/react/dist/sass/mixins/_Animation.Mixins.MDL2.scss

@@ -0,0 +1,447 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+// 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); }
+  }
+}
+
+// Wraps content in a 'prefers-reduced-motion' media query, so that it will only be
+// applied where the user has opted to reduce motion. This is currently supported by
+// Safari on iOS and macOS, and will likely be coming to other browsers in the future.
+//
+// See this article: https://css-tricks.com/introduction-reduced-motion-media-query/
+@mixin ms-prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+// Outputs the properties for 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, $newname, 'comma');
+  }
+
+  // Output the animation's properties.
+  animation-name: $namelist;
+  animation-duration: $duration;
+  animation-timing-function: $timing;
+  animation-fill-mode: $fillMode;
+
+  // Make the animation instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    animation: none;
+  }
+}
+
+// Ouptuts the properties for a transition.
+@mixin ms-transition($transition) {
+  transition: $transition;
+
+  // Make the transition instant for users who prefer no motion.
+  @include ms-prefers-reduced-motion {
+    transition: none;
+  }
+}
+
+// Slide
+@mixin ms-slideRightIn10 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn20 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightIn400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideRightOut40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideRightOut400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideLeftIn10 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn20 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftIn400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
+  }
+}
+
+@mixin ms-slideLeftOut40 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideLeftOut400 {
+  @include ms-LTR {
+    @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-slideUpIn10 {
+  @include ms-animation((ms-fadeIn, ms-slideUpIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpIn20 {
+  @include ms-animation((ms-fadeIn, ms-slideUpIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideDownIn10 {
+  @include ms-animation((ms-fadeIn, ms-slideDownIn10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownIn20 {
+  @include ms-animation((ms-fadeIn, ms-slideDownIn20), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-slideUpOut10 {
+  @include ms-animation((ms-fadeOut, ms-slideUpOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideUpOut20 {
+  @include ms-animation((ms-fadeOut, ms-slideUpOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut10 {
+  @include ms-animation((ms-fadeOut, ms-slideDownOut10), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-slideDownOut20 {
+  @include ms-animation((ms-fadeOut, ms-slideDownOut20), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+// Scale
+@mixin ms-scaleUpIn100 {
+  @include ms-animation((ms-fadeIn, ms-scaleUp100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+@mixin ms-scaleUpOut103 {
+  @include ms-animation((ms-fadeOut, ms-scaleUp103), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownOut98 {
+  @include ms-animation((ms-fadeOut, ms-scaleDown98), $ms-animation-duration-1, $ms-animation-ease-2);
+}
+
+@mixin ms-scaleDownIn100 {
+  @include ms-animation((ms-fadeIn, ms-scaleDown100), $ms-animation-duration-3, $ms-animation-ease-1);
+}
+
+// Rotate
+// @todo: These durations should use a variable, likely $ms-animation-duration-1
+@mixin ms-rotate90deg {
+  @include ms-LTR {
+    @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
+  }
+}
+
+@mixin ms-rotateN90deg {
+  @include ms-LTR {
+    @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
+  }
+  
+  @include ms-RTL {
+    @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
+  }
+}
+
+// Fade
+@mixin ms-fadeIn100 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-1);
+}
+
+@mixin ms-fadeIn200 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-2);
+}
+
+@mixin ms-fadeIn400 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-3);
+}
+
+@mixin ms-fadeIn500 {
+  @include ms-animation(ms-fadeIn, $ms-animation-duration-4);
+}
+
+@mixin ms-fadeOut100 {
+  @include ms-animation(ms-fadeOut, 0.1s); // @todo: This is the only duration that matches the class name
+}
+
+@mixin ms-fadeOut200 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-1); // @todo: Based on class name, likely intended to be 0.2s
+}
+
+@mixin ms-fadeOut400 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-3); // @todo: Based on class name, likely intended to be 0.4s
+}
+
+@mixin ms-fadeOut500 {
+  @include ms-animation(ms-fadeOut, $ms-animation-duration-4); // @todo: Based on class name, likely intended to be 0.5s
+}
+
+// Expand-collapse
+@mixin ms-expandCollapse100 {
+  @include ms-transition(height 0.1s $ms-animation-ease-2); // @todo: This is the only duration that matches the class name
+}
+
+@mixin ms-expandCollapse200 {
+  @include ms-transition(height $ms-animation-duration-1 $ms-animation-ease-2); // @todo: Based on class name, likely intended to be 0.2s
+}
+
+@mixin ms-expandCollapse400 {
+  @include ms-transition(height $ms-animation-duration-3 $ms-animation-ease-2); // @todo: Based on class name, likely intended to be 0.4s
+}
+
+// Utilities to set the animation delay property.
+@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
+}

node_modules/@fluentui/react/dist/sass/mixins/_Animation.Mixins.scss

@@ -0,0 +1,201 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Outputs the keyframes used by the animation classes
+@mixin ms-motion-keyframes() {
+  @keyframes ms-motion-fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ms-motion-fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ms-motion-scaleDownIn {
+    from {
+      transform: scale3d(1.15, 1.15, 1);
+    }
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes ms-motion-scaleDownOut {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+    to {
+      transform: scale3d(0.9, 0.9, 1);
+    }
+  }
+
+  @keyframes ms-motion-slideLeftOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(-48px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideRightOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(48px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideLeftIn {
+    from {
+      transform: translate3d(48px, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideRightIn {
+    from {
+      transform: translate3d(-48px, 0, 0);
+    }
+    to {
+      transform: translate3d(0px, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideUpOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -48px, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideDownOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 48px, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideUpIn {
+    from {
+      transform: translate3d(0, 48px, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ms-motion-slideDownIn {
+    from {
+      transform: translate3d(0, -48px, 0);
+    }
+    to {
+      transform: translate3d(0px, 0, 0);
+    }
+  }
+}
+
+// Fades.
+@mixin ms-motion-fadeIn {
+  animation: ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-fadeOut {
+  animation: ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+// Scales.
+@mixin ms-motion-scaleDownIn {
+  animation: ms-motion-scaleDownIn $ms-motion-duration-3 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-scaleDownOut {
+  animation: ms-motion-scaleDownOut $ms-motion-duration-3 $ms-motion-timing-decelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+// Slides.
+@mixin ms-motion-slideLeftOut {
+  @include ms-LTR {
+    animation: ms-motion-slideLeftOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideRightOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideRightOut {
+  @include ms-LTR {
+    animation: ms-motion-slideRightOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideLeftOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+      ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideLeftIn {
+  @include ms-LTR {
+    animation: ms-motion-slideLeftIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideRightIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideRightIn {
+  @include ms-LTR {
+    animation: ms-motion-slideRightIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+
+  @include ms-RTL {
+    animation: ms-motion-slideLeftIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+      ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+  }
+}
+
+@mixin ms-motion-slideUpOut {
+  animation: ms-motion-slideUpOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideDownOut {
+  animation: ms-motion-slideDownOut $ms-motion-duration-1 $ms-motion-timing-accelerate both,
+    ms-motion-fadeOut $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideUpIn {
+  animation: ms-motion-slideUpIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}
+
+@mixin ms-motion-slideDownIn {
+  animation: ms-motion-slideDownIn $ms-motion-duration-1 $ms-motion-timing-decelerate both,
+    ms-motion-fadeIn $ms-motion-duration-1 $ms-motion-timing-linear both;
+}

node_modules/@fluentui/react/dist/sass/mixins/_BrandIcon.Mixins.scss

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Generate classes for product and document icons
+@mixin ms-brand-icon-classes($retina) {
+	@each $icon in $ms-brand-icon-product-icons {
+		.ms-BrandIcon--#{$icon} {
+			@include ms-brand-icon-product-sizes($icon, $retina, $ms-brand-icon-product-images-path);
+		}
+	}
+
+	@each $icon in $ms-brand-icon-document-icons {
+		.ms-BrandIcon--#{$icon} {
+			@include ms-brand-icon-document-sizes($icon, $retina, $ms-brand-icon-document-images-path);
+		}
+	}
+}
+
+// Generate size classes for each product icon
+@mixin ms-brand-icon-product-sizes($icon, $retina, $images-path) {
+	@each $size in $ms-brand-icon-sizes {
+		&.ms-BrandIcon--icon#{$size} {
+			background-image: url(#{$images-path}/#{$icon}_#{$size}x#{$retina}.png);
+		}
+	}
+}
+
+// Generate size classes for each document icon
+@mixin ms-brand-icon-document-sizes($icon, $retina, $images-path) {
+	$scaleSuffix: '';
+	@if $retina == '1' {
+		$scaleSuffix: '';
+	} @else if $retina == '1_5' {
+		$scaleSuffix: '_1.5x';
+	} @else {
+		$scaleSuffix: '_#{$retina}x';
+	}
+
+	@each $size in $ms-brand-icon-sizes {
+		&.ms-BrandIcon--icon#{$size} {
+			background-image: url(#{$images-path}/#{$size}#{$scaleSuffix}/#{$icon}.png);
+		}
+	}
+}
+
+// Generate generic icon size classes
+@mixin ms-brand-icon-size-classes() {
+	@each $size in $ms-brand-icon-sizes {
+		.ms-BrandIcon--icon#{$size} {
+			background-size: 100% 100%;
+			width: #{$size}px;
+			height: #{$size}px;
+		}
+	}
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Background.Mixins.scss

@@ -0,0 +1,205 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+@mixin ms-bgColor-communicationShade30 {
+  background-color: $ms-color-communicationShade30;
+}
+@mixin ms-bgColor-communicationShade20 {
+  background-color: $ms-color-communicationShade20;
+}
+@mixin ms-bgColor-communicationShade10 {
+  background-color: $ms-color-communicationShade10;
+}
+@mixin ms-bgColor-communicationPrimary {
+  background-color: $ms-color-communicationPrimary;
+}
+@mixin ms-bgColor-communicationTint10 {
+  background-color: $ms-color-communicationTint10;
+}
+@mixin ms-bgColor-communicationTint20 {
+  background-color: $ms-color-communicationTint20;
+}
+@mixin ms-bgColor-communicationTint30 {
+  background-color: $ms-color-communicationTint30;
+}
+@mixin ms-bgColor-communicationTint40 {
+  background-color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-bgColor-black {
+  background-color: $ms-color-black;
+}
+@mixin ms-bgColor-gray220 {
+  background-color: $ms-color-gray220;
+}
+@mixin ms-bgColor-gray210 {
+  background-color: $ms-color-gray210;
+}
+@mixin ms-bgColor-gray200 {
+  background-color: $ms-color-gray200;
+}
+@mixin ms-bgColor-gray190 {
+  background-color: $ms-color-gray190;
+}
+@mixin ms-bgColor-gray180 {
+  background-color: $ms-color-gray180;
+}
+@mixin ms-bgColor-gray170 {
+  background-color: $ms-color-gray170;
+}
+@mixin ms-bgColor-gray160 {
+  background-color: $ms-color-gray160;
+}
+@mixin ms-bgColor-gray150 {
+  background-color: $ms-color-gray150;
+}
+@mixin ms-bgColor-gray140 {
+  background-color: $ms-color-gray140;
+}
+@mixin ms-bgColor-gray130 {
+  background-color: $ms-color-gray130;
+}
+@mixin ms-bgColor-gray120 {
+  background-color: $ms-color-gray120;
+}
+@mixin ms-bgColor-gray110 {
+  background-color: $ms-color-gray110;
+}
+@mixin ms-bgColor-gray100 {
+  background-color: $ms-color-gray100;
+}
+@mixin ms-bgColor-gray90 {
+  background-color: $ms-color-gray90;
+}
+@mixin ms-bgColor-gray80 {
+  background-color: $ms-color-gray80;
+}
+@mixin ms-bgColor-gray70 {
+  background-color: $ms-color-gray70;
+}
+@mixin ms-bgColor-gray60 {
+  background-color: $ms-color-gray60;
+}
+@mixin ms-bgColor-gray50 {
+  background-color: $ms-color-gray50;
+}
+@mixin ms-bgColor-gray40 {
+  background-color: $ms-color-gray40;
+}
+@mixin ms-bgColor-gray30 {
+  background-color: $ms-color-gray30;
+}
+@mixin ms-bgColor-gray20 {
+  background-color: $ms-color-gray20;
+}
+@mixin ms-bgColor-gray10 {
+  background-color: $ms-color-gray10;
+}
+@mixin ms-bgColor-white {
+  background-color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-bgColor-sharedPinkRed10 {
+  background-color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-bgColor-sharedRed20 {
+  background-color: $ms-color-sharedRed20;
+}
+@mixin ms-bgColor-sharedRed10 {
+  background-color: $ms-color-sharedRed10;
+}
+@mixin ms-bgColor-sharedRedOrange20 {
+  background-color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-bgColor-sharedRedOrange10 {
+  background-color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-bgColor-sharedOrange30 {
+  background-color: $ms-color-sharedOrange30;
+}
+@mixin ms-bgColor-sharedOrange20 {
+  background-color: $ms-color-sharedOrange20;
+}
+@mixin ms-bgColor-sharedOrange10 {
+  background-color: $ms-color-sharedOrange10;
+}
+@mixin ms-bgColor-sharedYellow10 {
+  background-color: $ms-color-sharedYellow10;
+}
+@mixin ms-bgColor-sharedOrangeYellow20 {
+  background-color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-bgColor-sharedOrangeYellow10 {
+  background-color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-bgColor-sharedYellowGreen10 {
+  background-color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-bgColor-sharedGreen20 {
+  background-color: $ms-color-sharedGreen20;
+}
+@mixin ms-bgColor-sharedGreen10 {
+  background-color: $ms-color-sharedGreen10;
+}
+@mixin ms-bgColor-sharedGreenCyan10 {
+  background-color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-bgColor-sharedCyan40 {
+  background-color: $ms-color-sharedCyan40;
+}
+@mixin ms-bgColor-sharedCyan30 {
+  background-color: $ms-color-sharedCyan30;
+}
+@mixin ms-bgColor-sharedCyan20 {
+  background-color: $ms-color-sharedCyan20;
+}
+@mixin ms-bgColor-sharedCyan10 {
+  background-color: $ms-color-sharedCyan10;
+}
+@mixin ms-bgColor-sharedCyanBlue20 {
+  background-color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-bgColor-sharedCyanBlue10 {
+  background-color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-bgColor-sharedBlue10 {
+  background-color: $ms-color-sharedBlue10;
+}
+@mixin ms-bgColor-sharedBlueMagenta40 {
+  background-color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-bgColor-sharedBlueMagenta30 {
+  background-color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-bgColor-sharedBlueMagenta20 {
+  background-color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-bgColor-sharedBlueMagenta10 {
+  background-color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-bgColor-sharedMagenta20 {
+  background-color: $ms-color-sharedMagenta20;
+}
+@mixin ms-bgColor-sharedMagenta10 {
+  background-color: $ms-color-sharedMagenta10;
+}
+@mixin ms-bgColor-sharedMagentaPink20 {
+  background-color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-bgColor-sharedMagentaPink10 {
+  background-color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-bgColor-sharedGray40 {
+  background-color: $ms-color-sharedGray40;
+}
+@mixin ms-bgColor-sharedGray30 {
+  background-color: $ms-color-sharedGray30;
+}
+@mixin ms-bgColor-sharedGray20 {
+  background-color: $ms-color-sharedGray20;
+}
+@mixin ms-bgColor-sharedGray10 {
+  background-color: $ms-color-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Border.Mixins.scss

@@ -0,0 +1,205 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Communication
+@mixin ms-borderColor-communicationShade30 {
+  border-color: $ms-color-communicationShade30;
+}
+@mixin ms-borderColor-communicationShade20 {
+  border-color: $ms-color-communicationShade20;
+}
+@mixin ms-borderColor-communicationShade10 {
+  border-color: $ms-color-communicationShade10;
+}
+@mixin ms-borderColor-communicationPrimary {
+  border-color: $ms-color-communicationPrimary;
+}
+@mixin ms-borderColor-communicationTint10 {
+  border-color: $ms-color-communicationTint10;
+}
+@mixin ms-borderColor-communicationTint20 {
+  border-color: $ms-color-communicationTint20;
+}
+@mixin ms-borderColor-communicationTint30 {
+  border-color: $ms-color-communicationTint30;
+}
+@mixin ms-borderColor-communicationTint40 {
+  border-color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-borderColor-black {
+  border-color: $ms-color-black;
+}
+@mixin ms-borderColor-gray220 {
+  border-color: $ms-color-gray220;
+}
+@mixin ms-borderColor-gray210 {
+  border-color: $ms-color-gray210;
+}
+@mixin ms-borderColor-gray200 {
+  border-color: $ms-color-gray200;
+}
+@mixin ms-borderColor-gray190 {
+  border-color: $ms-color-gray190;
+}
+@mixin ms-borderColor-gray180 {
+  border-color: $ms-color-gray180;
+}
+@mixin ms-borderColor-gray170 {
+  border-color: $ms-color-gray170;
+}
+@mixin ms-borderColor-gray160 {
+  border-color: $ms-color-gray160;
+}
+@mixin ms-borderColor-gray150 {
+  border-color: $ms-color-gray150;
+}
+@mixin ms-borderColor-gray140 {
+  border-color: $ms-color-gray140;
+}
+@mixin ms-borderColor-gray130 {
+  border-color: $ms-color-gray130;
+}
+@mixin ms-borderColor-gray120 {
+  border-color: $ms-color-gray120;
+}
+@mixin ms-borderColor-gray110 {
+  border-color: $ms-color-gray110;
+}
+@mixin ms-borderColor-gray100 {
+  border-color: $ms-color-gray100;
+}
+@mixin ms-borderColor-gray90 {
+  border-color: $ms-color-gray90;
+}
+@mixin ms-borderColor-gray80 {
+  border-color: $ms-color-gray80;
+}
+@mixin ms-borderColor-gray70 {
+  border-color: $ms-color-gray70;
+}
+@mixin ms-borderColor-gray60 {
+  border-color: $ms-color-gray60;
+}
+@mixin ms-borderColor-gray50 {
+  border-color: $ms-color-gray50;
+}
+@mixin ms-borderColor-gray40 {
+  border-color: $ms-color-gray40;
+}
+@mixin ms-borderColor-gray30 {
+  border-color: $ms-color-gray30;
+}
+@mixin ms-borderColor-gray20 {
+  border-color: $ms-color-gray20;
+}
+@mixin ms-borderColor-gray10 {
+  border-color: $ms-color-gray10;
+}
+@mixin ms-borderColor-white {
+  border-color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-borderColor-sharedPinkRed10 {
+  border-color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-borderColor-sharedRed20 {
+  border-color: $ms-color-sharedRed20;
+}
+@mixin ms-borderColor-sharedRed10 {
+  border-color: $ms-color-sharedRed10;
+}
+@mixin ms-borderColor-sharedRedOrange20 {
+  border-color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-borderColor-sharedRedOrange10 {
+  border-color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-borderColor-sharedOrange30 {
+  border-color: $ms-color-sharedOrange30;
+}
+@mixin ms-borderColor-sharedOrange20 {
+  border-color: $ms-color-sharedOrange20;
+}
+@mixin ms-borderColor-sharedOrange10 {
+  border-color: $ms-color-sharedOrange10;
+}
+@mixin ms-borderColor-sharedYellow10 {
+  border-color: $ms-color-sharedYellow10;
+}
+@mixin ms-borderColor-sharedOrangeYellow20 {
+  border-color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-borderColor-sharedOrangeYellow10 {
+  border-color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-borderColor-sharedYellowGreen10 {
+  border-color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-borderColor-sharedGreen20 {
+  border-color: $ms-color-sharedGreen20;
+}
+@mixin ms-borderColor-sharedGreen10 {
+  border-color: $ms-color-sharedGreen10;
+}
+@mixin ms-borderColor-sharedGreenCyan10 {
+  border-color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-borderColor-sharedCyan40 {
+  border-color: $ms-color-sharedCyan40;
+}
+@mixin ms-borderColor-sharedCyan30 {
+  border-color: $ms-color-sharedCyan30;
+}
+@mixin ms-borderColor-sharedCyan20 {
+  border-color: $ms-color-sharedCyan20;
+}
+@mixin ms-borderColor-sharedCyan10 {
+  border-color: $ms-color-sharedCyan10;
+}
+@mixin ms-borderColor-sharedCyanBlue20 {
+  border-color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-borderColor-sharedCyanBlue10 {
+  border-color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-borderColor-sharedBlue10 {
+  border-color: $ms-color-sharedBlue10;
+}
+@mixin ms-borderColor-sharedBlueMagenta40 {
+  border-color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-borderColor-sharedBlueMagenta30 {
+  border-color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-borderColor-sharedBlueMagenta20 {
+  border-color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-borderColor-sharedBlueMagenta10 {
+  border-color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-borderColor-sharedMagenta20 {
+  border-color: $ms-color-sharedMagenta20;
+}
+@mixin ms-borderColor-sharedMagenta10 {
+  border-color: $ms-color-sharedMagenta10;
+}
+@mixin ms-borderColor-sharedMagentaPink20 {
+  border-color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-borderColor-sharedMagentaPink10 {
+  border-color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-borderColor-sharedGray40 {
+  border-color: $ms-color-sharedGray40;
+}
+@mixin ms-borderColor-sharedGray30 {
+  border-color: $ms-color-sharedGray30;
+}
+@mixin ms-borderColor-sharedGray20 {
+  border-color: $ms-color-sharedGray20;
+}
+@mixin ms-borderColor-sharedGray10 {
+  border-color: $ms-color-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Font.Mixins.scss

@@ -0,0 +1,206 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+
+// Communication
+@mixin ms-fontColor-communicationShade30 {
+  color: $ms-color-communicationShade30;
+}
+@mixin ms-fontColor-communicationShade20 {
+  color: $ms-color-communicationShade20;
+}
+@mixin ms-fontColor-communicationShade10 {
+  color: $ms-color-communicationShade10;
+}
+@mixin ms-fontColor-communicationPrimary {
+  color: $ms-color-communicationPrimary;
+}
+@mixin ms-fontColor-communicationTint10 {
+  color: $ms-color-communicationTint10;
+}
+@mixin ms-fontColor-communicationTint20 {
+  color: $ms-color-communicationTint20;
+}
+@mixin ms-fontColor-communicationTint30 {
+  color: $ms-color-communicationTint30;
+}
+@mixin ms-fontColor-communicationTint40 {
+  color: $ms-color-communicationTint40;
+}
+
+// Neutral
+@mixin ms-fontColor-black {
+  color: $ms-color-black;
+}
+@mixin ms-fontColor-gray220 {
+  color: $ms-color-gray220;
+}
+@mixin ms-fontColor-gray210 {
+  color: $ms-color-gray210;
+}
+@mixin ms-fontColor-gray200 {
+  color: $ms-color-gray200;
+}
+@mixin ms-fontColor-gray190 {
+  color: $ms-color-gray190;
+}
+@mixin ms-fontColor-gray180 {
+  color: $ms-color-gray180;
+}
+@mixin ms-fontColor-gray170 {
+  color: $ms-color-gray170;
+}
+@mixin ms-fontColor-gray160 {
+  color: $ms-color-gray160;
+}
+@mixin ms-fontColor-gray150 {
+  color: $ms-color-gray150;
+}
+@mixin ms-fontColor-gray140 {
+  color: $ms-color-gray140;
+}
+@mixin ms-fontColor-gray130 {
+  color: $ms-color-gray130;
+}
+@mixin ms-fontColor-gray120 {
+  color: $ms-color-gray120;
+}
+@mixin ms-fontColor-gray110 {
+  color: $ms-color-gray110;
+}
+@mixin ms-fontColor-gray100 {
+  color: $ms-color-gray100;
+}
+@mixin ms-fontColor-gray90 {
+  color: $ms-color-gray90;
+}
+@mixin ms-fontColor-gray80 {
+  color: $ms-color-gray80;
+}
+@mixin ms-fontColor-gray70 {
+  color: $ms-color-gray70;
+}
+@mixin ms-fontColor-gray60 {
+  color: $ms-color-gray60;
+}
+@mixin ms-fontColor-gray50 {
+  color: $ms-color-gray50;
+}
+@mixin ms-fontColor-gray40 {
+  color: $ms-color-gray40;
+}
+@mixin ms-fontColor-gray30 {
+  color: $ms-color-gray30;
+}
+@mixin ms-fontColor-gray20 {
+  color: $ms-color-gray20;
+}
+@mixin ms-fontColor-gray10 {
+  color: $ms-color-gray10;
+}
+@mixin ms-fontColor-white {
+  color: $ms-color-white;
+}
+
+// Shared
+@mixin ms-fontColor-sharedPinkRed10 {
+  color: $ms-color-sharedPinkRed10;
+}
+@mixin ms-fontColor-sharedRed20 {
+  color: $ms-color-sharedRed20;
+}
+@mixin ms-fontColor-sharedRed10 {
+  color: $ms-color-sharedRed10;
+}
+@mixin ms-fontColor-sharedRedOrange20 {
+  color: $ms-color-sharedRedOrange20;
+}
+@mixin ms-fontColor-sharedRedOrange10 {
+  color: $ms-color-sharedRedOrange10;
+}
+@mixin ms-fontColor-sharedOrange30 {
+  color: $ms-color-sharedOrange30;
+}
+@mixin ms-fontColor-sharedOrange20 {
+  color: $ms-color-sharedOrange20;
+}
+@mixin ms-fontColor-sharedOrange10 {
+  color: $ms-color-sharedOrange10;
+}
+@mixin ms-fontColor-sharedYellow10 {
+  color: $ms-color-sharedYellow10;
+}
+@mixin ms-fontColor-sharedOrangeYellow20 {
+  color: $ms-color-sharedOrangeYellow20;
+}
+@mixin ms-fontColor-sharedOrangeYellow10 {
+  color: $ms-color-sharedOrangeYellow10;
+}
+@mixin ms-fontColor-sharedYellowGreen10 {
+  color: $ms-color-sharedYellowGreen10;
+}
+@mixin ms-fontColor-sharedGreen20 {
+  color: $ms-color-sharedGreen20;
+}
+@mixin ms-fontColor-sharedGreen10 {
+  color: $ms-color-sharedGreen10;
+}
+@mixin ms-fontColor-sharedGreenCyan10 {
+  color: $ms-color-sharedGreenCyan10;
+}
+@mixin ms-fontColor-sharedCyan40 {
+  color: $ms-color-sharedCyan40;
+}
+@mixin ms-fontColor-sharedCyan30 {
+  color: $ms-color-sharedCyan30;
+}
+@mixin ms-fontColor-sharedCyan20 {
+  color: $ms-color-sharedCyan20;
+}
+@mixin ms-fontColor-sharedCyan10 {
+  color: $ms-color-sharedCyan10;
+}
+@mixin ms-fontColor-sharedCyanBlue20 {
+  color: $ms-color-sharedCyanBlue20;
+}
+@mixin ms-fontColor-sharedCyanBlue10 {
+  color: $ms-color-sharedCyanBlue10;
+}
+@mixin ms-fontColor-sharedBlue10 {
+  color: $ms-color-sharedBlue10;
+}
+@mixin ms-fontColor-sharedBlueMagenta40 {
+  color: $ms-color-sharedBlueMagenta40;
+}
+@mixin ms-fontColor-sharedBlueMagenta30 {
+  color: $ms-color-sharedBlueMagenta30;
+}
+@mixin ms-fontColor-sharedBlueMagenta20 {
+  color: $ms-color-sharedBlueMagenta20;
+}
+@mixin ms-fontColor-sharedBlueMagenta10 {
+  color: $ms-color-sharedBlueMagenta10;
+}
+@mixin ms-fontColor-sharedMagenta20 {
+  color: $ms-color-sharedMagenta20;
+}
+@mixin ms-fontColor-sharedMagenta10 {
+  color: $ms-color-sharedMagenta10;
+}
+@mixin ms-fontColor-sharedMagentaPink20 {
+  color: $ms-color-sharedMagentaPink20;
+}
+@mixin ms-fontColor-sharedMagentaPink10 {
+  color: $ms-color-sharedMagentaPink10;
+}
+@mixin ms-fontColor-sharedGray40 {
+  color: $ms-color-sharedGray40;
+}
+@mixin ms-fontColor-sharedGray30 {
+  color: $ms-color-sharedGray30;
+}
+@mixin ms-fontColor-sharedGray20 {
+  color: $ms-color-sharedGray20;
+}
+@mixin ms-fontColor-sharedGray10 {
+  color: $ms-color-sharedGray10;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Mixins.MDL2.scss

@@ -0,0 +1,545 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+//== Theme colors
+//
+
+// Background
+@mixin ms-bgColor-themeDark {
+  background-color: $ms-color-themeDark;
+}
+@mixin ms-bgColor-themeDarkAlt {
+  background-color: $ms-color-themeDarkAlt;
+}
+@mixin ms-bgColor-themeDarker {
+  background-color: $ms-color-themeDarker;
+}
+@mixin ms-bgColor-themePrimary {
+  background-color: $ms-color-themePrimary;
+}
+@mixin ms-bgColor-themeSecondary {
+  background-color: $ms-color-themeSecondary;
+}
+@mixin ms-bgColor-themeTertiary {
+  background-color: $ms-color-themeTertiary;
+}
+@mixin ms-bgColor-themeLight {
+  background-color: $ms-color-themeLight;
+}
+@mixin ms-bgColor-themeLighter {
+  background-color: $ms-color-themeLighter;
+}
+@mixin ms-bgColor-themeLighterAlt {
+  background-color: $ms-color-themeLighterAlt;
+}
+
+// Border
+@mixin ms-borderColor-themeDark {
+  border-color: $ms-color-themeDark;
+}
+@mixin ms-borderColor-themeDarkAlt {
+  border-color: $ms-color-themeDarkAlt;
+}
+@mixin ms-borderColor-themeDarker {
+  border-color: $ms-color-themeDarker;
+}
+@mixin ms-borderColor-themePrimary {
+  border-color: $ms-color-themePrimary;
+}
+@mixin ms-borderColor-themeSecondary {
+  border-color: $ms-color-themeSecondary;
+}
+@mixin ms-borderColor-themeTertiary {
+  border-color: $ms-color-themeTertiary;
+}
+@mixin ms-borderColor-themeLight {
+  border-color: $ms-color-themeLight;
+}
+@mixin ms-borderColor-themeLighter {
+  border-color: $ms-color-themeLighter;
+}
+@mixin ms-borderColor-themeLighterAlt {
+  border-color: $ms-color-themeLighterAlt;
+}
+
+// Font
+@mixin ms-fontColor-themeDarker {
+  color: $ms-color-themeDarker;
+}
+@mixin ms-fontColor-themeDark {
+  color: $ms-color-themeDark;
+}
+@mixin ms-fontColor-themeDarkAlt {
+  color: $ms-color-themeDarkAlt;
+}
+@mixin ms-fontColor-themePrimary {
+  color: $ms-color-themePrimary;
+}
+@mixin ms-fontColor-themeSecondary {
+  color: $ms-color-themeSecondary;
+}
+@mixin ms-fontColor-themeTertiary {
+  color: $ms-color-themeTertiary;
+}
+@mixin ms-fontColor-themeLight {
+  color: $ms-color-themeLight;
+}
+@mixin ms-fontColor-themeLighter {
+  color: $ms-color-themeLighter;
+}
+@mixin ms-fontColor-themeLighterAlt {
+  color: $ms-color-themeLighterAlt;
+}
+
+//== Neutral colors
+//
+
+// Background
+@mixin ms-bgColor-black {
+  background-color: $ms-color-black;
+}
+@mixin ms-bgColor-neutralDark {
+  background-color: $ms-color-neutralDark;
+}
+@mixin ms-bgColor-neutralPrimary {
+  background-color: $ms-color-neutralPrimary;
+}
+@mixin ms-bgColor-neutralPrimaryAlt {
+  background-color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-bgColor-neutralSecondary {
+  background-color: $ms-color-neutralSecondary;
+}
+@mixin ms-bgColor-neutralSecondaryAlt {
+  background-color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-bgColor-neutralTertiary {
+  background-color: $ms-color-neutralTertiary;
+}
+@mixin ms-bgColor-neutralTertiaryAlt {
+  background-color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-bgColor-neutralQuaternary {
+  background-color: $ms-color-neutralQuaternary;
+}
+@mixin ms-bgColor-neutralQuaternaryAlt {
+  background-color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-bgColor-neutralLight {
+  background-color: $ms-color-neutralLight;
+}
+@mixin ms-bgColor-neutralLighter {
+  background-color: $ms-color-neutralLighter;
+}
+@mixin ms-bgColor-neutralLighterAlt {
+  background-color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-bgColor-white {
+  background-color: $ms-color-white;
+}
+
+// Border
+@mixin ms-borderColor-black {
+  border-color: $ms-color-black;
+}
+@mixin ms-borderColor-neutralDark {
+  border-color: $ms-color-neutralDark;
+}
+@mixin ms-borderColor-neutralPrimary {
+  border-color: $ms-color-neutralPrimary;
+}
+@mixin ms-borderColor-neutralPrimaryAlt {
+  border-color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-borderColor-neutralSecondary {
+  border-color: $ms-color-neutralSecondary;
+}
+@mixin ms-borderColor-neutralSecondaryAlt {
+  border-color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-borderColor-neutralTertiary {
+  border-color: $ms-color-neutralTertiary;
+}
+@mixin ms-borderColor-neutralTertiaryAlt {
+  border-color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-borderColor-neutralQuaternary {
+  border-color: $ms-color-neutralQuaternary;
+}
+@mixin ms-borderColor-neutralQuaternaryAlt {
+  border-color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-borderColor-neutralLight {
+  border-color: $ms-color-neutralLight;
+}
+@mixin ms-borderColor-neutralLighter {
+  border-color: $ms-color-neutralLighter;
+}
+@mixin ms-borderColor-neutralLighterAlt {
+  border-color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-borderColor-white {
+  border-color: $ms-color-white;
+}
+
+// Font
+@mixin ms-fontColor-black {
+  color: $ms-color-black;
+}
+@mixin ms-fontColor-neutralDark {
+  color: $ms-color-neutralDark;
+}
+@mixin ms-fontColor-neutralPrimary {
+  color: $ms-color-neutralPrimary;
+}
+@mixin ms-fontColor-neutralPrimaryAlt {
+  color: $ms-color-neutralPrimaryAlt;
+}
+@mixin ms-fontColor-neutralSecondary {
+  color: $ms-color-neutralSecondary;
+}
+@mixin ms-fontColor-neutralSecondaryAlt {
+  color: $ms-color-neutralSecondaryAlt;
+}
+@mixin ms-fontColor-neutralTertiary {
+  color: $ms-color-neutralTertiary;
+}
+@mixin ms-fontColor-neutralTertiaryAlt {
+  color: $ms-color-neutralTertiaryAlt;
+}
+@mixin ms-fontColor-neutralQuaternary {
+  color: $ms-color-neutralQuaternary;
+}
+@mixin ms-fontColor-neutralQuaternaryAlt {
+  color: $ms-color-neutralQuaternaryAlt;
+}
+@mixin ms-fontColor-neutralLight {
+  color: $ms-color-neutralLight;
+}
+@mixin ms-fontColor-neutralLighter {
+  color: $ms-color-neutralLighter;
+}
+@mixin ms-fontColor-neutralLighterAlt {
+  color: $ms-color-neutralLighterAlt;
+}
+@mixin ms-fontColor-white {
+  color: $ms-color-white;
+}
+
+//== Brand and accent colors
+//
+
+// Background
+@mixin ms-bgColor-yellow {
+  background-color: $ms-color-yellow;
+}
+@mixin ms-bgColor-yellowLight {
+  background-color: $ms-color-yellowLight;
+}
+@mixin ms-bgColor-orange {
+  background-color: $ms-color-orange;
+}
+@mixin ms-bgColor-orangeLight {
+  background-color: $ms-color-orangeLight;
+}
+@mixin ms-bgColor-orangeLighter {
+  background-color: $ms-color-orangeLighter;
+}
+@mixin ms-bgColor-redDark {
+  background-color: $ms-color-redDark;
+}
+@mixin ms-bgColor-red {
+  background-color: $ms-color-red;
+}
+@mixin ms-bgColor-magentaDark {
+  background-color: $ms-color-magentaDark;
+}
+@mixin ms-bgColor-magenta {
+  background-color: $ms-color-magenta;
+}
+@mixin ms-bgColor-magentaLight {
+  background-color: $ms-color-magentaLight;
+}
+@mixin ms-bgColor-purpleDark {
+  background-color: $ms-color-purpleDark;
+}
+@mixin ms-bgColor-purple {
+  background-color: $ms-color-purple;
+}
+@mixin ms-bgColor-purpleLight {
+  background-color: $ms-color-purpleLight;
+}
+@mixin ms-bgColor-blueDark {
+  background-color: $ms-color-blueDark;
+}
+@mixin ms-bgColor-blueMid {
+  background-color: $ms-color-blueMid;
+}
+@mixin ms-bgColor-blue {
+  background-color: $ms-color-blue;
+}
+@mixin ms-bgColor-blueLight {
+  background-color: $ms-color-blueLight;
+}
+@mixin ms-bgColor-tealDark {
+  background-color: $ms-color-tealDark;
+}
+@mixin ms-bgColor-teal {
+  background-color: $ms-color-teal;
+}
+@mixin ms-bgColor-tealLight {
+  background-color: $ms-color-tealLight;
+}
+@mixin ms-bgColor-greenDark {
+  background-color: $ms-color-greenDark;
+}
+@mixin ms-bgColor-green {
+  background-color: $ms-color-green;
+}
+@mixin ms-bgColor-greenLight {
+  background-color: $ms-color-greenLight;
+}
+
+// Border
+@mixin ms-borderColor-yellow {
+  border-color: $ms-color-yellow;
+}
+@mixin ms-borderColor-yellowLight {
+  border-color: $ms-color-yellowLight;
+}
+@mixin ms-borderColor-orange {
+  border-color: $ms-color-orange;
+}
+@mixin ms-borderColor-orangeLight {
+  border-color: $ms-color-orangeLight;
+}
+@mixin ms-borderColor-orangeLighter {
+  border-color: $ms-color-orangeLighter;
+}
+@mixin ms-borderColor-redDark {
+  border-color: $ms-color-redDark;
+}
+@mixin ms-borderColor-red {
+  border-color: $ms-color-red;
+}
+@mixin ms-borderColor-magentaDark {
+  border-color: $ms-color-magentaDark;
+}
+@mixin ms-borderColor-magenta {
+  border-color: $ms-color-magenta;
+}
+@mixin ms-borderColor-magentaLight {
+  border-color: $ms-color-magentaLight;
+}
+@mixin ms-borderColor-purpleDark {
+  border-color: $ms-color-purpleDark;
+}
+@mixin ms-borderColor-purple {
+  border-color: $ms-color-purple;
+}
+@mixin ms-borderColor-purpleLight {
+  border-color: $ms-color-purpleLight;
+}
+@mixin ms-borderColor-blueDark {
+  border-color: $ms-color-blueDark;
+}
+@mixin ms-borderColor-blueMid {
+  border-color: $ms-color-blueMid;
+}
+@mixin ms-borderColor-blue {
+  border-color: $ms-color-blue;
+}
+@mixin ms-borderColor-blueLight {
+  border-color: $ms-color-blueLight;
+}
+@mixin ms-borderColor-tealDark {
+  border-color: $ms-color-tealDark;
+}
+@mixin ms-borderColor-teal {
+  border-color: $ms-color-teal;
+}
+@mixin ms-borderColor-tealLight {
+  border-color: $ms-color-tealLight;
+}
+@mixin ms-borderColor-greenDark {
+  border-color: $ms-color-greenDark;
+}
+@mixin ms-borderColor-green {
+  border-color: $ms-color-green;
+}
+@mixin ms-borderColor-greenLight {
+  border-color: $ms-color-greenLight;
+}
+
+// Font
+@mixin ms-fontColor-yellow {
+  color: $ms-color-yellow;
+}
+@mixin ms-fontColor-yellowLight {
+  color: $ms-color-yellowLight;
+}
+@mixin ms-fontColor-orange {
+  color: $ms-color-orange;
+}
+@mixin ms-fontColor-orangeLight {
+  color: $ms-color-orangeLight;
+}
+@mixin ms-fontColor-orangeLighter {
+  color: $ms-color-orangeLighter;
+}
+@mixin ms-fontColor-redDark {
+  color: $ms-color-redDark;
+}
+@mixin ms-fontColor-red {
+  color: $ms-color-red;
+}
+@mixin ms-fontColor-magentaDark {
+  color: $ms-color-magentaDark;
+}
+@mixin ms-fontColor-magenta {
+  color: $ms-color-magenta;
+}
+@mixin ms-fontColor-magentaLight {
+  color: $ms-color-magentaLight;
+}
+@mixin ms-fontColor-purpleDark {
+  color: $ms-color-purpleDark;
+}
+@mixin ms-fontColor-purple {
+  color: $ms-color-purple;
+}
+@mixin ms-fontColor-purpleLight {
+  color: $ms-color-purpleLight;
+}
+@mixin ms-fontColor-blueDark {
+  color: $ms-color-blueDark;
+}
+@mixin ms-fontColor-blueMid {
+  color: $ms-color-blueMid;
+}
+@mixin ms-fontColor-blue {
+  color: $ms-color-blue;
+}
+@mixin ms-fontColor-blueLight {
+  color: $ms-color-blueLight;
+}
+@mixin ms-fontColor-tealDark {
+  color: $ms-color-tealDark;
+}
+@mixin ms-fontColor-teal {
+  color: $ms-color-teal;
+}
+@mixin ms-fontColor-tealLight {
+  color: $ms-color-tealLight;
+}
+@mixin ms-fontColor-greenDark {
+  color: $ms-color-greenDark;
+}
+@mixin ms-fontColor-green {
+  color: $ms-color-green;
+}
+@mixin ms-fontColor-greenLight {
+  color: $ms-color-greenLight;
+}
+
+//== Message colors
+//
+
+// Background
+@mixin ms-bgColor-info {
+  background-color: $ms-color-infoBackground;
+}
+@mixin ms-bgColor-success {
+  background-color: $ms-color-successBackground;
+}
+@mixin ms-bgColor-severeWarning {
+  background-color: $ms-color-severeWarningBackground;
+}
+@mixin ms-bgColor-warning {
+  background-color: $ms-color-warningBackground;
+}
+@mixin ms-bgColor-error {
+  background-color: $ms-color-errorBackground;
+}
+
+// Border
+@mixin ms-borderColor-info {
+  border-color: $ms-color-info;
+}
+@mixin ms-borderColor-success {
+  border-color: $ms-color-success;
+}
+@mixin ms-borderColor-alert {
+  border-color: $ms-color-alert;
+}
+@mixin ms-borderColor-error {
+  border-color: $ms-color-error;
+}
+
+// Font
+@mixin ms-fontColor-info {
+  color: $ms-color-info;
+}
+@mixin ms-fontColor-success {
+  color: $ms-color-success;
+}
+@mixin ms-fontColor-alert {
+  // @todo: Deprecated: Use ms-fontColor-severeWarning
+  color: $ms-color-alert;
+}
+@mixin ms-fontColor-warning {
+  color: $ms-color-warning;
+}
+@mixin ms-fontColor-severeWarning {
+  color: $ms-color-severeWarning;
+}
+@mixin ms-fontColor-error {
+  color: $ms-color-error;
+}
+
+
+//== High contrast colors
+//
+
+// Background
+@mixin ms-bgColor-contrastBlackDisabled {
+  background-color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-bgColor-contrastWhiteDisabled {
+  background-color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-bgColor-contrastBlackSelected {
+  background-color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-bgColor-contrastWhiteSelected {
+  background-color: $ms-color-contrastWhiteSelected;
+}
+
+// Border
+@mixin ms-borderColor-contrastBlackDisabled {
+  border-color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-borderColor-contrastWhiteDisabled {
+  border-color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-borderColor-contrastBlackSelected {
+  border-color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-borderColor-contrastWhiteSelected {
+  border-color: $ms-color-contrastWhiteSelected;
+}
+
+// Font
+@mixin ms-fontColor-contrastBlackDisabled {
+  color: $ms-color-contrastBlackDisabled;
+}
+@mixin ms-fontColor-contrastWhiteDisabled {
+  color: $ms-color-contrastWhiteDisabled;
+}
+@mixin ms-fontColor-contrastBlackSelected {
+  color: $ms-color-contrastBlackSelected;
+}
+@mixin ms-fontColor-contrastWhiteSelected {
+  color: $ms-color-contrastWhiteSelected;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Color.Mixins.scss

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Mixins for specific properties.
+@import './Color.Background.Mixins';
+@import './Color.Border.Mixins';
+@import './Color.Font.Mixins';
+
+// Deprecated MDL2 color mixins.
+@import "./Color.Mixins.MDL2";

node_modules/@fluentui/react/dist/sass/mixins/_Depth.Mixins.scss

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+@mixin ms-depth-0 {
+  box-shadow: $ms-depth-shadow-0;
+}
+@mixin ms-depth-4 {
+  box-shadow: $ms-depth-shadow-4;
+}
+@mixin ms-depth-8 {
+  box-shadow: $ms-depth-shadow-8;
+}
+@mixin ms-depth-16 {
+  box-shadow: $ms-depth-shadow-16;
+}
+@mixin ms-depth-64 {
+  box-shadow: $ms-depth-shadow-64;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Directionality.Mixins.scss

@@ -0,0 +1,362 @@
+// 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.
+
+// Background direction.
+@mixin ms-background-position($alignment) {
+  @if $alignment == left {
+    @include ms-LTR {
+      background-position: left;
+    }
+
+    @include ms-RTL {
+      background-position: right;
+    }
+  } @else if $alignment == right {
+    @include ms-LTR {
+      background-position: right;
+    }
+
+    @include ms-RTL {
+      background-position: left;
+    }
+  } @else {
+    background-position: $alignment;
+  }
+}
+
+// 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) {
+  @if $left != 0 {
+    @include ms-LTR {
+      box-shadow: $left $etc;
+    }
+
+    @include ms-RTL {
+      box-shadow: -$left $etc;
+    }
+  } @else {
+    box-shadow: 0 $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);
+  }
+}
+
+@mixin ms-transform-rotate($degrees) {
+  @include ms-LTR {
+    transform: rotate($degrees);
+  }
+
+  @include ms-RTL {
+    transform: rotate(-$degrees);
+  }
+}
+
+// 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;
+    }
+  }
+}

node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.MDL2.scss

@@ -0,0 +1,127 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// These mixins are deprecated and will be removed in a future release.
+
+// Super Styles (LIMITED USE)
+@mixin ms-font-su {
+  font-size: $ms-font-size-su;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Extra-Large
+@mixin ms-font-xxl {
+  font-size: $ms-font-size-xxl;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Large Styles
+@mixin ms-font-xl-plus {
+  font-size: $ms-font-size-xl-plus;
+  font-weight: $ms-font-weight-light;
+}
+
+// Extra-Large Styles
+@mixin ms-font-xl {
+  font-size: $ms-font-size-xl;
+  font-weight: $ms-font-weight-light;
+}
+
+// Large Styles
+@mixin ms-font-l {
+  font-size: $ms-font-size-l;
+  font-weight: $ms-font-weight-semilight;
+}
+
+// Medium Plus Styles
+@mixin ms-font-m-plus {
+  font-size: $ms-font-size-m-plus;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Medium Styles
+@mixin ms-font-m {
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Small Plus Styles
+@mixin ms-font-s-plus {
+  font-size: $ms-font-size-s-plus;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Small Styles
+@mixin ms-font-s {
+  font-size: $ms-font-size-s;
+  font-weight: $ms-font-weight-regular;
+}
+
+// XS Styles
+@mixin ms-font-xs {
+  font-size: $ms-font-size-xs;
+  font-weight: $ms-font-weight-regular;
+}
+
+// Micro Styles (LIMITED USE)
+@mixin ms-font-mi {
+  font-size: $ms-font-size-mi;
+  font-weight: $ms-font-weight-semibold;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+@mixin ms-fontWeight-light {
+  font-weight: $ms-font-weight-light;
+}
+
+@mixin ms-fontWeight-semilight {
+  font-weight: $ms-font-weight-semilight;
+}
+
+// Font sizes
+@mixin ms-fontSize-su {
+  font-size: $ms-font-size-su;
+}
+
+@mixin ms-fontSize-xxl {
+  font-size: $ms-font-size-xxl;
+}
+
+@mixin ms-fontSize-xlPlus {
+  font-size: $ms-font-size-xl-plus;
+}
+
+@mixin ms-fontSize-xl {
+  font-size: $ms-font-size-xl;
+}
+
+@mixin ms-fontSize-l {
+  font-size: $ms-font-size-l;
+}
+
+@mixin ms-fontSize-mPlus {
+  font-size: $ms-font-size-m-plus;
+}
+
+@mixin ms-fontSize-m {
+  font-size: $ms-font-size-m;
+}
+
+@mixin ms-fontSize-sPlus {
+  font-size: $ms-font-size-s-plus;
+}
+
+@mixin ms-fontSize-s {
+  font-size: $ms-font-size-s;
+}
+
+@mixin ms-fontSize-xs {
+  font-size: $ms-font-size-xs;
+}
+
+@mixin ms-fontSize-mi {
+  font-size: $ms-font-size-mi;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.scss

@@ -0,0 +1,123 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//== Font definitions.
+//
+
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+
+// Produce @font-face definitions for the web fonts.
+@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: "segoeui") {
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff")
+        format("woff");
+    font-weight: $ms-font-weight-light;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff")
+        format("woff");
+    font-weight: $ms-font-weight-semilight;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff")
+        format("woff");
+    font-weight: $ms-font-weight-regular;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff")
+        format("woff");
+    font-weight: $ms-font-weight-semibold;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: $font-family-name;
+    src: url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2")
+        format("woff2"),
+      url("#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff")
+        format("woff");
+    font-weight: $ms-font-weight-bold;
+    font-style: normal;
+  }
+}
+
+// Generate overrides to set font-family based on the lang attribute.
+@mixin ms-font-family-language-override($language-code, $font-family) {
+  *[lang^="#{$language-code}"] .ms-Fabric,
+  .ms-Fabric *[lang^="#{$language-code}"],
+  .ms-Fabric[lang^="#{$language-code}"] {
+    font-family: $font-family;
+  }
+}
+
+//== Font weight.
+//
+
+@mixin ms-fontWeight-regular {
+  font-weight: $ms-font-weight-regular;
+}
+@mixin ms-fontWeight-semibold {
+  font-weight: $ms-font-weight-semibold;
+}
+@mixin ms-fontWeight-bold {
+  font-weight: $ms-font-weight-bold;
+}
+
+//== Font size.
+//
+
+@mixin ms-fontSize-68 {
+  font-size: $ms-font-size-68;
+}
+@mixin ms-fontSize-42 {
+  font-size: $ms-font-size-42;
+}
+@mixin ms-fontSize-32 {
+  font-size: $ms-font-size-32;
+}
+@mixin ms-fontSize-28 {
+  font-size: $ms-font-size-28;
+}
+@mixin ms-fontSize-24 {
+  font-size: $ms-font-size-24;
+}
+@mixin ms-fontSize-20 {
+  font-size: $ms-font-size-20;
+}
+@mixin ms-fontSize-18 {
+  font-size: $ms-font-size-18;
+}
+@mixin ms-fontSize-16 {
+  font-size: $ms-font-size-16;
+}
+@mixin ms-fontSize-14 {
+  font-size: $ms-font-size-14;
+}
+@mixin ms-fontSize-12 {
+  font-size: $ms-font-size-12;
+}
+@mixin ms-fontSize-10 {
+  font-size: $ms-font-size-10;
+}
+
+// Deprecated MDL2 font mixins.
+@import "./Font.Mixins.MDL2";

node_modules/@fluentui/react/dist/sass/mixins/_General.Mixins.scss

@@ -0,0 +1,222 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Vendor-prefixed mixins
+
+// Border radius.
+@mixin ms-border-radius($radius: 5px) {
+  border-radius: $radius;
+  background-clip: padding-box;
+}
+
+// Drop shadow.
+@mixin ms-drop-shadow($x-offset: 0, $y-offset: 0, $blur: 5px, $spread: 0, $alpha: 0.4) {
+  @include ms-box-shadow($x-offset, $y-offset $blur $spread rgba(0, 0, 0, $alpha));
+}
+
+// Background gradient.
+@mixin ms-background-gradient($origin: left, $start: #000, $start-location: 0%, $stop: #FFF, $stop-location: 100%) {
+
+  // To maintain compatibility with the old arguments, reverse
+  // the $origin direction and set it as $destination.
+  $destination: null;
+  @if $origin == top {
+    $destination: bottom;
+  }
+  @if $origin == right {
+    $destination: left;
+  }
+  @if $origin == bottom {
+    $destination: top;
+  }
+  @if $origin == left {
+    $destination: right;
+  }
+
+  background-color: $start;
+  background-image: linear-gradient(to $destination, $start $start-location, $stop $stop-location);
+}
+
+// Rotation.
+@mixin ms-rotate($degrees) {
+  @include ms-transform-rotate($degrees);
+}
+
+// Prevents user selection of text elements.
+@mixin ms-user-select ($val) {
+    -webkit-touch-callout:  $val;
+    -webkit-user-select:    $val;
+    -khtml-user-select:     $val;
+    -moz-user-select:       $val;
+    -ms-user-select:        $val;
+    user-select:            $val;
+}
+
+// Prevents the text within a block element from wrapping to second line.
+@mixin ms-no-wrap() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Flexbox
+@mixin ms-flex-box() {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+@mixin ms-alignItems($mode) {
+    -webkit-box-align: $mode;
+    -moz-box-align: $mode;
+    -ms-flex-align: $mode;
+    -webkit-align-items: $mode;
+    align-items: $mode;
+}
+
+// Base/wrapper component to set typography throughout the app.
+@mixin ms-Fabric {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  @include ms-inherit-font-family();
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-west-european;
+  font-size: $ms-font-size-m;
+}
+
+// Set the font-family to 'inherit' for elements where the browser
+// styles commonly conflict with the font-family that we want.
+@mixin ms-inherit-font-family() {
+  button,
+  input,
+  textarea {
+    font-family: inherit;
+  }
+}
+
+// Overrides the browser's default focus outline style.
+@mixin ms-focus-outline($inset: 0, $color: $ms-focus-border-color) {
+  // Only do this when it's a child of ms-Fabric in a focusVisible state.
+  .ms-Fabric.is-focusVisible &:focus {
+    outline: $ms-focus-border-width $ms-focus-border-style $color;
+    outline-offset: -$inset;
+  }
+}
+
+// Simulates a focus outline using an absolutely-positioned pseudo-element.
+@mixin ms-focus-border($inset: 0, $color: $ms-focus-border-color) {
+  // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.
+  outline: transparent;
+
+  // Requirement because pseudo-element is absolutely positioned.
+  position: relative;
+
+  // Clear the focus border in Firefox.
+  // Reference: http://stackoverflow.com/a/199319/1436671
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  // When the element that uses this mixin is in a :focus state, add a pseudo-element to
+  // create a border. Only do this when it's a child of ms-Fabric in a focusVisible state.
+  .ms-Fabric.is-focusVisible &:focus::after {
+    // Wrap the parent element with $padding.
+    content: '';
+    position: absolute;
+    top: $inset;
+    right: $inset;
+    bottom: $inset;
+    left: $inset;
+
+    // Add focus border of specified $color.
+    border: $ms-focus-border-width $ms-focus-border-style $color;
+
+    // Make the content not respond to mouse/touch events.
+    // Reference: https://css-tricks.com/almanac/properties/p/pointer-events/
+    pointer-events: none;
+  }
+}
+
+// The best box is a border box.
+@mixin ms-borderBox {
+  box-sizing: border-box;
+}
+
+// For setting the border base width
+@mixin ms-borderBase {
+  border: 1px solid;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+@mixin ms-clearfix {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: '';
+    line-height: 0;
+  }
+  &::after {
+    clear: both;
+  }
+}
+
+// Basic border-box, margin, and padding reset.
+@mixin ms-normalize {
+  @include ms-borderBox;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+}
+
+// Generate text alignment classes, such as .ms-textAlignLeft 
+// @param [variable list] $alignments
+@mixin ms-textAlign($alignments...) {
+  @warn 'The ms-textAlign mixin has been deprecated and will be removed in a future release of Fabric Core.';
+  @each $align in $alignments {
+    $alignStr: inspect($align);
+    .ms-textAlign#{to-upper-case(str-slice($alignStr, 1, 1)) + str-slice($alignStr, 2)} {
+      @include ms-text-align($align);
+    }
+  }
+}
+
+// To hide content while still making it readable by screen readers (Accessibility)
+@mixin ms-screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// To add truncation with ellipsis
+@mixin ms-textTruncate {
+	overflow: hidden; 
+	text-overflow: ellipsis; 
+	white-space: nowrap; 
+	word-wrap: normal; // Fix for IE 8/9 in case 'word-wrap: break-word' is set on parent nodes
+}
+
+// To disable text wrapping
+@mixin ms-noWrap {
+	white-space: nowrap; 
+}
+
+// Replace or remove a portion of a string.
+// Thanks to https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function ms-string-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + ms-string-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}

node_modules/@fluentui/react/dist/sass/mixins/_Grid.Mixins.scss

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+//== Grid container (same for all sizes)
+//
+@mixin ms-Grid {
+  @include ms-borderBox;
+  @include ms-clearfix;
+  padding: 0 8px;
+}
+
+//== Grid rows (pull first and last column out)
+//
+@mixin ms-Grid-row {
+  margin: 0 -8px;
+  @include ms-borderBox;
+  @include ms-clearfix;
+}
+
+//== Grid cells
+//
+@mixin ms-Grid-col {
+  @include ms-float(left);
+  position: relative;
+  min-height: 1px;
+  padding-left: 8px;
+  padding-right: 8px;
+  @include ms-borderBox;
+
+  // For nested grids (a grid inside a column), removing the padding
+  // so that the nested grid's columns go to the edge of the parent's.
+  .ms-Grid {
+    padding: 0;
+  }
+}

node_modules/@fluentui/react/dist/sass/mixins/_ScopedStyles.Mixins.scss

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+
+$ms-fabric-version-major: nth($ms-fabric-version, 1);
+$ms-fabric-version-minor: nth($ms-fabric-version, 2);
+$ms-fabric-version-patch: nth($ms-fabric-version, 3);
+
+// The CSS class for scoping styles to the current version of Fabric.
+$ms-fabric-version-suffix: '--v' + $ms-fabric-version-major + '-' + $ms-fabric-version-minor + '-' + $ms-fabric-version-patch;
+$ms-fabric-scope-class: '.ms-Fabric' + $ms-fabric-version-suffix;
+
+// A mixin to scope styles to the current version of Fabric.
+// Produces styles of the form .ms-Fabric-{version #} @content.
+@mixin scope-fabric {
+  #{$ms-fabric-scope-class} {
+    @content;
+  }
+}