viniBaxter-desk_front 26 → 34.0.0

data/lib/viniBaxter/sass/desk_front/bootstrap/_modal.scss

@@ -3,6 +3,7 @@
 // .modal-dialog    - positioning shell for the actual modal
 // .modal-content   - actual modal w/ bg and corners and stuff
 
+
 .modal-open {
   // Kill the scroll on the body
   overflow: hidden;
@@ -44,6 +45,7 @@
     @include transition($modal-transition);
     transform: $modal-fade-transform;
   }
+
   .modal.show & {
     transform: $modal-show-transform;
   }
@@ -83,7 +85,7 @@
     display: block; // IE10
     height: subtract(100vh, $modal-dialog-margin * 2);
     height: min-content; // Reset height to 0 except on IE
-    content: '';
+    content: "";
   }
 
   // Ensure `.modal-body` shows scrollbar (IE10/11)
@@ -115,29 +117,12 @@
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
   @include border-radius($modal-content-border-radius);
-  @include box-shadow($modal-content-box-shadow-xs);
+  @include box-shadow($modal-content-box-shadow-sm-up);
   // Remove focus outline from opened modal
   outline: 0;
 }
 
-// Modal background
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $zindex-modal-backdrop;
-  width: 100vw;
-  height: 100vh;
-  background-color: $modal-backdrop-bg;
 
-  // Fade for backdrop
-  &.fade {
-    opacity: 0;
-  }
-  &.show {
-    opacity: $modal-backdrop-opacity;
-  }
-}
 
 // Modal header
 // Top section of the modal w/ title and dismiss
@@ -152,8 +137,7 @@
   .close {
     padding: $modal-header-padding;
     // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding-y) (-$modal-header-padding-x)
-      (-$modal-header-padding-y) auto;
+    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
   }
 }
 
@@ -186,7 +170,7 @@
   // Place margin between footer elements
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
-  > * {
+  >* {
     margin: $modal-footer-margin-between / 2;
   }
 }
@@ -202,6 +186,7 @@
 
 // Scale up the modal
 @include media-breakpoint-up(sm) {
+
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     max-width: $modal-md;
@@ -235,6 +220,7 @@
 }
 
 @include media-breakpoint-up(lg) {
+
   .modal-lg,
   .modal-xl {
     max-width: $modal-lg;
@@ -245,4 +231,4 @@
   .modal-xl {
     max-width: $modal-xl;
   }
-}
+}

data/lib/viniBaxter/sass/desk_front/bootstrap/_reboot.scss

@@ -65,9 +65,10 @@ body {
     padding-top: $padding-body-lg-fixed-nav;
   }
 
+  // a,
   // p {
   //   font-weight: $font-weight-light;
-  //   font-size: $paragraph-font-size;
+  //   @include font-size($paragraph-font-size);
   // }
 }
 

data/lib/viniBaxter/sass/desk_front/bootstrap/bootstrap-grid.scss

@@ -26,4 +26,4 @@ html {
 @import "grid";
 @import "utilities/display";
 @import "utilities/flex";
-@import "utilities/spacing";
+@import "utilities/spacing";

data/lib/viniBaxter/sass/desk_front/bootstrap/bootstrap-reboot.scss

@@ -9,4 +9,4 @@
 @import "functions";
 @import "variables";
 @import "mixins";
-@import "reboot";
+@import "reboot";

data/lib/viniBaxter/sass/desk_front/bootstrap/bootstrap.scss

@@ -5,7 +5,6 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-// @import 'functions';
 @import 'mixins';
 @import 'root';
 @import 'reboot';
@@ -27,7 +26,7 @@
 @import 'breadcrumb';
 @import 'pagination';
 @import 'badge';
-@import 'jumbotron';
+// @import 'jumbotron';
 @import 'alert';
 @import 'progress';
 @import 'media';
@@ -40,4 +39,4 @@
 @import 'carousel';
 @import 'spinners';
 @import 'utilities';
-@import 'print';
+@import 'print';

data/lib/viniBaxter/sass/desk_front/bootstrap/mixins/_buttons.scss

@@ -1,16 +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;
+    box-shadow: none;
+  }
+
+  &:active {
+    box-shadow: none !important;
+    transform: translateY(1px) !important;
+    transition: all 0.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, 0.5);
+    }
+
+    @else {
+      box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.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, 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, 0.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, 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;
+  }
+}
+
+// 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;
+    }
+  }
+}
+
 // Button variants
 //
+// copied from bootsrap and customised too
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant(
-  $background,
+@mixin button-variant($background,
   $border,
   $hover-background: darken($background, 7.5%),
   $hover-border: darken($border, 10%),
   $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%)
-) {
+  $active-border: darken($border, 12.5%)) {
   color: color-yiq($background);
   @include gradient-bg($background);
   border-color: $border;
@@ -27,19 +426,15 @@
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
+
     @if $enable-shadows {
-      @include box-shadow(
-        $btn-box-shadow,
-        0 0 0 $btn-focus-width
-          rgba(mix(color-yiq($background), $border, 15%), 0.5)
-      );
-    } @else {
+      @include box-shadow($btn-box-shadow,
+        0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5));
+    }
+
+    @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0
-        0
-        0
-        $btn-focus-width
-        rgba(mix(color-yiq($background), $border, 15%), 0.5);
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5);
     }
   }
 
@@ -49,6 +444,7 @@
     color: color-yiq($background);
     background-color: $background;
     border-color: $border;
+
     // Remove CSS gradients if they're enabled
     @if $enable-gradients {
       background-image: none;
@@ -57,39 +453,34 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle {
+  .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 {
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow(
-          $btn-active-box-shadow,
-          0 0 0 $btn-focus-width
-            rgba(mix(color-yiq($background), $border, 15%), 0.5)
-        );
-      } @else {
+      @if $enable-shadows and $btn-active-box-shadow !=none {
+        @include box-shadow($btn-active-box-shadow,
+          0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5));
+      }
+
+      @else {
         // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0
-          0
-          0
-          $btn-focus-width
-          rgba(mix(color-yiq($background), $border, 15%), 0.5);
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5);
       }
     }
   }
 }
 
-@mixin button-outline-variant(
-  $color,
+@mixin button-outline-variant($color,
   $color-hover: color-yiq($color),
   $active-background: $color,
-  $active-border: $color
-) {
+  $active-border: $color) {
   color: $color;
   border-color: $color;
 
@@ -112,18 +503,18 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle {
+  .show>&.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
     border-color: $active-border;
 
     &:focus {
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow(
-          $btn-active-box-shadow,
-          0 0 0 $btn-focus-width rgba($color, 0.5)
-        );
-      } @else {
+      @if $enable-shadows and $btn-active-box-shadow !=none {
+        @include box-shadow($btn-active-box-shadow,
+          0 0 0 $btn-focus-width rgba($color, 0.5));
+      }
+
+      @else {
         // Avoid using mixin so we can pass custom focus shadow properly
         box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
       }
@@ -132,13 +523,11 @@
 }
 
 // Button sizes
-@mixin button-size(
-  $padding-y,
+@mixin button-size($padding-y,
   $padding-x,
   $font-size,
   $line-height,
-  $border-radius
-) {
+  $border-radius) {
   padding: $padding-y $padding-x;
   @include font-size($font-size);
   line-height: $line-height;
@@ -150,4 +539,4 @@
 // t.ly/8b37
 @mixin set-gradient-button($arg) {
   @extend %btn-gradient#{$arg};
-}
+}