viniBaxter-spa_landing 0.6.0 → 0.9

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

@@ -5,9 +5,6 @@
 
 // Font
 
-// Fonts have been added inside a specific
-// app/assets/stylesheets/config/_fonts.scss
-
 // Headings
 
 h1,
@@ -74,7 +71,7 @@ h6,
   line-height: $h6-line-height;
 
   &.text-uppercase {
-    letter-spacing: .08em;
+    letter-spacing: 0.08em;
   }
 }
 
@@ -122,7 +119,6 @@ h6,
 // Lead
 
 .lead {
-
   @include media-breakpoint-down(md) {
     font-size: $lead-font-size-md;
   }
@@ -137,7 +133,6 @@ h6,
 }
 
 .blockquote-footer {
-
   &::before {
     display: none;
   }
@@ -166,4 +161,4 @@ h6,
 
 code {
   line-height: $code-line-height;
-}
+}

data/lib/viniBaxter/sass/spa_landing/theme/mixins/_dropdown.scss

@@ -0,0 +1,29 @@
+@mixin dropdown-colors(
+  $brand-color,
+  $dropdown-header-color,
+  $dropdown-color,
+  $background-color
+) {
+  background-color: $brand-color;
+
+  &:before {
+    color: $brand-color;
+  }
+
+  .dropdown-header:not([href]):not([tabindex]) {
+    color: $dropdown-header-color;
+  }
+
+  .dropdown-item {
+    color: $dropdown-color;
+
+    &:hover,
+    &:focus {
+      background-color: $background-color;
+    }
+  }
+
+  .dropdown-divider {
+    background-color: $background-color;
+  }
+}

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

@@ -0,0 +1,3 @@
+@import 'mixins/transparency';
+@import 'mixins/vendor-prefixes';
+@import 'mixins/navbar';

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

