office-ui-fabric-core-rails 4.0.0.0

data/vendor/assets/scss/Fabric.Utilities.Output.scss

@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Utility classes and mixins used throughout Fabric.
+
+@import "Fabric.Utilities";
+
+// The best box is a border box.
+.ms-u-borderBox, .ms-u-borderBox::before, .ms-u-borderBox::after {
+  @include ms-u-borderBox;
+}
+
+// To apply border base settings
+.ms-u-borderBase {
+  @include ms-u-borderBase;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+.ms-u-clearfix {
+  @include ms-u-clearfix;
+}
+
+// Basic border-box, margin, and padding reset.
+.ms-u-normalize {
+  @include ms-u-normalize;
+}
+
+// Use to set left, center, right text alignment styles 
+@include ms-u-textAlign(left, center, right);
+
+// Use to hide content while still making it readable by screen reader (Accessibility)
+.ms-u-screenReaderOnly {
+  @include ms-u-screenReaderOnly
+}
+
+// Use to add truncation with ellipsis
+.ms-u-textTruncate {
+  @include ms-u-textTruncate
+}
+
+// Use to disable text wrapping
+.ms-u-noWrap{
+  @include ms-u-noWrap
+}

data/vendor/assets/scss/Fabric.scss

@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// Core Module Loader
+
+
+// Common utilities
+@import './Fabric.Utilities.Output';
+@import './Fabric.ZIndex.Variables';
+@import './Fabric.Mixins';
+@import "./Fabric.Mixins.RTL";
+
+// Colors
+@import './Fabric.Color.Variables';
+@import './Fabric.Color.Mixins.Output';
+
+// Typography
+@import './Fabric.Typography.Variables';
+@import './Fabric.Typography.Mixins';
+@import './Fabric.Typography.Output';
+@import './Fabric.Typography.Fonts.Output';
+
+// Icons
+@import './Fabric.Icons.Font.Output';
+@import './Fabric.Icons.Output';
+
+// Animations
+@import './Fabric.Animations.Output';
+
+// Responsive
+@import './Fabric.Responsive.Variables';
+@import './Fabric.Responsive.Utilities.Variables';
+@import './Fabric.Responsive.Utilities.Output';
+
+// Grid
+@import './Fabric.Grid.Output';
+
+// Base/wrapper component
+@import './Fabric.Base.Output';

data/vendor/assets/scss/_Fabric.Animations.RTL.scss

@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RTL overrides for Fabric Animations
+
+
+@import 'Fabric.Animations';
+
+// slideRightIn10
+@mixin ms-u-slideRightIn10 {
+    @include animationMix((fadeIn, slideLeft10), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn20
+@mixin ms-u-slideRightIn20 {
+    @include animationMix((fadeIn, slideLeft20), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn40
+@mixin ms-u-slideRightIn40 {
+    @include animationMix((fadeIn, slideLeft40), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn10
+@mixin ms-u-slideLeftIn10 {
+    @include animationMix((fadeIn, slideRight10), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn20
+@mixin ms-u-slideLeftIn20 {
+    @include animationMix((fadeIn, slideRight20), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn40
+@mixin ms-u-slideLeftIn40 {
+    @include animationMix((fadeIn, slideRight40), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn400
+@mixin ms-u-slideRightIn400 {
+    @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn400
+@mixin ms-u-slideLeftIn400 {
+    @include animationMix((fadeIn, slideRight400), $ms-duration3, $ms-ease1);
+}
+
+// slideRightOut40
+@mixin ms-u-slideRightOut40 {
+    @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut40
+@mixin ms-u-slideLeftOut40 {
+    @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut400
+@mixin ms-u-slideRightOut400 {
+    @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut400
+@mixin ms-u-slideLeftOut400 {
+    @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
+}
+
+// rotate90deg
+@mixin ms-u-rotate90deg {
+    @include animationMix(rotateN90, 0.1s, $ms-ease2);
+}
+
+// rotateN90deg
+@mixin ms-u-rotateN90deg {
+    @include animationMix(rotate90, 0.1s, $ms-ease2);
+}

data/vendor/assets/scss/_Fabric.Animations.scss

@@ -0,0 +1,237 @@
+// 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
+
+
+// Note that all animation classes should begin with the "ms-u" utility prefix.
+// The original class names are deprecated and will be removed in a future release.
+
+// Variables
+$ms-ease1:     cubic-bezier(0.1,0.9,0.2,1);
+$ms-ease2:     cubic-bezier(0.1,0.25,0.75,0.9);
+$ms-duration1: 0.167s;
+$ms-duration2: 0.267s;
+$ms-duration3: 0.367s;
+$ms-duration4: 0.467s;
+
+
+// Animation mixin
+@mixin animationMix($ms-name, $ms-duration, $ms-ease: $ms-ease1, $ms-fillMode: both) {
+    @include animationName($ms-name);
+    @include animationDuration($ms-duration);
+    @include animationTiming($ms-ease);
+    @include animationFillMode($ms-fillMode);
+}
+
+// slideRightIn10
+@mixin ms-u-slideRightIn10 {
+    @include animationMix((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn20
+@mixin ms-u-slideRightIn20 {
+    @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn40
+@mixin ms-u-slideRightIn40 {
+    @include animationMix((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn10
+@mixin ms-u-slideLeftIn10 {
+    @include animationMix((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn20
+@mixin ms-u-slideLeftIn20 {
+    @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn40
+@mixin ms-u-slideLeftIn40 {
+    @include animationMix((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn400
+@mixin ms-u-slideRightIn400 {
+    @include animationMix((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn400
+@mixin ms-u-slideLeftIn400 {
+    @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
+}
+
+// slideUpIn20
+@mixin ms-u-slideUpIn20 {
+    @include animationMix((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideUpIn10
+@mixin ms-u-slideUpIn10 {
+    @include animationMix((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2);
+}
+
+// slideDownIn20
+@mixin ms-u-slideDownIn20 {
+    @include animationMix((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideDownIn10
+@mixin ms-u-slideDownIn10 {
+    @include animationMix((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut40
+@mixin ms-u-slideRightOut40 {
+    @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut40
+@mixin ms-u-slideLeftOut40 {
+    @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut400
+@mixin ms-u-slideRightOut400 {
+    @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut400
+@mixin ms-u-slideLeftOut400 {
+    @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideUpOut20
+@mixin ms-u-slideUpOut20 {
+    @include animationMix((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2);
+}
+
+// slideUpOut10
+@mixin ms-u-slideUpOut10 {
+    @include animationMix((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2);
+}
+
+// slideDownOut20
+@mixin ms-u-slideDownOut20 {
+    @include animationMix((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2);
+}
+
+// slideDownOut10
+@mixin ms-u-slideDownOut10 {
+    @include animationMix((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2);
+}
+
+// scaleUpIn100
+@mixin ms-u-scaleUpIn100 {
+    @include animationMix((fadeIn, scaleUp100), $ms-duration3, $ms-ease1);
+}
+
+// scaleDownIn100
+@mixin ms-u-scaleDownIn100 {
+    @include animationMix((fadeIn, scaleDown100), $ms-duration3, $ms-ease1);
+}
+
+// scaleUpOut103
+@mixin ms-u-scaleUpOut103 {
+    @include animationMix((fadeOut, scaleUp103), $ms-duration1, $ms-ease2);
+}
+
+// scaleDownOut98
+@mixin ms-u-scaleDownOut98 {
+    @include animationMix((fadeOut, scaleDown98), $ms-duration1, $ms-ease2);
+}
+
+// fadeIn
+@mixin ms-u-fadeIn400 {
+    -webkit-animation-duration: $ms-duration3;
+    -webkit-animation-name: fadeIn;
+    -webkit-animation-fill-mode: both;
+    animation-duration: $ms-duration3;
+    animation-name: fadeIn;
+    animation-fill-mode: both;
+}
+@mixin ms-u-fadeIn100 {
+    @include ms-u-fadeIn400;
+    -webkit-animation-duration: $ms-duration1;
+    animation-duration: $ms-duration1;
+}
+@mixin ms-u-fadeIn200 {
+    @include ms-u-fadeIn400;
+    -webkit-animation-duration: $ms-duration2;
+    animation-duration: $ms-duration2;
+}
+@mixin ms-u-fadeIn500 {
+    @include ms-u-fadeIn400;
+    -webkit-animation-duration: $ms-duration4;
+    animation-duration: $ms-duration4;
+}
+
+// fadeOut
+@mixin ms-u-fadeOut400 {
+    -webkit-animation-duration: $ms-duration3;
+    -webkit-animation-name: fadeOut;
+    -webkit-animation-fill-mode: both;
+    animation-duration: $ms-duration3;
+    animation-name: fadeOut;
+    animation-fill-mode: both;
+}
+@mixin ms-u-fadeOut100 {
+    @include ms-u-fadeOut400;
+    -webkit-animation-duration: 0.1s;
+    animation-duration: 0.1s;
+}
+@mixin ms-u-fadeOut200 {
+    @include ms-u-fadeOut400;
+    -webkit-animation-duration: $ms-duration1;
+    animation-duration: $ms-duration1;
+}
+@mixin ms-u-fadeOut500 {
+    @include ms-u-fadeOut400;
+    -webkit-animation-duration: $ms-duration4;
+    animation-duration: $ms-duration4;
+}
+
+// rotate90deg
+@mixin ms-u-rotate90deg {
+    @include animationMix(rotate90, 0.1s, $ms-ease2);
+}
+
+// rotateN90deg
+@mixin ms-u-rotateN90deg {
+    @include animationMix(rotateN90, 0.1s, $ms-ease2);
+}
+
+// expandCollapse400
+@mixin ms-u-expandCollapse400 {
+    -webkit-transition: height $ms-duration3 $ms-ease2;
+    transition: height $ms-duration3 $ms-ease2;
+}
+
+// expandCollapse200
+@mixin ms-u-expandCollapse200 {
+    -webkit-transition: height $ms-duration1 $ms-ease2;
+    transition: height $ms-duration1 $ms-ease2;
+}
+
+// expandCollapse100
+@mixin ms-u-expandCollapse100 {
+    -webkit-transition: height 0.1s $ms-ease2;
+    transition: height 0.1s $ms-ease2;
+}
+
+// delay100
+@mixin ms-u-delay100 {
+    -webkit-animation-delay: $ms-duration1;
+    animation-delay: $ms-duration1;
+}
+
+// delay200
+@mixin ms-u-delay200 {
+    -webkit-animation-delay: 0.267s;
+    animation-delay: 0.267s;
+}

data/vendor/assets/scss/_Fabric.Base.scss

@@ -0,0 +1,13 @@
+// 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.
+
+
+//== Wrapper/base component
+//
+@mixin ms-Fabric {
+  @include ms-fontColor-neutralPrimary;
+}

data/vendor/assets/scss/_Fabric.Color.Mixins.scss

@@ -0,0 +1,418 @@
+// 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-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-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;
+}
+
+
+// Individual borders, by request
+@mixin ms-borderColorTop-themePrimary {
+  border-top-color: $ms-color-themePrimary;
+}