@onemrvapublic/design-system-theme 17.2.46 → 17.2.47
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/components/_chips.scss +16 -29
- package/package.json +1 -1
package/components/_chips.scss
CHANGED
|
@@ -7,17 +7,19 @@
|
|
|
7
7
|
$primary: µ.primary($theme);
|
|
8
8
|
$color: mat.get-color-from-palette(map-get($theme, "grayscale"));
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
@include mat.chips-base($theme);
|
|
12
11
|
@include mat.chips-theme($theme);
|
|
13
12
|
@include mat.chips-typography(map.get($theme, typography));
|
|
14
13
|
@include mat.chips-color(map.get($theme, color));
|
|
15
14
|
@include mat.chips-density($theme);
|
|
16
|
-
|
|
15
|
+
|
|
17
16
|
|
|
18
17
|
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
|
|
19
18
|
background: none;
|
|
20
19
|
}
|
|
20
|
+
.mat-mdc-standard-chip {
|
|
21
|
+
--mdc-chip-container-shape-radius: 500px 500px 500px 500px ;
|
|
22
|
+
}
|
|
21
23
|
|
|
22
24
|
mat-chip-option {
|
|
23
25
|
transition: none;
|
|
@@ -27,7 +29,6 @@
|
|
|
27
29
|
color: $color;
|
|
28
30
|
border: 2px solid $color;
|
|
29
31
|
height: 22px;
|
|
30
|
-
border-radius: 500px;
|
|
31
32
|
padding: 8px 16px;
|
|
32
33
|
font-family: mat.get-theme-typography($theme,'button', font-family);
|
|
33
34
|
font-size: 16px;
|
|
@@ -43,67 +44,53 @@
|
|
|
43
44
|
width: var(--mdc-chip-with-avatar-avatar-size);
|
|
44
45
|
}
|
|
45
46
|
}
|
|
47
|
+
.mat-mdc-chip-action {
|
|
48
|
+
padding-right: 0 !important;
|
|
49
|
+
}
|
|
46
50
|
.mat-icon {
|
|
47
51
|
line-height: 14px;
|
|
48
52
|
}
|
|
49
53
|
&.mat-primary {
|
|
54
|
+
--mdc-chip-label-text-color: #{$primary};
|
|
50
55
|
background: µ.primary($theme, 50) !important;
|
|
51
56
|
border: 1px solid µ.primary($theme, 300);
|
|
52
|
-
.mat-mdc-chip-action-label {
|
|
53
|
-
color: $primary;
|
|
54
|
-
}
|
|
55
57
|
}
|
|
56
58
|
&.mat-accent {
|
|
57
|
-
|
|
59
|
+
--mdc-chip-label-text-color: #{ µ.accent($theme, "500-contrast")};
|
|
58
60
|
background: $onemrva-accent-gradient-vertical !important;
|
|
59
|
-
border: none;
|
|
60
|
-
.mat-mdc-chip-action-label {
|
|
61
|
-
color: $color;
|
|
62
|
-
}
|
|
61
|
+
border: none !important;
|
|
63
62
|
}
|
|
64
63
|
&.mat-error {
|
|
64
|
+
--mdc-chip-label-text-color: #{ µ.error($theme, 500)};
|
|
65
65
|
background: µ.error($theme, 50) !important;
|
|
66
66
|
border: 1px solid µ.error($theme, 500);
|
|
67
|
-
.mat-mdc-chip-action-label {
|
|
68
|
-
color: µ.error($theme, 500);
|
|
69
|
-
}
|
|
70
67
|
}
|
|
71
68
|
&.mat-warn {
|
|
69
|
+
--mdc-chip-label-text-color: #{ µ.warn($theme, 500)};
|
|
72
70
|
background: µ.warn($theme, 50) !important;
|
|
73
71
|
border: 1px solid µ.warn($theme, 200);
|
|
74
|
-
.mat-mdc-chip-action-label {
|
|
75
|
-
color: µ.warn($theme, 600);
|
|
76
|
-
}
|
|
77
72
|
}
|
|
78
73
|
&.mat-success {
|
|
74
|
+
--mdc-chip-label-text-color: #{ µ.success($theme, 500)};
|
|
79
75
|
background: µ.success($theme, 50) !important;
|
|
80
76
|
border: 1px solid µ.success($theme, 200);
|
|
81
|
-
.mat-mdc-chip-action-label {
|
|
82
|
-
color: µ.success($theme);
|
|
83
|
-
}
|
|
84
77
|
}
|
|
85
78
|
&.mat-error {
|
|
79
|
+
--mdc-chip-label-text-color: #{ µ.error($theme, 500)};
|
|
86
80
|
background: µ.error($theme, 50) !important;
|
|
87
81
|
border: 1px solid µ.error($theme, 500);
|
|
88
82
|
display: inline-flex;
|
|
89
|
-
.mat-mdc-chip-action-label {
|
|
90
|
-
color: µ.error($theme);
|
|
91
|
-
}
|
|
92
83
|
}
|
|
93
84
|
&.mat-info {
|
|
85
|
+
--mdc-chip-label-text-color: #{ µ.info($theme, 500)};
|
|
94
86
|
background: µ.info($theme, 50) !important;
|
|
95
87
|
border: 1px solid µ.info($theme, 200);
|
|
96
|
-
.mat-mdc-chip-action-label {
|
|
97
|
-
color: µ.info($theme);
|
|
98
|
-
}
|
|
99
88
|
}
|
|
100
89
|
&.mat-mdc-chip-disabled {
|
|
90
|
+
--mdc-chip-label-text-color: #{ µ.grayscale($theme, 700)};
|
|
101
91
|
opacity: 1;
|
|
102
92
|
background: µ.grayscale($theme, 50) !important;
|
|
103
93
|
border: 1px solid µ.grayscale($theme, 400);
|
|
104
|
-
.mat-mdc-chip-action-label {
|
|
105
|
-
color: µ.grayscale($theme, 700);
|
|
106
|
-
}
|
|
107
94
|
}
|
|
108
95
|
&.mdc-evolution-chip--selected {
|
|
109
96
|
background: µ.primary($theme, 500) !important;
|