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

data/vendor/assets/scss/{_Fabric.Typography.scss → mixins/_Font.Mixins.scss}

@@ -1,345 +1,381 @@
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Typographic mixins arranged with appropriate size and family combinations.
-@import 'Fabric.Typography.Variables';
-@import 'Fabric.Typography.Mixins';
-
-// Super Styles (LIMITED USE)
-@mixin ms-font-su {
-  @include ms-baseFont;
-  font-size: $ms-font-size-su;
-  font-weight: $ms-font-weight-light;
-}
-
-// Extra-Extra-Large
-@mixin ms-font-xxl {
-  @include ms-baseFont;
-  font-size: $ms-font-size-xxl;
-  font-weight: $ms-font-weight-light;
-}
-
-// Extra-Large Styles
-@mixin ms-font-xl {
-  @include ms-baseFont;
-  font-size: $ms-font-size-xl;
-  font-weight: $ms-font-weight-light;
-}
-
-// Large Styles
-@mixin ms-font-l {
-  @include ms-baseFont;
-  font-size: $ms-font-size-l;
-  font-weight: $ms-font-weight-semilight;
-}
-
-// Medium Plus Styles
-@mixin ms-font-m-plus {
-  @include ms-baseFont;
-  font-size: $ms-font-size-m-plus;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Medium Styles
-@mixin ms-font-m {
-  @include ms-baseFont;
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Small Plus Styles
-@mixin ms-font-s-plus {
-  @include ms-baseFont;
-  font-size: $ms-font-size-s-plus;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Small Styles
-@mixin ms-font-s {
-  @include ms-baseFont;
-  font-size: $ms-font-size-s;
-  font-weight: $ms-font-weight-regular;
-}
-
-// XS Styles
-@mixin ms-font-xs {
-  @include ms-baseFont;
-  font-size: $ms-font-size-xs;
-  font-weight: $ms-font-weight-regular;
-}
-
-// Micro Styles (LIMITED USE)
-@mixin ms-font-mi {
-  @include ms-baseFont;
-  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;
-}
-
-@mixin ms-fontWeight-regular {
-  font-weight: $ms-font-weight-regular;
-}
-
-@mixin ms-fontWeight-semibold {
-  font-weight: $ms-font-weight-semibold;
-}
-
-// 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-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;
-}
-
-// Theme colors
-@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
-@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-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
-@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
-@mixin ms-fontColor-info {
-  color: $ms-color-info;
-}
-
-@mixin ms-fontColor-success {
-  color: $ms-color-success;
-}
-
-@mixin ms-fontColor-alert { // 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;
-}
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// 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: 100;
+    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: 200;
+    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: 400;
+    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: 600;
+    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;
+  }
+}
+
+// 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 {
+  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;
+}
+
+@mixin ms-fontWeight-regular {
+  font-weight: $ms-font-weight-regular;
+}
+
+@mixin ms-fontWeight-semibold {
+  font-weight: $ms-font-weight-semibold;
+}
+
+// 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-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;
+}
+
+// Theme colors
+@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
+@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-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
+@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
+@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;
+}