@microsoft/atlas-css 3.7.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.css.map +1 -1
  3. package/package.json +1 -1
  4. package/src/atomics/README.md +5 -3
  5. package/src/atomics/index.scss +1 -0
  6. package/src/atomics/position.scss +2 -2
  7. package/src/atomics/spacing-auto.scss +26 -9
  8. package/src/atomics/spacing.scss +40 -15
  9. package/src/atomics/width.scss +44 -0
  10. package/src/components/button.scss +6 -6
  11. package/src/components/buttons.scss +9 -9
  12. package/src/components/checkbox.scss +114 -0
  13. package/src/components/index.scss +1 -0
  14. package/src/components/markdown.scss +19 -19
  15. package/src/components/popover.scss +6 -3
  16. package/src/components/table.scss +1 -1
  17. package/src/core/bare-elements.scss +6 -0
  18. package/src/core/index.scss +1 -0
  19. package/src/mixins/index.scss +1 -0
  20. package/src/mixins/visually-hidden.scss +12 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "3.7.0",
3
+ "version": "3.9.0",
4
4
  "description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
package/src/atomics/README.md CHANGED
@@ -35,11 +35,13 @@ While CSS properties are straightfoward (they just match the CSS), the value pro
35
35
  2. In some cases, such as themed colors values, values are associated concepts.
36
36
  - Such as `primary` in the class `.color-primary`. (The `primary` is blue on light theme and yellow on high contrast theme.)
37
37
  - Such as `semibold` in the class `font-weight-semibold`.
38
- 3. When a number value with a particular unit is involved, that value is typically represented as an at-least-two-letter-t-shirt size.
38
+ 3. When a value refers to a pixel value is involved we will just write out the number.
39
+ - Some width based classes use this approach. `width-100` means `width: 100px`.
40
+ 4. When a em/rem value is involved, that value is typically represented as an at-least-two-letter-t-shirt size.
39
41
  - Spacing and non-heading typography values follow this convention, as in `xs, sm, md, lg, xl, xxl` in `margin-top-xl`, and `font-size-md`.
40
42
  - Within a set of values that require units such as the one above, 0 is represented by the string `none`.
41
- 4. Within a series of values that are all unitless numbers, those numbers are used directly, as in `flex-grow: 1;` being represented by `flex-grow-1`.
42
- 5. When a shorthand property's value is multi-part, we choose a reasonable default and omit the value completely.
43
+ 5. Within a series of values that are all unitless numbers, those numbers are used directly, as in `flex-grow: 1;` being represented by `flex-grow-1`.
44
+ 6. When a shorthand property's value is multi-part, we choose a reasonable default and omit the value completely.
43
45
  - In the case `border: 1px solid $border` the class becomes simply `.border`.
44
46
  - In this case further modification would still be available.
45
47
 
package/src/atomics/index.scss CHANGED
@@ -11,3 +11,4 @@
11
11
  @import './line-clamp.scss';
12
12
  @import './image.scss';
13
13
  @import './list.scss';
14
+ @import './width.scss';
package/src/atomics/position.scss CHANGED
@@ -12,8 +12,8 @@
12
12
  }
13
13
  }
14
14
 
15
- @each $side, $direction in $directions {
15
+ @each $side, $direction in $logical-directions {
16
16
  .#{$side}-0 {
17
- #{$direction}: 0;
17
+ inset-#{$direction}: 0;
18
18
  }
19
19
  }
package/src/atomics/spacing-auto.scss CHANGED
@@ -1,34 +1,51 @@
1
- $auto-spacing-properties: 'margin-inline', 'margin-left', 'margin-right' !default;
1
+ $auto-spacing-properties: (
2
+ ('margin-inline', 'margin-inline'),
3
+ ('margin-left', 'margin-inline-start'),
4
+ ('margin-right', 'margin-inline-end')
5
+ ) !default;
6
+
2
7
  $separator: '-';
3
8
 
4
9
  @each $property in $auto-spacing-properties {
10
+ $classicProp: nth($property, 1);
11
+ $logicalProp: nth($property, 2);
12
+
5
13
  // .<property>-auto
6
- .#{$property}#{$separator}auto {
7
- #{$property}: auto !important;
14
+ .#{$classicProp}#{$separator}auto {
15
+ #{$logicalProp}: auto !important;
8
16
  }
9
17
  }
10
18
 
11
19
  // .<property>-auto-<screensize>
12
20
  @each $property in $auto-spacing-properties {
21
+ $classicProp: nth($property, 1);
22
+ $logicalProp: nth($property, 2);
23
+
13
24
  @include tablet {
14
- .#{$property}#{$separator}auto#{$separator}tablet {
15
- #{$property}: auto !important;
25
+ .#{$classicProp}#{$separator}auto#{$separator}tablet {
26
+ #{$logicalProp}: auto !important;
16
27
  }
17
28
  }
18
29
  }
19
30
 
20
31
  @each $property in $auto-spacing-properties {
32
+ $classicProp: nth($property, 1);
33
+ $logicalProp: nth($property, 2);
34
+
21
35
  @include desktop {
22
- .#{$property}#{$separator}auto#{$separator}desktop {
23
- #{$property}: auto !important;
36
+ .#{$classicProp}#{$separator}auto#{$separator}desktop {
37
+ #{$logicalProp}: auto !important;
24
38
  }
25
39
  }
26
40
  }
27
41
 
28
42
  @each $property in $auto-spacing-properties {
43
+ $classicProp: nth($property, 1);
44
+ $logicalProp: nth($property, 2);
45
+
29
46
  @include widescreen {
30
- .#{$property}#{$separator}auto#{$separator}widescreen {
31
- #{$property}: auto !important;
47
+ .#{$classicProp}#{$separator}auto#{$separator}widescreen {
48
+ #{$logicalProp}: auto !important;
32
49
  }
33
50
  }
34
51
  }
package/src/atomics/spacing.scss CHANGED
@@ -1,7 +1,20 @@
1
1
  $separator: '-' !default;
2
- $spacing-properties: 'margin', 'margin-inline', 'margin-block', 'margin-top', 'margin-bottom',
3
- 'margin-left', 'margin-right', 'padding', 'padding-inline', 'padding-block', 'padding-top',
4
- 'padding-bottom', 'padding-left', 'padding-right' !default;
2
+ $logical-spacing-properties: (
3
+ ('margin', 'margin'),
4
+ ('margin-inline', 'margin-inline'),
5
+ ('margin-block', 'margin-block'),
6
+ ('margin-top', 'margin-block-start'),
7
+ ('margin-bottom', 'margin-block-end'),
8
+ ('margin-left', 'margin-inline-start'),
9
+ ('margin-right', 'margin-inline-end'),
10
+ ('padding', 'padding'),
11
+ ('padding-inline', 'padding-inline'),
12
+ ('padding-block', 'padding-block'),
13
+ ('padding-top', 'padding-block-start'),
14
+ ('padding-bottom', 'padding-block-end'),
15
+ ('padding-left', 'padding-inline-start'),
16
+ ('padding-right', 'padding-inline-end')
17
+ ) !default;
5
18
 
