Skip to content
Code-Schnipsel Gruppen Projekte
Commit b31dbde2 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

fix: enhanced design and animations for contact information editing

Übergeordneter d080792f
Keine zugehörigen Branchen gefunden
Keine zugehörigen Tags gefunden
2 Merge Requests!24Next,!23Dev
.quiqqer-order-step-shipping {
.quiqqer-order-step-shipping-list { --_shipping-order-listEntry-padding: var(--shipping-order-listEntry-padding, var(--_order-listEntry-padding, 1rem));
display: inline-block; --_shipping-order-listEntry-bg: var(--shipping-order-listEntry-bg, var(--_order-listEntry-bg, transparent));
width: 100%; --_shipping-order-listEntry-bg--hover: var(--shipping-order-listEntry-bg--hover, var(--_order-listEntry-bg--hover, #f8f8f8));
--_shipping-order-listEntry-radius: var(--shipping-order-listEntry-radius, var(--_order-listEntry-radius, 0.25rem));
--_shipping-order-listEntry-gap: var(--shipping-order-listEntry-gap, var(--_order-listEntry-gap, 2rem));
--_shipping-order-listEntry-spacing: var(--shipping-order-listEntry-spacing, var(--_order-listEntry-spacing, .5rem));
} }
.quiqqer-order-step-shipping form { .quiqqer-order-step-shipping form {
margin-top: 20px; margin-top: 1rem;
} }
.quiqqer-order-step-shipping-list-entry { .quiqqer-order-step-shipping-list-entry {
align-content: stretch;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
clear: both;
cursor: pointer; cursor: pointer;
display: flex; display: grid;
display: -webkit-flex; grid-template-columns: auto max(25%, 150px) 1fr auto;
flex-direction: row; grid-template-areas: 'select icon text price';
-webkit-flex-direction: row; gap: var(--_shipping-order-listEntry-gap);
-webkit-align-content: stretch; padding: var(--_shipping-order-listEntry-padding);
position: relative; border-radius: var(--_shipping-order-listEntry-radius);
width: 100%; }
.quiqqer-order-step-shipping-list-entry:not(:last-child) {
margin-bottom: var(--_shipping-order-listEntry-spacing, 0.25rem);
} }
.quiqqer-order-step-shipping-list-entry-select { .quiqqer-order-step-shipping-list-entry-select {
grid-area: select;
align-items: center; align-items: center;
display: flex; display: flex;
flex: 1;
-webkit-flex: 1;
justify-content: center;
padding: 20px;
text-align: center; text-align: center;
width: 80px;
} }
.quiqqer-order-step-shipping-list-entry:hover { .quiqqer-order-step-shipping-list-entry-select input {
background: rgba(0, 0, 0, 0.1); margin: 0;
} }
.quiqqer-order-step-shipping-list-entry-selected .quiqqer-order-step-shipping-list-entry-select { .quiqqer-order-step-shipping-list-entry:hover,
background: #75b947; .quiqqer-order-step-shipping-list-entry.selected {
background-color: var(--_shipping-order-listEntry-bg--hover);
} }
.quiqqer-order-step-shipping-list-entry-icon { .quiqqer-order-step-shipping-list-entry-icon {
float: left; grid-area: icon;
padding: 20px;
width: 25%;
} }
.quiqqer-order-step-shipping-list-entry-icon img { .quiqqer-order-step-shipping-list-entry-icon img {
...@@ -52,64 +50,40 @@ ...@@ -52,64 +50,40 @@
} }
.quiqqer-order-step-shipping-list-entry-text { .quiqqer-order-step-shipping-list-entry-text {
float: left; grid-area: text;
padding: 20px;
width: calc(75% - 80px);
} }
.quiqqer-order-step-shipping-list-entry-text label { .quiqqer-order-step-shipping-list-entry-text label {
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: var(--qui-fs-md, 1.125rem);
font-weight: bold; font-weight: bold;
} }
.quiqqer-order-step-shipping-list-entry-text-description { .quiqqer-order-step-shipping-list-entry-text-description {
font-size: 14px; font-size: var(--qui-fs-base, 1rem);
}
.quiqqer-order-step-shipping-list-entry-text-description > p:last-child {
margin-bottom: 0;
} }
.quiqqer-order-step-shipping-list-entry-price { .quiqqer-order-step-shipping-list-entry-price {
padding: 20px; grid-area: price;
font-size: 1.125rem;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.quiqqer-order-step-shipping-list-entry { .quiqqer-order-step-shipping-list-entry {
clear: both; grid-template-areas:
display: block !important; "select icon"
float: left; ". text"
margin-bottom: 20px; ". price";
padding-top: 10px; grid-template-columns: 1.5rem 1fr;
} gap: 0 1rem;
.quiqqer-order-step-shipping-list-entry:last-child {
border: none;
} }
.quiqqer-order-step-shipping-list-entry.selected { .quiqqer-order-step-shipping-list-entry.selected {
background: rgba(0, 0, 0, 0.1); background-color: var(--quiqqer-order-shipping-entry-selected, rgba(0, 0, 0, 0.05));
}
.quiqqer-order-step-shipping-list-entry-select {
display: none !important;
}
.quiqqer-order-step-shipping-list-entry-icon,
.quiqqer-order-step-shipping-list-entry-text,
.quiqqer-order-step-shipping-list-entry-text-description {
width: 100% !important;
}
.quiqqer-order-step-shipping-list-entry-icon {
padding: 0 10px !important;
text-align: left;
}
.quiqqer-order-step-shipping-list-entry-text,
.quiqqer-order-step-shipping-list-entry-price {
padding: 10px;
}
.quiqqer-order-step-shipping-list-entry-text-description p {
margin-bottom: 0;
} }
} }
......
.quiqqer-shipping-address { .quiqqer-shipping-address {
display: block;
clear: both;
float: left;
margin-top: 20px; margin-top: 20px;
width: 100%;
} }
.quiqqer-shipping-address [name="shipping-address"] { .quiqqer-shipping-address [name="shipping-address"] {
......
0% Lade oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren