viniBaxter-spa_landing 0.6.0 → 0.9

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

@@ -3,6 +3,15 @@
 // Extended from Boostrap
 //
 
+// Sizing
+
+.form-control-xs {
+  height: $input-height-xs;
+  padding: $input-padding-y-xs $input-padding-x-xs;
+  font-size: $input-font-size-xs;
+}
+
+
 // Form control flush
 
 .form-control-flush {
@@ -33,8 +42,10 @@
 
 .form-label-group > label {
   position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: $input-height;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $input-height;
   padding: $input-padding-y $input-padding-x;
   margin-bottom: 0;
   line-height: $input-line-height;
@@ -89,4 +100,4 @@
   .form-label-group .form-control::placeholder {
     color: $input-placeholder-color;
   }
-}
+}

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

@@ -6,9 +6,9 @@
 // ======
 
 @function tint($color, $percentage) {
-	@return mix(white, $color, $percentage);
+  @return mix(white, $color, $percentage);
 }
 
 @function shade($color, $percentage) {
-	@return mix(black, $color, $percentage);
+  @return mix(black, $color, $percentage);
 }

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

@@ -3,7 +3,7 @@
 // Extended from Bootstrap
 //
 
-.container, .container-fluid {
+[class^="container"] {
   position: relative;
   z-index: 1;
 }

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

@@ -3,54 +3,52 @@
 // Theme component
 //
 
-.icon>svg {
-  width: $icon-size-base;
-  height: $icon-size-base;
-}
 
-.icon>img {
-  width: $icon-size-base;
+.icon > svg {
+  width: $icon-size-base; 
   height: $icon-size-base;
 }
 
 // Use "text-" utilities to fill svg icons
-.icon[class*="text-"]>svg [fill]:not([fill="none"]) {
+.icon[class*="text-"] > svg [fill]:not([fill="none"]) {
   fill: currentColor !important;
 }
 
+
 // Sizing
 
-.icon-xs>svg {
+.icon-xs > svg {
   width: $icon-size-xs;
   height: $icon-size-xs;
 }
 
-.icon-sm>svg {
+.icon-sm > svg {
   width: $icon-size-sm;
   height: $icon-size-sm;
 }
 
-.icon-lg>svg {
+.icon-lg > svg {
   width: $icon-size-lg;
   height: $icon-size-lg;
 }
 
-.icon-xl>svg {
+.icon-xl > svg {
   width: $icon-size-xl;
   height: $icon-size-xl;
 }
 
+
 // Circle
 
 .icon-circle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: $icon-circle-size;
+  width: $icon-circle-size; 
   height: $icon-circle-size;
   border-radius: 50%;
-
-  >.fe {
+  
+  > .fe {
     font-size: $icon-circle-font-size;
   }
 }

data/lib/viniBaxter/sass/spa_landing/theme/_input-group.scss

@@ -0,0 +1,16 @@
+//
+// input-group.scss
+//
+
+// Sizing
+
+.input-group-xs .form-control {
+  height: calc(#{$input-btn-padding-y-xs * 2} + #{$input-btn-font-size-xs} * #{$line-height-base} + #{$input-border-width * 2});
+  padding: $input-btn-padding-y-xs $input-btn-padding-x-xs;
+  font-size: $input-btn-font-size-xs;
+}
+
+.input-group-xs .input-group-text {
+  padding: $input-btn-padding-y-xs $input-btn-padding-x-xs;
+  font-size: $input-btn-font-size-xs;
+}

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

@@ -3,6 +3,10 @@
 // Extended from Bootstrap
 //
 
-@import "mixins/badge";
-@import "mixins/buttons";
-@import "mixins/overlay";
+@import 'mixins/badge';
+@import 'mixins/buttons';
+@import 'mixins/overlay';
+@import 'mixins/transparency';
+@import 'mixins/vendor-prefixes';
+@import 'mixins/dropdown';
+@import 'mixins/navbar';

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

@@ -3,12 +3,8 @@
 // Extended from Bootstrap
 //
 
-.modal-open {
-  padding-right: 0 !important; // additional padding is not required as we have overflow-x: hidden on the root element
-}
-
-.modal-open .navbar {
-  padding-right: $navbar-padding-x !important;
+.modal-open .navbar.fixed-top {
+  padding-right: inherit;
 }
 
 
@@ -16,6 +12,7 @@
 
 .modal-close {
   position: absolute;
-  top: 1.5rem; right: 1.5rem;
+  top: $spacer * 1.5;
+  right: $spacer * 1.5;
   z-index: $zindex-dropdown;
-}
+}

data/lib/viniBaxter/sass/spa_landing/theme/_navbar-extend.scss

@@ -0,0 +1,54 @@
+.navbar {
+  p {
+    line-height: 1.8em;
+    font-size: 1em;
+    font-weight: $font-weight-light;
+  }
+
+  &.navbar-absolute {
+    position: absolute;
+    width: 100%;
+    padding-top: 10px;
+    z-index: 1029;
+  }
+
+  .navbar-toggler {
+    vertical-align: middle;
+
+    &.navbar-toggler-left {
+      top: 0;
+    }
+
+    &.navbar-toggler-right {
+      padding-right: 0;
+      top: 8px;
+    }
+  }
+
+  .nav-item-image {
+    display: flex;
+    align-items: center;
+
+    .dropdown-toggle {
+      padding: 0 !important;
+      border-radius: 50%;
+    }
+
+    .dropdown-toggle:hover,
+    .dropdown-toggle:focus,
+    .dropdown-toggle:active {
+      background-color: transparent !important;
+    }
+
+    .dropdown-toggle div {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .dropdown-toggle:after {
+      display: none;
+    }
+  }
+}

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

@@ -2,376 +2,371 @@
 // navbar.scss
 // Extended from Bootstrap
 //
+#conv-nav {
+  .navbar {
+    transition: $transition-base;
+    transition-property: background-color, color;
+    z-index: $zindex-fixed;
 
-.navbar {
-  transition: $transition-base;
-  transition-property: background-color, color;
-  z-index: $zindex-fixed;
-
-  &.blured {
-    backdrop-filter: saturate(180%) blur(20px);
+    &.blured {
+      backdrop-filter: saturate(180%) blur(20px);
+    }
   }
-}
 
-// Dark version
+  // Dark version
 
-.navbar-dark {
+  .navbar-dark {
+    @include media-breakpoint-down(md) {
+      .navbar-nav .nav-item .nav-link {
+        color: $navbar-light-color;
 
-  @include media-breakpoint-down(md) {
-
-    .navbar-nav .nav-item .nav-link {
-      color: $navbar-light-color;
-
-      &:hover,
-      &:focus {
-        color: $navbar-light-hover-color;
+        &:hover,
+        &:focus {
+          color: $navbar-light-hover-color;
+        }
       }
-    }
 
-    .navbar-nav .nav-item.active .nav-link,
-    .navbar-nav .nav-item .nav-link.active {
-      color: $navbar-light-active-color;
-    }
+      .navbar-nav .nav-item.active .nav-link,
+      .navbar-nav .nav-item .nav-link.active {
+        color: $navbar-light-active-color;
+      }
 
-    .navbar-collapse .navbar-toggler {
-      color: $navbar-light-color;
+      .navbar-collapse .navbar-toggler {
+        color: $navbar-light-color;
+      }
     }
   }
-}
-
-// Contaner
-
-.navbar>.container,
-.navbar>.container-fluid {
-  padding-left: $grid-gutter-width / 2 !important;
-  padding-right: $grid-gutter-width / 2 !important;
-}
-
-// Brand
 
-.navbar-brand {
-  font-weight: $navbar-brand-font-weight;
-}
-
-.navbar-brand-img {
-  max-height: $navbar-brand-height;
-  width: auto;
-}
+  // Contaner
 
-.navbar-dark .navbar-brand {
-  filter: brightness(0) invert(1);
-}
-
-// change nav links and logo color if  shouldStayTransparent class
-.navbar-dark.shouldStayTransparent {
-  .navbar-nav .nav-link {
-    filter: brightness(0.1) invert(1);
+  .navbar > .container,
+  .navbar > .container-fluid {
+    padding-left: $grid-gutter-width / 2 !important;
+    padding-right: $grid-gutter-width / 2 !important;
   }
 
+  // Brand
+
   .navbar-brand {
-    filter: brightness(1) invert(1);
+    font-weight: $navbar-brand-font-weight;
   }
-}
 
-// Button
-
-.navbar-btn {
-
-  @include media-breakpoint-down(md) {
-    width: 100%;
-    padding: $btn-padding-y $btn-padding-x;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    font-size: $btn-font-size;
+  .navbar-brand-img {
+    max-height: $navbar-brand-height;
+    width: auto;
   }
-}
-
-// Navigation
 
-.navbar-nav .nav-link {
-  font-weight: $navbar-nav-link-font-weight;
-
-  @include hover-focus {
-    outline: none;
+  .navbar-dark .navbar-brand {
+    filter: brightness(0) invert(1);
   }
-}
-
-// Boxed layout
 
-.navbar-dark.fixed-top>.container {
-  position: relative;
+  // change nav links and logo color if  shouldStayTransparent class
+  .navbar-dark.shouldStayTransparent {
+    .navbar-nav .nav-link {
+      filter: brightness(0.1) invert(1);
+    }
 
-  &::after {
-    content: "";
-    position: absolute;
-    right: 0;
-    bottom: -$navbar-padding-y;
-    left: 0;
-    border-top: $border-width solid fade-out($white, .8);
+    .navbar-brand {
+      filter: brightness(1) invert(1);
+    }
   }
-}
 
-// Collapse
+  // Button
 
-@include media-breakpoint-down(md) {
-
-  .navbar-collapse {
-    position: fixed;
-    top: $spacer;
-    right: $spacer;
-    left: $spacer;
-    height: auto !important;
-    max-height: calc(100vh - #{$spacer * 2});
-    background-color: $dropdown-bg;
-    border-radius: $dropdown-border-radius;
-    box-shadow: $box-shadow-dark-lg;
-    overflow-y: scroll; // This has to be scroll for iOS bounce scroll
-    -webkit-overflow-scrolling: touch;
+  .navbar-btn {
+    @include media-breakpoint-down(md) {
+      width: 100%;
+      padding: $btn-padding-y $btn-padding-x;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      font-size: $btn-font-size;
+    }
   }
 
-  // Animation
+  // Navigation
 
-  .navbar-collapse.show,
-  .navbar-collapse.collapsing {
-    transition: $transition-base;
-    transition-property: opacity, transform, -webkit-transform;
-    transform-origin: top right;
-  }
+  .navbar-nav .nav-link {
+    font-weight: $navbar-nav-link-font-weight;
 
-  .navbar-collapse.show {
-    opacity: 1;
-    transform: scale(1);
+    @include hover-focus {
+      outline: none;
+    }
   }
 
-  .navbar-collapse.collapsing {
-    opacity: 0;
-    transform: scale(.9);
-  }
+  // Boxed layout
 
-}
+  .navbar-dark.fixed-top > .container {
+    position: relative;
 
-// Toggler
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: -$navbar-padding-y;
+      left: 0;
+      border-top: $border-width solid fade-out($white, 0.8);
+    }
+  }
 
-.navbar-collapse .navbar-toggler {
-  position: absolute;
-  top: $spacer;
-  right: $spacer;
-  z-index: 1;
+  // Collapse
 
-  @include media-breakpoint-up(lg) {
-    display: none;
-  }
-}
+  @include media-breakpoint-down(md) {
+    .navbar-collapse {
+      position: fixed;
+      top: $spacer;
+      left: $spacer;
+      height: auto;
+      max-height: calc(100% - #{$spacer * 2}) !important;
+      width: calc(100% - #{$spacer * 2});
+      background-color: $dropdown-bg;
+      border-radius: $dropdown-border-radius;
+      box-shadow: $box-shadow-dark-lg;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
 
-// Navigation
+    // Animation
 
-.navbar-nav .nav-item {
+    .navbar-collapse.show,
+    .navbar-collapse.collapsing {
+      transition: $transition-base;
+      transition-property: opacity, transform, -webkit-transform;
+      transform-origin: top right;
+    }
 
-  @include media-breakpoint-down(md) {
-    padding: $navbar-nav-item-spacing;
+    .navbar-collapse.show {
+      opacity: 1;
+      transform: scale(1);
+    }
 
-    +.nav-item {
-      border-top: $border-width solid $gray-200;
+    .navbar-collapse.collapsing {
+      opacity: 0;
+      transform: scale(0.9);
     }
   }
-}
 
-.navbar-nav .nav-link {
+  // Toggler
 
-  @include media-breakpoint-down(md) {
-    padding-top: 0;
-    padding-bottom: 0;
+  .navbar .navbar-toggler {
+    margin-left: auto;
   }
-}
 
-// Dropdown menu
-
-.navbar-nav .dropdown-menu {
-  box-shadow: none;
+  .navbar-collapse .navbar-toggler {
+    position: absolute;
+    top: $spacer;
+    right: $spacer;
+    z-index: 1;
 
-  @include media-breakpoint-down(md) {
-    min-width: 0;
-    padding: 0;
+    @include media-breakpoint-up(lg) {
+      display: none;
+    }
   }
 
-  @include media-breakpoint-up(lg) {
-    box-shadow: $box-shadow-dark-lg;
-  }
-}
+  // Navigation
 
-.navbar-nav .dropdown>.dropdown-menu {
-  display: block !important;
-}
+  .navbar-collapse .navbar-nav .nav-item {
+    @include media-breakpoint-down(md) {
+      padding: $navbar-nav-item-spacing;
 
-.navbar-nav .dropright>.dropdown-menu {
+      + .nav-item {
+        border-top: $border-width solid $gray-200;
+      }
+    }
+  }
 
-  @include media-breakpoint-down(md) {
-    padding-top: $spacer;
-    padding-bottom: $spacer;
-    padding-left: $spacer / 2;
+  .navbar-collapse .navbar-nav .nav-link {
+    @include media-breakpoint-down(md) {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
   }
-}
 
-// Dropdown item
+  // Dropdown menu
 
-.navbar-nav .dropdown-item,
-.navbar-nav .dropdown-header {
+  .navbar-nav .dropdown-menu {
+    box-shadow: none;
 
-  @include media-breakpoint-down(md) {
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 0;
-    padding-right: 0;
+    @include media-breakpoint-up(lg) {
+      box-shadow: $box-shadow-dark-lg;
+    }
   }
-}
 
-// Dropdown toggle
-
-.navbar-nav .dropdown>.dropdown-toggle {
+  .navbar-collapse .navbar-nav .dropdown-menu {
+    @include media-breakpoint-down(md) {
+      min-width: 0;
+      padding: 0;
+    }
+  }
 
-  &::after {
-    display: none;
+  .navbar-collapse .navbar-nav .dropdown > .dropdown-menu {
+    @include media-breakpoint-down(md) {
+      display: block !important;
+    }
   }
 
-  @include media-breakpoint-down(md) {
-    margin-bottom: $navbar-dropdown-toggle-margin-bottom;
-    pointer-events: none;
+  .navbar-collapse .navbar-nav .dropright > .dropdown-menu {
+    @include media-breakpoint-down(md) {
+      padding-top: $spacer;
+      padding-bottom: $spacer;
+      padding-left: $spacer / 2;
+    }
   }
-}
 
-.navbar-nav .dropright>.dropdown-toggle {
-  display: flex;
+  // Dropdown item
 
-  &::after {
-    margin-left: auto;
+  .navbar-collapse .navbar-nav .dropdown-item,
+  .navbar-collapse .navbar-nav .dropdown-header {
+    @include media-breakpoint-down(md) {
+      margin-left: 0;
+      margin-right: 0;
+      padding-left: 0;
+      padding-right: 0;
+    }
   }
 
-  @include media-breakpoint-down(md) {
+  // Dropdown toggle
 
+  .navbar-nav .dropdown > .dropdown-toggle {
     &::after {
-      content: "\e92e";
+      display: none;
     }
+  }
 
-    &[aria-expanded="true"]::after {
-      transform-origin: center center;
-      transform: rotate(180deg);
+  .navbar-collapse .navbar-nav .dropdown > .dropdown-toggle {
+    @include media-breakpoint-down(md) {
+      margin-bottom: $navbar-dropdown-toggle-margin-bottom;
+      pointer-events: none;
     }
   }
-}
-
-// Dropdown image
-
-.navbar-nav .dropdown-img-left {
-  height: 100%;
-  display: none;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: $dropdown-padding-y $dropdown-padding-x;
-  background: no-repeat center center / cover;
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
 
-  @include media-breakpoint-up(lg) {
+  .navbar-nav .dropright > .dropdown-toggle {
     display: flex;
-  }
 
-  // Overlay
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: fade-out($primary, .2);
-    border-radius: inherit;
+    &::after {
+      margin-left: auto;
+    }
   }
 
-  // Content
+  .navbar-collapse .navbar-nav .dropright > .dropdown-toggle {
+    @include media-breakpoint-down(md) {
+      &::after {
+        content: '\e92e';
+      }
 
-  * {
-    position: relative;
+      &[aria-expanded='true']::after {
+        transform-origin: center center;
+        transform: rotate(180deg);
+      }
+    }
   }
-}
 
-.navbar-nav .dropdown-menu-lg .dropdown-img-left,
-.navbar-nav .dropdown-menu-xl .dropdown-img-left {
+  // Dropdown image
 
-  @include media-breakpoint-up(lg) {
-    padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
-  }
-}
+  .navbar-nav .dropdown-img-left {
+    height: 100%;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: $dropdown-padding-y $dropdown-padding-x;
+    background: no-repeat center center / cover;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
 
-// Dropdown body
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
 
-.navbar-nav .dropdown-body {
+    // Overlay
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: fade-out($primary, 0.2);
+      border-radius: inherit;
+    }
 
-  @include media-breakpoint-up(lg) {
-    padding: $dropdown-padding-y $dropdown-padding-x;
-  }
-}
+    // Content
 
-.navbar-nav .dropdown-menu-lg .dropdown-body,
-.navbar-nav .dropdown-menu-xl .dropdown-body {
+    * {
+      position: relative;
+    }
+  }
 
-  @include media-breakpoint-up(lg) {
-    padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
+  .navbar-nav .dropdown-menu-lg .dropdown-img-left,
+  .navbar-nav .dropdown-menu-xl .dropdown-img-left {
+    @include media-breakpoint-up(lg) {
+      padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
+    }
   }
-}
 
-// Dropdown list group
+  // Dropdown body
 
-.navbar-nav .dropdown-menu .list-group-item {
-  display: flex;
-  align-items: center;
-  padding-top: $spacer;
-  padding-bottom: $spacer;
-  color: inherit;
+  .navbar-nav .dropdown-body {
+    @include media-breakpoint-up(lg) {
+      padding: $dropdown-padding-y $dropdown-padding-x;
+    }
+  }
 
-  @include hover {
-    text-decoration: none;
+  .navbar-nav .dropdown-menu-lg .dropdown-body,
+  .navbar-nav .dropdown-menu-xl .dropdown-body {
+    @include media-breakpoint-up(lg) {
+      padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
+    }
   }
-}
 
-// Toggle dropdown on hover
+  // Dropdown list group
 
-@include media-breakpoint-up(lg) {
+  .navbar-nav .dropdown-menu .list-group-item {
+    display: flex;
+    align-items: center;
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+    color: inherit;
 
-  .navbar-nav .dropdown-menu {
-    z-index: $zindex-fixed;
-    display: block !important;
-    visibility: hidden;
-    opacity: 0;
+    @include hover {
+      text-decoration: none;
+    }
   }
 
-  .navbar-nav .hovered>.dropdown-menu {
-    transition: $transition-base;
-    transition-property: opacity, visibility, transform, -webkit-transform;
-    transform-origin: top center;
-  }
+  // Toggle dropdown on hover
 
-  .navbar-nav .dropdown>.dropdown-menu {
-    left: 50%;
-    transform: translate3d(-50%, 10px, 0);
-  }
+  @include media-breakpoint-up(lg) {
+    .navbar-nav .dropdown-menu {
+      display: none;
+      opacity: 0;
+      transition: $transition-base;
+      transition-property: opacity, transform, -webkit-transform;
+    }
 
-  .navbar-nav .dropright>.dropdown-menu {
-    transform: translate3d(0, 10px, 0);
-  }
+    .navbar-nav .dropright > .dropdown-menu {
+      transform: translateY(10px);
+    }
 
-  .navbar-nav .dropdown.show>.dropdown-menu,
-  .navbar-nav .dropright.show>.dropdown-menu {
-    visibility: visible;
-    opacity: 1;
-  }
+    .navbar-nav .dropdown > .dropdown-menu {
+      left: 50%;
+      transform: translate(-50%, 10px);
+    }
 
-  .navbar-nav .dropdown.show>.dropdown-menu {
-    transform: translate3d(-50%, 0, 0);
-  }
+    .navbar-nav .dropdown-menu.showing {
+      display: block;
+    }
+
+    .navbar-nav .dropdown-menu.show {
+      display: block;
+      opacity: 1;
+    }
 
-  .navbar-nav .dropright.show>.dropdown-menu {
-    transform: translate3d(0, 0, 0);
+    .navbar-nav .dropright > .dropdown-menu.show {
+      transform: translateY(0);
+    }
+
+    .navbar-nav .dropdown > .dropdown-menu.show {
+      transform: translate(-50%, 0);
+    }
   }
-}
+}