vanilla-framework 3.0.0-alpha.1 → 3.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/README.md +1 -1
  2. package/_index.scss +1 -0
  3. package/package.json +21 -16
  4. package/scss/_base_button.scss +4 -18
  5. package/scss/_base_details.scss +2 -2
  6. package/scss/_base_fontfaces.scss +183 -181
  7. package/scss/_base_forms.scss +3 -3
  8. package/scss/_base_grid-definitions.scss +8 -8
  9. package/scss/_base_hr.scss +4 -4
  10. package/scss/_base_placeholders.scss +12 -12
  11. package/scss/_base_tables.scss +2 -2
  12. package/scss/_base_typography-definitions.scss +50 -50
  13. package/scss/_base_typography.scss +2 -2
  14. package/scss/_global_functions.scss +2 -0
  15. package/scss/_layouts_application.scss +1 -1
  16. package/scss/_layouts_fluid-breakout.scss +14 -14
  17. package/scss/_patterns_article-pagination.scss +3 -6
  18. package/scss/_patterns_buttons.scss +1 -4
  19. package/scss/_patterns_chip.scss +264 -57
  20. package/scss/_patterns_divider.scss +2 -2
  21. package/scss/_patterns_form-password-toggle.scss +0 -6
  22. package/scss/_patterns_form-tick-elements.scss +1 -0
  23. package/scss/_patterns_forms.scss +3 -3
  24. package/scss/_patterns_grid.scss +9 -9
  25. package/scss/_patterns_heading-icon.scss +5 -5
  26. package/scss/_patterns_label.scss +6 -30
  27. package/scss/_patterns_list-tree.scss +0 -1
  28. package/scss/_patterns_lists.scss +2 -2
  29. package/scss/_patterns_logo-section.scss +6 -4
  30. package/scss/_patterns_matrix.scss +11 -13
  31. package/scss/_patterns_modal.scss +1 -1
  32. package/scss/_patterns_navigation.scss +9 -9
  33. package/scss/_patterns_pull-quotes.scss +1 -1
  34. package/scss/_patterns_search-and-filter.scss +8 -6
  35. package/scss/_patterns_search-box.scss +0 -1
  36. package/scss/_patterns_side-navigation.scss +3 -6
  37. package/scss/_patterns_strip.scss +1 -1
  38. package/scss/_patterns_switch.scss +11 -11
  39. package/scss/_patterns_table-expanding.scss +0 -4
  40. package/scss/_patterns_table-mobile-card.scss +4 -11
  41. package/scss/_patterns_table-of-contents.scss +1 -1
  42. package/scss/_settings_breakpoints.scss +2 -3
  43. package/scss/_settings_colors.scss +75 -2
  44. package/scss/_settings_grid.scss +2 -4
  45. package/scss/_settings_spacing.scss +47 -45
  46. package/scss/_settings_themes.scss +1 -0
  47. package/scss/_utilities_content-align.scss +2 -2
  48. package/scss/_utilities_equal-height.scss +1 -1
  49. package/scss/_utilities_floats.scss +4 -4
  50. package/scss/_utilities_hide.scss +7 -7
  51. package/scss/_utilities_image-position.scss +1 -1
  52. package/scss/_utilities_show.scss +2 -2
  53. package/scss/_utilities_vertical-spacing.scss +6 -12
  54. package/scss/_vanilla.scss +0 -4
  55. package/scss/_patterns_inline-images.scss +0 -37
  56. package/scss/standalone/base.scss +0 -2
  57. package/scss/standalone/custom.scss +0 -7
  58. package/scss/standalone/dark.scss +0 -11
  59. package/scss/standalone/example.scss +0 -15
  60. package/scss/standalone/import.scss +0 -2
  61. package/scss/standalone/layouts_fluid-breakout-full.scss +0 -8
  62. package/scss/standalone/layouts_fluid-breakout.scss +0 -8
  63. package/scss/standalone/patterns_accordion.scss +0 -6
  64. package/scss/standalone/patterns_article-pagination.scss +0 -4
  65. package/scss/standalone/patterns_breadcrumbs.scss +0 -4
  66. package/scss/standalone/patterns_buttons.scss +0 -9
  67. package/scss/standalone/patterns_card.scss +0 -9
  68. package/scss/standalone/patterns_chip.scss +0 -6
  69. package/scss/standalone/patterns_code-snippet.scss +0 -6
  70. package/scss/standalone/patterns_contextual-menu.scss +0 -9
  71. package/scss/standalone/patterns_divider.scss +0 -7
  72. package/scss/standalone/patterns_form-password-toggle.scss +0 -19
  73. package/scss/standalone/patterns_form-tick-elements.scss +0 -13
  74. package/scss/standalone/patterns_forms.scss +0 -17
  75. package/scss/standalone/patterns_grid.scss +0 -4
  76. package/scss/standalone/patterns_heading-icon.scss +0 -4
  77. package/scss/standalone/patterns_headings.scss +0 -4
  78. package/scss/standalone/patterns_icons-additional.scss +0 -104
  79. package/scss/standalone/patterns_icons.scss +0 -7
  80. package/scss/standalone/patterns_image.scss +0 -4
  81. package/scss/standalone/patterns_inline-images.scss +0 -4
  82. package/scss/standalone/patterns_label.scss +0 -4
  83. package/scss/standalone/patterns_links.scss +0 -4
  84. package/scss/standalone/patterns_list-tree.scss +0 -4
  85. package/scss/standalone/patterns_lists.scss +0 -4
  86. package/scss/standalone/patterns_logo-section.scss +0 -4
  87. package/scss/standalone/patterns_matrix.scss +0 -4
  88. package/scss/standalone/patterns_media-object.scss +0 -4
  89. package/scss/standalone/patterns_modal.scss +0 -9
  90. package/scss/standalone/patterns_muted-heading.scss +0 -4
  91. package/scss/standalone/patterns_navigation.scss +0 -4
  92. package/scss/standalone/patterns_notifications.scss +0 -7
  93. package/scss/standalone/patterns_pagination.scss +0 -7
  94. package/scss/standalone/patterns_pull-quotes.scss +0 -4
  95. package/scss/standalone/patterns_search-and-filter.scss +0 -8
  96. package/scss/standalone/patterns_search-box.scss +0 -15
  97. package/scss/standalone/patterns_separator.scss +0 -4
  98. package/scss/standalone/patterns_side-navigation.scss +0 -11
  99. package/scss/standalone/patterns_skip-link.scss +0 -8
  100. package/scss/standalone/patterns_slider.scss +0 -4
  101. package/scss/standalone/patterns_strip.scss +0 -10
  102. package/scss/standalone/patterns_switch.scss +0 -4
  103. package/scss/standalone/patterns_tab-buttons.scss +0 -7
  104. package/scss/standalone/patterns_table-expanding.scss +0 -10
  105. package/scss/standalone/patterns_table-mobile-card.scss +0 -10
  106. package/scss/standalone/patterns_table-of-contents.scss +0 -7
  107. package/scss/standalone/patterns_table-overflow.scss +0 -10
  108. package/scss/standalone/patterns_table-sortable.scss +0 -10
  109. package/scss/standalone/patterns_tabs.scss +0 -4
  110. package/scss/standalone/patterns_tooltips.scss +0 -6