6
19
  $layout-sizes: (
7
20
  ('xxs', $layout-1),
@@ -21,52 +34,64 @@ $layout-sizes: (
21
34
 
22
35
  // Pattern: <cssproperty>-<value>-<screen>
23
36
 
24
- @each $property in $spacing-properties {
37
+ @each $property in $logical-spacing-properties {
38
+ $classicProp: nth($property, 1);
39
+ $logicalProp: nth($property, 2);
40
+
25
41
  @each $size in $layout-sizes {
26
42
  $sizeKey: nth($size, 1);
27
43
  $sizeValue: nth($size, 2);
28
44
 
29
45
  // .<property>-<value>
30
- .#{$property}#{$separator}#{$sizeKey} {
31
- #{$property}: sizeValue($sizeKey, $sizeValue) !important;
46
+ .#{$classicProp}#{$separator}#{$sizeKey} {
47
+ #{$logicalProp}: sizeValue($sizeKey, $sizeValue) !important;
32
48
  }
33
49
  }
34
50
  }
35
51
 
36
52
  @include tablet {
37
- @each $property in $spacing-properties {
53
+ @each $property in $logical-spacing-properties {
54
+ $classicProp: nth($property, 1);
55
+ $logicalProp: nth($property, 2);
56
+
38
57
  @each $size in $layout-sizes {
39
58
  $sizeKey: nth($size, 1);
40
59
  $sizeValue: nth($size, 2);
41
60
 
42
- .#{$property}#{$separator}#{$sizeKey}#{$separator}tablet {
43
- #{$property}: $sizeValue !important;
61
+ .#{$classicProp}#{$separator}#{$sizeKey}#{$separator}tablet {
62
+ #{$logicalProp}: $sizeValue !important;
44
63
  }
45
64
  }
46
65
  }
47
66
  }
48
67
 
49
68
  @include desktop {
50
- @each $property in $spacing-properties {
69
+ @each $property in $logical-spacing-properties {
70
+ $classicProp: nth($property, 1);
71
+ $logicalProp: nth($property, 2);
72
+
51
73
  @each $size in $layout-sizes {
52
74
  $sizeKey: nth($size, 1);
53
75
  $sizeValue: nth($size, 2);
54
76
 
55
- .#{$property}#{$separator}#{$sizeKey}#{$separator}desktop {
56
- #{$property}: $sizeValue !important;
77
+ .#{$classicProp}#{$separator}#{$sizeKey}#{$separator}desktop {
78
+ #{$logicalProp}: $sizeValue !important;
57
79
  }
58
80
  }
59
81
  }
60
82
  }
61
83
 
62
84
  @include widescreen {
63
- @each $property in $spacing-properties {
85
+ @each $property in $logical-spacing-properties {
86
+ $classicProp: nth($property, 1);
87
+ $logicalProp: nth($property, 2);
88
+
64
89
  @each $size in $layout-sizes {
65
90
  $sizeKey: nth($size, 1);
66
91
  $sizeValue: nth($size, 2);
67
92
 
68
- .#{$property}#{$separator}#{$sizeKey}#{$separator}widescreen {
69
- #{$property}: $sizeValue !important;
93
+ .#{$classicProp}#{$separator}#{$sizeKey}#{$separator}widescreen {
94
+ #{$logicalProp}: $sizeValue !important;
70
95
  }
71
96
  }
72
97
  }
package/src/atomics/width.scss ADDED
@@ -0,0 +1,44 @@
1
+ @use 'sass:list';
2
+
3
+ $universal-widths: auto, 100, 150, 200, 250, 300, 350 !default;
4
+ $mobile-incompatible-widths: 400, 450, unset !default;
5
+ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
6
+
7
+ // widths
8
+
9
+ .width-full {
10
+ width: 100% !important;
11
+ }
12
+
13
+ @each $width in $universal-widths {
14
+ $unit: if($width != auto, 'px', '');
15
+ .width-#{$width} {
16
+ width: #{$width}#{$unit} !important;
17
+ }
18
+ }
19
+
20
+ @include tablet {
21
+ .width-full-tablet {
22
+ width: 100% !important;
23
+ }
24
+
25
+ @each $width in $all-widths {
26
+ $unit: if($width != auto and $width != unset, 'px', '');
27
+ .width-#{$width}-tablet {
28
+ width: #{$width}#{$unit} !important;
29
+ }
30
+ }
31
+ }
32
+
33
+ @include desktop {
34
+ .width-full-desktop {
35
+ width: 100% !important;
36
+ }
37
+
38
+ @each $width in $all-widths {
39
+ $unit: if($width != auto and $width != unset, 'px', '');
40
+ .width-#{$width}-desktop {
41
+ width: #{$width}#{$unit} !important;
42
+ }
43
+ }
44
+ }
package/src/components/button.scss CHANGED
@@ -29,8 +29,8 @@ $button-font-weight: $weight-semibold !default;
29
29
  @include unselectable;
30
30
 
31
31
  justify-content: center;
32
- padding-top: $button-padding-vertical;
33
- padding-bottom: $button-padding-vertical;
32
+ padding-block-start: $button-padding-vertical;
33
+ padding-block-end: $button-padding-vertical;
34
34
  border-width: $button-border-width;
35
35
  border-radius: $button-border-radius;
36
36
  border-color: $button-border-color;
@@ -40,8 +40,8 @@ $button-font-weight: $weight-semibold !default;
40
40
  text-align: center;
41
41
  text-decoration: none;
42
42
  cursor: pointer;
43
- padding-#{$user-left}: $button-padding-horizontal;
44
- padding-#{$user-right}: $button-padding-horizontal;
43
+ padding-inline-start: $button-padding-horizontal;
44
+ padding-inline-end: $button-padding-horizontal;
45
45
 
