toggle-components-library 1.36.4-beta.5 → 1.36.5-beta.1

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.
Files changed (13) hide show
  1. package/dist/toggle-components-library.common.js +132 -148
  2. package/dist/toggle-components-library.common.js.map +1 -1
  3. package/dist/toggle-components-library.css +1 -1
  4. package/dist/toggle-components-library.umd.js +132 -148
  5. package/dist/toggle-components-library.umd.js.map +1 -1
  6. package/dist/toggle-components-library.umd.min.js +9 -9
  7. package/dist/toggle-components-library.umd.min.js.map +1 -1
  8. package/package-lock.json +20279 -0
  9. package/package.json +1 -1
  10. package/src/components/buttons/ToggleLoginButton.vue +5 -29
  11. package/src/components/forms/ToggleDatePicker.vue +1 -1
  12. package/src/sass/includes/_as_buttons.scss +8 -12
  13. package/src/sass/includes/_as_variables.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toggle-components-library",
3
- "version": "1.36.4-beta.5",
3
+ "version": "1.36.5-beta.1",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/buttons/ToggleLoginButton.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <div class="toggle-button-container toggle-button-container--login"
3
- :class="{'toggle-button-container--fluid': btnFluid}">
2
+ <div class="toggle-button-container toggle-button-container--login" :class="{'toggle-button-container--fluid': btnFluid}">
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)">
4
6
 
5
- <button :type="type" :class="buttonClasses" @click="click" :disabled="(loading || disabled)">
6
-
7
- <div :class="loaderClasses" v-if="loading"></div>
7
+ <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
8
8
 
9
9
  <div class="toggle-login-button-text" v-else>
10
10
  {{ buttonText }}
@@ -77,30 +77,6 @@ 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
- }
104
80
  }
105
81
  }
106
82
  </script>
package/src/components/forms/ToggleDatePicker.vue CHANGED
@@ -167,7 +167,7 @@ export default {
167
167
 
168
168
  </script>
169
169
 
170
- <style scoped lang="scss">
170
+ <style scoped>
171
171
  .toggle-date-container {
172
172
  display: none;
173
173
  &.visible {
package/src/sass/includes/_as_buttons.scss CHANGED
@@ -294,23 +294,21 @@
294
294
  transform: translate(0, -3px);
295
295
  color: #fff;
296
296
  }
297
- &--airship {
298
- background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box;
299
-
297
+ &--airship{
298
+ background-color: #FF7175;
300
299
  &:hover:not(:disabled) {
301
- background-color: #5F1C70;
302
- box-shadow: 0 10px 30px -10px rgba(190, 58, 223, 0.5);
300
+ background-color: #ff463f;
301
+ box-shadow: 0 10px 30px -10px rgba(254, 108, 102, 0.5);
303
302
  }
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;
303
+ &:disabled, &[disabled]{
304
+ background-color: #ed9598;
307
305
  }
308
306
  }
309
307
  &--loading{
310
308
  background-color: #3180FF !important;
311
309
  }
312
310
  &--airship-loading{
313
- background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box !important;
311
+ background-color: #FF7175 !important;
314
312
  }
315
313
  }
316
314
 
@@ -330,9 +328,6 @@
330
328
  top: 50%;
331
329
  margin-top: -0.5rem;
332
330
  box-sizing: content-box;
333
- &--airship {
334
- border-top-color: transparent;
335
- }
336
331
  }
337
332
 
338
333
  .toggle-metrics-button {
@@ -504,6 +499,7 @@
504
499
  .toggle-button-booster-image {
505
500
  width: 100%;
506
501
  height: 100%;
502
+ z-index: 1;
507
503
  }
508
504
  &.toggle-button-loading {
509
505
  opacity: 0
package/src/sass/includes/_as_variables.scss CHANGED
@@ -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:#ffffff;
66
- $booster-feedback-colour-med:#dd3c3c;
67
- $booster-feedback-colour-dark:#000000;
65
+ $booster-feedback-colour-light:#FFCB27;
66
+ $booster-feedback-colour-med:#FFCB27;
67
+ $booster-feedback-colour-dark:#FFCB27;
68
68
 
69
69
  /* metrics */
70
70
  $toggle-metric-label-blue: #477EF6;