Going on and add to repo not committed files
This commit is contained in:
Claudio Boggian
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user