viniBaxter-spa_landing 10.0 → 11

data/lib/viniBaxter/sass/spa_landing/theme/both_gems/jumbotrons/_jubo-home.scss

@@ -0,0 +1,154 @@
+// Home jumbo
+
+.host-asset {
+  min-height: 500px;
+  max-height: 1000px;
+  position: absolute !important;
+  top: 0;
+  background-repeat: no-repeat !important;
+  animation-name: illusion_jumbotron !important;
+  animation-duration: 300ms !important;
+  animation-timing-function: ease-out !important;
+  background-size: cover !important;
+  width: 100%;
+  height: 70vh;
+  @include media-breakpoint-down(xs) {
+    height: 85vh;
+  }
+  @include media-breakpoint-up(sm) {
+    height: 80vh;
+  }
+
+  // if it preferable to keep peach gradient
+  // uncomment that
+  // @include media-breakpoint-down(sm) {
+  //   background-image: $peach-gradient;
+  // }
+
+  @include media-breakpoint-up(sm) {
+    background-image: linear-gradient(
+        270deg,
+        rgba(255, 255, 255, 0) 8%,
+        rgba(255, 255, 255, 0.21) 100%
+      ),
+      url('https://vbaxt-fixed-assets.ams3.cdn.digitaloceanspaces.com/Spassngo/site/home/home_jumbo_spassngo.jpg');
+  }
+
+  // target the left side of the picture
+  &.focus-left {
+    @include media-breakpoint-down(md) {
+      background-position: 25% 50% !important;
+    }
+  }
+}
+// cta inside search
+#cta-form-search {
+  &.btn-xl-form {
+    box-shadow: $material-shadow2;
+  }
+}
+
+#main-wrapper-xs-search-jumbo {
+  #cta_form_search {
+    &.btn-small-form {
+      color: #ffffff !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+      border-bottom: 2px solid #ffffff;
+    }
+
+    @include form-xs-with-only-bottom-border($light);
+  }
+
+  #cta_form_search2 {
+    &.btn-rounded-circle {
+      padding-left: 0.8125rem !important;
+      padding-right: 0.8125rem !important;
+      border-radius: 50rem !important;
+      border: 2px solid #fff !important;
+      &:hover {
+        background-color: transparent !important;
+      }
+    }
+  }
+}
+
+#main-wrapper-search-jumbo {
+  position: absolute;
+  margin: 43px auto auto;
+  top: 70%;
+  width: 850px;
+  left: calc((100% - 850px) / 2);
+  &.sticky {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    margin: 0px auto auto;
+    #div-inject_span {
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      left: 0%;
+      width: 38%;
+      transition: all 0.8s ease-in-out;
+      height: auto;
+      border-radius: 0px;
+      &.show {
+        opacity: 1;
+        top: 10px;
+        z-index: 1079;
+      }
+    }
+    .wrapper-search-bg-light {
+      padding: 1rem 2.2rem 1.5rem 40%;
+    }
+  }
+
+  // @include media-breakpoint-up(xl) {
+  //   width: 60%;
+  //   left: calc((100% - 60%) / 2);
+  // }
+  // @include media-breakpoint-down(xl) {
+  //   width: 66%;
+  //   left: calc((100% - 66%) / 2);
+  // }
+  @include media-breakpoint-down(lg) {
+    width: 90%;
+    left: calc((100% - 90%) / 2);
+  }
+  // @include media-breakpoint-down(sm) {
+  //   width: 98%;
+  //   left: calc((100% - 98%) / 2);
+  //   top: 65%;
+  // }
+
+  .wrapper-search-bg-light {
+    @include wrapper-inline-form-bg-white;
+
+    .form-search-xl {
+      width: 90%;
+    }
+
+    .form-group {
+      font-size: 12px !important;
+      margin-right: 15px !important;
+      // &:first-child {
+      //   flex: 2 0 auto !important;
+      // }
+      &.string.required.search_what_where_xl_form_input {
+        flex: 1 1 30% !important;
+        // flex: 2 1 60% !important;
+      }
+      &.string.required.search_added_values_xl_form_input {
+        flex: 1 1 30% !important;
+      }
+    }
+
+    input {
+      @include form-with-only-bottom-border;
+    }
+  }
+  .item_title-main-div-xl {
+    flex: 1 1 30% !important;
+  }
+}