package/scss/_base_placeholders.scss CHANGED
@@ -150,55 +150,55 @@
150
150
  }
151
151
 
152
152
  %u-no-margin--bottom--h1 {
153
- margin-bottom: -#{map-get($nudges, nudge--h1-mobile)} !important;
153
+ margin-bottom: -#{map-get($nudges, h1-mobile)} !important;
154
154
 
155
155
  @media (min-width: $breakpoint-heading-threshold) {
156
- margin-bottom: -#{map-get($nudges, nudge--h1)} !important;
156
+ margin-bottom: -#{map-get($nudges, h1)} !important;
157
157
  }
158
158
 
159
159
  @if ($increase-font-size-on-larger-screens) {
160
160
  @media (min-width: $breakpoint-x-large) {
161
- margin-bottom: -#{map-get($nudges, nudge--h1-large)} !important;
161
+ margin-bottom: -#{map-get($nudges, h1-large)} !important;
162
162
  }
163
163
  }
164
164
  }
165
165
 
166
166
  %u-no-margin--bottom--h2 {
167
- margin-bottom: -#{map-get($nudges, nudge--h2-mobile)} !important;
167
+ margin-bottom: -#{map-get($nudges, h2-mobile)} !important;
168
168
 
169
169
  @media (min-width: $breakpoint-heading-threshold) {
170
- margin-bottom: -#{map-get($nudges, nudge--h2)} !important;
170
+ margin-bottom: -#{map-get($nudges, h2)} !important;
171
171
  }
172
172
  }
