@microsoft/atlas-css 3.44.1 → 3.45.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/README.md +1 -1
- package/dist/class-names.json +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/atomics/border.scss +4 -0
- package/src/components/badge.scss +87 -0
- package/src/components/form/checkbox.scss +1 -1
- package/src/components/index.scss +1 -0
- package/src/core/normalize.scss +0 -23
- package/src/mixins/control.scss +1 -1
package/package.json
CHANGED
package/src/atomics/border.scss
CHANGED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
$badge-padding-block: 0.2em !default;
|
|
2
|
+
$badge-padding-inline: 0.5em !default;
|
|
3
|
+
|
|
4
|
+
$badge-gap-size: 0.375em !default;
|
|
5
|
+
|
|
6
|
+
$badge-font-size: $font-size-8 !default;
|
|
7
|
+
$badge-font-size-sm: $font-size-9 !default;
|
|
8
|
+
$badge-font-size-lg: $font-size-7 !default;
|
|
9
|
+
$badge-font-weight: $weight-semibold !default;
|
|
10
|
+
|
|
11
|
+
$badge-icon-font-size: 0.875em !default;
|
|
12
|
+
|
|
13
|
+
$badge-border-width: $border-width !default;
|
|
14
|
+
$badge-border-radius: $border-radius-rounded !default;
|
|
15
|
+
|
|
16
|
+
.badge {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
padding: $badge-padding-block $badge-padding-inline;
|
|
21
|
+
border: $badge-border-width solid $border-white-high-contrast;
|
|
22
|
+
border-radius: $badge-border-radius;
|
|
23
|
+
font-size: $badge-font-size;
|
|
24
|
+
font-weight: $badge-font-weight;
|
|
25
|
+
line-height: $line-height-normal;
|
|
26
|
+
white-space: nowrap;
|
|
27
|
+
gap: $badge-gap-size;
|
|
28
|
+
|
|
29
|
+
@each $name, $color-set in $colors {
|
|
30
|
+
$base: nth($color-set, $color-index-base);
|
|
31
|
+
$invert: nth($color-set, $color-index-invert);
|
|
32
|
+
$dark: nth($color-set, $color-index-dark);
|
|
33
|
+
$background: nth($color-set, $color-index-background);
|
|
34
|
+
|
|
35
|
+
@if $name == 'secondary' {
|
|
36
|
+
border-color: $dark;
|
|
37
|
+
background-color: $background;
|
|
38
|
+
color: $dark;
|
|
39
|
+
} @else {
|
|
40
|
+
&.badge-#{$name} {
|
|
41
|
+
border-color: $dark;
|
|
42
|
+
background-color: $background;
|
|
43
|
+
color: $dark;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&.badge-clear {
|
|
49
|
+
border-color: transparent;
|
|
50
|
+
background-color: transparent;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&.badge-filled {
|
|
54
|
+
@each $name, $color-set in $colors {
|
|
55
|
+
$base: nth($color-set, $color-index-base);
|
|
56
|
+
$invert: nth($color-set, $color-index-invert);
|
|
57
|
+
$dark: nth($color-set, $color-index-dark);
|
|
58
|
+
$background: nth($color-set, $color-index-background);
|
|
59
|
+
|
|
60
|
+
@if $name == 'secondary' {
|
|
61
|
+
border-color: $base;
|
|
62
|
+
background-color: $base;
|
|
63
|
+
color: $invert;
|
|
64
|
+
} @else {
|
|
65
|
+
&.badge-#{$name} {
|
|
66
|
+
border-color: $base;
|
|
67
|
+
background-color: $base;
|
|
68
|
+
color: $invert;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.icon {
|
|
75
|
+
font-size: $badge-icon-font-size;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// Sizes
|
|
79
|
+
|
|
80
|
+
&.badge-sm {
|
|
81
|
+
font-size: $badge-font-size-sm;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&.badge-lg {
|
|
85
|
+
font-size: $badge-font-size-lg;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */
|
|
2
2
|
|
|
3
|
-
$checkbox-border-radius: $border-radius
|
|
3
|
+
$checkbox-border-radius: $border-radius !default;
|
|
4
4
|
$checkbox-border-width: 0.0625em !default;
|
|
5
5
|
$checkbox-unchecked-border-color: $control-border !default;
|
|
6
6
|
$checkbox-invalid-border-color: $danger !default;
|
package/src/core/normalize.scss
CHANGED
|
@@ -202,29 +202,6 @@ button,
|
|
|
202
202
|
-webkit-appearance: button;
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
/**
|
|
206
|
-
* Remove the inner border and padding in Firefox.
|
|
207
|
-
*/
|
|
208
|
-
|
|
209
|
-
button::-moz-focus-inner,
|
|
210
|
-
[type='button']::-moz-focus-inner,
|
|
211
|
-
[type='reset']::-moz-focus-inner,
|
|
212
|
-
[type='submit']::-moz-focus-inner {
|
|
213
|
-
border-style: none;
|
|
214
|
-
padding: 0;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
/**
|
|
218
|
-
* Restore the focus styles unset by the previous rule.
|
|
219
|
-
*/
|
|
220
|
-
|
|
221
|
-
button:-moz-focusring,
|
|
222
|
-
[type='button']:-moz-focusring,
|
|
223
|
-
[type='reset']:-moz-focusring,
|
|
224
|
-
[type='submit']:-moz-focusring {
|
|
225
|
-
outline: 1px dotted ButtonText;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
205
|
/**
|
|
229
206
|
* Correct the padding in Firefox.
|
|
230
207
|
*/
|
package/src/mixins/control.scss
CHANGED