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.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/.rspec +2 -0
- data/.travis.yml +5 -0
- data/Gemfile +4 -0
- data/LICENSE +21 -0
- data/README.md +69 -0
- data/Rakefile +24 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/bower.json +7 -0
- data/lib/office-ui-fabric-rails.rb +2 -0
- data/lib/office-ui-fabric-rails/engine.rb +6 -0
- data/lib/office-ui-fabric-rails/version.rb +6 -0
- data/office-ui-fabric-rails.gemspec +35 -0
- data/vendor/assets/css/fabric.components.css +6553 -0
- data/vendor/assets/css/fabric.components.min.css +6 -0
- data/vendor/assets/css/fabric.components.rtl.css +6355 -0
- data/vendor/assets/css/fabric.components.rtl.min.css +6 -0
- data/vendor/assets/css/fabric.css +5991 -0
- data/vendor/assets/css/fabric.min.css +6 -0
- data/vendor/assets/css/fabric.rtl.css +6280 -0
- data/vendor/assets/css/fabric.rtl.min.css +6 -0
- data/vendor/assets/js/jquery.fabric.js +2451 -0
- data/vendor/assets/js/jquery.fabric.min.js +2 -0
- data/vendor/assets/scss/Fabric.Animations.Output.scss +419 -0
- data/vendor/assets/scss/Fabric.Animations.RTL.Output.scss +80 -0
- data/vendor/assets/scss/Fabric.Color.Mixins.Output.scss +458 -0
- data/vendor/assets/scss/Fabric.Components.scss +31 -0
- data/vendor/assets/scss/Fabric.Grid.Output.scss +32 -0
- data/vendor/assets/scss/Fabric.Icons.Font.Output.scss +23 -0
- data/vendor/assets/scss/Fabric.Icons.Output.scss +771 -0
- data/vendor/assets/scss/Fabric.Icons.RTL.Output.scss +114 -0
- data/vendor/assets/scss/Fabric.RTL.scss +39 -0
- data/vendor/assets/scss/Fabric.Responsive.Utilities.Output.scss +1022 -0
- data/vendor/assets/scss/Fabric.Typography.Fonts.Output.scss +76 -0
- data/vendor/assets/scss/Fabric.Typography.Language.Overrides.Output.scss +56 -0
- data/vendor/assets/scss/Fabric.Typography.Output.scss +379 -0
- data/vendor/assets/scss/Fabric.Utilities.Output.scss +23 -0
- data/vendor/assets/scss/Fabric.scss +40 -0
- data/vendor/assets/scss/_Fabric.Animations.RTL.scss +79 -0
- data/vendor/assets/scss/_Fabric.Animations.scss +237 -0
- data/vendor/assets/scss/_Fabric.Color.Mixins.scss +414 -0
- data/vendor/assets/scss/_Fabric.Color.Variables.scss +90 -0
- data/vendor/assets/scss/_Fabric.Common.scss +15 -0
- data/vendor/assets/scss/_Fabric.Grid.scss +34 -0
- data/vendor/assets/scss/_Fabric.Icons.scss +397 -0
- data/vendor/assets/scss/_Fabric.Mixins.RTL.scss +315 -0
- data/vendor/assets/scss/_Fabric.Mixins.scss +274 -0
- data/vendor/assets/scss/_Fabric.Responsive.Utilities.Variables.scss +697 -0
- data/vendor/assets/scss/_Fabric.Responsive.Variables.scss +35 -0
- data/vendor/assets/scss/_Fabric.Typography.Fonts.scss +170 -0
- data/vendor/assets/scss/_Fabric.Typography.Language.Overrides.scss +118 -0
- data/vendor/assets/scss/_Fabric.Typography.Variables.scss +27 -0
- data/vendor/assets/scss/_Fabric.Typography.scss +357 -0
- data/vendor/assets/scss/_Fabric.Utilities.scss +36 -0
- data/vendor/assets/scss/_Fabric.ZIndex.Variables.scss +32 -0
- data/vendor/assets/scss/_Office.Color.Variables.scss +34 -0
- 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
|
+
}
|