173
173
 
174
174
  %u-no-margin--bottom--h3 {
175
- margin-bottom: #{$sp-unit - map-get($nudges, nudge--h3-mobile)} !important;
175
+ margin-bottom: #{$sp-unit - map-get($nudges, h3-mobile)} !important;
176
176
 
177
177
  @media (min-width: $breakpoint-heading-threshold) {
178
- margin-bottom: -#{map-get($nudges, nudge--h3)} !important;
178
+ margin-bottom: -#{map-get($nudges, h3)} !important;
179
179
  }
180
180
  }
181
181
 
182
182
  %u-no-margin--bottom--h4 {
183
- margin-bottom: #{$sp-unit - map-get($nudges, nudge--h4-mobile)} !important;
183
+ margin-bottom: #{$sp-unit - map-get($nudges, h4-mobile)} !important;
184
184
 
185
185
  @media (min-width: $breakpoint-heading-threshold) {
186
- margin-bottom: -#{map-get($nudges, nudge--h4)} !important;
186
+ margin-bottom: -#{map-get($nudges, h4)} !important;
187
187
  }
188
188
 
189
189
  @if ($increase-font-size-on-larger-screens) {
190
190
  @media (min-width: $breakpoint-x-large) {
191
- margin-bottom: -#{map-get($nudges, nudge--h4-large)} !important;
191
+ margin-bottom: -#{map-get($nudges, h4-large)} !important;
192
192
  }
193
193
  }
194
194
  }
195
195
 
196
196
  %u-no-margin--bottom--default-text {
197
- margin-bottom: #{$sp-unit - map-get($nudges, nudge--p)} !important;
197
+ margin-bottom: #{$sp-unit - map-get($nudges, p)} !important;
198
198
  }
199
199
 
200
200
  %u-no-margin--bottom--small {
201
- margin-bottom: -#{map-get($nudges, nudge--small)} !important;
201
+ margin-bottom: -#{map-get($nudges, small)} !important;
202
202
  }
203
203
 
204
204
  %u-no-margin--bottom--hr {
package/scss/_base_tables.scss CHANGED
@@ -40,8 +40,8 @@
40
40
  th {
41
41
  @extend %table-header-label;
42
42
 
43
- padding-bottom: $spv--large - map-get($nudges, nudge--x-small);
44
- padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
43
+ padding-bottom: $spv--large - map-get($nudges, x-small);
44
+ padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
45
45
  }
46
46
 
47
47
  tr {
package/scss/_base_typography-definitions.scss CHANGED
@@ -5,22 +5,22 @@
5
5
  font-style: normal;
6
6
  font-weight: $font-weight-display-heading;
7
7
  line-height: map-get($line-heights, h1-mobile);
8
- margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, nudge--h1-mobile);
8
+ margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, h1-mobile);
9
9
  margin-top: 0;
10
- max-width: $max-width--default;
11
- padding-top: map-get($nudges, nudge--h1-mobile) + map-get($browser-rounding-compensations, h1);
10
+ max-width: $text-max-width;
11
+ padding-top: map-get($nudges, h1-mobile) + map-get($browser-rounding-compensations, h1);
12
12
 
13
13
  @media (min-width: $breakpoint-heading-threshold) {
14
14
  font-size: #{map-get($font-sizes, h1)}rem;
15
15
  line-height: map-get($line-heights, h1);
16
- margin-bottom: map-get($sp-after, h1) - map-get($nudges, nudge--h1);
17
- padding-top: map-get($nudges, nudge--h1) + map-get($browser-rounding-compensations, h1);
16
+ margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1);
17
+ padding-top: map-get($nudges, h1) + map-get($browser-rounding-compensations, h1);
18
18
  }
19
19
 
20
20
  @if ($increase-font-size-on-larger-screens) {
21
21
  @media (min-width: $breakpoint-x-large) {
22
- margin-bottom: map-get($sp-after, h1) - map-get($nudges, nudge--h1-large);
23
- padding-top: map-get($nudges, nudge--h1-large) + map-get($browser-rounding-compensations, h1);
22
+ margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1-large);
23
+ padding-top: map-get($nudges, h1-large) + map-get($browser-rounding-compensations, h1);
24
24
  }
25
25
  }
26
26
 
