@microsoft/atlas-css 3.7.0 → 3.8.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 (13) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/package.json +1 -1
  4. package/src/atomics/position.scss +2 -2
  5. package/src/atomics/spacing-auto.scss +26 -9
  6. package/src/atomics/spacing.scss +40 -15
  7. package/src/components/button.scss +6 -6
  8. package/src/components/buttons.scss +9 -9
  9. package/src/components/markdown.scss +19 -19
  10. package/src/components/popover.scss +5 -2
  11. package/src/components/table.scss +1 -1
  12. package/src/core/bare-elements.scss +5 -0
  13. package/src/core/index.scss +1 -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.8.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/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/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/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
@@ -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,5 @@
1
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
2
+
3
+ :is(details > *) {
4
+ box-sizing: border-box;
5
+ }
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';