mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-24 09:40:21 +00:00
trabajando en resumen
This commit is contained in:
Jaime Jiménez
@ -7,8 +7,8 @@
|
||||
text-align: center;
|
||||
|
||||
/* Tamaño adaptable */
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
|
||||
/* Para evitar que la imagen sobresalga al hacer zoom */
|
||||
overflow: hidden;
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
/* === Imagen interna === */
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 150px;
|
||||
display: block;
|
||||
transform-origin: center center;
|
||||
@ -44,10 +44,21 @@
|
||||
|
||||
/* Keyframes para la animación */
|
||||
@keyframes zoomPop {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(0.85); }
|
||||
80% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.image-container:hover {
|
||||
@ -61,15 +72,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.gramaje-radio{
|
||||
.gramaje-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 70px; /* Ancho mínimo */
|
||||
min-height: 70px; /* Alto mínimo */
|
||||
max-width: 70px; /* Ancho máximo */
|
||||
max-height: 70px; /* Alto máximo */
|
||||
min-width: 70px;
|
||||
/* Ancho mínimo */
|
||||
min-height: 70px;
|
||||
/* Alto mínimo */
|
||||
max-width: 70px;
|
||||
/* Ancho máximo */
|
||||
max-height: 70px;
|
||||
/* Alto máximo */
|
||||
}
|
||||
|
||||
@keyframes fadeInUpBounce {
|
||||
@ -77,13 +92,16 @@
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
@ -93,4 +111,240 @@
|
||||
animation: fadeInUpBounce 0.6s ease-out both;
|
||||
animation-delay: 0.1s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.service-option {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border: 1px solid #d0d7e5;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.service-option.checked {
|
||||
border-color: #4b7bec;
|
||||
background-color: #f0f5ff;
|
||||
box-shadow: 0 0 0 2px #4b7bec inset;
|
||||
}
|
||||
|
||||
.service-option .price {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
min-height: 2.2rem;
|
||||
/* ajusta según el tamaño de fuente que uses */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-check-service+.btn {
|
||||
position: relative;
|
||||
/* <-- Esto es lo más importante */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: normal;
|
||||
line-height: 1.2;
|
||||
min-height: 180px;
|
||||
padding: 1rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
color: #4b7bec;
|
||||
border: 1px solid #4b7bec;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* ESTILO CUANDO ESTÁ MARCADO */
|
||||
.btn-check-service:checked+.btn {
|
||||
background-color: #4b7bec;
|
||||
color: #ffffff !important;
|
||||
border-color: #4b7bec;
|
||||
}
|
||||
|
||||
/* Forzamos el color blanco en los subelementos */
|
||||
.btn-check-service:checked+.btn .service-title,
|
||||
.btn-check-service:checked+.btn .service-desc,
|
||||
.btn-check-service:checked+.btn .service-price {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Forzamos el color azul cuando no está marcado */
|
||||
.btn-check-service+.btn .service-title,
|
||||
.btn-check-service+.btn .service-desc,
|
||||
.btn-check-service+.btn .service-price {
|
||||
color: #4b7bec;
|
||||
}
|
||||
|
||||
/* ribbon-service */
|
||||
.ribbon-service {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
overflow: hidden;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ribbon-service span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 120px;
|
||||
padding: 5px 0;
|
||||
background: #f25c5c;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
transform: rotate(45deg);
|
||||
top: 20px;
|
||||
right: -30px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
/* ===== Tiradas (pricing cards) ===== */
|
||||
.tirada-card {
|
||||
--il-accent: #4b7bec;
|
||||
--radius: 18px;
|
||||
--sel-scale-y: 1.12;
|
||||
/* cuánto más alta la seleccionada (crece arriba y abajo) */
|
||||
|
||||
/* círculo */
|
||||
--arc-w: 280px;
|
||||
--arc-h: 190px;
|
||||
--arc-y: -23px;
|
||||
/* tu valor */
|
||||
--arc-stop: 74%;
|
||||
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: var(--radius);
|
||||
background-color: #fff;
|
||||
background-image: radial-gradient(var(--arc-w) var(--arc-h) at 50% var(--arc-y),
|
||||
rgba(75, 126, 236, .24) 0 var(--arc-stop),
|
||||
transparent calc(var(--arc-stop) + 1%));
|
||||
|
||||
padding: 1.25rem 1.25rem 1rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
box-shadow: 0 4px 14px rgba(17, 24, 39, .06);
|
||||
overflow: hidden;
|
||||
/* integra la línea inferior */
|
||||
transform-origin: center center;
|
||||
/* ⟵ crecer hacia arriba y hacia abajo */
|
||||
will-change: transform;
|
||||
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
/* sin elevación al hover */
|
||||
.tirada-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Tipografías */
|
||||
.tirada-card .title {
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
font-size: .9rem;
|
||||
color: #4b7bec;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tirada-card .price-big {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin: .35rem 0 .15rem;
|
||||
color: #4b7bec;
|
||||
}
|
||||
|
||||
.tirada-card .per {
|
||||
font-size: .85rem;
|
||||
color: #7f8fa9;
|
||||
}
|
||||
|
||||
.tirada-card .price-row {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
.tirada-card .muted {
|
||||
color: #8e9bb3;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
/* Botón */
|
||||
.tirada-card .btn-select-tirada {
|
||||
margin-top: 1rem;
|
||||
border-radius: 999px;
|
||||
padding: .6rem 1rem;
|
||||
font-weight: 600;
|
||||
border: 2px solid var(--il-accent);
|
||||
color: var(--il-accent);
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
transition: background .2s ease, color .2s ease;
|
||||
}
|
||||
|
||||
/* ===== Seleccionada (más alta en Y, sin elevar; crece arriba y abajo) ===== */
|
||||
.tirada-card.selected {
|
||||
transform: scaleY(var(--sel-scale-y));
|
||||
/* ⟵ crecimiento simétrico vertical */
|
||||
z-index: 2;
|
||||
box-shadow: 0 18px 48px rgba(75, 126, 236, .32);
|
||||
border-color: var(--il-accent);
|
||||
|
||||
/* círculo sólido */
|
||||
background-image: radial-gradient(var(--arc-w) var(--arc-h) at 50% var(--arc-y),
|
||||
#4b7bec 0 var(--arc-stop),
|
||||
transparent calc(var(--arc-stop) + 1%));
|
||||
}
|
||||
|
||||
.tirada-card.selected:hover {
|
||||
/* evita que :hover base anule la escala */
|
||||
transform: scaleY(var(--sel-scale-y));
|
||||
}
|
||||
|
||||
.tirada-card.selected .btn-select-tirada {
|
||||
background: var(--il-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* texto en blanco dentro del círculo */
|
||||
.tirada-card.selected .title,
|
||||
.tirada-card.selected .price-big,
|
||||
.tirada-card.selected .per {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ===== Línea inferior integrada (siempre visible en NO seleccionadas) ===== */
|
||||
.tirada-card:not(.selected)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
/* dentro del borde */
|
||||
height: 8px;
|
||||
background: var(--il-accent);
|
||||
border-bottom-left-radius: calc(var(--radius) - 1px);
|
||||
border-bottom-right-radius: calc(var(--radius) - 1px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tirada-card.selected::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Oculta el radio */
|
||||
.tirada-card input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user