105 lines
2.8 KiB
SCSS
105 lines
2.8 KiB
SCSS
|
// Import Bootstrap functions, variables, and mixins
|
||
|
|
@import '../bootstrap-5.3.8/scss/functions';
|
||
|
|
@import '../bootstrap-5.3.8/scss/variables';
|
||
|
|
@import '../bootstrap-5.3.8/scss/mixins';
|
||
|
|
|
||
|
|
// Definir colores personalizados - Actualizados a azules/grises
|
||
|
|
$custom-colors: (
|
||
|
|
'purple-1': #A34FAF,
|
||
|
|
'purple-2': #7B3686,
|
||
|
|
'purple-3': #B973C8,
|
||
|
|
'purple-4': #B698CB,
|
||
|
|
'white-1': #F5F0F5,
|
||
|
|
'white-2': #FBF3D5,
|
||
|
|
'coral': #EFBA92,
|
||
|
|
'gray-1': #DCDCDC,
|
||
|
|
'gray-2': #ABB4B7,
|
||
|
|
'pink-1': #CF4B97,
|
||
|
|
'pink-2': #FFD0EE,
|
||
|
|
'pink-3': #FF3983,
|
||
|
|
'blue-1': #8A7CD1,
|
||
|
|
'verde-1': #72a581,
|
||
|
|
'blue-2': #010068
|
||
|
|
);
|
||
|
|
|
||
|
|
// Colores base principales - Purpuras profesionales
|
||
|
|
$primary: #A34FAF; // Purpural corporativo moderno
|
||
|
|
$secondary: #7B3686; // Purpura (mantenido como acento)
|
||
|
|
|
||
|
|
// Variaciones del primario - Escala de azules
|
||
|
|
$primary-light: lighten($primary, 15%);
|
||
|
|
$primary-lighter: lighten($primary, 30%);
|
||
|
|
$primary-dark: darken($primary, 15%);
|
||
|
|
$primary-darker: darken($primary, 25%);
|
||
|
|
|
||
|
|
// Variaciones del secundario - Coral
|
||
|
|
$secondary-light: lighten($secondary, 10%);
|
||
|
|
$secondary-lighter: lighten($secondary, 20%);
|
||
|
|
$secondary-dark: darken($secondary, 10%);
|
||
|
|
$secondary-darker: darken($secondary, 20%);
|
||
|
|
|
||
|
|
// Colores adicionales - Armonía azul/gris
|
||
|
|
$success: #a4d65e; // Teal (mantenido para consistencia)
|
||
|
|
$danger: #fe5000; // Rojo vibrante pero sofisticado
|
||
|
|
$warning: #f39c12; // Ámbar en lugar de dorado
|
||
|
|
$info: #3498db; // Azul brillante
|
||
|
|
$light: #f8f9fa; // Gris muy claro
|
||
|
|
$dark: #000000; // Azul noche
|
||
|
|
$muted: #7f8c8d; // Gris neutro
|
||
|
|
$white: #ffffff; // Blanco puro
|
||
|
|
|
||
|
|
// Combinar colores en $theme-colors
|
||
|
|
$theme-colors: map-merge(('primary': $primary,
|
||
|
|
'primary-light': $primary-light,
|
||
|
|
'primary-lighter': $primary-lighter,
|
||
|
|
'primary-dark': $primary-dark,
|
||
|
|
'primary-darker': $primary-darker,
|
||
|
|
'secondary': $secondary,
|
||
|
|
'secondary-light': $secondary-light,
|
||
|
|
'secondary-lighter': $secondary-lighter,
|
||
|
|
'secondary-dark': $secondary-dark,
|
||
|
|
'secondary-darker': $secondary-darker,
|
||
|
|
'success': $success,
|
||
|
|
'danger': $danger,
|
||
|
|
'warning': $warning,
|
||
|
|
'info': $info,
|
||
|
|
'light': $light,
|
||
|
|
'dark': $dark,
|
||
|
|
'muted': $muted,
|
||
|
|
'white': $white,
|
||
|
|
),
|
||
|
|
$custom-colors);
|
||
|
|
|
||
|
|
// Configuración de fondo y texto
|
||
|
|
$body-bg: $white;
|
||
|
|
$body-color: #000000; // Azul/gris oscuro para texto
|
||
|
|
|
||
|
|
// Configuración de Swiper - Actualizada a azules
|
||
|
|
:root {
|
||
|
|
--swiper-theme-color: $primary;
|
||
|
|
--swiper-navigation-color: $primary;
|
||
|
|
--swiper-pagination-color: $primary;
|
||
|
|
--swiper-pagination-bullet-inactive-color: map-get($custom-colors, 'gris-6');
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
|
||
|
|
&-button-prev,
|
||
|
|
&-button-next {
|
||
|
|
&:hover {
|
||
|
|
color: $primary-dark;
|
||
|
|
background: rgba($light, 0.9);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-pagination-bullet-active {
|
||
|
|
background: $primary;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-scrollbar-drag {
|
||
|
|
background: $primary;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Import Bootstrap components
|
||
|
|
@import '../bootstrap-5.3.8/scss/bootstrap';
|