@snack-uikit/tag 0.8.2 → 0.8.3-preview-261fde59.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.
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
padding-right:var(--space-tag-xs-from-label, 8px);
|
|
33
33
|
height:var(--size-tag-xs, 24px);
|
|
34
34
|
border-radius:var(--radius-tag-xs, 4px);
|
|
35
|
+
height:auto;
|
|
36
|
+
min-height:var(--size-tag-xs, 24px);
|
|
35
37
|
}
|
|
36
38
|
.tag[data-size=xs][data-removable=true]{
|
|
37
39
|
padding-left:var(--space-tag-xs-from-label, 8px);
|
|
@@ -39,6 +41,8 @@
|
|
|
39
41
|
height:var(--size-tag-xs, 24px);
|
|
40
42
|
border-radius:var(--radius-tag-xs, 4px);
|
|
41
43
|
gap:var(--space-tag-xs-gap, 2px);
|
|
44
|
+
height:auto;
|
|
45
|
+
min-height:var(--size-tag-xs, 24px);
|
|
42
46
|
}
|
|
43
47
|
.tag[data-size=xs] .label{
|
|
44
48
|
font-family:var(--sans-label-s-font-family, SB Sans Interface);
|
|
@@ -47,17 +51,21 @@
|
|
|
47
51
|
font-size:var(--sans-label-s-font-size, 11px);
|
|
48
52
|
letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
|
|
49
53
|
paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
|
|
54
|
+
word-break:break-all;
|
|
50
55
|
}
|
|
51
56
|
.tag[data-size=xs] .tagButton{
|
|
52
57
|
border-radius:var(--radius-tag-xs, 4px);
|
|
53
58
|
height:var(--size-tag-xs, 24px);
|
|
54
59
|
width:var(--size-tag-xs, 24px);
|
|
60
|
+
flex-shrink:0;
|
|
55
61
|
}
|
|
56
62
|
.tag[data-size=s]{
|
|
57
63
|
padding-left:var(--space-tag-s-from-label, 16px);
|
|
58
64
|
padding-right:var(--space-tag-s-from-label, 16px);
|
|
59
65
|
height:var(--size-tag-s, 32px);
|
|
60
66
|
border-radius:var(--radius-tag-s, 8px);
|
|
67
|
+
height:auto;
|
|
68
|
+
min-height:var(--size-tag-s, 32px);
|
|
61
69
|
}
|
|
62
70
|
.tag[data-size=s][data-removable=true]{
|
|
63
71
|
padding-left:var(--space-tag-s-from-label, 16px);
|
|
@@ -65,6 +73,8 @@
|
|
|
65
73
|
height:var(--size-tag-s, 32px);
|
|
66
74
|
border-radius:var(--radius-tag-s, 8px);
|
|
67
75
|
gap:var(--space-tag-s-gap, 2px);
|
|
76
|
+
height:auto;
|
|
77
|
+
min-height:var(--size-tag-s, 32px);
|
|
68
78
|
}
|
|
69
79
|
.tag[data-size=s] .label{
|
|
70
80
|
font-family:var(--sans-label-m-font-family, SB Sans Interface);
|
|
@@ -73,11 +83,13 @@
|
|
|
73
83
|
font-size:var(--sans-label-m-font-size, 12px);
|
|
74
84
|
letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
|
|
75
85
|
paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
|
|
86
|
+
word-break:break-all;
|
|
76
87
|
}
|
|
77
88
|
.tag[data-size=s] .tagButton{
|
|
78
89
|
border-radius:var(--radius-tag-s, 8px);
|
|
79
90
|
height:var(--size-tag-s, 32px);
|
|
80
91
|
width:var(--size-tag-s, 32px);
|
|
92
|
+
flex-shrink:0;
|
|
81
93
|
}
|
|
82
94
|
.tag[data-appearance=neutral]{
|
|
83
95
|
background-color:var(--sys-neutral-decor-default, #dfe2ec);
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Tag",
|
|
7
|
-
"version": "0.8.
|
|
7
|
+
"version": "0.8.3-preview-261fde59.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"@snack-uikit/utils": "3.2.0",
|
|
39
39
|
"classnames": "2.3.2"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "b85a3e64181579e417336b16c153425924075fe1"
|
|
42
42
|
}
|
|
@@ -127,16 +127,26 @@ $appearances: (
|
|
|
127
127
|
&[data-size='#{$size}'] {
|
|
128
128
|
@include composite-var($tag, 'container', $size, 'label-only');
|
|
129
129
|
|
|
130
|
+
height: auto;
|
|
131
|
+
min-height: simple-var($theme-variables, 'size', 'tag', $size);
|
|
132
|
+
|
|
130
133
|
&[data-removable='true'] {
|
|
131
134
|
@include composite-var($tag, 'container', $size, 'button-after');
|
|
135
|
+
|
|
136
|
+
height: auto;
|
|
137
|
+
min-height: simple-var($theme-variables, 'size', 'tag', $size);
|
|
132
138
|
}
|
|
133
139
|
|
|
134
140
|
.label {
|
|
135
141
|
@include composite-var($label-typography, $size);
|
|
142
|
+
|
|
143
|
+
word-break: break-all;
|
|
136
144
|
}
|
|
137
145
|
|
|
138
146
|
.tagButton {
|
|
139
147
|
@include composite-var($tag-button, 'container', $size, 'icon-only');
|
|
148
|
+
|
|
149
|
+
flex-shrink: 0;
|
|
140
150
|
}
|
|
141
151
|
}
|
|
142
152
|
}
|