@microsoft/atlas-css 3.46.0 → 3.47.1

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/class-names.json +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +1 -1
  5. package/src/atomics/height.scss +3 -0
  6. package/src/atomics/index.scss +1 -0
  7. package/src/atomics/overflow.scss +10 -2
  8. package/src/components/form/checkbox.scss +1 -1
  9. package/src/components/form/radio.scss +3 -2
  10. package/src/components/index.scss +1 -0
  11. package/src/components/progress-bar.scss +135 -0
  12. package/src/components/toggle.scss +2 -2
  13. package/src/core/animations.scss +10 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/atlas-css",
3
- "version": "3.46.0",
3
+ "version": "3.47.1",
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/height.scss ADDED
@@ -0,0 +1,3 @@
1
+ .height-full {
2
+ height: 100% !important;
3
+ }
package/src/atomics/index.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import './colors.scss';
6
6
  @import './display.scss';
7
7
  @import './gap.scss';
8
+ @import './height.scss';
8
9
  @import './overflow.scss';
9
10
  @import './shadow.scss';
10
11
  @import './spacing-auto.scss';
package/src/atomics/overflow.scss CHANGED
@@ -1,9 +1,17 @@
1
1
  .overflow-hidden {
2
- overflow: hidden;
2
+ overflow: hidden !important;
3
+ }
4
+
5
+ .overflow-x-hidden {
6
+ overflow-x: hidden !important;
3
7
  }
4
8
 
5
9
  @include tablet {
6
10
  .overflow-hidden-tablet {
7
- overflow: hidden;
11
+ overflow: hidden !important;
12
+ }
13
+
14
+ .overflow-x-hidden-tablet {
15
+ overflow-x: hidden !important;
8
16
  }
9
17
  }
package/src/components/form/checkbox.scss CHANGED
@@ -11,7 +11,7 @@ $checkbox-size: 1.25em !default;
11
11
  $checkbox-check-height: 0.75em !default;
12
12
  $checkbox-check-top: 0.125em !default;
13
13
  $checkbox-check-width: 0.3125em !default;
14
- $checkbox-check-thickness: 0.0625em !default;
14
+ $checkbox-check-thickness: 0.125em !default;
15
15
  $checkbox-timing-function: $input-timing-function !default;
16
16
  $checkbox-duration: $input-transition-duration !default;
17
17
  $checkbox-spacing: $spacer-3 !default;
package/src/components/form/radio.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  $radio-circle-size: 1.25em !default;
2
2
  $radio-dot-size: 0.625em !default;
3
+ $radio-shadow-radius: 0.15em !default;
3
4
  $radio-border-color: $control-border !default;
4
5
  $radio-border-width: $control-border-width !default;
5
6
  $radio-dot-checked-color: $primary !default;
@@ -23,7 +24,7 @@ $radio-spacing: 0.5em !default;
23
24
 
24
25
  @mixin radio-dot-checked {
25
26
  background: $radio-dot-checked-color;
26
- box-shadow: inset 0 0 0 0.25em $body-background;
27
+ box-shadow: inset 0 0 0 $radio-shadow-radius $body-background;
27
28
  }
28
29
 
