vanilla-framework 3.0.0-alpha.2 → 3.0.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.
Files changed (53) hide show
  1. package/README.md +19 -21
  2. package/package.json +15 -15
  3. package/scss/_base_button.scss +4 -18
  4. package/scss/_base_details.scss +2 -2
  5. package/scss/_base_fontfaces.scss +183 -181
  6. package/scss/_base_forms.scss +3 -3
  7. package/scss/_base_grid-definitions.scss +8 -8
  8. package/scss/_base_hr.scss +4 -4
  9. package/scss/_base_placeholders.scss +12 -12
  10. package/scss/_base_tables.scss +2 -2
  11. package/scss/_base_typography-definitions.scss +50 -50
  12. package/scss/_base_typography.scss +2 -2
  13. package/scss/_layouts_application.scss +1 -1
  14. package/scss/_layouts_fluid-breakout.scss +14 -14
  15. package/scss/_patterns_article-pagination.scss +3 -2
  16. package/scss/_patterns_buttons.scss +1 -4
  17. package/scss/_patterns_chip.scss +265 -57
  18. package/scss/_patterns_divider.scss +2 -2
  19. package/scss/_patterns_form-password-toggle.scss +0 -6
  20. package/scss/_patterns_form-tick-elements.scss +1 -0
  21. package/scss/_patterns_forms.scss +3 -3
  22. package/scss/_patterns_grid.scss +9 -9
  23. package/scss/_patterns_heading-icon.scss +5 -5
  24. package/scss/_patterns_label.scss +6 -30
  25. package/scss/_patterns_list-tree.scss +0 -1
  26. package/scss/_patterns_lists.scss +2 -2
  27. package/scss/_patterns_logo-section.scss +4 -4
  28. package/scss/_patterns_matrix.scss +11 -13
  29. package/scss/_patterns_modal.scss +1 -1
  30. package/scss/_patterns_navigation.scss +9 -9
  31. package/scss/_patterns_pull-quotes.scss +1 -1
  32. package/scss/_patterns_search-and-filter.scss +8 -6
  33. package/scss/_patterns_search-box.scss +0 -1
  34. package/scss/_patterns_side-navigation.scss +3 -6
  35. package/scss/_patterns_strip.scss +1 -1
  36. package/scss/_patterns_switch.scss +11 -11
  37. package/scss/_patterns_table-expanding.scss +0 -4
  38. package/scss/_patterns_table-mobile-card.scss +4 -11
  39. package/scss/_patterns_table-of-contents.scss +1 -1
  40. package/scss/_settings_breakpoints.scss +2 -3
  41. package/scss/_settings_colors.scss +75 -2
  42. package/scss/_settings_grid.scss +2 -4
  43. package/scss/_settings_spacing.scss +45 -45
  44. package/scss/_settings_themes.scss +1 -0
  45. package/scss/_utilities_content-align.scss +2 -2
  46. package/scss/_utilities_equal-height.scss +1 -1
  47. package/scss/_utilities_floats.scss +4 -4
  48. package/scss/_utilities_hide.scss +7 -7
  49. package/scss/_utilities_image-position.scss +1 -1
  50. package/scss/_utilities_show.scss +2 -2
  51. package/scss/_utilities_vertical-spacing.scss +6 -12
  52. package/scss/_vanilla.scss +0 -2
  53. package/scss/_patterns_inline-images.scss +0 -37
package/README.md CHANGED
@@ -30,45 +30,43 @@ You can link to the latest build to add directly into your markup like so, by re
30
30
  <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />
31
31
  ```
32
32
 
33
- ### Including Vanilla in your project via NPM
33
+ ### Including Vanilla in your project via NPM or yarn
34
34
 
35
- Pull down the latest version of Vanilla into your local `node_modules` folder
36
- and save it into your project's dependencies (`package.json`) as follows:
35
+ To get set up with Sass, add the `sass` and `vanilla-framework` packages to your project dependencies:
37
36
 
38
37
  ```bash
39
- npm install --save-dev vanilla-framework
38
+ yarn add sass vanilla-framework
40
39
  ```
41
40
 
42
- Now ensure that your SASS builder is including modules from `node_modules`. E.g. for Gulp:
43
-
44
- ```javascript
45
- // gulpfile.js
46
- gulp.task('sass', function () {
47
- return gulp.src('[your-sass-directory]/**/*.scss').pipe(
48
- sass({
49
- includePaths: ['node_modules'],
50
- })
51
- );
52
- });
53
- ```
41
+ In the script that builds the CSS in your `package.json`, you should include the path to `node_modules` when looking for `@imports`. In this example, we have called the build script `"build-css"`:
54
42
 
55
- Please note, that to provide the best browser support you should also include [autoprefixer](https://www.npmjs.com/package/autoprefixer) as a build step.
43
+ ```
44
+ "build-css": "sass -w --load-path=node_modules src:dist --style=compressed"
45
+ ```
56
46
 
57
- Then reference it from your own Sass files, with optional settings:
47
+ Make a folder `src/`, create a file inside called `style.scss` and import Vanilla:
58
48
 
59
49
  ```sass