@@ -34,16 +34,16 @@
34
34
  font-style: normal;
35
35
  font-weight: $font-weight-display-heading;
36
36
  line-height: map-get($line-heights, h2-mobile);
37
- margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, nudge--h2-mobile);
37
+ margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, h2-mobile);
38
38
  margin-top: 0;
39
- max-width: $max-width--default;
40
- padding-top: map-get($nudges, nudge--h2-mobile) + map-get($browser-rounding-compensations, h2);
39
+ max-width: $text-max-width;
40
+ padding-top: map-get($nudges, h2-mobile) + map-get($browser-rounding-compensations, h2);
41
41
 
42
42
  @media (min-width: $breakpoint-heading-threshold) {
43
43
  font-size: #{map-get($font-sizes, h2)}rem;
44
44
  line-height: map-get($line-heights, h2);
45
- margin-bottom: map-get($sp-after, h2) - map-get($nudges, nudge--h2);
46
- padding-top: map-get($nudges, nudge--h2) + map-get($browser-rounding-compensations, h2);
45
+ margin-bottom: map-get($sp-after, h2) - map-get($nudges, h2);
46
+ padding-top: map-get($nudges, h2) + map-get($browser-rounding-compensations, h2);
47
47
  }
48
48
 
49
49
  &.u-no-margin--bottom {
@@ -56,16 +56,16 @@
56
56
  font-style: normal;
57
57
  font-weight: $font-weight-display-heading;
58
58
  line-height: map-get($line-heights, h3-mobile);
59
- margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, nudge--h3-mobile);
59
+ margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, h3-mobile);
60
60
  margin-top: 0;
61
- max-width: $max-width--default;
62
- padding-top: map-get($nudges, nudge--h3-mobile);
61
+ max-width: $text-max-width;
62
+ padding-top: map-get($nudges, h3-mobile);
63
63
 
64
64
  @media (min-width: $breakpoint-heading-threshold) {
65
65
  font-size: #{map-get($font-sizes, h3)}rem;
66
66
  line-height: map-get($line-heights, h3);
67
- margin-bottom: map-get($sp-after, h3) - map-get($nudges, nudge--h3);
68
- padding-top: map-get($nudges, nudge--h3) + map-get($browser-rounding-compensations, h3);
67
+ margin-bottom: map-get($sp-after, h3) - map-get($nudges, h3);
68
+ padding-top: map-get($nudges, h3) + map-get($browser-rounding-compensations, h3);
69
69
  }
70
70
 
71
71
  &.u-no-margin--bottom {
@@ -78,22 +78,22 @@
78
78
  font-style: normal;
79
79
  font-weight: $font-weight-regular-text;
80
80
  line-height: map-get($line-heights, h4-mobile);
81
- margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, nudge--h4-mobile);
81
+ margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, h4-mobile);
82
82
  margin-top: 0;
83
- max-width: $max-width--default;
84
- padding-top: map-get($nudges, nudge--h4-mobile) + map-get($browser-rounding-compensations, h4);
83
+ max-width: $text-max-width;
84
+ padding-top: map-get($nudges, h4-mobile) + map-get($browser-rounding-compensations, h4);
85
85
 
86
86
  @media (min-width: $breakpoint-heading-threshold) {
87
87
  font-size: #{map-get($font-sizes, h4)}rem;
88
88
  line-height: map-get($line-heights, h4);
89
- margin-bottom: map-get($sp-after, h4) - map-get($nudges, nudge--h4);
90
- padding-top: map-get($nudges, nudge--h4) + map-get($browser-rounding-compensations, h4);
89
+ margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4);
90
+ padding-top: map-get($nudges, h4) + map-get($browser-rounding-compensations, h4);
91
91
  }
92
92
 
93
93
  @if ($increase-font-size-on-larger-screens) {
94
94
  @media (min-width: $breakpoint-x-large) {
95
- margin-bottom: map-get($sp-after, h4) - map-get($nudges, nudge--h4-large);
96
- padding-top: map-get($nudges, nudge--h4-large) + map-get($browser-rounding-compensations, h4);
95
+ margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4-large);
96
+ padding-top: map-get($nudges, h4-large) + map-get($browser-rounding-compensations, h4);
97
97
  }
98
98
  }
99
99
 
@@ -107,10 +107,10 @@
107
107
  font-style: normal;
