RubyGems - viniBaxter-desk_front - Versions diffs - 24.0.0 → 31.0.0 - Mend

viniBaxter-desk_front 24.0.0 → 31.0.0

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 (24) hide show

data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_buttons.scss CHANGED Viewed

@@ -1,357 +1,415 @@
 @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;
+  @include diagonal-gradient($btn-color, $btn-states-color);
+  background-color: $btn-color;
+  transition: all 0.15s ease;
   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] & {
+  &.animation-on-hover:hover {
+    background-position: bottom left;
+    transition: 0.3s ease-in-out;
+  }
-  &,
   &: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;
+  &.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;
-   }
   }
- }
- &.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;
+    box-shadow: none !important;
+    transform: translateY(1px) !important;
+    transition: all 0.15s ease;
   }
- }
-}
-@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);
+  &:not([data-action]):hover {
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
+    transform: translateY(-1px);
+    -webkit-transform: translateY(-1px);
+  }
- @include hover {
-  color: color-yiq($hover-background);
-  @include gradient-bg($hover-background);
-  border-color: $hover-border;
- }
+  &.disabled,
+  &:disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: $btn-color;
+      border-color: $btn-color;
+    }
+  }
- &:focus,
- &.focus {
+  // 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;
+  }
-  // 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);
+  &.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;
+      }
+    }
   }
-  @else {
-   box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+  &.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;
+    }
   }
- }
+}
- // Disabled comes first so active can properly restyle
- &.disabled,
- &:disabled {
+@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);
-  background-color: $background;
+  @include gradient-bg($background);
   border-color: $border;
- }
+  @include box-shadow($btn-box-shadow);
- &: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
+  @include hover {
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
   }
-  border-color: $active-border;
-  &:focus {
+  &: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, 0.5);
+    } @else {
+      box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5);
+    }
+  }
-   // 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);
-   }
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: color-yiq($background);
+    background-color: $background;
+    border-color: $border;
+  }
-   @else {
-    box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
-   }
+  &: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, 0.5);
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.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 {
+@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;
- &: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;
+  &:hover {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
-  &:focus {
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+  }
-   // 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);
-   }
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
-   @else {
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-   }
+  &: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, 0.5);
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.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;
- }
+  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;
+@mixin social-buttons-color($color, $state-color) {
+  @include diagonal-gradient($color, darken($color, 20%));
+  //background-color: $color;
   color: $white;
- }
- &.btn-simple {
-  color: $state-color;
-  background-color: $transparent-bg;
-  background-image: none !important;
-  box-shadow: none;
-  border-color: $state-color;
+  background-size: 210% 210%;
+  background-position: top right;
+  background-repeat: space;
-  &:hover,
   &:focus,
-  &:active {
-   color: $state-color;
-   border-color: $state-color;
+  &: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-neutral {
-  color: $color;
-  background-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;
+    }
+  }
-  &:hover,
-  &:focus,
-  &:active {
-   color: $state-color;
+  &.btn-neutral {
+    color: $color;
+    background-color: $white;
+    &:hover,
+    &:focus,
+    &:active {
+      color: $state-color;
+    }
   }
- }
-}
+}