viniBaxter-spa_landing 0.4.0 → 13.1

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/mixins/_forms.scss

@@ -16,10 +16,10 @@
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
     outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
     } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $input-focus-box-shadow;
     }
   }
@@ -53,6 +53,7 @@
   .#{$state}-tooltip {
     position: absolute;
     top: 100%;
+    left: 0;
     z-index: 5;
     display: none;
     max-width: 100%; // Contain to parent when possible

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/mixins/_grid-framework.scss

@@ -15,12 +15,15 @@
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
-    // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
-      .col#{$infix}-#{$i} {
-        @extend %grid-column;
+    @if $columns > 0 {
+      // Allow columns to stretch full width below their breakpoints
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          @extend %grid-column;
+        }
       }
     }
+
     .col#{$infix},
     .col#{$infix}-auto {
       @extend %grid-column;
@@ -34,9 +37,11 @@
         max-width: 100%;
       }
 
-      @for $i from 1 through $grid-row-columns {
-        .row-cols#{$infix}-#{$i} {
-          @include row-cols($i);
+      @if $grid-row-columns > 0 {
+        @for $i from 1 through $grid-row-columns {
+          .row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
         }
       }
 
@@ -44,9 +49,11 @@
         @include make-col-auto();
       }
 
-      @for $i from 1 through $columns {
-        .col#{$infix}-#{$i} {
-          @include make-col($i, $columns);
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
         }
       }
 
@@ -58,11 +65,13 @@
         .order#{$infix}-#{$i} { order: $i; }
       }
 
-      // `$columns - 1` because offsetting by the width of an entire row isn't possible
-      @for $i from 0 through ($columns - 1) {
-        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
-          .offset#{$infix}-#{$i} {
-            @include make-col-offset($i, $columns);
+      @if $columns > 0 {
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+            .offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
           }
         }
       }

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/mixins/_grid.scss

@@ -10,21 +10,24 @@
   margin-left: auto;
 }
 
+@mixin make-row($gutter: $grid-gutter-width) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -$gutter / 2;
+  margin-left: -$gutter / 2;
+}
 
 // For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+@mixin make-container-max-widths(
+  $max-widths: $container-max-widths,
+  $breakpoints: $grid-breakpoints
+) {
   @each $breakpoint, $container-max-width in $max-widths {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       max-width: $container-max-width;
     }
   }
