vanilla-framework 3.13.0 → 4.0.0-alpha.1
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.
- package/package.json +10 -12
- package/scss/_base_hr.scss +23 -19
- package/scss/_base_media.scss +0 -1
- package/scss/_base_placeholders.scss +2 -7
- package/scss/_base_tables.scss +1 -1
- package/scss/_base_typography-definitions.scss +24 -48
- package/scss/_patterns_grid.scss +97 -0
- package/scss/_patterns_heading-icon.scss +6 -18
- package/scss/_patterns_lists.scss +28 -60
- package/scss/_patterns_logo-section.scss +1 -4
- package/scss/_patterns_matrix.scss +4 -3
- package/scss/_patterns_navigation.scss +4 -3
- package/scss/_patterns_rule.scss +12 -0
- package/scss/_patterns_section.scss +15 -0
- package/scss/_settings_grid.scss +1 -1
- package/scss/_settings_spacing.scss +46 -43
- package/scss/_vanilla.scss +4 -0
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-framework",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-alpha.1",
|
|
4
4
|
"author": {
|
|
5
5
|
"email": "webteam@canonical.com",
|
|
6
6
|
"name": "Canonical Webteam"
|
|
7
7
|
},
|
|
8
8
|
"bugs": {
|
|
9
9
|
"email": "webteam@canonical.com",
|
|
10
|
-
"url": "
|
|
10
|
+
"url": "https://github.com/canonical/vanilla-framework/issues"
|
|
11
11
|
},
|
|
12
12
|
"description": "A simple, extendable CSS framework.",
|
|
13
13
|
"homepage": "https://vanillaframework.io/",
|
|
@@ -54,29 +54,27 @@
|
|
|
54
54
|
"!/scss/docs",
|
|
55
55
|
"!/scss/standalone"
|
|
56
56
|
],
|
|
57
|
-
"
|
|
57
|
+
"devDependencies": {
|
|
58
58
|
"@canonical/cookie-policy": "3.4.0",
|
|
59
59
|
"@canonical/latest-news": "1.4.1",
|
|
60
|
-
"autoprefixer": "10.4.13",
|
|
61
|
-
"postcss": "8.4.21",
|
|
62
|
-
"postcss-cli": "9.1.0",
|
|
63
|
-
"postcss-scss": "4.0.6",
|
|
64
|
-
"sass": "1.58.3",
|
|
65
|
-
"yaml": "1.10.2"
|
|
66
|
-
},
|
|
67
|
-
"devDependencies": {
|
|
68
60
|
"@percy/script": "1.1.0",
|
|
69
61
|
"@testing-library/cypress": "9.0.0",
|
|
62
|
+
"autoprefixer": "10.4.13",
|
|
70
63
|
"cypress": "12.7.0",
|
|
71
64
|
"get-site-urls": "3.0.0",
|
|
72
65
|
"markdown-spellcheck": "1.3.1",
|
|
73
66
|
"parker": "0.0.10",
|
|
67
|
+
"postcss": "8.4.21",
|
|
68
|
+
"postcss-cli": "9.1.0",
|
|
69
|
+
"postcss-scss": "4.0.6",
|
|
74
70
|
"prettier": "2.8.4",
|
|
71
|
+
"sass": "1.58.3",
|
|
75
72
|
"stylelint": "14.16.1",
|
|
76
73
|
"stylelint-config-prettier": "9.0.5",
|
|
77
74
|
"stylelint-config-recommended-scss": "5.0.2",
|
|
78
75
|
"stylelint-order": "5.0.0",
|
|
79
76
|
"stylelint-prettier": "2.0.0",
|
|
80
|
-
"svgo": "2.8.0"
|
|
77
|
+
"svgo": "2.8.0",
|
|
78
|
+
"yaml": "2.2.2"
|
|
81
79
|
}
|
|
82
80
|
}
|
package/scss/_base_hr.scss
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
@import 'settings';
|
|
2
2
|
|
|
3
|
+
%fixed-width-hr {
|
|
4
|
+
@mixin adjusted-width($size) {
|
|
5
|
+
$gutters-sizes: 2 * map-get($grid-margin-widths, $size);
|
|
6
|
+
|
|
7
|
+
max-width: calc($grid-max-width - $gutters-sizes);
|
|
8
|
+
width: calc(100% - $gutters-sizes);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
margin-left: auto;
|
|
12
|
+
margin-right: auto;
|
|
13
|
+
@include adjusted-width(small);
|
|
14
|
+
|
|
15
|
+
@media (min-width: $threshold-4-6-col) {
|
|
16
|
+
@include adjusted-width(default);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.row &,
|
|
20
|
+
.u-fixed-width & {
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
3
25
|
// Horizontal rule
|
|
4
26
|
@mixin vf-b-hr {
|
|
5
27
|
// stylelint-disable selector-max-type -- base styles can use type selectors
|
|
@@ -18,25 +40,7 @@
|
|
|
18
40
|
}
|
|
19
41
|
|
|
20
42
|
&.is-fixed-width {
|
|
21
|
-
|
|
22
|
-
margin-right: auto;
|
|
23
|
-
max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, small));
|
|
24
|
-
width: calc(100% - 2 * map-get($grid-margin-widths, small));
|
|
25
|
-
|
|
26
|
-
@media (min-width: $threshold-4-6-col) {
|
|
27
|
-
max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
|
|
28
|
-
width: calc(100% - 2 * map-get($grid-margin-widths, default));
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@media (min-width: $threshold-6-12-col) {
|
|
32
|
-
max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
|
|
33
|
-
width: calc(100% - 2 * map-get($grid-margin-widths, default));
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.row &,
|
|
37
|
-
.u-fixed-width & {
|
|
38
|
-
width: 100%;
|
|
39
|
-
}
|
|
43
|
+
@extend %fixed-width-hr;
|
|
40
44
|
}
|
|
41
45
|
}
|
|
42
46
|
|
package/scss/_base_media.scss
CHANGED
|
@@ -100,13 +100,8 @@
|
|
|
100
100
|
|
|
101
101
|
// Spacing
|
|
102
102
|
%section-padding--shallow {
|
|
103
|
-
padding-bottom: $spv--x-large
|
|
104
|
-
padding-top: $spv--x-large
|
|
105
|
-
|
|
106
|
-
@media (min-width: $breakpoint-large) {
|
|
107
|
-
padding-bottom: $spv--x-large;
|
|
108
|
-
padding-top: $spv--x-large;
|
|
109
|
-
}
|
|
103
|
+
padding-bottom: $spv--x-large;
|
|
104
|
+
padding-top: $spv--x-large;
|
|
110
105
|
}
|
|
111
106
|
|
|
112
107
|
%section-padding--default {
|
package/scss/_base_tables.scss
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
@extend %table-header-label;
|
|
42
42
|
|
|
43
43
|
padding-bottom: $spv--large - map-get($nudges, x-small);
|
|
44
|
-
padding-top: map-get($nudges, x-small) +
|
|
44
|
+
padding-top: map-get($nudges, x-small) + $sp-unit;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
tr {
|
|
@@ -1,49 +1,20 @@
|
|
|
1
1
|
@mixin vf-b-typography-definitions {
|
|
2
2
|
//@section Heading styling in placeholders
|
|
3
|
-
%vf-heading-1 {
|
|
4
|
-
font-size: #{map-get($font-sizes, h1-mobile)}rem;
|
|
5
|
-
font-style: normal;
|
|
6
|
-
font-weight: $font-weight-display-heading;
|
|
7
|
-
line-height: map-get($line-heights, h1-mobile);
|
|
8
|
-
margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, h1-mobile);
|
|
9
|
-
margin-top: 0;
|
|
10
|
-
max-width: $text-max-width;
|
|
11
|
-
padding-top: map-get($nudges, h1-mobile) + map-get($browser-rounding-compensations, h1);
|
|
12
|
-
|
|
13
|
-
@media (min-width: $breakpoint-heading-threshold) {
|
|
14
|
-
font-size: #{map-get($font-sizes, h1)}rem;
|
|
15
|
-
line-height: map-get($line-heights, h1);
|
|
16
|
-
margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1);
|
|
17
|
-
padding-top: map-get($nudges, h1) + map-get($browser-rounding-compensations, h1);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@if ($increase-font-size-on-larger-screens) {
|
|
21
|
-
@media (min-width: $breakpoint-x-large) {
|
|
22
|
-
margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1-large);
|
|
23
|
-
padding-top: map-get($nudges, h1-large) + map-get($browser-rounding-compensations, h1);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&.u-no-margin--bottom {
|
|
28
|
-
@extend %u-no-margin--bottom--h1;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
3
|
%vf-heading-2 {
|
|
33
4
|
font-size: #{map-get($font-sizes, h2-mobile)}rem;
|
|
34
5
|
font-style: normal;
|
|
35
|
-
font-weight:
|
|
6
|
+
font-weight: 180;
|
|
36
7
|
line-height: map-get($line-heights, h2-mobile);
|
|
37
8
|
margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, h2-mobile);
|
|
38
9
|
margin-top: 0;
|
|
39
10
|
max-width: $text-max-width;
|
|
40
|
-
padding-top: map-get($nudges, h2-mobile)
|
|
11
|
+
padding-top: map-get($nudges, h2-mobile);
|
|
41
12
|
|
|
42
13
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
43
14
|
font-size: #{map-get($font-sizes, h2)}rem;
|
|
44
15
|
line-height: map-get($line-heights, h2);
|
|
45
16
|
margin-bottom: map-get($sp-after, h2) - map-get($nudges, h2);
|
|
46
|
-
padding-top: map-get($nudges, h2)
|
|
17
|
+
padding-top: map-get($nudges, h2);
|
|
47
18
|
}
|
|
48
19
|
|
|
49
20
|
&.u-no-margin--bottom {
|
|
@@ -51,10 +22,15 @@
|
|
|
51
22
|
}
|
|
52
23
|
}
|
|
53
24
|
|
|
25
|
+
%vf-heading-1 {
|
|
26
|
+
@extend %vf-heading-2;
|
|
27
|
+
font-weight: 550;
|
|
28
|
+
}
|
|
29
|
+
|
|
54
30
|
%vf-heading-3 {
|
|
55
31
|
font-size: #{map-get($font-sizes, h3-mobile)}rem;
|
|
56
32
|
font-style: normal;
|
|
57
|
-
font-weight:
|
|
33
|
+
font-weight: 550;
|
|
58
34
|
line-height: map-get($line-heights, h3-mobile);
|
|
59
35
|
margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, h3-mobile);
|
|
60
36
|
margin-top: 0;
|
|
@@ -65,7 +41,7 @@
|
|
|
65
41
|
font-size: #{map-get($font-sizes, h3)}rem;
|
|
66
42
|
line-height: map-get($line-heights, h3);
|
|
67
43
|
margin-bottom: map-get($sp-after, h3) - map-get($nudges, h3);
|
|
68
|
-
padding-top: map-get($nudges, h3)
|
|
44
|
+
padding-top: map-get($nudges, h3);
|
|
69
45
|
}
|
|
70
46
|
|
|
71
47
|
&.u-no-margin--bottom {
|
|
@@ -76,24 +52,24 @@
|
|
|
76
52
|
%vf-heading-4 {
|
|
77
53
|
font-size: #{map-get($font-sizes, h4-mobile)}rem;
|
|
78
54
|
font-style: normal;
|
|
79
|
-
font-weight:
|
|
55
|
+
font-weight: 275;
|
|
80
56
|
line-height: map-get($line-heights, h4-mobile);
|
|
81
57
|
margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, h4-mobile);
|
|
82
58
|
margin-top: 0;
|
|
83
59
|
max-width: $text-max-width;
|
|
84
|
-
padding-top: map-get($nudges, h4-mobile)
|
|
60
|
+
padding-top: map-get($nudges, h4-mobile);
|
|
85
61
|
|
|
86
62
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
87
63
|
font-size: #{map-get($font-sizes, h4)}rem;
|
|
88
64
|
line-height: map-get($line-heights, h4);
|
|
89
65
|
margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4);
|
|
90
|
-
padding-top: map-get($nudges, h4)
|
|
66
|
+
padding-top: map-get($nudges, h4);
|
|
91
67
|
}
|
|
92
68
|
|
|
93
69
|
@if ($increase-font-size-on-larger-screens) {
|
|
94
70
|
@media (min-width: $breakpoint-x-large) {
|
|
95
71
|
margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4-large);
|
|
96
|
-
padding-top: map-get($nudges, h4-large)
|
|
72
|
+
padding-top: map-get($nudges, h4-large);
|
|
97
73
|
}
|
|
98
74
|
}
|
|
99
75
|
|
|
@@ -105,12 +81,12 @@
|
|
|
105
81
|
%vf-heading-5 {
|
|
106
82
|
font-size: 1rem;
|
|
107
83
|
font-style: normal;
|
|
108
|
-
font-weight:
|
|
84
|
+
font-weight: 500;
|
|
109
85
|
line-height: map-get($line-heights, default-text);
|
|
110
86
|
margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
|
|
111
87
|
margin-top: 0;
|
|
112
88
|
max-width: $text-max-width;
|
|
113
|
-
padding-top: map-get($nudges, p)
|
|
89
|
+
padding-top: map-get($nudges, p);
|
|
114
90
|
|
|
115
91
|
&.u-no-margin--bottom {
|
|
116
92
|
@extend %u-no-margin--bottom--default-text;
|
|
@@ -125,11 +101,11 @@
|
|
|
125
101
|
margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
|
|
126
102
|
margin-top: 0;
|
|
127
103
|
max-width: $text-max-width;
|
|
128
|
-
padding-top: map-get($nudges, h6)
|
|
104
|
+
padding-top: map-get($nudges, h6);
|
|
129
105
|
|
|
130
106
|
@if ($increase-font-size-on-larger-screens) {
|
|
131
107
|
@media (min-width: $breakpoint-x-large) {
|
|
132
|
-
padding-top: map-get($nudges, h6-large)
|
|
108
|
+
padding-top: map-get($nudges, h6-large);
|
|
133
109
|
}
|
|
134
110
|
}
|
|
135
111
|
|
|
@@ -141,7 +117,7 @@
|
|
|
141
117
|
%common-default-text-properties {
|
|
142
118
|
line-height: map-get($line-heights, default-text);
|
|
143
119
|
margin-top: 0;
|
|
144
|
-
padding-top: map-get($nudges, p)
|
|
120
|
+
padding-top: map-get($nudges, p);
|
|
145
121
|
}
|
|
146
122
|
|
|
147
123
|
%default-text {
|
|
@@ -170,11 +146,11 @@
|
|
|
170
146
|
font-size: #{map-get($font-sizes, small)}rem;
|
|
171
147
|
line-height: map-get($line-heights, small);
|
|
172
148
|
margin-bottom: map-get($sp-after, small) - map-get($nudges, small);
|
|
173
|
-
padding-top: map-get($nudges, small)
|
|
149
|
+
padding-top: map-get($nudges, small);
|
|
174
150
|
|
|
175
151
|
@if ($increase-font-size-on-larger-screens) {
|
|
176
152
|
@media (min-width: $breakpoint-x-large) {
|
|
177
|
-
padding-top: map-get($nudges, small)
|
|
153
|
+
padding-top: map-get($nudges, small);
|
|
178
154
|
}
|
|
179
155
|
}
|
|
180
156
|
|
|
@@ -188,11 +164,11 @@
|
|
|
188
164
|
font-weight: $font-weight-bold;
|
|
189
165
|
line-height: map-get($line-heights, x-small);
|
|
190
166
|
margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small);
|
|
191
|
-
padding-top: map-get($nudges, x-small)
|
|
167
|
+
padding-top: map-get($nudges, x-small);
|
|
192
168
|
|
|
193
169
|
@if ($increase-font-size-on-larger-screens) {
|
|
194
170
|
@media (min-width: $breakpoint-x-large) {
|
|
195
|
-
padding-top: map-get($nudges, x-small)
|
|
171
|
+
padding-top: map-get($nudges, x-small);
|
|
196
172
|
}
|
|
197
173
|
}
|
|
198
174
|
|
|
@@ -220,7 +196,7 @@
|
|
|
220
196
|
// but now it's implemented with default text size not requiring any compensations,
|
|
221
197
|
// so we need to reset the padding-top to the default value
|
|
222
198
|
&.u-align-text--x-small-to-default {
|
|
223
|
-
padding-top: map-get($nudges, p)
|
|
199
|
+
padding-top: map-get($nudges, p);
|
|
224
200
|
}
|
|
225
201
|
}
|
|
226
202
|
|
package/scss/_patterns_grid.scss
CHANGED
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
@mixin vf-p-grid {
|
|
38
38
|
// FIXME: this should be removed from framework SCSS
|
|
39
39
|
// (see https://github.com/canonical/vanilla-framework/issues/3199)
|
|
40
|
+
.grid-demo .col,
|
|
40
41
|
.grid-demo [class*='#{$grid-column-prefix}'] {
|
|
41
42
|
background: transparentize($color-negative, 0.9);
|
|
42
43
|
margin-bottom: $spv--small;
|
|
@@ -188,4 +189,100 @@
|
|
|
188
189
|
}
|
|
189
190
|
}
|
|
190
191
|
}
|
|
192
|
+
|
|
193
|
+
// Common grid patterns
|
|
194
|
+
$col-50-medium: calc($grid-columns-medium / 2);
|
|
195
|
+
|
|
196
|
+
$col-25: calc($grid-columns / 4);
|
|
197
|
+
$col-50: calc($grid-columns / 2);
|
|
198
|
+
$col-75: calc(($grid-columns / 4) * 3);
|
|
199
|
+
|
|
200
|
+
.row--50-50 {
|
|
201
|
+
@extend %vf-row;
|
|
202
|
+
|
|
203
|
+
> .col {
|
|
204
|
+
@include vf-grid-column($grid-columns-small);
|
|
205
|
+
|
|
206
|
+
@media (min-width: $threshold-4-6-col) {
|
|
207
|
+
@include vf-grid-column($col-50-medium);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
@media (min-width: $threshold-6-12-col) {
|
|
211
|
+
@include vf-grid-column($col-50);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.row--25-75 {
|
|
217
|
+
@extend %vf-row;
|
|
218
|
+
|
|
219
|
+
> .col {
|
|
220
|
+
@include vf-grid-column($grid-columns-small);
|
|
221
|
+
|
|
222
|
+
@media (min-width: $threshold-4-6-col) {
|
|
223
|
+
@include vf-grid-column($grid-columns-medium);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
@media (min-width: $threshold-6-12-col) {
|
|
227
|
+
&:nth-of-type(1) {
|
|
228
|
+
@include vf-grid-column($col-25);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
&:nth-of-type(2) {
|
|
232
|
+
@include vf-grid-column($col-75);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// if there is only one column we offset it to the right
|
|
236
|
+
&:only-of-type {
|
|
237
|
+
grid-column-start: calc($col-25 + 1);
|
|
238
|
+
@include vf-grid-column($col-75);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.row--25-25-50 {
|
|
245
|
+
@extend %vf-row;
|
|
246
|
+
|
|
247
|
+
> .col {
|
|
248
|
+
@include vf-grid-column($grid-columns-small);
|
|
249
|
+
|
|
250
|
+
@media (min-width: $threshold-4-6-col) {
|
|
251
|
+
&:nth-of-type(-n + 2) {
|
|
252
|
+
@include vf-grid-column($col-50-medium);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
&:nth-of-type(3) {
|
|
256
|
+
@include vf-grid-column($grid-columns-medium);
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
@media (min-width: $threshold-6-12-col) {
|
|
261
|
+
&:nth-of-type(1),
|
|
262
|
+
&:nth-of-type(2) {
|
|
263
|
+
@include vf-grid-column($col-25);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
&:nth-of-type(3) {
|
|
267
|
+
@include vf-grid-column($col-50);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.row--25-25-25-25 {
|
|
274
|
+
@extend %vf-row;
|
|
275
|
+
|
|
276
|
+
> .col {
|
|
277
|
+
@include vf-grid-column($grid-columns-small);
|
|
278
|
+
|
|
279
|
+
@media (min-width: $threshold-4-6-col) {
|
|
280
|
+
@include vf-grid-column($col-50-medium);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
@media (min-width: $threshold-6-12-col) {
|
|
284
|
+
@include vf-grid-column($col-25);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
}
|
|
191
288
|
}
|
|
@@ -19,30 +19,18 @@
|
|
|
19
19
|
|
|
20
20
|
.p-heading-icon__img {
|
|
21
21
|
flex-shrink: 0;
|
|
22
|
-
height: map-get($icon-sizes, heading-icon
|
|
22
|
+
height: map-get($icon-sizes, heading-icon);
|
|
23
23
|
margin-bottom: 0;
|
|
24
24
|
margin-right: $sph--large;
|
|
25
|
-
margin-top: map-get($nudges, h3
|
|
26
|
-
width: map-get($icon-sizes, heading-icon
|
|
27
|
-
|
|
28
|
-
@media (min-width: $breakpoint-heading-threshold) {
|
|
29
|
-
height: map-get($icon-sizes, heading-icon);
|
|
30
|
-
margin-top: map-get($nudges, h3);
|
|
31
|
-
width: map-get($icon-sizes, heading-icon);
|
|
32
|
-
}
|
|
25
|
+
margin-top: calc(map-get($nudges, h3) / 2); // just a quick fix, should be calculated based on line height and icon size
|
|
26
|
+
width: map-get($icon-sizes, heading-icon);
|
|
33
27
|
}
|
|
34
28
|
|
|
35
29
|
.p-heading-icon--small {
|
|
36
30
|
.p-heading-icon__img {
|
|
37
|
-
height: map-get($icon-sizes, heading-icon--
|
|
38
|
-
margin-top: $
|
|
39
|
-
width: map-get($icon-sizes, heading-icon--
|
|
40
|
-
|
|
41
|
-
@media (min-width: $breakpoint-heading-threshold) {
|
|
42
|
-
height: map-get($icon-sizes, heading-icon--small);
|
|
43
|
-
margin-top: 0;
|
|
44
|
-
width: map-get($icon-sizes, heading-icon--small);
|
|
45
|
-
}
|
|
31
|
+
height: map-get($icon-sizes, heading-icon--small);
|
|
32
|
+
margin-top: map-get($nudges, h3);
|
|
33
|
+
width: map-get($icon-sizes, heading-icon--small);
|
|
46
34
|
}
|
|
47
35
|
}
|
|
48
36
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@import 'settings';
|
|
2
2
|
$list-status-icon-height: $default-icon-size;
|
|
3
|
+
$list-step-bullet-margin: $sph--x-large;
|
|
3
4
|
|
|
4
5
|
@mixin vf-p-list-placeholders {
|
|
5
6
|
%numbered-step-container {
|
|
@@ -13,21 +14,19 @@ $list-status-icon-height: $default-icon-size;
|
|
|
13
14
|
%numbered-step-title {
|
|
14
15
|
list-style: none;
|
|
15
16
|
margin-left: 0;
|
|
17
|
+
padding-left: calc(map-get($line-heights, default-text) + $list-step-bullet-margin);
|
|
18
|
+
position: relative;
|
|
16
19
|
|
|
17
20
|
&::before {
|
|
18
|
-
|
|
19
|
-
background-color: $color-x-light;
|
|
20
|
-
border: 1px solid $color-x-dark;
|
|
21
|
-
border-radius: 100%;
|
|
22
|
-
content: counter(li);
|
|
21
|
+
content: counter(li) '.';
|
|
23
22
|
counter-increment: li;
|
|
24
|
-
direction: rtl;
|
|
25
23
|
display: block;
|
|
26
|
-
|
|
27
|
-
font-weight: $font-weight-regular-text;
|
|
24
|
+
height: map-get($line-heights, default-text);
|
|
28
25
|
left: 0;
|
|
26
|
+
margin-right: $list-step-bullet-margin;
|
|
29
27
|
position: absolute;
|
|
30
|
-
text-align:
|
|
28
|
+
text-align: right;
|
|
29
|
+
width: map-get($line-heights, default-text);
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
32
|
|
|
@@ -116,6 +115,14 @@ $list-status-icon-height: $default-icon-size;
|
|
|
116
115
|
margin: 0;
|
|
117
116
|
padding-bottom: $sph--large;
|
|
118
117
|
padding-top: $sph--small;
|
|
118
|
+
|
|
119
|
+
&:first-child {
|
|
120
|
+
box-shadow: none;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.p-list--divided > .p-list__item:first-child {
|
|
124
|
+
box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
|
|
125
|
+
}
|
|
119
126
|
}
|
|
120
127
|
|
|
121
128
|
// Mixin for inline list items
|
|
@@ -326,74 +333,35 @@ $list-status-icon-height: $default-icon-size;
|
|
|
326
333
|
|
|
327
334
|
.p-stepped-list__title {
|
|
328
335
|
@extend %numbered-step-title;
|
|
329
|
-
|
|
330
|
-
padding-left: $bullet-width-mobile + $sph--large;
|
|
331
|
-
|
|
332
|
-
@media (min-width: $breakpoint-heading-threshold) {
|
|
333
|
-
padding-left: $bullet-width + $sph--large;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
&::before {
|
|
337
|
-
// Need to account for the 1px border:
|
|
338
|
-
line-height: calc($bullet-width-mobile - 2px);
|
|
339
|
-
margin-right: $sph--large;
|
|
340
|
-
width: $bullet-width-mobile;
|
|
341
|
-
|
|
342
|
-
@media (min-width: $breakpoint-heading-threshold) {
|
|
343
|
-
// Need to account for the 1px border:
|
|
344
|
-
line-height: calc($bullet-width - 2px);
|
|
345
|
-
width: $bullet-width;
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
.p-strip--dark &::before {
|
|
349
|
-
background-color: $color-x-dark;
|
|
350
|
-
border: 1px solid $color-x-light;
|
|
351
|
-
}
|
|
352
336
|
}
|
|
353
337
|
|
|
354
338
|
.p-stepped-list__title + .p-stepped-list__content {
|
|
355
|
-
margin-left: $bullet-width-mobile + $
|
|
339
|
+
margin-left: $bullet-width-mobile + $list-step-bullet-margin;
|
|
356
340
|
|
|
357
341
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
358
|
-
margin-left: $bullet-width + $
|
|
342
|
+
margin-left: $bullet-width + $list-step-bullet-margin;
|
|
359
343
|
}
|
|
360
344
|
}
|
|
361
345
|
|
|
362
|
-
@for $i from
|
|
346
|
+
@for $i from 4 through 1 {
|
|
363
347
|
// Bullet sizes for each heading level
|
|
364
|
-
$bullet-width: map-get($line-heights,
|
|
365
|
-
$bullet-width-mobile: map-get($line-heights,
|
|
366
|
-
// h6 line height is the same as the bullet width so no need to apply any margin:
|
|
367
|
-
$bullet-margin: 0;
|
|
368
|
-
$bullet-margin-mobile: 0;
|
|
369
|
-
|
|
370
|
-
@if $i < 5 {
|
|
371
|
-
// To align the bullet with the title we need to use half
|
|
372
|
-
// the height difference between the bullet and the title and then add the
|
|
373
|
-
// nudge to position it with the lower case text.
|
|
374
|
-
$bullet-margin: calc((map-get($line-heights, h#{$i}) - $bullet-width) / 2) + map-get($nudges, h#{$i});
|
|
375
|
-
$bullet-margin-mobile: calc((map-get($line-heights, h#{$i}-mobile) - $bullet-width-mobile) / 2) + map-get($nudges, h#{$i});
|
|
376
|
-
}
|
|
348
|
+
$bullet-width: map-get($line-heights, h#{$i});
|
|
349
|
+
$bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
|
|
377
350
|
|
|
378
351
|
.p-heading--#{$i}.p-stepped-list__title,
|
|
379
352
|
h#{$i}.p-stepped-list__title {
|
|
380
|
-
padding-left: $bullet-width-mobile + $
|
|
353
|
+
padding-left: $bullet-width-mobile + $list-step-bullet-margin;
|
|
381
354
|
|
|
382
355
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
383
|
-
padding-left: $bullet-width + $
|
|
356
|
+
padding-left: $bullet-width + $list-step-bullet-margin;
|
|
384
357
|
}
|
|
385
358
|
|
|
386
359
|
&::before {
|
|
387
|
-
|
|
388
|
-
line-height: calc($bullet-width-mobile - 2px);
|
|
389
|
-
margin-right: $sph--large;
|
|
390
|
-
margin-top: $bullet-margin-mobile;
|
|
360
|
+
height: $bullet-width-mobile;
|
|
391
361
|
width: $bullet-width-mobile;
|
|
392
362
|
|
|
393
363
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
394
|
-
|
|
395
|
-
line-height: calc($bullet-width - 2px);
|
|
396
|
-
margin-top: $bullet-margin;
|
|
364
|
+
height: $bullet-width;
|
|
397
365
|
width: $bullet-width;
|
|
398
366
|
}
|
|
399
367
|
}
|
|
@@ -401,10 +369,10 @@ $list-status-icon-height: $default-icon-size;
|
|
|
401
369
|
|
|
402
370
|
.p-heading--#{$i}.p-stepped-list__title + .p-stepped-list__content,
|
|
403
371
|
h#{$i}.p-stepped-list__title + .p-stepped-list__content {
|
|
404
|
-
margin-left: $bullet-width-mobile + $
|
|
372
|
+
margin-left: $bullet-width-mobile + $list-step-bullet-margin;
|
|
405
373
|
|
|
406
374
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
407
|
-
margin-left: $bullet-width + $
|
|
375
|
+
margin-left: $bullet-width + $list-step-bullet-margin;
|
|
408
376
|
}
|
|
409
377
|
}
|
|
410
378
|
}
|
|
@@ -431,7 +399,6 @@ $list-status-icon-height: $default-icon-size;
|
|
|
431
399
|
}
|
|
432
400
|
|
|
433
401
|
.p-stepped-list__title {
|
|
434
|
-
display: flex;
|
|
435
402
|
grid-column-end: span 6;
|
|
436
403
|
margin-left: 0;
|
|
437
404
|
}
|
|
@@ -468,6 +435,7 @@ $list-status-icon-height: $default-icon-size;
|
|
|
468
435
|
columns: 2;
|
|
469
436
|
|
|
470
437
|
.p-list__item {
|
|
438
|
+
display: inline-block;
|
|
471
439
|
width: 100%;
|
|
472
440
|
}
|
|
473
441
|
}
|
|
@@ -95,10 +95,7 @@
|
|
|
95
95
|
// The logo section pattern needs to align logos to the grid when they are an even number, and center them (while maintaining the same logo width) when the number of logos on a line is odd.
|
|
96
96
|
// This means we can't use css grid for this, instead we need to replicate its behavior for even numbers of logos, and center the odd ones.
|
|
97
97
|
.p-logo-section__title {
|
|
98
|
-
@extend %
|
|
99
|
-
|
|
100
|
-
font-weight: $font-weight-bold;
|
|
101
|
-
text-transform: uppercase;
|
|
98
|
+
@extend %small-caps-text;
|
|
102
99
|
}
|
|
103
100
|
|
|
104
101
|
$margin-small: map-get($grid-gutter-widths, small);
|
|
@@ -95,18 +95,19 @@
|
|
|
95
95
|
align-self: flex-start;
|
|
96
96
|
flex-shrink: 0;
|
|
97
97
|
height: auto;
|
|
98
|
-
margin-bottom: $spv--small;
|
|
99
98
|
margin-right: $matrix-img-gutter;
|
|
100
99
|
margin-top: 0;
|
|
101
100
|
width: $matrix-img-width;
|
|
102
101
|
|
|
103
102
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
104
|
-
|
|
103
|
+
// place image in the middle of the heading text
|
|
104
|
+
margin-top: calc(map-get($nudges, h4) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
@if ($increase-font-size-on-larger-screens) {
|
|
108
108
|
@media (min-width: $breakpoint-x-large) {
|
|
109
|
-
|
|
109
|
+
// place image in the middle of the heading text
|
|
110
|
+
margin-top: calc(map-get($nudges, h4-large) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
|
|
110
111
|
}
|
|
111
112
|
}
|
|
112
113
|
}
|
|
@@ -269,9 +269,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
269
269
|
}
|
|
270
270
|
|
|
271
271
|
.p-navigation__logo-title {
|
|
272
|
-
|
|
273
|
-
font-size:
|
|
274
|
-
|
|
272
|
+
// font sizing adjusted to match logo
|
|
273
|
+
font-size: 1.3rem;
|
|
274
|
+
font-weight: 300;
|
|
275
|
+
line-height: $navigation-logo-size;
|
|
275
276
|
}
|
|
276
277
|
|
|
277
278
|
.p-navigation__link {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@mixin vf-p-section {
|
|
2
|
+
.p-section {
|
|
3
|
+
// same as %section-padding--default
|
|
4
|
+
padding-bottom: $spv--strip-regular * 0.5;
|
|
5
|
+
|
|
6
|
+
@media (min-width: $breakpoint-large) {
|
|
7
|
+
padding-bottom: $spv--strip-regular;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.p-block {
|
|
12
|
+
// same as %section-padding--shallow
|
|
13
|
+
padding-bottom: $spv--x-large;
|
|
14
|
+
}
|
|
15
|
+
}
|
package/scss/_settings_grid.scss
CHANGED
|
@@ -8,27 +8,27 @@ $sp-unit-ratio: 0.5 !default;
|
|
|
8
8
|
$sp-unit: 1rem * $sp-unit-ratio !default;
|
|
9
9
|
|
|
10
10
|
$font-sizes: (
|
|
11
|
-
h1:
|
|
12
|
-
h1-mobile:
|
|
13
|
-
h2:
|
|
14
|
-
h2-mobile:
|
|
15
|
-
h3:
|
|
16
|
-
h3-mobile:
|
|
17
|
-
h4:
|
|
18
|
-
h4-mobile: 1.
|
|
19
|
-
small:
|
|
20
|
-
x-small:
|
|
11
|
+
h1: 2.5,
|
|
12
|
+
h1-mobile: 2,
|
|
13
|
+
h2: 2.5,
|
|
14
|
+
h2-mobile: 2,
|
|
15
|
+
h3: 1.5,
|
|
16
|
+
h3-mobile: 1.5,
|
|
17
|
+
h4: 1.5,
|
|
18
|
+
h4-mobile: 1.5,
|
|
19
|
+
small: 0.875,
|
|
20
|
+
x-small: 0.75,
|
|
21
21
|
) !default;
|
|
22
22
|
|
|
23
23
|
$line-heights: (
|
|
24
|
-
h1:
|
|
25
|
-
h1-mobile:
|
|
24
|
+
h1: 6 * $sp-unit,
|
|
25
|
+
h1-mobile: 5 * $sp-unit,
|
|
26
26
|
h2: 6 * $sp-unit,
|
|
27
27
|
h2-mobile: 5 * $sp-unit,
|
|
28
|
-
h3:
|
|
28
|
+
h3: 4 * $sp-unit,
|
|
29
29
|
h3-mobile: 4 * $sp-unit,
|
|
30
30
|
h4: 4 * $sp-unit,
|
|
31
|
-
h4-mobile:
|
|
31
|
+
h4-mobile: 4 * $sp-unit,
|
|
32
32
|
default-text: 3 * $sp-unit,
|
|
33
33
|
small: 2.5 * $sp-unit,
|
|
34
34
|
x-small: 2 * $sp-unit,
|
|
@@ -36,18 +36,19 @@ $line-heights: (
|
|
|
36
36
|
|
|
37
37
|
// baseline nudges for type scale ratio of (16/14)^2
|
|
38
38
|
$nudges: (
|
|
39
|
-
h1-large: 0.
|
|
40
|
-
h1-mobile: 0.
|
|
41
|
-
h1: 0.
|
|
42
|
-
h2: 0.
|
|
43
|
-
h2-mobile: 0.
|
|
44
|
-
h3: 0.
|
|
45
|
-
h3-mobile: 0.
|
|
46
|
-
h4-large: 0,
|
|
47
|
-
h4: 0.
|
|
48
|
-
h4-mobile: 0.
|
|
49
|
-
|
|
50
|
-
h6
|
|
39
|
+
h1-large: 0.55rem,
|
|
40
|
+
h1-mobile: 0.55rem,
|
|
41
|
+
h1: 0.55rem,
|
|
42
|
+
h2: 0.55rem,
|
|
43
|
+
h2-mobile: 0.55rem,
|
|
44
|
+
h3: 0.45rem,
|
|
45
|
+
h3-mobile: 0.45rem,
|
|
46
|
+
h4-large: 0.45rem,
|
|
47
|
+
h4: 0.45rem,
|
|
48
|
+
h4-mobile: 0.45rem,
|
|
49
|
+
h5: 0.4rem,
|
|
50
|
+
h6: 0.4rem,
|
|
51
|
+
h6-large: 0.4rem,
|
|
51
52
|
p: 0.4rem,
|
|
52
53
|
p-ubuntumono: 0.45rem,
|
|
53
54
|
small: 0.05rem,
|
|
@@ -56,16 +57,17 @@ $nudges: (
|
|
|
56
57
|
|
|
57
58
|
// Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)
|
|
58
59
|
// It is applied only to padding-top.
|
|
60
|
+
// DEPRECATED, will be removed in 4.0
|
|
59
61
|
$browser-rounding-compensations: (
|
|
60
|
-
h1: 0
|
|
61
|
-
h2: 0
|
|
62
|
-
h3: 0
|
|
63
|
-
h4: 0
|
|
64
|
-
h5: 0
|
|
62
|
+
h1: 0,
|
|
63
|
+
h2: 0,
|
|
64
|
+
h3: 0,
|
|
65
|
+
h4: 0,
|
|
66
|
+
h5: 0,
|
|
65
67
|
h6: 0,
|
|
66
|
-
p: 0
|
|
67
|
-
small-largescreen: 0
|
|
68
|
-
small: 0
|
|
68
|
+
p: 0,
|
|
69
|
+
small-largescreen: 0,
|
|
70
|
+
small: 0,
|
|
69
71
|
) !default;
|
|
70
72
|
|
|
71
73
|
// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
|
|
@@ -75,8 +77,9 @@ $spv--small: $sp-unit !default;
|
|
|
75
77
|
$spv--medium: $sp-unit * 1.5 !default;
|
|
76
78
|
$spv--large: $sp-unit * 2;
|
|
77
79
|
$spv--x-large: $sp-unit * 3 !default;
|
|
80
|
+
$spv--strip-shallow: $sp-unit * 3 !default;
|
|
78
81
|
$spv--strip-regular: $sp-unit * 8 !default;
|
|
79
|
-
$spv--strip-deep: $sp-unit *
|
|
82
|
+
$spv--strip-deep: $sp-unit * 16 !default;
|
|
80
83
|
|
|
81
84
|
$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
|
|
82
85
|
$sph--small: $sp-unit !default;
|
|
@@ -85,14 +88,14 @@ $sph--x-large: $sp-unit * 3 !default;
|
|
|
85
88
|
|
|
86
89
|
// Space after text elements
|
|
87
90
|
$sp-after: (
|
|
88
|
-
h1: $spv--large,
|
|
89
|
-
h1-mobile: $spv--large,
|
|
90
|
-
h2: $spv--large,
|
|
91
|
-
h2-mobile: $spv--large,
|
|
92
|
-
h3: $spv--large,
|
|
93
|
-
h3-mobile: $spv--large,
|
|
94
|
-
h4: $spv--large,
|
|
95
|
-
h4-mobile: $spv--large,
|
|
91
|
+
h1: $spv--x-large,
|
|
92
|
+
h1-mobile: $spv--x-large,
|
|
93
|
+
h2: $spv--x-large,
|
|
94
|
+
h2-mobile: $spv--x-large,
|
|
95
|
+
h3: $spv--x-large,
|
|
96
|
+
h3-mobile: $spv--x-large,
|
|
97
|
+
h4: $spv--x-large,
|
|
98
|
+
h4-mobile: $spv--x-large,
|
|
96
99
|
p: $spv--x-large,
|
|
97
100
|
p-dense: $spv--large,
|
|
98
101
|
default-text: $sp-unit,
|
package/scss/_vanilla.scss
CHANGED
|
@@ -34,8 +34,10 @@
|
|
|
34
34
|
@import 'patterns_notifications';
|
|
35
35
|
@import 'patterns_pagination';
|
|
36
36
|
@import 'patterns_pull-quotes';
|
|
37
|
+
@import 'patterns_rule';
|
|
37
38
|
@import 'patterns_search-and-filter';
|
|
38
39
|
@import 'patterns_search-box';
|
|
40
|
+
@import 'patterns_section';
|
|
39
41
|
@import 'patterns_separator';
|
|
40
42
|
@import 'patterns_side-navigation';
|
|
41
43
|
@import 'patterns_side-navigation-expandable';
|
|
@@ -92,6 +94,7 @@
|
|
|
92
94
|
@include vf-p-buttons;
|
|
93
95
|
@include vf-p-card;
|
|
94
96
|
@include vf-p-chip;
|
|
97
|
+
@include vf-p-section;
|
|
95
98
|
@include vf-p-badge;
|
|
96
99
|
@include vf-p-code-snippet;
|
|
97
100
|
@include vf-p-contextual-menu;
|
|
@@ -119,6 +122,7 @@
|
|
|
119
122
|
@include vf-p-notification;
|
|
120
123
|
@include vf-p-pagination;
|
|
121
124
|
@include vf-p-pull-quotes;
|
|
125
|
+
@include vf-p-rule;
|
|
122
126
|
@include vf-p-search-and-filter;
|
|
123
127
|
@include vf-p-search-box;
|
|
124
128
|
@include vf-p-segmented-control;
|