60
- // Optionally override some settings
61
- $color-brand: #ffffff;
62
-
63
50
  // Import the theme
64
51
  @import 'vanilla-framework';
65
52
  @include vanilla;
66
53
 
54
+ // Optionally override some settings
55
+ $color-brand: #ffffff;
56
+
67
57
  // Add theme if applicable
68
58
  ```
69
59
 
70
60
  If you don't want the whole framework, you can just `@include` specific [parts](scss) - e.g. `@include vf-b-forms`.
71
61
 
62
+ Now run `yarn build-css`, which will convert any Sass files in the `src/` folder to CSS in the `dist/` folder.
63
+
64
+ To watch for changes in your Sass files, add the following script to your `package.json`
65
+
66
+ ```
67
+ "watch-css": "yarn build-css && sass --load-path=node_modules -w src:dist --style=compressed"
68
+ ```
69
+
72
70
  ## Developing Vanilla
73
71
 
74
72
  If you're looking to contribute to the Vanilla project itself, [start here](/CONTRIBUTING.md).
package/package.json CHANGED
@@ -29,6 +29,7 @@
29
29
  "start": "yarn build && yarn serve",
30
30
  "build": "yarn build-scss && yarn build-js",
31
31
  "build-scss": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
32
+ "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
32
33
  "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
33
34
  "serve": "./entrypoint 0.0.0.0:${PORT}",
34
35
  "test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
@@ -37,13 +38,13 @@
37
38
  "lint-prettier": "prettier -c .",
38
39
  "lint-scss": "stylelint 'scss/**/*.scss'",
39
40
  "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css --watch",
40
- "watch:scss:skip-standalone": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
41
+ "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
41
42
  "watch": "yarn build && yarn watch:scss",
42
43
  "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
43
44
  "percy": "percy exec -- node snapshots.js",
44
45
  "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
45
46
  },
46
- "version": "3.0.0-alpha.2",
47
+ "version": "3.0.0",
47
48
  "files": [
48
49
  "_index.scss",
49
50
  "/scss",
@@ -52,24 +53,23 @@
52
53
  ],
53
54
  "dependencies": {
54
55
  "@canonical/cookie-policy": "3.3.0",
55
- "@canonical/latest-news": "1.2.0",
56
- "autoprefixer": "10.3.7",
57
- "postcss": "8.3.9",
58
- "postcss-cli": "8.3.1",
59
- "sass": "1.37.5"
56
+ "@canonical/latest-news": "1.3.0",
57
+ "autoprefixer": "10.4.1",
58
+ "postcss": "8.4.5",
59
+ "postcss-cli": "9.1.0",
60
+ "sass": "1.45.2"
60
61
  },
61
62
  "devDependencies": {
62
63
  "@percy/script": "1.1.0",
63
64
  "get-site-urls": "1.1.7",
64
65
  "markdown-spellcheck": "1.3.1",
65
66
  "parker": "0.0.10",
66
- "prettier": "2.4.1",
67
- "stylelint": "13.13.1",
68
- "stylelint-config-prettier": "8.0.2",
69
- "stylelint-config-standard": "22.0.0",
70
- "stylelint-order": "4.1.0",
71
- "stylelint-prettier": "1.2.0",
72
- "stylelint-scss": "3.21.0",
73
- "svgo": "2.7.0"
67
+ "prettier": "2.5.1",
68
+ "stylelint": "14.2.0",
69
+ "stylelint-config-prettier": "9.0.3",
70
+ "stylelint-config-recommended-scss": "5.0.2",
71
+ "stylelint-order": "5.0.0",
72
+ "stylelint-prettier": "2.0.0",
73
+ "svgo": "2.8.0"
74
74
  }
75
75
  }
package/scss/_base_button.scss CHANGED
@@ -26,11 +26,10 @@
26
26
  font-weight: $font-weight-regular-text;
27
27
  justify-content: center;
28
28
  line-height: map-get($line-heights, default-text);
29
- margin: 0 0 $input-margin-bottom 0;
29
+ margin: 0 $sph--large $input-margin-bottom 0;
30
30
  padding: $input-vertical-padding $sph--large;
31
31
  text-align: center;
32
32
  text-decoration: none;
33
- width: 100%;
34
33
 
35
34
  &:active,
36
35
  &:focus,
@@ -44,13 +43,8 @@
44
43
  opacity: $disabled-element-opacity;
45
44
  }
46
45
 
47
- @media (min-width: $breakpoint-x-small) {
48
- margin-right: $sph--large;
49
- width: auto;
50
-
51
- &:last-child {
52
- margin-right: 0;
53
- }
46
+ &:last-child {
47
+ margin-right: 0;
54
48
  }
55
49
 
56
50
  &.is-dense {
@@ -63,7 +57,7 @@
63
57
  font-size: #{map-get($font-sizes, small)}rem;
64
58
  line-height: map-get($line-heights, small);
65
59
  margin-bottom: $input-margin-bottom - $sp-unit;
66
- padding: calc(#{map-get($nudges, nudge--small)} - 1px) $sph--small;
60
+ padding: calc(#{map-get($nudges, small)} - 1px) $sph--small;
67
61
  }
68
62
 
69
63
  &.is-small.is-dense {
@@ -81,12 +75,6 @@
81
75
  p + p > & {
82
76
  margin-top: $spv-nudge-compensation;
83
77
  }
84
-
85
- @media (max-width: $breakpoint-x-small - 1) {
86
- p & + & {
87
- margin-top: $sp-unit + $spv-nudge-compensation;
88
- }
89
- }
90
78
  // stylelint-enable selector-max-type
91
79
  }
92
80
 
@@ -97,8 +85,6 @@
97
85
  }
98
86
 
99
87
  %vf-button-has-icon {
100
- width: auto;
101
-
102
88
  & [class*='p-icon'] {
103
89
  margin-left: $sph--small;
104
90
  margin-right: $sph--small;
package/scss/_base_details.scss CHANGED
@@ -10,8 +10,8 @@
10
10
  @include vf-focus;
11
11
 
12
12
  margin-bottom: $spv-nudge; //push subsequent text onto baseline
13
- max-width: $max-width--default;
14
- padding-bottom: 2 * $sp-unit - map-get($nudges, nudge--p); // use padding instead of margin-bottom in order to make the focus state symmetric
13
+ max-width: $text-max-width;
14
+ padding-bottom: 2 * $sp-unit - map-get($nudges, p); // use padding instead of margin-bottom in order to make the focus state symmetric
15
15
  }
16
16
  // stylelint-enable selector-max-type
17
17
  }
package/scss/_base_fontfaces.scss CHANGED
@@ -1,185 +1,187 @@
1
1
  @mixin vf-b-typography-fontfaces {
2
- @if str-index($font-base-family, 'Ubuntu') {
3
- @if $font-use-subset-latin {
4
- @font-face {
5
- font-display: $font-display-option;
6
- font-family: 'Ubuntu';
7
- font-style: normal;
8
- font-weight: $font-weight-regular-text;
9
- src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
10
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
11
- }
12
-
13
- @font-face {
14
- font-display: $font-display-option;
15
- font-family: 'Ubuntu';
16
- font-style: normal;
17
- font-weight: $font-weight-bold;
18
- src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
19
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
20
- }
21
-
22
- @font-face {
23
- font-display: $font-display-option;
24
- font-family: 'Ubuntu';
25
- font-style: italic;
26
- font-weight: $font-weight-regular-text;
27
- src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
28
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
29
- }
30
-
31
- @font-face {
32
- font-display: $font-display-option;
33
- font-family: 'Ubuntu';
34
- font-style: italic;
35
- font-weight: $font-weight-bold;
36
- src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
37
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
38
- }
39
-
40
- @font-face {
41
- font-display: $font-display-option;
42
- font-family: 'Ubuntu';
43
- font-style: normal;
44
- font-weight: $font-weight-display-heading;
45
- src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
46
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
47
- }
48
-
49
- @font-face {
50
- font-display: $font-display-option;
51
- font-family: 'Ubuntu Mono';
52
- font-style: normal;
53
- font-weight: $font-weight-regular-text;
54
- src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
55
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
56
- }
57
-
58
- @font-face {
59
- font-display: $font-display-option;
60
- font-family: 'Ubuntu Mono';
61
- font-style: normal;
62
- font-weight: $font-weight-bold;
63
- src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
64
- unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
65
- }
66
- } @else {
67
- @font-face {
68
- font-display: $font-display-option;
69
- font-family: 'Ubuntu';
70
- font-style: normal;
71
- font-weight: $font-weight-regular-text;
72
- src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
73
- }
74
-
75
- @font-face {
76
- font-display: $font-display-option;
77
- font-family: 'Ubuntu';
78
- font-style: normal;
79
- font-weight: $font-weight-bold;
80
- src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
81
- }
82
-
83
- @font-face {
84
- font-display: $font-display-option;
85
- font-family: 'Ubuntu';
86
- font-style: italic;
87
- font-weight: $font-weight-regular-text;
88
- src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
89
- }
90
-
91
- @font-face {
92
- font-display: $font-display-option;
93
- font-family: 'Ubuntu';
94
- font-style: italic;
95
- font-weight: $font-weight-bold;
96
- src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
97
- }
98
-
99
- @font-face {
100
- font-display: $font-display-option;
101
- font-family: 'Ubuntu';
102
- font-style: normal;
103
- font-weight: $font-weight-display-heading;
104
- src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
105
- }
106
-
107
- @font-face {
108
- font-display: $font-display-option;
109
- font-family: 'Ubuntu Mono';
110
- font-style: normal;
111
- font-weight: $font-weight-regular-text;
112
- src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
113
- }
114
-
115
- @font-face {
116
- font-display: $font-display-option;
117
- font-family: 'Ubuntu Mono';
118
- font-style: normal;
119
- font-weight: $font-weight-bold;
120
- src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
121
- }
122
- }
123
-
124
- @if $font-allow-cyrillic-greek-latin {
125
- // cyrillic-ext
126
- @font-face {
127
- font-display: $font-display-option;
128
- font-family: 'Ubuntu';
129
- font-style: normal;
130
- font-weight: $font-weight-regular-text;
131
- src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
132
- unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
133
- }
134
-
135
- // cyrillic
136
- @font-face {
137
- font-display: $font-display-option;
138
- font-family: 'Ubuntu';
139
- font-style: normal;
140
- font-weight: $font-weight-regular-text;
141
- src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
142
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
143
- }
144
-
145
- // greek-ext
146
- @font-face {
147
- font-display: $font-display-option;
148
- font-family: 'Ubuntu';
149
- font-style: normal;
150
- font-weight: $font-weight-regular-text;
151
- src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
152
- unicode-range: U+1F00-1FFF;
153
- }
154
-
155
- // greek
156
- @font-face {
157
- font-display: $font-display-option;
158
- font-family: 'Ubuntu';
159
- font-style: normal;
160
- font-weight: $font-weight-regular-text;
161
- src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
162
- unicode-range: U+0370-03FF;
163
- }
164
-
165
- // latin-ext
166
- @font-face {
167
- font-display: $font-display-option;
168
- font-family: 'Ubuntu';
169
- font-style: normal;
170
- font-weight: $font-weight-regular-text;
171
- src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
172
- unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
173
- }
174
-
175
- // latin
176
- @font-face {
177
- font-display: $font-display-option;
178
- font-family: 'Ubuntu';
179
- font-style: normal;
180
- font-weight: $font-weight-regular-text;
181
- src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
182
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
2
+ @at-root {
3
+ @if str-index($font-base-family, 'Ubuntu') {
4
+ @if $font-use-subset-latin {
5
+ @font-face {
6
+ font-display: $font-display-option;
7
+ font-family: 'Ubuntu';
8
+ font-style: normal;
9
+ font-weight: $font-weight-regular-text;
10
+ src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
11
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
12
+ }
13
+
14
+ @font-face {
15
+ font-display: $font-display-option;
16
+ font-family: 'Ubuntu';
17
+ font-style: normal;
18
+ font-weight: $font-weight-bold;
19
+ src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
20
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
21
+ }
22
+
23
+ @font-face {
24
+ font-display: $font-display-option;
25
+ font-family: 'Ubuntu';
26
+ font-style: italic;
27
+ font-weight: $font-weight-regular-text;
28
+ src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
29
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
30
+ }
31
+
32
+ @font-face {
33
+ font-display: $font-display-option;
34
+ font-family: 'Ubuntu';
35
+ font-style: italic;
36
+ font-weight: $font-weight-bold;
37
+ src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
38
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
39
+ }
40
+
41
+ @font-face {
42
+ font-display: $font-display-option;
43
+ font-family: 'Ubuntu';
44
+ font-style: normal;
45
+ font-weight: $font-weight-display-heading;
46
+ src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
47
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
48
+ }
49
+
50
+ @font-face {
51
+ font-display: $font-display-option;
52
+ font-family: 'Ubuntu Mono';
53
+ font-style: normal;
54
+ font-weight: $font-weight-regular-text;
55
+ src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
56
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
57
+ }
58
+
59
+ @font-face {
60
+ font-display: $font-display-option;
61
+ font-family: 'Ubuntu Mono';
62
+ font-style: normal;
63
+ font-weight: $font-weight-bold;
64
+ src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
65
+ unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
66
+ }
67
+ } @else {
68
+ @font-face {
69
+ font-display: $font-display-option;
70
+ font-family: 'Ubuntu';
71
+ font-style: normal;
72
+ font-weight: $font-weight-regular-text;
73
+ src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
74
+ }
75
+
76
+ @font-face {
77
+ font-display: $font-display-option;
78
+ font-family: 'Ubuntu';
79
+ font-style: normal;
80
+ font-weight: $font-weight-bold;
81
+ src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
82
+ }
83
+
84
+ @font-face {
85
+ font-display: $font-display-option;
86
+ font-family: 'Ubuntu';
87
+ font-style: italic;
88
+ font-weight: $font-weight-regular-text;
89
+ src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
90
+ }
91
+
92
+ @font-face {
93
+ font-display: $font-display-option;
94
+ font-family: 'Ubuntu';
95
+ font-style: italic;
96
+ font-weight: $font-weight-bold;
97
+ src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
98
+ }
99
+
100
+ @font-face {
101
+ font-display: $font-display-option;
102
+ font-family: 'Ubuntu';
103
+ font-style: normal;
104
+ font-weight: $font-weight-display-heading;
105
+ src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
106
+ }
107
+
108
+ @font-face {
109
+ font-display: $font-display-option;
110
+ font-family: 'Ubuntu Mono';
111
+ font-style: normal;
112
+ font-weight: $font-weight-regular-text;
113
+ src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
114
+ }
115
+
116
+ @font-face {
117
+ font-display: $font-display-option;
118
+ font-family: 'Ubuntu Mono';
119
+ font-style: normal;
120
+ font-weight: $font-weight-bold;
121
+ src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
122
+ }
123
+ }
124
+
125
+ @if $font-allow-cyrillic-greek-latin {
126
+ // cyrillic-ext
127
+ @font-face {
128
+ font-display: $font-display-option;
129
+ font-family: 'Ubuntu';
130
+ font-style: normal;
131
+ font-weight: $font-weight-regular-text;
132
+ src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
133
+ unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
134
+ }
135
+
136
+ // cyrillic
137
+ @font-face {
138
+ font-display: $font-display-option;
139
+ font-family: 'Ubuntu';
140
+ font-style: normal;
141
+ font-weight: $font-weight-regular-text;
142
+ src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
143
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
144
+ }
145
+
146
+ // greek-ext
147
+ @font-face {
148
+ font-display: $font-display-option;
149
+ font-family: 'Ubuntu';
150
+ font-style: normal;
151
+ font-weight: $font-weight-regular-text;
152
+ src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
153
+ unicode-range: U+1F00-1FFF;
154
+ }
155
+
156
+ // greek
157
+ @font-face {
158
+ font-display: $font-display-option;
159
+ font-family: 'Ubuntu';
160
+ font-style: normal;
161
+ font-weight: $font-weight-regular-text;
162
+ src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
163
+ unicode-range: U+0370-03FF;
164
+ }
165
+
166
+ // latin-ext
167
+ @font-face {
168
+ font-display: $font-display-option;
169
+ font-family: 'Ubuntu';
170
+ font-style: normal;
171
+ font-weight: $font-weight-regular-text;
172
+ src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
173
+ unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
174
+ }
175
+
176
+ // latin
177
+ @font-face {
178
+ font-display: $font-display-option;
179
+ font-family: 'Ubuntu';
180
+ font-style: normal;
181
+ font-weight: $font-weight-regular-text;
182
+ src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
183
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
184
+ }
183
185
  }
184
186
  }
185
187
  }
package/scss/_base_forms.scss CHANGED
@@ -82,11 +82,11 @@
82
82
  // stylelint-disable selector-max-type -- base styles can use type selectors
83
83
  label {
84
84
  cursor: pointer;
85
- display: block;
85
+ display: inline-block;
86
86
  margin-bottom: $spv--large - $spv-nudge;
87
87
  margin-top: 0;
88
- max-width: $max-width--default;
89
- padding-top: map-get($nudges, nudge--p);
88
+ max-width: $text-max-width;
89
+ padding-top: map-get($nudges, p);
90
90
  width: fit-content;
91
91
 
92
92
  &.is-required::before {