office-ui-fabric-rails 2.5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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,35 @@
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 responsive variables
7
+
8
+
9
+ //== Variables for responsive breakpoints
10
+ //
11
+
12
+ // Small screen / phone (320px - 479px)
13
+ $ms-screen-sm-min: 320px;
14
+
15
+ // Medium screen / tablet (480px - 639px)
16
+ $ms-screen-md-min: 480px;
17
+
18
+ // Large screen / tablet (640px - 1023px)
19
+ $ms-screen-lg-min: 640px;
20
+
21
+ // Extra large screen / tablet (1024px - 1365px)
22
+ $ms-screen-xl-min: 1024px;
23
+
24
+ // Extra extra large screen / desktop (1366px - 1919px)
25
+ $ms-screen-xxl-min: 1366px;
26
+
27
+ // Extra extra extra large screen / desktop (1366px and up)
28
+ $ms-screen-xxxl-min: 1920px;
29
+
30
+ // Set all maxes since order matters in SASS
31
+ $ms-screen-sm-max: ($ms-screen-md-min - 1);
32
+ $ms-screen-md-max: ($ms-screen-lg-min - 1);
33
+ $ms-screen-lg-max: ($ms-screen-xl-min - 1);
34
+ $ms-screen-xl-max: ($ms-screen-xxl-min - 1);
35
+ $ms-screen-xxl-max: ($ms-screen-xxxl-min - 1);
@@ -0,0 +1,170 @@
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
+ // Font definitions
7
+
8
+
9
+ // Font weights.
10
+ $ms-light: "Segoe UI Light";
11
+ $ms-regular: "Segoe UI Regular";
12
+ $ms-semibold: "Segoe UI Semibold";
13
+ $ms-semilight: "Segoe UI Semilight";
14
+
15
+
16
+ // Font paths.
17
+ $ms-font-directory: "https://appsforoffice.microsoft.com/fabric/fonts";
18
+ $ms-font-path-arabic: "SegoeUI-Arabic";
19
+ $ms-font-path-cyrillic: "SegoeUI-Cyrillic";
20
+ $ms-font-path-easteuropean: "SegoeUI-EastEuropean";
21
+ $ms-font-path-greek: "SegoeUI-Greek";
22
+ $ms-font-path-hebrew: "SegoeUI-Hebrew";
23
+ $ms-font-path-vietnamese: "SegoeUI-Vietnamese";
24
+ $ms-font-path-westeuropean: "SegoeUI-WestEuropean";
25
+
26
+
27
+ /*
28
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
29
+ */
30
+
31
+ // Mixins to generate @font-face rules for unique languages.
32
+ @mixin SegoeUILight($ms-font-language, $ms-font-path) {
33
+ @font-face {
34
+ font-family: "#{$ms-light} #{$ms-font-language}";
35
+ src: local("Segoe UI Light"),
36
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff2') format('woff2'),
37
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff') format('woff'),
38
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.ttf') format('truetype');
39
+ font-weight: normal;
40
+ font-style: normal;
41
+ }
42
+ }
43
+
44
+ @mixin SegoeUIRegular($ms-font-language, $ms-font-path) {
45
+ @font-face {
46
+ font-family: "#{$ms-regular} #{$ms-font-language}";
47
+ src: local("Segoe UI"),
48
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff2') format('woff2'),
49
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff') format('woff'),
50
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.ttf') format('truetype');
51
+ font-weight: normal;
52
+ font-style: normal;
53
+ }
54
+ }
55
+
56
+ @mixin SegoeUISemilight($ms-font-language, $ms-font-path) {
57
+ @font-face {
58
+ font-family: "#{$ms-semilight} #{$ms-font-language}";
59
+ src: local("Segoe UI Semilight"),
60
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff2') format('woff2'),
61
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff') format('woff'),
62
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.ttf') format('truetype');
63
+ font-weight: normal;
64
+ font-style: normal;
65
+ }
66
+ }
67
+
68
+ @mixin SegoeUISemibold($ms-font-language, $ms-font-path) {
69
+ @font-face {
70
+ font-family: "#{$ms-semibold} #{$ms-font-language}";
71
+ src: local("Segoe UI Semibold"),
72
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff2') format('woff2'),
73
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff') format('woff'),
74
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.ttf') format('truetype');
75
+ font-weight: normal;
76
+ font-style: normal;
77
+ }
78
+ }
79
+
80
+ // Mixins to generate language-specific font faces.
81
+ @mixin SegoeUIArabicLight {
82
+ @include SegoeUILight("Arabic", $ms-font-path-arabic);
83
+ }
84
+ @mixin SegoeUIArabicRegular {
85
+ @include SegoeUIRegular("Arabic", $ms-font-path-arabic);
86
+ }
87
+ @mixin SegoeUIArabicSemibold {
88
+ @include SegoeUISemibold("Arabic", $ms-font-path-arabic);
89
+ }
90
+ @mixin SegoeUIArabicSemilight {
91
+ @include SegoeUISemilight("Arabic", $ms-font-path-arabic);
92
+ }
93
+
94
+ @mixin SegoeUICyrillicLight {
95
+ @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic);
96
+ }
97
+ @mixin SegoeUICyrillicRegular {
98
+ @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic);
99
+ }
100
+ @mixin SegoeUICyrillicSemibold {
101
+ @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic);
102
+ }
103
+ @mixin SegoeUICyrillicSemilight {
104
+ @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic);
105
+ }
106
+
107
+ @mixin SegoeUIEastEuropeanLight {
108
+ @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean);
109
+ }
110
+ @mixin SegoeUIEastEuropeanRegular {
111
+ @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean);
112
+ }
113
+ @mixin SegoeUIEastEuropeanSemibold {
114
+ @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean);
115
+ }
116
+ @mixin SegoeUIEastEuropeanSemilight {
117
+ @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean);
118
+ }
119
+
120
+ @mixin SegoeUIGreekLight {
121
+ @include SegoeUILight("Greek", $ms-font-path-greek);
122
+ }
123
+ @mixin SegoeUIGreekRegular {
124
+ @include SegoeUIRegular("Greek", $ms-font-path-greek);
125
+ }
126
+ @mixin SegoeUIGreekSemibold {
127
+ @include SegoeUISemibold("Greek", $ms-font-path-greek);
128
+ }
129
+ @mixin SegoeUIGreekSemilight {
130
+ @include SegoeUISemilight("Greek", $ms-font-path-greek);
131
+ }
132
+
133
+ @mixin SegoeUIHebrewLight {
134
+ @include SegoeUILight("Hebrew", $ms-font-path-hebrew);
135
+ }
136
+ @mixin SegoeUIHebrewRegular {
137
+ @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew);
138
+ }
139
+ @mixin SegoeUIHebrewSemibold {
140
+ @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew);
141
+ }
142
+ @mixin SegoeUIHebrewSemilight {
143
+ @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew);
144
+ }
145
+
146
+ @mixin SegoeUIVietnameseLight {
147
+ @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese);
148
+ }
149
+ @mixin SegoeUIVietnameseRegular {
150
+ @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese);
151
+ }
152
+ @mixin SegoeUIVietnameseSemibold {
153
+ @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese);
154
+ }
155
+ @mixin SegoeUIVietnameseSemilight {
156
+ @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese);
157
+ }
158
+
159
+ @mixin SegoeUIWestEuropeanLight {
160
+ @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean);
161
+ }
162
+ @mixin SegoeUIWestEuropeanRegular {
163
+ @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean);
164
+ }
165
+ @mixin SegoeUIWestEuropeanSemibold {
166
+ @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean);
167
+ }
168
+ @mixin SegoeUIWestEuropeanSemilight {
169
+ @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean);
170
+ }
@@ -0,0 +1,118 @@
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
+ // Language override definitions
7
+
8
+
9
+ // A mixin that overrides all of the font classes for languages that
10
+ // use system fonts. A single font-family is used for all weights.
11
+ @mixin language-override-system-fonts($ms-lang-code, $ms-font-family) {
12
+ *[lang="#{$ms-lang-code}"] {
13
+ .ms-font-mi,
14
+ .ms-font-xs,
15
+ .ms-font-s,
16
+ .ms-font-s-plus,
17
+ .ms-font-m,
18
+ .ms-font-m-plus,
19
+ .ms-font-l,
20
+ .ms-font-xl,
21
+ .ms-font-xxl,
22
+ .ms-font-su,
23
+ .ms-fontWeight-light,
24
+ .ms-fontWeight-light-hover:hover,
25
+ .ms-fontWeight-semilight,
26
+ .ms-fontWeight-semilight-hover:hover,
27
+ .ms-fontWeight-regular,
28
+ .ms-fontWeight-regular-hover:hover,
29
+ .ms-fontWeight-semibold,
30
+ .ms-fontWeight-semibold-hover:hover {
31
+ font-family: $ms-font-family;
32
+ }
33
+ }
34
+ }
35
+
36
+ // Base font stack.
37
+ $ms-font-system-base: 'Segoe UI', Tahoma, Arial, sans-serif;
38
+
39
+ // Variables for each of the non-distributed (native) font stacks.
40
+ $ms-font-stack-japanese: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-system-base;
41
+ $ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base;
42
+ $ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base;
43
+ $ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base;
44
+ $ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base;
45
+
46
+
47
+ //== Web fonts
48
+ //
49
+ // A mixin that overrides all of the font classes for languages that use
50
+ // distributed web fonts. These reference different fonts for each weight.
51
+ @mixin language-override-web-fonts($ms-lang-code, $ms-font-family-light, $ms-font-family-semilight, $ms-font-family-regular, $ms-font-family-semibold) {
52
+ *[lang="#{$ms-lang-code}"] {
53
+ .ms-font-xl,
54
+ .ms-font-xxl,
55
+ .ms-fontWeight-light,
56
+ .ms-fontWeight-light-hover:hover {
57
+ font-family: $ms-font-family-light;
58
+ }
59
+ .ms-font-l,
60
+ .ms-font-su,
61
+ .ms-fontWeight-semilight,
62
+ .ms-fontWeight-semilight-hover:hover {
63
+ font-family: $ms-font-family-semilight;
64
+ }
65
+ .ms-fontWeight-regular,
66
+ .ms-fontweight-regular-hover:hover {
67
+ font-family: $ms-font-family-regular;
68
+ }
69
+ .ms-font-mi,
70
+ .ms-fontWeight-semibold,
71
+ .ms-fontWeight-semibold-hover:hover {
72
+ font-family: $ms-font-family-semibold;
73
+ }
74
+ }
75
+ }
76
+
77
+ // Variables for each of the web font stacks.
78
+
79
+ // East European
80
+ $ms-font-family-light-eastEuropean: 'Segoe UI Light EastEuropean', $ms-font-family-light;
81
+ $ms-font-family-semilight-eastEuropean: 'Segoe UI Semilight EastEuropean', $ms-font-family-semilight;
82
+ $ms-font-family-regular-eastEuropean: 'Segoe UI Regular EastEuropean', $ms-font-family-regular;
83
+ $ms-font-family-semibold-eastEuropean: 'Segoe UI Semibold EastEuropean', $ms-font-family-semibold;
84
+
85
+ // Cyrillic
86
+ $ms-font-family-light-cyrillic: 'Segoe UI Light Cyrillic', $ms-font-family-light;
87
+ $ms-font-family-semilight-cyrillic: 'Segoe UI Semilight Cyrillic', $ms-font-family-semilight;
88
+ $ms-font-family-regular-cyrillic: 'Segoe UI Regular Cyrillic', $ms-font-family-regular;
89
+ $ms-font-family-semibold-cyrillic: 'Segoe UI Semibold Cyrillic', $ms-font-family-semibold;
90
+
91
+ // Leelawadee
92
+ $ms-font-family-semilight-leelawadee: 'Leelawadee UI Semilight', 'Kmer UI', $ms-font-family-semilight;
93
+ $ms-font-family-regular-leelawadee: 'Leelawadee UI Regular', 'Kmer UI', $ms-font-family-regular;
94
+ $ms-font-family-semibold-leelawadee: 'Leelawadee UI Bold', 'Kmer UI', $ms-font-family-semibold;
95
+
96
+ // Arabic
97
+ $ms-font-family-light-arabic: 'Segoe UI Light Arabic', $ms-font-family-light;
98
+ $ms-font-family-semilight-arabic: 'Segoe UI Semilight Arabic', $ms-font-family-semilight;
99
+ $ms-font-family-regular-arabic: 'Segoe UI Regular Arabic', $ms-font-family-regular;
100
+ $ms-font-family-semibold-arabic: 'Segoe UI Semibold Arabic', $ms-font-family-semibold;
101
+
102
+ // Greek
103
+ $ms-font-family-light-greek: 'Segoe UI Light Greek', $ms-font-family-light;
104
+ $ms-font-family-semilight-greek: 'Segoe UI Semilight Greek', $ms-font-family-semilight;
105
+ $ms-font-family-regular-greek: 'Segoe UI Regular Greek', $ms-font-family-regular;
106
+ $ms-font-family-semibold-greek: 'Segoe UI Semibold Greek', $ms-font-family-semibold;
107
+
108
+ // Hebrew
109
+ $ms-font-family-light-hebrew: 'Segoe UI Light Hebrew', $ms-font-family-light;
110
+ $ms-font-family-semilight-hebrew: 'Segoe UI Semilight Hebrew', $ms-font-family-semilight;
111
+ $ms-font-family-regular-hebrew: 'Segoe UI Regular Hebrew', $ms-font-family-regular;
112
+ $ms-font-family-semibold-hebrew: 'Segoe UI Semibold Hebrew', $ms-font-family-semibold;
113
+
114
+ // Vietnamese
115
+ $ms-font-family-light-vietnamese: 'Segoe UI Light Vietnamese', $ms-font-family-light;
116
+ $ms-font-family-semilight-vietnamese: 'Segoe UI Semilight Vietnamese', $ms-font-family-semilight;
117
+ $ms-font-family-regular-vietnamese: 'Segoe UI Regular Vietnamese', $ms-font-family-regular;
118
+ $ms-font-family-semibold-vietnamese: 'Segoe UI Semibold Vietnamese', $ms-font-family-semibold;
@@ -0,0 +1,27 @@
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 Typography variables
7
+
8
+
9
+ $ms-font-family-light: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
10
+ $ms-font-family-regular: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
11
+ $ms-font-family-semilight: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
12
+ $ms-font-family-semibold: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif;
13
+
14
+
15
+ //== Type sizes
16
+ //
17
+
18
+ $ms-font-size-su: 42px;
19
+ $ms-font-size-xxl: 28px;
20
+ $ms-font-size-xl: 21px;
21
+ $ms-font-size-l: 17px;
22
+ $ms-font-size-m-plus: 15px;
23
+ $ms-font-size-m: 14px;
24
+ $ms-font-size-s-plus: 13px;
25
+ $ms-font-size-s: 12px;
26
+ $ms-font-size-xs: 11px;
27
+ $ms-font-size-mi: 10px;
@@ -0,0 +1,357 @@
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
+ // Typographic mixins arranged with appropriate size and family combinations.
7
+ @import 'Fabric.Typography.Variables';
8
+
9
+ // Super Styles (LIMITED USE)
10
+ // Weights: Light
11
+ @mixin ms-font-su {
12
+ color: $ms-color-neutralPrimary;
13
+ font-family: $ms-font-family-light;
14
+ font-size: $ms-font-size-su;
15
+ font-weight: normal;
16
+ }
17
+ // No touch class for Super
18
+
19
+ // Extra-Extra-Large
20
+ // Allowed weights: Light, SemiLight
21
+ @mixin ms-font-xxl {
22
+ color: $ms-color-neutralPrimary;
23
+ font-family: $ms-font-family-light;
24
+ font-size: $ms-font-size-xxl;
25
+ font-weight: normal;
26
+ }
27
+
28
+ // Extra-Large Styles
29
+ // Allowed weights: Light, SemiLight
30
+ @mixin ms-font-xl {
31
+ color: $ms-color-neutralPrimary;
32
+ font-family: $ms-font-family-light;
33
+ font-size: $ms-font-size-xl;
34
+ font-weight: normal;
35
+ }
36
+
37
+ // Large Styles
38
+ // Allowed weights: SemiLight, Regular, Semibold
39
+ @mixin ms-font-l {
40
+ color: $ms-color-neutralPrimary;
41
+ font-family: $ms-font-family-semilight;
42
+ font-size: $ms-font-size-l;
43
+ font-weight: normal;
44
+ }
45
+
46
+ // Medium Plus Styles
47
+ // Allowed weights: SemiLight, Regular, Semibold
48
+ @mixin ms-font-m-plus {
49
+ color: $ms-color-neutralPrimary;
50
+ font-family: $ms-font-family-regular;
51
+ font-size: $ms-font-size-m-plus;
52
+ font-weight: normal;
53
+ }
54
+
55
+ // Medium Styles
56
+ // Allowed weights: SemiLight, Regular, Semibold
57
+ @mixin ms-font-m {
58
+ color: $ms-color-neutralPrimary;
59
+ font-family: $ms-font-family-regular;
60
+ font-size: $ms-font-size-m;
61
+ font-weight: normal;
62
+ }
63
+
64
+ // Small Plus Styles
65
+ // Allowed weights: SemiLight, Regular, Semibold
66
+ @mixin ms-font-s-plus {
67
+ color: $ms-color-neutralPrimary;
68
+ font-family: $ms-font-family-regular;
69
+ font-size: $ms-font-size-s-plus;
70
+ font-weight: normal;
71
+ }
72
+
73
+ // Small Styles
74
+ // Allowed weights: SemiLight, Regular, Semibold
75
+ @mixin ms-font-s {
76
+ color: $ms-color-neutralPrimary;
77
+ font-family: $ms-font-family-regular;
78
+ font-size: $ms-font-size-s;
79
+ font-weight: normal;
80
+ }
81
+
82
+ // XS Styles
83
+ // Allowed weights: SemiLight, Regular, Semibold
84
+ @mixin ms-font-xs {
85
+ color: $ms-color-neutralPrimary;
86
+ font-family: $ms-font-family-regular;
87
+ font-size: $ms-font-size-xs;
88
+ font-weight: normal;
89
+ }
90
+
91
+ // Micro Styles (LIMITED USE)
92
+ // Weights: Semibold
93
+ @mixin ms-font-mi {
94
+ color: $ms-color-neutralPrimary;
95
+ font-family: $ms-font-family-semibold;
96
+ font-size: $ms-font-size-mi;
97
+ font-weight: normal;
98
+ }
99
+
100
+ //== Helper classes & mixins
101
+ //
102
+ // Helper mixins to override default type values
103
+
104
+ // Font weights
105
+ @mixin ms-fontWeight-light{
106
+ font-family: $ms-font-family-light;
107
+ }
108
+
109
+ @mixin ms-fontWeight-semilight{
110
+ font-family: $ms-font-family-semilight;
111
+ }
112
+
113
+ @mixin ms-fontWeight-regular {
114
+ font-family: $ms-font-family-regular;
115
+ }
116
+
117
+ @mixin ms-fontWeight-semibold {
118
+ font-family: $ms-font-family-semibold;
119
+ }
120
+
121
+ // Font sizes
122
+ @mixin ms-fontSize-su {
123
+ font-size: $ms-font-size-su;
124
+ }
125
+
126
+ @mixin ms-fontSize-xxl {
127
+ font-size: $ms-font-size-xxl;
128
+ }
129
+
130
+ @mixin ms-fontSize-xl {
131
+ font-size: $ms-font-size-xl;
132
+ }
133
+
134
+ @mixin ms-fontSize-l {
135
+ font-size: $ms-font-size-l;
136
+ }
137
+
138
+ @mixin ms-fontSize-mPlus {
139
+ font-size: $ms-font-size-m-plus;
140
+ }
141
+
142
+ @mixin ms-fontSize-m {
143
+ font-size: $ms-font-size-m;
144
+ }
145
+
146
+ @mixin ms-fontSize-sPlus {
147
+ font-size: $ms-font-size-s-plus;
148
+ }
149
+
150
+ @mixin ms-fontSize-s {
151
+ font-size: $ms-font-size-s;
152
+ }
153
+
154
+ @mixin ms-fontSize-xs {
155
+ font-size: $ms-font-size-xs;
156
+ }
157
+
158
+ @mixin ms-fontSize-mi {
159
+ font-size: $ms-font-size-mi;
160
+ }
161
+
162
+ // Theme colors
163
+ @mixin ms-fontColor-themeDarker {
164
+ color: $ms-color-themeDarker;
165
+ }
166
+
167
+ @mixin ms-fontColor-themeDark {
168
+ color: $ms-color-themeDark;
169
+ }
170
+
171
+ @mixin ms-fontColor-themeDarkAlt {
172
+ color: $ms-color-themeDarkAlt;
173
+ }
174
+
175
+ @mixin ms-fontColor-themePrimary {
176
+ color: $ms-color-themePrimary;
177
+ }
178
+
179
+ @mixin ms-fontColor-themeSecondary {
180
+ color: $ms-color-themeSecondary;
181
+ }
182
+
183
+ @mixin ms-fontColor-themeTertiary {
184
+ color: $ms-color-themeTertiary;
185
+ }
186
+
187
+ @mixin ms-fontColor-themeLight {
188
+ color: $ms-color-themeLight;
189
+ }
190
+
191
+ @mixin ms-fontColor-themeLighter {
192
+ color: $ms-color-themeLighter;
193
+ }
194
+
195
+ @mixin ms-fontColor-themeLighterAlt {
196
+ color: $ms-color-themeLighterAlt;
197
+ }
198
+
199
+
200
+ // Neutral colors
201
+ @mixin ms-fontColor-black {
202
+ color: $ms-color-black;
203
+ }
204
+
205
+ @mixin ms-fontColor-neutralDark {
206
+ color: $ms-color-neutralDark;
207
+ }
208
+
209
+ @mixin ms-fontColor-neutralPrimary {
210
+ color: $ms-color-neutralPrimary;
211
+ }
212
+
213
+ @mixin ms-fontColor-neutralPrimaryAlt {
214
+ color: $ms-color-neutralPrimaryAlt;
215
+ }
216
+
217
+ @mixin ms-fontColor-neutralSecondary {
218
+ color: $ms-color-neutralSecondary;
219
+ }
220
+
221
+ @mixin ms-fontColor-neutralSecondaryAlt {
222
+ color: $ms-color-neutralSecondaryAlt;
223
+ }
224
+
225
+ @mixin ms-fontColor-neutralTertiary {
226
+ color: $ms-color-neutralTertiary;
227
+ }
228
+
229
+ @mixin ms-fontColor-neutralTertiaryAlt {
230
+ color: $ms-color-neutralTertiaryAlt;
231
+ }
232
+
233
+ @mixin ms-fontColor-neutralLight {
234
+ color: $ms-color-neutralLight;
235
+ }
236
+
237
+ @mixin ms-fontColor-neutralLighter {
238
+ color: $ms-color-neutralLighter;
239
+ }
240
+
241
+ @mixin ms-fontColor-neutralLighterAlt {
242
+ color: $ms-color-neutralLighterAlt;
243
+ }
244
+
245
+ @mixin ms-fontColor-white {
246
+ color: $ms-color-white;
247
+ }
248
+
249
+ // Brand and accent colors
250
+ @mixin ms-fontColor-yellow {
251
+ color: $ms-color-yellow;
252
+ }
253
+
254
+ @mixin ms-fontColor-yellowLight {
255
+ color: $ms-color-yellowLight;
256
+ }
257
+
258
+ @mixin ms-fontColor-orange {
259
+ color: $ms-color-orange;
260
+ }
261
+
262
+ @mixin ms-fontColor-orangeLight {
263
+ color: $ms-color-orangeLight;
264
+ }
265
+
266
+ @mixin ms-fontColor-orangeLighter {
267
+ color: $ms-color-orangeLighter;
268
+ }
269
+
270
+ @mixin ms-fontColor-redDark {
271
+ color: $ms-color-redDark;
272
+ }
273
+
274
+ @mixin ms-fontColor-red {
275
+ color: $ms-color-red;
276
+ }
277
+
278
+ @mixin ms-fontColor-magentaDark {
279
+ color: $ms-color-magentaDark;
280
+ }
281
+
282
+ @mixin ms-fontColor-magenta {
283
+ color: $ms-color-magenta;
284
+ }
285
+
286
+ @mixin ms-fontColor-magentaLight {
287
+ color: $ms-color-magentaLight;
288
+ }
289
+
290
+ @mixin ms-fontColor-purpleDark {
291
+ color: $ms-color-purpleDark;
292
+ }
293
+
294
+ @mixin ms-fontColor-purple {
295
+ color: $ms-color-purple;
296
+ }
297
+
298
+ @mixin ms-fontColor-purpleLight {
299
+ color: $ms-color-purpleLight;
300
+ }
301
+
302
+ @mixin ms-fontColor-blueDark {
303
+ color: $ms-color-blueDark;
304
+ }
305
+
306
+ @mixin ms-fontColor-blueMid {
307
+ color: $ms-color-blueMid;
308
+ }
309
+
310
+ @mixin ms-fontColor-blue {
311
+ color: $ms-color-blue;
312
+ }
313
+
314
+ @mixin ms-fontColor-blueLight {
315
+ color: $ms-color-blueLight;
316
+ }
317
+
318
+ @mixin ms-fontColor-tealDark {
319
+ color: $ms-color-tealDark;
320
+ }
321
+
322
+ @mixin ms-fontColor-teal {
323
+ color: $ms-color-teal;
324
+ }
325
+
326
+ @mixin ms-fontColor-tealLight {
327
+ color: $ms-color-tealLight;
328
+ }
329
+
330
+ @mixin ms-fontColor-greenDark {
331
+ color: $ms-color-greenDark;
332
+ }
333
+
334
+ @mixin ms-fontColor-green {
335
+ color: $ms-color-green;
336
+ }
337
+
338
+ @mixin ms-fontColor-greenLight {
339
+ color: $ms-color-greenLight;
340
+ }
341
+
342
+ // Message colors
343
+ @mixin ms-fontColor-info {
344
+ color: $ms-color-info;
345
+ }
346
+
347
+ @mixin ms-fontColor-success {
348
+ color: $ms-color-success;
349
+ }
350
+
351
+ @mixin ms-fontColor-alert {
352
+ color: $ms-color-alert;
353
+ }
354
+
355
+ @mixin ms-fontColor-error {
356
+ color: $ms-color-error;
357
+ }