@@ -0,0 +1,298 @@
+@mixin navbar-responsive() {
+  .menu-on-left .navbar-translate {
+    flex-direction: row-reverse;
+  }
+
+  .navbar {
+    .navbar-nav {
+      margin-top: 53px;
+      position: relative;
+      // max-height: calc(100vh - 75px);
+      // min-height: 100%;
+      overflow: auto;
+
+      &.navbar-logo {
+        top: 0;
+        height: 53px;
+      }
+    }
+
+    .dropdown.show .dropdown-menu,
+    .dropdown .dropdown-menu {
+      background-color: transparent;
+      border: 0;
+      transition: none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      width: auto;
+      margin: 0 1rem;
+      margin-bottom: 15px;
+      padding-top: 0;
+      height: auto;
+      overflow-y: scroll;
+
+      &:before {
+        display: none;
+      }
+    }
+
+    .dropdown {
+      .dropdown-item {
+        padding-left: 2.5rem;
+      }
+
+      .dropdown-menu {
+        display: none;
+      }
+
+      &.show .dropdown-menu {
+        display: block;
+      }
+    }
+
+    .dropdown-menu .dropdown-item:focus,
+    .dropdown-menu .dropdown-item:hover {
+      color: $white;
+      border-radius: $border-radius-small;
+    }
+
+    .navbar-translate {
+      width: 100%;
+      position: relative;
+      display: flex;
+      -ms-flex-pack: justify !important;
+      justify-content: space-between !important;
+      -ms-flex-align: center;
+      align-items: center;
+      @include transform-translate-x(0px);
+      @include custom_transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+      padding: 0.5rem 1rem;
+    }
+
+    .navbar-toggler-bar {
+      display: block;
+      position: relative;
+      width: 22px;
+      height: 1px;
+      border-radius: 1px;
+      background: $black;
+
+      & + .navbar-toggler-bar {
+        margin-top: 7px;
+      }
+
+      &.bar2 {
+        width: 17px;
+        transition: width 0.2s linear;
+      }
+    }
+
+    &.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
+      background: $default-color;
+    }
+  }
+
+  // .bar1,
+  // .bar2,
+  // .bar3 {
+  //   outline: 1px solid transparent;
+  // }
+  // .bar1 {
+  //   top: 0px;
+  //   @include bar-animation($topbar-back);
+  // }
+  // .bar2 {
+  //   opacity: 1;
+  // }
+  // .bar3 {
+  //   bottom: 0px;
+  //   @include bar-animation($bottombar-back);
+  // }
+  // .toggled .bar1 {
+  //   top: 6px;
+  //   @include bar-animation($topbar-x);
+  // }
+  // .toggled .bar2 {
+  //   opacity: 0;
+  // }
+  // .toggled .bar3 {
+  //   bottom: 6px;
+  //   @include bar-animation($bottombar-x);
+  // }
+
+  .top-bar {
+    transform: rotate(0);
+  }
+  .middle-bar {
+    opacity: 1;
+  }
+  .bottom-bar {
+    transform: rotate(0);
+  }
+
+  .top-bar,
+  .middle-bar,
+  .bottom-bar {
+    transition: all 0.2s;
+  }
+
+  .toggled {
+    .top-bar {
+      transform: rotate(45deg);
+      transform-origin: 0%;
+    }
+    .bottom-bar {
+      transform: rotate(-45deg);
+      transform-origin: 0%;
+    }
+    .middle-bar {
+      opacity: 0;
+    }
+  }
+
+  //
+  // @include topbar-x-rotation();
+  // @include topbar-back-rotation();
+  // @include bottombar-x-rotation();
+  // @include bottombar-back-rotation();
+  //
+  // @-webkit-keyframes fadeIn {
+  //   0% {opacity: 0;}
+  //   100% {opacity: 1;}
+  // }
+  // @-moz-keyframes fadeIn {
+  //   0% {opacity: 0;}
+  //   100% {opacity: 1;}
+  // }
+  // @keyframes fadeIn {
+  //   0% {opacity: 0;}
+  //   100% {opacity: 1;}
+  // }
+}
+
+@mixin navbar-collapse() {
+  .navbar-collapse {
+    position: fixed;
+    display: block !important;
+    top: 0;
+    height: 100% !important;
+    width: 300px;
+    right: 0;
+    z-index: 1032;
+    visibility: visible;
+    background-color: #999;
+    overflow-y: visible;
+    border-top: none;
+    text-align: left;
+
+    max-height: none !important;
+
+    @include transform-translate-x(300px);
+    @include custom_transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+    &:before {
+      // background: $brand-primary; /* For browsers that do not support gradients */
+      background: $secondary-gradient;
+      @include opacity(0.76);
+      box-shadow: $material-shadow;
+      display: block;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    }
+
+    .navbar-nav:not(.navbar-logo) {
+      .nav-link {
+        margin: 0 1rem;
+        margin-top: 0.3125rem;
+
+        &:not(.btn) {
+          color: $white !important;
+        }
+      }
+    }
+
+    .dropdown-menu .dropdown-item {
+      color: $white;
+    }
+
+    .btn {
+      position: fixed !important;
+      bottom: 30px;
+      margin-left: 30px;
+      width: 80%;
+      color: $white !important;
+    }
+
+    // check btn-outline-
+    // which incude btn-outline-gradient-also
+    // with colored navbar
+    [class^='btn-outline-'],
+    [class*='btn-outline-'] {
+      @include button-outline-variant($white);
+      &:hover {
+        color: $white !important;
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  @include navbar-responsive();
+
+  [class*='navbar-expand-'] .navbar-collapse {
+    width: 300px;
+  }
+
+  .wrapper {
+    @include custom_transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+
+  #bodyClick {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    opacity: 1;
+    top: 0;
+    left: auto;
+    right: 300px;
+    content: '';
+    z-index: 9999;
+    overflow-x: hidden;
+    background-color: transparent;
+    @include custom_transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+}
+@mixin navbar-hover-link {
+  padding-top: 10px;
+  color: #484848;
+  font-size: 14px;
+  line-height: $line-height-nav-link;
+  display: block;
+  transition: 0.3s ease;
+  transform: $transition-border;
+  &:hover {
+    text-decoration: none !important;
+  }
+  &:after {
+    display: block;
+    content: '';
+    border-bottom: $border-after;
+    transform: scaleX(0);
+    transition: transform $transition-border;
+  }
+  &:hover:after {
+    transform: scaleX(1);
+  }
+  &.fromLeft:after {
+    transform-origin: 0% 50%;
+  }
+  &:focus {
+    color: $black;
+    opacity: 1;
+    text-decoration: none !important;
+  }
+}

data/lib/viniBaxter/sass/spa_landing/theme/mixins/_transparency.scss

@@ -0,0 +1,8 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}

data/lib/viniBaxter/sass/spa_landing/theme/mixins/_vendor-prefixes.scss

@@ -0,0 +1,305 @@
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+  box-shadow: $shadow;
+}
+
+@mixin transition-input-focus-color() {
+  -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
+    background-color 0.3s ease-in-out;
+  -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
+    background-color 0.3s ease-in-out;
+  -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
+    background-color 0.3s ease-in-out;
+  -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
+    background-color 0.3s ease-in-out;
+  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
+    background-color 0.3s ease-in-out;
+}
+
+@mixin custom_transition($time, $type) {
+  -webkit-transition: all $time $type;
+  -moz-transition: all $time $type;
+  -o-transition: all $time $type;
+  -ms-transition: all $time $type;
+  transition: all $time $type;
+}
+
+@mixin transition-on-prop($prop, $time, $type) {
+  -webkit-transition: $prop $time $type;
+  -moz-transition: $prop $time $type;
+  -o-transition: $prop $time $type;
+  -ms-transition: all $time $type;
+  transition: $prop $time $type;
+}
+
+@mixin rotate-180() {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+@mixin transform-scale($value) {
+  -webkit-transform: scale($value);
+  -moz-transform: scale($value);
+  -o-transform: scale($value);
+  -ms-transform: scale($value);
+  transform: scale($value);
+}
+
+@mixin transform-translate-x($value) {
+  -webkit-transform: translate3d($value, 0, 0);
+  -moz-transform: translate3d($value, 0, 0);
+  -o-transform: translate3d($value, 0, 0);
+  -ms-transform: translate3d($value, 0, 0);
+  transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-translate-y-dropdown($value) {
+  -webkit-transform: translate3d(0, $value, 0) !important;
+  -moz-transform: translate3d(0, $value, 0) !important;
+  -o-transform: translate3d(0, $value, 0) !important;
+  -ms-transform: translate3d(0, $value, 0) !important;
+  transform: translate3d(0, $value, 0) !important;
+}
+
+@mixin transform-translate-y($value) {
+  -webkit-transform: translate3d(0, $value, 0);
+  -moz-transform: translate3d(0, $value, 0);
+  -o-transform: translate3d(0, $value, 0);
+  -ms-transform: translate3d(0, $value, 0);
+  transform: translate3d(0, $value, 0);
+}
+
+@mixin bar-animation($type) {
+  -webkit-animation: $type 500ms linear 0s;
+  -moz-animation: $type 500ms linear 0s;
+  animation: $type 500ms 0s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+
+@mixin topbar-x-rotation() {
+  @keyframes topbar-x {
+    0% {
+      top: 0px;
+      transform: rotate(0deg);
+    }
+    45% {
+      top: 6px;
+      transform: rotate(145deg);
+    }
+    75% {
+      transform: rotate(130deg);
+    }
+    100% {
+      transform: rotate(135deg);
+    }
+  }
+  @-webkit-keyframes topbar-x {
+    0% {
+      top: 0px;
+      -webkit-transform: rotate(0deg);
+    }
+    45% {
+      top: 6px;
+      -webkit-transform: rotate(145deg);
+    }
+    75% {
+      -webkit-transform: rotate(130deg);
+    }
+    100% {
+      -webkit-transform: rotate(135deg);
+    }
+  }
+  @-moz-keyframes topbar-x {
+    0% {
+      top: 0px;
+      -moz-transform: rotate(0deg);
+    }
+    45% {
+      top: 6px;
+      -moz-transform: rotate(145deg);
+    }
+    75% {
+      -moz-transform: rotate(130deg);
+    }
+    100% {
+      -moz-transform: rotate(135deg);
+    }
+  }
+}
+
+@mixin topbar-back-rotation() {
+  @keyframes topbar-back {
+    0% {
+      top: 6px;
+      transform: rotate(135deg);
+    }
+    45% {
+      transform: rotate(-10deg);
+    }
+    75% {
+      transform: rotate(5deg);
+    }
+    100% {
+      top: 0px;
+      transform: rotate(0);
+    }
+  }
+
+  @-webkit-keyframes topbar-back {
+    0% {
+      top: 6px;
+      -webkit-transform: rotate(135deg);
+    }
+    45% {
+      -webkit-transform: rotate(-10deg);
+    }
+    75% {
+      -webkit-transform: rotate(5deg);
+    }
+    100% {
+      top: 0px;
+      -webkit-transform: rotate(0);
+    }
+  }
+
+  @-moz-keyframes topbar-back {
+    0% {
+      top: 6px;
+      -moz-transform: rotate(135deg);
+    }
+    45% {
+      -moz-transform: rotate(-10deg);
+    }
+    75% {
+      -moz-transform: rotate(5deg);
+    }
+    100% {
+      top: 0px;
+      -moz-transform: rotate(0);
+    }
+  }
+}
+
+@mixin bottombar-x-rotation() {
+  @keyframes bottombar-x {
+    0% {
+      bottom: 0px;
+      transform: rotate(0deg);
+    }
+    45% {
+      bottom: 6px;
+      transform: rotate(-145deg);
+    }
+    75% {
+      transform: rotate(-130deg);
+    }
+    100% {
+      transform: rotate(-135deg);
+    }
+  }
+  @-webkit-keyframes bottombar-x {
+    0% {
+      bottom: 0px;
+      -webkit-transform: rotate(0deg);
+    }
+    45% {
+      bottom: 6px;
+      -webkit-transform: rotate(-145deg);
+    }
+    75% {
+      -webkit-transform: rotate(-130deg);
+    }
+    100% {
+      -webkit-transform: rotate(-135deg);
+    }
+  }
+  @-moz-keyframes bottombar-x {
+    0% {
+      bottom: 0px;
+      -moz-transform: rotate(0deg);
+    }
+    45% {
+      bottom: 6px;
+      -moz-transform: rotate(-145deg);
+    }
+    75% {
+      -moz-transform: rotate(-130deg);
+    }
+    100% {
+      -moz-transform: rotate(-135deg);
+    }
+  }
+}
+
+@mixin bottombar-back-rotation {
+  @keyframes bottombar-back {
+    0% {
+      bottom: 6px;
+      transform: rotate(-135deg);
+    }
+    45% {
+      transform: rotate(10deg);
+    }
+    75% {
+      transform: rotate(-5deg);
+    }
+    100% {
+      bottom: 0px;
+      transform: rotate(0);
+    }
+  }
+  @-webkit-keyframes bottombar-back {
+    0% {
+      bottom: 6px;
+      -webkit-transform: rotate(-135deg);
+    }
+    45% {
+      -webkit-transform: rotate(10deg);
+    }
+    75% {
+      -webkit-transform: rotate(-5deg);
+    }
+    100% {
+      bottom: 0px;
+      -webkit-transform: rotate(0);
+    }
+  }
+  @-moz-keyframes bottombar-back {
+    0% {
+      bottom: 6px;
+      -moz-transform: rotate(-135deg);
+    }
+    45% {
+      -moz-transform: rotate(10deg);
+    }
+    75% {
+      -moz-transform: rotate(-5deg);
+    }
+    100% {
+      bottom: 0px;
+      -moz-transform: rotate(0);
+    }
+  }
+}
+
+@mixin nc-rotate($degrees, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -webkit-transform: rotate($degrees);
+  -moz-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  transform: rotate($degrees);
+}
+
+@mixin nc-flip($horiz, $vert, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -webkit-transform: scale($horiz, $vert);
+  -moz-transform: scale($horiz, $vert);
+  -ms-transform: scale($horiz, $vert);
+  -o-transform: scale($horiz, $vert);
+  transform: scale($horiz, $vert);
+}