vanilla-framework 3.14.0 → 4.0.0-alpha.2
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 +6 -6
- package/scss/_base_background.scss +6 -1
- package/scss/_base_forms.scss +19 -0
- package/scss/_base_tables.scss +1 -1
- package/scss/_base_typography-definitions.scss +24 -48
- package/scss/_patterns_heading-icon.scss +6 -18
- package/scss/_patterns_lists.scss +19 -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_search-box.scss +37 -4
- package/scss/_patterns_strip.scss +16 -9
- package/scss/_settings_colors.scss +7 -0
- package/scss/_settings_grid.scss +1 -1
- package/scss/_settings_spacing.scss +44 -42
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-framework",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-alpha.2",
|
|
4
4
|
"author": {
|
|
5
5
|
"email": "webteam@canonical.com",
|
|
6
6
|
"name": "Canonical Webteam"
|
|
@@ -59,16 +59,16 @@
|
|
|
59
59
|
"@canonical/latest-news": "1.4.1",
|
|
60
60
|
"@percy/script": "1.1.0",
|
|
61
61
|
"@testing-library/cypress": "9.0.0",
|
|
62
|
-
"autoprefixer": "10.4.
|
|
63
|
-
"cypress": "12.
|
|
62
|
+
"autoprefixer": "10.4.14",
|
|
63
|
+
"cypress": "12.11.0",
|
|
64
64
|
"get-site-urls": "3.0.0",
|
|
65
65
|
"markdown-spellcheck": "1.3.1",
|
|
66
66
|
"parker": "0.0.10",
|
|
67
|
-
"postcss": "8.4.
|
|
67
|
+
"postcss": "8.4.23",
|
|
68
68
|
"postcss-cli": "9.1.0",
|
|
69
69
|
"postcss-scss": "4.0.6",
|
|
70
|
-
"prettier": "2.8.
|
|
71
|
-
"sass": "1.
|
|
70
|
+
"prettier": "2.8.8",
|
|
71
|
+
"sass": "1.62.1",
|
|
72
72
|
"stylelint": "14.16.1",
|
|
73
73
|
"stylelint-config-prettier": "9.0.5",
|
|
74
74
|
"stylelint-config-recommended-scss": "5.0.2",
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
@mixin vf-base-background {
|
|
2
2
|
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
|
|
3
|
-
|
|
3
|
+
body {
|
|
4
4
|
background: $color-x-light;
|
|
5
5
|
}
|
|
6
|
+
|
|
7
|
+
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
|
|
8
|
+
body.is-paper {
|
|
9
|
+
background: $color-paper;
|
|
10
|
+
}
|
|
6
11
|
}
|
package/scss/_base_forms.scss
CHANGED
|
@@ -67,6 +67,25 @@
|
|
|
67
67
|
border: $input-border-thickness solid $color;
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
+
|
|
71
|
+
// adjust input background color for paper theme
|
|
72
|
+
|
|
73
|
+
// XXX: currently these colours are transparent,
|
|
74
|
+
// so they work both on paper and white backgrounds.
|
|
75
|
+
// We may need later to add a specific override for
|
|
76
|
+
// a white background within paper themed pages.
|
|
77
|
+
.is-paper & {
|
|
78
|
+
background-color: $colors--paper-theme--background-inputs;
|
|
79
|
+
|
|
80
|
+
&:hover {
|
|
81
|
+
background-color: $colors--paper-theme--background-hover;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&:active,
|
|
85
|
+
&:focus {
|
|
86
|
+
background-color: $colors--paper-theme--background-active;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
70
89
|
}
|
|
71
90
|
|
|
72
91
|
// Disabled form elements
|
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
|
|
|
@@ -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
|
|
|
@@ -334,74 +333,35 @@ $list-status-icon-height: $default-icon-size;
|
|
|
334
333
|
|
|
335
334
|
.p-stepped-list__title {
|
|
336
335
|
@extend %numbered-step-title;
|
|
337
|
-
|
|
338
|
-
padding-left: $bullet-width-mobile + $sph--large;
|
|
339
|
-
|
|
340
|
-
@media (min-width: $breakpoint-heading-threshold) {
|
|
341
|
-
padding-left: $bullet-width + $sph--large;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
&::before {
|
|
345
|
-
// Need to account for the 1px border:
|
|
346
|
-
line-height: calc($bullet-width-mobile - 2px);
|
|
347
|
-
margin-right: $sph--large;
|
|
348
|
-
width: $bullet-width-mobile;
|
|
349
|
-
|
|
350
|
-
@media (min-width: $breakpoint-heading-threshold) {
|
|
351
|
-
// Need to account for the 1px border:
|
|
352
|
-
line-height: calc($bullet-width - 2px);
|
|
353
|
-
width: $bullet-width;
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
.p-strip--dark &::before {
|
|
357
|
-
background-color: $color-x-dark;
|
|
358
|
-
border: 1px solid $color-x-light;
|
|
359
|
-
}
|
|
360
336
|
}
|
|
361
337
|
|
|
362
338
|
.p-stepped-list__title + .p-stepped-list__content {
|
|
363
|
-
margin-left: $bullet-width-mobile + $
|
|
339
|
+
margin-left: $bullet-width-mobile + $list-step-bullet-margin;
|
|
364
340
|
|
|
365
341
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
366
|
-
margin-left: $bullet-width + $
|
|
342
|
+
margin-left: $bullet-width + $list-step-bullet-margin;
|
|
367
343
|
}
|
|
368
344
|
}
|
|
369
345
|
|
|
370
|
-
@for $i from
|
|
346
|
+
@for $i from 4 through 1 {
|
|
371
347
|
// Bullet sizes for each heading level
|
|
372
|
-
$bullet-width: map-get($line-heights,
|
|
373
|
-
$bullet-width-mobile: map-get($line-heights,
|
|
374
|
-
// h6 line height is the same as the bullet width so no need to apply any margin:
|
|
375
|
-
$bullet-margin: 0;
|
|
376
|
-
$bullet-margin-mobile: 0;
|
|
377
|
-
|
|
378
|
-
@if $i < 5 {
|
|
379
|
-
// To align the bullet with the title we need to use half
|
|
380
|
-
// the height difference between the bullet and the title and then add the
|
|
381
|
-
// nudge to position it with the lower case text.
|
|
382
|
-
$bullet-margin: calc((map-get($line-heights, h#{$i}) - $bullet-width) / 2) + map-get($nudges, h#{$i});
|
|
383
|
-
$bullet-margin-mobile: calc((map-get($line-heights, h#{$i}-mobile) - $bullet-width-mobile) / 2) + map-get($nudges, h#{$i});
|
|
384
|
-
}
|
|
348
|
+
$bullet-width: map-get($line-heights, h#{$i});
|
|
349
|
+
$bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
|
|
385
350
|
|
|
386
351
|
.p-heading--#{$i}.p-stepped-list__title,
|
|
387
352
|
h#{$i}.p-stepped-list__title {
|
|
388
|
-
padding-left: $bullet-width-mobile + $
|
|
353
|
+
padding-left: $bullet-width-mobile + $list-step-bullet-margin;
|
|
389
354
|
|
|
390
355
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
391
|
-
padding-left: $bullet-width + $
|
|
356
|
+
padding-left: $bullet-width + $list-step-bullet-margin;
|
|
392
357
|
}
|
|
393
358
|
|
|
394
359
|
&::before {
|
|
395
|
-
|
|
396
|
-
line-height: calc($bullet-width-mobile - 2px);
|
|
397
|
-
margin-right: $sph--large;
|
|
398
|
-
margin-top: $bullet-margin-mobile;
|
|
360
|
+
height: $bullet-width-mobile;
|
|
399
361
|
width: $bullet-width-mobile;
|
|
400
362
|
|
|
401
363
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
402
|
-
|
|
403
|
-
line-height: calc($bullet-width - 2px);
|
|
404
|
-
margin-top: $bullet-margin;
|
|
364
|
+
height: $bullet-width;
|
|
405
365
|
width: $bullet-width;
|
|
406
366
|
}
|
|
407
367
|
}
|
|
@@ -409,10 +369,10 @@ $list-status-icon-height: $default-icon-size;
|
|
|
409
369
|
|
|
410
370
|
.p-heading--#{$i}.p-stepped-list__title + .p-stepped-list__content,
|
|
411
371
|
h#{$i}.p-stepped-list__title + .p-stepped-list__content {
|
|
412
|
-
margin-left: $bullet-width-mobile + $
|
|
372
|
+
margin-left: $bullet-width-mobile + $list-step-bullet-margin;
|
|
413
373
|
|
|
414
374
|
@media (min-width: $breakpoint-heading-threshold) {
|
|
415
|
-
margin-left: $bullet-width + $
|
|
375
|
+
margin-left: $bullet-width + $list-step-bullet-margin;
|
|
416
376
|
}
|
|
417
377
|
}
|
|
418
378
|
}
|
|
@@ -439,7 +399,6 @@ $list-status-icon-height: $default-icon-size;
|
|
|
439
399
|
}
|
|
440
400
|
|
|
441
401
|
.p-stepped-list__title {
|
|
442
|
-
display: flex;
|
|
443
402
|
grid-column-end: span 6;
|
|
444
403
|
margin-left: 0;
|
|
445
404
|
}
|
|
@@ -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 {
|
|
@@ -99,23 +99,38 @@
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
+
|
|
103
|
+
.is-paper .p-search-box {
|
|
104
|
+
.p-search-box__input {
|
|
105
|
+
@include vf-search-box-paper-theme;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
102
108
|
}
|
|
103
109
|
|
|
104
|
-
@mixin vf-search-box-theme(
|
|
110
|
+
@mixin vf-search-box-theme(
|
|
111
|
+
$color-search-box-background,
|
|
112
|
+
$color-search-box-background-hover,
|
|
113
|
+
$color-search-box-background-active,
|
|
114
|
+
$color-search-box-border,
|
|
115
|
+
$color-search-box-text
|
|
116
|
+
) {
|
|
105
117
|
//XXX: This should inherit from input color theming. Once that becomes available, delete this.
|
|
106
118
|
background-color: $color-search-box-background;
|
|
107
119
|
border-color: $color-search-box-border;
|
|
108
120
|
color: $color-search-box-text;
|
|
109
121
|
|
|
122
|
+
&:hover,
|
|
123
|
+
&:-webkit-autofill:hover {
|
|
124
|
+
background-color: $color-search-box-background-hover !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
110
127
|
&:active,
|
|
111
128
|
&:focus,
|
|
112
|
-
&:hover,
|
|
113
129
|
&:-internal-autofill-selected,
|
|
114
130
|
&:-webkit-autofill,
|
|
115
|
-
&:-webkit-autofill:hover,
|
|
116
131
|
&:-webkit-autofill:focus {
|
|
117
132
|
// XXX: remove important once the button {} selector is refactored to use themeing. At the moment, it trumps these.
|
|
118
|
-
background-color: $color-search-box-background !important;
|
|
133
|
+
background-color: $color-search-box-background-active !important;
|
|
119
134
|
border-color: $color-search-box-border !important;
|
|
120
135
|
}
|
|
121
136
|
}
|
|
@@ -123,6 +138,8 @@
|
|
|
123
138
|
@mixin vf-search-box-light-theme {
|
|
124
139
|
@include vf-search-box-theme(
|
|
125
140
|
$color-search-box-background: $colors--light-theme--background-inputs,
|
|
141
|
+
$color-search-box-background-hover: $colors--light-theme--background-hover,
|
|
142
|
+
$color-search-box-background-active: $colors--light-theme--background-active,
|
|
126
143
|
$color-search-box-border: $colors--light-theme--border-high-contrast,
|
|
127
144
|
$color-search-box-text: $colors--light-theme--text-default
|
|
128
145
|
);
|
|
@@ -131,6 +148,8 @@
|
|
|
131
148
|
@mixin vf-search-box-dark-theme {
|
|
132
149
|
@include vf-search-box-theme(
|
|
133
150
|
$color-search-box-background: lighten($colors--dark-theme--background-default, 10%),
|
|
151
|
+
$color-search-box-background-hover: $colors--dark-theme--background-hover,
|
|
152
|
+
$color-search-box-background-active: $colors--dark-theme--background-active,
|
|
134
153
|
$color-search-box-border: $color-x-light,
|
|
135
154
|
$color-search-box-text: $colors--dark-theme--text-default
|
|
136
155
|
);
|
|
@@ -139,3 +158,17 @@
|
|
|
139
158
|
color: $colors--dark-theme--text-default;
|
|
140
159
|
}
|
|
141
160
|
}
|
|
161
|
+
|
|
162
|
+
@mixin vf-search-box-paper-theme {
|
|
163
|
+
// XXX: currently these colours are transparent,
|
|
164
|
+
// so they work both on paper and white backgrounds.
|
|
165
|
+
// We may need later to add a specific override for
|
|
166
|
+
// a white background within paper themed pages.
|
|
167
|
+
@include vf-search-box-theme(
|
|
168
|
+
$color-search-box-background: $colors--paper-theme--background-inputs,
|
|
169
|
+
$color-search-box-background-hover: $colors--paper-theme--background-hover,
|
|
170
|
+
$color-search-box-background-active: $colors--paper-theme--background-active,
|
|
171
|
+
$color-search-box-border: $colors--light-theme--border-high-contrast,
|
|
172
|
+
$color-search-box-text: $colors--light-theme--text-default
|
|
173
|
+
);
|
|
174
|
+
}
|
|
@@ -24,19 +24,26 @@
|
|
|
24
24
|
@extend %vf-strip;
|
|
25
25
|
|
|
26
26
|
background-color: transparent;
|
|
27
|
+
}
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
.p-strip--light {
|
|
30
|
+
@extend %vf-strip;
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
background-color: $color-light;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.p-strip--dark {
|
|
36
|
+
@extend %vf-strip;
|
|
33
37
|
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
background-color: $color-dark;
|
|
39
|
+
color: $color-light;
|
|
40
|
+
}
|
|
36
41
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
42
|
+
.p-strip--white {
|
|
43
|
+
@extend %vf-strip;
|
|
44
|
+
|
|
45
|
+
background-color: $color-x-light;
|
|
46
|
+
color: $colors--light-theme--text-default;
|
|
40
47
|
}
|
|
41
48
|
}
|
|
42
49
|
|
|
@@ -18,6 +18,8 @@ $color-caution: #f99b11 !default;
|
|
|
18
18
|
$color-positive: #0e8420 !default;
|
|
19
19
|
$color-information: #24598f !default;
|
|
20
20
|
|
|
21
|
+
$color-paper: #f3f3f3 !default;
|
|
22
|
+
|
|
21
23
|
// for dark themes
|
|
22
24
|
$color-negative-dark: #a11223 !default;
|
|
23
25
|
$color-positive-dark: #008013 !default;
|
|
@@ -196,6 +198,11 @@ $colors-dark-theme--tinted-borders: (
|
|
|
196
198
|
information: hsl(210deg 80% 65%),
|
|
197
199
|
);
|
|
198
200
|
|
|
201
|
+
// Paper theme (work in progress)
|
|
202
|
+
$colors--paper-theme--background-inputs: rgba($color-x-dark, $input-background-opacity-amount) !default;
|
|
203
|
+
$colors--paper-theme--background-active: rgba($color-x-dark, $active-background-opacity-amount) !default;
|
|
204
|
+
$colors--paper-theme--background-hover: rgba($color-x-dark, $hover-background-opacity-amount) !default;
|
|
205
|
+
|
|
199
206
|
// Branding colors
|
|
200
207
|
$color-brand: #333 !default;
|
|
201
208
|
$color-brand-dark: $color-brand !default;
|
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.
|
|
@@ -86,14 +88,14 @@ $sph--x-large: $sp-unit * 3 !default;
|
|
|
86
88
|
|
|
87
89
|
// Space after text elements
|
|
88
90
|
$sp-after: (
|
|
89
|
-
h1: $spv--large,
|
|
90
|
-
h1-mobile: $spv--large,
|
|
91
|
-
h2: $spv--large,
|
|
92
|
-
h2-mobile: $spv--large,
|
|
93
|
-
h3: $spv--large,
|
|
94
|
-
h3-mobile: $spv--large,
|
|
95
|
-
h4: $spv--large,
|
|
96
|
-
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,
|
|
97
99
|
p: $spv--x-large,
|
|
98
100
|
p-dense: $spv--large,
|
|
99
101
|
default-text: $sp-unit,
|