vanilla-framework 4.8.0 → 4.9.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 +8 -8
- package/scss/_base_button.scss +8 -8
- package/scss/_base_code.scss +5 -5
- package/scss/_base_grid-definitions.scss +4 -4
- package/scss/_base_icon-definitions.scss +32 -9
- package/scss/_base_syntax-highlighting.scss +2 -2
- package/scss/_patterns_buttons.scss +35 -169
- package/scss/_patterns_code-snippet.scss +7 -8
- package/scss/_patterns_lists.scss +23 -9
- package/scss/_patterns_media-container.scss +5 -0
- package/scss/_patterns_notifications.scss +2 -2
- package/scss/_patterns_side-navigation.scss +18 -3
- package/scss/_patterns_table-mobile-card.scss +3 -2
- package/scss/_settings_colors.scss +38 -4
- package/scss/_utilities_baseline-grid.scss +8 -0
- package/scss/_utilities_layout.scss +0 -6
- package/scss/_utilities_theme-toggle.scss +39 -0
- package/scss/_vanilla.scss +4 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-framework",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.9.1",
|
|
4
4
|
"author": {
|
|
5
5
|
"email": "webteam@canonical.com",
|
|
6
6
|
"name": "Canonical Webteam"
|
|
@@ -57,23 +57,23 @@
|
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@canonical/cookie-policy": "3.5.0",
|
|
59
59
|
"@canonical/latest-news": "1.5.0",
|
|
60
|
-
"@percy/cli": "1.
|
|
60
|
+
"@percy/cli": "1.28.0",
|
|
61
61
|
"@testing-library/cypress": "10.0.1",
|
|
62
62
|
"autoprefixer": "10.4.17",
|
|
63
|
-
"cypress": "13.6.
|
|
63
|
+
"cypress": "13.6.6",
|
|
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.35",
|
|
68
68
|
"postcss-cli": "11.0.0",
|
|
69
69
|
"postcss-scss": "4.0.9",
|
|
70
|
-
"prettier": "3.2.
|
|
71
|
-
"sass": "1.
|
|
70
|
+
"prettier": "3.2.5",
|
|
71
|
+
"sass": "1.71.1",
|
|
72
72
|
"stylelint": "16.2.1",
|
|
73
73
|
"stylelint-config-recommended-scss": "14.0.0",
|
|
74
74
|
"stylelint-order": "6.0.4",
|
|
75
75
|
"stylelint-prettier": "5.0.0",
|
|
76
|
-
"svgo": "2.
|
|
77
|
-
"yaml": "2.
|
|
76
|
+
"svgo": "3.2.0",
|
|
77
|
+
"yaml": "2.4.0"
|
|
78
78
|
}
|
|
79
79
|
}
|
package/scss/_base_button.scss
CHANGED
|
@@ -100,15 +100,15 @@
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
@mixin vf-button-pattern(
|
|
103
|
-
$button-background-color: $colors--
|
|
104
|
-
$button-text-color: $colors--
|
|
103
|
+
$button-background-color: $colors--theme--background-default,
|
|
104
|
+
$button-text-color: $colors--theme--text-default,
|
|
105
105
|
$button-disabled-background-color: $color-transparent,
|
|
106
|
-
$button-disabled-border-color: $colors--
|
|
107
|
-
$button-border-color: $colors--
|
|
108
|
-
$button-hover-background-color: $colors--
|
|
109
|
-
$button-hover-border-color: $colors--
|
|
110
|
-
$button-active-background-color: $colors--
|
|
111
|
-
$button-active-border-color: $colors--
|
|
106
|
+
$button-disabled-border-color: $colors--theme--border-high-contrast,
|
|
107
|
+
$button-border-color: $colors--theme--border-high-contrast,
|
|
108
|
+
$button-hover-background-color: $colors--theme--background-hover,
|
|
109
|
+
$button-hover-border-color: $colors--theme--border-high-contrast,
|
|
110
|
+
$button-active-background-color: $colors--theme--background-active,
|
|
111
|
+
$button-active-border-color: $colors--theme--border-high-contrast
|
|
112
112
|
) {
|
|
113
113
|
background-color: $button-background-color;
|
|
114
114
|
border-color: $button-border-color;
|
package/scss/_base_code.scss
CHANGED
|
@@ -25,7 +25,7 @@ $code-inline-padding: 0.25rem;
|
|
|
25
25
|
code,
|
|
26
26
|
kbd,
|
|
27
27
|
samp {
|
|
28
|
-
background-color: $
|
|
28
|
+
background-color: $colors--theme--background-code;
|
|
29
29
|
box-decoration-break: slice;
|
|
30
30
|
color: inherit;
|
|
31
31
|
line-height: map-get($line-heights, default-text) - $code-inline-padding;
|
|
@@ -59,8 +59,8 @@ $code-inline-padding: 0.25rem;
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
pre {
|
|
62
|
-
background-color: $
|
|
63
|
-
color: $colors--
|
|
62
|
+
background-color: $colors--theme--background-code;
|
|
63
|
+
color: $colors--theme--text-default;
|
|
64
64
|
display: block;
|
|
65
65
|
margin-bottom: $spv--x-large;
|
|
66
66
|
margin-top: 0;
|
|
@@ -81,7 +81,7 @@ $code-inline-padding: 0.25rem;
|
|
|
81
81
|
%leading-linux-prompt-icon {
|
|
82
82
|
&::before {
|
|
83
83
|
@extend %icon;
|
|
84
|
-
@include vf-icon-linux-prompt
|
|
84
|
+
@include vf-icon-linux-prompt-themed;
|
|
85
85
|
|
|
86
86
|
content: '';
|
|
87
87
|
left: $sph--large;
|
|
@@ -110,7 +110,7 @@ $code-inline-padding: 0.25rem;
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
&::before {
|
|
113
|
-
color: $
|
|
113
|
+
color: $colors--theme--text-muted;
|
|
114
114
|
content: counter(line-numbering);
|
|
115
115
|
counter-increment: line-numbering;
|
|
116
116
|
height: 100%;
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
@extend %fixed-width-container--common-properties;
|
|
24
24
|
|
|
25
25
|
max-width: $grid-max-width;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
%vf-row {
|
|
29
|
-
@extend %fixed-width-container;
|
|
30
26
|
|
|
31
27
|
& & {
|
|
32
28
|
@include vf-b-row-reset;
|
|
33
29
|
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
%vf-row {
|
|
33
|
+
@extend %fixed-width-container;
|
|
34
34
|
|
|
35
35
|
@supports (display: grid) {
|
|
36
36
|
display: grid;
|
|
@@ -122,6 +122,11 @@
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
@mixin vf-icon-info-themed {
|
|
125
|
+
@include vf-themed-icon($light-value: vf-icon-info-url($colors--light-theme--icon), $dark-value: vf-icon-info-url($colors--dark-theme--icon));
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// for use with notifications
|
|
129
|
+
@mixin vf-icon-info-coloured-themed {
|
|
125
130
|
@include vf-themed-icon(
|
|
126
131
|
$light-value: vf-icon-info-url(map-get($colors-light-theme--tinted-borders, information)),
|
|
127
132
|
$dark-value: vf-icon-info-url(map-get($colors-dark-theme--tinted-borders, information))
|
|
@@ -286,7 +291,7 @@
|
|
|
286
291
|
}
|
|
287
292
|
|
|
288
293
|
@mixin vf-icon-success-grey($color) {
|
|
289
|
-
background-image: vf-icon-success-url($color);
|
|
294
|
+
background-image: vf-icon-success-grey-url($color);
|
|
290
295
|
}
|
|
291
296
|
|
|
292
297
|
@mixin vf-icon-success-grey-themed {
|
|
@@ -358,6 +363,32 @@
|
|
|
358
363
|
@include vf-themed-icon($light-value: vf-icon-hide-url($colors--light-theme--icon), $dark-value: vf-icon-hide-url($colors--dark-theme--icon));
|
|
359
364
|
}
|
|
360
365
|
|
|
366
|
+
// get-link
|
|
367
|
+
@function vf-icon-get-link-url($color) {
|
|
368
|
+
@return url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.781 4.772c.976.683 1.5 1.77 1.508 2.876l-.065.105c-.317.457-.88.637-1.308.399a.831.831 0 01-.162-.117A2.036 2.036 0 005.177 6.38l-.091.121L2.832 9.72a2.036 2.036 0 003.243 2.456l.092-.121.114-.162a3.582 3.582 0 001.34.7l-.225.322a3.536 3.536 0 11-5.792-4.056L3.857 5.64a3.536 3.536 0 014.924-.868zm4.747-3.042a3.536 3.536 0 01.868 4.924l-2.253 3.218A3.536 3.536 0 015.71 7.865l.065-.105c.317-.458.88-.637 1.308-.4.06.033.113.073.162.117a2.036 2.036 0 003.577 1.656l.091-.121 2.254-3.218a2.036 2.036 0 00-3.243-2.457l-.092.122-.114.162a3.582 3.582 0 00-1.34-.701l.225-.322a3.536 3.536 0 014.924-.868z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
@mixin vf-icon-get-link($color) {
|
|
372
|
+
background-image: vf-icon-chevron-url($color);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
@mixin vf-icon-get-link-themed {
|
|
376
|
+
@include vf-themed-icon($light-value: vf-icon-get-link-url($colors--light-theme--icon), $dark-value: vf-icon-get-link-url($colors--dark-theme--icon));
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
// linux-prompt
|
|
380
|
+
@function vf-icon-linux-url($color) {
|
|
381
|
+
@return url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='dollar-sign' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.85063291,15 L8.85063291,13.1075949 C9.73924051,12.9978903 10.3974684,12.7181434 10.8253165,12.2683544 C11.2531646,11.8185654 11.4670886,11.2700422 11.4670886,10.6227848 C11.4670886,10.1949367 11.3875528,9.82742616 11.228481,9.52025316 C11.0694092,9.21308017 10.8582278,8.94978903 10.5949367,8.73037975 C10.3316456,8.51097047 10.0244726,8.32172996 9.67341772,8.16265823 C9.32236287,8.00358649 8.96033756,7.85274262 8.58734177,7.71012658 C8.29113924,7.60042194 8.02510548,7.49620253 7.78924051,7.39746835 C7.55337553,7.29873418 7.34767933,7.18902953 7.1721519,7.06835443 C6.99662447,6.94767933 6.86223629,6.81054852 6.76898734,6.65696203 C6.67573839,6.50337553 6.62911392,6.31139241 6.62911392,6.08101266 C6.62911392,5.66413502 6.78544304,5.34599156 7.09810127,5.12658228 C7.41075949,4.907173 7.86329114,4.79746835 8.4556962,4.79746835 C8.99324895,4.79746835 9.43755275,4.84409282 9.78860759,4.93734177 C10.1396624,5.03059072 10.4303797,5.12109705 10.6607595,5.20886076 L10.9405063,4.05696203 C10.7210971,3.96919832 10.4276371,3.88417722 10.0601266,3.80189873 C9.69261604,3.71962025 9.28945148,3.66751055 8.85063291,3.64556962 L8.85063291,2 L7.63291139,2 L7.63291139,3.69493671 C6.84303797,3.81561181 6.23966244,4.09535865 5.82278481,4.53417722 C5.40590718,4.97299578 5.19746835,5.54345991 5.19746835,6.24556962 C5.19746835,6.64050633 5.26877637,6.97236287 5.41139241,7.24113924 C5.55400844,7.50991561 5.73776371,7.74029536 5.96265823,7.93227848 C6.18755275,8.12426161 6.44535865,8.28607595 6.73607595,8.41772152 C7.02679325,8.54936709 7.32025316,8.67004219 7.6164557,8.77974684 C7.9236287,8.88945148 8.21983123,9.00189873 8.50506329,9.11708861 C8.79029536,9.23227848 9.04535865,9.36392405 9.27025316,9.51202532 C9.49514768,9.66012658 9.67341772,9.83016877 9.80506329,10.0221519 C9.93670886,10.214135 10.0025316,10.4472574 10.0025316,10.721519 C10.0025316,10.9080169 9.96962025,11.0808017 9.90379747,11.2398734 C9.83797468,11.3989452 9.72827004,11.5360759 9.57468354,11.6512658 C9.42109705,11.7664557 9.20991561,11.8542194 8.94113924,11.914557 C8.67236287,11.9748945 8.34050633,12.0050633 7.94556962,12.0050633 C7.33122363,12.0050633 6.82109705,11.9419832 6.41518987,11.8158228 C6.0092827,11.6896624 5.65822785,11.5552743 5.36202532,11.4126582 L5,12.5481013 C5.20843882,12.6687763 5.52658228,12.7949367 5.95443038,12.9265823 C6.38227848,13.0582278 6.94177215,13.1350211 7.63291139,13.156962 L7.63291139,15 L8.85063291,15 Z' id='$' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
@mixin vf-icon-linux-prompt($color) {
|
|
385
|
+
background-image: vf-icon-linux-url($color);
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
@mixin vf-icon-linux-prompt-themed {
|
|
389
|
+
@include vf-themed-icon($light-value: vf-icon-linux-url($colors--light-theme--icon), $dark-value: vf-icon-linux-url($colors--dark-theme--icon));
|
|
390
|
+
}
|
|
391
|
+
|
|
361
392
|
// SOCIAL ICONS
|
|
362
393
|
|
|
363
394
|
// currently only GitHub and Twitter/X icons need theming support
|
|
@@ -563,10 +594,6 @@
|
|
|
563
594
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.576.363l2.541 2.54-1.06 1.061-.81-.81V4.2a4.358 4.358 0 01-2.514 3.949l-.202.088a2.858 2.858 0 00-1.684 1.91 2.5 2.5 0 11-1.525-.055 4.359 4.359 0 012.442-3.156l.202-.088a2.858 2.858 0 001.775-2.455l.006-.193v-.888l-.65.651-1.061-1.06 1.71-1.712.001-.063.063-.001.766-.765zM8 11.5a1 1 0 100 2 1 1 0 000-2zM4 .363l2.54 2.54-1.06 1.061-.73-.73V4.2l.006.193a2.858 2.858 0 001.6 2.376l.377.167c.083.039.165.08.244.123l-.803 1.272-.103-.049-.307-.133a4.358 4.358 0 01-2.508-3.728l-.006-.22v-.968l-.73.73-1.06-1.06L4 .363z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
|
|
564
595
|
}
|
|
565
596
|
|
|
566
|
-
@mixin vf-icon-get-link($color) {
|
|
567
|
-
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.781 4.772c.976.683 1.5 1.77 1.508 2.876l-.065.105c-.317.457-.88.637-1.308.399a.831.831 0 01-.162-.117A2.036 2.036 0 005.177 6.38l-.091.121L2.832 9.72a2.036 2.036 0 003.243 2.456l.092-.121.114-.162a3.582 3.582 0 001.34.7l-.225.322a3.536 3.536 0 11-5.792-4.056L3.857 5.64a3.536 3.536 0 014.924-.868zm4.747-3.042a3.536 3.536 0 01.868 4.924l-2.253 3.218A3.536 3.536 0 015.71 7.865l.065-.105c.317-.458.88-.637 1.308-.4.06.033.113.073.162.117a2.036 2.036 0 003.577 1.656l.091-.121 2.254-3.218a2.036 2.036 0 00-3.243-2.457l-.092.122-.114.162a3.582 3.582 0 00-1.34-.701l.225-.322a3.536 3.536 0 014.924-.868z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
|
|
568
|
-
}
|
|
569
|
-
|
|
570
597
|
@mixin vf-icon-halfscreen-bar($color) {
|
|
571
598
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 9v5a1 1 0 01-1 1H2a1 1 0 01-1-1V9h14zm-3-8a3 3 0 012.995 2.824L15 4v3h-1.5V4l-.007-.144a1.5 1.5 0 00-1.349-1.35L12 2.5H4l-.144.007a1.5 1.5 0 00-1.35 1.349L2.5 4v3H1V4a3 3 0 012.824-2.995L4 1h8z' fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd'/%3E%3C/svg%3E");
|
|
572
599
|
}
|
|
@@ -771,10 +798,6 @@
|
|
|
771
798
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.734.289a1 1 0 01.429.429l6.631 12.823A1 1 0 0114.906 15H1.643a1 1 0 01-.888-1.46L7.386.719a1 1 0 011.348-.43zm-.46 1.976L2.464 13.5h11.62L8.274 2.265zm.5 8.022a.5.5 0 01.492.41l.008.09v1a.5.5 0 01-.41.492l-.09.008h-1a.5.5 0 01-.491-.41l-.009-.09v-1a.5.5 0 01.41-.492l.09-.008h1zm.5-4.68V8.98h-2V5.608h2z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
|
|
772
799
|
}
|
|
773
800
|
|
|
774
|
-
@mixin vf-icon-linux-prompt($color) {
|
|
775
|
-
background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='dollar-sign' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.85063291,15 L8.85063291,13.1075949 C9.73924051,12.9978903 10.3974684,12.7181434 10.8253165,12.2683544 C11.2531646,11.8185654 11.4670886,11.2700422 11.4670886,10.6227848 C11.4670886,10.1949367 11.3875528,9.82742616 11.228481,9.52025316 C11.0694092,9.21308017 10.8582278,8.94978903 10.5949367,8.73037975 C10.3316456,8.51097047 10.0244726,8.32172996 9.67341772,8.16265823 C9.32236287,8.00358649 8.96033756,7.85274262 8.58734177,7.71012658 C8.29113924,7.60042194 8.02510548,7.49620253 7.78924051,7.39746835 C7.55337553,7.29873418 7.34767933,7.18902953 7.1721519,7.06835443 C6.99662447,6.94767933 6.86223629,6.81054852 6.76898734,6.65696203 C6.67573839,6.50337553 6.62911392,6.31139241 6.62911392,6.08101266 C6.62911392,5.66413502 6.78544304,5.34599156 7.09810127,5.12658228 C7.41075949,4.907173 7.86329114,4.79746835 8.4556962,4.79746835 C8.99324895,4.79746835 9.43755275,4.84409282 9.78860759,4.93734177 C10.1396624,5.03059072 10.4303797,5.12109705 10.6607595,5.20886076 L10.9405063,4.05696203 C10.7210971,3.96919832 10.4276371,3.88417722 10.0601266,3.80189873 C9.69261604,3.71962025 9.28945148,3.66751055 8.85063291,3.64556962 L8.85063291,2 L7.63291139,2 L7.63291139,3.69493671 C6.84303797,3.81561181 6.23966244,4.09535865 5.82278481,4.53417722 C5.40590718,4.97299578 5.19746835,5.54345991 5.19746835,6.24556962 C5.19746835,6.64050633 5.26877637,6.97236287 5.41139241,7.24113924 C5.55400844,7.50991561 5.73776371,7.74029536 5.96265823,7.93227848 C6.18755275,8.12426161 6.44535865,8.28607595 6.73607595,8.41772152 C7.02679325,8.54936709 7.32025316,8.67004219 7.6164557,8.77974684 C7.9236287,8.88945148 8.21983123,9.00189873 8.50506329,9.11708861 C8.79029536,9.23227848 9.04535865,9.36392405 9.27025316,9.51202532 C9.49514768,9.66012658 9.67341772,9.83016877 9.80506329,10.0221519 C9.93670886,10.214135 10.0025316,10.4472574 10.0025316,10.721519 C10.0025316,10.9080169 9.96962025,11.0808017 9.90379747,11.2398734 C9.83797468,11.3989452 9.72827004,11.5360759 9.57468354,11.6512658 C9.42109705,11.7664557 9.20991561,11.8542194 8.94113924,11.914557 C8.67236287,11.9748945 8.34050633,12.0050633 7.94556962,12.0050633 C7.33122363,12.0050633 6.82109705,11.9419832 6.41518987,11.8158228 C6.0092827,11.6896624 5.65822785,11.5552743 5.36202532,11.4126582 L5,12.5481013 C5.20843882,12.6687763 5.52658228,12.7949367 5.95443038,12.9265823 C6.38227848,13.0582278 6.94177215,13.1350211 7.63291139,13.156962 L7.63291139,15 L8.85063291,15 Z' id='$' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
|
776
|
-
}
|
|
777
|
-
|
|
778
801
|
@mixin vf-icon-desktop($color) {
|
|
779
802
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='desktop-2'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M2.5 3.5H13.5V10.5H2.5L2.5 3.5ZM1 3.5C1 2.67157 1.67157 2 2.5 2H13.5C14.3284 2 15 2.67157 15 3.5V10.5C15 11.3284 14.3284 12 13.5 12H8.75V13.25H11V14.75H5V13.25H7.25V12H2.5C1.67157 12 1 11.3284 1 10.5V3.5Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
|
|
780
803
|
}
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
&.prolog,
|
|
14
14
|
&.doctype,
|
|
15
15
|
&.cdata {
|
|
16
|
-
color: $colors--
|
|
16
|
+
color: $colors--theme--text-muted;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
&.punctuation {
|
|
20
|
-
color: $colors--
|
|
20
|
+
color: $colors--theme--text-default;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&.namespace {
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
@import 'settings';
|
|
2
|
-
$active-background-opacity-percentage: $active-background-opacity-amount * 100%;
|
|
3
|
-
$hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
4
2
|
|
|
5
3
|
// Default button styling
|
|
6
4
|
@mixin vf-p-buttons {
|
|
@@ -16,44 +14,13 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
16
14
|
}
|
|
17
15
|
|
|
18
16
|
@mixin vf-button-plain {
|
|
19
|
-
%p-button-light {
|
|
20
|
-
@include vf-button-pattern();
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
%p-button-dark {
|
|
24
|
-
@include vf-button-pattern(
|
|
25
|
-
$button-background-color: $colors--dark-theme--background-default,
|
|
26
|
-
$button-text-color: $colors--dark-theme--text-default,
|
|
27
|
-
$button-disabled-background-color: $color-transparent,
|
|
28
|
-
$button-disabled-border-color: $colors--dark-theme--border-high-contrast,
|
|
29
|
-
$button-border-color: $colors--dark-theme--border-high-contrast,
|
|
30
|
-
$button-hover-background-color: $colors--dark-theme--background-hover,
|
|
31
|
-
$button-hover-border-color: $colors--dark-theme--border-high-contrast,
|
|
32
|
-
$button-active-background-color: $colors--dark-theme--background-active,
|
|
33
|
-
$button-active-border-color: $colors--dark-theme--border-high-contrast
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
17
|
.p-button {
|
|
38
18
|
@extend %vf-button-base;
|
|
39
|
-
|
|
40
|
-
// Theming
|
|
41
|
-
@if ($theme-default-p-button == 'dark') {
|
|
42
|
-
@extend %p-button-dark;
|
|
43
|
-
|
|
44
|
-
&.is-light {
|
|
45
|
-
@extend %p-button-light;
|
|
46
|
-
}
|
|
47
|
-
} @else {
|
|
48
|
-
@extend %p-button-light;
|
|
49
|
-
|
|
50
|
-
&.is-dark {
|
|
51
|
-
@extend %p-button-dark;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
19
|
+
@include vf-button-pattern;
|
|
54
20
|
}
|
|
55
21
|
}
|
|
56
22
|
|
|
23
|
+
// DEPRECATED: brand coloured button is deprecated, please use other type of button instead
|
|
57
24
|
@mixin vf-button-brand {
|
|
58
25
|
%p-button--brand-light {
|
|
59
26
|
@include vf-button-pattern(
|
|
@@ -106,158 +73,57 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
106
73
|
}
|
|
107
74
|
|
|
108
75
|
@mixin vf-button-positive {
|
|
109
|
-
%p-button--positive-light {
|
|
110
|
-
@include vf-button-pattern(
|
|
111
|
-
$button-background-color: $color-positive,
|
|
112
|
-
$button-hover-background-color: adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage),
|
|
113
|
-
$button-active-background-color: adjust-color($color-positive, $lightness: -$active-background-opacity-percentage),
|
|
114
|
-
$button-disabled-background-color: $color-positive,
|
|
115
|
-
$button-border-color: $color-positive,
|
|
116
|
-
$button-hover-border-color: adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage),
|
|
117
|
-
$button-active-border-color: adjust-color($color-positive, $lightness: -$active-background-opacity-percentage),
|
|
118
|
-
$button-disabled-border-color: $color-positive,
|
|
119
|
-
$button-text-color: vf-contrast-text-color($color-positive)
|
|
120
|
-
);
|
|
121
|
-
|
|
122
|
-
@include vf-focus($color-focus-positive);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
%p-button--positive-dark {
|
|
126
|
-
@include vf-button-pattern(
|
|
127
|
-
$button-background-color: $color-positive-dark,
|
|
128
|
-
$button-hover-background-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
|
|
129
|
-
$button-active-background-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
|
|
130
|
-
$button-disabled-background-color: $color-positive-dark,
|
|
131
|
-
$button-border-color: $color-positive-dark,
|
|
132
|
-
$button-hover-border-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
|
|
133
|
-
$button-active-border-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
|
|
134
|
-
$button-disabled-border-color: $color-positive-dark,
|
|
135
|
-
$button-text-color: vf-contrast-text-color($color-positive-dark)
|
|
136
|
-
);
|
|
137
|
-
|
|
138
|
-
@include vf-focus($color-focus-positive);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
76
|
.p-button--positive {
|
|
142
77
|
@extend %vf-button-base;
|
|
143
|
-
|
|
144
|
-
// Theming
|
|
145
|
-
@if ($theme-default-p-button == 'dark') {
|
|
146
|
-
@extend %p-button--positive-dark;
|
|
147
|
-
|
|
148
|
-
&.is-light {
|
|
149
|
-
@extend %p-button--positive-light;
|
|
150
|
-
}
|
|
151
|
-
} @else {
|
|
152
|
-
@extend %p-button--positive-light;
|
|
153
|
-
|
|
154
|
-
&.is-dark {
|
|
155
|
-
@extend %p-button--positive-dark;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
|
|
159
78
|
@extend %vf-button-white-success-icon;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
79
|
|
|
163
|
-
@mixin vf-button-negative {
|
|
164
|
-
%p-button--negative-light {
|
|
165
80
|
@include vf-button-pattern(
|
|
166
|
-
$button-background-color: $
|
|
167
|
-
$button-hover-background-color:
|
|
168
|
-
$button-active-background-color:
|
|
169
|
-
$button-disabled-background-color: $
|
|
170
|
-
$button-border-color: $
|
|
171
|
-
$button-hover-border-color:
|
|
172
|
-
$button-active-border-color:
|
|
173
|
-
$button-disabled-border-color: $
|
|
174
|
-
$button-text-color:
|
|
81
|
+
$button-background-color: $colors--theme--button-positive-default,
|
|
82
|
+
$button-hover-background-color: $colors--theme--button-positive-hover,
|
|
83
|
+
$button-active-background-color: $colors--theme--button-positive-active,
|
|
84
|
+
$button-disabled-background-color: $colors--theme--button-positive-default,
|
|
85
|
+
$button-border-color: $colors--theme--button-positive-default,
|
|
86
|
+
$button-hover-border-color: $colors--theme--button-positive-hover,
|
|
87
|
+
$button-active-border-color: $colors--theme--button-positive-active,
|
|
88
|
+
$button-disabled-border-color: $colors--theme--button-positive-default,
|
|
89
|
+
$button-text-color: $colors--theme--button-positive-text
|
|
175
90
|
);
|
|
176
|
-
|
|
177
|
-
@include vf-focus($color-focus-negative);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
%p-button--negative-dark {
|
|
181
|
-
@include vf-button-pattern(
|
|
182
|
-
$button-background-color: $color-negative-dark,
|
|
183
|
-
$button-hover-background-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
|
|
184
|
-
$button-active-background-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
|
|
185
|
-
$button-disabled-background-color: $color-negative-dark,
|
|
186
|
-
$button-border-color: $color-negative-dark,
|
|
187
|
-
$button-hover-border-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
|
|
188
|
-
$button-active-border-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
|
|
189
|
-
$button-disabled-border-color: $color-negative-dark,
|
|
190
|
-
$button-text-color: vf-contrast-text-color($color-negative-dark)
|
|
191
|
-
);
|
|
192
|
-
|
|
193
|
-
@include vf-focus($color-focus-negative);
|
|
91
|
+
@include vf-focus($color-focus-positive);
|
|
194
92
|
}
|
|
93
|
+
}
|
|
195
94
|
|
|
95
|
+
@mixin vf-button-negative {
|
|
196
96
|
.p-button--negative {
|
|
197
97
|
@extend %vf-button-base;
|
|
198
|
-
|
|
199
|
-
// Theming
|
|
200
|
-
@if ($theme-default-p-button == 'dark') {
|
|
201
|
-
@extend %p-button--negative-dark;
|
|
202
|
-
|
|
203
|
-
&.is-light {
|
|
204
|
-
@extend %p-button--negative-light;
|
|
205
|
-
}
|
|
206
|
-
} @else {
|
|
207
|
-
@extend %p-button--negative-light;
|
|
208
|
-
|
|
209
|
-
&.is-dark {
|
|
210
|
-
@extend %p-button--negative-dark;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
|
|
214
98
|
@extend %vf-button-white-success-icon;
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
99
|
|
|
218
|
-
@mixin vf-button-base {
|
|
219
|
-
%p-button--base-light {
|
|
220
100
|
@include vf-button-pattern(
|
|
221
|
-
$button-background-color: $
|
|
222
|
-
$button-
|
|
223
|
-
$button-
|
|
224
|
-
$button-
|
|
225
|
-
$button-
|
|
101
|
+
$button-background-color: $colors--theme--button-negative-default,
|
|
102
|
+
$button-hover-background-color: $colors--theme--button-negative-hover,
|
|
103
|
+
$button-active-background-color: $colors--theme--button-negative-active,
|
|
104
|
+
$button-disabled-background-color: $colors--theme--button-negative-default,
|
|
105
|
+
$button-border-color: $colors--theme--button-negative-default,
|
|
106
|
+
$button-hover-border-color: $colors--theme--button-negative-hover,
|
|
107
|
+
$button-active-border-color: $colors--theme--button-negative-active,
|
|
108
|
+
$button-disabled-border-color: $colors--theme--button-negative-default,
|
|
109
|
+
$button-text-color: $colors--theme--button-negative-text
|
|
226
110
|
);
|
|
227
111
|
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@mixin vf-button-base {
|
|
115
|
+
.p-button--base {
|
|
116
|
+
@extend %vf-button-base;
|
|
228
117
|
|
|
229
|
-
|
|
118
|
+
// override default button styles with transparent background and border
|
|
230
119
|
@include vf-button-pattern(
|
|
231
120
|
$button-background-color: $color-transparent,
|
|
232
|
-
$button-text-color: $colors--dark-theme--text-default,
|
|
233
|
-
$button-disabled-background-color: $color-transparent,
|
|
234
|
-
$button-hover-background-color: $colors--dark-theme--background-hover,
|
|
235
|
-
$button-active-background-color: $colors--dark-theme--background-active,
|
|
236
121
|
$button-border-color: $color-transparent,
|
|
237
122
|
$button-hover-border-color: $color-transparent,
|
|
238
123
|
$button-active-border-color: $color-transparent,
|
|
239
124
|
$button-disabled-border-color: $color-transparent
|
|
240
125
|
);
|
|
241
126
|
}
|
|
242
|
-
|
|
243
|
-
.p-button--base {
|
|
244
|
-
@extend %vf-button-base;
|
|
245
|
-
|
|
246
|
-
// Theming
|
|
247
|
-
@if ($theme-default-p-button == 'dark') {
|
|
248
|
-
@extend %p-button--base-dark;
|
|
249
|
-
|
|
250
|
-
&.is-light {
|
|
251
|
-
@extend %p-button--base-light;
|
|
252
|
-
}
|
|
253
|
-
} @else {
|
|
254
|
-
@extend %p-button--base-light;
|
|
255
|
-
|
|
256
|
-
&.is-dark {
|
|
257
|
-
@extend %p-button--base-dark;
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
127
|
}
|
|
262
128
|
|
|
263
129
|
@mixin vf-button-link {
|
|
@@ -272,6 +138,12 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
272
138
|
padding-left: 0;
|
|
273
139
|
padding-right: 0;
|
|
274
140
|
|
|
141
|
+
// stylelint-disable-next-line selector-max-type -- buttons should not affect paragraph spacing
|
|
142
|
+
p & {
|
|
143
|
+
margin-bottom: 0;
|
|
144
|
+
padding-top: 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
275
147
|
&:hover {
|
|
276
148
|
background: transparent;
|
|
277
149
|
}
|
|
@@ -279,12 +151,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
279
151
|
&.u-no-margin--bottom {
|
|
280
152
|
@extend %u-no-margin--bottom--default-text;
|
|
281
153
|
}
|
|
282
|
-
|
|
283
|
-
// stylelint-disable-next-line selector-max-type -- buttons should not affect paragraph spacing
|
|
284
|
-
p & {
|
|
285
|
-
margin-bottom: 0;
|
|
286
|
-
padding-top: 0;
|
|
287
|
-
}
|
|
288
154
|
}
|
|
289
155
|
}
|
|
290
156
|
|
|
@@ -46,7 +46,6 @@
|
|
|
46
46
|
|
|
47
47
|
@import 'settings';
|
|
48
48
|
|
|
49
|
-
$color-snippet-heading-bg: rgba($color-x-dark, 0.08);
|
|
50
49
|
$code-snippet-header-v-spacing: $spv--small;
|
|
51
50
|
|
|
52
51
|
@mixin vf-p-code-snippet {
|
|
@@ -54,7 +53,7 @@ $code-snippet-header-v-spacing: $spv--small;
|
|
|
54
53
|
margin-bottom: $spv--x-large;
|
|
55
54
|
|
|
56
55
|
&.is-bordered {
|
|
57
|
-
border: 1px solid $colors--
|
|
56
|
+
border: 1px solid $colors--theme--border-low-contrast;
|
|
58
57
|
}
|
|
59
58
|
|
|
60
59
|
.p-code-snippet__block,
|
|
@@ -74,13 +73,13 @@ $code-snippet-header-v-spacing: $spv--small;
|
|
|
74
73
|
position: relative;
|
|
75
74
|
|
|
76
75
|
&.is-windows-prompt::before {
|
|
77
|
-
@include vf-icon-chevron
|
|
76
|
+
@include vf-icon-chevron-themed;
|
|
78
77
|
|
|
79
78
|
transform: rotate(270deg);
|
|
80
79
|
}
|
|
81
80
|
|
|
82
81
|
&.is-url::before {
|
|
83
|
-
@include vf-icon-get-link
|
|
82
|
+
@include vf-icon-get-link-themed;
|
|
84
83
|
}
|
|
85
84
|
}
|
|
86
85
|
|
|
@@ -94,7 +93,7 @@ $code-snippet-header-v-spacing: $spv--small;
|
|
|
94
93
|
|
|
95
94
|
.p-code-snippet__header {
|
|
96
95
|
align-items: flex-start;
|
|
97
|
-
background-color: $
|
|
96
|
+
background-color: $colors--theme--background-active;
|
|
98
97
|
display: flex;
|
|
99
98
|
justify-content: space-between;
|
|
100
99
|
padding-left: $sph--large;
|
|
@@ -115,7 +114,7 @@ $code-snippet-header-v-spacing: $spv--small;
|
|
|
115
114
|
.p-code-snippet__dropdown {
|
|
116
115
|
background-color: $color-transparent;
|
|
117
116
|
border: 0;
|
|
118
|
-
color: $colors--
|
|
117
|
+
color: $colors--theme--text-default;
|
|
119
118
|
margin-bottom: 0;
|
|
120
119
|
margin-left: $sph--small;
|
|
121
120
|
min-width: min-content;
|
|
@@ -137,7 +136,7 @@ $code-snippet-header-v-spacing: $spv--small;
|
|
|
137
136
|
}
|
|
138
137
|
|
|
139
138
|
.p-code-snippet__dropdown + .p-code-snippet__dropdown {
|
|
140
|
-
border-left: 1px solid $colors--
|
|
139
|
+
border-left: 1px solid $colors--theme--border-default;
|
|
141
140
|
}
|
|
142
141
|
|
|
143
142
|
.p-code-snippet__header.is-stacked {
|
|
@@ -154,7 +153,7 @@ $code-snippet-header-v-spacing: $spv--small;
|
|
|
154
153
|
}
|
|
155
154
|
|
|
156
155
|
.p-code-snippet__title + .p-code-snippet__dropdowns {
|
|
157
|
-
border-top: 1px solid $colors--
|
|
156
|
+
border-top: 1px solid $colors--theme--border-default;
|
|
158
157
|
}
|
|
159
158
|
}
|
|
160
159
|
|
|
@@ -3,14 +3,24 @@ $list-status-icon-height: $default-icon-size;
|
|
|
3
3
|
$list-step-bullet-margin: $sph--x-large;
|
|
4
4
|
|
|
5
5
|
@mixin vf-p-list-placeholders {
|
|
6
|
+
// container for stepped lists (`ol`)
|
|
7
|
+
// defines the layout and resets the native browser counter
|
|
6
8
|
%numbered-step-container {
|
|
7
|
-
counter-reset:
|
|
9
|
+
counter-reset: list-item;
|
|
8
10
|
display: flex;
|
|
9
11
|
flex-direction: column;
|
|
10
12
|
list-style: none;
|
|
11
13
|
padding-left: 0;
|
|
12
14
|
}
|
|
13
15
|
|
|
16
|
+
// list item for stepped lists (`li`)
|
|
17
|
+
// increments the default browser counter
|
|
18
|
+
%numbered-step-item {
|
|
19
|
+
counter-increment: list-item;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// title for stepped lists
|
|
23
|
+
// displays the title and step counter
|
|
14
24
|
%numbered-step-title {
|
|
15
25
|
list-style: none;
|
|
16
26
|
margin-left: 0;
|
|
@@ -18,8 +28,7 @@ $list-step-bullet-margin: $sph--x-large;
|
|
|
18
28
|
position: relative;
|
|
19
29
|
|
|
20
30
|
&::before {
|
|
21
|
-
content: counter(
|
|
22
|
-
counter-increment: li;
|
|
31
|
+
content: counter(list-item) '.';
|
|
23
32
|
display: block;
|
|
24
33
|
height: map-get($line-heights, default-text);
|
|
25
34
|
left: 0;
|
|
@@ -30,6 +39,7 @@ $list-step-bullet-margin: $sph--x-large;
|
|
|
30
39
|
}
|
|
31
40
|
}
|
|
32
41
|
|
|
42
|
+
// used with .p-list--nested-counter
|
|
33
43
|
%nested-counter {
|
|
34
44
|
// Counter is named and it will be reset for each "ol" element.
|
|
35
45
|
counter-reset: list-item;
|
|
@@ -198,7 +208,7 @@ $list-step-bullet-margin: $sph--x-large;
|
|
|
198
208
|
|
|
199
209
|
&::before {
|
|
200
210
|
@extend %vf-list-item-state-base;
|
|
201
|
-
@include vf-icon-success-grey
|
|
211
|
+
@include vf-icon-success-grey-themed;
|
|
202
212
|
}
|
|
203
213
|
}
|
|
204
214
|
|
|
@@ -207,7 +217,7 @@ $list-step-bullet-margin: $sph--x-large;
|
|
|
207
217
|
|
|
208
218
|
&::before {
|
|
209
219
|
@extend %vf-list-item-state-base;
|
|
210
|
-
@include vf-icon-error-grey
|
|
220
|
+
@include vf-icon-error-grey-themed;
|
|
211
221
|
}
|
|
212
222
|
}
|
|
213
223
|
|
|
@@ -283,6 +293,8 @@ $list-step-bullet-margin: $sph--x-large;
|
|
|
283
293
|
}
|
|
284
294
|
|
|
285
295
|
.p-stepped-list__item {
|
|
296
|
+
@extend %numbered-step-item;
|
|
297
|
+
|
|
286
298
|
// override unecessary col-8 class in markup; layout is handled with css below
|
|
287
299
|
float: none;
|
|
288
300
|
margin-left: 0;
|
|
@@ -356,24 +368,26 @@ $list-step-bullet-margin: $sph--x-large;
|
|
|
356
368
|
@mixin vf-p-stepped-list-detailed {
|
|
357
369
|
.p-stepped-list--detailed {
|
|
358
370
|
@extend %numbered-step-container;
|
|
359
|
-
|
|
360
371
|
margin-left: auto;
|
|
361
372
|
|
|
362
373
|
@supports (display: grid) {
|
|
363
374
|
.p-stepped-list__content {
|
|
364
|
-
@media (min-width: $threshold-6-
|
|
375
|
+
@media (min-width: $threshold-4-6-col) {
|
|
365
376
|
grid-column-end: span 6;
|
|
366
377
|
margin-top: 0;
|
|
367
378
|
}
|
|
368
379
|
}
|
|
369
380
|
|
|
370
381
|
.p-stepped-list__title {
|
|
371
|
-
|
|
372
|
-
|
|
382
|
+
@media (min-width: $threshold-4-6-col) {
|
|
383
|
+
grid-column-end: span 6;
|
|
384
|
+
margin-top: 0;
|
|
385
|
+
}
|
|
373
386
|
}
|
|
374
387
|
}
|
|
375
388
|
|
|
376
389
|
.p-stepped-list__item {
|
|
390
|
+
@extend %numbered-step-item;
|
|
377
391
|
@extend %vf-row;
|
|
378
392
|
@include vf-b-row-reset;
|
|
379
393
|
|
|
@@ -215,7 +215,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
|
|
|
215
215
|
.p-notification {
|
|
216
216
|
@extend %vf-notification;
|
|
217
217
|
@include vf-highlight-bar($colors--theme--border-information, left, true);
|
|
218
|
-
@include vf-icon-info-themed;
|
|
218
|
+
@include vf-icon-info-coloured-themed;
|
|
219
219
|
}
|
|
220
220
|
}
|
|
221
221
|
|
|
@@ -251,6 +251,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
|
|
|
251
251
|
.p-notification--information {
|
|
252
252
|
@extend %vf-notification;
|
|
253
253
|
@include vf-highlight-bar($colors--theme--border-information, left, true);
|
|
254
|
-
@include vf-icon-info-themed;
|
|
254
|
+
@include vf-icon-info-coloured-themed;
|
|
255
255
|
}
|
|
256
256
|
}
|
|
@@ -204,13 +204,11 @@
|
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
-
// toggle to open side navigation is supposed to be in main content (on light background)
|
|
208
|
-
// it's using default 'neutral' button look regardless of the theme used by side navigation
|
|
209
207
|
.p-side-navigation__toggle {
|
|
210
208
|
@include vf-button-pattern;
|
|
211
209
|
|
|
212
210
|
&::before {
|
|
213
|
-
@include vf-icon-chevron;
|
|
211
|
+
@include vf-icon-chevron-themed;
|
|
214
212
|
transform: rotate(-90deg);
|
|
215
213
|
}
|
|
216
214
|
}
|
|
@@ -358,6 +356,7 @@
|
|
|
358
356
|
display: block;
|
|
359
357
|
font-size: map-get($base-font-sizes, base);
|
|
360
358
|
margin: 0;
|
|
359
|
+
max-width: none;
|
|
361
360
|
}
|
|
362
361
|
|
|
363
362
|
%side-navigation__link {
|
|
@@ -509,6 +508,22 @@
|
|
|
509
508
|
@include vf-side-navigation-spacing-left($multiplier: 2, $offset: $sp-sidenav--accordion-offset);
|
|
510
509
|
}
|
|
511
510
|
}
|
|
511
|
+
|
|
512
|
+
// nested 4th level of navigation
|
|
513
|
+
.p-side-navigation__item--title .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item &,
|
|
514
|
+
.p-side-navigation__item .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
|
|
515
|
+
@include vf-side-navigation-spacing-left($multiplier: 4);
|
|
516
|
+
|
|
517
|
+
// add spacing for variant with right side icons
|
|
518
|
+
.p-side-navigation--icons & {
|
|
519
|
+
@include vf-side-navigation-spacing-left($multiplier: 5, $offset: $sp-sidenav--icon-width);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
// add spacing for variant with accordions
|
|
523
|
+
.p-side-navigation--accordion & {
|
|
524
|
+
@include vf-side-navigation-spacing-left($multiplier: 3, $offset: $sp-sidenav--accordion-offset);
|
|
525
|
+
}
|
|
526
|
+
}
|
|
512
527
|
}
|
|
513
528
|
|
|
514
529
|
.p-side-navigation--icons {
|
|
@@ -24,8 +24,9 @@
|
|
|
24
24
|
width: 100%;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
// tbody selector needed to override the default table styles
|
|
28
|
+
tbody tr {
|
|
29
|
+
border: 1px solid $colors--theme--border-default;
|
|
29
30
|
display: block;
|
|
30
31
|
margin-bottom: $spv--x-large;
|
|
31
32
|
padding: 0 $sph--large;
|
|
@@ -50,6 +50,9 @@ $active-background-opacity-amount: 0.08;
|
|
|
50
50
|
$muted-text-opacity-amount: 0.6;
|
|
51
51
|
$inactive-text-opacity-amount: 0.75;
|
|
52
52
|
|
|
53
|
+
$active-background-opacity-percentage: $active-background-opacity-amount * 100%;
|
|
54
|
+
$hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
55
|
+
|
|
53
56
|
// NON-SEMANTIC COLOURS
|
|
54
57
|
$color-label-validated: #006b75;
|
|
55
58
|
$color-code-background: rgba($color-x-dark, 0.03);
|
|
@@ -111,6 +114,7 @@ $colors--light-theme--link-visited: $color-link-visited !default;
|
|
|
111
114
|
|
|
112
115
|
$colors--light-theme--background-default: #fff !default;
|
|
113
116
|
$colors--light-theme--background-alt: #f7f7f7 !default;
|
|
117
|
+
$colors--light-theme--background-code: $color-code-background !default;
|
|
114
118
|
$colors--light-theme--background-inputs: adjust-color($color-x-dark, $lightness: 100% * (1 - $input-background-opacity-amount)) !default;
|
|
115
119
|
$colors--light-theme--background-active: adjust-color($color-x-dark, $lightness: 100% * (1 - $active-background-opacity-amount)) !default;
|
|
116
120
|
$colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - $hover-background-opacity-amount)) !default;
|
|
@@ -122,8 +126,6 @@ $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
|
|
|
122
126
|
|
|
123
127
|
$colors--light-theme--icon: $colors--light-theme--text-default !default;
|
|
124
128
|
|
|
125
|
-
$colors--light-theme--icon: $colors--light-theme--text-default !default;
|
|
126
|
-
|
|
127
129
|
$colors-light-theme--tinted-backgrounds: (
|
|
128
130
|
neutral: (
|
|
129
131
|
default: #f2f2f2,
|
|
@@ -171,6 +173,7 @@ $colors--dark-theme--link-visited: $color-link-visited-dark !default;
|
|
|
171
173
|
|
|
172
174
|
$colors--dark-theme--background-default: #262626 !default;
|
|
173
175
|
$colors--dark-theme--background-alt: #2d2d2d !default;
|
|
176
|
+
$colors--dark-theme--background-code: $color-code-background-dark !default;
|
|
174
177
|
$colors--dark-theme--background-inputs: rgba($colors--dark-theme--text-default, $input-background-opacity-amount) !default;
|
|
175
178
|
$colors--dark-theme--background-active: rgba($colors--dark-theme--text-default, $active-background-opacity-amount) !default;
|
|
176
179
|
$colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
|
|
@@ -182,8 +185,6 @@ $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default
|
|
|
182
185
|
|
|
183
186
|
$colors--dark-theme--icon: $colors--dark-theme--text-default !default;
|
|
184
187
|
|
|
185
|
-
$colors--dark-theme--icon: $colors--dark-theme--text-default !default;
|
|
186
|
-
|
|
187
188
|
$colors-dark-theme--tinted-backgrounds: (
|
|
188
189
|
neutral: (
|
|
189
190
|
default: rgba(255, 255, 255, 0.15),
|
|
@@ -238,6 +239,7 @@ $colors--theme--link-visited: var(--vf-color-link-visited);
|
|
|
238
239
|
|
|
239
240
|
$colors--theme--background-default: var(--vf-color-background-default);
|
|
240
241
|
$colors--theme--background-alt: var(--vf-color-background-alt);
|
|
242
|
+
$colors--theme--background-code: var(--vf-color-background-code);
|
|
241
243
|
$colors--theme--background-inputs: var(--vf-color-background-inputs);
|
|
242
244
|
$colors--theme--background-active: var(--vf-color-background-active);
|
|
243
245
|
$colors--theme--background-hover: var(--vf-color-background-hover);
|
|
@@ -269,6 +271,16 @@ $colors--theme--background-information-default: var(--vf-color-background-inform
|
|
|
269
271
|
$colors--theme--background-information-hover: var(--vf-color-background-information-hover);
|
|
270
272
|
$colors--theme--background-information-active: var(--vf-color-background-information-active);
|
|
271
273
|
|
|
274
|
+
$colors--theme--button-positive-default: var(--vf-color-button-positive-default);
|
|
275
|
+
$colors--theme--button-positive-hover: var(--vf-color-button-positive-hover);
|
|
276
|
+
$colors--theme--button-positive-active: var(--vf-color-button-positive-active);
|
|
277
|
+
$colors--theme--button-positive-text: var(--vf-color-button-positive-text);
|
|
278
|
+
|
|
279
|
+
$colors--theme--button-negative-default: var(--vf-color-button-negative-default);
|
|
280
|
+
$colors--theme--button-negative-hover: var(--vf-color-button-negative-hover);
|
|
281
|
+
$colors--theme--button-negative-active: var(--vf-color-button-negative-active);
|
|
282
|
+
$colors--theme--button-negative-text: var(--vf-color-button-negative-text);
|
|
283
|
+
|
|
272
284
|
// Theme colors exposed as CSS custom properties
|
|
273
285
|
@mixin vf-theme-light--colors {
|
|
274
286
|
// SCSS variables need to be interpolated to work in CSS custom properties
|
|
@@ -281,6 +293,7 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
281
293
|
|
|
282
294
|
--vf-color-background-default: #{$colors--light-theme--background-default};
|
|
283
295
|
--vf-color-background-alt: #{$colors--light-theme--background-alt};
|
|
296
|
+
--vf-color-background-code: #{$colors--light-theme--background-code};
|
|
284
297
|
--vf-color-background-inputs: #{$colors--light-theme--background-inputs};
|
|
285
298
|
--vf-color-background-active: #{$colors--light-theme--background-active};
|
|
286
299
|
--vf-color-background-hover: #{$colors--light-theme--background-hover};
|
|
@@ -311,6 +324,16 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
311
324
|
--vf-color-background-information-default: #{map-get($colors-light-theme--tinted-backgrounds, information, default)};
|
|
312
325
|
--vf-color-background-information-hover: #{map-get($colors-light-theme--tinted-backgrounds, information, 'hover')};
|
|
313
326
|
--vf-color-background-information-active: #{map-get($colors-light-theme--tinted-backgrounds, information, active)};
|
|
327
|
+
|
|
328
|
+
--vf-color-button-positive-default: #{$color-positive};
|
|
329
|
+
--vf-color-button-positive-hover: #{adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage)};
|
|
330
|
+
--vf-color-button-positive-active: #{adjust-color($color-positive, $lightness: -$active-background-opacity-percentage)};
|
|
331
|
+
--vf-color-button-positive-text: #{vf-contrast-text-color($color-positive)};
|
|
332
|
+
|
|
333
|
+
--vf-color-button-negative-default: #{$color-negative};
|
|
334
|
+
--vf-color-button-negative-hover: #{adjust-color($color-negative, $lightness: -$hover-background-opacity-percentage)};
|
|
335
|
+
--vf-color-button-negative-active: #{adjust-color($color-negative, $lightness: -$active-background-opacity-percentage)};
|
|
336
|
+
--vf-color-button-negative-text: #{vf-contrast-text-color($color-negative)};
|
|
314
337
|
}
|
|
315
338
|
|
|
316
339
|
@mixin vf-theme-dark--colors {
|
|
@@ -324,6 +347,7 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
324
347
|
|
|
325
348
|
--vf-color-background-default: #{$colors--dark-theme--background-default};
|
|
326
349
|
--vf-color-background-alt: #{$colors--dark-theme--background-alt};
|
|
350
|
+
--vf-color-background-code: #{$colors--dark-theme--background-code};
|
|
327
351
|
--vf-color-background-inputs: #{$colors--dark-theme--background-inputs};
|
|
328
352
|
--vf-color-background-active: #{$colors--dark-theme--background-active};
|
|
329
353
|
--vf-color-background-hover: #{$colors--dark-theme--background-hover};
|
|
@@ -354,6 +378,16 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
354
378
|
--vf-color-background-information-default: #{map-get($colors-dark-theme--tinted-backgrounds, information, default)};
|
|
355
379
|
--vf-color-background-information-hover: #{map-get($colors-dark-theme--tinted-backgrounds, information, hover)};
|
|
356
380
|
--vf-color-background-information-active: #{map-get($colors-dark-theme--tinted-backgrounds, information, active)};
|
|
381
|
+
|
|
382
|
+
--vf-color-button-positive-default: #{$color-positive-dark};
|
|
383
|
+
--vf-color-button-positive-hover: #{adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage)};
|
|
384
|
+
--vf-color-button-positive-active: #{adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage)};
|
|
385
|
+
--vf-color-button-positive-text: #{vf-contrast-text-color($color-positive-dark)};
|
|
386
|
+
|
|
387
|
+
--vf-color-button-negative-default: #{$color-negative-dark};
|
|
388
|
+
--vf-color-button-negative-hover: #{adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage)};
|
|
389
|
+
--vf-color-button-negative-active: #{adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage)};
|
|
390
|
+
--vf-color-button-negative-text: #{vf-contrast-text-color($color-negative-dark)};
|
|
357
391
|
}
|
|
358
392
|
|
|
359
393
|
@mixin vf-theme-paper--colors {
|
|
@@ -37,8 +37,16 @@
|
|
|
37
37
|
|
|
38
38
|
.u-baseline-grid__toggle {
|
|
39
39
|
bottom: $spv--x-large;
|
|
40
|
+
color: $colors--light-theme--text-default; // Force light theme colour because of baseline grid background
|
|
40
41
|
position: fixed;
|
|
41
42
|
right: $sp-unit * 3;
|
|
42
43
|
z-index: 201;
|
|
43
44
|
}
|
|
45
|
+
|
|
46
|
+
// hide the theme toggle in Percy
|
|
47
|
+
@media only percy {
|
|
48
|
+
.u-baseline-grid__toggle {
|
|
49
|
+
visibility: hidden !important;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
44
52
|
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@import 'settings';
|
|
2
|
+
|
|
3
|
+
@mixin vf-u-theme-toggle {
|
|
4
|
+
.u-theme-toggle {
|
|
5
|
+
bottom: $spv--x-large;
|
|
6
|
+
position: fixed;
|
|
7
|
+
right: $sp-unit * 30;
|
|
8
|
+
z-index: 100;
|
|
9
|
+
|
|
10
|
+
.u-theme-toggle__button {
|
|
11
|
+
margin: 0;
|
|
12
|
+
|
|
13
|
+
&:not(:last-child) {
|
|
14
|
+
border-right: 0;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.u-theme-toggle__dark {
|
|
19
|
+
background-color: $colors--dark-theme--background-default;
|
|
20
|
+
color: $colors--dark-theme--text-default;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.u-theme-toggle__light {
|
|
24
|
+
background-color: $colors--light-theme--background-default;
|
|
25
|
+
color: $colors--light-theme--text-default;
|
|
26
|
+
}
|
|
27
|
+
.u-theme-toggle__paper {
|
|
28
|
+
background-color: $color-paper;
|
|
29
|
+
color: $color-x-dark;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// hide the theme toggle in Percy
|
|
34
|
+
@media only percy {
|
|
35
|
+
.u-theme-toggle {
|
|
36
|
+
visibility: hidden !important;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
package/scss/_vanilla.scss
CHANGED
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
@import 'patterns_lists';
|
|
28
28
|
@import 'patterns_logo-section';
|
|
29
29
|
@import 'patterns_matrix';
|
|
30
|
+
@import 'patterns_media-container';
|
|
30
31
|
@import 'patterns_media-object';
|
|
31
32
|
@import 'patterns_modal';
|
|
32
33
|
@import 'patterns_muted-heading';
|
|
@@ -87,6 +88,7 @@
|
|
|
87
88
|
@import 'utilities_no-print';
|
|
88
89
|
@import 'utilities_text-max-width';
|
|
89
90
|
@import 'utilities_text-figures';
|
|
91
|
+
@import 'utilities_theme-toggle';
|
|
90
92
|
|
|
91
93
|
// Include all the CSS
|
|
92
94
|
@mixin vanilla {
|
|
@@ -119,6 +121,7 @@
|
|
|
119
121
|
@include vf-p-lists;
|
|
120
122
|
@include vf-p-logo-section;
|
|
121
123
|
@include vf-p-matrix;
|
|
124
|
+
@include vf-p-media-container;
|
|
122
125
|
@include vf-p-media-object;
|
|
123
126
|
@include vf-p-modal;
|
|
124
127
|
@include vf-p-muted-heading;
|
|
@@ -178,4 +181,5 @@
|
|
|
178
181
|
@include vf-u-no-print;
|
|
179
182
|
@include vf-u-text-max-width;
|
|
180
183
|
@include vf-u-text-figures;
|
|
184
|
+
@include vf-u-theme-toggle;
|
|
181
185
|
}
|