@ons/design-system 74.0.0-next.10 → 74.0.0-next.11

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 (43) hide show
  1. package/components/access-code/example-access-code-error.njk +1 -1
  2. package/components/access-code/example-access-code.njk +1 -1
  3. package/components/address-input/_macro.njk +6 -6
  4. package/components/address-input/_macro.spec.js +0 -3
  5. package/components/address-output/_macro.njk +1 -1
  6. package/components/announcement-banner/_announcement-banner.scss +5 -0
  7. package/components/autosuggest/_autosuggest.scss +8 -0
  8. package/components/autosuggest/autosuggest.ui.js +8 -5
  9. package/components/back-to-top/_back-to-top.scss +7 -0
  10. package/components/back-to-top/_macro.njk +1 -1
  11. package/components/char-check-limit/_macro.njk +16 -14
  12. package/components/details/_details.scss +9 -0
  13. package/components/details/example-details-with-warning.njk +1 -1
  14. package/components/featured-article/_macro.njk +4 -4
  15. package/components/featured-article/macro.spec.js +2 -2
  16. package/components/feedback/_macro.njk +4 -1
  17. package/components/feedback/_macro.spec.js +1 -1
  18. package/components/figure/_figure.scss +1 -0
  19. package/components/figure/_macro.njk +3 -3
  20. package/components/footer/_macro.njk +5 -2
  21. package/components/hero/_hero.scss +4 -0
  22. package/components/input/_input.scss +4 -0
  23. package/components/input/_macro.njk +4 -1
  24. package/components/label/_label.scss +3 -0
  25. package/components/list/_list.scss +5 -0
  26. package/components/message-list/_message-list.scss +2 -0
  27. package/components/panel/_macro.njk +1 -1
  28. package/components/panel/_panel.scss +8 -0
  29. package/components/panel/example-panel-bare.njk +1 -1
  30. package/components/phase-banner/_phase-banner.scss +1 -0
  31. package/components/quote/_macro.njk +1 -1
  32. package/components/skip-to-content/_macro.njk +1 -1
  33. package/components/skip-to-content/_skip.scss +8 -0
  34. package/css/main.css +1 -1
  35. package/package.json +1 -1
  36. package/scripts/main.es5.js +1 -1
  37. package/scripts/main.js +1 -1
  38. package/scss/base/_typography.scss +9 -0
  39. package/scss/helpers/_mixins.scss +8 -0
  40. package/scss/utilities/_utilities.scss +10 -0
  41. package/scss/vars/_forms.scss +2 -1
  42. package/scss/vars/_index.scss +1 -0
  43. package/scss/vars/_utilities.scss +2 -0
package/scss/base/_typography.scss CHANGED
@@ -12,6 +12,7 @@ body {
12
12
 
13
13
  p {
14
14
  margin: 0 0 1rem;
15
+ @include reading-width;
15
16
  }
16
17
 
17
18
  h1,
@@ -26,6 +27,14 @@ h6 {
26
27
  }
27
28
  }
28
29
 
30
+ h2,
31
+ h3,
32
+ h4,
33
+ h5,
34
+ h6 {
35
+ @include reading-width;
36
+ }
37
+
29
38
  mark {
30
39
  @extend .ons-highlight;
31
40
 
package/scss/helpers/_mixins.scss CHANGED
@@ -98,3 +98,11 @@
98
98
  -moz-osx-font-smoothing: grayscale;
99
99
  -webkit-font-smoothing: antialiased;
100
100
  }
101
+
102
+ @mixin reading-width {
103
+ max-width: $reading-width;
104
+ }
105
+
106
+ @mixin no-reading-width {
107
+ max-width: none;
108
+ }
package/scss/utilities/_utilities.scss CHANGED
@@ -34,3 +34,13 @@
34
34
  @include bp-suffix(ons-u-wa--) {
35
35
  width: auto !important;
36
36
  }
37
+
38
+ // Utility class to restrict reading width (mixin defined in helpers/_mixins.scss)
39
+ .ons-u-reading-width {
40
+ @include reading-width;
41
+ }
42
+
43
+ // Utility class to override reading width restriction (mixin defined in helpers/_mixins.scss)
44
+ .ons-u-no-reading-width {
45
+ @include no-reading-width;
46
+ }
package/scss/vars/_forms.scss CHANGED
@@ -16,7 +16,8 @@ $nbsp-width: 0.288rem;
16
16
  @mixin input-width($class-name, $char-width: $char-max-width) {
17
17
  @each $width in $input-widths {
18
18
  .#{str-replace($class-name, '{x}', $width)} {
19
- max-width: input-width-calc($width, $char-width);
19
+ // Cap at reading-width so very wide classes don't exceed it
20
+ max-width: min(#{input-width-calc($width, $char-width)}, $reading-width);
20
21
  width: 100%;
21
22
 
22
23
  .ons-field__group & {
package/scss/vars/_index.scss CHANGED
@@ -3,3 +3,4 @@
3
3
  @import './typography';
4
4
  @import './grid';
5
5
  @import './forms';
6
+ @import './utilities';
package/scss/vars/_utilities.scss ADDED
@@ -0,0 +1,2 @@
1
+ // equivalent of 9 columns at standard width
2
+ $reading-width: 41.75rem; // 668px