data/lib/viniBaxter/sass/spa_landing/theme/hidden/_hidden-down.scss

@@ -0,0 +1,43 @@
+/* hidden-down
+(forheadsbands effect)
+________________________________*/
+
+
+/* hidden-down-xs
+________________________________*/
+.hidden-down-xs, .show-up-xs{
+  @include media-breakpoint-down(xs) {
+    display: none!important;
+  }
+}
+
+/* hidden-down-sm
+________________________________*/
+.hidden-down-sm, .show-up-sm{
+  @include media-breakpoint-down(sm) {
+    display: none !important
+  }
+}
+
+/* hidden-down-md
+________________________________*/
+.hidden-down-md, .show-up-md{
+  @include media-breakpoint-down(md) {
+    display: none!important;
+  }
+}
+
+/* hidden-down-lg
+________________________________*/
+.hidden-down-lg, .show-up-lg{
+  @include media-breakpoint-down(lg) {
+    display: none!important;
+  }
+}
+/* hidden-down-xl
+________________________________*/
+.hidden-down-xl, .show-up-xl{
+  @include media-breakpoint-down(xl) {
+    display: none!important;
+  }
+}

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

@@ -0,0 +1,13 @@
+/*________________________________________
+show => montrer pour une taille seulement
+show-down => montrer en dessous de
+show-up => montrer au dessu de
+show-between => montrer entre
+hidden => caché pour une taille seulement
+hidden-down => caché en dessous de
+hidden-up => caché en dessus de
+hidden-between => chaché entre
+________________________________*/
+@import 'show';
+@import 'hidden-down';
+@import 'show-down';

data/lib/viniBaxter/sass/spa_landing/theme/hidden/_show-down.scss

@@ -0,0 +1,57 @@
+/* show-down
+________________________________*/
+
+/* show-down-xs
+________________________________*/
+.show-down-xs, .hidden-up-xs {
+  display: none !important
+}
+.show-down-xs, .hidden-up-xs{
+  @include media-breakpoint-down(xs) {
+    display:block !important;
+  }
+}
+
+/* show-down-sm
+________________________________*/
+.show-down-sm, .hidden-up-sm{
+  display: none !important
+}
+.show-down-sm, .hidden-up-sm{
+  @include media-breakpoint-down(sm) {
+    display:block !important;
+  }
+}
+
+/* show-down-md
+________________________________*/
+.show-down-md, .hidden-up-md {
+  display: none !important
+}
+.show-down-md, .hidden-up-md{
+  @include media-breakpoint-down(md) {
+    display:block !important;
+  }
+}
+
+/* show-down-lg
+________________________________*/
+.show-down-lg, .hidden-up-lg{
+  display: none !important
+}
+.show-down-lg, .hidden-up-lg{
+  @include media-breakpoint-down(lg) {
+    display:block !important;
+  }
+}
+
+/* show-down-xl
+________________________________*/
+.show-down-xl, .hidden-up-xl{
+  display: none !important
+}
+.show-down-xl, .hidden-up-xl{
+  @include media-breakpoint-down(xl) {
+    display:block !important;
+  }
+}

data/lib/viniBaxter/sass/spa_landing/theme/hidden/_show.scss

