Going on and add to repo not committed files
This commit is contained in:
Claudio Boggian
@@ -0,0 +1,33 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// Core styles scoped to the current major version of Fabric
|
||||
|
||||
// Variable is set during gulp task as comma seperated list. i.e. 5,1,0
|
||||
$ms-fabric-version: 9,6,0;
|
||||
|
||||
@import './References';
|
||||
@import './mixins/ScopedStyles.Mixins';
|
||||
|
||||
// Sets a global flag to enable scoped styles within certain files
|
||||
$do-scope-styles: true;
|
||||
|
||||
// Scope all core styles under a helper class for the current major version.
|
||||
// This produces styles of the form .ms-Fabric-{version #} .ms-font-m.
|
||||
|
||||
@include scope-fabric {
|
||||
@import './Animation';
|
||||
@import './BrandIcon';
|
||||
@import './Color';
|
||||
@import './Font';
|
||||
@import './Grid';
|
||||
@import './Icon';
|
||||
@import './Responsive';
|
||||
@import './Utility';
|
||||
@import './Wrapper';
|
||||
}
|
||||
|
||||
// @font-face definitions do not need to be scoped
|
||||
@import './Font.Definitions';
|
||||
@import './Icon.Definitions';
|
||||
@@ -0,0 +1,22 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// OSS Framework Design Language
|
||||
// --------------------------------------------------
|
||||
// Fabric Core Module Loader (LTR)
|
||||
|
||||
// Variables and mixins
|
||||
@import './References';
|
||||
|
||||
// Partials that output CSS
|
||||
@import './Animation';
|
||||
@import './BrandIcon';
|
||||
@import './Color';
|
||||
@import './Font.Definitions';
|
||||
@import './Font';
|
||||
@import './Grid';
|
||||
@import './Icon.Definitions';
|
||||
@import './Icon';
|
||||
@import './Responsive';
|
||||
@import './Utility';
|
||||
@import './Wrapper';
|
||||
@@ -0,0 +1,173 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Fabric Animations
|
||||
|
||||
// Output all @keyframes needed for the animations
|
||||
@include ms-animation-keyframes;
|
||||
|
||||
// Slide
|
||||
.ms-slideRightIn10 {
|
||||
@include ms-slideRightIn10;
|
||||
}
|
||||
|
||||
.ms-slideRightIn20 {
|
||||
@include ms-slideRightIn20;
|
||||
}
|
||||
|
||||
.ms-slideRightIn40 {
|
||||
@include ms-slideRightIn40;
|
||||
}
|
||||
|
||||
.ms-slideRightIn400 {
|
||||
@include ms-slideRightIn400;
|
||||
}
|
||||
|
||||
.ms-slideRightOut40 {
|
||||
@include ms-slideRightOut40;
|
||||
}
|
||||
|
||||
.ms-slideRightOut400 {
|
||||
@include ms-slideRightOut400;
|
||||
}
|
||||
|
||||
.ms-slideLeftIn10 {
|
||||
@include ms-slideLeftIn10;
|
||||
}
|
||||
|
||||
.ms-slideLeftIn20 {
|
||||
@include ms-slideLeftIn20;
|
||||
}
|
||||
|
||||
.ms-slideLeftIn40 {
|
||||
@include ms-slideLeftIn40;
|
||||
}
|
||||
|
||||
.ms-slideLeftIn400 {
|
||||
@include ms-slideLeftIn400;
|
||||
}
|
||||
|
||||
.ms-slideLeftOut40 {
|
||||
@include ms-slideLeftOut40;
|
||||
}
|
||||
|
||||
.ms-slideLeftOut400 {
|
||||
@include ms-slideLeftOut400;
|
||||
}
|
||||
|
||||
.ms-slideUpIn10 {
|
||||
@include ms-slideUpIn10;
|
||||
}
|
||||
|
||||
.ms-slideUpIn20 {
|
||||
@include ms-slideUpIn20;
|
||||
}
|
||||
|
||||
.ms-slideDownIn10 {
|
||||
@include ms-slideDownIn10;
|
||||
}
|
||||
|
||||
.ms-slideDownIn20 {
|
||||
@include ms-slideDownIn20;
|
||||
}
|
||||
|
||||
.ms-slideUpOut10 {
|
||||
@include ms-slideUpOut10;
|
||||
}
|
||||
|
||||
.ms-slideUpOut20 {
|
||||
@include ms-slideUpOut20;
|
||||
}
|
||||
|
||||
.ms-slideDownOut10 {
|
||||
@include ms-slideDownOut10;
|
||||
}
|
||||
|
||||
.ms-slideDownOut20 {
|
||||
@include ms-slideDownOut20;
|
||||
}
|
||||
|
||||
// Scale
|
||||
.ms-scaleUpIn100 {
|
||||
@include ms-scaleUpIn100;
|
||||
}
|
||||
|
||||
.ms-scaleUpOut103 {
|
||||
@include ms-scaleUpOut103;
|
||||
}
|
||||
|
||||
.ms-scaleDownOut98 {
|
||||
@include ms-scaleDownOut98;
|
||||
}
|
||||
|
||||
.ms-scaleDownIn100 {
|
||||
@include ms-scaleDownIn100;
|
||||
}
|
||||
|
||||
// Fade
|
||||
|
||||
.ms-fadeIn100 {
|
||||
@include ms-fadeIn100;
|
||||
}
|
||||
|
||||
.ms-fadeIn200 {
|
||||
@include ms-fadeIn200;
|
||||
}
|
||||
|
||||
.ms-fadeIn400 {
|
||||
@include ms-fadeIn400;
|
||||
}
|
||||
|
||||
.ms-fadeIn500 {
|
||||
@include ms-fadeIn500;
|
||||
}
|
||||
|
||||
.ms-fadeOut100 {
|
||||
@include ms-fadeOut100;
|
||||
}
|
||||
|
||||
.ms-fadeOut200 {
|
||||
@include ms-fadeOut200;
|
||||
}
|
||||
|
||||
.ms-fadeOut400 {
|
||||
@include ms-fadeOut400;
|
||||
}
|
||||
|
||||
.ms-fadeOut500 {
|
||||
@include ms-fadeOut500;
|
||||
}
|
||||
|
||||
// Expand-collapse
|
||||
|
||||
.ms-expandCollapse100 {
|
||||
@include ms-expandCollapse100;
|
||||
}
|
||||
|
||||
.ms-expandCollapse200 {
|
||||
@include ms-expandCollapse200;
|
||||
}
|
||||
|
||||
.ms-expandCollapse400 {
|
||||
@include ms-expandCollapse400;
|
||||
}
|
||||
|
||||
// Delay
|
||||
.ms-delay100 {
|
||||
@include ms-delay100;
|
||||
}
|
||||
|
||||
.ms-delay200 {
|
||||
@include ms-delay200;
|
||||
}
|
||||
|
||||
// Rotate
|
||||
.ms-rotate90deg {
|
||||
@include ms-rotate90deg;
|
||||
}
|
||||
|
||||
.ms-rotateN90deg {
|
||||
@include ms-rotateN90deg;
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
@include ms-brand-icon-classes('1');
|
||||
@include ms-brand-icon-size-classes();
|
||||
|
||||
// Pixel Ratio 1.5
|
||||
@media only screen and (min-resolution: 144dpi) {
|
||||
@include ms-brand-icon-classes('1_5');
|
||||
}
|
||||
|
||||
// Pixel Ratio 2
|
||||
@media only screen and (min-resolution: 192dpi) {
|
||||
@include ms-brand-icon-classes('2');
|
||||
}
|
||||
|
||||
// Pixel Ratio 3
|
||||
@media only screen and (min-resolution: 288dpi) {
|
||||
@include ms-brand-icon-classes('3');
|
||||
}
|
||||
|
||||
// The 'onepkg' and 'xls' icons have been deprecated. These classes will be removed in
|
||||
// a future release. Until then, they are mapped to 'one' and 'xlsx'.
|
||||
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/one.png);
|
||||
}
|
||||
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/xlsx.png);
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_1.5x/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_1.5x/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_1.5x/one.png);
|
||||
}
|
||||
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_1.5x/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_1.5x/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_1.5x/xlsx.png);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_2x/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_2x/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_2x/one.png);
|
||||
}
|
||||
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_2x/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_2x/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_2x/xlsx.png);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi) {
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_3x/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_3x/one.png);
|
||||
}
|
||||
.ms-BrandIcon--onepkg.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_3x/one.png);
|
||||
}
|
||||
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon16 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_3x/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon48 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_3x/xlsx.png);
|
||||
}
|
||||
.ms-BrandIcon--xls.ms-BrandIcon--icon96 {
|
||||
background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_3x/xlsx.png);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,506 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Fabric Core Color Mixins
|
||||
|
||||
//== Background colors
|
||||
//
|
||||
// Theme colors
|
||||
.ms-bgColor-themeDark,
|
||||
.ms-bgColor-themeDark--hover:hover {
|
||||
@include ms-bgColor-themeDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-themeDarkAlt,
|
||||
.ms-bgColor-themeDarkAlt--hover:hover {
|
||||
@include ms-bgColor-themeDarkAlt;
|
||||
}
|
||||
|
||||
.ms-bgColor-themeDarker,
|
||||
.ms-bgColor-themeDarker--hover:hover {
|
||||
@include ms-bgColor-themeDarker;
|
||||
}
|
||||
|
||||
.ms-bgColor-themePrimary,
|
||||
.ms-bgColor-themePrimary--hover:hover {
|
||||
@include ms-bgColor-themePrimary;
|
||||
}
|
||||
|
||||
.ms-bgColor-themeSecondary,
|
||||
.ms-bgColor-themeSecondary--hover:hover {
|
||||
@include ms-bgColor-themeSecondary;
|
||||
}
|
||||
|
||||
.ms-bgColor-themeTertiary,
|
||||
.ms-bgColor-themeTertiary--hover:hover {
|
||||
@include ms-bgColor-themeTertiary;
|
||||
}
|
||||
|
||||
.ms-bgColor-themeLight,
|
||||
.ms-bgColor-themeLight--hover:hover {
|
||||
@include ms-bgColor-themeLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-themeLighter,
|
||||
.ms-bgColor-themeLighter--hover:hover {
|
||||
@include ms-bgColor-themeLighter;
|
||||
}
|
||||
|
||||
.ms-bgColor-themeLighterAlt,
|
||||
.ms-bgColor-themeLighterAlt--hover:hover {
|
||||
@include ms-bgColor-themeLighterAlt;
|
||||
}
|
||||
|
||||
// Neutral colors
|
||||
.ms-bgColor-black,
|
||||
.ms-bgColor-black--hover:hover {
|
||||
@include ms-bgColor-black;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralDark,
|
||||
.ms-bgColor-neutralDark--hover:hover {
|
||||
@include ms-bgColor-neutralDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralPrimary,
|
||||
.ms-bgColor-neutralPrimary--hover:hover {
|
||||
@include ms-bgColor-neutralPrimary;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralPrimaryAlt,
|
||||
.ms-bgColor-neutralPrimaryAlt--hover:hover {
|
||||
@include ms-bgColor-neutralPrimaryAlt;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralSecondary,
|
||||
.ms-bgColor-neutralSecondary--hover:hover {
|
||||
@include ms-bgColor-neutralSecondary;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralSecondaryAlt,
|
||||
.ms-bgColor-neutralSecondaryAlt--hover:hover {
|
||||
@include ms-bgColor-neutralSecondaryAlt;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralTertiary,
|
||||
.ms-bgColor-neutralTertiary--hover:hover {
|
||||
@include ms-bgColor-neutralTertiary;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralTertiaryAlt,
|
||||
.ms-bgColor-neutralTertiaryAlt--hover:hover {
|
||||
@include ms-bgColor-neutralTertiaryAlt;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralQuaternary,
|
||||
.ms-bgColor-neutralQuaternary--hover:hover {
|
||||
@include ms-bgColor-neutralQuaternary;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralQuaternaryAlt,
|
||||
.ms-bgColor-neutralQuaternaryAlt--hover:hover {
|
||||
@include ms-bgColor-neutralQuaternaryAlt;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralLight,
|
||||
.ms-bgColor-neutralLight--hover:hover {
|
||||
@include ms-bgColor-neutralLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralLighter,
|
||||
.ms-bgColor-neutralLighter--hover:hover {
|
||||
@include ms-bgColor-neutralLighter;
|
||||
}
|
||||
|
||||
.ms-bgColor-neutralLighterAlt,
|
||||
.ms-bgColor-neutralLighterAlt--hover:hover {
|
||||
@include ms-bgColor-neutralLighterAlt;
|
||||
}
|
||||
|
||||
.ms-bgColor-white,
|
||||
.ms-bgColor-white--hover:hover {
|
||||
@include ms-bgColor-white;
|
||||
}
|
||||
|
||||
|
||||
// Brand and accent colors
|
||||
.ms-bgColor-yellow,
|
||||
.ms-bgColor-yellow--hover:hover {
|
||||
@include ms-bgColor-yellow;
|
||||
}
|
||||
|
||||
.ms-bgColor-yellowLight,
|
||||
.ms-bgColor-yellowLight--hover:hover {
|
||||
@include ms-bgColor-yellowLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-orange,
|
||||
.ms-bgColor-orange--hover:hover {
|
||||
@include ms-bgColor-orange;
|
||||
}
|
||||
|
||||
.ms-bgColor-orangeLight,
|
||||
.ms-bgColor-orangeLight--hover:hover {
|
||||
@include ms-bgColor-orangeLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-orangeLighter,
|
||||
.ms-bgColor-orangeLighter--hover:hover {
|
||||
@include ms-bgColor-orangeLighter;
|
||||
}
|
||||
|
||||
.ms-bgColor-redDark,
|
||||
.ms-bgColor-redDark--hover:hover {
|
||||
@include ms-bgColor-redDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-red,
|
||||
.ms-bgColor-red--hover:hover {
|
||||
@include ms-bgColor-red;
|
||||
}
|
||||
|
||||
.ms-bgColor-magentaDark,
|
||||
.ms-bgColor-magentaDark--hover:hover {
|
||||
@include ms-bgColor-magentaDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-magenta,
|
||||
.ms-bgColor-magenta--hover:hover {
|
||||
@include ms-bgColor-magenta;
|
||||
}
|
||||
|
||||
.ms-bgColor-magentaLight,
|
||||
.ms-bgColor-magentaLight--hover:hover {
|
||||
@include ms-bgColor-magentaLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-purpleDark,
|
||||
.ms-bgColor-purpleDark--hover:hover {
|
||||
@include ms-bgColor-purpleDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-purple,
|
||||
.ms-bgColor-purple--hover:hover {
|
||||
@include ms-bgColor-purple;
|
||||
}
|
||||
|
||||
.ms-bgColor-purpleLight,
|
||||
.ms-bgColor-purpleLight--hover:hover {
|
||||
@include ms-bgColor-purpleLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-blueDark,
|
||||
.ms-bgColor-blueDark--hover:hover {
|
||||
@include ms-bgColor-blueDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-blueMid,
|
||||
.ms-bgColor-blueMid--hover:hover {
|
||||
@include ms-bgColor-blueMid;
|
||||
}
|
||||
|
||||
.ms-bgColor-blue,
|
||||
.ms-bgColor-blue--hover:hover {
|
||||
@include ms-bgColor-blue;
|
||||
}
|
||||
|
||||
.ms-bgColor-blueLight,
|
||||
.ms-bgColor-blueLight--hover:hover {
|
||||
@include ms-bgColor-blueLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-tealDark,
|
||||
.ms-bgColor-tealDark--hover:hover {
|
||||
@include ms-bgColor-tealDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-teal,
|
||||
.ms-bgColor-teal--hover:hover {
|
||||
@include ms-bgColor-teal;
|
||||
}
|
||||
|
||||
.ms-bgColor-tealLight,
|
||||
.ms-bgColor-tealLight--hover:hover {
|
||||
@include ms-bgColor-tealLight;
|
||||
}
|
||||
|
||||
.ms-bgColor-greenDark,
|
||||
.ms-bgColor-greenDark--hover:hover {
|
||||
@include ms-bgColor-greenDark;
|
||||
}
|
||||
|
||||
.ms-bgColor-green,
|
||||
.ms-bgColor-green--hover:hover {
|
||||
@include ms-bgColor-green;
|
||||
}
|
||||
|
||||
.ms-bgColor-greenLight,
|
||||
.ms-bgColor-greenLight--hover:hover {
|
||||
@include ms-bgColor-greenLight;
|
||||
}
|
||||
|
||||
// Message colors
|
||||
.ms-bgColor-info,
|
||||
.ms-bgColor-info--hover:hover {
|
||||
@include ms-bgColor-info;
|
||||
}
|
||||
|
||||
.ms-bgColor-success,
|
||||
.ms-bgColor-success--hover:hover {
|
||||
@include ms-bgColor-success;
|
||||
}
|
||||
|
||||
.ms-bgColor-severeWarning,
|
||||
.ms-bgColor-severeWarning--hover:hover {
|
||||
@include ms-bgColor-severeWarning;
|
||||
}
|
||||
|
||||
.ms-bgColor-warning,
|
||||
.ms-bgColor-warning--hover:hover {
|
||||
@include ms-bgColor-warning;
|
||||
}
|
||||
|
||||
.ms-bgColor-error,
|
||||
.ms-bgColor-error--hover:hover {
|
||||
@include ms-bgColor-error;
|
||||
}
|
||||
|
||||
|
||||
//== Border colors
|
||||
//
|
||||
|
||||
// Theme colors
|
||||
.ms-borderColor-themeDark,
|
||||
.ms-borderColor-themeDark--hover:hover {
|
||||
@include ms-borderColor-themeDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-themeDarkAlt,
|
||||
.ms-borderColor-themeDarkAlt--hover:hover {
|
||||
@include ms-borderColor-themeDarkAlt;
|
||||
}
|
||||
|
||||
.ms-borderColor-themeDarker,
|
||||
.ms-borderColor-themeDarker--hover:hover {
|
||||
@include ms-borderColor-themeDarker;
|
||||
}
|
||||
|
||||
.ms-borderColor-themePrimary,
|
||||
.ms-borderColor-themePrimary--hover:hover {
|
||||
@include ms-borderColor-themePrimary;
|
||||
}
|
||||
|
||||
.ms-borderColor-themeSecondary,
|
||||
.ms-borderColor-themeSecondary--hover:hover {
|
||||
@include ms-borderColor-themeSecondary;
|
||||
}
|
||||
|
||||
.ms-borderColor-themeTertiary,
|
||||
.ms-borderColor-themeTertiary--hover:hover {
|
||||
@include ms-borderColor-themeTertiary;
|
||||
}
|
||||
|
||||
.ms-borderColor-themeLight,
|
||||
.ms-borderColor-themeLight--hover:hover {
|
||||
@include ms-borderColor-themeLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-themeLighter,
|
||||
.ms-borderColor-themeLighter--hover:hover {
|
||||
@include ms-borderColor-themeLighter;
|
||||
}
|
||||
|
||||
.ms-borderColor-themeLighterAlt,
|
||||
.ms-borderColor-themeLighterAlt--hover:hover {
|
||||
@include ms-borderColor-themeLighterAlt;
|
||||
}
|
||||
|
||||
|
||||
// Neutral colors
|
||||
.ms-borderColor-black,
|
||||
.ms-borderColor-black--hover:hover {
|
||||
@include ms-borderColor-black;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralDark,
|
||||
.ms-borderColor-neutralDark--hover:hover {
|
||||
@include ms-borderColor-neutralDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralPrimary,
|
||||
.ms-borderColor-neutralPrimary--hover:hover {
|
||||
@include ms-borderColor-neutralPrimary;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralPrimaryAlt,
|
||||
.ms-borderColor-neutralPrimaryAlt--hover:hover {
|
||||
@include ms-borderColor-neutralPrimaryAlt;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralSecondary,
|
||||
.ms-borderColor-neutralSecondary--hover:hover {
|
||||
@include ms-borderColor-neutralSecondary;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralSecondaryAlt,
|
||||
.ms-borderColor-neutralSecondaryAlt--hover:hover {
|
||||
@include ms-borderColor-neutralSecondaryAlt;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralTertiary,
|
||||
.ms-borderColor-neutralTertiary--hover:hover {
|
||||
@include ms-borderColor-neutralTertiary;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralTertiaryAlt,
|
||||
.ms-borderColor-neutralTertiaryAlt--hover:hover {
|
||||
@include ms-borderColor-neutralTertiaryAlt;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralQuaternary,
|
||||
.ms-borderColor-neutralQuaternary--hover:hover {
|
||||
@include ms-borderColor-neutralQuaternary;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralQuaternaryAlt,
|
||||
.ms-borderColor-neutralQuaternaryAlt--hover:hover {
|
||||
@include ms-borderColor-neutralQuaternaryAlt;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralLight,
|
||||
.ms-borderColor-neutralLight--hover:hover {
|
||||
@include ms-borderColor-neutralLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralLighter,
|
||||
.ms-borderColor-neutralLighter--hover:hover {
|
||||
@include ms-borderColor-neutralLighter;
|
||||
}
|
||||
|
||||
.ms-borderColor-neutralLighterAlt,
|
||||
.ms-borderColor-neutralLighterAlt--hover:hover {
|
||||
@include ms-borderColor-neutralLighterAlt;
|
||||
}
|
||||
|
||||
.ms-borderColor-white,
|
||||
.ms-borderColor-white--hover:hover {
|
||||
@include ms-borderColor-white;
|
||||
}
|
||||
|
||||
// Brand and accent colors
|
||||
.ms-borderColor-yellow,
|
||||
.ms-borderColor-yellow--hover:hover {
|
||||
@include ms-borderColor-yellow;
|
||||
}
|
||||
|
||||
.ms-borderColor-yellowLight,
|
||||
.ms-borderColor-yellowLight--hover:hover {
|
||||
@include ms-borderColor-yellowLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-orange,
|
||||
.ms-borderColor-orange--hover:hover {
|
||||
@include ms-borderColor-orange;
|
||||
}
|
||||
|
||||
.ms-borderColor-orangeLight,
|
||||
.ms-borderColor-orangeLight--hover:hover {
|
||||
@include ms-borderColor-orangeLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-orangeLighter,
|
||||
.ms-borderColor-orangeLighter--hover:hover {
|
||||
@include ms-borderColor-orangeLighter;
|
||||
}
|
||||
|
||||
.ms-borderColor-redDark,
|
||||
.ms-borderColor-redDark--hover:hover {
|
||||
@include ms-borderColor-redDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-red,
|
||||
.ms-borderColor-red--hover:hover {
|
||||
@include ms-borderColor-red;
|
||||
}
|
||||
|
||||
.ms-borderColor-magentaDark,
|
||||
.ms-borderColor-magentaDark--hover:hover {
|
||||
@include ms-borderColor-magentaDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-magenta,
|
||||
.ms-borderColor-magenta--hover:hover {
|
||||
@include ms-borderColor-magenta;
|
||||
}
|
||||
|
||||
.ms-borderColor-magentaLight,
|
||||
.ms-borderColor-magentaLight--hover:hover {
|
||||
@include ms-borderColor-magentaLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-purpleDark,
|
||||
.ms-borderColor-purpleDark--hover:hover {
|
||||
@include ms-borderColor-purpleDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-purple,
|
||||
.ms-borderColor-purple--hover:hover {
|
||||
@include ms-borderColor-purple;
|
||||
}
|
||||
|
||||
.ms-borderColor-purpleLight,
|
||||
.ms-borderColor-purpleLight--hover:hover {
|
||||
@include ms-borderColor-purpleLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-blueDark,
|
||||
.ms-borderColor-blueDark--hover:hover {
|
||||
@include ms-borderColor-blueDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-blueMid,
|
||||
.ms-borderColor-blueMid--hover:hover {
|
||||
@include ms-borderColor-blueMid;
|
||||
}
|
||||
|
||||
.ms-borderColor-blue,
|
||||
.ms-borderColor-blue--hover:hover {
|
||||
@include ms-borderColor-blue;
|
||||
}
|
||||
|
||||
.ms-borderColor-blueLight,
|
||||
.ms-borderColor-blueLight--hover:hover {
|
||||
@include ms-borderColor-blueLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-tealDark,
|
||||
.ms-borderColor-tealDark--hover:hover {
|
||||
@include ms-borderColor-tealDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-teal,
|
||||
.ms-borderColor-teal--hover:hover {
|
||||
@include ms-borderColor-teal;
|
||||
}
|
||||
|
||||
.ms-borderColor-tealLight,
|
||||
.ms-borderColor-tealLight--hover:hover {
|
||||
@include ms-borderColor-tealLight;
|
||||
}
|
||||
|
||||
.ms-borderColor-greenDark,
|
||||
.ms-borderColor-greenDark--hover:hover {
|
||||
@include ms-borderColor-greenDark;
|
||||
}
|
||||
|
||||
.ms-borderColor-green,
|
||||
.ms-borderColor-green--hover:hover {
|
||||
@include ms-borderColor-green;
|
||||
}
|
||||
|
||||
.ms-borderColor-greenLight,
|
||||
.ms-borderColor-greenLight--hover:hover {
|
||||
@include ms-borderColor-greenLight;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Produce @font-face definitions for each of the web fonts.
|
||||
@include ms-font-face('Leelawadee UI Web', 'leelawadeeui-thai', 'leelawadeeui');
|
||||
@include ms-font-face('Segoe UI Web (Arabic)', 'segoeui-arabic');
|
||||
@include ms-font-face('Segoe UI Web (Cyrillic)', 'segoeui-cyrillic');
|
||||
@include ms-font-face('Segoe UI Web (East European)', 'segoeui-easteuropean');
|
||||
@include ms-font-face('Segoe UI Web (Greek)', 'segoeui-greek');
|
||||
@include ms-font-face('Segoe UI Web (Hebrew)', 'segoeui-hebrew');
|
||||
@include ms-font-face('Segoe UI Web (Vietnamese)', 'segoeui-vietnamese');
|
||||
@include ms-font-face('Segoe UI Web (West European)', 'segoeui-westeuropean');
|
||||
@include ms-font-face('Selawik Web', 'selawik', 'selawik');
|
||||
|
||||
|
||||
// Leelawadee UI (Thai and Lao) does not have a 'light' weight, so we override
|
||||
// the font-face generated above to use the 'semilight' weight instead.
|
||||
@font-face {
|
||||
font-family: 'Leelawadee UI Web';
|
||||
src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff2') format('woff2'),
|
||||
url('https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Leelawadee UI (Thai and Lao) does not have a 'semibold' weight, so we override
|
||||
// the font-face generated above to use the 'bold' weight instead.
|
||||
@font-face {
|
||||
font-family: 'Leelawadee UI Web';
|
||||
src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff2') format('woff2'),
|
||||
url('https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,407 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
|
||||
// Super Styles (LIMITED USE)
|
||||
// Weights: Light
|
||||
.ms-font-su {
|
||||
@include ms-font-su;
|
||||
}
|
||||
// No touch class for Super
|
||||
|
||||
// Extra-Extra-Large
|
||||
// Allowed weights: Light, SemiLight
|
||||
.ms-font-xxl {
|
||||
@include ms-font-xxl;
|
||||
}
|
||||
|
||||
// Extra-Large Plus Styles
|
||||
// Allowed weights: Light, SemiLight
|
||||
.ms-font-xl-plus {
|
||||
@include ms-font-xl-plus;
|
||||
}
|
||||
|
||||
// Extra-Large Styles
|
||||
// Allowed weights: Light, SemiLight
|
||||
.ms-font-xl {
|
||||
@include ms-font-xl;
|
||||
}
|
||||
|
||||
// Large Styles
|
||||
// Allowed weights: SemiLight, Regular, Semibold
|
||||
.ms-font-l {
|
||||
@include ms-font-l;
|
||||
}
|
||||
|
||||
// Medium Plus Styles
|
||||
// Allowed weights: SemiLight, Regular, Semibold
|
||||
.ms-font-m-plus {
|
||||
@include ms-font-m-plus;
|
||||
}
|
||||
|
||||
// Medium Styles
|
||||
// Allowed weights: SemiLight, Regular, Semibold
|
||||
.ms-font-m {
|
||||
@include ms-font-m;
|
||||
}
|
||||
|
||||
// Small Plus Styles
|
||||
// Allowed weights: SemiLight, Regular, Semibold
|
||||
.ms-font-s-plus {
|
||||
@include ms-font-s-plus;
|
||||
}
|
||||
|
||||
// Small Styles
|
||||
// Allowed weights: SemiLight, Regular, Semibold
|
||||
.ms-font-s {
|
||||
@include ms-font-s;
|
||||
}
|
||||
|
||||
// XS Styles
|
||||
// Allowed weights: SemiLight, Regular, Semibold
|
||||
.ms-font-xs {
|
||||
@include ms-font-xs;
|
||||
}
|
||||
|
||||
// Micro Styles (LIMITED USE)
|
||||
// Weights: Semibold
|
||||
.ms-font-mi {
|
||||
@include ms-font-mi;
|
||||
}
|
||||
|
||||
//== Helper classes & mixins
|
||||
//
|
||||
// Helper mixins to override default type values
|
||||
|
||||
// Font weights
|
||||
.ms-fontWeight-light {
|
||||
@include ms-fontWeight-light;
|
||||
}
|
||||
|
||||
.ms-fontWeight-semilight {
|
||||
@include ms-fontWeight-semilight;
|
||||
}
|
||||
|
||||
.ms-fontWeight-regular {
|
||||
@include ms-fontWeight-regular;
|
||||
}
|
||||
|
||||
.ms-fontWeight-semibold {
|
||||
@include ms-fontWeight-semibold;
|
||||
}
|
||||
|
||||
.ms-fontWeight-bold {
|
||||
@include ms-fontWeight-bold;
|
||||
}
|
||||
|
||||
// Font sizes
|
||||
.ms-fontSize-su {
|
||||
@include ms-fontSize-su;
|
||||
}
|
||||
|
||||
.ms-fontSize-xxl {
|
||||
@include ms-fontSize-xxl;
|
||||
}
|
||||
|
||||
.ms-fontSize-xlPlus {
|
||||
@include ms-fontSize-xlPlus;
|
||||
}
|
||||
|
||||
.ms-fontSize-xl {
|
||||
@include ms-fontSize-xl;
|
||||
}
|
||||
|
||||
.ms-fontSize-l {
|
||||
@include ms-fontSize-l;
|
||||
}
|
||||
|
||||
.ms-fontSize-mPlus {
|
||||
@include ms-fontSize-mPlus;
|
||||
}
|
||||
|
||||
.ms-fontSize-m {
|
||||
@include ms-fontSize-m;
|
||||
}
|
||||
|
||||
.ms-fontSize-sPlus {
|
||||
@include ms-fontSize-sPlus;
|
||||
}
|
||||
|
||||
.ms-fontSize-s {
|
||||
@include ms-fontSize-s;
|
||||
}
|
||||
|
||||
.ms-fontSize-xs {
|
||||
@include ms-fontSize-xs;
|
||||
}
|
||||
|
||||
.ms-fontSize-mi {
|
||||
@include ms-fontSize-mi;
|
||||
}
|
||||
|
||||
// Theme colors
|
||||
.ms-fontColor-themeDarker,
|
||||
.ms-fontColor-themeDarker--hover:hover {
|
||||
@include ms-fontColor-themeDarker;
|
||||
}
|
||||
|
||||
.ms-fontColor-themeDark,
|
||||
.ms-fontColor-themeDark--hover:hover {
|
||||
@include ms-fontColor-themeDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-themeDarkAlt,
|
||||
.ms-fontColor-themeDarkAlt--hover:hover {
|
||||
@include ms-fontColor-themeDarkAlt;
|
||||
}
|
||||
|
||||
.ms-fontColor-themePrimary,
|
||||
.ms-fontColor-themePrimary--hover:hover {
|
||||
@include ms-fontColor-themePrimary;
|
||||
}
|
||||
|
||||
.ms-fontColor-themeSecondary,
|
||||
.ms-fontColor-themeSecondary--hover:hover {
|
||||
@include ms-fontColor-themeSecondary;
|
||||
}
|
||||
|
||||
.ms-fontColor-themeTertiary,
|
||||
.ms-fontColor-themeTertiary--hover:hover {
|
||||
@include ms-fontColor-themeTertiary;
|
||||
}
|
||||
|
||||
.ms-fontColor-themeLight,
|
||||
.ms-fontColor-themeLight--hover:hover {
|
||||
@include ms-fontColor-themeLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-themeLighter,
|
||||
.ms-fontColor-themeLighter--hover:hover {
|
||||
@include ms-fontColor-themeLighter;
|
||||
}
|
||||
|
||||
.ms-fontColor-themeLighterAlt,
|
||||
.ms-fontColor-themeLighterAlt--hover:hover {
|
||||
@include ms-fontColor-themeLighterAlt;
|
||||
}
|
||||
|
||||
|
||||
// Neutral colors
|
||||
.ms-fontColor-black,
|
||||
.ms-fontColor-black--hover:hover {
|
||||
@include ms-fontColor-black;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralDark,
|
||||
.ms-fontColor-neutralDark--hover:hover {
|
||||
@include ms-fontColor-neutralDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralPrimary,
|
||||
.ms-fontColor-neutralPrimary--hover:hover {
|
||||
@include ms-fontColor-neutralPrimary;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralPrimaryAlt,
|
||||
.ms-fontColor-neutralPrimaryAlt--hover:hover {
|
||||
@include ms-fontColor-neutralPrimaryAlt;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralSecondary,
|
||||
.ms-fontColor-neutralSecondary--hover:hover {
|
||||
@include ms-fontColor-neutralSecondary;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralSecondaryAlt,
|
||||
.ms-fontColor-neutralSecondaryAlt--hover:hover {
|
||||
@include ms-fontColor-neutralSecondaryAlt;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralTertiary,
|
||||
.ms-fontColor-neutralTertiary--hover:hover {
|
||||
@include ms-fontColor-neutralTertiary;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralTertiaryAlt,
|
||||
.ms-fontColor-neutralTertiaryAlt--hover:hover {
|
||||
@include ms-fontColor-neutralTertiaryAlt;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralQuaternary,
|
||||
.ms-fontColor-neutralQuaternary--hover:hover {
|
||||
@include ms-fontColor-neutralQuaternary;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralQuaternaryAlt,
|
||||
.ms-fontColor-neutralQuaternaryAlt--hover:hover {
|
||||
@include ms-fontColor-neutralQuaternaryAlt;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralLight,
|
||||
.ms-fontColor-neutralLight--hover:hover {
|
||||
@include ms-fontColor-neutralLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralLighter,
|
||||
.ms-fontColor-neutralLighter--hover:hover {
|
||||
@include ms-fontColor-neutralLighter;
|
||||
}
|
||||
|
||||
.ms-fontColor-neutralLighterAlt,
|
||||
.ms-fontColor-neutralLighterAlt--hover:hover {
|
||||
@include ms-fontColor-neutralLighterAlt;
|
||||
}
|
||||
|
||||
.ms-fontColor-white,
|
||||
.ms-fontColor-white--hover:hover {
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
// Brand and accent colors
|
||||
.ms-fontColor-yellow,
|
||||
.ms-fontColor-yellow--hover:hover {
|
||||
@include ms-fontColor-yellow;
|
||||
}
|
||||
|
||||
.ms-fontColor-yellowLight,
|
||||
.ms-fontColor-yellowLight--hover:hover {
|
||||
@include ms-fontColor-yellowLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-orange,
|
||||
.ms-fontColor-orange--hover:hover {
|
||||
@include ms-fontColor-orange;
|
||||
}
|
||||
|
||||
.ms-fontColor-orangeLight,
|
||||
.ms-fontColor-orangeLight--hover:hover {
|
||||
@include ms-fontColor-orangeLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-orangeLighter,
|
||||
.ms-fontColor-orangeLighter--hover:hover {
|
||||
@include ms-fontColor-orangeLighter;
|
||||
}
|
||||
|
||||
.ms-fontColor-redDark,
|
||||
.ms-fontColor-redDark--hover:hover {
|
||||
@include ms-fontColor-redDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-red,
|
||||
.ms-fontColor-red--hover:hover {
|
||||
@include ms-fontColor-red;
|
||||
}
|
||||
|
||||
.ms-fontColor-magentaDark,
|
||||
.ms-fontColor-magentaDark--hover:hover {
|
||||
@include ms-fontColor-magentaDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-magenta,
|
||||
.ms-fontColor-magenta--hover:hover {
|
||||
@include ms-fontColor-magenta;
|
||||
}
|
||||
|
||||
.ms-fontColor-magentaLight,
|
||||
.ms-fontColor-magentaLight--hover:hover {
|
||||
@include ms-fontColor-magentaLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-purpleDark,
|
||||
.ms-fontColor-purpleDark--hover:hover {
|
||||
@include ms-fontColor-purpleDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-purple,
|
||||
.ms-fontColor-purple--hover:hover {
|
||||
@include ms-fontColor-purple;
|
||||
}
|
||||
|
||||
.ms-fontColor-purpleLight,
|
||||
.ms-fontColor-purpleLight--hover:hover {
|
||||
@include ms-fontColor-purpleLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-blueDark,
|
||||
.ms-fontColor-blueDark--hover:hover {
|
||||
@include ms-fontColor-blueDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-blueMid,
|
||||
.ms-fontColor-blueMid--hover:hover {
|
||||
@include ms-fontColor-blueMid;
|
||||
}
|
||||
|
||||
.ms-fontColor-blue,
|
||||
.ms-fontColor-blue--hover:hover {
|
||||
@include ms-fontColor-blue;
|
||||
}
|
||||
|
||||
.ms-fontColor-blueLight,
|
||||
.ms-fontColor-blueLight--hover:hover {
|
||||
@include ms-fontColor-blueLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-tealDark,
|
||||
.ms-fontColor-tealDark--hover:hover {
|
||||
@include ms-fontColor-tealDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-teal,
|
||||
.ms-fontColor-teal--hover:hover {
|
||||
@include ms-fontColor-teal;
|
||||
}
|
||||
|
||||
.ms-fontColor-tealLight,
|
||||
.ms-fontColor-tealLight--hover:hover {
|
||||
@include ms-fontColor-tealLight;
|
||||
}
|
||||
|
||||
.ms-fontColor-greenDark,
|
||||
.ms-fontColor-greenDark--hover:hover {
|
||||
@include ms-fontColor-greenDark;
|
||||
}
|
||||
|
||||
.ms-fontColor-green,
|
||||
.ms-fontColor-green--hover:hover {
|
||||
@include ms-fontColor-green;
|
||||
}
|
||||
|
||||
.ms-fontColor-greenLight,
|
||||
.ms-fontColor-greenLight--hover:hover {
|
||||
@include ms-fontColor-greenLight;
|
||||
}
|
||||
|
||||
// Message colors
|
||||
.ms-fontColor-info,
|
||||
.ms-fontColor-info--hover:hover {
|
||||
@include ms-fontColor-info;
|
||||
}
|
||||
|
||||
.ms-fontColor-success,
|
||||
.ms-fontColor-success--hover:hover {
|
||||
@include ms-fontColor-success;
|
||||
}
|
||||
|
||||
.ms-fontColor-alert,
|
||||
.ms-fontColor-alert--hover:hover { // Deprecated: Use ms-fontColor-severeWarning
|
||||
@include ms-fontColor-alert;
|
||||
}
|
||||
|
||||
.ms-fontColor-warning,
|
||||
.ms-fontColor-warning--hover:hover {
|
||||
@include ms-fontColor-warning;
|
||||
}
|
||||
|
||||
.ms-fontColor-severeWarning,
|
||||
.ms-fontColor-severeWarning--hover:hover {
|
||||
@include ms-fontColor-severeWarning;
|
||||
}
|
||||
|
||||
.ms-fontColor-error,
|
||||
.ms-fontColor-error--hover:hover {
|
||||
@include ms-fontColor-error;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
// 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)
|
||||
//
|
||||
.ms-Grid {
|
||||
@include ms-Grid;
|
||||
}
|
||||
|
||||
//== Grid rows (pull first and last column out)
|
||||
//
|
||||
.ms-Grid-row {
|
||||
@include ms-Grid-row;
|
||||
}
|
||||
|
||||
//== Grid cells
|
||||
//
|
||||
.ms-Grid-col {
|
||||
@include ms-Grid-col;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Icon font-family definition
|
||||
|
||||
/*
|
||||
Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
|
||||
*/
|
||||
|
||||
// Font-face definition for the 'FabricMDL2Icons' icon font
|
||||
@font-face {
|
||||
$icon-font-family: 'FabricMDL2Icons';
|
||||
$icon-font-name: 'fabricmdl2icons';
|
||||
$icon-font-version: '2.68';
|
||||
|
||||
@if variable_exists(do-scope-styles) {
|
||||
$icon-font-family: 'FabricMDL2Icons-' + $ms-fabric-version-major;
|
||||
$icon-font-name: 'scoped/fabricmdl2icons-' + $ms-fabric-version-major;
|
||||
}
|
||||
|
||||
font-family: $icon-font-family;
|
||||
src: url('https://static2.sharepointonline.com/files/fabric/assets/icons/#{$icon-font-name}-#{$icon-font-version}.woff2') format('woff2'),
|
||||
url('https://static2.sharepointonline.com/files/fabric/assets/icons/#{$icon-font-name}-#{$icon-font-version}.woff') format('woff'),
|
||||
url('https://static2.sharepointonline.com/files/fabric/assets/icons/#{$icon-font-name}-#{$icon-font-version}.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Icon class definitions
|
||||
|
||||
|
||||
// Base icon definition
|
||||
.ms-Icon {
|
||||
@include ms-Icon;
|
||||
}
|
||||
|
||||
// Modifier: Place the icon in a circle
|
||||
.ms-Icon--circle {
|
||||
@include ms-Icon--circle;
|
||||
}
|
||||
|
||||
// Modifiers: Size classes
|
||||
.ms-Icon--xs {
|
||||
@include ms-Icon--xs;
|
||||
}
|
||||
|
||||
.ms-Icon--s {
|
||||
@include ms-Icon--s;
|
||||
}
|
||||
|
||||
.ms-Icon--m {
|
||||
@include ms-Icon--m;
|
||||
}
|
||||
|
||||
.ms-Icon--l {
|
||||
@include ms-Icon--l;
|
||||
}
|
||||
|
||||
// Modifiers: Each of the icons.
|
||||
@include ms-icon-classes($ms-icon-map);
|
||||
@@ -0,0 +1,27 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Variables and mixins that can be referenced without outputting any CSS.
|
||||
|
||||
// Variables
|
||||
@import './variables/Animation.Variables';
|
||||
@import './variables/BrandIcon.Variables';
|
||||
@import './variables/Color.Variables';
|
||||
@import './variables/Font.Variables';
|
||||
@import './variables/General.Variables';
|
||||
@import './variables/Icon.Variables';
|
||||
@import './variables/Responsive.Variables';
|
||||
@import './variables/ZIndex.Variables';
|
||||
|
||||
// Mixins
|
||||
@import './mixins/Animation.Mixins';
|
||||
@import './mixins/BrandIcon.Mixins';
|
||||
@import './mixins/Color.Mixins';
|
||||
@import './mixins/Directionality.Mixins';
|
||||
@import './mixins/Font.Mixins';
|
||||
@import './mixins/Grid.Mixins';
|
||||
@import './mixins/Icon.Mixins';
|
||||
@import './mixins/General.Mixins';
|
||||
@import './mixins/Responsive.Mixins';
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,54 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Some mixins are output to CSS classes as utilities.
|
||||
|
||||
// The best box is a border box.
|
||||
.ms-borderBox, .ms-borderBox::before, .ms-borderBox::after {
|
||||
@include ms-borderBox;
|
||||
}
|
||||
|
||||
// To apply border base settings
|
||||
.ms-borderBase {
|
||||
@include ms-borderBase;
|
||||
}
|
||||
|
||||
// Ensures the block expands to the full height to enclose its floated childen.
|
||||
.ms-clearfix {
|
||||
@include ms-clearfix;
|
||||
}
|
||||
|
||||
// Basic border-box, margin, and padding reset.
|
||||
.ms-normalize {
|
||||
@include ms-normalize;
|
||||
}
|
||||
|
||||
// Text alignments.
|
||||
.ms-textAlignLeft {
|
||||
@include ms-text-align(left);
|
||||
}
|
||||
|
||||
.ms-textAlignRight {
|
||||
@include ms-text-align(right);
|
||||
}
|
||||
|
||||
.ms-textAlignCenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Use to hide content while still making it readable by screen reader (Accessibility)
|
||||
.ms-screenReaderOnly {
|
||||
@include ms-screenReaderOnly;
|
||||
}
|
||||
|
||||
// Use to add truncation with ellipsis
|
||||
.ms-textTruncate {
|
||||
@include ms-textTruncate;
|
||||
}
|
||||
|
||||
// Use to disable text wrapping
|
||||
.ms-noWrap{
|
||||
@include ms-noWrap;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Wrapper component to set base typography.
|
||||
|
||||
.ms-Fabric {
|
||||
@include ms-Fabric;
|
||||
}
|
||||
|
||||
// Create overrides for each language that has an alternate font-family.
|
||||
@include ms-font-family-language-override('ar', $ms-font-family-arabic);
|
||||
@include ms-font-family-language-override('bg', $ms-font-family-cyrillic);
|
||||
@include ms-font-family-language-override('cs', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('el', $ms-font-family-greek);
|
||||
@include ms-font-family-language-override('et', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('he', $ms-font-family-hebrew);
|
||||
@include ms-font-family-language-override('hi', $ms-font-family-hindi);
|
||||
@include ms-font-family-language-override('hr', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('hu', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('ja', $ms-font-family-japanese);
|
||||
@include ms-font-family-language-override('kk', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('ko', $ms-font-family-korean);
|
||||
@include ms-font-family-language-override('lo', $ms-font-family-lao);
|
||||
@include ms-font-family-language-override('lt', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('lv', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('pl', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('ru', $ms-font-family-cyrillic);
|
||||
@include ms-font-family-language-override('sk', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('sr-latn', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('th', $ms-font-family-thai);
|
||||
@include ms-font-family-language-override('tr', $ms-font-family-east-european);
|
||||
@include ms-font-family-language-override('uk', $ms-font-family-cyrillic);
|
||||
@include ms-font-family-language-override('vi', $ms-font-family-vietnamese);
|
||||
@include ms-font-family-language-override('zh-hans', $ms-font-family-chinese-simplified);
|
||||
@include ms-font-family-language-override('zh-hant', $ms-font-family-chinese-traditional);
|
||||
|
||||
// Modifier: Use Selawik as an open source alternative to Segoe UI.
|
||||
.ms-Fabric--selawik {
|
||||
font-family: $ms-font-family-selawik;
|
||||
}
|
||||
@@ -0,0 +1,451 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Fabric Animations
|
||||
|
||||
|
||||
// Outputs the keyframes used by the animation classes
|
||||
@mixin ms-animation-keyframes() {
|
||||
// Set a default value for the version-scoped variable if it isn't assigned
|
||||
$ms-fabric-version-suffix: '' !default;
|
||||
|
||||
@keyframes ms-slideRightIn10#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(-10px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideRightIn20#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(-20px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideRightIn40#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(-40px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideRightIn400#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(-400px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideRightOut40#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, 0px, 0px); }
|
||||
to { transform: translate3d(40px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideRightOut400#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0, 0px, 0px); }
|
||||
to { transform: translate3d(400px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideLeftIn10#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(10px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideLeftIn20#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(20px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideLeftIn40#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(40px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideLeftIn400#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(400px, 0px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideLeftOut40#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0, 0px, 0px); }
|
||||
to { transform: translate3d(-40px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideLeftOut400#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0, 0px, 0px); }
|
||||
to { transform: translate3d(-400px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideUpIn10#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, 10px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideUpIn20#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, 20px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideDownIn10#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, -10px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideDownIn20#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, -20px, 0px); }
|
||||
to { transform: translate3d(0px, 0px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideUpOut10#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, 0, 0px); }
|
||||
to { transform: translate3d(0px, -10px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideUpOut20#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, 0, 0px); }
|
||||
to { transform: translate3d(0px, -20px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideDownOut10#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, 0, 0px); }
|
||||
to { transform: translate3d(0px, 10px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-slideDownOut20#{$ms-fabric-version-suffix} {
|
||||
from { transform: translate3d(0px, 0, 0px); }
|
||||
to { transform: translate3d(0px, 20px, 0px); }
|
||||
}
|
||||
|
||||
@keyframes ms-scaleUp100#{$ms-fabric-version-suffix} {
|
||||
from { transform: scale3d(.98, .98, 1); }
|
||||
to { transform: scale3d(1, 1, 1); }
|
||||
}
|
||||
|
||||
@keyframes ms-scaleUp103#{$ms-fabric-version-suffix} {
|
||||
from { transform: scale3d(1, 1, 1); }
|
||||
to { transform: scale3d(1.03, 1.03, 1); }
|
||||
}
|
||||
|
||||
@keyframes ms-scaleDown98#{$ms-fabric-version-suffix} {
|
||||
from { transform: scale3d(1, 1, 1); }
|
||||
to { transform: scale3d(0.98, 0.98, 1); }
|
||||
}
|
||||
|
||||
@keyframes ms-scaleDown100#{$ms-fabric-version-suffix} {
|
||||
from { transform: scale3d(1.03, 1.03, 1); }
|
||||
to { transform: scale3d(1, 1, 1); }
|
||||
}
|
||||
|
||||
@keyframes ms-fadeIn#{$ms-fabric-version-suffix} {
|
||||
from {
|
||||
opacity: 0;
|
||||
animation-timing-function: $ms-animation-ease-2;
|
||||
}
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes ms-fadeOut#{$ms-fabric-version-suffix} {
|
||||
from {
|
||||
opacity: 1;
|
||||
animation-timing-function: $ms-animation-ease-2;
|
||||
}
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes ms-rotate90#{$ms-fabric-version-suffix} {
|
||||
from { transform: rotateZ(0deg); }
|
||||
to { transform: rotateZ(90deg); }
|
||||
}
|
||||
|
||||
@keyframes ms-rotateN90#{$ms-fabric-version-suffix} {
|
||||
from { transform: rotateZ(90deg); }
|
||||
to { transform: rotateZ(0deg); }
|
||||
}
|
||||
}
|
||||
|
||||
// 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, unquote($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
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,428 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
//
|
||||
// Office UI Fabric
|
||||
// --------------------------------------------------
|
||||
// Fabric Core Color Mixins
|
||||
|
||||
|
||||
//== Background colors
|
||||
//
|
||||
// Theme colors
|
||||
@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;
|
||||
}
|
||||
|
||||
// Neutral colors
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
// Brand and accent colors
|
||||
@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;
|
||||
}
|
||||
|
||||
// Message colors
|
||||
@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 colors
|
||||
//
|
||||
|
||||
// Theme colors
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
// Neutral colors
|
||||
@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;
|
||||
}
|
||||
|
||||
// Brand and accent colors
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
// Message colors
|
||||
@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;
|
||||
}
|
||||
@@ -0,0 +1,358 @@
|
||||
// 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) {
|
||||
@include ms-LTR {
|
||||
box-shadow: $left $etc;
|
||||
}
|
||||
|
||||
@include ms-RTL {
|
||||
box-shadow: -$left $etc;
|
||||
}
|
||||
}
|
||||
|
||||
// Transforms.
|
||||
@mixin ms-transform-scaleX($scaleX: 1) {
|
||||
@include ms-LTR {
|
||||
transform: scaleX($scaleX);
|
||||
}
|
||||
|
||||
@include ms-RTL {
|
||||
transform: scaleX(-$scaleX);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ms-transform-translateX($distance) {
|
||||
@include ms-LTR {
|
||||
transform: translateX($distance);
|
||||
}
|
||||
|
||||
@include ms-RTL {
|
||||
transform: translateX(-$distance);
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
// 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: $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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
@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 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;
|
||||
}
|
||||
|
||||
// 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-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
|
||||
@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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Easings
|
||||
$ms-animation-ease-1: cubic-bezier(0.1,0.9,0.2,1) !default;
|
||||
$ms-animation-ease-2: cubic-bezier(0.1,0.25,0.75,0.9) !default;
|
||||
|
||||
// Durations
|
||||
$ms-animation-duration-1: 0.167s !default;
|
||||
$ms-animation-duration-2: 0.267s !default;
|
||||
$ms-animation-duration-3: 0.367s !default;
|
||||
$ms-animation-duration-4: 0.467s !default;
|
||||
@@ -0,0 +1,12 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Image paths
|
||||
$ms-brand-icon-product-images-path: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png';
|
||||
$ms-brand-icon-document-images-path: 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types';
|
||||
|
||||
// Names
|
||||
$ms-brand-icon-product-icons: access excel infopath office onedrive onenote outlook powerpoint project sharepoint visio word;
|
||||
$ms-brand-icon-document-icons: accdb archive audio code csv docset docx dotx email exe folder font genericfile html link listitem model mpp mpt odp ods odt one onetoc pdf photo potx ppsx pptx pub rtf sharedfolder spo sysfile txt vector video vsdx vssx vstx xlsx xltx xml xsn zip;
|
||||
|
||||
// Sizes
|
||||
$ms-brand-icon-sizes: 16 48 96;
|
||||
@@ -0,0 +1,73 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Theme
|
||||
$ms-color-themeDarker: #004578 !default;
|
||||
$ms-color-themeDark: #005a9e !default;
|
||||
$ms-color-themeDarkAlt: #106ebe !default;
|
||||
$ms-color-themePrimary: #0078d4 !default;
|
||||
$ms-color-themeSecondary: #2b88d8 !default;
|
||||
$ms-color-themeTertiary: #71afe5 !default;
|
||||
$ms-color-themeLight: #c7e0f4 !default;
|
||||
$ms-color-themeLighter: #deecf9 !default;
|
||||
$ms-color-themeLighterAlt: #eff6fc !default;
|
||||
|
||||
// Neutral
|
||||
$ms-color-black: #000000 !default;
|
||||
$ms-color-neutralDark: #212121 !default;
|
||||
$ms-color-neutralPrimary: #333333 !default;
|
||||
$ms-color-neutralPrimaryAlt: #3C3C3C !default;
|
||||
$ms-color-neutralSecondary: #666666 !default;
|
||||
$ms-color-neutralSecondaryAlt: #767676 !default;
|
||||
$ms-color-neutralTertiary: #a6a6a6 !default;
|
||||
$ms-color-neutralTertiaryAlt: #c8c8c8 !default;
|
||||
$ms-color-neutralQuaternary: #d0d0d0 !default;
|
||||
$ms-color-neutralQuaternaryAlt: #dadada !default;
|
||||
$ms-color-neutralLight: #eaeaea !default;
|
||||
$ms-color-neutralLighter: #f4f4f4 !default;
|
||||
$ms-color-neutralLighterAlt: #f8f8f8 !default;
|
||||
$ms-color-white: #ffffff !default;
|
||||
|
||||
// Accent
|
||||
$ms-color-yellow: #ffb900 !default;
|
||||
$ms-color-yellowLight: #fff100 !default;
|
||||
$ms-color-orange: #d83b01 !default;
|
||||
$ms-color-orangeLight: #ea4300 !default;
|
||||
$ms-color-orangeLighter: #ff8c00 !default;
|
||||
$ms-color-redDark: #a80000 !default;
|
||||
$ms-color-red: #e81123 !default;
|
||||
$ms-color-magentaDark: #5c005c !default;
|
||||
$ms-color-magenta: #b4009e !default;
|
||||
$ms-color-magentaLight: #e3008c !default;
|
||||
$ms-color-purpleDark: #32145a !default;
|
||||
$ms-color-purple: #5c2d91 !default;
|
||||
$ms-color-purpleLight: #b4a0ff !default;
|
||||
$ms-color-blueDark: #002050 !default;
|
||||
$ms-color-blueMid: #00188f !default;
|
||||
$ms-color-blue: #0078d7 !default;
|
||||
$ms-color-blueLight: #00bcf2 !default;
|
||||
$ms-color-tealDark: #004b50 !default;
|
||||
$ms-color-teal: #008272 !default;
|
||||
$ms-color-tealLight: #00b294 !default;
|
||||
$ms-color-greenDark: #004b1c !default;
|
||||
$ms-color-green: #107c10 !default;
|
||||
$ms-color-greenLight: #bad80a !default;
|
||||
|
||||
// Message
|
||||
$ms-color-info: $ms-color-neutralSecondaryAlt !default;
|
||||
$ms-color-infoBackground: $ms-color-neutralLighter !default;
|
||||
$ms-color-success: $ms-color-green !default;
|
||||
$ms-color-successBackground: #dff6dd !default;
|
||||
$ms-color-severeWarning: $ms-color-orange !default;
|
||||
$ms-color-severeWarningBackground: #fed9cc !default;
|
||||
$ms-color-alert: $ms-color-severeWarning !default; // Deprecated: Use $ms-color-severeWarning
|
||||
$ms-color-alertBackground: $ms-color-severeWarningBackground !default; // Deprecated: Use $ms-color-severeWarningBackground
|
||||
$ms-color-warning: $ms-color-neutralSecondaryAlt !default;
|
||||
$ms-color-warningBackground: #fff4ce !default;
|
||||
$ms-color-error: $ms-color-redDark !default;
|
||||
$ms-color-errorBackground: #fde7e9 !default;
|
||||
|
||||
// High contrast colors
|
||||
$ms-color-contrastBlackDisabled: #00ff00 !default;
|
||||
$ms-color-contrastWhiteDisabled: #600000 !default;
|
||||
$ms-color-contrastBlackSelected: #1AEBFF !default;
|
||||
$ms-color-contrastWhiteSelected: #37006E !default;
|
||||
@@ -0,0 +1,44 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Font directory and paths
|
||||
$ms-font-cdn-path: 'https://static2.sharepointonline.com/files/fabric/assets/fonts' !default;
|
||||
|
||||
// Fallback fonts, if specified system or web fonts are unavailable.
|
||||
$ms-font-family-fallbacks: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;
|
||||
|
||||
// Language-specific font stacks.
|
||||
$ms-font-family-arabic: 'Segoe UI Web (Arabic)', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-chinese-simplified: 'Microsoft Yahei UI', Verdana, Simsun, $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-chinese-traditional: 'Microsoft Jhenghei UI', Pmingliu, $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-cyrillic: 'Segoe UI Web (Cyrillic)', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-east-european: 'Segoe UI Web (East European)', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-greek: 'Segoe UI Web (Greek)', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-hebrew: 'Segoe UI Web (Hebrew)', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-hindi: 'Nirmala UI', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-japanese: 'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-korean: 'Malgun Gothic', Gulim, $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-lao: 'Leelawadee UI Web', 'Lao UI', DokChampa, $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-selawik: 'Selawik Web', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-thai: 'Leelawadee UI Web', 'Kmer UI', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-vietnamese: 'Segoe UI Web (Vietnamese)', $ms-font-family-fallbacks !default;
|
||||
$ms-font-family-west-european: 'Segoe UI Web (West European)', $ms-font-family-fallbacks !default;
|
||||
|
||||
// Weights
|
||||
$ms-font-weight-light: 100 !default;
|
||||
$ms-font-weight-semilight: 300 !default;
|
||||
$ms-font-weight-regular: 400 !default;
|
||||
$ms-font-weight-semibold: 600 !default;
|
||||
$ms-font-weight-bold: 700 !default;
|
||||
|
||||
// Sizes
|
||||
$ms-font-size-su: 42px !default;
|
||||
$ms-font-size-xxl: 28px !default;
|
||||
$ms-font-size-xl-plus: 24px !default;
|
||||
$ms-font-size-xl: 21px !default;
|
||||
$ms-font-size-l: 17px !default;
|
||||
$ms-font-size-m-plus: 15px !default;
|
||||
$ms-font-size-m: 14px !default;
|
||||
$ms-font-size-s-plus: 13px !default;
|
||||
$ms-font-size-s: 12px !default;
|
||||
$ms-font-size-xs: 11px !default;
|
||||
$ms-font-size-mi: 10px !default;
|
||||
@@ -0,0 +1,6 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Default focus border style.
|
||||
$ms-focus-border-width: 1px;
|
||||
$ms-focus-border-color: $ms-color-neutralSecondary;
|
||||
$ms-focus-border-style: solid;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,16 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Minimum widths for each breakpoint
|
||||
$ms-screen-min-sm: 320px !default;
|
||||
$ms-screen-min-md: 480px !default;
|
||||
$ms-screen-min-lg: 640px !default;
|
||||
$ms-screen-min-xl: 1024px !default;
|
||||
$ms-screen-min-xxl: 1366px !default;
|
||||
$ms-screen-min-xxxl: 1920px !default;
|
||||
|
||||
// Maximum widths for each breakpoint
|
||||
$ms-screen-max-sm: ($ms-screen-min-md - 1);
|
||||
$ms-screen-max-md: ($ms-screen-min-lg - 1);
|
||||
$ms-screen-max-lg: ($ms-screen-min-xl - 1);
|
||||
$ms-screen-max-xl: ($ms-screen-min-xxl - 1);
|
||||
$ms-screen-max-xxl: ($ms-screen-min-xxxl - 1);
|
||||
@@ -0,0 +1,14 @@
|
||||
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
|
||||
|
||||
// Large ranges
|
||||
$ms-zIndex-0: 0 !default;
|
||||
$ms-zIndex-1: 100 !default;
|
||||
$ms-zIndex-2: 200 !default;
|
||||
$ms-zIndex-3: 300 !default;
|
||||
$ms-zIndex-4: 400 !default;
|
||||
$ms-zIndex-5: 500 !default;
|
||||
|
||||
// Small ranges
|
||||
$ms-zIndex-back: 0 !default;
|
||||
$ms-zIndex-middle: 5 !default;
|
||||
$ms-zIndex-front: 10 !default;
|
||||
Reference in New Issue
Block a user