vanilla-framework 4.13.0 → 4.14.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 +3 -2
- package/scss/_base_forms-range.scss +2 -2
- package/scss/_global_functions.scss +1 -1
- package/scss/_patterns_form-tick-elements.scss +1 -1
- package/scss/_patterns_image.scss +17 -3
- package/scss/_patterns_links.scss +26 -0
- package/scss/_patterns_media-object.scss +21 -1
- package/scss/_patterns_navigation-reduced.scss +85 -0
- package/scss/_patterns_navigation.scss +55 -9
- package/scss/_patterns_switch.scss +7 -7
- package/scss/_settings_colors.scss +10 -3
- package/scss/_settings_spacing.scss +1 -0
- package/scss/_vanilla.scss +2 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-framework",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.14.0",
|
|
4
4
|
"author": {
|
|
5
5
|
"email": "webteam@canonical.com",
|
|
6
6
|
"name": "Canonical Webteam"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"serve": "./entrypoint 0.0.0.0:${PORT}",
|
|
39
39
|
"test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
|
|
40
40
|
"test-spelling": "mdspell templates/docs/**/*.md -r -n -a --en-gb",
|
|
41
|
-
"test": "yarn lint-scss && yarn lint-prettier && yarn test-spelling && yarn test-scss",
|
|
41
|
+
"test": "yarn lint-scss && yarn lint-prettier && yarn test-spelling && yarn test-scss && yarn jest",
|
|
42
42
|
"lint-prettier": "prettier -c .",
|
|
43
43
|
"lint-scss": "stylelint 'scss/**/*.scss'",
|
|
44
44
|
"watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css --watch",
|
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
"@testing-library/cypress": "10.0.2",
|
|
62
62
|
"autoprefixer": "10.4.19",
|
|
63
63
|
"cypress": "13.10.0",
|
|
64
|
+
"jest": "29.7.0",
|
|
64
65
|
"markdown-spellcheck": "1.3.1",
|
|
65
66
|
"parker": "0.0.10",
|
|
66
67
|
"postcss": "8.4.38",
|
|
@@ -78,11 +78,11 @@
|
|
|
78
78
|
outline: none;
|
|
79
79
|
|
|
80
80
|
&::-webkit-slider-thumb {
|
|
81
|
-
outline: $bar-thickness solid $
|
|
81
|
+
outline: $bar-thickness solid $colors--theme--focus;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
&::-moz-range-thumb {
|
|
85
|
-
outline: $bar-thickness solid $
|
|
85
|
+
outline: $bar-thickness solid $colors--theme--focus;
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
// Adds visual focus to elements on :focus-visible,
|
|
64
64
|
// or :focus if the browser doesn't support the former
|
|
65
|
-
@mixin vf-focus($color: $
|
|
65
|
+
@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
|
|
66
66
|
&:focus {
|
|
67
67
|
outline: $width solid $color;
|
|
68
68
|
outline-offset: -#{$width};
|
|
@@ -27,14 +27,28 @@
|
|
|
27
27
|
.p-image-container,
|
|
28
28
|
[class^='p-image-container--'] {
|
|
29
29
|
align-items: center;
|
|
30
|
-
display:
|
|
30
|
+
display: flex;
|
|
31
31
|
justify-content: center;
|
|
32
32
|
text-align: center;
|
|
33
|
+
|
|
34
|
+
&.is-highlighted {
|
|
35
|
+
background: $colors--theme--background-alt;
|
|
36
|
+
}
|
|
37
|
+
|
|
33
38
|
.p-image-container__image {
|
|
39
|
+
// max height prevents the image from stretching the container
|
|
40
|
+
// when the aspect ratio is set, and object-fit ensures the aspect ratio
|
|
41
|
+
// of the image content is maintained
|
|
42
|
+
max-height: 100%;
|
|
34
43
|
object-fit: contain;
|
|
35
44
|
}
|
|
36
|
-
|
|
37
|
-
|
|
45
|
+
|
|
46
|
+
&.is-cover {
|
|
47
|
+
.p-image-container__image {
|
|
48
|
+
height: 100%;
|
|
49
|
+
object-fit: cover;
|
|
50
|
+
width: 100%;
|
|
51
|
+
}
|
|
38
52
|
}
|
|
39
53
|
}
|
|
40
54
|
|
|
@@ -77,4 +77,30 @@
|
|
|
77
77
|
padding: 0 $sph--small 0 $sph--large;
|
|
78
78
|
text-decoration: none;
|
|
79
79
|
}
|
|
80
|
+
|
|
81
|
+
.p-link--anchor-heading {
|
|
82
|
+
color: $colors--theme--text-default;
|
|
83
|
+
|
|
84
|
+
&:visited {
|
|
85
|
+
color: $colors--theme--text-default;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&::after {
|
|
89
|
+
@extend %icon;
|
|
90
|
+
@include vf-icon-get-link-themed;
|
|
91
|
+
|
|
92
|
+
content: '';
|
|
93
|
+
margin-left: $sph--small;
|
|
94
|
+
padding: $spv--small $sph--small;
|
|
95
|
+
vertical-align: baseline;
|
|
96
|
+
visibility: hidden;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&:hover,
|
|
100
|
+
&:focus {
|
|
101
|
+
&::after {
|
|
102
|
+
visibility: visible;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
80
106
|
}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
// Note: vf-url-friendly-color does not work with the new theming variable
|
|
2
|
+
// setup, since it can't interpolate CSS variables during compilation. Instead,
|
|
3
|
+
// we're hard-coding light/dark icons here when necessary.
|
|
4
|
+
|
|
1
5
|
@import 'settings';
|
|
2
6
|
|
|
3
7
|
@mixin vf-p-media-object {
|
|
@@ -10,7 +14,7 @@
|
|
|
10
14
|
%vf-meta-list-item {
|
|
11
15
|
@extend %small-text;
|
|
12
16
|
|
|
13
|
-
color: $colors--
|
|
17
|
+
color: $colors--theme--text-default;
|
|
14
18
|
padding-left: map-get($icon-sizes, default) + $sph--large;
|
|
15
19
|
}
|
|
16
20
|
|
|
@@ -65,18 +69,34 @@
|
|
|
65
69
|
@extend %vf-iconed-list-item;
|
|
66
70
|
// prettier-ignore
|
|
67
71
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g transform="translate(0 -962.362)"><path color="%23000" fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 962.362h90v90H0z"/><path d="M35.914 968.362v9c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-8.547C7.56 969.892 6 973.59 6 986.362v42c0 18 3 18 30 18h18c27 0 30 0 30-18v-42c0-12.773-1.56-16.47-12.086-17.547v8.547c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-9H35.914zm.086 24h18c24 0 24 0 24 12v24c0 12 0 12-24 12H36c-24 0-24 0-24-12v-24c0-12 0-12 24-12z" fill="' + vf-url-friendly-color($color-mid-dark) + '"/><rect width="6" height="18" x="24" y="962.362" ry="3" color="%23000" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><rect ry="3" y="962.362" x="60" height="18" width="6" color="%23000" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><path style="text-align:center;line-height:125%;-inkscape-font-specification:Ubuntu Medium" d="M33.336 1001.364v.01c-1.8 0-3.5.348-5.087 1.043-1.548.663-2.913 1.553-4.08 2.664l-.352.337 3.06 4.335.474-.472c.158-.158.425-.388.787-.673l.01-.013.01-.012c.342-.295.74-.582 1.194-.86.467-.27 1.002-.507 1.607-.71.577-.19 1.206-.288 1.896-.288 1.048 0 1.885.26 2.58.768.626.46.964 1.222.964 2.497 0 .56-.114 1.1-.35 1.647-.246.538-.58 1.082-1.006 1.635h-.002c-.408.535-.896 1.088-1.466 1.658-.582.582-1.192 1.176-1.827 1.785h-.004c-.827.8-1.653 1.613-2.48 2.44-.846.845-1.61 1.748-2.292 2.704h-.002c-.692.967-1.26 2.02-1.702 3.15-.426 1.134-.635 2.372-.635 3.707v.72c0 .31.015.583.046.828l.064.493h18.65v-5.197H31.386c.072-.144.057-.21.18-.392l.006-.012h.002c.33-.507.727-1.034 1.192-1.576.47-.548.966-1.096 1.488-1.645l.008-.01c.527-.553.998-1.027 1.413-1.416h.007c.8-.775 1.6-1.56 2.4-2.36h.007c.813-.844 1.534-1.7 2.163-2.576h.002c.66-.906 1.197-1.83 1.613-2.773.428-.994.645-2.02.645-3.054 0-2.528-.756-4.605-2.28-6.102-1.524-1.55-3.862-2.28-6.9-2.28zm16.626.635v.01l-.024.537c-.106 2.31-.24 4.618-.4 6.927-.158 2.277-.384 4.688-.676 7.233l-.07.628h.632c2.187 0 3.982.12 5.37.353h.004c1.42.23 2.518.58 3.283 1.01h.01c.804.44 1.316.945 1.6 1.512.302.606.46 1.297.46 2.1 0 .514-.094.994-.278 1.457-.174.414-.456.79-.876 1.14h-.016c-.375.333-.9.615-1.582.836-.677.193-1.514.298-2.51.298-1.48 0-2.72-.144-3.718-.42-1.012-.31-1.79-.596-2.3-.84l-.638-.304-1.17 5.187.394.198c.32.16.74.313 1.287.477.553.167 1.168.315 1.847.45.703.163 1.43.3 2.184.407.77.11 1.527.163 2.273.163 1.826 0 3.44-.214 4.84-.66h.008c1.386-.473 2.56-1.12 3.502-1.948.94-.827 1.647-1.823 2.105-2.967.454-1.135.68-2.365.68-3.678 0-2.868-1.023-5.22-3.034-6.892-1.888-1.617-4.76-2.472-8.434-2.75.033-.27.064-.51.097-.834.055-.535.096-1.096.123-1.68l.002-.025c.052-.575.09-1.138.117-1.688l.003-.027c.035-.38.054-.693.077-1.02h10.055V1002H49.962z" font-size="35.345" font-weight="500" letter-spacing="0" word-spacing="0" text-anchor="middle" fill="' + vf-url-friendly-color($color-mid-dark) + '" font-family="Ubuntu"/></g></svg>');
|
|
72
|
+
|
|
73
|
+
.is-dark & {
|
|
74
|
+
// prettier-ignore
|
|
75
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g transform="translate(0 -962.362)"><path color="%23000" fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 962.362h90v90H0z"/><path d="M35.914 968.362v9c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-8.547C7.56 969.892 6 973.59 6 986.362v42c0 18 3 18 30 18h18c27 0 30 0 30-18v-42c0-12.773-1.56-16.47-12.086-17.547v8.547c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-9H35.914zm.086 24h18c24 0 24 0 24 12v24c0 12 0 12-24 12H36c-24 0-24 0-24-12v-24c0-12 0-12 24-12z" fill="' + vf-url-friendly-color($color-mid-light) + '"/><rect width="6" height="18" x="24" y="962.362" ry="3" color="%23000" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><rect ry="3" y="962.362" x="60" height="18" width="6" color="%23000" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><path style="text-align:center;line-height:125%;-inkscape-font-specification:Ubuntu Medium" d="M33.336 1001.364v.01c-1.8 0-3.5.348-5.087 1.043-1.548.663-2.913 1.553-4.08 2.664l-.352.337 3.06 4.335.474-.472c.158-.158.425-.388.787-.673l.01-.013.01-.012c.342-.295.74-.582 1.194-.86.467-.27 1.002-.507 1.607-.71.577-.19 1.206-.288 1.896-.288 1.048 0 1.885.26 2.58.768.626.46.964 1.222.964 2.497 0 .56-.114 1.1-.35 1.647-.246.538-.58 1.082-1.006 1.635h-.002c-.408.535-.896 1.088-1.466 1.658-.582.582-1.192 1.176-1.827 1.785h-.004c-.827.8-1.653 1.613-2.48 2.44-.846.845-1.61 1.748-2.292 2.704h-.002c-.692.967-1.26 2.02-1.702 3.15-.426 1.134-.635 2.372-.635 3.707v.72c0 .31.015.583.046.828l.064.493h18.65v-5.197H31.386c.072-.144.057-.21.18-.392l.006-.012h.002c.33-.507.727-1.034 1.192-1.576.47-.548.966-1.096 1.488-1.645l.008-.01c.527-.553.998-1.027 1.413-1.416h.007c.8-.775 1.6-1.56 2.4-2.36h.007c.813-.844 1.534-1.7 2.163-2.576h.002c.66-.906 1.197-1.83 1.613-2.773.428-.994.645-2.02.645-3.054 0-2.528-.756-4.605-2.28-6.102-1.524-1.55-3.862-2.28-6.9-2.28zm16.626.635v.01l-.024.537c-.106 2.31-.24 4.618-.4 6.927-.158 2.277-.384 4.688-.676 7.233l-.07.628h.632c2.187 0 3.982.12 5.37.353h.004c1.42.23 2.518.58 3.283 1.01h.01c.804.44 1.316.945 1.6 1.512.302.606.46 1.297.46 2.1 0 .514-.094.994-.278 1.457-.174.414-.456.79-.876 1.14h-.016c-.375.333-.9.615-1.582.836-.677.193-1.514.298-2.51.298-1.48 0-2.72-.144-3.718-.42-1.012-.31-1.79-.596-2.3-.84l-.638-.304-1.17 5.187.394.198c.32.16.74.313 1.287.477.553.167 1.168.315 1.847.45.703.163 1.43.3 2.184.407.77.11 1.527.163 2.273.163 1.826 0 3.44-.214 4.84-.66h.008c1.386-.473 2.56-1.12 3.502-1.948.94-.827 1.647-1.823 2.105-2.967.454-1.135.68-2.365.68-3.678 0-2.868-1.023-5.22-3.034-6.892-1.888-1.617-4.76-2.472-8.434-2.75.033-.27.064-.51.097-.834.055-.535.096-1.096.123-1.68l.002-.025c.052-.575.09-1.138.117-1.688l.003-.027c.035-.38.054-.693.077-1.02h10.055V1002H49.962z" font-size="35.345" font-weight="500" letter-spacing="0" word-spacing="0" text-anchor="middle" fill="' + vf-url-friendly-color($color-mid-light) + '" font-family="Ubuntu"/></g></svg>');
|
|
76
|
+
}
|
|
68
77
|
}
|
|
69
78
|
|
|
70
79
|
&--location {
|
|
71
80
|
@extend %vf-iconed-list-item;
|
|
72
81
|
// prettier-ignore
|
|
73
82
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g color="%23000"><path d="M45 0C30.088 0 18 12.088 18 27c0 .562.03 1.103.063 1.656.013.248.012.497.03.75.02.23.07.46.095.688C20.22 51.854 41.922 90 45 90c3.078 0 24.78-38.146 26.813-59.906.02-.232.076-.46.093-.688.022-.248.016-.5.03-.75.032-.56.064-1.12.064-1.656C72 12.088 59.912 0 45 0zm0 18c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9z" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="3" overflow="visible" enable-background="accumulate"/><path fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 0h90v90H0z"/></g></svg>');
|
|
83
|
+
|
|
84
|
+
.is-dark & {
|
|
85
|
+
// prettier-ignore
|
|
86
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g color="%23000"><path d="M45 0C30.088 0 18 12.088 18 27c0 .562.03 1.103.063 1.656.013.248.012.497.03.75.02.23.07.46.095.688C20.22 51.854 41.922 90 45 90c3.078 0 24.78-38.146 26.813-59.906.02-.232.076-.46.093-.688.022-.248.016-.5.03-.75.032-.56.064-1.12.064-1.656C72 12.088 59.912 0 45 0zm0 18c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9z" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="3" overflow="visible" enable-background="accumulate"/><path fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 0h90v90H0z"/></g></svg>');
|
|
87
|
+
}
|
|
74
88
|
}
|
|
75
89
|
|
|
76
90
|
&--venue {
|
|
77
91
|
@extend %vf-iconed-list-item;
|
|
78
92
|
// prettier-ignore
|
|
79
93
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90.000001"><g transform="translate(-111.967 -929.337)" color="%23000"><path fill="none" stroke-width="4" overflow="visible" enable-background="accumulate" d="M111.967 929.336h90v90h-90z"/><circle r="6.5" cy="24.5" cx="23.5" transform="matrix(1.846 0 0 1.846 113.583 929.105)" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="2" overflow="visible" enable-background="accumulate"/><circle r="21" cy="45" cx="45" transform="matrix(1.429 0 0 1.429 92.682 910.05)" fill="none" stroke="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="4.2" stroke-linejoin="round" overflow="visible" enable-background="accumulate"/><path d="M152.967 931.736l8-2.4v15h-8zM160.967 1016.336h-8v-12h8zM198.967 970.336v8h-12v-8zM114.967 978.336v-8h12v8z" overflow="visible" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="6" enable-background="accumulate"/></g></svg>');
|
|
94
|
+
|
|
95
|
+
.is-dark & {
|
|
96
|
+
@extend %vf-iconed-list-item;
|
|
97
|
+
// prettier-ignore
|
|
98
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90.000001"><g transform="translate(-111.967 -929.337)" color="%23000"><path fill="none" stroke-width="4" overflow="visible" enable-background="accumulate" d="M111.967 929.336h90v90h-90z"/><circle r="6.5" cy="24.5" cx="23.5" transform="matrix(1.846 0 0 1.846 113.583 929.105)" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="2" overflow="visible" enable-background="accumulate"/><circle r="21" cy="45" cx="45" transform="matrix(1.429 0 0 1.429 92.682 910.05)" fill="none" stroke="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="4.2" stroke-linejoin="round" overflow="visible" enable-background="accumulate"/><path d="M152.967 931.736l8-2.4v15h-8zM160.967 1016.336h-8v-12h8zM198.967 970.336v8h-12v-8zM114.967 978.336v-8h12v8z" overflow="visible" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="6" enable-background="accumulate"/></g></svg>');
|
|
99
|
+
}
|
|
80
100
|
}
|
|
81
101
|
}
|
|
82
102
|
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
@mixin vf-p-navigation-reduced {
|
|
2
|
+
.p-navigation--reduced {
|
|
3
|
+
position: relative;
|
|
4
|
+
z-index: 99; // display above sticky top navigation, but below modals/overlays
|
|
5
|
+
|
|
6
|
+
// LOGO OVERRIDES FOR REDUCED NAVIGATION
|
|
7
|
+
|
|
8
|
+
// orange logo tag is hidden in reduced navigation
|
|
9
|
+
.p-navigation__tagged-logo {
|
|
10
|
+
.p-navigation__link {
|
|
11
|
+
padding-left: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.p-navigation__logo-tag {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// reduced nav logo text uses default font size (on small screens)
|
|
20
|
+
.p-navigation__logo-title {
|
|
21
|
+
font-size: #{map-get($font-sizes, default)}rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// REDUCED SIZE OF NAVIGATION ON LARGE SCREENS
|
|
25
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
26
|
+
background-color: $colors--theme--background-alt;
|
|
27
|
+
|
|
28
|
+
// adjust font size for reduced nav on large screens
|
|
29
|
+
.p-navigation__link,
|
|
30
|
+
.p-navigation__logo-title {
|
|
31
|
+
color: $colors--theme--text-muted;
|
|
32
|
+
font-size: #{map-get($font-sizes, small)}rem;
|
|
33
|
+
line-height: map-get($line-heights, x-small);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.p-navigation__link {
|
|
37
|
+
padding-bottom: $spv--small;
|
|
38
|
+
padding-top: $spv--small;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.p-navigation__item--dropdown-toggle .p-navigation__link {
|
|
42
|
+
&::after {
|
|
43
|
+
top: $spv--small;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.p-navigation__item--dropdown-toggle.is-active {
|
|
48
|
+
background-color: $colors--theme--background-default;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// SEARCH IN REDUCED NAVIGATION
|
|
53
|
+
|
|
54
|
+
.p-navigation__link--search-toggle {
|
|
55
|
+
// search label is always hidden in reduced navigation
|
|
56
|
+
.p-navigation__search-label {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
61
|
+
&::after {
|
|
62
|
+
top: $spv--small;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// hide secondary navigation banner when search is open on mobile
|
|
68
|
+
&.has-search-open + .has-search-open .p-navigation__banner {
|
|
69
|
+
display: none;
|
|
70
|
+
}
|
|
71
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
72
|
+
&.has-search-open + .has-search-open .p-navigation__banner {
|
|
73
|
+
display: flex; // reset to value as defined in _patterns_navigation.scss
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&.has-search-open {
|
|
77
|
+
// make sure reduced navigation items remain visible when search is open
|
|
78
|
+
// both classes needed for specificity
|
|
79
|
+
.p-navigation__nav .p-navigation__items {
|
|
80
|
+
display: inline-flex;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -140,7 +140,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
.p-navigation,
|
|
143
|
-
.p-navigation--sliding
|
|
143
|
+
.p-navigation--sliding,
|
|
144
|
+
.p-navigation--reduced {
|
|
144
145
|
background-color: $colors--theme--background-default;
|
|
145
146
|
display: flex;
|
|
146
147
|
flex-direction: column;
|
|
@@ -228,6 +229,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
228
229
|
// shift navigation items by the size of grid margin to align with grid
|
|
229
230
|
.p-navigation__items:first-child {
|
|
230
231
|
margin-left: calc(-1 * $sph--large);
|
|
232
|
+
width: calc(100% + $sph--large);
|
|
231
233
|
}
|
|
232
234
|
|
|
233
235
|
// on medium screen sizes (6 columns) use 2/4 column split
|
|
@@ -261,12 +263,33 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
261
263
|
|
|
262
264
|
max-width: $nav-link-max-width;
|
|
263
265
|
}
|
|
266
|
+
|
|
267
|
+
&.is-right-shifted {
|
|
268
|
+
margin-left: auto;
|
|
269
|
+
}
|
|
264
270
|
}
|
|
265
271
|
|
|
266
272
|
.p-navigation__link {
|
|
267
273
|
@extend %navigation-link;
|
|
268
274
|
}
|
|
269
275
|
|
|
276
|
+
.p-navigation__link--menu-toggle {
|
|
277
|
+
@extend %navigation-link;
|
|
278
|
+
|
|
279
|
+
&::after {
|
|
280
|
+
@extend %icon;
|
|
281
|
+
@include vf-icon-chevron-themed;
|
|
282
|
+
content: '';
|
|
283
|
+
display: inline-block;
|
|
284
|
+
height: 1rem;
|
|
285
|
+
width: 1rem;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.has-menu-open &::after {
|
|
289
|
+
transform: rotate(180deg);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
270
293
|
// navigation logo
|
|
271
294
|
.p-navigation__banner {
|
|
272
295
|
@extend %navigation-link-responsive-padding-left;
|
|
@@ -276,7 +299,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
276
299
|
justify-content: space-between;
|
|
277
300
|
padding-right: 0;
|
|
278
301
|
|
|
279
|
-
.p-navigation__link
|
|
302
|
+
.p-navigation__link,
|
|
303
|
+
.p-navigation__link--menu-toggle {
|
|
280
304
|
// reset padding for navigation links in the navigation banner
|
|
281
305
|
@extend %navigation-link-responsive-padding-horizontal;
|
|
282
306
|
@extend %navigation-link-responsive-padding-vertical;
|
|
@@ -494,6 +518,15 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
494
518
|
}
|
|
495
519
|
}
|
|
496
520
|
|
|
521
|
+
// STICKY NAVIGATION
|
|
522
|
+
.p-navigation.is-sticky,
|
|
523
|
+
// cover both --sticky and --reduced navigation
|
|
524
|
+
[class^='p-navigation--'].is-sticky {
|
|
525
|
+
position: sticky;
|
|
526
|
+
top: 0;
|
|
527
|
+
z-index: 98; // show it above all other content, but below modal/overlays and reduced navigation
|
|
528
|
+
}
|
|
529
|
+
|
|
497
530
|
// SEARCH
|
|
498
531
|
|
|
499
532
|
// on mobile screens search box is visible inside of the mobile navigation dropdown
|
|
@@ -524,10 +557,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
524
557
|
|
|
525
558
|
// show both label and icon on large screens
|
|
526
559
|
@media (min-width: $breakpoint-large) {
|
|
527
|
-
padding-left: $sph--large;
|
|
528
|
-
|
|
529
560
|
.p-navigation__search-label {
|
|
530
561
|
display: initial;
|
|
562
|
+
padding-left: $sph--large;
|
|
531
563
|
}
|
|
532
564
|
}
|
|
533
565
|
|
|
@@ -589,7 +621,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
589
621
|
|
|
590
622
|
// when navigation search is expanded
|
|
591
623
|
.p-navigation.has-search-open,
|
|
592
|
-
.p-navigation--sliding.has-search-open
|
|
624
|
+
.p-navigation--sliding.has-search-open,
|
|
625
|
+
.p-navigation--reduced.has-search-open {
|
|
593
626
|
// make sure search in navigation renders on top of the overlay
|
|
594
627
|
.p-navigation__nav {
|
|
595
628
|
display: flex;
|
|
@@ -611,6 +644,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
611
644
|
opacity: 0.5;
|
|
612
645
|
pointer-events: all;
|
|
613
646
|
}
|
|
647
|
+
|
|
648
|
+
// change search toggle icon to close icon
|
|
649
|
+
.p-navigation__link--search-toggle::after {
|
|
650
|
+
@include vf-icon-close-themed;
|
|
651
|
+
}
|
|
614
652
|
}
|
|
615
653
|
|
|
616
654
|
.p-navigation.has-menu-open {
|
|
@@ -749,13 +787,18 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
749
787
|
|
|
750
788
|
$sliding-nav-animation-settings: map-get($animation-duration, brisk) ease;
|
|
751
789
|
|
|
752
|
-
.p-navigation--sliding.has-menu-open
|
|
790
|
+
.p-navigation--sliding.has-menu-open,
|
|
791
|
+
.p-navigation--reduced.has-menu-open {
|
|
753
792
|
height: 100vh;
|
|
754
793
|
overflow-y: hidden;
|
|
794
|
+
position: fixed;
|
|
795
|
+
width: 100vw;
|
|
755
796
|
|
|
756
797
|
@media (min-width: $breakpoint-navigation-threshold) {
|
|
757
798
|
height: auto;
|
|
758
799
|
overflow-y: visible;
|
|
800
|
+
position: static;
|
|
801
|
+
width: auto;
|
|
759
802
|
}
|
|
760
803
|
|
|
761
804
|
.p-navigation__banner .p-navigation__items {
|
|
@@ -792,7 +835,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
792
835
|
}
|
|
793
836
|
|
|
794
837
|
/* stylelint-disable max-nesting-depth -- allow deep nesting for sliding navigation */
|
|
795
|
-
.p-navigation--sliding .p-navigation__dropdown
|
|
838
|
+
.p-navigation--sliding .p-navigation__dropdown,
|
|
839
|
+
.p-navigation--reduced .p-navigation__dropdown {
|
|
796
840
|
display: block;
|
|
797
841
|
height: 100vh;
|
|
798
842
|
left: 100vw;
|
|
@@ -847,7 +891,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
847
891
|
}
|
|
848
892
|
}
|
|
849
893
|
|
|
850
|
-
.p-navigation--sliding .p-navigation__items
|
|
894
|
+
.p-navigation--sliding .p-navigation__items,
|
|
895
|
+
.p-navigation--reduced .p-navigation__items {
|
|
851
896
|
transition: transform $sliding-nav-animation-settings;
|
|
852
897
|
|
|
853
898
|
&.is-active {
|
|
@@ -878,7 +923,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
878
923
|
}
|
|
879
924
|
/* stylelint-enable max-nesting-depth */
|
|
880
925
|
|
|
881
|
-
.p-navigation--sliding
|
|
926
|
+
.p-navigation--sliding,
|
|
927
|
+
.p-navigation--reduced {
|
|
882
928
|
// Default positioning for nested dropdown buttons. Overridden by subsequent styles.
|
|
883
929
|
.p-navigation__item--dropdown-toggle {
|
|
884
930
|
position: initial;
|
|
@@ -13,7 +13,7 @@ $knob-size: $sp-unit * 2;
|
|
|
13
13
|
position: absolute;
|
|
14
14
|
|
|
15
15
|
&:checked + .p-switch__slider::before {
|
|
16
|
-
border: $input-border-thickness solid $
|
|
16
|
+
border: $input-border-thickness solid $colors--theme--link-default;
|
|
17
17
|
left: 50%;
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -22,22 +22,22 @@ $knob-size: $sp-unit * 2;
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
&:checked + .p-switch__slider {
|
|
25
|
-
background: $
|
|
25
|
+
background: $colors--theme--link-default;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
&:focus {
|
|
29
29
|
outline: none;
|
|
30
30
|
|
|
31
31
|
+ .p-switch__slider {
|
|
32
|
-
outline: $bar-thickness solid $
|
|
32
|
+
outline: $bar-thickness solid $colors--theme--focus;
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.p-switch__slider {
|
|
38
|
-
background: $
|
|
38
|
+
background: $colors--theme--background-neutral-default;
|
|
39
39
|
border-radius: $knob-size;
|
|
40
|
-
box-shadow: inset 0 2px 5px 0 transparentize($color-dark, 0.8);
|
|
40
|
+
box-shadow: inset 0 2px 5px 0 transparentize($color-x-dark, 0.8);
|
|
41
41
|
display: inline-block;
|
|
42
42
|
height: $knob-size;
|
|
43
43
|
margin: 0;
|
|
@@ -48,8 +48,8 @@ $knob-size: $sp-unit * 2;
|
|
|
48
48
|
@extend %vf-has-box-shadow;
|
|
49
49
|
@include vf-transition($duration: slow);
|
|
50
50
|
|
|
51
|
-
background: $
|
|
52
|
-
border: $input-border-thickness solid $
|
|
51
|
+
background: $colors--theme--background-default;
|
|
52
|
+
border: $input-border-thickness solid $colors--theme--background-neutral-default;
|
|
53
53
|
border-radius: 50%;
|
|
54
54
|
content: '';
|
|
55
55
|
height: $knob-size;
|
|
@@ -29,13 +29,14 @@ $disabled-element-opacity: 0.33;
|
|
|
29
29
|
|
|
30
30
|
$shadow-opacity: 0.2;
|
|
31
31
|
|
|
32
|
-
// Link colors
|
|
32
|
+
// Link and focus colors
|
|
33
33
|
$color-link: #06c !default;
|
|
34
34
|
$color-link-visited: #7d42b8 !default;
|
|
35
35
|
$color-focus: #2e96ff !default;
|
|
36
36
|
|
|
37
37
|
$color-link-dark: #69c !default;
|
|
38
38
|
$color-link-visited-dark: #a679d2 !default;
|
|
39
|
+
$color-focus-dark: #9cf !default;
|
|
39
40
|
|
|
40
41
|
// Focus modifications to meet AA 3:1 contrast ratio against
|
|
41
42
|
// button background for positive/negative buttons
|
|
@@ -88,9 +89,10 @@ $states: (
|
|
|
88
89
|
// --text-disabled - dimmed version of default text color, to be used on disabled controls
|
|
89
90
|
// --text-muted - muted version of default text color, to be used on elements with less prominence
|
|
90
91
|
//
|
|
91
|
-
// Link colors:
|
|
92
|
+
// Link and focus colors:
|
|
92
93
|
// --link-default - default link color
|
|
93
94
|
// --link-visited - visited link color
|
|
95
|
+
// --focus - focus highlight/outline color
|
|
94
96
|
//
|
|
95
97
|
// Background colors:
|
|
96
98
|
// --background - default background color
|
|
@@ -111,6 +113,7 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
|
|
|
111
113
|
|
|
112
114
|
$colors--light-theme--link-default: $color-link !default;
|
|
113
115
|
$colors--light-theme--link-visited: $color-link-visited !default;
|
|
116
|
+
$colors--light-theme--focus: $color-focus !default;
|
|
114
117
|
|
|
115
118
|
$colors--light-theme--background-default: #fff !default;
|
|
116
119
|
$colors--light-theme--background-alt: #f7f7f7 !default;
|
|
@@ -170,6 +173,7 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
|
|
|
170
173
|
|
|
171
174
|
$colors--dark-theme--link-default: $color-link-dark !default;
|
|
172
175
|
$colors--dark-theme--link-visited: $color-link-visited-dark !default;
|
|
176
|
+
$colors--dark-theme--focus: $color-focus-dark !default;
|
|
173
177
|
|
|
174
178
|
$colors--dark-theme--background-default: #262626 !default;
|
|
175
179
|
$colors--dark-theme--background-alt: #202020 !default;
|
|
@@ -236,6 +240,7 @@ $colors--theme--text-inactive: var(--vf-color-text-inactive);
|
|
|
236
240
|
|
|
237
241
|
$colors--theme--link-default: var(--vf-color-link-default);
|
|
238
242
|
$colors--theme--link-visited: var(--vf-color-link-visited);
|
|
243
|
+
$colors--theme--focus: var(--vf-color-focus);
|
|
239
244
|
|
|
240
245
|
$colors--theme--background-default: var(--vf-color-background-default);
|
|
241
246
|
$colors--theme--background-alt: var(--vf-color-background-alt);
|
|
@@ -290,6 +295,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
|
|
|
290
295
|
|
|
291
296
|
--vf-color-link-default: #{$colors--light-theme--link-default};
|
|
292
297
|
--vf-color-link-visited: #{$colors--light-theme--link-visited};
|
|
298
|
+
--vf-color-focus: #{$colors--light-theme--focus};
|
|
293
299
|
|
|
294
300
|
--vf-color-background-default: #{$colors--light-theme--background-default};
|
|
295
301
|
--vf-color-background-alt: #{$colors--light-theme--background-alt};
|
|
@@ -344,6 +350,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
|
|
|
344
350
|
|
|
345
351
|
--vf-color-link-default: #{$colors--dark-theme--link-default};
|
|
346
352
|
--vf-color-link-visited: #{$colors--dark-theme--link-visited};
|
|
353
|
+
--vf-color-focus: #{$colors--dark-theme--focus};
|
|
347
354
|
|
|
348
355
|
--vf-color-background-default: #{$colors--dark-theme--background-default};
|
|
349
356
|
--vf-color-background-alt: #{$colors--dark-theme--background-alt};
|
|
@@ -396,7 +403,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
|
|
|
396
403
|
|
|
397
404
|
// SCSS variables need to be interpolated to work in CSS custom properties
|
|
398
405
|
--vf-color-background-default: #{$color-paper};
|
|
399
|
-
--vf-color-background-alt: #{
|
|
406
|
+
--vf-color-background-alt: #{#ebebeb};
|
|
400
407
|
|
|
401
408
|
--vf-color-background-inputs: #{$colors--paper-theme--background-inputs};
|
|
402
409
|
--vf-color-background-active: #{$colors--paper-theme--background-active};
|
package/scss/_vanilla.scss
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
@import 'patterns_modal';
|
|
34
34
|
@import 'patterns_muted-heading';
|
|
35
35
|
@import 'patterns_navigation';
|
|
36
|
+
@import 'patterns_navigation-reduced';
|
|
36
37
|
@import 'patterns_notifications';
|
|
37
38
|
@import 'patterns_pagination';
|
|
38
39
|
@import 'patterns_pull-quotes';
|
|
@@ -113,7 +114,6 @@
|
|
|
113
114
|
@include vf-p-heading-icon;
|
|
114
115
|
@include vf-p-headings;
|
|
115
116
|
@include vf-p-section;
|
|
116
|
-
|
|
117
117
|
@include vf-p-form-password-toggle;
|
|
118
118
|
@include vf-p-icons;
|
|
119
119
|
@include vf-p-image;
|
|
@@ -127,6 +127,7 @@
|
|
|
127
127
|
@include vf-p-modal;
|
|
128
128
|
@include vf-p-muted-heading;
|
|
129
129
|
@include vf-p-navigation;
|
|
130
|
+
@include vf-p-navigation-reduced;
|
|
130
131
|
@include vf-p-notification;
|
|
131
132
|
@include vf-p-pagination;
|
|
132
133
|
@include vf-p-pull-quotes;
|