@florid-kit/components 0.8.54 → 0.8.55
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/index.js +13 -12
- package/index.mjs +13 -12
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -146,8 +146,9 @@
|
|
|
146
146
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
147
147
|
${this.startIcon?this.renderIcon("start"):d}
|
|
148
148
|
${o?l`
|
|
149
|
-
${this.text?l`<span class="text">${this.text}
|
|
149
|
+
${this.text?l`<span class="text">${this.text}</span>`:d}
|
|
150
150
|
${this.textsecond?l`<span class="text">${this.textsecond}</span>`:d}
|
|
151
|
+
${this.withbadge?l`<slot></slot>`:d}
|
|
151
152
|
`:l`<slot></slot>`}
|
|
152
153
|
${this.endIcon?this.renderIcon("end"):d}
|
|
153
154
|
</button>
|
|
@@ -168,6 +169,7 @@
|
|
|
168
169
|
`}};Oe(b);b.formAssociated=!0;b.styles=y`
|
|
169
170
|
:host {
|
|
170
171
|
--button-border: transparent;
|
|
172
|
+
--badge-outer-width: 19px;
|
|
171
173
|
cursor: pointer;
|
|
172
174
|
display: inline-flex;
|
|
173
175
|
}
|
|
@@ -329,8 +331,9 @@
|
|
|
329
331
|
|
|
330
332
|
:host([underlined]) span:not([class*="icon-"]),
|
|
331
333
|
:host([underlined]) .text,
|
|
332
|
-
:host([underlined]) .button slot {
|
|
334
|
+
:host([underlined]:not([text])) .button slot {
|
|
333
335
|
position: relative;
|
|
336
|
+
|
|
334
337
|
&::after {
|
|
335
338
|
content: "";
|
|
336
339
|
display: block;
|
|
@@ -342,12 +345,15 @@
|
|
|
342
345
|
}
|
|
343
346
|
}
|
|
344
347
|
|
|
345
|
-
:host([
|
|
346
|
-
|
|
347
|
-
|
|
348
|
+
:host([underlined]:not([text])) .button slot {
|
|
349
|
+
display: inline-flex;
|
|
350
|
+
gap: 8px;
|
|
348
351
|
}
|
|
349
|
-
|
|
350
|
-
|
|
352
|
+
|
|
353
|
+
:host([underlined][withbadge]:not([text])) .button slot {
|
|
354
|
+
&::after {
|
|
355
|
+
width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
|
|
356
|
+
}
|
|
351
357
|
}
|
|
352
358
|
|
|
353
359
|
//Icon movement on hover
|
|
@@ -2334,11 +2340,6 @@
|
|
|
2334
2340
|
--text-color: var(--color-content-filter, #f6f0e7);
|
|
2335
2341
|
}
|
|
2336
2342
|
|
|
2337
|
-
:host([withinbutton]) {
|
|
2338
|
-
position: absolute;
|
|
2339
|
-
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
2340
|
-
}
|
|
2341
|
-
|
|
2342
2343
|
.badge {
|
|
2343
2344
|
display: block;
|
|
2344
2345
|
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|
package/index.mjs
CHANGED
|
@@ -863,8 +863,9 @@ let b = class extends so {
|
|
|
863
863
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
864
864
|
${this.startIcon ? this.renderIcon("start") : d}
|
|
865
865
|
${o ? l`
|
|
866
|
-
${this.text ? l`<span class="text">${this.text}
|
|
866
|
+
${this.text ? l`<span class="text">${this.text}</span>` : d}
|
|
867
867
|
${this.textsecond ? l`<span class="text">${this.textsecond}</span>` : d}
|
|
868
|
+
${this.withbadge ? l`<slot></slot>` : d}
|
|
868
869
|
` : l`<slot></slot>`}
|
|
869
870
|
${this.endIcon ? this.renderIcon("end") : d}
|
|
870
871
|
</button>
|
|
@@ -894,6 +895,7 @@ b.formAssociated = !0;
|
|
|
894
895
|
b.styles = y`
|
|
895
896
|
:host {
|
|
896
897
|
--button-border: transparent;
|
|
898
|
+
--badge-outer-width: 19px;
|
|
897
899
|
cursor: pointer;
|
|
898
900
|
display: inline-flex;
|
|
899
901
|
}
|
|
@@ -1055,8 +1057,9 @@ b.styles = y`
|
|
|
1055
1057
|
|
|
1056
1058
|
:host([underlined]) span:not([class*="icon-"]),
|
|
1057
1059
|
:host([underlined]) .text,
|
|
1058
|
-
:host([underlined]) .button slot {
|
|
1060
|
+
:host([underlined]:not([text])) .button slot {
|
|
1059
1061
|
position: relative;
|
|
1062
|
+
|
|
1060
1063
|
&::after {
|
|
1061
1064
|
content: "";
|
|
1062
1065
|
display: block;
|
|
@@ -1068,12 +1071,15 @@ b.styles = y`
|
|
|
1068
1071
|
}
|
|
1069
1072
|
}
|
|
1070
1073
|
|
|
1071
|
-
:host([
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
+
:host([underlined]:not([text])) .button slot {
|
|
1075
|
+
display: inline-flex;
|
|
1076
|
+
gap: 8px;
|
|
1074
1077
|
}
|
|
1075
|
-
|
|
1076
|
-
|
|
1078
|
+
|
|
1079
|
+
:host([underlined][withbadge]:not([text])) .button slot {
|
|
1080
|
+
&::after {
|
|
1081
|
+
width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
|
|
1082
|
+
}
|
|
1077
1083
|
}
|
|
1078
1084
|
|
|
1079
1085
|
//Icon movement on hover
|
|
@@ -4275,11 +4281,6 @@ pt.styles = y`
|
|
|
4275
4281
|
--text-color: var(--color-content-filter, #f6f0e7);
|
|
4276
4282
|
}
|
|
4277
4283
|
|
|
4278
|
-
:host([withinbutton]) {
|
|
4279
|
-
position: absolute;
|
|
4280
|
-
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
4281
|
-
}
|
|
4282
|
-
|
|
4283
4284
|
.badge {
|
|
4284
4285
|
display: block;
|
|
4285
4286
|
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|