@ptsecurity/mosaic 17.2.0 → 17.2.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/autocomplete/_autocomplete-theme.scss +2 -2
- package/button-toggle/button-toggle.scss +2 -2
- package/code-block/_code-block-theme.scss +2 -2
- package/core/forms/_forms-theme.scss +1 -1
- package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +16 -11
- package/core/styles/common/_groups.scss +3 -2
- package/core/styles/common/_popup.scss +1 -1
- package/core/styles/common/_tokens.scss +20 -10
- package/core/styles/theming/_alerts.scss +15 -14
- package/core/styles/theming/_badges.scss +32 -30
- package/core/styles/theming/_components-theming.scss +13 -13
- package/core/styles/theming/_scrollbars.scss +24 -27
- package/core/styles/theming/_theming.scss +10 -8
- package/core/styles/typography/_typography-utils.scss +1 -1
- package/core/styles/typography/_typography.scss +29 -28
- package/core/styles/visual/_layout.scss +14 -13
- package/datepicker/_datepicker-theme.scss +1 -2
- package/divider/_divider-theme.scss +1 -1
- package/dl/_dl-theme.scss +1 -1
- package/esm2022/button-toggle/button-toggle.component.mjs +2 -2
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/file-upload/multiple-file-upload.component.mjs +2 -2
- package/esm2022/file-upload/single-file-upload.component.mjs +2 -2
- package/esm2022/form-field/form-field.mjs +2 -2
- package/esm2022/modal/modal.component.mjs +2 -2
- package/esm2022/navbar/navbar.component.mjs +2 -2
- package/esm2022/navbar/vertical-navbar.component.mjs +3 -3
- package/esm2022/select/select.component.mjs +3 -3
- package/esm2022/tabs/tab-header.component.mjs +2 -2
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
- package/esm2022/timezone/timezone-select.component.mjs +2 -2
- package/esm2022/tree-select/tree-select.component.mjs +3 -3
- package/fesm2022/ptsecurity-mosaic-button-toggle.mjs +2 -2
- package/fesm2022/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-core.mjs +1 -1
- package/fesm2022/ptsecurity-mosaic-core.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-file-upload.mjs +4 -4
- package/fesm2022/ptsecurity-mosaic-file-upload.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-form-field.mjs +2 -2
- package/fesm2022/ptsecurity-mosaic-form-field.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-modal.mjs +2 -2
- package/fesm2022/ptsecurity-mosaic-modal.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-navbar.mjs +4 -4
- package/fesm2022/ptsecurity-mosaic-navbar.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-select.mjs +2 -2
- package/fesm2022/ptsecurity-mosaic-select.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-tabs.mjs +4 -4
- package/fesm2022/ptsecurity-mosaic-tabs.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-timezone.mjs +2 -2
- package/fesm2022/ptsecurity-mosaic-timezone.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-tree-select.mjs +2 -2
- package/fesm2022/ptsecurity-mosaic-tree-select.mjs.map +1 -1
- package/file-upload/multiple-file-upload.component.scss +9 -9
- package/file-upload/single-file-upload.component.scss +3 -3
- package/form-field/_form-field-theme.scss +2 -2
- package/form-field/form-field.scss +1 -1
- package/icon/_icon-theme.scss +1 -1
- package/link/_link-theme.scss +1 -1
- package/markdown/_markdown-theme.scss +1 -1
- package/modal/_modal-theme.scss +2 -2
- package/modal/modal.scss +2 -2
- package/navbar/_navbar-theme.scss +4 -4
- package/navbar/navbar-item.scss +2 -2
- package/package.json +15 -15
- package/popover/_popover-theme.scss +1 -1
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/default-theme.css +1 -1
- package/radio/_radio-theme.scss +1 -1
- package/select/_select-theme.scss +2 -2
- package/select/select.scss +1 -1
- package/sidepanel/_sidepanel-theme.scss +2 -2
- package/tabs/_tabs-theme.scss +2 -2
- package/tabs/tab-header.scss +16 -12
- package/tabs/tab-nav-bar/tab-nav-bar.scss +15 -13
- package/tags/_tag-theme.scss +2 -2
- package/timezone/_timezone-option-theme.scss +1 -1
- package/toast/_toast-theme.scss +1 -1
- package/toggle/_toggle-theme.scss +1 -1
- package/tooltip/_tooltip-theme.scss +1 -1
- package/tree-select/tree-select.scss +1 -1
@@ -11,10 +11,10 @@
|
|
11
11
|
.mc-autocomplete-panel {
|
12
12
|
@include popup.popup-params($theme);
|
13
13
|
|
14
|
-
color:
|
14
|
+
color: mc-css-variable(foreground-text, map.get($foreground, text));
|
15
15
|
|
16
16
|
.mc-selected {
|
17
|
-
$popup: map.get(
|
17
|
+
$popup: map.get($theme, components, popup);
|
18
18
|
|
19
19
|
background-color: mc-css-variable(popup-background, map-get($popup, background));
|
20
20
|
}
|
@@ -14,7 +14,7 @@ $tokens: meta.module-variables(tokens) !default;
|
|
14
14
|
display: inline-flex;
|
15
15
|
flex-direction: row;
|
16
16
|
align-items: center;
|
17
|
-
gap:
|
17
|
+
gap: mc-css-variable(size-3xs);
|
18
18
|
|
19
19
|
border-width: mc-css-variable(button-toggle-group-size-border-width);
|
20
20
|
border-radius: mc-css-variable(button-toggle-group-size-border-radius);
|
@@ -63,7 +63,7 @@ $tokens: meta.module-variables(tokens) !default;
|
|
63
63
|
padding-left: mc-css-variable(button-toggle-size-left-icon-padding);
|
64
64
|
|
65
65
|
& .mc-icon {
|
66
|
-
margin-right:
|
66
|
+
margin-right: mc-css-variable(size-xxs);
|
67
67
|
}
|
68
68
|
}
|
69
69
|
}
|
@@ -6,7 +6,7 @@
|
|
6
6
|
@use '../core/styles/common/tokens' as *;
|
7
7
|
|
8
8
|
@mixin mc-code-block-theme($theme) {
|
9
|
-
$code-block: map.get(
|
9
|
+
$code-block: map.get($theme, components, code-block);
|
10
10
|
|
11
11
|
.mc-code-block {
|
12
12
|
background-color: mc-css-variable(code-block-main-background, map-get($code-block, main-background));
|
@@ -415,7 +415,7 @@
|
|
415
415
|
}
|
416
416
|
|
417
417
|
& .hljs-ln-numbers {
|
418
|
-
@include mc-typography-level-to-
|
418
|
+
@include mc-typography-level-to-styles_css-variables(typography, caption-mono);
|
419
419
|
}
|
420
420
|
}
|
421
421
|
}
|
@@ -1,19 +1,23 @@
|
|
1
1
|
@use 'sass:map';
|
2
2
|
|
3
|
+
@use '../../styles/common/tokens' as *;
|
3
4
|
|
4
|
-
|
5
|
-
|
5
|
+
|
6
|
+
@mixin mc-pseudo-checkbox-color($component, $style-name) {
|
7
|
+
$style: map.get($component, $style-name);
|
8
|
+
|
9
|
+
border-color: mc-css-variable(checkbox-#{$style-name}-border, map.get($style, border));
|
6
10
|
|
7
11
|
& .mc-checkbox-checkmark,
|
8
12
|
& .mc-checkbox-mixedmark {
|
9
|
-
color: map.get($
|
13
|
+
color: mc-css-variable(checkbox-#{$style-name}-color, map.get($style, color));
|
10
14
|
}
|
11
15
|
|
12
16
|
&.mc-checked,
|
13
17
|
&.mc-indeterminate {
|
14
|
-
border-color: map.get($
|
18
|
+
border-color: mc-css-variable(checkbox-#{$style-name}-checked-border, map.get($style, checked, border));
|
15
19
|
|
16
|
-
background: map.get($
|
20
|
+
background: mc-css-variable(checkbox-#{$style-name}-checked-background, map.get($style, checked, background));
|
17
21
|
}
|
18
22
|
}
|
19
23
|
|
@@ -21,27 +25,28 @@
|
|
21
25
|
$foreground: map.get($theme, foreground);
|
22
26
|
$background: map.get($theme, background);
|
23
27
|
|
24
|
-
$checkbox: map.get(
|
28
|
+
$checkbox: map.get($theme, components, checkbox);
|
25
29
|
|
26
30
|
.mc-pseudo-checkbox {
|
27
31
|
&.mc-primary {
|
28
|
-
@include mc-pseudo-checkbox-color(
|
32
|
+
@include mc-pseudo-checkbox-color($checkbox, default);
|
29
33
|
}
|
30
34
|
|
31
35
|
&.mc-error {
|
32
|
-
@include mc-pseudo-checkbox-color(
|
36
|
+
@include mc-pseudo-checkbox-color($checkbox, error);
|
33
37
|
}
|
34
38
|
|
35
39
|
&.mc-disabled,
|
36
40
|
&.mc-primary.mc-disabled,
|
37
41
|
&.mc-error.mc-disabled {
|
38
|
-
border-color: map.get($foreground, border);
|
42
|
+
border-color: mc-css-variable(foreground-border, map.get($foreground, border));
|
39
43
|
|
40
|
-
background-color:
|
44
|
+
background-color: mc-css-variable(
|
45
|
+
background-background-disabled, map.get($background, background-disabled));
|
41
46
|
|
42
47
|
& .mc-checkbox-checkmark,
|
43
48
|
& .mc-checkbox-mixedmark {
|
44
|
-
color: map.get($foreground, text-disabled);
|
49
|
+
color: mc-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
|
45
50
|
}
|
46
51
|
}
|
47
52
|
}
|
@@ -2,6 +2,7 @@
|
|
2
2
|
@use 'sass:map';
|
3
3
|
|
4
4
|
@use '../tokens';
|
5
|
+
@use '../common/tokens' as *;
|
5
6
|
|
6
7
|
|
7
8
|
$tokens: meta.module-variables(tokens) !default;
|
@@ -82,7 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
|
|
82
83
|
&:first-child:not(:last-child) {
|
83
84
|
@include border-bottom-radius(0);
|
84
85
|
|
85
|
-
border-top-right-radius:
|
86
|
+
border-top-right-radius: mc-css-variable(button-size-border-radius);
|
86
87
|
|
87
88
|
> .mc-form-field__container {
|
88
89
|
@include border-bottom-radius(0);
|
@@ -92,7 +93,7 @@ $tokens: meta.module-variables(tokens) !default;
|
|
92
93
|
&:last-child:not(:first-child) {
|
93
94
|
@include border-top-radius(0);
|
94
95
|
|
95
|
-
border-bottom-left-radius:
|
96
|
+
border-bottom-left-radius: mc-css-variable(button-size-border-radius);
|
96
97
|
|
97
98
|
> .mc-form-field__container {
|
98
99
|
@include border-top-radius(0);
|
@@ -3,7 +3,7 @@
|
|
3
3
|
|
4
4
|
|
5
5
|
@mixin popup-params($theme) {
|
6
|
-
$popup: map.get(
|
6
|
+
$popup: map.get($theme, components, popup);
|
7
7
|
|
8
8
|
box-shadow: mc-css-variable(popup-shadow, map-get($popup, shadow));
|
9
9
|
border-color: mc-css-variable(popup-border, map-get($popup, border));
|
@@ -21,19 +21,29 @@ $tokens: meta.module-variables(tokens);
|
|
21
21
|
@return map.get($tokens, $name);
|
22
22
|
}
|
23
23
|
|
24
|
-
@mixin mc-css-font-variable($component, $component-property, $font-property) {
|
24
|
+
@mixin mc-css-font-variable($component, $component-property, $font-property, $font) {
|
25
25
|
#{$font-property}: var(
|
26
|
-
--mc-#{$component}
|
27
|
-
map.get($tokens, #{$component}
|
26
|
+
--mc-#{$component}-#{$font}#{$component-property}-#{$font-property},
|
27
|
+
map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
|
28
28
|
);
|
29
29
|
}
|
30
30
|
|
31
31
|
@mixin mc-typography-css-variables($component, $property) {
|
32
|
-
@include mc-css-font-variable($component, $property, font-size);
|
33
|
-
@include mc-css-font-variable($component, $property, font-weight);
|
34
|
-
@include mc-css-font-variable($component, $property, line-height);
|
35
|
-
@include mc-css-font-variable($component, $property, font-family);
|
36
|
-
@include mc-css-font-variable($component, $property, text-transform);
|
37
|
-
@include mc-css-font-variable($component, $property, font-feature-settings);
|
38
|
-
@include mc-css-font-variable($component, $property, letter-spacing);
|
32
|
+
@include mc-css-font-variable($component, $property, font-size, font-);
|
33
|
+
@include mc-css-font-variable($component, $property, font-weight, font-);
|
34
|
+
@include mc-css-font-variable($component, $property, line-height, font-);
|
35
|
+
@include mc-css-font-variable($component, $property, font-family, font-);
|
36
|
+
@include mc-css-font-variable($component, $property, text-transform, font-);
|
37
|
+
@include mc-css-font-variable($component, $property, font-feature-settings, font-);
|
38
|
+
@include mc-css-font-variable($component, $property, letter-spacing, font-);
|
39
|
+
}
|
40
|
+
|
41
|
+
@mixin mc-typography-level-to-styles_css-variables($component, $property) {
|
42
|
+
@include mc-css-font-variable($component, $property, font-size, '');
|
43
|
+
@include mc-css-font-variable($component, $property, font-weight, '');
|
44
|
+
@include mc-css-font-variable($component, $property, line-height, '');
|
45
|
+
@include mc-css-font-variable($component, $property, font-family, '');
|
46
|
+
@include mc-css-font-variable($component, $property, text-transform, '');
|
47
|
+
@include mc-css-font-variable($component, $property, font-feature-settings, '');
|
48
|
+
@include mc-css-font-variable($component, $property, letter-spacing, '');
|
39
49
|
}
|
@@ -52,50 +52,50 @@
|
|
52
52
|
}
|
53
53
|
}
|
54
54
|
|
55
|
-
@mixin alert-theme($
|
56
|
-
|
57
|
-
|
55
|
+
@mixin alert-theme($component, $style-name) {
|
56
|
+
$style: map.get($component, $style-name);
|
57
|
+
|
58
|
+
background-color: mc-css-variable(alert-#{$style-name}-background, map.get($style, background));
|
59
|
+
border-color: mc-css-variable(alert-#{$style-name}-border, map.get($style, border));
|
58
60
|
|
59
61
|
.mc-icon.mc-alert__icon {
|
60
|
-
color: map.get($
|
62
|
+
color: mc-css-variable(alert-#{$style-name}-icon, map.get($style, icon));
|
61
63
|
}
|
62
64
|
}
|
63
65
|
|
64
66
|
@mixin mc-alert-theme($theme) {
|
65
67
|
$foreground: map.get($theme, foreground);
|
66
68
|
|
67
|
-
$alert: map.get(
|
68
|
-
|
69
|
-
$is-dark: map.get($theme, is-dark);
|
69
|
+
$alert: map.get($theme, components, alert);
|
70
70
|
|
71
71
|
.mc-alert__close:focus {
|
72
72
|
outline: none;
|
73
73
|
}
|
74
74
|
|
75
75
|
.mc-alert {
|
76
|
-
color: map.get($foreground, text);
|
76
|
+
color: mc-css-variable(foreground-text, map.get($foreground, text));
|
77
77
|
|
78
78
|
@include mc-alert-geometry(map.get($theme, tokens));
|
79
79
|
}
|
80
80
|
|
81
81
|
.mc-alert_error {
|
82
|
-
@include alert-theme(
|
82
|
+
@include alert-theme($alert, error);
|
83
83
|
}
|
84
84
|
|
85
85
|
.mc-alert_warning {
|
86
|
-
@include alert-theme(
|
86
|
+
@include alert-theme($alert, warning);
|
87
87
|
}
|
88
88
|
|
89
89
|
.mc-alert_success {
|
90
|
-
@include alert-theme(
|
90
|
+
@include alert-theme($alert, success);
|
91
91
|
}
|
92
92
|
|
93
93
|
.mc-alert_info {
|
94
|
-
@include alert-theme(
|
94
|
+
@include alert-theme($alert, info);
|
95
95
|
}
|
96
96
|
|
97
97
|
.mc-alert:not(.mc-alert_error):not(.mc-alert_warning):not(.mc-alert_success):not(.mc-alert_info) {
|
98
|
-
@include alert-theme(
|
98
|
+
@include alert-theme($alert, default);
|
99
99
|
}
|
100
100
|
}
|
101
101
|
|
@@ -128,7 +128,8 @@
|
|
128
128
|
|
129
129
|
&.mc-alert_dismissible {
|
130
130
|
padding-right: calc(
|
131
|
-
mc-
|
131
|
+
var(--mc-alert-size-right-padding-dismissible, #{map.get($tokens, alert-size-close-button-width)}) +
|
132
|
+
var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)})
|
132
133
|
);
|
133
134
|
}
|
134
135
|
}
|
@@ -19,19 +19,21 @@
|
|
19
19
|
}
|
20
20
|
|
21
21
|
|
22
|
-
@mixin mc-badge-color($
|
23
|
-
|
24
|
-
|
25
|
-
|
22
|
+
@mixin mc-badge-color($component, $style-name) {
|
23
|
+
$style: map.get($component, $style-name);
|
24
|
+
|
25
|
+
color: mc-css-variable(badge-#{$style-name}-color, map.get($style, color));
|
26
|
+
border-color: mc-css-variable(badge-#{$style-name}-border, map.get($style, border));
|
27
|
+
background: mc-css-variable(badge-#{$style-name}-background, map.get($style, background));
|
26
28
|
}
|
27
29
|
|
28
30
|
@mixin mc-badge-theme($theme) {
|
29
31
|
$foreground: map.get($theme, foreground);
|
30
|
-
$badge: map.get(
|
32
|
+
$badge: map.get($theme, components, badge);
|
31
33
|
|
32
34
|
.mc-badge {
|
33
|
-
color: map.get($foreground, text);
|
34
|
-
border-color: map.get($foreground, border);
|
35
|
+
color: mc-css-variable(foreground-text, map.get($foreground, text));
|
36
|
+
border-color: mc-css-variable(foreground-border, map.get($foreground, border));
|
35
37
|
|
36
38
|
}
|
37
39
|
|
@@ -39,57 +41,57 @@
|
|
39
41
|
|
40
42
|
.mc-badge_solid {
|
41
43
|
&.mc-badge_primary {
|
42
|
-
@include mc-badge-color(
|
44
|
+
@include mc-badge-color($badge, solid-primary);
|
43
45
|
}
|
44
46
|
|
45
47
|
&.mc-badge_second {
|
46
|
-
@include mc-badge-color(
|
48
|
+
@include mc-badge-color($badge, solid-secondary);
|
47
49
|
}
|
48
50
|
|
49
51
|
&.mc-badge_transparent {
|
50
|
-
@include mc-badge-color(
|
52
|
+
@include mc-badge-color($badge, solid-transparent);
|
51
53
|
}
|
52
54
|
|
53
55
|
&.mc-badge_success {
|
54
|
-
@include mc-badge-color(
|
56
|
+
@include mc-badge-color($badge, solid-success);
|
55
57
|
}
|
56
58
|
|
57
59
|
&.mc-badge_info {
|
58
|
-
@include mc-badge-color(
|
60
|
+
@include mc-badge-color($badge, solid-info);
|
59
61
|
}
|
60
62
|
|
61
63
|
&.mc-badge_warning {
|
62
|
-
@include mc-badge-color(
|
64
|
+
@include mc-badge-color($badge, solid-warning);
|
63
65
|
}
|
64
66
|
|
65
67
|
&.mc-badge_error {
|
66
|
-
@include mc-badge-color(
|
68
|
+
@include mc-badge-color($badge, solid-error);
|
67
69
|
}
|
68
70
|
|
69
71
|
&.mc-badge_light {
|
70
|
-
@include mc-badge-color(
|
72
|
+
@include mc-badge-color($badge, solid-light);
|
71
73
|
}
|
72
74
|
}
|
73
75
|
|
74
76
|
.mc-badge_pastel {
|
75
77
|
&.mc-badge_primary {
|
76
|
-
@include mc-badge-color(
|
78
|
+
@include mc-badge-color($badge, pastel-primary);
|
77
79
|
}
|
78
80
|
|
79
81
|
&.mc-badge_success {
|
80
|
-
@include mc-badge-color(
|
82
|
+
@include mc-badge-color($badge, pastel-success);
|
81
83
|
}
|
82
84
|
|
83
85
|
&.mc-badge_info {
|
84
|
-
@include mc-badge-color(
|
86
|
+
@include mc-badge-color($badge, pastel-info);
|
85
87
|
}
|
86
88
|
|
87
89
|
&.mc-badge_warning {
|
88
|
-
@include mc-badge-color(
|
90
|
+
@include mc-badge-color($badge, pastel-warning);
|
89
91
|
}
|
90
92
|
|
91
93
|
&.mc-badge_error {
|
92
|
-
@include mc-badge-color(
|
94
|
+
@include mc-badge-color($badge, pastel-error);
|
93
95
|
}
|
94
96
|
}
|
95
97
|
}
|
@@ -97,22 +99,22 @@
|
|
97
99
|
@mixin mc-badges-geometry($tokens) {
|
98
100
|
.mc-badge {
|
99
101
|
&.mc-badge_default {
|
100
|
-
height:
|
101
|
-
min-width:
|
102
|
-
padding:
|
102
|
+
height: mc-css-variable(badge-size-default-height);
|
103
|
+
min-width: mc-css-variable(badge-size-default-min-width);
|
104
|
+
padding: mc-css-variable(badge-size-default-padding);
|
103
105
|
border: {
|
104
|
-
width:
|
105
|
-
radius:
|
106
|
+
width: mc-css-variable(badge-size-default-border-width);
|
107
|
+
radius: mc-css-variable(badge-size-default-border-radius);
|
106
108
|
}
|
107
109
|
}
|
108
110
|
|
109
111
|
&.mc-badge_mini {
|
110
|
-
height:
|
111
|
-
min-width:
|
112
|
-
padding:
|
112
|
+
height: mc-css-variable(badge-size-mini-height);
|
113
|
+
min-width: mc-css-variable(badge-size-mini-min-width);
|
114
|
+
padding: mc-css-variable(badge-size-mini-padding);
|
113
115
|
border: {
|
114
|
-
width:
|
115
|
-
radius:
|
116
|
+
width: mc-css-variable(badge-size-mini-border-width);
|
117
|
+
radius: mc-css-variable(badge-size-mini-border-radius);
|
116
118
|
}
|
117
119
|
}
|
118
120
|
}
|
@@ -36,67 +36,67 @@
|
|
36
36
|
);
|
37
37
|
|
38
38
|
$badge: (
|
39
|
-
|
39
|
+
solid-primary: (
|
40
40
|
color: map-get($tokens, 'badge-#{$scheme}-solid-primary-color'),
|
41
41
|
background: map-get($tokens, 'badge-#{$scheme}-solid-primary-background'),
|
42
42
|
border: map-get($tokens, 'badge-#{$scheme}-solid-primary-border')
|
43
43
|
),
|
44
|
-
|
44
|
+
solid-secondary: (
|
45
45
|
color: map-get($tokens, 'badge-#{$scheme}-solid-secondary-color'),
|
46
46
|
background: map-get($tokens, 'badge-#{$scheme}-solid-secondary-background'),
|
47
47
|
border: map-get($tokens, 'badge-#{$scheme}-solid-secondary-border')
|
48
48
|
),
|
49
|
-
|
49
|
+
solid-light: (
|
50
50
|
color: map-get($tokens, 'badge-#{$scheme}-solid-light-color'),
|
51
51
|
background: map-get($tokens, 'badge-#{$scheme}-solid-light-background'),
|
52
52
|
border: map-get($tokens, 'badge-#{$scheme}-solid-light-background')
|
53
53
|
),
|
54
|
-
|
54
|
+
solid-info: (
|
55
55
|
color: map-get($tokens, 'badge-#{$scheme}-solid-info-color'),
|
56
56
|
background: map-get($tokens, 'badge-#{$scheme}-solid-info-background'),
|
57
57
|
border: map-get($tokens, 'badge-#{$scheme}-solid-info-border')
|
58
58
|
),
|
59
|
-
|
59
|
+
solid-success: (
|
60
60
|
color: map-get($tokens, 'badge-#{$scheme}-solid-success-color'),
|
61
61
|
background: map-get($tokens, 'badge-#{$scheme}-solid-success-background'),
|
62
62
|
border: map-get($tokens, 'badge-#{$scheme}-solid-success-border')
|
63
63
|
),
|
64
|
-
|
64
|
+
solid-warning: (
|
65
65
|
color: map-get($tokens, 'badge-#{$scheme}-solid-warning-color'),
|
66
66
|
background: map-get($tokens, 'badge-#{$scheme}-solid-warning-background'),
|
67
67
|
border: map-get($tokens, 'badge-#{$scheme}-solid-warning-border')
|
68
68
|
),
|
69
|
-
|
69
|
+
solid-error: (
|
70
70
|
color: map-get($tokens, 'badge-#{$scheme}-solid-error-color'),
|
71
71
|
background: map-get($tokens, 'badge-#{$scheme}-solid-error-background'),
|
72
72
|
border: map-get($tokens, 'badge-#{$scheme}-solid-error-border')
|
73
73
|
),
|
74
|
-
|
74
|
+
solid-transparent: (
|
75
75
|
color: map-get($tokens, 'badge-#{$scheme}-solid-transparent-color'),
|
76
76
|
border: map-get($tokens, 'badge-#{$scheme}-solid-transparent-border'),
|
77
77
|
background: map-get($tokens, 'badge-#{$scheme}-solid-transparent-background')
|
78
78
|
),
|
79
|
-
|
79
|
+
pastel-primary: (
|
80
80
|
color: map-get($tokens, 'badge-#{$scheme}-pastel-primary-color'),
|
81
81
|
background: map-get($tokens, 'badge-#{$scheme}-pastel-primary-background'),
|
82
82
|
border: map-get($tokens, 'badge-#{$scheme}-pastel-primary-border')
|
83
83
|
),
|
84
|
-
|
84
|
+
pastel-info: (
|
85
85
|
color: map-get($tokens, 'badge-#{$scheme}-pastel-info-color'),
|
86
86
|
background: map-get($tokens, 'badge-#{$scheme}-pastel-info-background'),
|
87
87
|
border: map-get($tokens, 'badge-#{$scheme}-pastel-info-border')
|
88
88
|
),
|
89
|
-
|
89
|
+
pastel-success: (
|
90
90
|
color: map-get($tokens, 'badge-#{$scheme}-pastel-success-color'),
|
91
91
|
background: map-get($tokens, 'badge-#{$scheme}-pastel-success-background'),
|
92
92
|
border: map-get($tokens, 'badge-#{$scheme}-pastel-success-border')
|
93
93
|
),
|
94
|
-
|
94
|
+
pastel-warning: (
|
95
95
|
color: map-get($tokens, 'badge-#{$scheme}-pastel-warning-color'),
|
96
96
|
background: map-get($tokens, 'badge-#{$scheme}-pastel-warning-background'),
|
97
97
|
border: map-get($tokens, 'badge-#{$scheme}-pastel-warning-border')
|
98
98
|
),
|
99
|
-
|
99
|
+
pastel-error: (
|
100
100
|
color: map-get($tokens, 'badge-#{$scheme}-pastel-error-color'),
|
101
101
|
background: map-get($tokens, 'badge-#{$scheme}-pastel-error-background'),
|
102
102
|
border: map-get($tokens, 'badge-#{$scheme}-pastel-error-border')
|
@@ -2,6 +2,8 @@
|
|
2
2
|
@use 'sass:map';
|
3
3
|
|
4
4
|
@use '../functions/string' as *;
|
5
|
+
@use '../common/tokens' as *;
|
6
|
+
|
5
7
|
|
6
8
|
.mc-scrollbar {
|
7
9
|
//firefox
|
@@ -11,54 +13,55 @@
|
|
11
13
|
}
|
12
14
|
|
13
15
|
@mixin mc-scrollbar-theme($theme) {
|
14
|
-
$scrollbar: map.get(
|
16
|
+
$scrollbar: map.get($theme, components, scrollbar);
|
15
17
|
$thumb: map.get($scrollbar, thumb);
|
16
18
|
$arrow: map.get($scrollbar, arrow);
|
17
19
|
|
18
20
|
.mc-scrollbar {
|
19
|
-
@include mc-scrollbar-geometry(
|
21
|
+
@include mc-scrollbar-geometry();
|
20
22
|
|
21
23
|
// firefox
|
22
24
|
@supports not selector(::-webkit-scrollbar) {
|
23
|
-
scrollbar-color:
|
25
|
+
scrollbar-color: mc-css-variable(thumb-normal, map-get($thumb, normal))
|
26
|
+
mc-css-variable(scrollbar-track, map-get($scrollbar, track));
|
24
27
|
}
|
25
28
|
|
26
29
|
// webkit
|
27
30
|
&::-webkit-scrollbar,
|
28
31
|
::-webkit-scrollbar {
|
29
|
-
background-color: map.get($scrollbar, track);
|
32
|
+
background-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
|
30
33
|
}
|
31
34
|
|
32
35
|
|
33
36
|
&::-webkit-scrollbar-corner,
|
34
37
|
::-webkit-scrollbar-corner {
|
35
|
-
background-color: map.get($scrollbar, corner-background);
|
38
|
+
background-color: mc-css-variable(scrollbar-corner-background, map.get($scrollbar, corner-background));
|
36
39
|
}
|
37
40
|
|
38
41
|
&::-webkit-scrollbar-thumb,
|
39
42
|
::-webkit-scrollbar-thumb {
|
40
|
-
background-color: map.get($thumb, normal);
|
43
|
+
background-color: mc-css-variable(thumb-normal, map.get($thumb, normal));
|
41
44
|
|
42
|
-
border-color: map.get($scrollbar, track);
|
45
|
+
border-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
|
43
46
|
border-style: solid;
|
44
47
|
|
45
48
|
&:hover {
|
46
|
-
background-color: map.get($thumb, hover);
|
49
|
+
background-color: mc-css-variable(thumb-hover, map.get($thumb, hover));
|
47
50
|
}
|
48
51
|
|
49
52
|
&:disabled {
|
50
|
-
background-color: map.get($thumb, disabled);
|
53
|
+
background-color: mc-css-variable(thumb-disabled, map.get($thumb, disabled));
|
51
54
|
}
|
52
55
|
|
53
56
|
&:active {
|
54
|
-
background-color: map.get($thumb, active);
|
57
|
+
background-color: mc-css-variable(thumb-active, map.get($thumb, active));
|
55
58
|
}
|
56
59
|
}
|
57
60
|
|
58
61
|
/* stylelint-disable */
|
59
62
|
&::-webkit-scrollbar-button,
|
60
63
|
::-webkit-scrollbar-button {
|
61
|
-
background-color: map.get($arrow, background);
|
64
|
+
background-color: mc-css-variable(arrow-background, map.get($arrow, background));
|
62
65
|
background-size: 10px 10px;
|
63
66
|
background-repeat: no-repeat;
|
64
67
|
background-position: center center;
|
@@ -93,39 +96,33 @@
|
|
93
96
|
}
|
94
97
|
}
|
95
98
|
|
96
|
-
@mixin mc-scrollbar-geometry(
|
99
|
+
@mixin mc-scrollbar-geometry() {
|
97
100
|
// webkit
|
98
101
|
&::-webkit-scrollbar,
|
99
102
|
::-webkit-scrollbar {
|
100
103
|
&:vertical {
|
101
|
-
width:
|
104
|
+
width: mc-css-variable(scrollbar-size-track-dimension);
|
102
105
|
}
|
103
106
|
|
104
107
|
&:horizontal {
|
105
|
-
height:
|
108
|
+
height: mc-css-variable(scrollbar-size-track-dimension);
|
106
109
|
}
|
107
110
|
}
|
108
111
|
|
109
112
|
/* stylelint-disable no-descending-specificity */
|
110
113
|
&::-webkit-scrollbar-thumb,
|
111
114
|
::-webkit-scrollbar-thumb {
|
112
|
-
width:
|
113
|
-
border-width:
|
114
|
-
|
115
|
-
map.get($tokens, scrollbar-size-thumb-border-width)
|
116
|
-
);
|
117
|
-
border-radius: var(
|
118
|
-
--mc-scrollbar-size-thumb-inset-border-radius,
|
119
|
-
map.get($tokens, scrollbar-size-thumb-border-radius)
|
120
|
-
);
|
115
|
+
width: mc-css-variable(scrollbar-size-thumb-width);
|
116
|
+
border-width: mc-css-variable(scrollbar-size-thumb-border-width);
|
117
|
+
border-radius: mc-css-variable(scrollbar-size-thumb-border-radius);
|
121
118
|
|
122
119
|
// these props are used to set the user-friendly thumb for long content.
|
123
120
|
&:vertical {
|
124
|
-
min-height:
|
121
|
+
min-height: mc-css-variable(scrollbar-size-thumb-min-size);
|
125
122
|
}
|
126
123
|
|
127
124
|
&:horizontal {
|
128
|
-
min-width:
|
125
|
+
min-width: mc-css-variable(scrollbar-size-thumb-min-size);
|
129
126
|
}
|
130
127
|
}
|
131
128
|
|
@@ -133,8 +130,8 @@
|
|
133
130
|
::-webkit-scrollbar-button {
|
134
131
|
display: none;
|
135
132
|
|
136
|
-
width:
|
137
|
-
height:
|
133
|
+
width: mc-css-variable(scrollbar-size-arrow-icon-width);
|
134
|
+
height: mc-css-variable(scrollbar-size-arrow-icon-height);
|
138
135
|
}
|
139
136
|
}
|
140
137
|
|