toggle-components-library 1.36.3 → 1.36.4-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.3",
+    "version": "1.36.4-beta.0",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/buttons/ToggleLoginButton.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="toggle-button-container toggle-button-container--login" :class="{'toggle-button-container--fluid': btnFluid}">
-        
-        <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" 
-            :disabled="(loading || disabled)">
+    <div class="toggle-button-container toggle-button-container--login"
+        :class="{'toggle-button-container--fluid': btnFluid}">
 
-            <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
+        <button :type="type" :class="buttonClasses" @click="click" :disabled="(loading || disabled)">
+
+            <div :class="loaderClasses" v-if="loading"></div>
 
             <div class="toggle-login-button-text" v-else>
                 {{ buttonText }}
@@ -42,13 +42,13 @@ export default {
             default: false
         },
         /**
-        * Is the button being used on toggle or airship? use `toggle` or `airship`
+        * Is the button being used on toggle or airship? use `toggle` or `airship` or for Airships new rebranding `airship-atmosphere`
         */
         platform: {
             type: String,
             default: "toggle",
             validator: function (value) {
-                return ['toggle', 'airship'].indexOf(value) !== -1;
+                return ['toggle', 'airship', 'airship-atmosphere'].indexOf(value) !== -1;
             },
         },
         /**
@@ -77,6 +77,33 @@ export default {
              */
             this.$emit('click');
         }
+    },
+    computed: {
+        /**
+         * The class to apply to the button
+         * @return {Object}
+         */
+        buttonClasses() {
+            return {
+                'toggle-login-button': true,
+                'toggle-login-button--airship': this.platform == 'airship',
+                'toggle-login-button--loading': this.platform == 'toggle' && this.loading,
+                'toggle-login-button--airship-loading': this.platform == 'airship' && this.loading,
+                'toggle-login-button--airship-atmosphere': this.platform == 'airship-atmosphere',
+                'toggle-login-button--airship-atmosphere-loading': this.platform == 'airship-atmosphere' && this.loading
+            }
+        },
+        /**
+         * The class to apply to the loader
+         * @return {Object}
+         */
+        loaderClasses() {
+            return {
+                'toggle-login-button-loader': true,
+                'toggle-login-button-loader--airship': this.platform == 'airship',
+                'toggle-login-button-loader--airship-atmosphere': this.platform == 'airship-atmosphere'
+            }
+        }
     }
 }
 </script>

package/src/components/forms/ToggleDatePicker.vue

@@ -167,7 +167,7 @@ export default {
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .toggle-date-container {
   display: none;
   &.visible {

package/src/sass/includes/_as_buttons.scss

@@ -304,12 +304,27 @@
             background-color: #ed9598;
         }
     }
+    &--airship-atmosphere {
+        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box;
+
+        &:hover:not(:disabled) {
+            background-color: #5F1C70;
+            box-shadow: 0 10px 30px -10px rgba(190, 58, 223, 0.5);
+        }
+
+        &:disabled, &[disabled] {
+            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;
+        }
+    }
     &--loading{
         background-color: #3180FF !important;
     }
     &--airship-loading{
         background-color: #FF7175 !important;
     }
+    &--airship-atmosphere-loading{
+        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box !important;
+    }
 }
 
 
@@ -328,6 +343,12 @@
     top: 50%;
     margin-top: -0.5rem;
     box-sizing: content-box;
+    &--airship {
+        border-top-color: #FF7175;
+    }
+    &--airship-atmosphere {
+        border-top-color: transparent;
+    }
 }
 
 .toggle-metrics-button {