office-ui-fabric-core-rails 6.0.1.0 → 7.0.0.0

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

@@ -180,160 +180,160 @@
 
 // Slide
 @mixin ms-slideRightIn10 {
-  @include ms-animation((fadeIn, slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeOut, ms-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);
+  @include ms-animation((ms-fadeIn, ms-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);
+  @include ms-animation(ms-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);
+  @include ms-animation(ms-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-name: ms-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-name: ms-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-name: ms-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-name: ms-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-name: ms-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-name: ms-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-name: ms-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-name: ms-fadeOut;
   animation-fill-mode: both;
 }
 

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

@@ -15,7 +15,7 @@
     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: 100;
+    font-weight: $ms-font-weight-light;
     font-style: normal;
   }
 
@@ -23,7 +23,7 @@
     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: 200;
+    font-weight: $ms-font-weight-semilight;
     font-style: normal;
   }
 
@@ -31,7 +31,7 @@
     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: 400;
+    font-weight: $ms-font-weight-regular;
     font-style: normal;
   }
 
@@ -39,7 +39,7 @@
     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: 600;
+    font-weight: $ms-font-weight-semibold;
     font-style: normal;
   }
 }
@@ -65,6 +65,12 @@
   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;
@@ -143,6 +149,10 @@
   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;
 }

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

@@ -6,205 +6,42 @@
 // Vendor-prefixed mixins
 
 // Border radius.
