@microsoft/atlas-css 3.9.0 → 3.12.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.
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens.json +1 -1
- package/dist/tokens.ts +2 -0
- package/package.json +6 -6
- package/src/components/{checkbox.scss → form/checkbox.scss} +1 -0
- package/src/components/form/help.scss +18 -0
- package/src/components/form/index.scss +6 -0
- package/src/components/form/input.scss +75 -0
- package/src/components/form/label.scss +10 -0
- package/src/components/form/select.scss +115 -0
- package/src/components/form/textarea.scss +82 -0
- package/src/components/index.scss +2 -1
- package/src/components/popover.scss +2 -3
- package/src/components/table.scss +61 -14
- package/src/components/toggle.scss +86 -0
- package/src/mixins/control.scss +5 -2
- package/src/mixins/focus.scss +12 -0
- package/src/mixins/force-colors.scss +5 -0
- package/src/mixins/index.scss +1 -0
- package/src/tokens/colors.scss +1 -0
- package/src/tokens/themes.scss +4 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
$table-cell-vertical-padding: $spacer-
|
|
2
|
-
$table-cell-horizontal-padding: $spacer-
|
|
1
|
+
$table-cell-vertical-padding: $spacer-5 !default;
|
|
2
|
+
$table-cell-horizontal-padding: $spacer-6 !default;
|
|
3
|
+
$table-cell-padding-compact: $spacer-3 !default;
|
|
4
|
+
$table-cell-padding-loose: $spacer-8 !default;
|
|
3
5
|
|
|
4
6
|
$table-caption-padding: $spacer-6 !default;
|
|
5
7
|
$table-caption-size: $font-size-9 !default;
|
|
@@ -17,6 +19,10 @@ $table-caption-spacing: $letter-spacing-medium !default;
|
|
|
17
19
|
border-collapse: collapse;
|
|
18
20
|
table-layout: auto;
|
|
19
21
|
|
|
22
|
+
&:not(.table-simple) {
|
|
23
|
+
border: 1px solid $table-border-dark;
|
|
24
|
+
}
|
|
25
|
+
|
|
20
26
|
caption {
|
|
21
27
|
padding: $table-caption-padding;
|
|
22
28
|
font-size: $table-caption-size;
|
|
@@ -31,37 +37,78 @@ $table-caption-spacing: $letter-spacing-medium !default;
|
|
|
31
37
|
display: table-cell;
|
|
32
38
|
word-wrap: break-word;
|
|
33
39
|
padding: $table-cell-vertical-padding $table-cell-horizontal-padding;
|
|
34
|
-
border-top: 1px solid $border;
|
|
40
|
+
border-top: 1px solid $table-border-dark;
|
|
35
41
|
line-height: 1.5;
|
|
36
42
|
vertical-align: top;
|
|
37
43
|
}
|
|
38
44
|
|
|
39
|
-
thead th {
|
|
40
|
-
border-top: 0;
|
|
41
|
-
border-bottom: 1px solid $border;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
45
|
th:not([align]) {
|
|
45
46
|
text-align: $user-left;
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
&.table-stacked-mobile {
|
|
49
50
|
@include discouraged-mobile {
|
|
50
|
-
|
|
51
|
-
tfoot {
|
|
52
|
-
display: none;
|
|
53
|
-
}
|
|
54
|
-
|
|
51
|
+
th,
|
|
55
52
|
td {
|
|
56
53
|
display: block;
|
|
57
54
|
width: 100%;
|
|
58
|
-
padding: $table-cell-vertical-padding 0;
|
|
59
55
|
}
|
|
60
56
|
|
|
57
|
+
th:not(:nth-child(1)),
|
|
61
58
|
td:not(:nth-child(1)) {
|
|
62
59
|
padding-block-start: 0;
|
|
63
60
|
border-width: 0;
|
|
64
61
|
}
|
|
62
|
+
|
|
63
|
+
thead tr:nth-child(1) th,
|
|
64
|
+
tbody tr:nth-child(1) td {
|
|
65
|
+
border-top: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
thead tr > th:last-child {
|
|
69
|
+
border-bottom: 1px solid $table-border-dark;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&.table-borderless {
|
|
75
|
+
border: none;
|
|
76
|
+
|
|
77
|
+
th,
|
|
78
|
+
td {
|
|
79
|
+
border: none;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&.table-complex {
|
|
84
|
+
thead tr,
|
|
85
|
+
tfoot tr {
|
|
86
|
+
background-color: $table-header;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
th,
|
|
90
|
+
td {
|
|
91
|
+
border: 1px solid $table-border-dark;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.table-striped {
|
|
96
|
+
tbody tr:nth-of-type(even) {
|
|
97
|
+
background-color: $table-row;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.table-sm {
|
|
102
|
+
th,
|
|
103
|
+
td {
|
|
104
|
+
padding: $table-cell-padding-compact;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&.table-lg {
|
|
109
|
+
th,
|
|
110
|
+
td {
|
|
111
|
+
padding: $table-cell-padding-loose;
|
|
65
112
|
}
|
|
66
113
|
}
|
|
67
114
|
}
|
|
@@ -0,0 +1,86 @@
|
|
|
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;
|
|
4
|
+
$toggle-circle-distance-from-border: 1em - $toggle-circle-size;
|
|
5
|
+
|
|
6
|
+
$toggle-unselected-circle-color: $text-subtle !default;
|
|
7
|
+
$toggle-unselected-border-color: $text-subtle !default;
|
|
8
|
+
$toggle-unselected-background-color: $body-background !default;
|
|
9
|
+
$toggle-selected-background-color: $primary !default;
|
|
10
|
+
$toggle-circle-selected-background-color: $body-background !default;
|
|
11
|
+
|
|
12
|
+
.toggle {
|
|
13
|
+
label {
|
|
14
|
+
display: block;
|
|
15
|
+
position: relative;
|
|
16
|
+
width: 2.5em;
|
|
17
|
+
height: 1.25em;
|
|
18
|
+
transition: $input-transition-duration linear;
|
|
19
|
+
transition-property: background-color, border-color;
|
|
20
|
+
border: 0.065em solid $toggle-unselected-border-color;
|
|
21
|
+
border-radius: $radius-rounded;
|
|
22
|
+
background-color: $toggle-unselected-background-color;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
|
|
25
|
+
@include forced-colors {
|
|
26
|
+
border-color: CanvasText !important;
|
|
27
|
+
background-color: Canvas !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&::after {
|
|
31
|
+
display: block;
|
|
32
|
+
position: absolute;
|
|
33
|
+
width: $toggle-circle-size;
|
|
34
|
+
height: $toggle-circle-size;
|
|
35
|
+
transition: $toggle-transition;
|
|
36
|
+
transition-property: inset-inline-start, border-color, background-color;
|
|
37
|
+
border-radius: $radius-rounded;
|
|
38
|
+
inset-block-start: $toggle-circle-top;
|
|
39
|
+
inset-inline-start: $toggle-circle-distance-from-border;
|
|
40
|
+
background-color: $toggle-unselected-circle-color;
|
|
41
|
+
content: '';
|
|
42
|
+
|
|
43
|
+
@include forced-colors {
|
|
44
|
+
background-color: CanvasText !important;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* stylelint-disable -- want to keep [type="checkbox"] as a requirement here */
|
|
50
|
+
&.is-selected label,
|
|
51
|
+
input[type='checkbox']:checked + label {
|
|
52
|
+
/* stylelint-enable */
|
|
53
|
+
border-color: $toggle-selected-background-color;
|
|
54
|
+
background-color: $toggle-selected-background-color;
|
|
55
|
+
|
|
56
|
+
@include forced-colors {
|
|
57
|
+
border-color: LinkText !important;
|
|
58
|
+
background-color: LinkText !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&::after {
|
|
62
|
+
background-color: $toggle-circle-selected-background-color;
|
|
63
|
+
inset-inline-start: calc(100% - ($toggle-circle-distance-from-border + $toggle-circle-size));
|
|
64
|
+
|
|
65
|
+
@include forced-colors {
|
|
66
|
+
background-color: Canvas !important;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* stylelint-disable-next-line -- want to keep [type="checkbox"] as a requirement here */
|
|
72
|
+
input[type='checkbox'] {
|
|
73
|
+
@include visually-hidden();
|
|
74
|
+
|
|
75
|
+
@include focus-visible() {
|
|
76
|
+
+ label {
|
|
77
|
+
@extend %focus;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&:disabled + label {
|
|
82
|
+
opacity: 0.6;
|
|
83
|
+
cursor: not-allowed;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
package/src/mixins/control.scss
CHANGED
|
@@ -2,6 +2,9 @@ $control-radius: $radius !default;
|
|
|
2
2
|
$control-radius-sm: $radius-sm !default;
|
|
3
3
|
|
|
4
4
|
$control-font-size: $font-size-7 !default;
|
|
5
|
+
$control-sm-font-size: $font-size-8 !default;
|
|
6
|
+
$control-lg-font-size: $font-size-6 !default;
|
|
7
|
+
|
|
5
8
|
$control-border-width: 1px !default;
|
|
6
9
|
|
|
7
10
|
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
|
|
@@ -34,9 +37,9 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
|
|
|
34
37
|
|
|
35
38
|
@mixin control-sm {
|
|
36
39
|
border-radius: $control-radius-sm;
|
|
37
|
-
font-size: $font-size
|
|
40
|
+
font-size: $control-sm-font-size;
|
|
38
41
|
}
|
|
39
42
|
|
|
40
43
|
@mixin control-lg {
|
|
41
|
-
font-size: $font-size
|
|
44
|
+
font-size: $control-lg-font-size;
|
|
42
45
|
}
|
package/src/mixins/focus.scss
CHANGED
package/src/mixins/index.scss
CHANGED
package/src/tokens/colors.scss
CHANGED
|
@@ -30,6 +30,7 @@ $code-block: var(--theme-code-block);
|
|
|
30
30
|
$inline-code: var(--theme-inline-code);
|
|
31
31
|
|
|
32
32
|
$table-header: var(--theme-table-header);
|
|
33
|
+
$table-row: var(--theme-table-row);
|
|
33
34
|
$table-row-header: var(--theme-table-row-header);
|
|
34
35
|
$table-border-dark: var(--theme-table-border-dark);
|
|
35
36
|
|
package/src/tokens/themes.scss
CHANGED
|
@@ -19,6 +19,7 @@ $themes: (
|
|
|
19
19
|
'alternate-background-medium': $palette-grey-110,
|
|
20
20
|
'border': $palette-grey-30,
|
|
21
21
|
'table-header': $palette-grey-30,
|
|
22
|
+
'table-row': $palette-grey-20,
|
|
22
23
|
'table-row-header': $palette-grey-10,
|
|
23
24
|
'table-border-dark': $palette-grey-40,
|
|
24
25
|
'hover-base': $palette-grey-110,
|
|
@@ -114,6 +115,7 @@ $themes: (
|
|
|
114
115
|
'alternate-background-medium': $palette-grey-10,
|
|
115
116
|
'border': $palette-grey-100,
|
|
116
117
|
'table-header': $palette-grey-100,
|
|
118
|
+
'table-row': $palette-grey-110,
|
|
117
119
|
'table-row-header': $palette-grey-110,
|
|
118
120
|
'table-border-dark': $palette-grey-90,
|
|
119
121
|
'hover-base': $palette-grey-40,
|
|
@@ -180,7 +182,7 @@ $themes: (
|
|
|
180
182
|
'warning-active': $palette-yellow-30,
|
|
181
183
|
'warning-box-shadow': $palette-yellow-opacity-70,
|
|
182
184
|
'warning-invert': $palette-black,
|
|
183
|
-
'danger-base': $palette-red-
|
|
185
|
+
'danger-base': $palette-red-20,
|
|
184
186
|
'danger-background': $palette-red-80,
|
|
185
187
|
'danger-background-glow-high-contrast': $palette-red-80,
|
|
186
188
|
'danger-dark': $palette-red-10,
|
|
@@ -209,6 +211,7 @@ $themes: (
|
|
|
209
211
|
'alternate-background-medium': $palette-white,
|
|
210
212
|
'border': $palette-white,
|
|
211
213
|
'table-header': $palette-grey-90,
|
|
214
|
+
'table-row': $palette-black,
|
|
212
215
|
'table-row-header': $palette-grey-120,
|
|
213
216
|
'table-border-dark': $palette-white,
|
|
214
217
|
'hover-base': $palette-yellow-high-contrast,
|