finalized styling of checkout order informations page

This commit is contained in:
2021-01-06 22:04:53 +01:00
parent d9ccca3a5e
commit 2cb5a3c5b4
9 changed files with 274 additions and 11 deletions

View File

@@ -1422,7 +1422,8 @@ header[role="banner"] {
font-weight: 300; }
body:not(.path-home) header[role="banner"] #block-pagetitle h2 {
padding: 0.5em 1em; }
body.path-blabla header[role="banner"] #block-pagetitle h2 {
body.path-blabla header[role="banner"] #block-pagetitle h2,
body.path-checkout header[role="banner"] #block-pagetitle h2 {
color: #fff;
background-color: #9458aa; }
body.path-showrooms header[role="banner"] #block-pagetitle h2 {
@@ -2233,6 +2234,29 @@ article.card {
order: 2;
background-color: #ff9f50;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main label,
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main legend {
color: #fff; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main fieldset {
border: none;
margin: 0;
padding: 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main fieldset legend {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0.5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item {
margin: 0 0 0.5em 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main label {
display: inline-block;
font-weight: bold;
min-width: 10em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main input[type="text"] {
width: 20em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-billing-information-address-0-address-address-line2 {
padding-left: 10.25em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-main .form-item-payment-information-billing-information-copy-to-address-book {
display: none; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary {
width: 100%;
float: none;
@@ -2241,14 +2265,62 @@ article.card {
display: none; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary {
background-color: #69cdcf;
color: #fff;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary .view-commerce-checkout-order-summary {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-end; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary .field--name-product-id .field--name-title {
font-size: 2.5em;
font-weight: 800; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary .field--name-title {
font-size: 1.5em;
font-weight: 600; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-order-summary p {
margin: 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption {
background-color: #50aa3c;
padding: 1em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption input[type="text"] {
width: 5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper {
display: flex;
flex-flow: row;
align-items: center; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper .form-item {
margin: 0 0.5em 0 0; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper .form-item label {
color: #fff;
font-size: 1.5em;
font-weight: 600;
margin-right: 0.5em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper .form-item input[type="text"] {
width: 7em; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-secondary #edit-coupon-redemption > .form-wrapper input[type="submit"] {
background-color: #fff;
color: #50aa3c;
border: none;
margin: 0;
padding: 0.1em 0.7em;
box-sizing: content-box;
height: 2em;
font-weight: 800;
border-radius: 5px; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer {
float: none;
width: 100%;
padding: 0;
order: 3; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer #edit-actions {
text-align: right; }
#main-content form.commerce-checkout-flow .layout-checkout-form .layout-region-checkout-footer input#edit-actions-next {
background-color: #9458aa;
color: #fff;
border: none;
border-radius: 5px;
padding: 0.2em 0.4em 0.3em;
font-weight: 600;
font-size: 1.323em; }
body:not(.path-home) footer[role="contentinfo"] {
display: none; }

File diff suppressed because one or more lines are too long