29
30
  .radio {
@@ -94,7 +95,7 @@ $radio-spacing: 0.5em !default;
94
95
  &:hover {
95
96
  .radio-dot:not(:checked):not([disabled]) {
96
97
  background: $radio-dot-hover-unchecked-color;
97
- box-shadow: inset 0 0 0 0.25em $body-background;
98
+ box-shadow: inset 0 0 0 $radio-shadow-radius $body-background;
98
99
 
99
100
  @include forced-colors {
100
101
  background-color: unset !important;
package/src/components/index.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  @import './persona.scss';
20
20
  @import './popover.scss';
21
21
  @import './pagination.scss';
22
+ @import './progress-bar.scss';
22
23
  @import './table.scss';
23
24
  @import './toggle.scss';
24
25
  @import './scroll.scss';
package/src/components/progress-bar.scss ADDED
@@ -0,0 +1,135 @@
1
+ $progress-bar-background-color: $secondary-background-glow-high-contrast !default;
2
+ $progress-bar-value-background-color: $primary !default;
3
+ $progress-bar-value-background-color-warning: $warning !default;
4
+ $progress-bar-value-background-color-danger: $danger !default;
5
+ $progress-bar-value-background-color-success: $success !default;
6
+ $progress-bar-height: $spacer-2 !default;
7
+ $progress-bar-height-sm: $spacer-1 !default;
8
+ $progress-bar-border-radius: $border-radius-rounded !default;
9
+ $progress-bar-indeterminate-animation-duration: 2s !default;
10
+
11
+ .progress-bar {
12
+ display: block;
13
+ width: 100%;
14
+ max-width: 100%;
15
+ height: $progress-bar-height;
16
+ padding: 0;
17
+ border: none;
18
+ border-radius: $progress-bar-border-radius;
19
+ background-color: $progress-bar-background-color;
20
+ appearance: none;
21
+ overflow: hidden;
22
+
23
+ &::-webkit-progress-bar {
24
+ background-color: $progress-bar-background-color;
25
+ }
26
+
27
+ &::-webkit-progress-value {
28
+ background-color: $progress-bar-value-background-color;
29
+ }
30
+
31
+ &::-moz-progress-bar {
32
+ background-color: $progress-bar-value-background-color;
33
+ }
34
+
35
+ // Size
36
+
37
+ &.progress-bar-sm {
38
+ height: $progress-bar-height-sm;
39
+ }
40
+
41
+ // Colors
42
+
43
+ &.progress-bar-success {
44
+ &::-webkit-progress-value {
45
+ background-color: $progress-bar-value-background-color-success;
46
+ }
47
+
48
+ &::-moz-progress-bar {
49
+ background-color: $progress-bar-value-background-color-success;
50
+ }
51
+ }
52
+
53
+ &.progress-bar-danger {
54
+ &::-webkit-progress-value {
55
+ background-color: $progress-bar-value-background-color-danger;
56
+ }
57
+
58
+ &::-moz-progress-bar {
59
+ background-color: $progress-bar-value-background-color-danger;
60
+ }
61
+ }
62
+
63
+ &.progress-bar-warning {
64
+ &::-webkit-progress-value {
65
+ background-color: $progress-bar-value-background-color-warning;
66
+ }
67
+
68
+ &::-moz-progress-bar {
69
+ background-color: $progress-bar-value-background-color-warning;
70
+ }
71
+ }
72
+
73
+ &:indeterminate {
74
+ animation-name: slide-background;
75
+ animation-timing-function: linear;
76
+ background-color: $progress-bar-background-color;
77
+ background-image: linear-gradient(
78
+ to right,
79
+ $progress-bar-background-color 0%,
80
+ $progress-bar-value-background-color 20%,
81
+ $progress-bar-background-color 40%
82
+ );
83
+ background-repeat: no-repeat;
84
+ background-position: top left;
85
+ background-size: 150% 150%;
86
+ animation-duration: $progress-bar-indeterminate-animation-duration;
87
+ animation-iteration-count: infinite;
88
+
89
+ &:dir(rtl) {
90
+ animation-direction: reverse;
91
+ }
92
+
93
+ &::-webkit-progress-bar {
94
+ background-color: transparent;
95
+ }
96
+
97
+ &::-moz-progress-bar {
98
+ background-color: transparent;
99
+ }
100
+
101
+ @include prefers-reduced-motion {
102
+ animation-duration: 0s;
103
+ }
104
+ }
105
+
106
+ @include forced-colors {
107
+ background-color: CanvasText !important;
108
+
109
+ &::-webkit-progress-bar {
110
+ background-color: CanvasText !important;
111
+ }
112
+
113
+ &::-webkit-progress-value {
114
+ background-color: Highlight !important;
115
+ }
116
+
117
+ &::-moz-progress-bar {
118
+ background-color: Highlight !important;
119
+ }
120
+
121
+ &:indeterminate {
122
+ &::-webkit-progress-bar {
123
+ background-color: transparent !important;
124
+ }
125
+
126
+ forced-color-adjust: none !important;
127
+ background-image: linear-gradient(
128
+ to right,
129
+ CanvasText 0%,
130
+ Highlight 20%,
131
+ CanvasText 40%
132
+ ) !important;
133
+ }
134
+ }
135
+ }
package/src/components/toggle.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  $toggle-transition: $input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
2
- $toggle-circle-size: 0.75em !default;
3
- $toggle-circle-top: 0.1875em !default;
2
+ $toggle-circle-size: 0.85em !default;
3
+ $toggle-circle-top: 0.15em !default;
4
4
  $toggle-circle-distance-from-border: 1em - $toggle-circle-size;
5
5
 
6
6
  $toggle-unselected-circle-color: $text-subtle !default;
package/src/core/animations.scss CHANGED
@@ -38,6 +38,16 @@
38
38
  }
39
39
  }
40
40
 
41
+ @keyframes slide-background {
42
+ 0% {
43
+ background-position: 200% 0;
44
+ }
45
+
46
+ 100% {
47
+ background-position: -200% 0;
48
+ }
49
+ }
50
+
41
51
  .animation-fade {
42
52
  animation: fade-out 0.4s ease-in forwards;
43
53