-@mixin ms-border-radius($ms-radius: 5px) {
-  border-radius: $ms-radius;
+@mixin ms-border-radius($radius: 5px) {
+  border-radius: $radius;
   background-clip: padding-box;
 }
 
 // Drop shadow.
-@mixin ms-drop-shadow($ms-x-offset: 0, $ms-y-offset: 0, $ms-blur: 5px, $ms-spread: 0, $ms-alpha: 0.4) {
-  box-shadow: $ms-x-offset $ms-y-offset $ms-blur $ms-spread rgba(0, 0, 0, $ms-alpha);
+@mixin ms-drop-shadow($x-offset: 0, $y-offset: 0, $blur: 5px, $spread: 0, $alpha: 0.4) {
+  box-shadow: $x-offset $y-offset $blur $spread rgba(0, 0, 0, $alpha);
 }
 
 // Background gradient.
-@mixin ms-background-gradient($ms-origin: left, $ms-start: #000, $ms-start-location: 0%, $ms-stop: #FFF, $ms-stop-location: 100%) {
-    background-color: $ms-start;
-    background-image: linear-gradient($ms-origin, $ms-start $ms-start-location, $ms-stop $ms-stop-location);
-}
-
-// Rotation.
-@mixin ms-rotate($ms-deg) {
-  transform: rotate($ms-deg);
-}
-
-// Reset button styles.
-@mixin ms-button-reset() {
-  background: none;
-  border: 0;
-  cursor: pointer;
-}
-
-@mixin ms-reset-animation() {
-    -webkit-animation: none;
-    -moz-animation:  none;
-    -ms-animation:  none;
-    -o-animation:  none;
-    animation:  none;
-}
-
-@mixin ms-reset-backface() {
-   backface-visibility: visible;
-}
-
-@mixin ms-reset-background() {
-  background: 0;
-  background-clip: border-box;
-  background-origin: padding-box;
-}
-
-@mixin ms-reset-border() {
-  border: 0;
-  border-collapse: separate;
-  border-image: none;
-  border-radius: 0;
-  border-spacing: 0;
-}
-
-@mixin ms-reset-box-shadow() {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-@mixin ms-reset-box-sizing() {
-   box-sizing: content-box;
-}
-
-@mixin ms-reset-columns() {
-  columns: auto;
-  column-count: auto;
-  column-fill: balance;
-  column-gap: normal;
-  column-rule: medium none currentColor;
-  column-rule-color: currentColor;
-  column-rule-style: none;
-  column-rule-width: none;
-  column-span: 1;
-  column-width: auto;
-}
-
-
-// Fonts and Typography Resets
-@mixin ms-reset-font() {
-  font: normal;
-  font-family: inherit;
-  font-size: normal;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-}
-
-@mixin ms-reset-text-styling() {
-  text-align: inherit;
-  text-align-last: auto;
-  text-decoration: none;
-  text-decoration-color: inherit;
-  text-decoration-line: none;
-  text-decoration-style: solid;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  line-height: normal;
-  letter-spacing: normal;
-  word-spacing: normal;
-}
-
-
-// Box Model Resets
-@mixin ms-reset-padding() {
-  padding: 0;
-}
-
-@mixin ms-reset-margins() {
-  margin: 0;
-}
-
-@mixin ms-reset-overflow() {
-  overflow: visible;
-}
+@mixin ms-background-gradient($origin: left, $start: #000, $start-location: 0%, $stop: #FFF, $stop-location: 100%) {
 
-@mixin ms-reset-max() {
-    max-height: none;
-    max-width: none;
-}
-
-@mixin ms-reset-min() {
-    min-height: 0;
-    min-width: 0;
-}
-
-@mixin ms-reset-positioning() {
-  bottom: auto;
-  left: auto;
-  top: auto;
-  left: auto;
-}
-
-@mixin ms-reset-float() {
-  float: none;
-}
-
-@mixin ms-reset-height($ms-useMaxMin: false) {
-    height: auto;
-    @if $ms-useMaxMin == true {
-        min-height: 0;
-        max-height: 0;
-    }
-}
-
-@mixin ms-reset-width($ms-useMaxMin: false) {
-    width: auto;
-    @if $ms-useMaxMin == true {
-        min-width: 0;
-        max-width: 0;
-    }
-}
-
-@mixin ms-reset-position() {
-  position: static;
-}
-
-@mixin ms-reset-perspective() {
-  -webkit-perspective: none;
-  -webkit-perspective-origin: 50% 50%;
-  perspective: none;
-  perspective-origin: 50% 50%;
-
-}
-
-@mixin ms-reset-transition() {
-  -webkit-transition: none;
-  transition: none;
-}
-
-@mixin ms-reset-list-style() {
-  list-style: none;
-}
-
-@mixin ms-reset-transform() {
-  -ms-transform: none;
-  -webkit-transform: none;
-  -webkit-transform-style: flat;
-  transform: none;
-  transform-style: flat;
-}
-
-@mixin ms-reset-outline() {
-  outline: 0;
-}
-
-@mixin ms-reset-page-break() {
-  page-break-after: auto;
-  page-break-before: auto;
-  page-break-inside: auto;
-}
+  // 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;
+  }
 
-@mixin ms-reset-display() {
-  display: block;
+  background-color: $start;
+  background-image: linear-gradient(to $destination, $start $start-location, $stop $stop-location);
 }
 
-@mixin ms-reset-vertical-align() {
-    vertical-align: baseline;
+// Rotation.
+@mixin ms-rotate($deg) {
+  transform: rotate($deg);
 }
 
 // Prevents user selection of text elements.
@@ -232,12 +69,12 @@
     display: flex;
 }
 
-@mixin ms-alignItems($ms-mode) {
-    -webkit-box-align: $ms-mode;
-    -moz-box-align: $ms-mode;
-    -ms-flex-align: $ms-mode;
-    -webkit-align-items: $ms-mode;
-    align-items: $ms-mode;
+@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.
@@ -248,6 +85,7 @@
   @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
@@ -329,12 +167,12 @@
 // Basic border-box, margin, and padding reset.
 @mixin ms-normalize {
   @include ms-borderBox;
-  @include ms-reset-margins;
-  @include ms-reset-padding;
-  @include ms-reset-box-shadow;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
-// To set various text alignment styles 
+// Generate text alignment classes, such as .ms-textAlignLeft 
 // @param [variable list] $alignments
 @mixin ms-textAlign($alignments...) {
   @each $align in $alignments {