vanilla-framework 4.8.0 → 4.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 +27 -9
- package/scss/_base_syntax-highlighting.scss +2 -2
- package/scss/_patterns_buttons.scss +35 -167
- 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_side-navigation.scss +18 -3
- package/scss/_settings_colors.scss +35 -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.0",
|
|
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;
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
}
|
|
287
287
|
|
|
288
288
|
@mixin vf-icon-success-grey($color) {
|
|
289
|
-
background-image: vf-icon-success-url($color);
|
|
289
|
+
background-image: vf-icon-success-grey-url($color);
|
|
290
290
|
}
|
|
291
291
|
|
|
292
292
|
@mixin vf-icon-success-grey-themed {
|
|
@@ -358,6 +358,32 @@
|
|
|
358
358
|
@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
359
|
}
|
|
360
360
|
|
|
361
|
+
// get-link
|
|
362
|
+
@function vf-icon-get-link-url($color) {
|
|
363
|
+
@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");
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
@mixin vf-icon-get-link($color) {
|
|
367
|
+
background-image: vf-icon-chevron-url($color);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
@mixin vf-icon-get-link-themed {
|
|
371
|
+
@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));
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
// linux-prompt
|
|
375
|
+
@function vf-icon-linux-url($color) {
|
|
376
|
+
@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");
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
@mixin vf-icon-linux-prompt($color) {
|
|
380
|
+
background-image: vf-icon-linux-url($color);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
@mixin vf-icon-linux-prompt-themed {
|
|
384
|
+
@include vf-themed-icon($light-value: vf-icon-linux-url($colors--light-theme--icon), $dark-value: vf-icon-linux-url($colors--dark-theme--icon));
|
|
385
|
+
}
|
|
386
|
+
|
|
361
387
|
// SOCIAL ICONS
|
|
362
388
|
|
|
363
389
|
// currently only GitHub and Twitter/X icons need theming support
|
|
@@ -563,10 +589,6 @@
|
|
|
563
589
|
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
590
|
}
|
|
565
591
|
|
|
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
592
|
@mixin vf-icon-halfscreen-bar($color) {
|
|
571
593
|
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
594
|
}
|
|
@@ -771,10 +793,6 @@
|
|
|
771
793
|
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
794
|
}
|
|
773
795
|
|
|
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
796
|
@mixin vf-icon-desktop($color) {
|
|
779
797
|
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
798
|
}
|
|
@@ -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 {
|
|
@@ -16,44 +16,13 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
@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
19
|
.p-button {
|
|
38
20
|
@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
|
-
}
|
|
21
|
+
@include vf-button-pattern;
|
|
54
22
|
}
|
|
55
23
|
}
|
|
56
24
|
|
|
25
|
+
// DEPRECATED: brand coloured button is deprecated, please use other type of button instead
|
|
57
26
|
@mixin vf-button-brand {
|
|
58
27
|
%p-button--brand-light {
|
|
59
28
|
@include vf-button-pattern(
|
|
@@ -106,158 +75,57 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
106
75
|
}
|
|
107
76
|
|
|
108
77
|
@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
78
|
.p-button--positive {
|
|
142
79
|
@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
80
|
@extend %vf-button-white-success-icon;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
81
|
|
|
163
|
-
@mixin vf-button-negative {
|
|
164
|
-
%p-button--negative-light {
|
|
165
82
|
@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:
|
|
83
|
+
$button-background-color: $colors--theme--button-positive-default,
|
|
84
|
+
$button-hover-background-color: $colors--theme--button-positive-hover,
|
|
85
|
+
$button-active-background-color: $colors--theme--button-positive-active,
|
|
86
|
+
$button-disabled-background-color: $colors--theme--button-positive-default,
|
|
87
|
+
$button-border-color: $colors--theme--button-positive-default,
|
|
88
|
+
$button-hover-border-color: $colors--theme--button-positive-hover,
|
|
89
|
+
$button-active-border-color: $colors--theme--button-positive-active,
|
|
90
|
+
$button-disabled-border-color: $colors--theme--button-positive-default,
|
|
91
|
+
$button-text-color: $colors--theme--button-positive-text
|
|
175
92
|
);
|
|
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);
|
|
93
|
+
@include vf-focus($color-focus-positive);
|
|
194
94
|
}
|
|
95
|
+
}
|
|
195
96
|
|
|
97
|
+
@mixin vf-button-negative {
|
|
196
98
|
.p-button--negative {
|
|
197
99
|
@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
100
|
@extend %vf-button-white-success-icon;
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
101
|
|
|
218
|
-
@mixin vf-button-base {
|
|
219
|
-
%p-button--base-light {
|
|
220
102
|
@include vf-button-pattern(
|
|
221
|
-
$button-background-color: $
|
|
222
|
-
$button-
|
|
223
|
-
$button-
|
|
224
|
-
$button-
|
|
225
|
-
$button-
|
|
103
|
+
$button-background-color: $colors--theme--button-negative-default,
|
|
104
|
+
$button-hover-background-color: $colors--theme--button-negative-hover,
|
|
105
|
+
$button-active-background-color: $colors--theme--button-negative-active,
|
|
106
|
+
$button-disabled-background-color: $colors--theme--button-negative-default,
|
|
107
|
+
$button-border-color: $colors--theme--button-negative-default,
|
|
108
|
+
$button-hover-border-color: $colors--theme--button-negative-hover,
|
|
109
|
+
$button-active-border-color: $colors--theme--button-negative-active,
|
|
110
|
+
$button-disabled-border-color: $colors--theme--button-negative-default,
|
|
111
|
+
$button-text-color: $colors--theme--button-negative-text
|
|
226
112
|
);
|
|
227
113
|
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@mixin vf-button-base {
|
|
117
|
+
.p-button--base {
|
|
118
|
+
@extend %vf-button-base;
|
|
228
119
|
|
|
229
|
-
|
|
120
|
+
// override default button styles with transparent background and border
|
|
230
121
|
@include vf-button-pattern(
|
|
231
122
|
$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
123
|
$button-border-color: $color-transparent,
|
|
237
124
|
$button-hover-border-color: $color-transparent,
|
|
238
125
|
$button-active-border-color: $color-transparent,
|
|
239
126
|
$button-disabled-border-color: $color-transparent
|
|
240
127
|
);
|
|
241
128
|
}
|
|
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
129
|
}
|
|
262
130
|
|
|
263
131
|
@mixin vf-button-link {
|
|
@@ -272,6 +140,12 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
272
140
|
padding-left: 0;
|
|
273
141
|
padding-right: 0;
|
|
274
142
|
|
|
143
|
+
// stylelint-disable-next-line selector-max-type -- buttons should not affect paragraph spacing
|
|
144
|
+
p & {
|
|
145
|
+
margin-bottom: 0;
|
|
146
|
+
padding-top: 0;
|
|
147
|
+
}
|
|
148
|
+
|
|
275
149
|
&:hover {
|
|
276
150
|
background: transparent;
|
|
277
151
|
}
|
|
@@ -279,12 +153,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
|
|
|
279
153
|
&.u-no-margin--bottom {
|
|
280
154
|
@extend %u-no-margin--bottom--default-text;
|
|
281
155
|
}
|
|
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
156
|
}
|
|
289
157
|
}
|
|
290
158
|
|
|
@@ -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
|
|
|
@@ -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 {
|
|
@@ -111,6 +111,7 @@ $colors--light-theme--link-visited: $color-link-visited !default;
|
|
|
111
111
|
|
|
112
112
|
$colors--light-theme--background-default: #fff !default;
|
|
113
113
|
$colors--light-theme--background-alt: #f7f7f7 !default;
|
|
114
|
+
$colors--light-theme--background-code: $color-code-background !default;
|
|
114
115
|
$colors--light-theme--background-inputs: adjust-color($color-x-dark, $lightness: 100% * (1 - $input-background-opacity-amount)) !default;
|
|
115
116
|
$colors--light-theme--background-active: adjust-color($color-x-dark, $lightness: 100% * (1 - $active-background-opacity-amount)) !default;
|
|
116
117
|
$colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - $hover-background-opacity-amount)) !default;
|
|
@@ -122,8 +123,6 @@ $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
|
|
|
122
123
|
|
|
123
124
|
$colors--light-theme--icon: $colors--light-theme--text-default !default;
|
|
124
125
|
|
|
125
|
-
$colors--light-theme--icon: $colors--light-theme--text-default !default;
|
|
126
|
-
|
|
127
126
|
$colors-light-theme--tinted-backgrounds: (
|
|
128
127
|
neutral: (
|
|
129
128
|
default: #f2f2f2,
|
|
@@ -171,6 +170,7 @@ $colors--dark-theme--link-visited: $color-link-visited-dark !default;
|
|
|
171
170
|
|
|
172
171
|
$colors--dark-theme--background-default: #262626 !default;
|
|
173
172
|
$colors--dark-theme--background-alt: #2d2d2d !default;
|
|
173
|
+
$colors--dark-theme--background-code: $color-code-background-dark !default;
|
|
174
174
|
$colors--dark-theme--background-inputs: rgba($colors--dark-theme--text-default, $input-background-opacity-amount) !default;
|
|
175
175
|
$colors--dark-theme--background-active: rgba($colors--dark-theme--text-default, $active-background-opacity-amount) !default;
|
|
176
176
|
$colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
|
|
@@ -182,8 +182,6 @@ $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default
|
|
|
182
182
|
|
|
183
183
|
$colors--dark-theme--icon: $colors--dark-theme--text-default !default;
|
|
184
184
|
|
|
185
|
-
$colors--dark-theme--icon: $colors--dark-theme--text-default !default;
|
|
186
|
-
|
|
187
185
|
$colors-dark-theme--tinted-backgrounds: (
|
|
188
186
|
neutral: (
|
|
189
187
|
default: rgba(255, 255, 255, 0.15),
|
|
@@ -238,6 +236,7 @@ $colors--theme--link-visited: var(--vf-color-link-visited);
|
|
|
238
236
|
|
|
239
237
|
$colors--theme--background-default: var(--vf-color-background-default);
|
|
240
238
|
$colors--theme--background-alt: var(--vf-color-background-alt);
|
|
239
|
+
$colors--theme--background-code: var(--vf-color-background-code);
|
|
241
240
|
$colors--theme--background-inputs: var(--vf-color-background-inputs);
|
|
242
241
|
$colors--theme--background-active: var(--vf-color-background-active);
|
|
243
242
|
$colors--theme--background-hover: var(--vf-color-background-hover);
|
|
@@ -269,6 +268,16 @@ $colors--theme--background-information-default: var(--vf-color-background-inform
|
|
|
269
268
|
$colors--theme--background-information-hover: var(--vf-color-background-information-hover);
|
|
270
269
|
$colors--theme--background-information-active: var(--vf-color-background-information-active);
|
|
271
270
|
|
|
271
|
+
$colors--theme--button-positive-default: var(--vf-color-button-positive-default);
|
|
272
|
+
$colors--theme--button-positive-hover: var(--vf-color-button-positive-hover);
|
|
273
|
+
$colors--theme--button-positive-active: var(--vf-color-button-positive-active);
|
|
274
|
+
$colors--theme--button-positive-text: var(--vf-color-button-positive-text);
|
|
275
|
+
|
|
276
|
+
$colors--theme--button-negative-default: var(--vf-color-button-negative-default);
|
|
277
|
+
$colors--theme--button-negative-hover: var(--vf-color-button-negative-hover);
|
|
278
|
+
$colors--theme--button-negative-active: var(--vf-color-button-negative-active);
|
|
279
|
+
$colors--theme--button-negative-text: var(--vf-color-button-negative-text);
|
|
280
|
+
|
|
272
281
|
// Theme colors exposed as CSS custom properties
|
|
273
282
|
@mixin vf-theme-light--colors {
|
|
274
283
|
// SCSS variables need to be interpolated to work in CSS custom properties
|
|
@@ -281,6 +290,7 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
281
290
|
|
|
282
291
|
--vf-color-background-default: #{$colors--light-theme--background-default};
|
|
283
292
|
--vf-color-background-alt: #{$colors--light-theme--background-alt};
|
|
293
|
+
--vf-color-background-code: #{$colors--light-theme--background-code};
|
|
284
294
|
--vf-color-background-inputs: #{$colors--light-theme--background-inputs};
|
|
285
295
|
--vf-color-background-active: #{$colors--light-theme--background-active};
|
|
286
296
|
--vf-color-background-hover: #{$colors--light-theme--background-hover};
|
|
@@ -311,6 +321,16 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
311
321
|
--vf-color-background-information-default: #{map-get($colors-light-theme--tinted-backgrounds, information, default)};
|
|
312
322
|
--vf-color-background-information-hover: #{map-get($colors-light-theme--tinted-backgrounds, information, 'hover')};
|
|
313
323
|
--vf-color-background-information-active: #{map-get($colors-light-theme--tinted-backgrounds, information, active)};
|
|
324
|
+
|
|
325
|
+
--vf-color-button-positive-default: #{$color-positive};
|
|
326
|
+
--vf-color-button-positive-hover: #{adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage)};
|
|
327
|
+
--vf-color-button-positive-active: #{adjust-color($color-positive, $lightness: -$active-background-opacity-percentage)};
|
|
328
|
+
--vf-color-button-positive-text: #{vf-contrast-text-color($color-positive)};
|
|
329
|
+
|
|
330
|
+
--vf-color-button-negative-default: #{$color-negative};
|
|
331
|
+
--vf-color-button-negative-hover: #{adjust-color($color-negative, $lightness: -$hover-background-opacity-percentage)};
|
|
332
|
+
--vf-color-button-negative-active: #{adjust-color($color-negative, $lightness: -$active-background-opacity-percentage)};
|
|
333
|
+
--vf-color-button-negative-text: #{vf-contrast-text-color($color-negative)};
|
|
314
334
|
}
|
|
315
335
|
|
|
316
336
|
@mixin vf-theme-dark--colors {
|
|
@@ -324,6 +344,7 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
324
344
|
|
|
325
345
|
--vf-color-background-default: #{$colors--dark-theme--background-default};
|
|
326
346
|
--vf-color-background-alt: #{$colors--dark-theme--background-alt};
|
|
347
|
+
--vf-color-background-code: #{$colors--dark-theme--background-code};
|
|
327
348
|
--vf-color-background-inputs: #{$colors--dark-theme--background-inputs};
|
|
328
349
|
--vf-color-background-active: #{$colors--dark-theme--background-active};
|
|
329
350
|
--vf-color-background-hover: #{$colors--dark-theme--background-hover};
|
|
@@ -354,6 +375,16 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
|
|
|
354
375
|
--vf-color-background-information-default: #{map-get($colors-dark-theme--tinted-backgrounds, information, default)};
|
|
355
376
|
--vf-color-background-information-hover: #{map-get($colors-dark-theme--tinted-backgrounds, information, hover)};
|
|
356
377
|
--vf-color-background-information-active: #{map-get($colors-dark-theme--tinted-backgrounds, information, active)};
|
|
378
|
+
|
|
379
|
+
--vf-color-button-positive-default: #{$color-positive-dark};
|
|
380
|
+
--vf-color-button-positive-hover: #{adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage)};
|
|
381
|
+
--vf-color-button-positive-active: #{adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage)};
|
|
382
|
+
--vf-color-button-positive-text: #{vf-contrast-text-color($color-positive-dark)};
|
|
383
|
+
|
|
384
|
+
--vf-color-button-negative-default: #{$color-negative-dark};
|
|
385
|
+
--vf-color-button-negative-hover: #{adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage)};
|
|
386
|
+
--vf-color-button-negative-active: #{adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage)};
|
|
387
|
+
--vf-color-button-negative-text: #{vf-contrast-text-color($color-negative-dark)};
|
|
357
388
|
}
|
|
358
389
|
|
|
359
390
|
@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
|
}
|