toggle-components-library 1.25.12 → 1.25.14

package/src/components/buttons/ToggleLoginButton.vue

@@ -0,0 +1,75 @@
+<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' }]" @click="click">
+
+            <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
+
+            <div class="toggle-login-button-text" v-else>
+                {{ buttonText }}
+            </div>
+
+        </button>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ButtonLogin',
+    props: {
+        /**
+         * The test to display in side the button
+         */
+        buttonText: {
+            type: String,
+            default: "Let's go!"
+        },
+        /**
+         * The HTML button type i.e. `submit` or `button`
+         */
+        type: {
+            type: String,
+            default: "submit"
+        },
+        /**
+         * Is the button in a loading state?
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+        * Is the button being used on toggle or airship? use `toggle` or `airship`
+        */
+        platform: {
+            type: String,
+            default: "toggle",
+            validator: function (value) {
+                return ['toggle', 'airship'].indexOf(value) !== -1;
+            },
+        },
+        /**
+        * Is the button being used on toggle or airship? use `toggle` or `airship`
+        */
+        btnFluid: {
+            type: Boolean,
+            default: false,
+            validator: function (value) {
+                return [true, false].indexOf(value) !== -1;
+            },
+        }
+    },
+    methods: {
+        click() {
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
+    }
+}
+</script>

package/src/sass/includes/_as_buttons.scss

@@ -18,7 +18,17 @@
 .toggle-button-container{
     background:white;
     display: inline-block;
+
     border-radius: 0.3rem;
+    &--login{
+        border-radius: 23px;
+    }
+    &--fluid{
+        width: 100%;
+        button{
+            width: 100%;
+        }
+    }
 }
 
 
@@ -135,7 +145,7 @@
     background-image: url("../assets/icons/delete-grey.svg");
 }
 
-// Neutral Button styls
+// Neutral Button styles
 .toggle-button.neutral, .toggle-button-a.neutral a{
     color: $toggle-button-neutral;
     border-color: $toggle-button-neutral;
@@ -147,6 +157,10 @@
 .toggle-button.neutral:disabled, .toggle-button-a.disabled a{
 }
 
+
+
+
+
 // Mini buttons
 // 
 .toggle-button-container-mini{
@@ -237,3 +251,77 @@
     }
 
 }
+
+// 
+// Toggle and Airship Login Buttons
+// 
+
+.toggle-login-button {
+    background-color: #3180FF;
+    border: 0;
+    border-radius: 23px;
+    width: 120px;
+    height: 46px;
+    color: #ffffff;
+    cursor: pointer;
+    font: normal normal 600 15px/18px Lato;
+    position: relative;
+    transition: box-shadow .3s, transform .3s, background-color .3s, -webkit-transform .3s;
+}
+
+.toggle-login-button--airship {
+    background-color: #FF7175 !important;
+}
+
+.toggle-login-button:hover {
+    background-color: #1571dd;
+    box-shadow: 0 10px 30px -10px #2cc1ff;
+    -webkit-transform: translate(0, -3px);
+    -ms-transform: translate(0, -3px);
+    transform: translate(0, -3px);
+    color: #fff;
+}
+
+.toggle-login-button--airship:hover {
+    background-color: #ff463f !important;
+    box-shadow: 0 10px 30px -10px rgb(254 108 102 / 50%) !important;
+}
+
+.toggle-login-button-loader {
+    border-radius: 50%;
+    border: .25rem solid #fff;
+    border-top-color: #3180FF;
+    animation: spin 1s infinite linear;
+    margin: 0 auto;
+    width: 0.5rem;
+    height: 0.5rem;
+    position: absolute;
+    left: 50%;
+    margin-left: -0.5rem;
+    top: 50%;
+    margin-top: -0.5rem;
+    box-sizing: content-box;
+}
+
+.toggle-login-button-loader--airship {
+    border-top-color: #FF7175;
+}
+
+.toggle-button-container{
+    &:disabled, &[disabled]{
+        .toggle-login-button{
+            background-color: #d4e4ff;
+            cursor: not-allowed;
+            -webkit-transform: translate(0, 0);
+            -ms-transform: translate(0, 0);
+            transform: translate(0, 0);
+        }
+        .toggle-login-button--airship{
+            background-color: #ed9598 !important;
+            cursor: not-allowed;
+            -webkit-transform: translate(0, 0);
+            -ms-transform: translate(0, 0);
+            transform: translate(0, 0);
+        }
+    }
+}

package/src/sass/includes/_as_table.scss

@@ -131,6 +131,13 @@ table.toggle-table {
             border-top-right-radius: 10px;
             border-bottom-right-radius: 10px;
         }
+        td.toggle-tablee-td {
+            .toggle-button {
+                &.neutral {
+                    padding: 0.2rem 0.9rem 0.2rem 0.9rem;
+                }
+            }
+        }
 
     }