46
46
  strong {
47
47
  color: inherit;
@@ -53,11 +53,11 @@ $button-font-weight: $weight-semibold !default;
53
53
  }
54
54
 
55
55
  &:first-child:not(:only-child) {
56
- margin-#{$user-right}: $button-icon-spacing;
56
+ margin-inline-end: $button-icon-spacing;
57
57
  }
58
58
 
59
59
  &:last-child:not(:only-child) {
60
- margin-#{$user-left}: $button-icon-spacing;
60
+ margin-inline-start: $button-icon-spacing;
61
61
  }
62
62
  }
63
63
 
package/src/components/buttons.scss CHANGED
@@ -15,31 +15,31 @@
15
15
  }
16
16
 
17
17
  .button {
18
- margin-bottom: 0.5rem;
19
- margin-#{$user-right}: 0.5rem;
18
+ margin-block-end: 0.5rem;
19
+ margin-inline-end: 0.5rem;
20
20
 
21
21
  &:only-child,
22
22
  &.is-fullwidth,
23
23
  &.is-full-width {
24
- margin-#{$user-right}: 0;
24
+ margin-inline-end: 0;
25
25
  }
26
26
 
27
27
  &.is-full-width-mobile,
28
28
  &.is-fullwidth-mobile {
29
- margin-#{$user-right}: 0;
29
+ margin-inline-end: 0;
30
30
 
31
31
  @include tablet {
32
- margin-#{$user-right}: 0.5rem;
32
+ margin-inline-end: 0.5rem;
33
33
  }
34
34
  }
35
35
  }
36
36
 
37
37
  &:last-child {
38
- margin-bottom: -0.5rem;
38
+ margin-block-end: -0.5rem;
39
39
  }
40
40
 
41
41
  &:not(:last-child) {
42
- margin-bottom: 1rem;
42
+ margin-block-end: 1rem;
43
43
  }
44
44
 
45
45
  &.buttons-addons {
@@ -52,11 +52,11 @@
52
52
  &:not(:last-child) {
53
53
  border-bottom-#{$user-right}-radius: 0;
54
54
  border-top-#{$user-right}-radius: 0;
55
- margin-#{$user-right}: -1px;
55
+ margin-inline-end: -1px;
56
56
  }
57
57
 
58
58
  &:last-child {
59
- margin-#{$user-right}: 0;
59
+ margin-inline-end: 0;
60
60
  }
61
61
 
62
62
  &:hover,
package/src/components/checkbox.scss ADDED
@@ -0,0 +1,114 @@
1
+ /* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */
2
+
3
+ $checkbox-border-radius: $radius-sm !default;
4
+ $checkbox-border-width: 0.0625em !default;
5
+ $checkbox-unchecked-border-color: $text !default;
6
+ $checkbox-color: $primary !default;
7
+ $checkbox-check-color: $primary-invert !default;
8
+ $checkbox-check-hover-color: $text-subtle !default;
9
+ $checkbox-size: 1.25em !default;
10
+ $checkbox-check-height: 0.75em !default;
11
+ $checkbox-check-top: 0.125em !default;
12
+ $checkbox-check-width: 0.3125em !default;
13
+ $checkbox-check-thickness: 0.0625em !default;
14
+ $checkbox-timing-function: $input-timing-function !default;
15
+ $checkbox-duration: $input-transition-duration !default;
16
+ $checkbox-spacing: $spacer-3 !default;
17
+
18
+ @mixin checkmark {
19
+ display: block;
20
+ position: absolute;
21
+ inset-block-start: $checkbox-check-top;
22
+ width: $checkbox-check-width;
23
+ height: $checkbox-check-height;
24
+ transform: rotate(45deg);
25
+ border: solid $checkbox-check-hover-color;
26
+ border-width: 0 $checkbox-check-thickness $checkbox-check-thickness 0;
27
+ content: '';
28
+ }
29
+
30
+ .checkbox {
31
+ display: flex;
32
+ position: relative;
33
+ align-items: center;
34
+ line-height: 1.25;
35
+ cursor: pointer;
36
+
37
+ .checkbox-check {
38
+ display: flex;
39
+ flex-shrink: 0;
40
+ align-items: center;
41
+ justify-content: center;
42
+ width: $checkbox-size;
43
+ height: $checkbox-size;
44
+ transition-duration: $checkbox-duration;
45
+ transition-property: background, border, border-color;
46
+ transition-timing-function: $checkbox-timing-function;
47
+ border: $checkbox-border-width solid $checkbox-unchecked-border-color;
48
+ border-radius: $checkbox-border-radius;
49
+
50
+ &:not(:last-child) {
51
+ margin-inline-end: 0.5rem;
52
+ }
53
+
54
+ &::before {
55
+ content: '\0020';
56
+ }
57
+ }
58
+
59
+ &:hover .checkbox-check::before {
60
+ @include checkmark;
61
+ }
62
+
63
+ &.checkbox-sm {
64
+ font-size: $font-size-8;
65
+ }
66
+
67
+ input[type='checkbox'] {
68
+ @include visually-hidden();
69
+
70
+ &:focus-visible + .checkbox-check {
71
+ @extend %focus;
72
+ }
73
+
74
+ &:checked + .checkbox-check {
75
+ border-color: $checkbox-color;
76
+ background-color: $checkbox-color;
77
+
78
+ &::before {
79
+ @include checkmark;
80
+
81
+ border-color: $checkbox-check-color;
82
+ }
83
+ }
84
+
85
+ &[disabled] + .checkbox-check {
86
+ opacity: 0.6;
87
+ cursor: not-allowed;
88
+ }
89
+ }
90
+
91
+ &.checkbox-muted {
92
+ input[type='checkbox'] {
93
+ &:checked + .checkbox-check {
94
+ border-color: $text-subtle;
95
+ background-color: $text-subtle;
96
+
97
+ &::before {
98
+ border-color: $text-invert;
99
+ }
100
+ }
101
+ }
102
+ }
103
+
104
+ .checkbox-check.is-checked {
105
+ border-color: $checkbox-color;
106
+ background-color: $checkbox-color;
107
+
108
+ &::before {
109
+ @include checkmark;
110
+
111
+ border-color: $checkbox-check-color;
112
+ }
113
+ }
114
+ }
package/src/components/index.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @import './button.scss';
3
3
  @import './buttons.scss';
4
4
  @import './button-reset.scss';
5
+ @import './checkbox.scss';
5
6
  @import './link-button.scss';
6
7
  @import './markdown.scss'; // must be ordered after code-block
7
8
  @import './icon.scss';
package/src/components/markdown.scss CHANGED
@@ -43,12 +43,12 @@ $list-top-spacing: 1rem !default;
43
43
  }