@@ -0,0 +1,122 @@
+/* range appropriated
+xl: 1200px,
+md: 768px,
+xs: 1,
+________________________________*/
+
+/* show-xl from 1200
+________________________________*/
+.show-xl {
+  display: none !important;
+  @include media-breakpoint-up(xl){
+    display:block !important;
+  }
+}
+
+/* show-lg
+________________________________*/
+.show-lg {
+  display: none !important;
+}
+@include media-breakpoint-down(lg){
+  .show-lg {
+    display:block !important;
+  }
+  .show-xl {
+    display:none !important;
+  }
+}
+/* show-md
+________________________________*/
+.show-md {
+  display: none !important;
+}
+@include media-breakpoint-down(md){
+  .show-md {
+    display: block !important;
+  }
+  .show-lg {
+    display: none !important;
+  }
+  .show-xl {
+    display:none !important;
+  }
+}
+
+/* show-sm
+________________________________*/
+.show-sm {
+  display: none !important;
+}
+@include media-breakpoint-down(sm){
+  .show-sm {
+    display: block !important;
+  }
+  .show-md {
+    display: none !important;
+  }
+  .show-lg {
+    display: none !important;
+  }
+  .show-xl {
+    display:none !important;
+  }
+}
+
+
+
+/* show-xs 1 => 575
+________________________________*/
+.show-xs {
+  display: none !important;
+}
+@include media-breakpoint-down(xs){
+  .show-xs {
+    display: block !important;
+  }
+  .show-sm-small {
+    display: none !important;
+  }
+  .show-sm {
+    display: none !important;
+  }
+  .show-md {
+    display: none !important;
+  }
+  .show-lg {
+    display: none !important;
+  }
+  .show-xl {
+    display:none !important;
+  }
+}
+@media (max-width: 320px){
+  padding-top:687px !important;
+}
+
+.show-xxs {
+  display: none !important;
+}
+@media (max-width: 320px){
+  .show-xxs {
+    display: block !important;
+  }
+  .show-xs {
+    display: none !important;
+  }
+  .show-sm-small {
+    display: none !important;
+  }
+  .show-sm {
+    display: none !important;
+  }
+  .show-md {
+    display: none !important;
+  }
+  .show-lg {
+    display: none !important;
+  }
+  .show-xl {
+    display:none !important;
+  }
+}

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

@@ -0,0 +1,78 @@
+@mixin colored_block($color, $font_colored_block) {
+  background: $color !important;
+  transition: opacity 0.3s ease !important;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $font_colored_block !important;
+    font-weight: 600;
+  }
+  .block-mission {
+    line-height: $line-height-500 !important;
+  }
+  p {
+    color: $font_colored_block !important;
+    font-weight: 200;
+    line-height: $line-height-90 !important;
+    letter-spacing: 0.6px !important;
+    word-wrap: break-word !important;
+    margin-bottom: $paragraph-colored-block-margin-bottom;
+    font-size: $paragraph-80;
+  }
+}
+
+@mixin farthest-corner {
+  &.red {
+    @include colored_block($farthest-corner_redy, $light);
+  }
+  &.sand {
+    @include colored_block($farthest-corner_sand, $black);
+  }
+  &.blue {
+    @include colored_block($farthest-corner_blue, $light);
+  }
+  &.caribean {
+    @include colored_block($farthest-corner_caribean, $black);
+  }
+  &.light_green {
+    @include colored_block($farthest-corner_light_green, $black);
+    height: 100%;
+  }
+  &.none_ {
+    @include colored_block($farthest-corner_none_, $black);
+    height: 100%;
+  }
+  &.purple {
+    @include colored_block($farthest-corner_purple, $light);
+    height: 100%;
+  }
+  &.cold_desert {
+    @include colored_block($farthest-corner_cold_desert, $black);
+  }
+  &.minthy {
+    @include colored_block($farthest-corner_minthy, $black);
+  }
+  &.mint {
+    @include colored_block($farthest-corner_mint, $light);
+  }
+  &.velour {
+    @include colored_block($farthest-corner_velour, $light);
+  }
+  &.grey {
+    @include colored_block($farthest-corner_grey, $black);
+  }
+  &.lovely {
+    @include colored_block($farthest-corner_lovely, $light);
+  }
+  &.golfy {
+    @include colored_block($farthest-corner_golfy, $light);
+  }
+  &.sandy {
+    @include colored_block($farthest-corner_sandy, $dark);
+  }
+  &.in_love {
+    @include colored_block($farthest-corner_in_love, $dark);
+  }
+}