-}
-
-@mixin make-row($gutter: $grid-gutter-width) {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -$gutter / 2;
-  margin-left: -$gutter / 2;
+  @include deprecate('The `make-container-max-widths` mixin', 'v4.5.2', 'v5');
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {

data/lib/viniBaxter/sass/bootstrap/mixins/_transition.scss

@@ -0,0 +1,26 @@
+// stylelint-disable property-blacklist
+@mixin transition($transition...) {
+  @if length($transition) == 0 {
+    $transition: $transition-base;
+  }
+
+  @if length($transition) > 1 {
+    @each $value in $transition {
+      @if $value == null or $value == none {
+        @warn "The keyword 'none' or 'null' must be used as a single argument.";
+      }
+    }
+  }
+
+  @if $enable-transitions {
+    @if nth($transition, 1) != null {
+      transition: $transition;
+    }
+
+    @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+}

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/utilities/_background.scss

@@ -6,7 +6,7 @@
 
 @if $enable-gradients {
   @each $color, $value in $theme-colors {
-    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value, true);
   }
 }
 

data/lib/viniBaxter/sass/bootstrap/utilities/_interactions.scss

@@ -0,0 +1,5 @@
+// stylelint-disable declaration-no-important
+
+@each $value in $user-selects {
+  .user-select-#{$value} { user-select: $value !important; }
+}

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/utilities/_position.scss

@@ -2,7 +2,9 @@
 
 // Common values
 @each $position in $positions {
-  .position-#{$position} { position: $position !important; }
+  .position-#{$position} {
+    position: $position !important;
+  }
 }
 
 // Shorthand
@@ -16,7 +18,7 @@
 }
 
 .fixed-bottom {
-  position: fixed;
+  position: fixed !important;
   right: 0;
   bottom: 0;
   left: 0;

data/lib/viniBaxter/sass/spa_landing-basic-nav.scss

@@ -0,0 +1,11 @@
+// bootstrap
+@import 'bootstrap/bootstrap';
+
+// Theme functions
+@import 'spa_landing/theme/functions';
+
+// Theme core
+@import 'spa_landing/theme/theme-basic-nav';
+
+// commun for both gems
+@import 'spa_landing/theme/both_gems';

data/lib/viniBaxter/sass/spa_landing-nav.scss

@@ -0,0 +1,11 @@
+// // bootstrap
+// @import 'bootstrap/bootstrap';
+
+// // Theme functions
+@import 'spa_landing/theme/functions';
+
+// // Theme core
+@import 'spa_landing/theme/theme';
+
+// // commun for both gems
+@import 'spa_landing/theme/both_gems';

data/lib/viniBaxter/sass/spa_landing/theme/_aos.scss

@@ -3,8 +3,8 @@
 // Library overrides
 //
 
-[data-aos="img-skewed-item-left"],
-[data-aos="img-skewed-item-right"] {
+[data-aos='img-skewed-item-left'],
+[data-aos='img-skewed-item-right'] {
   opacity: 0;
   transition-property: opacity, transform, -webkit-transform;
   will-change: opacity, transform, -webkit-transform;
@@ -14,19 +14,21 @@
     opacity: 1;
   }
 }
-
-[data-aos="img-skewed-item-left"] {
-  transform: rotateY(-$img-skewed-rotate-y + 15deg) rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
+[data-aos='img-skewed-item-left'] {
+  transform: rotateY(-$img-skewed-rotate-y + 15deg)
+    rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
 
   &.aos-animate {
-    transform: rotateY(-$img-skewed-rotate-y) rotateX($img-skewed-rotate-x) translate3d(0, 0, 0);
+    transform: rotateY(-$img-skewed-rotate-y) rotateX($img-skewed-rotate-x)
+      translate3d(0, 0, 0);
   }
 }
-
-[data-aos="img-skewed-item-right"] {
-  transform: rotateY($img-skewed-rotate-y - 15deg) rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
+[data-aos='img-skewed-item-right'] {
+  transform: rotateY($img-skewed-rotate-y - 15deg)
+    rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
 
   &.aos-animate {
-    transform: rotateY($img-skewed-rotate-y) rotateX($img-skewed-rotate-x) translate3d(0, 0, 0);
+    transform: rotateY($img-skewed-rotate-y) rotateX($img-skewed-rotate-x)
+      translate3d(0, 0, 0);
   }
-}
+}

data/lib/viniBaxter/sass/spa_landing/theme/_avatar.scss

@@ -19,10 +19,10 @@
     position: absolute;
     width: 0;
     height: 0;
-    background-image: url(image-path("spa_landing/avatar-status.svg")),
-      url(image-path("spa_landing/avatar-group.svg")),
-      url(image-path("spa_landing/avatar-group-hover.svg")),
-      url(image-path("spa_landing/avatar-group-hover-last.svg"));
+    background-image: url(image-path('desk_front/avatar-status.svg')),
+      url(image-path('desk_front/avatar-group.svg')),
+      url(image-path('desk_front/avatar-group-hover.svg')),
+      url(image-path('desk_front/avatar-group-hover-last.svg'));
   }
 }
 
