@microsoft/atlas-css 3.6.0 → 3.8.2

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 (22) 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/index.scss +3 -0
  5. package/src/atomics/list.scss +3 -0
  6. package/src/atomics/overflow.scss +9 -0
  7. package/src/atomics/position.scss +2 -2
  8. package/src/atomics/spacing-auto.scss +51 -0
  9. package/src/atomics/spacing.scss +41 -16
  10. package/src/components/breadcrumbs.scss +20 -3
  11. package/src/components/button.scss +6 -6
  12. package/src/components/buttons.scss +9 -9
  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/scroll.scss +11 -0
  17. package/src/components/table.scss +1 -1
  18. package/src/core/bare-elements.scss +5 -0
  19. package/src/core/index.scss +1 -0
  20. package/src/core/themes.scss +2 -0
  21. package/src/index.scss +0 -1
  22. package/src/patterns/index.scss +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "3.6.0",
3
+ "version": "3.8.2",
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/index.scss CHANGED
@@ -2,9 +2,12 @@
2
2
  @import './border.scss';
3
3
  @import './colors.scss';
4
4
  @import './display.scss';
5
+ @import './overflow.scss';
5
6
  @import './shadow.scss';
7
+ @import './spacing-auto.scss';
6
8
  @import './spacing.scss';
7
9
  @import './flex.scss';
8
10
  @import './position.scss';
9
11
  @import './line-clamp.scss';
10
12
  @import './image.scss';
13
+ @import './list.scss';
package/src/atomics/list.scss ADDED
@@ -0,0 +1,3 @@
1
+ .list-style-none {
2
+ list-style: none !important;
3
+ }
package/src/atomics/overflow.scss ADDED
@@ -0,0 +1,9 @@
1
+ .overflow-hidden {
2
+ overflow: hidden;
3
+ }
4
+
5
+ @include tablet {
6
+ .overflow-hidden-tablet {
7
+ overflow: hidden;
8
+ }
9
+ }
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 ADDED
@@ -0,0 +1,51 @@
1
+ $auto-spacing-properties: (
2
+ ('margin-inline', 'margin-inline'),
3
+ ('margin-left', 'margin-inline-start'),
4
+ ('margin-right', 'margin-inline-end')
5
+ ) !default;
6
+
7
+ $separator: '-';
8
+
9
+ @each $property in $auto-spacing-properties {
10
+ $classicProp: nth($property, 1);
11
+ $logicalProp: nth($property, 2);
12
+
13
+ // .<property>-auto
14
+ .#{$classicProp}#{$separator}auto {
15
+ #{$logicalProp}: auto !important;
16
+ }
17
+ }
18
+
19
+ // .<property>-auto-<screensize>
20
+ @each $property in $auto-spacing-properties {
21
+ $classicProp: nth($property, 1);
22
+ $logicalProp: nth($property, 2);
23
+
24
+ @include tablet {
25
+ .#{$classicProp}#{$separator}auto#{$separator}tablet {
26
+ #{$logicalProp}: auto !important;
27
+ }
28
+ }
29
+ }
30
+
31
+ @each $property in $auto-spacing-properties {
32
+ $classicProp: nth($property, 1);
33
+ $logicalProp: nth($property, 2);
34
+
35
+ @include desktop {
36
+ .#{$classicProp}#{$separator}auto#{$separator}desktop {
37
+ #{$logicalProp}: auto !important;
38
+ }
39
+ }
40
+ }
41
+
42
+ @each $property in $auto-spacing-properties {
43
+ $classicProp: nth($property, 1);
44
+ $logicalProp: nth($property, 2);
45
+
46
+ @include widescreen {
47
+ .#{$classicProp}#{$separator}auto#{$separator}widescreen {
48
+ #{$logicalProp}: auto !important;
49
+ }
50
+ }
51
+ }
package/src/atomics/spacing.scss CHANGED
@@ -1,7 +1,20 @@
1
- $separator: '-';
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;
1
+ $separator: '-' !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/breadcrumbs.scss CHANGED
@@ -3,6 +3,12 @@ $breadcrumb-spacing-horizontal: 0.25em !default;
3
3
  $breadcrumb-spacing-vertical: 0.375em !default;
4
4
  $breadcrumb-separator: '\00200B/' !default;
5
5
 
6
+ %breadcrumbs-slash {
7
+ display: inline-block;
8
+ color: $text-subtle;
9
+ content: $breadcrumb-separator;
10
+ }
11
+
6
12
  .breadcrumbs {
7
13
  font-size: $breadcrumb-font-size;
8
14
 
@@ -11,10 +17,21 @@ $breadcrumb-separator: '\00200B/' !default;
11
17
  padding-block: $breadcrumb-spacing-vertical;
12
18
 
13
19
  &:not(.breadcrumbs-item-slashless)::after {
14
- display: inline-block;
20
+ @extend %breadcrumbs-slash;
21
+
15
22
  margin-inline: $breadcrumb-spacing-horizontal;
16
- color: $text-subtle;
17
- content: $breadcrumb-separator;
18
23
  }
19
24
  }
25
+
26
+ // stylelint-disable selector-max-specificity
27
+
28
+ &.breadcrumbs-initial-slash {
29
+ .breadcrumbs-item:first-child::before,
30
+ .breadcrumbs-item[hidden] + .breadcrumbs-item::before {
31
+ @extend %breadcrumbs-slash;
32
+
33
+ margin-inline: 0.0625em $breadcrumb-spacing-horizontal;
34
+ }
35
+ }
36
+ // stylelint-enable
20
37
  }
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/index.scss CHANGED
@@ -7,3 +7,4 @@
7
7
  @import './icon.scss';
8
8
  @import './popover.scss';
9
9
  @import './table.scss';
10
+ @import './scroll.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/scroll.scss ADDED
@@ -0,0 +1,11 @@
1
+ .scroll-horizontal {
2
+ overflow-x: auto;
3
+ overflow-y: hidden;
4
+ -webkit-overflow-scrolling: touch;
5
+ }
6
+
7
+ .scroll-vertical {
8
+ overflow-x: hidden;
9
+ overflow-y: auto;
10
+ -webkit-overflow-scrolling: touch;
11
+ }
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
+ 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';
package/src/core/themes.scss CHANGED
@@ -70,6 +70,8 @@ $theme-names: map.keys($themes);
70
70
  }
71
71
  }
72
72
 
73
+ // End validation
74
+
73
75
  %theme-base-styles {
74
76
  outline-color: $text;
75
77
  background-color: $body-background;
package/src/index.scss CHANGED
@@ -2,5 +2,4 @@
2
2
  @import './mixins/index.scss';
3
3
  @import './core/index.scss';
4
4
  @import './components/index.scss';
5
- @import './patterns/index.scss';
6
5
  @import './atomics/index.scss';
package/src/patterns/index.scss DELETED
@@ -1 +0,0 @@
1
- // TBD