ctt-babylon 0.8.4 → 0.8.6

package/lib/styles/styles/babylon/globals.scss

@@ -1,5 +1,5 @@
-@use 'variables.scss' as *;
-@use 'mixins.scss' as *;
+@import 'mixins.scss';
+
 html * {
     -webkit-font-smoothing: antialiased;
 }
@@ -65,24 +65,16 @@ hr {
 /* General links color */
 a {
     color: var(--cl_btn-link);
-    font-family: var(--font-text);
     text-decoration: none;
     @include transition-default;
     outline: none;
-    cursor: pointer;
+
     &:hover,
     &:focus {
         color: var(--cl_btn-link-hover);
         text-decoration: none;
         outline: none;
     }
-    &.cs_site_branding {
-        height: 100%;
-        img {
-            height: 100%;
-            padding: 5px;
-        }
-    }
 }
 
 /*-------- ESPACIOS --------*/
@@ -119,11 +111,10 @@ a {
     @include transition-default;
     border-radius: var(--btn_radius);
     line-height: 1;
-    font-family: var(--font-btn);
-    letter-spacing: var(--ls_btn);
+    font-family: var(--font-text);
+    letter-spacing: 1px;
     font-weight: var(--w_btn);
-    font-size: var(--size_btn);
-    text-transform: var(--upper_btn);
+    font-size: 14px;
     cursor: pointer;
     text-decoration: none;
     span {
@@ -142,16 +133,9 @@ a {
             position: relative;
         }
     }
-    b,
-    a {
-        color: var(--cl_btn-box-text);
-        font-weight: var(--w_btn);
-        font-size: var(--size_btn);
-    }
     &:hover {
         background-color: var(--cl_btn-box-hover);
         color: var(--cl_btn-box-text-hover);
-        border-color: var(--cl_btn-box-hover);
         span {
             svg,
             &:before {
@@ -160,31 +144,9 @@ a {
                 position: relative;
             }
         }
-        b {
-            color: var(--cl_btn-box-text-hover);
-        }
-    }
-    &.disabled,
-    .pointers-none {
-        color: grey;
-        pointer-events: none;
-        background-color: transparent;
-        border-color: grey;
-        opacity: 0.6;
-        b,
-        a {
-            color: grey;
-        }
-        span {
-            color: grey;
-            &:before {
-                color: grey;
-            }
-        }
     }
 
-    &_primary,
-    &__primary {
+    &_primary {
         border: 1px solid var(--cl_btn-box);
         color: var(--cl_btn-box-text);
         background: transparent;
@@ -198,104 +160,33 @@ a {
                     color: var(--cl_btn-light-text);
                 }
             }
-            b,
-            a {
-                color: var(--cl_btn-light-text);
-            }
-            &:hover {
-                background-color: var(--cl_btn-light-hover);
-                border-color: var(--cl_btn-light-hover);
-                color: var(--cl_btn-light-text-hover);
-                b {
-                    color: var(--cl_btn-light-text-hover);
-                }
-            }
         }
         &:hover {
             background-color: var(--cl_btn-box-hover);
             border-color: var(--cl_btn-box-hover);
             color: var(--cl_btn-box-text-hover);
-            b {
-                color: var(--cl_btn-box-text-hover);
-            }
         }
     }
-
-    &_call,
-    &__call {
+    &_call {
         border: 1px solid var(--cl_btn-call);
         background-color: var(--cl_btn-call);
         color: var(--cl_btn-call-text);
         position: relative;
-        b {
-            color: var(--cl_btn-call-text);
-        }
         span:before {
             color: var(--cl_btn-call-text);
         }
-        b {
-            color: var(--cl_btn-call-text);
-        }
         &.btn--light {
             background-color: var(--cl_btn-light);
             border: 1px solid var(--cl_btn-light);
-            color: var(--cl_btn-light-text);
+            color: var(--cl_btn-call);
             span:before {
-                color: var(--cl_btn-light-text);
-            }
-            b {
-                color: var(--cl_btn-light-text);
+                color: var(--cl_btn-call);
             }
         }
         &:hover {
             background-color: var(--cl_btn-call-hover);
             border-color: var(--cl_btn-call-hover);
             color: var(--cl_btn-call-text-hover);
-            b {
-                color: var(--cl_btn-call-text-hover);
-            }
-        }
-    }
-
-    &_unlink {
-        border: none;
-        font-size: large;
-        text-decoration: underline;
-        text-underline-offset: 5px;
-        color: var(--cl_btn-light-text);
-        &:hover {
-            color: var(--cl_btn-box-text-hover);
-        }
-    }
-
-    &_simple_box {
-        border-radius: 0px;
-        padding: 5px;
-        background-color: var(--cl_btn-box-text-hover);
-        &:hover {
-            background-color: var(--cl_btn-box);
-            border-color: var(--cl_btn-box);
-            color: var(--cl_btn-box-text-hover);
-        }
-    }
-
-    &_big-circle {
-        width: 92px;
-        height: 92px;
-        background-color: var(--cl_btn-box-text-hover);
-        border: 0;
-        margin: 0;
-        padding: 0;
-        display: inline-block;
-        vertical-align: middle;
-        -webkit-border-radius: 50%;
-        border-radius: 50%;
-        position: relative;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-        &:hover {
-            background-color: var(--cl_btn-box);
-            border-color: var(--cl_btn-box);
-            color: var(--cl_btn-box-text-hover);
         }
     }
 }
@@ -303,17 +194,16 @@ a {
 .btn-link {
     position: relative;
     font-style: normal;
-    font-family: var(--font-link);
-    letter-spacing: var(--ls_link);
+    font-family: var(--font-text);
+    letter-spacing: 1px;
     font-weight: var(--w_btn);
-    font-size: var(--size_link);
+    font-size: 14px;
     cursor: pointer;
     text-decoration: none;
     color: var(--cl_btn-link);
     display: flex;
     align-items: center;
     gap: 10px;
-    text-transform: var(--upper_link);
     @include transition-default;
     span {
         font-size: 8px;
@@ -394,51 +284,18 @@ a {
             justify-content: center;
         }
     }
-    @include small-desktop {
+    @include full-tablet {
         padding-block: 20px 10px;
         align-items: center;
         justify-content: center;
     }
 }
-.btn--close {
-    width: auto;
-    padding: 13px;
-    .babylon-plus {
-        width: auto !important;
-        padding: 0;
-        font-size: 18px;
-    }
-}
-.babylon-plus {
-    width: auto !important;
-    padding: 12px;
-    &:before {
-        right: auto !important;
-    }
-}
-
-.babylon-minus {
-    width: auto !important;
-    padding: 12px;
-    &:before {
-        right: auto !important;
-        content: '';
-        display: block;
-        width: 14px;
-        height: 2px;
-        background-color: currentColor;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}
 
 /*-------- TEXTOS--------*/
 .title_carrusel {
     font-size: 40px;
     font-family: var(--font-title);
-    line-height: var(--lh_title-slider);
+    line-height: 1.2;
     letter-spacing: 1px;
     color: var(--cl_title-light);
     font-weight: var(--w_title);
@@ -456,13 +313,12 @@ a {
 }
 .pretitle_carrusel {
     font-size: 16px;
-    line-height: var(--lh_pretitle-slider);
+    line-height: 1.2;
     letter-spacing: 1px;
     color: var(--cl_pretitle-light);
     font-weight: var(--w_pretitle);
     margin: 0;
     margin-block: 0;
-    padding-bottom: var(--padding-bottom-slider);
     @include min-small-desktop {
         font-size: 18px;
     }
@@ -787,7 +643,7 @@ $type-align: left; //center / left
             right: 30px;
             top: 30px;
             bottom: 30px;
-            border: var(--img_border-width) solid var(--img_border);
+            border: var(--img_border-whidth) solid var(--img_border);
             border-radius: var(--img_radius);
             z-index: 1;
             @include full-tablet {
@@ -815,7 +671,7 @@ $type-align: left; //center / left
                 right: 30px;
                 top: 30px;
                 bottom: 30px;
-                border: var(--img_border-width) solid var(--img_border);
+                border: var(--img_border-whidth) solid var(--img_border);
                 border-radius: var(--img_radius);
                 @include full-tablet {
                     left: 15px;
@@ -830,9 +686,9 @@ $type-align: left; //center / left
 
 .btn-close--modal {
     position: absolute;
-    top: 20px;
-    right: 20px;
-    z-index: 999;
+    top: 70px;
+    right: 70px;
+    z-index: 1;
 
     .babylon-plus::before {
         transform: rotate(-45deg);
@@ -842,153 +698,151 @@ $type-align: left; //center / left
         top: 30px;
         right: 30px;
     }
-    a:hover {
-        background-color: var(--cl_corp);
-        border-color: var(--cl_corp);
-        color: white;
-    }
-}
-
-.cs_form .conditions p {
-    margin-bottom: 0px !important;
 }
 
-.cs_form .conditions a {
-    text-decoration: underline !important;
-}
-
-.logo_title {
-    img {
-        height: 120px;
-        width: auto;
-    }
-}
-
-.babylon__engine.header-center-bookshow-engine {
-    input {
-        &::placeholder {
-            padding: 5px 0 5px 0;
+/* .blanco-version-form {
+    .input-group {
+        position: relative;
+        .input-control,
+        .select-control {
+            height: 6rem;
+            appearance: none;
+            border: 1px solid transparent;
+            border-bottom-color: $grey;
+            @include lineHeight(14, 14);
+            color: $primary;
+            padding: 2.9rem 5.6rem 1rem 2rem;
+            outline: 0;
+            width: 100%;
+            transition: $transition;
+            background: transparent;
+            display: block;
+            &:hover,
+            &:focus {
+                border-color: $grey;
+                background: $white;
+            }
         }
-    }
-    @include min-full-tablet {
-        &.engine-sticky {
-            max-width: none !important;
-            border-radius: 0 !important;
-            display: flex !important;
-            justify-content: center !important;
-            position: fixed !important;
-            top: 100px !important;
-            margin-top: 0px !important;
-            padding: 20px !important;
-            background-color: var(--cl_background_dark-opacity) !important;
-            .p-calendar {
-                input::placeholder {
-                    color: var(--cl_title-light) !important;
-                }
+        &.open {
+            span.input-control {
+                border-color: $grey;
             }
-            .babylon__engine__input {
-                color: var(--cl_title-light) !important;
-                &::placeholder {
-                    color: var(--cl_title-light) !important;
-                }
+        }
+        &--inner {
+            position: relative;
+        }
+        &--label {
+            position: absolute;
+            left: 0.2rem;
+            padding: 2.1rem 2rem;
+            @include lineHeight(16, 16);
+            color: $primary;
+            transition: $transition;
+            top: 0.1rem;
+            background: $white;
+            pointer-events: none;
+            width: calc(100% - 5.6rem);
+        }
+        &--icon {
+            position: absolute;
+            width: 1.6rem;
+            height: 1.6rem;
+            top: 50%;
+            pointer-events: none;
+            right: 2rem;
+            transform: translateY(-50%);
+            &:has(.user) {
+                width: 1.2rem;
+                height: 1.2rem;
             }
-            span::before {
-                color: var(--cl_title-light);
+            &:has(.baby) {
+                width: 0.9rem;
+                height: 0.9rem;
             }
-            span.babylon__guests__icon::before {
-                color: var(--cl_engine-text-sticky);
+            svg {
+                width: 100%;
+                height: 100%;
             }
         }
-    }
-
-    .babylon__engine__dialog {
-        position: absolute;
-    }
-
-    .babylon__engine__datepicker {
-        width: 100%;
-    }
-
-    .babylon-tag {
-        &::before {
-            font-size: 23px;
+        &:has(input:focus) &,
+        &:has(input:not(:placeholder-shown)) & {
+            &--label {
+                padding-top: 1.1rem;
+                padding-bottom: 3.2rem;
+                line-height: 1;
+                background: transparent;
+            }
         }
-    }
-}
-
-.cs__mode-only_mobile {
-    @include min-full-tablet {
-        display: none;
-    }
-}
-
-.cs__mode-no_mobile {
-    @include full-tablet {
-        display: none;
-    }
-}
-
-.cs__not_touch-mobile {
-    @include mobile {
-        pointer-events: none;
-    }
-}
-
-.cs_border-bottom {
-    @include small-tablet {
-        border-bottom: 1px solid rgba(73, 73, 73, 0.1);
-        padding-bottom: 12px;
-    }
-}
-
-lib-babylon-engine {
-    .babylon__engine.header-center-bookshow-engine.engine-sticky {
-        height: auto !important;
-        width: 100% !important;
-    }
-}
-.babylon__engine.header-bookshow-engine {
-    @include min-small-desktop {
-        &.engine-sticky {
-            form {
-                gap: 20px !important;
-                > div {
-                    &:first-child {
-                        max-width: calc(30% - 20px) !important;
-                        width: calc(30% - 20px) !important;
+        &:not(.open) {
+            .input-group--icon {
+                svg {
+                    &.persons {
+                        display: block;
+                    }
+                    &.down-arrow {
+                        display: none;
+                        width: 1.4rem;
+                        height: 1.4rem;
+                    }
+                }
+            }
+        }
+        &.open {
+            .input-group--icon {
+                svg {
+                    &.persons {
+                        display: none;
+                    }
+                    &.down-arrow {
+                        display: block;
+                        width: 1.4rem;
+                        height: 1.4rem;
                     }
                 }
             }
         }
     }
-}
-.top-container {
-    position: relative;
-}
-
-//FIX FROM LIVE
-@include full-tablet {
-    .cdk-global-overlay-wrapper {
-        padding-bottom: 0px !important;
-    }
-    .guests input {
-        pointer-events: none !important;
-        user-select: none !important;
-    }
-}
-
-span.babylon__engines__datepicker__icon.babylon-calendar {
-    width: 100%;
-    height: 100%;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: right;
-    padding-right: 20px;
-}
-
-.cdk-global-scrollblock {
-    .hi-widget-container.small-widget {
-        display: none !important;
+    .checkbox__group {
+        label {
+            position: relative;
+            input {
+                position: absolute;
+                left: 0;
+                top: 0;
+                opacity: 0;
+                pointer-events: none;
+                &:checked + span {
+                    svg {
+                        opacity: 1;
+                    }
+                }
+            }
+            span {
+                padding-left: 2.55rem;
+                @include lineHeight(14, 14);
+                color: rgb($primary, 80%);
+                position: relative;
+                display: block;
+                &::before {
+                    content: '';
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    border: 1px solid rgb($primary, 70%);
+                    position: absolute;
+                    left: 0;
+                    top: 0.1rem;
+                }
+                .checkbox--tick {
+                    opacity: 0;
+                    pointer-events: none;
+                    width: 0.9rem;
+                    height: 0.6rem;
+                    color: $primary;
+                    position: absolute;
+                    left: 0.3rem;
+                    top: 0.5rem;
+                }
+            }
+        }
     }
-}
+} */