108
108
  font-weight: $font-weight-bold;
109
109
  line-height: map-get($line-heights, default-text);
110
- margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
110
+ margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
111
111
  margin-top: 0;
112
- max-width: $max-width--default;
113
- padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, h5);
112
+ max-width: $text-max-width;
113
+ padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, h5);
114
114
 
115
115
  &.u-no-margin--bottom {
116
116
  @extend %u-no-margin--bottom--default-text;
@@ -122,14 +122,14 @@
122
122
  font-style: italic;
123
123
  font-weight: $font-weight-regular-text;
124
124
  line-height: map-get($line-heights, default-text);
125
- margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
125
+ margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
126
126
  margin-top: 0;
127
- max-width: $max-width--default;
128
- padding-top: map-get($nudges, nudge--h6) + map-get($browser-rounding-compensations, h6);
127
+ max-width: $text-max-width;
128
+ padding-top: map-get($nudges, h6) + map-get($browser-rounding-compensations, h6);
129
129
 
130
130
  @if ($increase-font-size-on-larger-screens) {
131
131
  @media (min-width: $breakpoint-x-large) {
132
- padding-top: map-get($nudges, nudge--h6-large) + map-get($browser-rounding-compensations, h6);
132
+ padding-top: map-get($nudges, h6-large) + map-get($browser-rounding-compensations, h6);
133
133
  }
134
134
  }
135
135
 
@@ -141,19 +141,19 @@
141
141
  %common-default-text-properties {
142
142
  line-height: map-get($line-heights, default-text);
143
143
  margin-top: 0;
144
- padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, p);
144
+ padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, p);
145
145
  }
146
146
 
147
147
  %default-text {
148
148
  @extend %common-default-text-properties;
149
149
 
150
- margin-bottom: map-get($sp-after, default-text) - map-get($nudges, nudge--p);
150
+ margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
151
151
  }
152
152
 
153
153
  %paragraph {
154
154
  @extend %common-default-text-properties;
155
155
 
156
- margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
156
+ margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
157
157
 
158
158
  &:not([class*='p-heading--']):not([class*='p-muted-heading']) + & {
159
159
  margin-top: -#{$sp-unit};
@@ -167,12 +167,12 @@
167
167
  %small-text {
168
168
  font-size: #{map-get($font-sizes, small)}rem;
169
169
  line-height: map-get($line-heights, small);
170
- margin-bottom: map-get($sp-after, small) - map-get($nudges, nudge--small);
171
- padding-top: map-get($nudges, nudge--small) + map-get($browser-rounding-compensations, small);
170
+ margin-bottom: map-get($sp-after, small) - map-get($nudges, small);
171
+ padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small);
172
172
 
173
173
  @if ($increase-font-size-on-larger-screens) {
174
174
  @media (min-width: $breakpoint-x-large) {
175
- padding-top: map-get($nudges, nudge--small) + map-get($browser-rounding-compensations, small-largescreen);
175
+ padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small-largescreen);
176
176
  }
177
177
  }
178
178
 
@@ -185,12 +185,12 @@
185
185
  font-size: #{map-get($font-sizes, x-small)}rem;
186
186
  font-weight: $font-weight-bold;
187
187
  line-height: map-get($line-heights, x-small);
188
- margin-bottom: map-get($sp-after, x-small) - map-get($nudges, nudge--x-small);
189
- padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small);
188
+ margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small);
189
+ padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small);
190
190
 
191
191
  @if ($increase-font-size-on-larger-screens) {
192
192
  @media (min-width: $breakpoint-x-large) {
193
- padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small-largescreen);
193
+ padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small-largescreen);
194
194
  }
195
195
  }
196
196
 
@@ -226,42 +226,42 @@
226
226
  // Placeholder naming: $sp + -- + {preceding element} + {following element}, e.g. for p + h1: $sp--ph1
227
227
 
228
228
  %sp--ph1 {
229
- padding-top: map-get($nudges, nudge--h1-mobile) + $spv--x-large;
229
+ padding-top: map-get($nudges, h1-mobile) + $spv--x-large;
230
230
 
231
231
  @media (min-width: $breakpoint-heading-threshold) {
232
- padding-top: map-get($nudges, nudge--h1) + $spv--x-large;
232
+ padding-top: map-get($nudges, h1) + $spv--x-large;
233
233
  }
234
234
  }
