ctt-babylon 0.8.13 → 0.8.15

package/lib/styles/styles/babylon/scss-daba/buttons.scss

@@ -0,0 +1,441 @@
+@use 'funciones.scss' as *;
+
+$button-colors: (
+    red: (
+        base: $red,
+        hover: $redhover,
+    ),
+    blue: (
+        base: $blue,
+        hover: $bluehover,
+    ),
+    green: (
+        base: $green,
+        hover: $greenhover,
+    ),
+);
+
+@mixin button-colors {
+    @each $name, $colors in $button-colors {
+        &.#{$name} {
+            background-color: map-get($colors, base);
+            @media (hover: hover) {
+                &:hover {
+                    background-color: map-get($colors, hover);
+                }
+            }
+        }
+    }
+
+    &.underline {
+        color: $white;
+        border: 0.1rem solid $white;
+        background-color: transparent;
+        @media (hover: hover) {
+            &:hover {
+                border: 0.1rem solid
+                    map-get(map-get($button-colors, red), hover);
+                background-color: map-get(map-get($button-colors, red), hover);
+            }
+        }
+    }
+}
+
+@mixin center-span-button {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: max-content;
+}
+
+.m-button-big {
+    display: block;
+    min-width: max-content;
+    max-width: 100%;
+    width: 33rem;
+    text-align: center;
+    box-sizing: border-box;
+    padding: 1.1rem;
+    color: $white;
+    background-color: $red;
+    border-radius: 0.4rem;
+    transition: $transition1;
+    height: 4.8rem;
+    cursor: pointer;
+    position: relative;
+    @include text-button-box();
+    @include button-colors;
+
+    span {
+        @include center-span-button();
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $redhover;
+        }
+    }
+}
+
+.m-button-sm {
+    display: block;
+    min-width: max-content;
+    width: 100%;
+    max-width: 26rem;
+    text-align: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 1.1rem;
+    color: $white;
+    background-color: $red;
+    border-radius: 0.4rem;
+    transition: $transition1;
+    height: 4.8rem;
+    position: relative;
+    @include text-button-box();
+    @include button-colors;
+
+    span {
+        @include center-span-button();
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $redhover;
+        }
+    }
+}
+
+.m-underline {
+    display: block;
+    width: max-content;
+    position: relative;
+    text-align: center;
+    cursor: pointer;
+    transition: $transition1;
+    color: $greydark;
+
+    @include text-button-box();
+
+    @media (hover: hover) {
+        &:hover,
+        &.active {
+            color: $redhover;
+
+            &::after {
+                opacity: 1;
+                width: 100%;
+            }
+        }
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        width: 100%;
+        height: 0.1rem;
+        z-index: 1;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        opacity: 0;
+        width: 0%;
+        height: 0.2rem;
+        background-color: $redhover;
+        transition: $transition1;
+        z-index: 2;
+    }
+}
+
+.m-underline-red {
+    color: $greysoft;
+    display: block;
+    width: max-content;
+    position: relative;
+    text-align: center;
+    cursor: pointer;
+    transition: $transition1;
+    @include text-button-box();
+
+    // Línea fija en gris
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        width: 100%;
+        height: 0.1rem;
+        background-color: $greysoft; // subrayado gris permanente
+        z-index: 1;
+    }
+
+    // Línea animada en gris
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        opacity: 1;
+        width: 0%;
+        height: 0.2rem;
+        background-color: $redhover; // también gris
+        transition: $transition1;
+        z-index: 2;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            color: $redhover; // mantiene el color del texto gris
+            &::after {
+                width: 100%; // animación de izquierda a derecha
+            }
+        }
+    }
+}
+
+.m-underline-blue {
+    color: $greysoft;
+    display: block;
+    width: max-content;
+    position: relative;
+    text-align: center;
+    cursor: pointer;
+    transition: $transition1;
+    @include text-button-box();
+
+    // Línea fija en gris
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        width: 100%;
+        height: 0.1rem;
+        background-color: $greysoft; // subrayado gris permanente
+        z-index: 1;
+    }
+
+    // Línea animada en gris
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        opacity: 1;
+        width: 0%;
+        height: 0.2rem;
+        background-color: $bluehover; // también gris
+        transition: $transition1;
+        z-index: 2;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            color: $bluehover; // mantiene el color del texto gris
+            &::after {
+                width: 100%; // animación de izquierda a derecha
+            }
+        }
+    }
+}
+
+.m-underline-green {
+    color: $greysoft;
+    display: block;
+    width: max-content;
+    position: relative;
+    text-align: center;
+    cursor: pointer;
+    transition: $transition1;
+    @include text-button-box();
+
+    // Línea fija en gris
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        width: 100%;
+        height: 0.1rem;
+        background-color: $greysoft; // subrayado gris permanente
+        z-index: 1;
+    }
+
+    // Línea animada en gris
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -1rem;
+        left: 0;
+        opacity: 1;
+        width: 0%;
+        height: 0.2rem;
+        background-color: $greenhover; // también gris
+        transition: $transition1;
+        z-index: 2;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            color: $greenhover; // mantiene el color del texto gris
+            &::after {
+                width: 100%; // animación de izquierda a derecha
+            }
+        }
+    }
+}
+
+.m-swiper-button {
+    width: 4.8rem;
+    height: 4.8rem;
+    background-color: $red;
+    transition: $transition1;
+    cursor: pointer;
+    position: relative;
+    &.swiper-button-disabled {
+        opacity: 0.7;
+    }
+    svg {
+        @include center-a-element();
+    }
+    &.prev {
+        border-top-left-radius: 8rem;
+        border-bottom-left-radius: 8rem;
+    }
+    &.next {
+        border-top-right-radius: 8rem;
+        border-bottom-right-radius: 8rem;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $redhover;
+        }
+    }
+    @media #{$tabletV} {
+        width: 3.8rem;
+        height: 3.8rem;
+    }
+    @media #{$mobile} {
+        width: 3.2rem;
+        height: 3.2rem;
+        svg {
+            width: 0.5rem;
+        }
+    }
+}
+
+.m-swiper-button-s {
+    width: 3rem;
+    height: 3rem;
+    background-color: $red;
+    transition: $transition1;
+    cursor: pointer;
+    position: relative;
+    border-radius: 100%;
+    svg {
+        @include center-a-element();
+    }
+
+    &.prev {
+        svg {
+            left: 45%;
+        }
+    }
+    &.next {
+        svg {
+            left: 55%;
+        }
+    }
+    @media (hover: hover) {
+        &:hover {
+            background-color: $redhover;
+        }
+    }
+}
+
+.m-button-close {
+    background-color: $red;
+    width: 4.4rem;
+    height: 4.4rem;
+    border-radius: 100%;
+    transition: $transition1;
+    cursor: pointer;
+    position: relative;
+    svg {
+        transition: transform 0.4s ease;
+        @include center-a-element();
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $redhover;
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
+
+//TODO estos se hicieron en un principio pero no estan bien
+.m-button {
+    display: block;
+    width: max-content;
+    @include text-button-box();
+    text-align: center;
+    box-sizing: border-box;
+    padding: 1.1rem;
+    color: $white;
+    background-color: $red;
+    border-radius: 0.4rem;
+    transition: $transition1;
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $redhover;
+        }
+    }
+
+    @media #{$mobile} {
+        min-width: unset;
+        max-width: 33rem;
+        width: 100%;
+        font-size: 1.6rem;
+    }
+}
+
+.m-button2 {
+    display: block;
+    width: max-content;
+    @include text-button-box();
+    text-align: center;
+    box-sizing: border-box;
+    padding: 1.1rem;
+    color: $white;
+    border-radius: 0.4rem;
+    transition: $transition1;
+    background-color: transparent;
+    border: 0.1rem solid $white;
+
+    @include button-colors;
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $redhover;
+        }
+    }
+
+    @media #{$mobile} {
+        min-width: unset;
+        max-width: 33rem;
+        width: 100%;
+        font-size: 1.6rem;
+    }
+}