44
44
 
45
45
  li {
46
- margin-top: 0.5em;
46
+ margin-block-start: 0.5em;
47
47
  }
48
48
 
49
49
  ul,
50
50
  ol {
51
- margin-#{$user-left}: 2.375rem;
51
+ margin-inline-start: 2.375rem;
52
52
  }
53
53
 
54
54
  ul {
@@ -57,7 +57,7 @@ $list-top-spacing: 1rem !default;
57
57
  ul {
58
58
  list-style-type: circle;
59
59
  margin: 0;
60
- margin-#{$user-left}: 1.25rem;
60
+ margin-inline-start: 1.25rem;
61
61
 
62
62
  ul {
63
63
  list-style-type: square;
@@ -75,7 +75,7 @@ $list-top-spacing: 1rem !default;
75
75
  ol {
76
76
  list-style-type: lower-alpha;
77
77
  margin: 0;
78
- margin-#{$user-left}: 1.25rem;
78
+ margin-inline-start: 1.25rem;
79
79
 
80
80
  ol {
81
81
  list-style-type: lower-roman;
@@ -90,56 +90,56 @@ $list-top-spacing: 1rem !default;
90
90
  h1 {
91
91
  @include responsive-font-size($font-size-1);
92
92
 
93
- margin-top: none;
94
- margin-bottom: 0.75rem;
93
+ margin-block-start: none;
94
+ margin-block-end: 0.75rem;
95
95
  word-wrap: break-word; // browser support fallback, because FF and IE
96
96
  word-break: break-word;
97
97
 
98
98
  &:first-of-type {
99
- margin-top: -0.625rem;
100
- margin-bottom: none;
99
+ margin-block-start: -0.625rem;
100
+ margin-block-end: none;
101
101
  }
102
102
  }
103
103
 
104
104
  h2 {
105
105
  @include responsive-font-size($font-size-2);
106
106
 
107
- margin-top: 2rem;
107
+ margin-block-start: 2rem;
108
108
  }
109
109
 
110
110
  h3 {
111
111
  @include responsive-font-size($font-size-3);
112
112
 
113
- margin-top: 1.875rem;
114
- margin-bottom: 1.125rem;
113
+ margin-block-start: 1.875rem;
114
+ margin-block-end: 1.125rem;
115
115
  }
116
116
 
117
117
  h4 {
118
118
  @include responsive-font-size($font-size-4);
119
119
 
120
- margin-top: 2.25rem;
121
- margin-bottom: 0.375rem;
120
+ margin-block-start: 2.25rem;
121
+ margin-block-end: 0.375rem;
122
122
  }
123
123
 
124
124
  h5 {
125
125
  @include responsive-font-size($font-size-5, false, 1.1rem);
126
126
 
127
- margin-top: 2.25rem;
128
- margin-bottom: 0.375rem;
127
+ margin-block-start: 2.25rem;
128
+ margin-block-end: 0.375rem;
129
129
  letter-spacing: 1px;
130
130
  }
131
131
 
132
132
  h6 {
133
133
  @include responsive-font-size($font-size-6, false, 1.05rem);
134
134
 
135
- margin-top: 2.25rem;
136
- margin-bottom: 0.375rem;
135
+ margin-block-start: 2.25rem;
136
+ margin-block-end: 0.375rem;
137
137
  letter-spacing: 1px;
138
138
  }
139
139
 
140
140
  p {
141
- margin-top: $markdown-paragraph-size;
142
- margin-bottom: none;
141
+ margin-block-start: $markdown-paragraph-size;
142
+ margin-block-end: none;
143
143
  word-wrap: break-word;
144
144
  }
145
145
 
package/src/components/popover.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  $popover-background-color: $body-background !default;
2
- $popover-border: $border-width solid $border-white-high-contrast !default;
2
+ $popover-border: $border-width solid $border !default;
3
3
  $popover-border-radius: $border-radius !default;
4
4
  $popover-shadow: $box-shadow-heavy !default;
5
5
  $popover-width: 224px !default;
@@ -10,18 +10,21 @@ $popover-width: 224px !default;
10
10
 
11
11
  summary {
12
12
  list-style: none;
13
+
14
+ &::-webkit-details-marker {
15
+ display: none;
16
+ }
13
17
  }
14
18
 
15
19
  .popover-content {
16
20
  position: absolute;
17
21
  width: $popover-width;
18
- margin-top: $spacer-3;
22
+ margin-block-start: $spacer-3;
19
23
  padding: $spacer-5;
20
24
  border: $popover-border;
21
25
  border-radius: $popover-border-radius;
22
26
  background-color: $popover-background-color;
23
27
  box-shadow: $popover-shadow;
24
- overflow: hidden;
25
28
  z-index: $zindex-popover;
26
29
  }
27
30
 
package/src/components/table.scss CHANGED
@@ -59,7 +59,7 @@ $table-caption-spacing: $letter-spacing-medium !default;
59
59
  }
60
60
 
61
61
  td:not(:nth-child(1)) {
62
- padding-top: 0;
62
+ padding-block-start: 0;
63
63
  border-width: 0;
64
64
  }
65
65
  }
package/src/core/bare-elements.scss ADDED
@@ -0,0 +1,6 @@
1
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
2
+
3
+ details,
4
+ details > * {
5
+ box-sizing: border-box !important;
6
+ }
package/src/core/index.scss CHANGED
@@ -4,3 +4,4 @@
4
4
  @import './font-stack.scss';
5
5
  @import './animations.scss';
6
6
  @import './focus.scss';
7
+ @import './bare-elements.scss';
package/src/mixins/index.scss CHANGED
@@ -7,3 +7,4 @@
7
7
  @import './font-size.scss';
8
8
  @import './transparency.scss';
9
9
  @import './unselectable.scss';
10
+ @import './visually-hidden.scss';
package/src/mixins/visually-hidden.scss ADDED
@@ -0,0 +1,12 @@
1
+ @mixin visually-hidden() {
2
+ position: absolute;
3
+ width: 1px;
4
+ height: 1px;
5
+ margin: -1px;
6
+ padding: 0;
7
+ border: 0;
8
+ overflow: hidden;
9
+ clip: rect(1px, 1px, 1px, 1px);
10
+ clip-path: inset(50%);
11
+ word-wrap: normal;
12
+ }