235
235
 
236
236
  %sp--ph2 {
237
- padding-top: map-get($nudges, nudge--h2-mobile) + $spv--x-large;
237
+ padding-top: map-get($nudges, h2-mobile) + $spv--x-large;
238
238
 
239
239
  @media (min-width: $breakpoint-heading-threshold) {
240
- padding-top: map-get($nudges, nudge--h2) + $spv--x-large;
240
+ padding-top: map-get($nudges, h2) + $spv--x-large;
241
241
  }
242
242
  }
243
243
 
244
244
  %sp--ph3 {
245
- padding-top: map-get($nudges, nudge--h3-mobile) + $spv--x-large;
245
+ padding-top: map-get($nudges, h3-mobile) + $spv--x-large;
246
246
 
247
247
  @media (min-width: $breakpoint-heading-threshold) {
248
- padding-top: map-get($nudges, nudge--h3) + $spv--x-large;
248
+ padding-top: map-get($nudges, h3) + $spv--x-large;
249
249
  }
250
250
  }
251
251
 
252
252
  %sp--ph4 {
253
- padding-top: map-get($nudges, nudge--h4-mobile) + $spv--x-large;
253
+ padding-top: map-get($nudges, h4-mobile) + $spv--x-large;
254
254
 
255
255
  @media (min-width: $breakpoint-heading-threshold) {
256
- padding-top: map-get($nudges, nudge--h4) + $spv--x-large;
256
+ padding-top: map-get($nudges, h4) + $spv--x-large;
257
257
  }
258
258
  }
259
259
 
260
260
  %sp--ph5 {
261
- padding-top: map-get($nudges, nudge--p) + $spv--x-large;
261
+ padding-top: map-get($nudges, p) + $spv--x-large;
262
262
  }
263
263
 
264
264
  %sp--pmuted {
265
- padding-top: map-get($nudges, nudge--small) + $spv--x-large;
265
+ padding-top: map-get($nudges, small) + $spv--x-large;
266
266
  }
267
267
  }
package/scss/_base_typography.scss CHANGED
@@ -58,7 +58,7 @@
58
58
  p {
59
59
  @extend %paragraph;
60
60
 
61
- max-width: $max-width--default;
61
+ max-width: $text-max-width;
62
62
  }
63
63
 
64
64
  .p-text--default {
@@ -70,7 +70,7 @@
70
70
  @extend %small-text;
71
71
 
72
72
  &.dense {
73
- margin-bottom: map-get($sp-after, small--dense) + map-get($line-heights, default-text) - map-get($line-heights, small) - map-get($nudges, nudge--small);
73
+ margin-bottom: map-get($sp-after, small--dense) + map-get($line-heights, default-text) - map-get($line-heights, small) - map-get($nudges, small);
74
74
  }
75
75
  }
76
76
 
package/scss/_global_functions.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use 'sass:math';
2
+
1
3
  // Functions used across multiple patterns or utils
2
4
 
3
5
  /// Replace `$search` with `$replace` in `$string`
package/scss/_layouts_application.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  // default max width of the pinned aside panel in the application layout
4
4
  $application-layout--aside-panel-max-width: 50vw !default;
5
5
  // screen width breakpoint (min-width) at which side navigation is in collapsed mode
6
- $application-layout--breakpoint-side-nav-collapsed: $breakpoint-medium !default;
6
+ $application-layout--breakpoint-side-nav-collapsed: $breakpoint-small !default;
7
7
  // screen width breakpoint (min-width) at which side navigation is in expanded mode
8
8
  $application-layout--breakpoint-side-nav-expanded: $breakpoint-large !default;
9
9
  // width of the collapsed side navigation
package/scss/_layouts_fluid-breakout.scss CHANGED
@@ -25,13 +25,13 @@
25
25
  }
26
26
 
27
27
  @media (min-width: $threshold-4-6-col) {
28
- padding-left: map-get($grid-margin-widths, medium);
29
- padding-right: map-get($grid-margin-widths, medium);
28
+ padding-left: map-get($grid-margin-widths, default);
29
+ padding-right: map-get($grid-margin-widths, default);
30
30
  }
31
31
 
32
32
  @media (min-width: $threshold-6-12-col) {
33
- padding-left: map-get($grid-margin-widths, large);
34
- padding-right: map-get($grid-margin-widths, large);
33
+ padding-left: map-get($grid-margin-widths, default);
34
+ padding-right: map-get($grid-margin-widths, default);
35
35
  }
