@microsoft/atlas-css 3.46.0 → 3.47.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/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 +117 -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.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/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,117 @@
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
+ &::-moz-progress-bar {
29
+ background-color: $progress-bar-value-background-color;
30
+ }
31
+
32
+ // Size
33
+
34
+ &.progress-bar-sm {
35
+ height: $progress-bar-height-sm;
36
+ }
37
+
38
+ // Colors
39
+
40
+ &.progress-bar-success {
41
+ &::-webkit-progress-value,
42
+ &::-moz-progress-bar {
43
+ background-color: $progress-bar-value-background-color-success;
44
+ }
45
+ }
46
+
47
+ &.progress-bar-danger {
48
+ &::-webkit-progress-value,
49
+ &::-moz-progress-bar {
50
+ background-color: $progress-bar-value-background-color-danger;
51
+ }
52
+ }
53
+
54
+ &.progress-bar-warning {
55
+ &::-webkit-progress-value,
56
+ &::-moz-progress-bar {
57
+ background-color: $progress-bar-value-background-color-warning;
58
+ }
59
+ }
60
+
61
+ &:indeterminate {
62
+ animation-name: slide-background;
63
+ animation-timing-function: linear;
64
+ background-color: $progress-bar-background-color;
65
+ background-image: linear-gradient(
66
+ to right,
67
+ $progress-bar-background-color 0%,
68
+ $progress-bar-value-background-color 20%,
69
+ $progress-bar-background-color 40%
70
+ );
71
+ background-repeat: no-repeat;
72
+ background-position: top left;
73
+ background-size: 150% 150%;
74
+ animation-duration: $progress-bar-indeterminate-animation-duration;
75
+ animation-iteration-count: infinite;
76
+
77
+ &:dir(rtl) {
78
+ animation-direction: reverse;
79
+ }
80
+
81
+ &::-webkit-progress-bar,
82
+ &::-moz-progress-bar {
83
+ background-color: transparent;
84
+ }
85
+
86
+ @include prefers-reduced-motion {
87
+ animation-duration: 0s;
88
+ }
89
+ }
90
+
91
+ @include forced-colors {
92
+ background-color: CanvasText !important;
93
+
94
+ &::-webkit-progress-bar {
95
+ background-color: CanvasText !important;
96
+ }
97
+
98
+ &::-webkit-progress-value,
99
+ &::-moz-progress-bar {
100
+ background-color: Highlight !important;
101
+ }
102
+
103
+ &:indeterminate {
104
+ &::-webkit-progress-bar {
105
+ background-color: transparent !important;
106
+ }
107
+
108
+ forced-color-adjust: none !important;
109
+ background-image: linear-gradient(
110
+ to right,
111
+ CanvasText 0%,
112
+ Highlight 20%,
113
+ CanvasText 40%
114
+ ) !important;
115
+ }
116
+ }
117
+ }
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