office-ui-fabric-rails 2.5.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +11 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +4 -0
  6. data/LICENSE +21 -0
  7. data/README.md +69 -0
  8. data/Rakefile +24 -0
  9. data/bin/console +14 -0
  10. data/bin/setup +8 -0
  11. data/bower.json +7 -0
  12. data/lib/office-ui-fabric-rails.rb +2 -0
  13. data/lib/office-ui-fabric-rails/engine.rb +6 -0
  14. data/lib/office-ui-fabric-rails/version.rb +6 -0
  15. data/office-ui-fabric-rails.gemspec +35 -0
  16. data/vendor/assets/css/fabric.components.css +6553 -0
  17. data/vendor/assets/css/fabric.components.min.css +6 -0
  18. data/vendor/assets/css/fabric.components.rtl.css +6355 -0
  19. data/vendor/assets/css/fabric.components.rtl.min.css +6 -0
  20. data/vendor/assets/css/fabric.css +5991 -0
  21. data/vendor/assets/css/fabric.min.css +6 -0
  22. data/vendor/assets/css/fabric.rtl.css +6280 -0
  23. data/vendor/assets/css/fabric.rtl.min.css +6 -0
  24. data/vendor/assets/js/jquery.fabric.js +2451 -0
  25. data/vendor/assets/js/jquery.fabric.min.js +2 -0
  26. data/vendor/assets/scss/Fabric.Animations.Output.scss +419 -0
  27. data/vendor/assets/scss/Fabric.Animations.RTL.Output.scss +80 -0
  28. data/vendor/assets/scss/Fabric.Color.Mixins.Output.scss +458 -0
  29. data/vendor/assets/scss/Fabric.Components.scss +31 -0
  30. data/vendor/assets/scss/Fabric.Grid.Output.scss +32 -0
  31. data/vendor/assets/scss/Fabric.Icons.Font.Output.scss +23 -0
  32. data/vendor/assets/scss/Fabric.Icons.Output.scss +771 -0
  33. data/vendor/assets/scss/Fabric.Icons.RTL.Output.scss +114 -0
  34. data/vendor/assets/scss/Fabric.RTL.scss +39 -0
  35. data/vendor/assets/scss/Fabric.Responsive.Utilities.Output.scss +1022 -0
  36. data/vendor/assets/scss/Fabric.Typography.Fonts.Output.scss +76 -0
  37. data/vendor/assets/scss/Fabric.Typography.Language.Overrides.Output.scss +56 -0
  38. data/vendor/assets/scss/Fabric.Typography.Output.scss +379 -0
  39. data/vendor/assets/scss/Fabric.Utilities.Output.scss +23 -0
  40. data/vendor/assets/scss/Fabric.scss +40 -0
  41. data/vendor/assets/scss/_Fabric.Animations.RTL.scss +79 -0
  42. data/vendor/assets/scss/_Fabric.Animations.scss +237 -0
  43. data/vendor/assets/scss/_Fabric.Color.Mixins.scss +414 -0
  44. data/vendor/assets/scss/_Fabric.Color.Variables.scss +90 -0
  45. data/vendor/assets/scss/_Fabric.Common.scss +15 -0
  46. data/vendor/assets/scss/_Fabric.Grid.scss +34 -0
  47. data/vendor/assets/scss/_Fabric.Icons.scss +397 -0
  48. data/vendor/assets/scss/_Fabric.Mixins.RTL.scss +315 -0
  49. data/vendor/assets/scss/_Fabric.Mixins.scss +274 -0
  50. data/vendor/assets/scss/_Fabric.Responsive.Utilities.Variables.scss +697 -0
  51. data/vendor/assets/scss/_Fabric.Responsive.Variables.scss +35 -0
  52. data/vendor/assets/scss/_Fabric.Typography.Fonts.scss +170 -0
  53. data/vendor/assets/scss/_Fabric.Typography.Language.Overrides.scss +118 -0
  54. data/vendor/assets/scss/_Fabric.Typography.Variables.scss +27 -0
  55. data/vendor/assets/scss/_Fabric.Typography.scss +357 -0
  56. data/vendor/assets/scss/_Fabric.Utilities.scss +36 -0
  57. data/vendor/assets/scss/_Fabric.ZIndex.Variables.scss +32 -0
  58. data/vendor/assets/scss/_Office.Color.Variables.scss +34 -0
  59. metadata +172 -0