36
36
 
37
37
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
@@ -51,8 +51,8 @@
51
51
  width: 100%;
52
52
 
53
53
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
54
- padding-left: map-get($grid-margin-widths, large);
55
- padding-right: map-get($grid-margin-widths, large);
54
+ padding-left: map-get($grid-margin-widths, default);
55
+ padding-right: map-get($grid-margin-widths, default);
56
56
  }
57
57
 
58
58
  @media (min-width: $breakpoint-large) {
@@ -97,11 +97,11 @@
97
97
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
98
98
 
99
99
  @media (min-width: $breakpoint-large) {
100
- padding-right: map-get($grid-margin-widths, large);
100
+ padding-right: map-get($grid-margin-widths, default);
101
101
  }
102
102
 
103
103
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
104
- padding-left: map-get($grid-margin-widths, large);
104
+ padding-left: map-get($grid-margin-widths, default);
105
105
  padding-right: 0;
106
106
  }
107
107
  }
@@ -110,13 +110,13 @@
110
110
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
111
111
 
112
112
  @media (min-width: $breakpoint-large) {
113
- padding-left: map-get($grid-margin-widths, large);
113
+ padding-left: map-get($grid-margin-widths, default);
114
114
  padding-right: 0;
115
115
  }
116
116
 
117
117
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
118
118
  padding-left: 0;
119
- padding-right: map-get($grid-margin-widths, large);
119
+ padding-right: map-get($grid-margin-widths, default);
120
120
  }
121
121
 
122
122
  @extend %l-fluid-breakout__aside-common-properties#{$suffix};
@@ -139,8 +139,8 @@
139
139
  }
140
140
 
141
141
  @media (min-width: $l-fluid-breakout-3-col-threshold) {
142
- margin-left: map-get($grid-margin-widths, large);
143
- margin-right: map-get($grid-margin-widths, large);
142
+ margin-left: map-get($grid-margin-widths, default);
143
+ margin-right: map-get($grid-margin-widths, default);
144
144
  }
145
145
  }
146
146
 
@@ -149,7 +149,7 @@
149
149
  grid-column: 2 / -1;
150
150
  grid-template-columns: repeat(2, minmax(0, 1fr));
151
151
 
152
- @media (max-width: $threshold-4-6-col) {
152
+ @media (max-width: $threshold-4-6-col - 1) {
153
153
  grid-template-columns: repeat(1, minmax(0, 1fr));
154
154
  width: $l-fluid-breakout-main-child-width;
155
155
  }
@@ -163,7 +163,7 @@
163
163
  &:nth-child(2) {
164
164
  justify-content: flex-end;
165
165
 
166
- @media (max-width: $threshold-4-6-col) {
166
+ @media (max-width: $threshold-4-6-col - 1) {
167
167
  justify-content: flex-start;
168
168
  }
169
169
  }
package/scss/_patterns_article-pagination.scss CHANGED
@@ -49,17 +49,14 @@
49
49
  width: 50%;
50
50
  }
51
51
 
52
- .p-article-pagination__link {
53
- @extend %p-article-pagination__link;
54
- }
55
-
56
52
  .p-article-pagination__link--previous {
57
53
  @extend %p-article-pagination__link;
58
54
 
59
55
  padding-left: $sp-xx-large;
60
56
  text-align: left;
61
57
 
62
- @media (max-width: $breakpoint-x-small) {
58
+ @media (max-width: $breakpoint-x-small - 1) {
59
+ margin-right: 0;
63
60
  width: auto;
64
61
 
65
62
  &:only-child {
@@ -87,7 +84,7 @@
87
84
  padding-right: $sp-xx-large;
88
85
  text-align: right;
89
86
 
90
- @media (max-width: $breakpoint-x-small) {
87
+ @media (max-width: $breakpoint-x-small - 1) {
91
88
  width: 100%;
92
89
  }
93
90
 
package/scss/_patterns_buttons.scss CHANGED
@@ -290,10 +290,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
290
290
 
291
291
  @mixin vf-button-inline {
292
292
  [class*='p-button'].is-inline {
293
- @media (min-width: $breakpoint-x-small) {
294
- margin-left: $sph--large;
295
- width: auto;
296
- }
293
+ margin-left: $sph--large;
297
294
  }
298
295
  }
299
296