viniBaxter-spa_landing 0.2.0 → 10.0

data/lib/viniBaxter/sass/spa_landing/theme/iOS/_index.scss

@@ -0,0 +1,3 @@
+@import 'OS_style';
+@import 'safari__blur__effect';
+@import 'os_card';

data/lib/viniBaxter/sass/spa_landing/theme/iOS/_os_card.scss

@@ -0,0 +1,152 @@
+.section-card-tiles {
+  margin: 0 auto;
+  max-width: 1440px;
+
+  @include media-breakpoint-up(lg) {
+    top: 110px;
+    position: relative;
+  }
+  .cards-tiles-list {
+    padding: 0px;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0px 30px 30px 30px;
+  }
+
+  .card-tile {
+    box-sizing: border-box;
+    max-width: 50%;
+    flex-basis: 50%;
+    position: relative;
+    overflow: hidden;
+
+    &:nth-child(odd) {
+      border-right: 15px solid #fff;
+    }
+
+    &:nth-child(even) {
+      border-left: 15px solid #fff;
+    }
+
+    &:nth-child(1),
+    &:nth-child(2) {
+      border-bottom: 15px solid #fff;
+    }
+
+    &:nth-child(3),
+    &:nth-child(4) {
+      border-top: 15px solid #fff;
+    }
+
+    &:hover .cat-tile-dark-layer {
+      opacity: 0.3;
+    }
+  }
+
+  .jump-tile-link {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  .jump-tile-video {
+    opacity: 0;
+    transition: opacity 0.2s ease-in;
+    width: 100%;
+    position: absolute;
+
+    video {
+      width: 100%;
+      height: 100%;
+      -o-object-fit: cover;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  .cat-tile-bg {
+    background-size: cover;
+    background-position: center;
+    padding-bottom: 100%;
+    width: 100%;
+  }
+
+  .cat-tile-dark-layer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    opacity: 0.2;
+    transition: opacity 0.4s;
+    background-color: black;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .cat-tile-copy {
+    width: 100%;
+    z-index: 2;
+    text-align: left;
+    position: absolute;
+    pointer-events: none;
+    top: 28%;
+
+    h2,
+    a {
+      max-width: 80%;
+      padding-left: 15%;
+      font-weight: 500;
+    }
+
+    h2 {
+      color: #fff;
+      text-align: left;
+      // font-family: $font-family-sans-serif;
+
+      font-size: 32px;
+
+      @media screen and (min-width: 1068px) {
+        font-size: 56px;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    a {
+      display: inline-block;
+      color: #fff;
+      justify-self: start;
+      pointer-events: all;
+      margin-top: 32px;
+      font-size: 24px;
+    }
+  }
+
+  .card-tile-set {
+    h2 {
+      max-width: 398px;
+    }
+
+    .cat-tile-bg {
+      background-repeat: no-repeat;
+    }
+  }
+}
+@import '_1068';
+@import '_735';
+
+.more:after {
+  font-family: 'Nucleo Outline';
+  content: '\ea3b';
+  font-weight: bold;
+  margin-left: 10px;
+  color: #fff;
+  font-size: 15px;
+  line-height: 1;
+}

data/lib/viniBaxter/sass/spa_landing/theme/iOS/_safari__blur__effect.scss

@@ -0,0 +1,50 @@
+.header_TEST {
+  height: 60px;
+  // height: 100%;
+  margin: 0;
+  // position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 31%);
+}
+
+.overlay_TEST {
+  height: 60px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.clone_TEST {
+  height: 80px;
+  padding: 3em 0em 0em 1em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  /* overflow: hidden;
+  -webkit-filter: blur(5px);
+  filter: blur(5px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none; */
+  user-select: none;
+  backdrop-filter: saturate(180%) blur(20px);
+  /*   backdrop-filter: saturate(250%) blur(5px); */
+}
+
+.content_TEST {
+  padding: 3em 1em 1em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 1;
+}

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,318 @@
+@mixin navbar-responsive() {
+  .menu-on-left .navbar-translate {
+    flex-direction: row-reverse;
+  }
+
+  .navbar {
+    .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;
+      }
+    }
+    &.relative-top {
+      .navbar-toggler-bar {
+        background: $white;
+      }
+    }
+    .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;
+    }
+
+    &.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
+      background: $dark;
+    }
+  }
+
+  // .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() {
+  #globalnav {
+    background: $opacity-2;
+    user-select: none;
+  }
+
+  @supports (
+    (-webkit-backdrop-filter: $small-backdrop-filter) or
+      (backdrop-filter: $small-backdrop-filter)
+  ) {
+    #globalnav {
+      background: $opacity-2;
+      -webkit-backdrop-filter: $small-backdrop-filter;
+      backdrop-filter: $small-backdrop-filter;
+    }
+  }
+  .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;
+
+    @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($color, $border) {
+  padding-top: 10px;
+  color: $color;
+  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;
+    transform: scaleX(0);
+    transition: transform $transition-border;
+  }
+  &:hover:after {
+    transform: scaleX(1);
+  }
+  &.fromLeft:after {
+    transform-origin: 0% 50%;
+  }
+  &:focus {
+    color: $color;
+    opacity: 1;
+    text-decoration: none !important;
+  }
+  p {
+    font-weight: $font-weight-normal;
+  }
+}