@@ -46,7 +46,6 @@
 
 .avatar-online,
 .avatar-offline {
-
   &::before {
     content: '';
     position: absolute;
@@ -58,7 +57,7 @@
   }
 
   .avatar-img {
-    mask-image: url(#{$path-to-img}/masks/avatar-status.svg);
+    mask-image: url(image-path('desk_front/avatar-status.svg'));
     mask-size: 100% 100%;
   }
 }
@@ -92,9 +91,15 @@
 }
 
 .avatar-xl {
-  width: $avatar-size-xl;
-  height: $avatar-size-xl;
-  font-size: $avatar-size-xl / 3;
+  width: $avatar-size-lg;
+  height: $avatar-size-lg;
+  font-size: $avatar-size-lg / 3;
+
+  @include media-breakpoint-up(md) {
+    width: $avatar-size-xl;
+    height: $avatar-size-xl;
+    font-size: $avatar-size-xl / 3;
+  }
 }
 
 .avatar-xxl {
@@ -142,34 +147,34 @@
 
   // Shift every next avatar left
 
-  .avatar+.avatar {
+  .avatar + .avatar {
     margin-left: -$avatar-size-base / 4;
   }
 
-  .avatar-xs+.avatar-xs {
+  .avatar-xs + .avatar-xs {
     margin-left: -$avatar-size-xs / 4;
   }
 
-  .avatar-sm+.avatar-sm {
+  .avatar-sm + .avatar-sm {
     margin-left: -$avatar-size-sm / 4;
   }
 
-  .avatar-lg+.avatar-lg {
+  .avatar-lg + .avatar-lg {
     margin-left: -$avatar-size-lg / 4;
   }
 
-  .avatar-xl+.avatar-xl {
+  .avatar-xl + .avatar-xl {
     margin-left: -$avatar-size-xl / 4;
   }
 
-  .avatar-xxl+.avatar-xxl {
+  .avatar-xxl + .avatar-xxl {
     margin-left: -$avatar-size-xxl / 4;
   }
 
   // Add some spacing between avatars
 
   .avatar:not(:last-child) {
-    mask-image: url(#{$path-to-img}/masks/avatar-group.svg);
+    mask-image: url(image-path('desk_front/avatar-group.svg'));
     mask-size: 100% 100%;
   }
 
@@ -179,14 +184,13 @@
     mask-image: none;
     z-index: 1;
 
-    +.avatar {
-      mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg);
+    + .avatar {
+      mask-image: url(image-path('desk_front/avatar-group-hover.svg'));
       mask-size: 100% 100%;
 
       &:last-child {
-        mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg);
+        mask-image: url(image-path('desk_front/avatar-group-hover-last.svg'));
       }
     }
   }
-
 }

data/lib/viniBaxter/sass/spa_landing/theme/_both_gems.scss

@@ -0,0 +1 @@
+@import 'both_gems/index';

data/lib/viniBaxter/sass/spa_landing/theme/_buttons.scss

@@ -8,10 +8,17 @@
   width: auto;
 }
 
-.btn:not([class*="btn-outline"]) {
-  border-color: transparent !important;
+.btn:not([class*='btn-outline']) {
+  // border-color: transparent !important;
+  border-color: transparent;
 }
 
+// Sizing
+
+.btn-xs {
+  padding: $input-btn-padding-y-xs $input-btn-padding-x-xs;
+  font-size: $input-btn-font-size-xs;
+}
 
 // Custom colors
 
@@ -41,6 +48,21 @@
   }
 }
 
+.btn-gray-300-20 {
+  background-color: rgba($gray-300, 0.2);
+  color: $white;
+
+  @include hover-focus {
+    background-color: rgba($gray-300, 0.25);
+    color: $white;
+  }
+
+  &.active {
+    background-color: rgba($gray-300, 0.25);
+    color: $white;
+  }
+}
+
 .btn-gray-400 {
   background-color: $gray-400;
   color: $white;
@@ -56,6 +78,38 @@
   }
 }
 
+.btn-gray-400-10 {
+  background-color: rgba($gray-400, 0.1);
+  color: $white;
+
+  @include hover-focus {
+    background-color: rgba($gray-400, 0.15);
+    color: $white;
+  }
+
+  &.active {
+    background-color: rgba($gray-400, 0.15);
+    color: $white;
+  }
+}
+
+.btn-outline-white {
+  border-color: $gray-300;
+  color: $body-color;
+
+  @include hover-focus {
+    background-color: darken($white, 5%);
+    border-color: $gray-400;
+    color: $body-color;
+  }
+
+  &.active {
+    background-color: darken($white, 5%);
+    border-color: $gray-400;
+    color: $body-color;
+  }
+}
+
 .btn-outline-gray-300 {
   border-color: $gray-300;
   color: $primary;
@@ -73,7 +127,6 @@
   }
 }
 
-
 // Soft variants
 
 @each $color, $value in $theme-colors {
@@ -82,26 +135,24 @@
   }
 }
 
-
 // Pill
 
 .btn-pill {
   border-radius: $rounded-pill;
 }
 
-
 // Rounded circle
 
 .btn-rounded-circle {
   padding-left: $btn-padding-y;
   padding-right: $btn-padding-y;
   border-radius: $rounded-pill;
+}
 
-  > * {
-    display: block;
-    line-height: 1;
-    width: 1em;
-  }
+.btn-rounded-circle > * {
+  display: block;
+  line-height: 1;
+  width: 1em;
 }
 
 .btn-rounded-circle.btn-lg {
@@ -113,3 +164,8 @@
   padding-left: $btn-padding-y-sm;
   padding-right: $btn-padding-y-sm;
 }
+
+.btn-rounded-circle.btn-xs {
+  padding-left: $btn-padding-y-xs;
+  padding-right: $btn-padding-y-xs;
+}