viniBaxter-desk_front 0.7.0 → 10.0.0

data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/mixins/_buttons.scss

@@ -1,343 +1,357 @@
-@mixin btn-styles($btn-color, $btn-states-color) {
-  @include diagonal-gradient($btn-color, $btn-states-color);
-    background-color: $btn-color;
-    transition: all 0.15s ease;
-    box-shadow: none;
-    &.animation-on-hover:hover{
-      background-position: bottom left;
-      transition:0.3s ease-in-out;
-    }
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.active,
-    &:active:focus,
-    &:active:hover,
-    &.active:focus,
-    &.active:hover
-     {
-        background-color: $btn-states-color !important;
-        background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-        background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-        background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-        background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-        color: $white;
-        box-shadow: none;
-    }
-
-    &:active{
-      box-shadow: none !important;
-      transform: translateY(1px) !important;
-      transition: all .15s ease;
-    }
-
-    &:not([data-action]):hover{
-
-        box-shadow:  2px 2px 6px rgba(0,0,0,0.4);
-        transform: translateY(-1px);
-        -webkit-transform: translateY(-1px);
-    }
-
-    &.disabled,
-    &:disabled,
-    &[disabled],
-    fieldset[disabled] & {
-        &,
-        &:hover,
-        &:focus,
-        &.focus,
-        &:active,
-        &.active {
-            background-color: $btn-color;
-            border-color: $btn-color;
-        }
-    }
-
-    // btn-neutral style
-    @if $btn-color == $white{
-        color: $primary;
-
-        &.btn-danger{
-            color: $danger;
-
-            &:hover,
-            &:focus,
-            &:active,
-            &:active:focus{
-                color: $danger-states;
-            }
-        }
-
-        &.btn-info{
-            color: $info;
-
-            &:hover,
-            &:focus,
-            &:active,
-            &:active:focus{
-                color: $info-states;
-            }
-        }
-
-        &.btn-warning{
-            color: $warning;
-
-            &:hover,
-            &:focus,
-            &:active,
-            &:active:focus{
-                color: $warning-states;
-            }
-        }
-
-        &.btn-success{
-            color: $success;
-
-            &:hover,
-            &:focus,
-            &:active,
-            &:active:focus{
-                color: $success-states;
-            }
-        }
-
-        &.btn-default{
-            color: $default;
-
-            &:hover,
-            &:focus,
-            &:active,
-            &:active:focus{
-                color: $default-states;
-            }
-        }
-
-        &.active,
-        &:active,
-        &:active:focus,
-        &:active:hover,
-        &.active:focus,
-        &.active:hover,
-        .show > &.dropdown-toggle,
-        .show > &.dropdown-toggle:focus,
-        .show > &.dropdown-toggle:hover {
-            background-color: $white;
-            color: $primary-states;
-            box-shadow: none;
-        }
-
-        &:hover,
-        &:focus{
-            color: $primary-states;
-
-            &:not(.nav-link){
-                box-shadow: none;
-            }
-
-        }
-
-    } @else {
-        color: $white;
-    }
-
-    &.btn-simple{
-        color: $btn-color;
-        border-color: $btn-color;
-        background: $transparent-bg;
-
-        &:hover,
-        &:focus,
-        &:active,
-        &:not(:disabled):not(.disabled):active{
-            color: $btn-color;
-            border-color: $btn-color;
-            background-color: $transparent-bg !important;
-            background-image: none !important;
-            box-shadow: none;
-        }
-
-        &.active{
-          border-color: $btn-color !important;
-          &:hover,
-          &:focus,
-          &:active,
-          &:not(:disabled):not(.disabled):active{
-              color: $white;
-              border-color: $btn-color;
-              background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-              background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-              background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-              background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
-              background-color: $btn-states-color !important;
-              box-shadow: none;
-          }
-        }
-    }
-
-    &.btn-link{
-        color: $btn-color;
-        &:hover,
-        &:focus,
-        &:active{
-            background-color: $transparent-bg !important;
-            background-image: none !important;
-            color: $white !important;
-            text-decoration: none;
-            box-shadow: none;
-        }
-    }
-}
-
-@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
-    color: color-yiq($background);
-    @include gradient-bg($background);
-    border-color: $border;
-    @include box-shadow($btn-box-shadow);
-
-    @include hover {
-        color: color-yiq($hover-background);
-        @include gradient-bg($hover-background);
-        border-color: $hover-border;
-    }
-
-    &:focus,
-    &.focus {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        @if $enable-shadows {
-            box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
-        }
-        @else {
-            box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
-        }
-    } // Disabled comes first so active can properly restyle
-    &.disabled,
-    &:disabled {
-        color: color-yiq($background);
-        background-color: $background;
-        border-color: $border;
-    }
-
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active,
-    .show>&.dropdown-toggle {
-        color: color-yiq($active-background);
-        background-color: $active-background;
-        @if $enable-gradients {
-            background-image: none; // Remove the gradient for the pressed/active state
-        }
-        border-color: $active-border;
-
-        &:focus {
-            // Avoid using mixin so we can pass custom focus shadow properly
-            @if $enable-shadows {
-                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
-            }
-            @else {
-                box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
-            }
-        }
-    }
-}
-
-@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
-    color: $color;
-    background-color: transparent;
-    background-image: none;
-    border-color: $color;
-
-    &:hover {
-        color: $color-hover;
-        background-color: $active-background;
-        border-color: $active-border;
-    }
-
-    &:focus,
-    &.focus {
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-    }
-
-    &.disabled,
-    &:disabled {
-        color: $color;
-        background-color: transparent;
-    }
-
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active,
-    .show>&.dropdown-toggle {
-        color: color-yiq($active-background);
-        background-color: $active-background;
-        border-color: $active-border;
-
-        &:focus {
-            // Avoid using mixin so we can pass custom focus shadow properly
-            @if $enable-shadows and $btn-active-box-shadow !=none {
-                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
-            }
-            @else {
-                box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-            }
-        }
-    }
-}
-
-// Button sizes
-@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
-   font-size: $font-size;
-   border-radius: $border;
-   padding: $padding-vertical $padding-horizontal;
-
-   &.btn-simple{
-       padding: $padding-vertical - 1 $padding-horizontal - 1;
-   }
-
-}
-
-// for social buttons
-@mixin social-buttons-color ($color, $state-color){
-  @include diagonal-gradient($color, darken($color,20%));
-    //background-color: $color;
-    color: $white;
-    background-size: 210% 210%;
-    background-position: top right;
-    background-repeat: space;
-
-    &:focus,
-    &:active,
-    &:hover{
-        background-color: $state-color;
-        background-image: linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
-        background-image: -webkit-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
-        background-image: -o-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
-        background-image: -moz-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
-        color: $white;
-    }
-
-    &.btn-simple{
-        color: $state-color;
-        background-color: $transparent-bg;
-        background-image: none !important;
-        box-shadow: none;
-        border-color: $state-color;
-
-        &:hover,
-        &:focus,
-        &:active{
-            color: $state-color;
-            border-color: $state-color;
-        }
-    }
-
-    &.btn-neutral{
-        color: $color;
-        background-color: $white;
-
-
-        &:hover,
-        &:focus,
-        &:active{
-            color: $state-color;
-        }
-    }
-}
+// @mixin btn-styles($btn-color, $btn-states-color) {
+//     @include diagonal-gradient($btn-color, $btn-states-color);
+//     background-color: $btn-color;
+//     transition: all 0.15s ease;
+//     box-shadow: none;
+
+//     &.animation-on-hover:hover {
+//         background-position: bottom left;
+//         transition: 0.3s ease-in-out;
+//     }
+
+//     &:hover,
+//     &:focus,
+//     &:active,
+//     &.active,
+//     &:active:focus,
+//     &:active:hover,
+//     &.active:focus,
+//     &.active:hover {
+//         background-color: $btn-states-color !important;
+//         background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//         background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//         background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//         background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//         color: $white;
+//         box-shadow: none;
+//     }
+
+//     &:active {
+//         box-shadow: none !important;
+//         transform: translateY(1px) !important;
+//         transition: all .15s ease;
+//     }
+
+//     &:not([data-action]):hover {
+
+//         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
+//         transform: translateY(-1px);
+//         -webkit-transform: translateY(-1px);
+//     }
+
+//     &.disabled,
+//     &:disabled,
+//     &[disabled],
+//     fieldset[disabled] & {
+
+//         &,
+//         &:hover,
+//         &:focus,
+//         &.focus,
+//         &:active,
+//         &.active {
+//             background-color: $btn-color;
+//             border-color: $btn-color;
+//         }
+//     }
+
+//     // btn-neutral style
+//     @if $btn-color==$white {
+//         color: $primary;
+
+//         &.btn-danger {
+//             color: $danger;
+
+//             &:hover,
+//             &:focus,
+//             &:active,
+//             &:active:focus {
+//                 color: $danger-states;
+//             }
+//         }
+
+//         &.btn-info {
+//             color: $info;
+
+//             &:hover,
+//             &:focus,
+//             &:active,
+//             &:active:focus {
+//                 color: $info-states;
+//             }
+//         }
+
+//         &.btn-warning {
+//             color: $warning;
+
+//             &:hover,
+//             &:focus,
+//             &:active,
+//             &:active:focus {
+//                 color: $warning-states;
+//             }
+//         }
+
+//         &.btn-success {
+//             color: $success;
+
+//             &:hover,
+//             &:focus,
+//             &:active,
+//             &:active:focus {
+//                 color: $success-states;
+//             }
+//         }
+
+//         &.btn-default {
+//             color: $default;
+
+//             &:hover,
+//             &:focus,
+//             &:active,
+//             &:active:focus {
+//                 color: $default-states;
+//             }
+//         }
+
+//         &.active,
+//         &:active,
+//         &:active:focus,
+//         &:active:hover,
+//         &.active:focus,
+//         &.active:hover,
+//         .show>&.dropdown-toggle,
+//         .show>&.dropdown-toggle:focus,
+//         .show>&.dropdown-toggle:hover {
+//             background-color: $white;
+//             color: $primary-states;
+//             box-shadow: none;
+//         }
+
+//         &:hover,
+//         &:focus {
+//             color: $primary-states;
+
+//             &:not(.nav-link) {
+//                 box-shadow: none;
+//             }
+
+//         }
+
+//     }
+
+//     @else {
+//         color: $white;
+//     }
+
+//     &.btn-simple {
+//         color: $btn-color;
+//         border-color: $btn-color;
+//         background: $transparent-bg;
+
+//         &:hover,
+//         &:focus,
+//         &:active,
+//         &:not(:disabled):not(.disabled):active {
+//             color: $btn-color;
+//             border-color: $btn-color;
+//             background-color: $transparent-bg !important;
+//             background-image: none !important;
+//             box-shadow: none;
+//         }
+
+//         &.active {
+//             border-color: $btn-color !important;
+
+//             &:hover,
+//             &:focus,
+//             &:active,
+//             &:not(:disabled):not(.disabled):active {
+//                 color: $white;
+//                 border-color: $btn-color;
+//                 background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//                 background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//                 background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//                 background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+//                 background-color: $btn-states-color !important;
+//                 box-shadow: none;
+//             }
+//         }
+//     }
+
+//     &.btn-link {
+//         color: $btn-color;
+
+//         &:hover,
+//         &:focus,
+//         &:active {
+//             background-color: $transparent-bg !important;
+//             background-image: none !important;
+//             color: $white !important;
+//             text-decoration: none;
+//             box-shadow: none;
+//         }
+//     }
+// }
+
+// @mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
+//     color: color-yiq($background);
+//     @include gradient-bg($background);
+//     border-color: $border;
+//     @include box-shadow($btn-box-shadow);
+
+//     @include hover {
+//         color: color-yiq($hover-background);
+//         @include gradient-bg($hover-background);
+//         border-color: $hover-border;
+//     }
+
+//     &:focus,
+//     &.focus {
+
+//         // Avoid using mixin so we can pass custom focus shadow properly
+//         @if $enable-shadows {
+//             box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+//         }
+
+//         @else {
+//             box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+//         }
+//     }
+
+//     // Disabled comes first so active can properly restyle
+//     &.disabled,
+//     &:disabled {
+//         color: color-yiq($background);
+//         background-color: $background;
+//         border-color: $border;
+//     }
+
+//     &:not(:disabled):not(.disabled):active,
+//     &:not(:disabled):not(.disabled).active,
+//     .show>&.dropdown-toggle {
+//         color: color-yiq($active-background);
+//         background-color: $active-background;
+
+//         @if $enable-gradients {
+//             background-image: none; // Remove the gradient for the pressed/active state
+//         }
+
+//         border-color: $active-border;
+
+//         &:focus {
+
+//             // Avoid using mixin so we can pass custom focus shadow properly
+//             @if $enable-shadows {
+//                 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+//             }
+
+//             @else {
+//                 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+//             }
+//         }
+//     }
+// }
+
+// @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+//     color: $color;
+//     background-color: transparent;
+//     background-image: none;
+//     border-color: $color;
+
+//     &:hover {
+//         color: $color-hover;
+//         background-color: $active-background;
+//         border-color: $active-border;
+//     }
+
+//     &:focus,
+//     &.focus {
+//         box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+//     }
+
+//     &.disabled,
+//     &:disabled {
+//         color: $color;
+//         background-color: transparent;
+//     }
+
+//     &:not(:disabled):not(.disabled):active,
+//     &:not(:disabled):not(.disabled).active,
+//     .show>&.dropdown-toggle {
+//         color: color-yiq($active-background);
+//         background-color: $active-background;
+//         border-color: $active-border;
+
+//         &:focus {
+
+//             // Avoid using mixin so we can pass custom focus shadow properly
+//             @if $enable-shadows and $btn-active-box-shadow !=none {
+//                 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+//             }
+
+//             @else {
+//                 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+//             }
+//         }
+//     }
+// }
+
+// // Button sizes
+// @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border) {
+//     font-size: $font-size;
+//     border-radius: $border;
+//     padding: $padding-vertical $padding-horizontal;
+
+//     &.btn-simple {
+//         padding: $padding-vertical - 1 $padding-horizontal - 1;
+//     }
+
+// }
+
+// // for social buttons
+// @mixin social-buttons-color ($color, $state-color) {
+//     @include diagonal-gradient($color, darken($color, 20%));
+//     //background-color: $color;
+//     color: $white;
+//     background-size: 210% 210%;
+//     background-position: top right;
+//     background-repeat: space;
+
+//     &:focus,
+//     &:active,
+//     &:hover {
+//         background-color: $state-color;
+//         background-image: linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
+//         background-image: -webkit-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
+//         background-image: -o-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
+//         background-image: -moz-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
+//         color: $white;
+//     }
+
+//     &.btn-simple {
+//         color: $state-color;
+//         background-color: $transparent-bg;
+//         background-image: none !important;
+//         box-shadow: none;
+//         border-color: $state-color;
+
+//         &:hover,
+//         &:focus,
+//         &:active {
+//             color: $state-color;
+//             border-color: $state-color;
+//         }
+//     }
+
+//     &.btn-neutral {
+//         color: $color;
+//         background-color: $white;
+
+//         &:hover,
+//         &:focus,
+//         &:active {
+//             color: $state-color;
+//         }
+//     }
+// }