@microsoft/atlas-css 3.57.2 → 3.58.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.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +3 -3
- package/src/components/button.scss +3 -4
- package/src/components/gradient.scss +2 -4
- package/src/components/hero.scss +1 -2
- package/src/components/layout.scss +2 -2
- package/src/components/segmented-control.scss +1 -0
- package/src/components/site-header.scss +6 -2
- package/src/core/themes.scss +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@microsoft/atlas-css",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.58.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",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"quicktype-core": "^23.0.48",
|
|
84
84
|
"grass": "^1.0.2",
|
|
85
85
|
"sass-export": "^2.1.2",
|
|
86
|
-
"stylelint": "^
|
|
86
|
+
"stylelint": "^16.10.0",
|
|
87
87
|
"stylelint-config-prettier": "^9.0.5",
|
|
88
88
|
"stylelint-prettier": "^3.0.0",
|
|
89
|
-
"wireit": "
|
|
89
|
+
"wireit": "0.14.9"
|
|
90
90
|
}
|
|
91
91
|
}
|
|
@@ -31,8 +31,7 @@ $button-font-weight: $weight-semibold !default;
|
|
|
31
31
|
@include unselectable;
|
|
32
32
|
|
|
33
33
|
justify-content: center;
|
|
34
|
-
padding-block
|
|
35
|
-
padding-block-end: $button-padding-vertical;
|
|
34
|
+
padding-block: $button-padding-vertical;
|
|
36
35
|
border-width: $button-border-width;
|
|
37
36
|
border-radius: $button-border-radius;
|
|
38
37
|
border-color: $button-border-color;
|
|
@@ -42,8 +41,7 @@ $button-font-weight: $weight-semibold !default;
|
|
|
42
41
|
text-align: center;
|
|
43
42
|
text-decoration: none;
|
|
44
43
|
cursor: pointer;
|
|
45
|
-
padding-inline
|
|
46
|
-
padding-inline-end: $button-padding-horizontal;
|
|
44
|
+
padding-inline: $button-padding-horizontal;
|
|
47
45
|
|
|
48
46
|
strong {
|
|
49
47
|
color: inherit;
|
|
@@ -172,6 +170,7 @@ $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
|
|
|
172
170
|
|
|
173
171
|
&.button-#{$name} {
|
|
174
172
|
color: $base;
|
|
173
|
+
|
|
175
174
|
@if $name == 'warning' {
|
|
176
175
|
color: $dark;
|
|
177
176
|
}
|
|
@@ -35,16 +35,14 @@ $border-gradient-direction: (
|
|
|
35
35
|
|
|
36
36
|
@if $direction == 'right' {
|
|
37
37
|
border-image-slice: 0 128 0 0;
|
|
38
|
-
inset-block
|
|
39
|
-
inset-block-end: 0;
|
|
38
|
+
inset-block: 0;
|
|
40
39
|
inset-inline-end: 0;
|
|
41
40
|
}
|
|
42
41
|
|
|
43
42
|
@if $direction == 'bottom' {
|
|
44
43
|
border-image-slice: 0 0 128 0;
|
|
45
44
|
inset-block-end: 0;
|
|
46
|
-
inset-inline
|
|
47
|
-
inset-inline-end: 0;
|
|
45
|
+
inset-inline: 0;
|
|
48
46
|
}
|
|
49
47
|
|
|
50
48
|
@include forced-colors {
|
package/src/components/hero.scss
CHANGED
|
@@ -54,8 +54,7 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
|
|
|
54
54
|
@include desktop {
|
|
55
55
|
min-height: $hero-min-height-default;
|
|
56
56
|
padding-block: $hero-padding-default;
|
|
57
|
-
padding-inline
|
|
58
|
-
padding-inline-end: $hero-padding-sm;
|
|
57
|
+
padding-inline: $hero-padding-sm;
|
|
59
58
|
}
|
|
60
59
|
|
|
61
60
|
.hero-details-card {
|
|
@@ -239,6 +239,7 @@ $default-flyout-width-widescreen: 480px;
|
|
|
239
239
|
'menu main flyout'
|
|
240
240
|
'footer footer footer';
|
|
241
241
|
}
|
|
242
|
+
|
|
242
243
|
@include widescreen {
|
|
243
244
|
grid-template:
|
|
244
245
|
minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
|
|
@@ -371,8 +372,7 @@ $default-flyout-width-widescreen: 480px;
|
|
|
371
372
|
@mixin constrained-layout-child {
|
|
372
373
|
position: sticky;
|
|
373
374
|
inset-block-start: 0;
|
|
374
|
-
overflow
|
|
375
|
-
overflow-y: auto;
|
|
375
|
+
overflow: hidden auto;
|
|
376
376
|
-webkit-overflow-scrolling: touch;
|
|
377
377
|
}
|
|
378
378
|
|
|
@@ -37,8 +37,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
|
|
|
37
37
|
position: absolute;
|
|
38
38
|
content: '';
|
|
39
39
|
border-block-end: $site-header-hover-underline-border;
|
|
40
|
-
inset-inline
|
|
41
|
-
inset-inline-end: 0;
|
|
40
|
+
inset-inline: 0;
|
|
42
41
|
inset-block-end: -$site-header-hover-underline-border-width;
|
|
43
42
|
}
|
|
44
43
|
}
|
|
@@ -75,6 +74,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
|
|
|
75
74
|
.site-header-button {
|
|
76
75
|
@include control;
|
|
77
76
|
@include unselectable;
|
|
77
|
+
|
|
78
78
|
@extend %site-header-control;
|
|
79
79
|
|
|
80
80
|
justify-content: center;
|
|
@@ -113,6 +113,8 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
|
|
|
113
113
|
&:hover,
|
|
114
114
|
&.is-hovered,
|
|
115
115
|
&:focus-visible {
|
|
116
|
+
text-decoration: none;
|
|
117
|
+
|
|
116
118
|
&:not([aria-expanded='true']) {
|
|
117
119
|
@extend %site-header-hover-underline;
|
|
118
120
|
}
|
|
@@ -153,6 +155,8 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
|
|
|
153
155
|
&.is-hovered,
|
|
154
156
|
&:focus-visible {
|
|
155
157
|
@extend %site-header-hover-underline;
|
|
158
|
+
|
|
159
|
+
text-decoration: none;
|
|
156
160
|
}
|
|
157
161
|
|
|
158
162
|
@include tablet {
|
package/src/core/themes.scss
CHANGED
|
@@ -29,8 +29,10 @@ $theme-names: map.keys($themes);
|
|
|
29
29
|
// Validation: ensure all properties in non-root themes exist in root
|
|
30
30
|
@each $theme-name in $theme-names {
|
|
31
31
|
$theme: map.get($themes, $theme-name);
|
|
32
|
+
|
|
32
33
|
@if $theme-name != $root-theme {
|
|
33
34
|
$root: map.get($themes, $root-theme);
|
|
35
|
+
|
|
34
36
|
@each $color-name, $val in $theme {
|
|
35
37
|
@if map.has-key($root, $color-name) != true {
|
|
36
38
|
@error '#{$color-name} from #{$theme-name} does not exist in theme: #{$theme-name}.';
|