toggle-components-library 1.28.4 → 1.28.5
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/toggle-components-library.common.js +78 -67
- package/dist/toggle-components-library.common.js.map +1 -1
- package/dist/toggle-components-library.css +1 -1
- package/dist/toggle-components-library.umd.js +78 -67
- package/dist/toggle-components-library.umd.js.map +1 -1
- package/dist/toggle-components-library.umd.min.js +1 -1
- package/dist/toggle-components-library.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/buttons/ToggleLoginButton.vue +8 -1
- package/src/sass/includes/_as_buttons.scss +43 -55
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="toggle-button-container toggle-button-container--login" :class="{'toggle-button-container--fluid': btnFluid}">
|
|
3
3
|
|
|
4
|
-
<button :type="type" :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }]" @click="click"
|
|
4
|
+
<button :type="type" :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }, { 'toggle-login-button--loading': platform == 'toggle' && loading }, { 'toggle-login-button--airship-loading': platform == 'airship' && loading }]" @click="click"
|
|
5
|
+
:disabled="(loading || disabled)">
|
|
5
6
|
|
|
6
7
|
<div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
|
|
7
8
|
|
|
@@ -59,6 +60,12 @@ export default {
|
|
|
59
60
|
validator: function (value) {
|
|
60
61
|
return [true, false].indexOf(value) !== -1;
|
|
61
62
|
},
|
|
63
|
+
},
|
|
64
|
+
/**
|
|
65
|
+
* Should the button be disabled?
|
|
66
|
+
*/
|
|
67
|
+
disabled: {
|
|
68
|
+
default: false
|
|
62
69
|
}
|
|
63
70
|
},
|
|
64
71
|
methods: {
|
|
@@ -15,22 +15,6 @@
|
|
|
15
15
|
box-sizing:content-box;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.toggle-button-container{
|
|
19
|
-
background:white;
|
|
20
|
-
display: inline-block;
|
|
21
|
-
border-radius: 0.3rem;
|
|
22
|
-
&--login{
|
|
23
|
-
border-radius: 23px;
|
|
24
|
-
}
|
|
25
|
-
&--fluid{
|
|
26
|
-
width: 100%;
|
|
27
|
-
button{
|
|
28
|
-
width: 100%;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
18
|
.toggle-button-a{
|
|
35
19
|
position:relative;
|
|
36
20
|
}
|
|
@@ -250,6 +234,17 @@
|
|
|
250
234
|
//
|
|
251
235
|
// Toggle and Airship Login Buttons
|
|
252
236
|
//
|
|
237
|
+
.toggle-button-container{
|
|
238
|
+
background:transparent;
|
|
239
|
+
display: inline-block;
|
|
240
|
+
border-radius: 0.3rem;
|
|
241
|
+
&--fluid{
|
|
242
|
+
width: 100%;
|
|
243
|
+
button{
|
|
244
|
+
width: 100%;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
}
|
|
253
248
|
|
|
254
249
|
.toggle-login-button {
|
|
255
250
|
background-color: #3180FF;
|
|
@@ -262,25 +257,41 @@
|
|
|
262
257
|
font: normal normal 600 15px/18px Lato;
|
|
263
258
|
position: relative;
|
|
264
259
|
transition: box-shadow .3s, transform .3s, background-color .3s, -webkit-transform .3s;
|
|
260
|
+
&:disabled, &[disabled]{
|
|
261
|
+
background-color: #d4e4ff;
|
|
262
|
+
cursor: default;
|
|
263
|
+
-webkit-transform: translate(0, 0);
|
|
264
|
+
-ms-transform: translate(0, 0);
|
|
265
|
+
transform: translate(0, 0);
|
|
266
|
+
|
|
267
|
+
}
|
|
268
|
+
&:hover:not(:disabled) {
|
|
269
|
+
background-color: #1571dd;
|
|
270
|
+
box-shadow: 0 10px 30px -10px #2cc1ff;
|
|
271
|
+
-webkit-transform: translate(0, -3px);
|
|
272
|
+
-ms-transform: translate(0, -3px);
|
|
273
|
+
transform: translate(0, -3px);
|
|
274
|
+
color: #fff;
|
|
275
|
+
}
|
|
276
|
+
&--airship{
|
|
277
|
+
background-color: #FF7175;
|
|
278
|
+
&:hover:not(:disabled) {
|
|
279
|
+
background-color: #ff463f;
|
|
280
|
+
box-shadow: 0 10px 30px -10px rgba(254, 108, 102, 0.5);
|
|
281
|
+
}
|
|
282
|
+
&:disabled, &[disabled]{
|
|
283
|
+
background-color: #ed9598;
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
&--loading{
|
|
287
|
+
background-color: #3180FF !important;
|
|
288
|
+
}
|
|
289
|
+
&--airship-loading{
|
|
290
|
+
background-color: #FF7175 !important;
|
|
291
|
+
}
|
|
265
292
|
}
|
|
266
293
|
|
|
267
|
-
.toggle-login-button--airship {
|
|
268
|
-
background-color: #FF7175 !important;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.toggle-login-button:hover {
|
|
272
|
-
background-color: #1571dd;
|
|
273
|
-
box-shadow: 0 10px 30px -10px #2cc1ff;
|
|
274
|
-
-webkit-transform: translate(0, -3px);
|
|
275
|
-
-ms-transform: translate(0, -3px);
|
|
276
|
-
transform: translate(0, -3px);
|
|
277
|
-
color: #fff;
|
|
278
|
-
}
|
|
279
294
|
|
|
280
|
-
.toggle-login-button--airship:hover {
|
|
281
|
-
background-color: #ff463f !important;
|
|
282
|
-
box-shadow: 0 10px 30px -10px rgb(254 108 102 / 50%) !important;
|
|
283
|
-
}
|
|
284
295
|
|
|
285
296
|
.toggle-login-button-loader {
|
|
286
297
|
border-radius: 50%;
|
|
@@ -296,27 +307,4 @@
|
|
|
296
307
|
top: 50%;
|
|
297
308
|
margin-top: -0.5rem;
|
|
298
309
|
box-sizing: content-box;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
.toggle-login-button-loader--airship {
|
|
302
|
-
border-top-color: #FF7175;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.toggle-button-container{
|
|
306
|
-
&:disabled, &[disabled]{
|
|
307
|
-
.toggle-login-button{
|
|
308
|
-
background-color: #d4e4ff;
|
|
309
|
-
cursor: not-allowed;
|
|
310
|
-
-webkit-transform: translate(0, 0);
|
|
311
|
-
-ms-transform: translate(0, 0);
|
|
312
|
-
transform: translate(0, 0);
|
|
313
|
-
}
|
|
314
|
-
.toggle-login-button--airship{
|
|
315
|
-
background-color: #ed9598 !important;
|
|
316
|
-
cursor: not-allowed;
|
|
317
|
-
-webkit-transform: translate(0, 0);
|
|
318
|
-
-ms-transform: translate(0, 0);
|
|
319
|
-
transform: translate(0, 0);
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
310
|
}
|