blip-ds 1.244.1 → 1.244.2
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/dist/blip-ds/bds-button.entry.js +3 -2
- package/dist/blip-ds/bds-button.system.entry.js +1 -1
- package/dist/blip-ds/bds-icon.entry.js +16 -0
- package/dist/blip-ds/bds-icon.system.entry.js +1 -1
- package/dist/blip-ds/p-3384b887.entry.js +1 -0
- package/dist/blip-ds/p-71da6aac.system.entry.js +1 -0
- package/dist/blip-ds/p-9493d791.system.js +1 -1
- package/dist/blip-ds/p-9b0cf525.entry.js +1 -0
- package/dist/blip-ds/p-e791b9f7.system.entry.js +1 -0
- package/dist/cjs/bds-button.cjs.entry.js +3 -2
- package/dist/cjs/bds-button_2.cjs.entry.js +3 -2
- package/dist/cjs/bds-icon.cjs.entry.js +16 -0
- package/dist/cjs/bds-icon_2.cjs.entry.js +16 -0
- package/dist/collection/components/button/button.css +143 -60
- package/dist/collection/components/button/button.js +2 -1
- package/dist/esm/bds-button.entry.js +3 -2
- package/dist/esm/bds-button_2.entry.js +3 -2
- package/dist/esm/bds-icon.entry.js +16 -0
- package/dist/esm/bds-icon_2.entry.js +16 -0
- package/dist/esm-es5/bds-button_2.entry.js +1 -1
- package/dist/esm-es5/bds-icon_2.entry.js +1 -1
- package/package.json +1 -1
- package/dist/blip-ds/p-270f7035.system.entry.js +0 -1
- package/dist/blip-ds/p-5dc7ad42.system.entry.js +0 -1
- package/dist/blip-ds/p-951616a2.entry.js +0 -1
- package/dist/blip-ds/p-a806e267.entry.js +0 -1
|
@@ -41,7 +41,6 @@
|
|
|
41
41
|
align-items: center;
|
|
42
42
|
justify-content: center;
|
|
43
43
|
height: 100%;
|
|
44
|
-
overflow: hidden;
|
|
45
44
|
border-radius: 8px;
|
|
46
45
|
padding-left: 16px;
|
|
47
46
|
padding-right: 16px;
|
|
@@ -58,22 +57,15 @@
|
|
|
58
57
|
.button * {
|
|
59
58
|
pointer-events: none;
|
|
60
59
|
}
|
|
61
|
-
.button:before {
|
|
62
|
-
content: "";
|
|
63
|
-
position: absolute;
|
|
64
|
-
inset: 0;
|
|
65
|
-
background-color: transparent;
|
|
66
|
-
mix-blend-mode: multiply;
|
|
67
|
-
}
|
|
68
60
|
.button--size-tall {
|
|
69
61
|
padding-top: 14px;
|
|
70
62
|
padding-bottom: 14px;
|
|
71
|
-
height:
|
|
63
|
+
height: 40px;
|
|
72
64
|
}
|
|
73
65
|
.button--size-tall--icon {
|
|
74
66
|
padding-top: 12px;
|
|
75
67
|
padding-bottom: 12px;
|
|
76
|
-
height:
|
|
68
|
+
height: 40px;
|
|
77
69
|
}
|
|
78
70
|
.button--size-standard {
|
|
79
71
|
padding-top: 9px;
|
|
@@ -118,94 +110,185 @@
|
|
|
118
110
|
display: flex;
|
|
119
111
|
align-items: center;
|
|
120
112
|
}
|
|
121
|
-
.button__disabled {
|
|
122
|
-
pointer-events: none;
|
|
123
|
-
opacity: 0.5;
|
|
124
|
-
}
|
|
125
113
|
.button__primary {
|
|
126
|
-
background:
|
|
127
|
-
color:
|
|
114
|
+
background: #3f7de8;
|
|
115
|
+
color: #ffffff;
|
|
128
116
|
}
|
|
129
|
-
.button__primary:hover
|
|
130
|
-
background: #
|
|
117
|
+
.button__primary:hover {
|
|
118
|
+
background: #125ad5;
|
|
131
119
|
}
|
|
132
|
-
.button__primary:active
|
|
133
|
-
background: #
|
|
120
|
+
.button__primary:active {
|
|
121
|
+
background: #0747a6;
|
|
122
|
+
color: #ffffff;
|
|
123
|
+
}
|
|
124
|
+
.button__primary--disabled {
|
|
125
|
+
background: #e8f2ff;
|
|
126
|
+
pointer-events: none;
|
|
127
|
+
color: #637798;
|
|
128
|
+
}
|
|
129
|
+
.button__primary--disabled:hover, .button__primary--disabled:active {
|
|
130
|
+
background: #e8f2ff;
|
|
131
|
+
color: #637798;
|
|
134
132
|
}
|
|
135
133
|
.button__secondary {
|
|
136
|
-
background:
|
|
137
|
-
color:
|
|
134
|
+
background: transparent;
|
|
135
|
+
color: #505f79;
|
|
138
136
|
}
|
|
139
|
-
.button__secondary:hover
|
|
140
|
-
background: #
|
|
137
|
+
.button__secondary:hover {
|
|
138
|
+
background: #e8f2ff;
|
|
139
|
+
color: #3f7de8;
|
|
141
140
|
}
|
|
142
|
-
.button__secondary:active
|
|
143
|
-
background: #
|
|
141
|
+
.button__secondary:active {
|
|
142
|
+
background: #d1e3fa;
|
|
143
|
+
color: #3f7de8;
|
|
144
|
+
}
|
|
145
|
+
.button__secondary--disabled {
|
|
146
|
+
background: transparent;
|
|
147
|
+
pointer-events: none;
|
|
148
|
+
color: #637798;
|
|
149
|
+
}
|
|
150
|
+
.button__secondary--disabled:hover, .button__secondary--disabled:active {
|
|
151
|
+
background: transparent;
|
|
152
|
+
color: #637798;
|
|
144
153
|
}
|
|
145
154
|
.button__tertiary {
|
|
146
155
|
background: transparent;
|
|
147
|
-
color:
|
|
148
|
-
border:
|
|
156
|
+
color: #3f7de8;
|
|
157
|
+
border: 1px solid #d2dfe6;
|
|
158
|
+
}
|
|
159
|
+
.button__tertiary:hover {
|
|
160
|
+
border: 1px solid #3f7de8;
|
|
161
|
+
color: #3f7de8;
|
|
149
162
|
}
|
|
150
|
-
.button__tertiary:
|
|
151
|
-
background: #
|
|
163
|
+
.button__tertiary:active {
|
|
164
|
+
background: #d1e3fa;
|
|
165
|
+
border: 1px solid #3f7de8;
|
|
166
|
+
color: #3f7de8;
|
|
152
167
|
}
|
|
153
|
-
.button__tertiary
|
|
154
|
-
background:
|
|
168
|
+
.button__tertiary--disabled {
|
|
169
|
+
background: transparent;
|
|
170
|
+
pointer-events: none;
|
|
171
|
+
color: #637798;
|
|
172
|
+
border: 1px solid #637798;
|
|
173
|
+
}
|
|
174
|
+
.button__tertiary--disabled:hover, .button__tertiary--disabled:active {
|
|
175
|
+
background: transparent;
|
|
176
|
+
color: #637798;
|
|
177
|
+
border: 1px solid #637798;
|
|
155
178
|
}
|
|
156
179
|
.button__secondary--white {
|
|
157
180
|
background: transparent;
|
|
158
|
-
color:
|
|
181
|
+
color: #ffffff;
|
|
182
|
+
}
|
|
183
|
+
.button__secondary--white:hover {
|
|
184
|
+
background: rgba(255, 255, 255, 0.3);
|
|
185
|
+
color: #ffffff;
|
|
159
186
|
}
|
|
160
|
-
.button__secondary--white:
|
|
161
|
-
background:
|
|
187
|
+
.button__secondary--white:active {
|
|
188
|
+
background: rgba(255, 255, 255, 0.4);
|
|
189
|
+
color: #ffffff;
|
|
162
190
|
}
|
|
163
|
-
.button__secondary--white
|
|
164
|
-
background: #
|
|
191
|
+
.button__secondary--white--disabled {
|
|
192
|
+
background: #e8f2ff;
|
|
193
|
+
pointer-events: none;
|
|
194
|
+
color: #8ca0b3;
|
|
195
|
+
}
|
|
196
|
+
.button__secondary--white--disabled:hover, .button__secondary--white--disabled:active {
|
|
197
|
+
background: #e8f2ff;
|
|
198
|
+
color: #8ca0b3;
|
|
165
199
|
}
|
|
166
200
|
.button__ghost {
|
|
167
201
|
background: transparent;
|
|
168
|
-
color:
|
|
202
|
+
color: #3f7de8;
|
|
203
|
+
border: 1px solid #3f7de8;
|
|
204
|
+
}
|
|
205
|
+
.button__ghost:hover {
|
|
206
|
+
background: #e8f2ff;
|
|
207
|
+
color: #3f7de8;
|
|
208
|
+
border: 1px solid #3f7de8;
|
|
169
209
|
}
|
|
170
|
-
.button__ghost:
|
|
171
|
-
background: #
|
|
210
|
+
.button__ghost:active {
|
|
211
|
+
background: #d1e3fa;
|
|
212
|
+
color: #3f7de8;
|
|
213
|
+
border: 1px solid #3f7de8;
|
|
172
214
|
}
|
|
173
|
-
.button__ghost
|
|
174
|
-
background:
|
|
215
|
+
.button__ghost--disabled {
|
|
216
|
+
background: transparent;
|
|
217
|
+
pointer-events: none;
|
|
218
|
+
color: #637798;
|
|
219
|
+
border: 1px solid #637798;
|
|
220
|
+
}
|
|
221
|
+
.button__ghost--disabled:hover, .button__ghost--disabled:active {
|
|
222
|
+
background: transparent;
|
|
223
|
+
color: #637798;
|
|
224
|
+
border: 1px solid #637798;
|
|
175
225
|
}
|
|
176
226
|
.button__delete {
|
|
177
|
-
background:
|
|
178
|
-
color:
|
|
227
|
+
background: #ff4c4c;
|
|
228
|
+
color: #ffffff;
|
|
229
|
+
}
|
|
230
|
+
.button__delete:hover {
|
|
231
|
+
background: #a01c2c;
|
|
232
|
+
color: #ffffff;
|
|
179
233
|
}
|
|
180
|
-
.button__delete:
|
|
181
|
-
background: #
|
|
234
|
+
.button__delete:active {
|
|
235
|
+
background: #6a2026;
|
|
236
|
+
color: #ffffff;
|
|
182
237
|
}
|
|
183
|
-
.button__delete
|
|
184
|
-
background: #
|
|
238
|
+
.button__delete--disabled {
|
|
239
|
+
background: #fccccc;
|
|
240
|
+
pointer-events: none;
|
|
241
|
+
color: #ba5a5a;
|
|
242
|
+
}
|
|
243
|
+
.button__delete--disabled:hover, .button__delete--disabled:active {
|
|
244
|
+
background: #fccccc;
|
|
245
|
+
color: #ba5a5a;
|
|
185
246
|
}
|
|
186
247
|
.button__dashed {
|
|
187
248
|
background: transparent;
|
|
188
|
-
color:
|
|
189
|
-
border: 1px dashed
|
|
249
|
+
color: #3f7de8;
|
|
250
|
+
border: 1px dashed #3f7de8;
|
|
190
251
|
}
|
|
191
|
-
.button__dashed:hover
|
|
192
|
-
background:
|
|
252
|
+
.button__dashed:hover {
|
|
253
|
+
background: transparent;
|
|
254
|
+
color: #125ad5;
|
|
255
|
+
border: 1px dashed #125ad5;
|
|
193
256
|
}
|
|
194
|
-
.button__dashed:active
|
|
195
|
-
background:
|
|
257
|
+
.button__dashed:active {
|
|
258
|
+
background: transparent;
|
|
259
|
+
color: #3f7de8;
|
|
260
|
+
border: 1px dashed #3f7de8;
|
|
261
|
+
}
|
|
262
|
+
.button__dashed--disabled {
|
|
263
|
+
background: transparent;
|
|
264
|
+
pointer-events: none;
|
|
265
|
+
color: #8ca0b3;
|
|
266
|
+
border: 1px dashed #8ca0b3;
|
|
267
|
+
}
|
|
268
|
+
.button__dashed--disabled:hover, .button__dashed--disabled:active {
|
|
269
|
+
background: transparent;
|
|
270
|
+
color: #8ca0b3;
|
|
271
|
+
border: 1px dashed #8ca0b3;
|
|
196
272
|
}
|
|
197
273
|
.button__facebook {
|
|
198
274
|
background: #1877f2;
|
|
199
275
|
color: #f8fbfb;
|
|
200
276
|
}
|
|
201
|
-
.button__facebook:hover
|
|
202
|
-
background: #
|
|
277
|
+
.button__facebook:hover {
|
|
278
|
+
background: #1771e6;
|
|
203
279
|
}
|
|
204
|
-
.button__facebook:active
|
|
205
|
-
background: #
|
|
280
|
+
.button__facebook:active {
|
|
281
|
+
background: #3f7de8;
|
|
282
|
+
color: #f8fbfb;
|
|
206
283
|
}
|
|
207
|
-
.
|
|
208
|
-
|
|
284
|
+
.button__facebook--disabled {
|
|
285
|
+
background: #e8f2ff;
|
|
286
|
+
pointer-events: none;
|
|
287
|
+
color: #8ca0b3;
|
|
288
|
+
}
|
|
289
|
+
.button__facebook--disabled:hover, .button__facebook--disabled:active {
|
|
290
|
+
background: #e8f2ff;
|
|
291
|
+
color: #8ca0b3;
|
|
209
292
|
}
|
|
210
293
|
.button bds-loading-spinner {
|
|
211
294
|
width: auto;
|
|
@@ -38,6 +38,7 @@ export class Button {
|
|
|
38
38
|
return (h("div", { class: {
|
|
39
39
|
button__content: true,
|
|
40
40
|
[`button__content__${this.variant}`]: true,
|
|
41
|
+
[`button__content__${this.variant}--disabled`]: this.disabled,
|
|
41
42
|
hide: this.bdsLoading && true,
|
|
42
43
|
} }, h("bds-typo", { variant: "fs-14", lineHeight: "simple", bold: "bold" }, h("slot", null))));
|
|
43
44
|
}
|
|
@@ -57,7 +58,7 @@ export class Button {
|
|
|
57
58
|
return (h("button", { onClick: (ev) => this.handleClick(ev), disabled: this.disabled, type: this.type, class: {
|
|
58
59
|
button: true,
|
|
59
60
|
[`button__${this.variant}`]: true,
|
|
60
|
-
[`
|
|
61
|
+
[`button__${this.variant}--disabled`]: this.disabled,
|
|
61
62
|
[sizeClass]: true,
|
|
62
63
|
'button--size-icon--left': !!this.icon,
|
|
63
64
|
'button--size-icon--right': this.arrow,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, e as createEvent, h, g as getElement } from './index-365b378f.js';
|
|
2
2
|
|
|
3
|
-
const buttonCss = ".button{border:none;margin:0;padding:0;width:auto;overflow:visible;outline:none;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;
|
|
3
|
+
const buttonCss = ".button{border:none;margin:0;padding:0;width:auto;overflow:visible;outline:none;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;border-radius:8px;padding-left:16px;padding-right:16px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.button::-moz-focus-inner{border:0;padding:0}.button *{pointer-events:none}.button--size-tall{padding-top:14px;padding-bottom:14px;height:40px}.button--size-tall--icon{padding-top:12px;padding-bottom:12px;height:40px}.button--size-standard{padding-top:9px;padding-bottom:9px;height:40px}.button--size-standard--icon{padding-top:8px;padding-bottom:8px;height:40px}.button--size-short{padding-top:5px;padding-bottom:5px;height:32px}.button--size-short--icon{padding-top:4px;padding-bottom:4px;height:40px}.button--size-icon--left{padding-left:16px}.button--size-icon--right{padding-right:16px}.button__icon{color:inherit;background-color:inherit;height:24px;margin-right:4px}.button__arrow{color:inherit;background-color:inherit;height:24px;margin-left:2px}.button__content{height:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.button__primary{background:#3f7de8;color:#ffffff}.button__primary:hover{background:#125ad5}.button__primary:active{background:#0747a6;color:#ffffff}.button__primary--disabled{background:#e8f2ff;pointer-events:none;color:#637798}.button__primary--disabled:hover,.button__primary--disabled:active{background:#e8f2ff;color:#637798}.button__secondary{background:transparent;color:#505f79}.button__secondary:hover{background:#e8f2ff;color:#3f7de8}.button__secondary:active{background:#d1e3fa;color:#3f7de8}.button__secondary--disabled{background:transparent;pointer-events:none;color:#637798}.button__secondary--disabled:hover,.button__secondary--disabled:active{background:transparent;color:#637798}.button__tertiary{background:transparent;color:#3f7de8;border:1px solid #d2dfe6}.button__tertiary:hover{border:1px solid #3f7de8;color:#3f7de8}.button__tertiary:active{background:#d1e3fa;border:1px solid #3f7de8;color:#3f7de8}.button__tertiary--disabled{background:transparent;pointer-events:none;color:#637798;border:1px solid #637798}.button__tertiary--disabled:hover,.button__tertiary--disabled:active{background:transparent;color:#637798;border:1px solid #637798}.button__secondary--white{background:transparent;color:#ffffff}.button__secondary--white:hover{background:rgba(255, 255, 255, 0.3);color:#ffffff}.button__secondary--white:active{background:rgba(255, 255, 255, 0.4);color:#ffffff}.button__secondary--white--disabled{background:#e8f2ff;pointer-events:none;color:#8ca0b3}.button__secondary--white--disabled:hover,.button__secondary--white--disabled:active{background:#e8f2ff;color:#8ca0b3}.button__ghost{background:transparent;color:#3f7de8;border:1px solid #3f7de8}.button__ghost:hover{background:#e8f2ff;color:#3f7de8;border:1px solid #3f7de8}.button__ghost:active{background:#d1e3fa;color:#3f7de8;border:1px solid #3f7de8}.button__ghost--disabled{background:transparent;pointer-events:none;color:#637798;border:1px solid #637798}.button__ghost--disabled:hover,.button__ghost--disabled:active{background:transparent;color:#637798;border:1px solid #637798}.button__delete{background:#ff4c4c;color:#ffffff}.button__delete:hover{background:#a01c2c;color:#ffffff}.button__delete:active{background:#6a2026;color:#ffffff}.button__delete--disabled{background:#fccccc;pointer-events:none;color:#ba5a5a}.button__delete--disabled:hover,.button__delete--disabled:active{background:#fccccc;color:#ba5a5a}.button__dashed{background:transparent;color:#3f7de8;border:1px dashed #3f7de8}.button__dashed:hover{background:transparent;color:#125ad5;border:1px dashed #125ad5}.button__dashed:active{background:transparent;color:#3f7de8;border:1px dashed #3f7de8}.button__dashed--disabled{background:transparent;pointer-events:none;color:#8ca0b3;border:1px dashed #8ca0b3}.button__dashed--disabled:hover,.button__dashed--disabled:active{background:transparent;color:#8ca0b3;border:1px dashed #8ca0b3}.button__facebook{background:#1877f2;color:#f8fbfb}.button__facebook:hover{background:#1771e6}.button__facebook:active{background:#3f7de8;color:#f8fbfb}.button__facebook--disabled{background:#e8f2ff;pointer-events:none;color:#8ca0b3}.button__facebook--disabled:hover,.button__facebook--disabled:active{background:#e8f2ff;color:#8ca0b3}.button bds-loading-spinner{width:auto;max-height:100%;position:absolute}.button .hide{cursor:not-allowed;opacity:0}";
|
|
4
4
|
|
|
5
5
|
const Button = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -43,6 +43,7 @@ const Button = class {
|
|
|
43
43
|
return (h("div", { class: {
|
|
44
44
|
button__content: true,
|
|
45
45
|
[`button__content__${this.variant}`]: true,
|
|
46
|
+
[`button__content__${this.variant}--disabled`]: this.disabled,
|
|
46
47
|
hide: this.bdsLoading && true,
|
|
47
48
|
} }, h("bds-typo", { variant: "fs-14", lineHeight: "simple", bold: "bold" }, h("slot", null))));
|
|
48
49
|
}
|
|
@@ -62,7 +63,7 @@ const Button = class {
|
|
|
62
63
|
return (h("button", { onClick: (ev) => this.handleClick(ev), disabled: this.disabled, type: this.type, class: {
|
|
63
64
|
button: true,
|
|
64
65
|
[`button__${this.variant}`]: true,
|
|
65
|
-
[`
|
|
66
|
+
[`button__${this.variant}--disabled`]: this.disabled,
|
|
66
67
|
[sizeClass]: true,
|
|
67
68
|
'button--size-icon--left': !!this.icon,
|
|
68
69
|
'button--size-icon--right': this.arrow,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-cbe64994.js';
|
|
2
2
|
|
|
3
|
-
const buttonCss = ".button{border:none;margin:0;padding:0;width:auto;overflow:visible;outline:none;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;
|
|
3
|
+
const buttonCss = ".button{border:none;margin:0;padding:0;width:auto;overflow:visible;outline:none;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;border-radius:8px;padding-left:16px;padding-right:16px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.button::-moz-focus-inner{border:0;padding:0}.button *{pointer-events:none}.button--size-tall{padding-top:14px;padding-bottom:14px;height:40px}.button--size-tall--icon{padding-top:12px;padding-bottom:12px;height:40px}.button--size-standard{padding-top:9px;padding-bottom:9px;height:40px}.button--size-standard--icon{padding-top:8px;padding-bottom:8px;height:40px}.button--size-short{padding-top:5px;padding-bottom:5px;height:32px}.button--size-short--icon{padding-top:4px;padding-bottom:4px;height:40px}.button--size-icon--left{padding-left:16px}.button--size-icon--right{padding-right:16px}.button__icon{color:inherit;background-color:inherit;height:24px;margin-right:4px}.button__arrow{color:inherit;background-color:inherit;height:24px;margin-left:2px}.button__content{height:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.button__primary{background:#3f7de8;color:#ffffff}.button__primary:hover{background:#125ad5}.button__primary:active{background:#0747a6;color:#ffffff}.button__primary--disabled{background:#e8f2ff;pointer-events:none;color:#637798}.button__primary--disabled:hover,.button__primary--disabled:active{background:#e8f2ff;color:#637798}.button__secondary{background:transparent;color:#505f79}.button__secondary:hover{background:#e8f2ff;color:#3f7de8}.button__secondary:active{background:#d1e3fa;color:#3f7de8}.button__secondary--disabled{background:transparent;pointer-events:none;color:#637798}.button__secondary--disabled:hover,.button__secondary--disabled:active{background:transparent;color:#637798}.button__tertiary{background:transparent;color:#3f7de8;border:1px solid #d2dfe6}.button__tertiary:hover{border:1px solid #3f7de8;color:#3f7de8}.button__tertiary:active{background:#d1e3fa;border:1px solid #3f7de8;color:#3f7de8}.button__tertiary--disabled{background:transparent;pointer-events:none;color:#637798;border:1px solid #637798}.button__tertiary--disabled:hover,.button__tertiary--disabled:active{background:transparent;color:#637798;border:1px solid #637798}.button__secondary--white{background:transparent;color:#ffffff}.button__secondary--white:hover{background:rgba(255, 255, 255, 0.3);color:#ffffff}.button__secondary--white:active{background:rgba(255, 255, 255, 0.4);color:#ffffff}.button__secondary--white--disabled{background:#e8f2ff;pointer-events:none;color:#8ca0b3}.button__secondary--white--disabled:hover,.button__secondary--white--disabled:active{background:#e8f2ff;color:#8ca0b3}.button__ghost{background:transparent;color:#3f7de8;border:1px solid #3f7de8}.button__ghost:hover{background:#e8f2ff;color:#3f7de8;border:1px solid #3f7de8}.button__ghost:active{background:#d1e3fa;color:#3f7de8;border:1px solid #3f7de8}.button__ghost--disabled{background:transparent;pointer-events:none;color:#637798;border:1px solid #637798}.button__ghost--disabled:hover,.button__ghost--disabled:active{background:transparent;color:#637798;border:1px solid #637798}.button__delete{background:#ff4c4c;color:#ffffff}.button__delete:hover{background:#a01c2c;color:#ffffff}.button__delete:active{background:#6a2026;color:#ffffff}.button__delete--disabled{background:#fccccc;pointer-events:none;color:#ba5a5a}.button__delete--disabled:hover,.button__delete--disabled:active{background:#fccccc;color:#ba5a5a}.button__dashed{background:transparent;color:#3f7de8;border:1px dashed #3f7de8}.button__dashed:hover{background:transparent;color:#125ad5;border:1px dashed #125ad5}.button__dashed:active{background:transparent;color:#3f7de8;border:1px dashed #3f7de8}.button__dashed--disabled{background:transparent;pointer-events:none;color:#8ca0b3;border:1px dashed #8ca0b3}.button__dashed--disabled:hover,.button__dashed--disabled:active{background:transparent;color:#8ca0b3;border:1px dashed #8ca0b3}.button__facebook{background:#1877f2;color:#f8fbfb}.button__facebook:hover{background:#1771e6}.button__facebook:active{background:#3f7de8;color:#f8fbfb}.button__facebook--disabled{background:#e8f2ff;pointer-events:none;color:#8ca0b3}.button__facebook--disabled:hover,.button__facebook--disabled:active{background:#e8f2ff;color:#8ca0b3}.button bds-loading-spinner{width:auto;max-height:100%;position:absolute}.button .hide{cursor:not-allowed;opacity:0}";
|
|
4
4
|
|
|
5
5
|
const Button = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -43,6 +43,7 @@ const Button = class {
|
|
|
43
43
|
return (h("div", { class: {
|
|
44
44
|
button__content: true,
|
|
45
45
|
[`button__content__${this.variant}`]: true,
|
|
46
|
+
[`button__content__${this.variant}--disabled`]: this.disabled,
|
|
46
47
|
hide: this.bdsLoading && true,
|
|
47
48
|
} }, h("bds-typo", { variant: "fs-14", lineHeight: "simple", bold: "bold" }, h("slot", null))));
|
|
48
49
|
}
|
|
@@ -62,7 +63,7 @@ const Button = class {
|
|
|
62
63
|
return (h("button", { onClick: (ev) => this.handleClick(ev), disabled: this.disabled, type: this.type, class: {
|
|
63
64
|
button: true,
|
|
64
65
|
[`button__${this.variant}`]: true,
|
|
65
|
-
[`
|
|
66
|
+
[`button__${this.variant}--disabled`]: this.disabled,
|
|
66
67
|
[sizeClass]: true,
|
|
67
68
|
'button--size-icon--left': !!this.icon,
|
|
68
69
|
'button--size-icon--right': this.arrow,
|