@@ -0,0 +1,23 @@
1
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
+
3
+ //
4
+ // Office UI Fabric
5
+ // --------------------------------------------------
6
+ // Utility classes and mixins used throughout Fabric.
7
+
8
+ @import "Fabric.Utilities";
9
+
10
+ // The best box is a border box.
11
+ .ms-u-borderBox, .ms-u-borderBox:before, .ms-u-borderBox:after {
12
+ @include ms-u-borderBox;
13
+ }
14
+
15
+ // Ensures the block expands to the full height to enclose its floated childen.
16
+ .ms-u-clearfix {
17
+ @include ms-u-clearfix;
18
+ }
19
+
20
+ // Basic border-box, margin, and padding reset.
21
+ .ms-u-normalize {
22
+ @include ms-u-normalize;
23
+ }
@@ -0,0 +1,40 @@
1
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
+
3
+ //
4
+ // Office UI Fabric
5
+ // Core Module Loader
6
+
7
+
8
+ // Common utilities
9
+ @import './Fabric.Utilities.Output';
10
+ @import './Fabric.ZIndex.Variables';
11
+ @import './Fabric.Mixins';
12
+ @import "./Fabric.Mixins.RTL";
13
+
14
+ // Colors
15
+ @import './Fabric.Color.Variables';
16
+ @import './Fabric.Color.Mixins.Output';
17
+
18
+ // Typography
19
+ @import './Fabric.Typography.Variables';
20
+ @import './Fabric.Typography.Output';
21
+ @import './Fabric.Typography.Fonts.Output';
22
+ @import './Fabric.Typography.Language.Overrides.Output';
23
+
24
+ // Icons
25
+ @import './Fabric.Icons.Font.Output';
26
+ @import './Fabric.Icons.Output';
27
+
28
+ // Animations
29
+ @import './Fabric.Animations.Output';
30
+
31
+ // Responsive
32
+ @import './Fabric.Responsive.Variables';
33
+ @import './Fabric.Responsive.Utilities.Variables';
34
+ @import './Fabric.Responsive.Utilities.Output';
35
+
36
+ // Grid
37
+ @import './Fabric.Grid.Output';
38
+
39
+ // Office colors
40
+ @import './Office.Color.Variables';
@@ -0,0 +1,79 @@
1
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
+
3
+ //
4
+ // Office UI Fabric
5
+ // --------------------------------------------------
6
+ // RTL overrides for Fabric Animations
7
+
8
+
9
+ @import 'Fabric.Animations';
10
+
11
+ // slideRightIn10
12
+ @mixin ms-u-slideRightIn10 {
13
+ @include animationMix((fadeIn, slideLeft10), $ms-duration3, $ms-ease1);
14
+ }
15
+
16
+ // slideRightIn20
17
+ @mixin ms-u-slideRightIn20 {
18
+ @include animationMix((fadeIn, slideLeft20), $ms-duration3, $ms-ease1);
19
+ }
20
+
21
+ // slideRightIn40
22
+ @mixin ms-u-slideRightIn40 {
23
+ @include animationMix((fadeIn, slideLeft40), $ms-duration3, $ms-ease1);
24
+ }
25
+
26
+ // slideLeftIn10
27
+ @mixin ms-u-slideLeftIn10 {
28
+ @include animationMix((fadeIn, slideRight10), $ms-duration3, $ms-ease1);
29
+ }
30
+
31
+ // slideLeftIn20
32
+ @mixin ms-u-slideLeftIn20 {
33
+ @include animationMix((fadeIn, slideRight20), $ms-duration3, $ms-ease1);
34
+ }
35
+
36
+ // slideLeftIn40
37
+ @mixin ms-u-slideLeftIn40 {
38
+ @include animationMix((fadeIn, slideRight40), $ms-duration3, $ms-ease1);
39
+ }
40
+
41
+ // slideRightIn400
42
+ @mixin ms-u-slideRightIn400 {
43
+ @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
44
+ }
45
+
46
+ // slideLeftIn400
47
+ @mixin ms-u-slideLeftIn400 {
48
+ @include animationMix((fadeIn, slideRight400), $ms-duration3, $ms-ease1);
49
+ }
50
+
51
+ // slideRightOut40
52
+ @mixin ms-u-slideRightOut40 {
53
+ @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
54
+ }
55
+
56
+ // slideLeftOut40
57
+ @mixin ms-u-slideLeftOut40 {
58
+ @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
59
+ }
60
+
61
+ // slideRightOut400
62
+ @mixin ms-u-slideRightOut400 {
63
+ @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
64
+ }
65
+
66
+ // slideLeftOut400
67
+ @mixin ms-u-slideLeftOut400 {
68
+ @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
69
+ }
70
+
71
+ // rotate90deg
72
+ @mixin ms-u-rotate90deg {
73
+ @include animationMix(rotateN90, 0.1s, $ms-ease2);
74
+ }
75
+
76
+ // rotateN90deg
77
+ @mixin ms-u-rotateN90deg {
78
+ @include animationMix(rotate90, 0.1s, $ms-ease2);
79
+ }
@@ -0,0 +1,237 @@
1
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
+
3
+ //
4
+ // Office UI Fabric
5
+ // --------------------------------------------------
6
+ // Fabric Animations
7
+
8
+
9
+ // Note that all animation classes should begin with the "ms-u" utility prefix.
10
+ // The original class names are deprecated and will be removed in a future release.
11
+
12
+ // Variables
13
+ $ms-ease1: cubic-bezier(0.1,0.9,0.2,1);
14
+ $ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9);
15
+ $ms-duration1: 0.167s;
16
+ $ms-duration2: 0.267s;
17
+ $ms-duration3: 0.367s;
18
+ $ms-duration4: 0.467s;
19
+
20
+
21
+ // Animation mixin
22
+ @mixin animationMix($ms-name, $ms-duration, $ms-ease: $ms-ease1, $ms-fillMode: both) {
23
+ @include animationName($ms-name);
24
+ @include animationDuration($ms-duration);
25
+ @include animationTiming($ms-ease);
26
+ @include animationFillMode($ms-fillMode);
27
+ }
28
+
29
+ // slideRightIn10
30
+ @mixin ms-u-slideRightIn10 {
31
+ @include animationMix((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1);
32
+ }
33
+
34
+ // slideRightIn20
35
+ @mixin ms-u-slideRightIn20 {
36
+ @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1);
37
+ }
38
+
39
+ // slideRightIn40
40
+ @mixin ms-u-slideRightIn40 {
41
+ @include animationMix((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1);
42
+ }
43
+
44
+ // slideLeftIn10
45
+ @mixin ms-u-slideLeftIn10 {
46
+ @include animationMix((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1);
47
+ }
48
+
49
+ // slideLeftIn20
50
+ @mixin ms-u-slideLeftIn20 {
51
+ @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1);
52
+ }
53
+
54
+ // slideLeftIn40
55
+ @mixin ms-u-slideLeftIn40 {
56
+ @include animationMix((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1);
57
+ }
58
+
59
+ // slideRightIn400
60
+ @mixin ms-u-slideRightIn400 {
61
+ @include animationMix((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1);
62
+ }
63
+
64
+ // slideLeftIn400
65
+ @mixin ms-u-slideLeftIn400 {
66
+ @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
67
+ }
68
+
69
+ // slideUpIn20
70
+ @mixin ms-u-slideUpIn20 {
71
+ @include animationMix((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1);
72
+ }
73
+
74
+ // slideUpIn10
75
+ @mixin ms-u-slideUpIn10 {
76
+ @include animationMix((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2);
77
+ }
78
+
79
+ // slideDownIn20
80
+ @mixin ms-u-slideDownIn20 {
81
+ @include animationMix((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1);
82
+ }
83
+
84
+ // slideDownIn10
85
+ @mixin ms-u-slideDownIn10 {
86
+ @include animationMix((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2);
87
+ }
88
+
89
+ // slideRightOut40
90
+ @mixin ms-u-slideRightOut40 {
91
+ @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
92
+ }
93
+
94
+ // slideLeftOut40
95
+ @mixin ms-u-slideLeftOut40 {
96
+ @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
97
+ }
98
+
99
+ // slideRightOut400
100
+ @mixin ms-u-slideRightOut400 {
101
+ @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
102
+ }
103
+
104
+ // slideLeftOut400
105
+ @mixin ms-u-slideLeftOut400 {
106
+ @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
107
+ }
108
+
109
+ // slideUpOut20
110
+ @mixin ms-u-slideUpOut20 {
111
+ @include animationMix((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2);
112
+ }
113
+
114
+ // slideUpOut10
115
+ @mixin ms-u-slideUpOut10 {
116
+ @include animationMix((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2);
117
+ }
118
+
119
+ // slideDownOut20
120
+ @mixin ms-u-slideDownOut20 {
121
+ @include animationMix((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2);
122
+ }
123
+
124
+ // slideDownOut10
125
+ @mixin ms-u-slideDownOut10 {
126
+ @include animationMix((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2);
127
+ }
128
+
129
+ // scaleUpIn100
130
+ @mixin ms-u-scaleUpIn100 {
131
+ @include animationMix((fadeIn, scaleUp100), $ms-duration3, $ms-ease1);
132
+ }
133
+
134
+ // scaleDownIn100
135
+ @mixin ms-u-scaleDownIn100 {
136
+ @include animationMix((fadeIn, scaleDown100), $ms-duration3, $ms-ease1);
137
+ }
138
+
139
+ // scaleUpOut103
140
+ @mixin ms-u-scaleUpOut103 {
141
+ @include animationMix((fadeOut, scaleUp103), $ms-duration1, $ms-ease2);
142
+ }
143
+
144
+ // scaleDownOut98
145
+ @mixin ms-u-scaleDownOut98 {
146
+ @include animationMix((fadeOut, scaleDown98), $ms-duration1, $ms-ease2);
147
+ }
148
+
149
+ // fadeIn
150
+ @mixin ms-u-fadeIn400 {
151
+ -webkit-animation-duration: $ms-duration3;
152
+ -webkit-animation-name: fadeIn;
153
+ -webkit-animation-fill-mode: both;
154
+ animation-duration: $ms-duration3;
155
+ animation-name: fadeIn;
156
+ animation-fill-mode: both;
157
+ }
158
+ @mixin ms-u-fadeIn100 {
159
+ @include ms-u-fadeIn400;
160
+ -webkit-animation-duration: $ms-duration1;
161
+ animation-duration: $ms-duration1;
162
+ }
163
+ @mixin ms-u-fadeIn200 {
164
+ @include ms-u-fadeIn400;
165
+ -webkit-animation-duration: $ms-duration2;
166
+ animation-duration: $ms-duration2;
167
+ }
168
+ @mixin ms-u-fadeIn500 {
169
+ @include ms-u-fadeIn400;
170
+ -webkit-animation-duration: $ms-duration4;
171
+ animation-duration: $ms-duration4;
172
+ }
173
+
174
+ // fadeOut
175
+ @mixin ms-u-fadeOut400 {
176
+ -webkit-animation-duration: $ms-duration3;
177
+ -webkit-animation-name: fadeOut;
178
+ -webkit-animation-fill-mode: both;
179
+ animation-duration: $ms-duration3;
180
+ animation-name: fadeOut;
181
+ animation-fill-mode: both;
182
+ }
183
+ @mixin ms-u-fadeOut100 {
184
+ @include ms-u-fadeOut400;
185
+ -webkit-animation-duration: 0.1s;
186
+ animation-duration: 0.1s;
187
+ }
188
+ @mixin ms-u-fadeOut200 {
189
+ @include ms-u-fadeOut400;
190
+ -webkit-animation-duration: $ms-duration1;
191
+ animation-duration: $ms-duration1;
192
+ }
193
+ @mixin ms-u-fadeOut500 {
194
+ @include ms-u-fadeOut400;
195
+ -webkit-animation-duration: $ms-duration4;
196
+ animation-duration: $ms-duration4;
197
+ }
198
+
199
+ // rotate90deg
200
+ @mixin ms-u-rotate90deg {
201
+ @include animationMix(rotate90, 0.1s, $ms-ease2);
202
+ }
203
+
204
+ // rotateN90deg
205
+ @mixin ms-u-rotateN90deg {
206
+ @include animationMix(rotateN90, 0.1s, $ms-ease2);
207
+ }
208
+
209
+ // expandCollapse400
210
+ @mixin ms-u-expandCollapse400 {
211
+ -webkit-transition: height $ms-duration3 $ms-ease2;
212
+ transition: height $ms-duration3 $ms-ease2;
213
+ }
214
+
215
+ // expandCollapse200
216
+ @mixin ms-u-expandCollapse200 {
217
+ -webkit-transition: height $ms-duration1 $ms-ease2;
218
+ transition: height $ms-duration1 $ms-ease2;
219
+ }
220
+
221
+ // expandCollapse100
222
+ @mixin ms-u-expandCollapse100 {
223
+ -webkit-transition: height 0.1s $ms-ease2;
224
+ transition: height 0.1s $ms-ease2;
225
+ }
226
+
227
+ // delay100
228
+ @mixin ms-u-delay100 {
229
+ -webkit-animation-delay: $ms-duration1;
230
+ animation-delay: $ms-duration1;
231
+ }
232
+
233
+ // delay200
234
+ @mixin ms-u-delay200 {
235
+ -webkit-animation-delay: 0.267s;
236
+ animation-delay: 0.267s;
237
+ }
@@ -0,0 +1,414 @@
1
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
+
3
+ //
4
+ // Office UI Fabric
5
+ // --------------------------------------------------
6
+ // Fabric Core Color Mixins
7
+
8
+
9
+ //== Background colors
10
+ //
11
+ // Theme colors
12
+ @mixin ms-bgColor-themeDark {
13
+ background-color: $ms-color-themeDark;
14
+ }
15
+
16
+ @mixin ms-bgColor-themeDarkAlt {
17
+ background-color: $ms-color-themeDarkAlt;
18
+ }
19
+
20
+ @mixin ms-bgColor-themeDarker {
21
+ background-color: $ms-color-themeDarker;
22
+ }
23
+
24
+ @mixin ms-bgColor-themePrimary {
25
+ background-color: $ms-color-themePrimary;
26
+ }
27
+
28
+ @mixin ms-bgColor-themeSecondary {
29
+ background-color: $ms-color-themeSecondary;
30
+ }
31
+
32
+ @mixin ms-bgColor-themeTertiary {
33
+ background-color: $ms-color-themeTertiary;
34
+ }
35
+
36
+ @mixin ms-bgColor-themeLight {
37
+ background-color: $ms-color-themeLight;
38
+ }
39
+
40
+ @mixin ms-bgColor-themeLighter {
41
+ background-color: $ms-color-themeLighter;
42
+ }
43
+
44
+ @mixin ms-bgColor-themeLighterAlt {
45
+ background-color: $ms-color-themeLighterAlt;
46
+ }
47
+
48
+ // Neutral colors
49
+ @mixin ms-bgColor-black {
50
+ background-color: $ms-color-black;
51
+ }
52
+
53
+ @mixin ms-bgColor-neutralDark {
54
+ background-color: $ms-color-neutralDark;
55
+ }
56
+
57
+ @mixin ms-bgColor-neutralPrimary {
58
+ background-color: $ms-color-neutralPrimary;
59
+ }
60
+
61
+ @mixin ms-bgColor-neutralPrimaryAlt {
62
+ background-color: $ms-color-neutralPrimaryAlt;
63
+ }
64
+
65
+ @mixin ms-bgColor-neutralSecondary {
66
+ background-color: $ms-color-neutralSecondary;
67
+ }
68
+
69
+ @mixin ms-bgColor-neutralSecondaryAlt {
70
+ background-color: $ms-color-neutralSecondaryAlt;
71
+ }
72
+
73
+ @mixin ms-bgColor-neutralTertiary {
74
+ background-color: $ms-color-neutralTertiary;
75
+ }
76
+
77
+ @mixin ms-bgColor-neutralTertiaryAlt {
78
+ background-color: $ms-color-neutralTertiaryAlt;
79
+ }
80
+
81
+ @mixin ms-bgColor-neutralLight {
82
+ background-color: $ms-color-neutralLight;
83
+ }
84
+
85
+ @mixin ms-bgColor-neutralLighter {
86
+ background-color: $ms-color-neutralLighter;
87
+ }
88
+
89
+ @mixin ms-bgColor-neutralLighterAlt {
90
+ background-color: $ms-color-neutralLighterAlt;
91
+ }
92
+
93
+ @mixin ms-bgColor-white {
94
+ background-color: $ms-color-white;
95
+ }
96
+
97
+
98
+ // Brand and accent colors
99
+ @mixin ms-bgColor-yellow {
100
+ background-color: $ms-color-yellow;
101
+ }
102
+
103
+ @mixin ms-bgColor-yellowLight {
104
+ background-color: $ms-color-yellowLight;
105
+ }
106
+
107
+ @mixin ms-bgColor-orange {
108
+ background-color: $ms-color-orange;
109
+ }
110
+
111
+ @mixin ms-bgColor-orangeLight {
112
+ background-color: $ms-color-orangeLight;
113
+ }
114
+
115
+ @mixin ms-bgColor-orangeLighter {
116
+ background-color: $ms-color-orangeLighter;
117
+ }
118
+
119
+ @mixin ms-bgColor-redDark {
120
+ background-color: $ms-color-redDark;
121
+ }
122
+
123
+ @mixin ms-bgColor-red {
124
+ background-color: $ms-color-red;
125
+ }
126
+
127
+ @mixin ms-bgColor-magentaDark {
128
+ background-color: $ms-color-magentaDark;
129
+ }
130
+
131
+ @mixin ms-bgColor-magenta {
132
+ background-color: $ms-color-magenta;
133
+ }
134
+
135
+ @mixin ms-bgColor-magentaLight {
136
+ background-color: $ms-color-magentaLight;
137
+ }
138
+
139
+ @mixin ms-bgColor-purpleDark {
140
+ background-color: $ms-color-purpleDark;
141
+ }
142
+
143
+ @mixin ms-bgColor-purple {
144
+ background-color: $ms-color-purple;
145
+ }
146
+
147
+ @mixin ms-bgColor-purpleLight {
148
+ background-color: $ms-color-purpleLight;
149
+ }
150
+
151
+ @mixin ms-bgColor-blueDark {
152
+ background-color: $ms-color-blueDark;
153
+ }
154
+
155
+ @mixin ms-bgColor-blueMid {
156
+ background-color: $ms-color-blueMid;
157
+ }
158
+
159
+ @mixin ms-bgColor-blue {
160
+ background-color: $ms-color-blue;
161
+ }
162
+
163
+ @mixin ms-bgColor-blueLight {
164
+ background-color: $ms-color-blueLight;
165
+ }
166
+
167
+ @mixin ms-bgColor-tealDark {
168
+ background-color: $ms-color-tealDark;
169
+ }
170
+
171
+ @mixin ms-bgColor-teal {
172
+ background-color: $ms-color-teal;
173
+ }
174
+
175
+ @mixin ms-bgColor-tealLight {
176
+ background-color: $ms-color-tealLight;
177
+ }
178
+
179
+ @mixin ms-bgColor-greenDark {
180
+ background-color: $ms-color-greenDark;
181
+ }
182
+
183
+ @mixin ms-bgColor-green {
184
+ background-color: $ms-color-green;
185
+ }
186
+
187
+ @mixin ms-bgColor-greenLight {
188
+ background-color: $ms-color-greenLight;
189
+ }
190
+
191
+ // Message colors
192
+ @mixin ms-bgColor-info {
193
+ background-color: $ms-color-infoBackground;
194
+ }
195
+
196
+ @mixin ms-bgColor-success {
197
+ background-color: $ms-color-successBackground;
198
+ }
199
+
200
+ @mixin ms-bgColor-alert {
201
+ background-color: $ms-color-alertBackground;
202
+ }
203
+
204
+ @mixin ms-bgColor-error {
205
+ background-color: $ms-color-errorBackground;
206
+ }
207
+
208
+
209
+ //== Border colors
210
+ //
211
+
212
+ // Theme colors
213
+ @mixin ms-borderColor-themeDark {
214
+ border-color: $ms-color-themeDark;
215
+ }
216
+
217
+ @mixin ms-borderColor-themeDarkAlt {
218
+ border-color: $ms-color-themeDarkAlt;
219
+ }
220
+
221
+ @mixin ms-borderColor-themeDarker {
222
+ border-color: $ms-color-themeDarker;
223
+ }
224
+
225
+ @mixin ms-borderColor-themePrimary {
226
+ border-color: $ms-color-themePrimary;
227
+ }
228
+
229
+ @mixin ms-borderColor-themeSecondary {
230
+ border-color: $ms-color-themeSecondary;
231
+ }
232
+
233
+ @mixin ms-borderColor-themeTertiary {
234
+ border-color: $ms-color-themeTertiary;
235
+ }
236
+
237
+ @mixin ms-borderColor-themeLight {
238
+ border-color: $ms-color-themeLight;
239
+ }
240
+
241
+ @mixin ms-borderColor-themeLighter {
242
+ border-color: $ms-color-themeLighter;
243
+ }
244
+
245
+ @mixin ms-borderColor-themeLighterAlt {
246
+ border-color: $ms-color-themeLighterAlt;
247
+ }
248
+
249
+
250
+ // Neutral colors
251
+ @mixin ms-borderColor-black {
252
+ border-color: $ms-color-black;
253
+ }
254
+
255
+ @mixin ms-borderColor-neutralDark {
256
+ border-color: $ms-color-neutralDark;
257
+ }
258
+
259
+ @mixin ms-borderColor-neutralPrimary {
260
+ border-color: $ms-color-neutralPrimary;
261
+ }
262
+
263
+ @mixin ms-borderColor-neutralPrimaryAlt {
264
+ border-color: $ms-color-neutralPrimaryAlt;
265
+ }
266
+
267
+ @mixin ms-borderColor-neutralSecondary {
268
+ border-color: $ms-color-neutralSecondary;
269
+ }
270
+
271
+ @mixin ms-borderColor-neutralSecondaryAlt {
272
+ border-color: $ms-color-neutralSecondaryAlt;
273
+ }
274
+
275
+ @mixin ms-borderColor-neutralTertiary {
276
+ border-color: $ms-color-neutralTertiary;
277
+ }
278
+
279
+ @mixin ms-borderColor-neutralTertiaryAlt {
280
+ border-color: $ms-color-neutralTertiaryAlt;
281
+ }
282
+
283
+ @mixin ms-borderColor-neutralLight {
284
+ border-color: $ms-color-neutralLight;
285
+ }
286
+
287
+ @mixin ms-borderColor-neutralLighter {
288
+ border-color: $ms-color-neutralLighter;
289
+ }
290
+
291
+ @mixin ms-borderColor-neutralLighterAlt {
292
+ border-color: $ms-color-neutralLighterAlt;
293
+ }
294
+
295
+ @mixin ms-borderColor-white {
296
+ border-color: $ms-color-white;
297
+ }
298
+
299
+ // Brand and accent colors
300
+ @mixin ms-borderColor-yellow {
301
+ border-color: $ms-color-yellow;
302
+ }
303
+
304
+ @mixin ms-borderColor-yellowLight {
305
+ border-color: $ms-color-yellowLight;
306
+ }
307
+
308
+ @mixin ms-borderColor-orange {
309
+ border-color: $ms-color-orange;
310
+ }
311
+
312
+ @mixin ms-borderColor-orangeLight {
313
+ border-color: $ms-color-orangeLight;
314
+ }
315
+
316
+ @mixin ms-borderColor-orangeLighter {
317
+ border-color: $ms-color-orangeLighter;
318
+ }
319
+
320
+ @mixin ms-borderColor-redDark {
321
+ border-color: $ms-color-redDark;
322
+ }
323
+
324
+ @mixin ms-borderColor-red {
325
+ border-color: $ms-color-red;
326
+ }
327
+
328
+ @mixin ms-borderColor-magentaDark {
329
+ border-color: $ms-color-magentaDark;
330
+ }
331
+
332
+ @mixin ms-borderColor-magenta {
333
+ border-color: $ms-color-magenta;
334
+ }
335
+
336
+ @mixin ms-borderColor-magentaLight {
337
+ border-color: $ms-color-magentaLight;
338
+ }
339
+
340
+ @mixin ms-borderColor-purpleDark {
341
+ border-color: $ms-color-purpleDark;
342
+ }
343
+
344
+ @mixin ms-borderColor-purple {
345
+ border-color: $ms-color-purple;
346
+ }
347
+
348
+ @mixin ms-borderColor-purpleLight {
349
+ border-color: $ms-color-purpleLight;
350
+ }
351
+
352
+ @mixin ms-borderColor-blueDark {
353
+ border-color: $ms-color-blueDark;
354
+ }
355
+
356
+ @mixin ms-borderColor-blueMid {
357
+ border-color: $ms-color-blueMid;
358
+ }
359
+
360
+ @mixin ms-borderColor-blue {
361
+ border-color: $ms-color-blue;
362
+ }
363
+
364
+ @mixin ms-borderColor-blueLight {
365
+ border-color: $ms-color-blueLight;
366
+ }
367
+
368
+ @mixin ms-borderColor-tealDark {
369
+ border-color: $ms-color-tealDark;
370
+ }
371
+
372
+ @mixin ms-borderColor-teal {
373
+ border-color: $ms-color-teal;
374
+ }
375
+
376
+ @mixin ms-borderColor-tealLight {
377
+ border-color: $ms-color-tealLight;
378
+ }
379
+
380
+ @mixin ms-borderColor-greenDark {
381
+ border-color: $ms-color-greenDark;
382
+ }
383
+
384
+ @mixin ms-borderColor-green {
385
+ border-color: $ms-color-green;
386
+ }
387
+
388
+ @mixin ms-borderColor-greenLight {
389
+ border-color: $ms-color-greenLight;
390
+ }
391
+
392
+
393
+ // Message colors
394
+ @mixin ms-borderColor-info {
395
+ border-color: $ms-color-info;
396
+ }
397
+
398
+ @mixin ms-borderColor-success {
399
+ border-color: $ms-color-success;
400
+ }
401
+
402
+ @mixin ms-borderColor-alert {
403
+ border-color: $ms-color-alert;
404
+ }
405
+
406
+ @mixin ms-borderColor-error {
407
+ border-color: $ms-color-error;
408
+ }
409
+
410
+
411
+ // Individual borders, by request
412
+ @mixin ms-borderColorTop-themePrimary {
413
+ border-top-color: $ms-color-themePrimary;
414
+ }