toggle-components-library 1.36.4-beta.4 → 1.36.4-beta.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 +102 -86
- 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 +102 -86
- 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 +29 -5
- package/src/sass/includes/_as_buttons.scss +12 -7
- package/src/sass/includes/_as_variables.scss +3 -3
- package/package-lock.json +0 -20279
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="toggle-button-container toggle-button-container--login"
|
|
3
|
-
|
|
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)">
|
|
2
|
+
<div class="toggle-button-container toggle-button-container--login"
|
|
3
|
+
:class="{'toggle-button-container--fluid': btnFluid}">
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
<button :type="type" :class="buttonClasses" @click="click" :disabled="(loading || disabled)">
|
|
6
|
+
|
|
7
|
+
<div :class="loaderClasses" v-if="loading"></div>
|
|
8
8
|
|
|
9
9
|
<div class="toggle-login-button-text" v-else>
|
|
10
10
|
{{ buttonText }}
|
|
@@ -77,6 +77,30 @@ export default {
|
|
|
77
77
|
*/
|
|
78
78
|
this.$emit('click');
|
|
79
79
|
}
|
|
80
|
+
},
|
|
81
|
+
computed: {
|
|
82
|
+
/**
|
|
83
|
+
* The class to apply to the button
|
|
84
|
+
* @return {Object}
|
|
85
|
+
*/
|
|
86
|
+
buttonClasses() {
|
|
87
|
+
return {
|
|
88
|
+
'toggle-login-button': true,
|
|
89
|
+
'toggle-login-button--airship': this.platform == 'airship',
|
|
90
|
+
'toggle-login-button--loading': this.platform == 'toggle' && this.loading,
|
|
91
|
+
'toggle-login-button--airship-loading': this.platform == 'airship' && this.loading
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
/**
|
|
95
|
+
* The class to apply to the loader
|
|
96
|
+
* @return {Object}
|
|
97
|
+
*/
|
|
98
|
+
loaderClasses() {
|
|
99
|
+
return {
|
|
100
|
+
'toggle-login-button-loader': true,
|
|
101
|
+
'toggle-login-button-loader--airship': this.platform == 'airship',
|
|
102
|
+
}
|
|
103
|
+
}
|
|
80
104
|
}
|
|
81
105
|
}
|
|
82
106
|
</script>
|
|
@@ -294,21 +294,23 @@
|
|
|
294
294
|
transform: translate(0, -3px);
|
|
295
295
|
color: #fff;
|
|
296
296
|
}
|
|
297
|
-
&--airship{
|
|
298
|
-
background
|
|
297
|
+
&--airship {
|
|
298
|
+
background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box;
|
|
299
|
+
|
|
299
300
|
&:hover:not(:disabled) {
|
|
300
|
-
background-color: #
|
|
301
|
-
box-shadow: 0 10px 30px -10px rgba(
|
|
301
|
+
background-color: #5F1C70;
|
|
302
|
+
box-shadow: 0 10px 30px -10px rgba(190, 58, 223, 0.5);
|
|
302
303
|
}
|
|
303
|
-
|
|
304
|
-
|
|
304
|
+
|
|
305
|
+
&:disabled, &[disabled] {
|
|
306
|
+
background: transparent linear-gradient(112deg, rgba(190, 58, 223, 0.6) 0%, rgba(94, 28, 110, 0.6) 100%) 0% 0% no-repeat padding-box;
|
|
305
307
|
}
|
|
306
308
|
}
|
|
307
309
|
&--loading{
|
|
308
310
|
background-color: #3180FF !important;
|
|
309
311
|
}
|
|
310
312
|
&--airship-loading{
|
|
311
|
-
background
|
|
313
|
+
background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box !important;
|
|
312
314
|
}
|
|
313
315
|
}
|
|
314
316
|
|
|
@@ -328,6 +330,9 @@
|
|
|
328
330
|
top: 50%;
|
|
329
331
|
margin-top: -0.5rem;
|
|
330
332
|
box-sizing: content-box;
|
|
333
|
+
&--airship {
|
|
334
|
+
border-top-color: transparent;
|
|
335
|
+
}
|
|
331
336
|
}
|
|
332
337
|
|
|
333
338
|
.toggle-metrics-button {
|
|
@@ -62,9 +62,9 @@ $booster-test-colour-light:#02add3;
|
|
|
62
62
|
$booster-test-colour-med:#0098ac;
|
|
63
63
|
$booster-test-colour-dark:#008ba4;
|
|
64
64
|
|
|
65
|
-
$booster-feedback-colour-light:#
|
|
66
|
-
$booster-feedback-colour-med:#
|
|
67
|
-
$booster-feedback-colour-dark:#
|
|
65
|
+
$booster-feedback-colour-light:#ffffff;
|
|
66
|
+
$booster-feedback-colour-med:#dd3c3c;
|
|
67
|
+
$booster-feedback-colour-dark:#000000;
|
|
68
68
|
|
|
69
69
|
/* metrics */
|
|
70
70
|
$toggle-metric-label-blue: #477EF6;
|