update
This commit is contained in:
@@ -77,6 +77,7 @@
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 40px 48px;
|
||||
position: relative;
|
||||
font-family: var(--carei-font);
|
||||
@@ -93,13 +94,13 @@
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--carei-gray);
|
||||
color: #B0B0B0;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.carei-modal-close:hover {
|
||||
color: var(--carei-blue);
|
||||
color: #808080;
|
||||
}
|
||||
.carei-modal-title {
|
||||
font-family: var(--carei-font);
|
||||
@@ -140,7 +141,7 @@
|
||||
}
|
||||
.carei-form__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--carei-gap-inner);
|
||||
}
|
||||
.carei-form__row--top {
|
||||
@@ -217,6 +218,137 @@
|
||||
color: var(--carei-gray);
|
||||
}
|
||||
|
||||
/* Floating label for text inputs */
|
||||
.carei-form__float-wrap {
|
||||
position: relative;
|
||||
height: var(--carei-input-h);
|
||||
background: var(--carei-white);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--carei-radius);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.carei-form__float-wrap:focus-within {
|
||||
border-color: var(--carei-blue);
|
||||
}
|
||||
.carei-form__float-label {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-family: var(--carei-font);
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: var(--carei-gray);
|
||||
pointer-events: none;
|
||||
transition: top 0.15s, font-size 0.15s, transform 0.15s;
|
||||
z-index: 1;
|
||||
}
|
||||
.carei-form__float-label--static {
|
||||
position: static;
|
||||
transform: none;
|
||||
font-size: 11px;
|
||||
padding: 6px 16px 0;
|
||||
display: block;
|
||||
}
|
||||
.carei-form__input--float {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding: 0 16px !important;
|
||||
z-index: 2;
|
||||
}
|
||||
.carei-form__input--float:not(:placeholder-shown) ~ .carei-form__float-label,
|
||||
.carei-form__input--float:focus ~ .carei-form__float-label {
|
||||
top: 8px;
|
||||
transform: none;
|
||||
font-size: 10px;
|
||||
}
|
||||
.carei-form__input--float:not(:placeholder-shown),
|
||||
.carei-form__input--float:focus {
|
||||
padding-top: 16px !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Date input with floating label */
|
||||
.carei-form__date-wrap {
|
||||
position: relative;
|
||||
height: var(--carei-input-h);
|
||||
background: var(--carei-white);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--carei-radius);
|
||||
transition: border-color 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carei-form__date-wrap:focus-within {
|
||||
border-color: var(--carei-blue);
|
||||
}
|
||||
.carei-form__date-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--carei-blue);
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
.carei-form__date-label {
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-family: var(--carei-font);
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: var(--carei-gray);
|
||||
pointer-events: none;
|
||||
transition: top 0.15s, font-size 0.15s, transform 0.15s;
|
||||
z-index: 3;
|
||||
}
|
||||
.carei-form__date-wrap.has-value .carei-form__date-label {
|
||||
top: 7px;
|
||||
transform: none;
|
||||
font-size: 10px;
|
||||
}
|
||||
.carei-form__input--date {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
height: 100% !important;
|
||||
width: 100%;
|
||||
padding: 0 12px 0 36px !important;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
/* Pusty: ukryj natywny tekst i zablokuj interakcję z polami wewnętrznymi */
|
||||
.carei-form__input--date.is-empty {
|
||||
color: transparent !important;
|
||||
z-index: 1;
|
||||
}
|
||||
.carei-form__input--date.is-empty::-webkit-datetime-edit {
|
||||
color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/* Wypełniony: przesuń wartość w dół pod label */
|
||||
.carei-form__date-wrap.has-value .carei-form__input--date {
|
||||
padding-top: 14px !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
/* Ukryj natywną ikonę kalendarza przeglądarki */
|
||||
.carei-form__input--date::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Select wrapper */
|
||||
.carei-form__select-wrap {
|
||||
position: relative;
|
||||
@@ -263,16 +395,30 @@
|
||||
═══════════════════════════════════════════ */
|
||||
.carei-form__phone-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: var(--carei-white);
|
||||
border-radius: var(--carei-radius);
|
||||
border: 1px solid transparent;
|
||||
transition: border-color 0.2s;
|
||||
height: var(--carei-input-h);
|
||||
padding: 4px 0 0;
|
||||
}
|
||||
.carei-form__phone-wrap:focus-within {
|
||||
border-color: var(--carei-blue);
|
||||
}
|
||||
.carei-form__phone-label {
|
||||
font-family: var(--carei-font);
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: var(--carei-gray);
|
||||
padding: 0 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
.carei-form__phone-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.carei-form__phone-prefix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -295,8 +441,10 @@
|
||||
color: var(--carei-gray);
|
||||
}
|
||||
.carei-form__input--phone {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
height: 100%;
|
||||
padding-left: 12px;
|
||||
}
|
||||
@@ -305,7 +453,7 @@
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.carei-form__input--phone:focus {
|
||||
border: none;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
@@ -397,35 +545,205 @@
|
||||
padding: 16px;
|
||||
background: var(--carei-white);
|
||||
transition: border-color 0.2s;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carei-form__extra-card:has(input:checked) {
|
||||
border-color: var(--carei-blue);
|
||||
}
|
||||
.carei-form__checkbox-label--card {
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.carei-form__extra-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carei-form__extra-content strong {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--carei-blue);
|
||||
word-break: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
.carei-form__extra-desc {
|
||||
font-size: 12px;
|
||||
color: var(--carei-gray);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
display: none;
|
||||
}
|
||||
.carei-form__extra-price {
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: var(--carei-gray);
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.carei-form__checkbox-label--abroad {
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--carei-red);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
Abroad Country Search
|
||||
═══════════════════════════════════════════ */
|
||||
.carei-abroad {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.carei-abroad__input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--carei-border);
|
||||
border-radius: var(--carei-radius);
|
||||
background: var(--carei-white);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.carei-abroad__input-wrap:focus-within {
|
||||
border-color: var(--carei-blue);
|
||||
}
|
||||
.carei-abroad__plus-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--carei-blue);
|
||||
}
|
||||
.carei-abroad__input {
|
||||
flex: 1;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
font-family: 'Albert Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--carei-blue);
|
||||
line-height: 48px;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.carei-abroad__input::placeholder {
|
||||
font-weight: 400;
|
||||
color: #C7C7C7;
|
||||
}
|
||||
.carei-abroad__clear {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
color: #B0B0B0;
|
||||
border-radius: 50%;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.carei-abroad__clear:hover {
|
||||
color: var(--carei-gray);
|
||||
}
|
||||
.carei-abroad__input-wrap.has-text .carei-abroad__clear {
|
||||
display: flex;
|
||||
}
|
||||
.carei-abroad__results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.carei-abroad__results:empty {
|
||||
display: none;
|
||||
}
|
||||
.carei-abroad__selected {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.carei-abroad__selected:empty {
|
||||
display: none;
|
||||
}
|
||||
.carei-abroad__card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 56px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--carei-radius);
|
||||
background: var(--carei-white);
|
||||
transition: background-color 0.2s, border-color 0.2s;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carei-abroad__card:hover {
|
||||
background: #2F24820D;
|
||||
}
|
||||
.carei-abroad__card--selected,
|
||||
.carei-abroad__card--selected:hover {
|
||||
background: rgba(47, 36, 130, 0.05);
|
||||
border-color: rgba(47, 36, 130, 0.2);
|
||||
}
|
||||
.carei-abroad__flag {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.carei-abroad__name {
|
||||
flex: 1;
|
||||
font-family: 'Albert Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--carei-blue);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.carei-abroad__price {
|
||||
text-align: right;
|
||||
color: #505050;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.carei-abroad__price-small {
|
||||
font-size: 10px;
|
||||
}
|
||||
.carei-abroad__price-val {
|
||||
font-size: 14px;
|
||||
}
|
||||
.carei-abroad__action {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--carei-blue);
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
border-radius: 50%;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.carei-abroad__results,
|
||||
.carei-abroad__selected {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
|
||||
Reference in New Issue
Block a user