@hug/hospitality 1.0.0-alpha.50 → 1.0.0-alpha.51
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/material/chips/chips.scss +49 -11
- package/package.json +1 -1
|
@@ -13,10 +13,16 @@ mat-chip {
|
|
|
13
13
|
var(--hy-color-on-warning-container)
|
|
14
14
|
),
|
|
15
15
|
outline-color: transparent,
|
|
16
|
+
disabled-outline-color: transparent,
|
|
16
17
|
hover-state-layer-color: var(
|
|
17
18
|
--hy-chips-text-icon-color,
|
|
18
19
|
var(--hy-color-on-warning-container)
|
|
19
20
|
),
|
|
21
|
+
elevated-disabled-container-color: color-mix(
|
|
22
|
+
in srgb,
|
|
23
|
+
var(--hy-color-on-surface) var(--hy-state-layer-lowest),
|
|
24
|
+
transparent
|
|
25
|
+
),
|
|
20
26
|
)
|
|
21
27
|
);
|
|
22
28
|
}
|
|
@@ -31,13 +37,10 @@ mat-chip {
|
|
|
31
37
|
label-text-tracking: var(--mat-sys-label-small-tracking),
|
|
32
38
|
label-text-weight: var(--mat-sys-label-small-weight),
|
|
33
39
|
with-icon-icon-size: 16px,
|
|
40
|
+
with-avatar-avatar-size: 16px,
|
|
34
41
|
)
|
|
35
42
|
);
|
|
36
43
|
|
|
37
|
-
[matchipcontent] {
|
|
38
|
-
padding-inline: var(--hy-spacing-small);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
44
|
&:has(.mat-icon) [matchipcontent] {
|
|
42
45
|
padding-inline-start: var(--hy-spacing-x-small);
|
|
43
46
|
}
|
|
@@ -51,12 +54,37 @@ mat-chip {
|
|
|
51
54
|
font-size: 16px;
|
|
52
55
|
}
|
|
53
56
|
}
|
|
57
|
+
|
|
58
|
+
mat-icon[matchipavatar] {
|
|
59
|
+
padding-left: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[matchipcontent] {
|
|
63
|
+
padding-inline: 6px;
|
|
64
|
+
|
|
65
|
+
& > :first-child {
|
|
66
|
+
padding-left: 0;
|
|
67
|
+
padding-right: var(--hy-spacing-x-small);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[matchipcontent]:has(> :only-child .mat-icon) {
|
|
72
|
+
padding-inline: var(--hy-spacing-x-small);
|
|
73
|
+
|
|
74
|
+
& > :first-child {
|
|
75
|
+
padding: 0;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
54
78
|
}
|
|
55
79
|
|
|
56
80
|
&:has(.mat-icon) [matchipcontent] {
|
|
57
81
|
padding-inline-start: var(--hy-spacing-small);
|
|
58
82
|
}
|
|
59
83
|
|
|
84
|
+
[matchipcontent]:has(> :only-child .mat-icon) {
|
|
85
|
+
padding-inline: var(--hy-spacing-small);
|
|
86
|
+
}
|
|
87
|
+
|
|
60
88
|
.mat-mdc-chip-action-label {
|
|
61
89
|
display: flex;
|
|
62
90
|
align-items: center;
|
|
@@ -71,30 +99,40 @@ mat-chip {
|
|
|
71
99
|
}
|
|
72
100
|
|
|
73
101
|
mat-chip-option {
|
|
74
|
-
button {
|
|
75
|
-
gap: 0px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
span,
|
|
79
102
|
[matchiptrailingicon] {
|
|
80
103
|
cursor: pointer;
|
|
81
104
|
}
|
|
82
105
|
|
|
106
|
+
button {
|
|
107
|
+
gap: 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
83
110
|
mat-icon {
|
|
84
|
-
padding:
|
|
111
|
+
padding: 0;
|
|
85
112
|
}
|
|
86
113
|
}
|
|
87
114
|
|
|
115
|
+
mat-chip-row [matchipaction] {
|
|
116
|
+
cursor: default;
|
|
117
|
+
}
|
|
118
|
+
|
|
88
119
|
mat-chip-row,
|
|
89
120
|
mat-chip,
|
|
90
121
|
mat-chip-option {
|
|
91
122
|
@include mat.chips-overrides(
|
|
92
123
|
(
|
|
93
124
|
with-avatar-avatar-size: 22px,
|
|
94
|
-
with-avatar-avatar-shape-radius:
|
|
125
|
+
with-avatar-avatar-shape-radius: 0,
|
|
95
126
|
)
|
|
96
127
|
);
|
|
97
128
|
|
|
129
|
+
.mat-mdc-chip-action-label {
|
|
130
|
+
max-width: var(--hy-chip-label-max-width, 20ch);
|
|
131
|
+
white-space: nowrap;
|
|
132
|
+
overflow: hidden;
|
|
133
|
+
text-overflow: ellipsis;
|
|
134
|
+
}
|
|
135
|
+
|
|
98
136
|
mat-icon[matchipavatar] {
|
|
99
137
|
padding-left: var(--hy-spacing-x-small);
|
|
100
138
|
}
|