body#checkout { [data-action="show-password"]{ background: $gray-dark; } .custom-checkbox { @include display(flex); span { @include flex(0 0 15px); margin-top: 2px; } em{ width: 500px; display: block; @media (max-width: 1199px){ width: 300px; } @media (max-width: 780px){ width: 240px; } } } section#content { margin-bottom: 25px; } section.checkout-step { @include box-shadow(2px 2px 11px 0px rgba(0, 0, 0, 0.1)); background-color: white; border: $main-border; padding: 15px; .step-title { text-transform: uppercase; cursor: pointer; margin-bottom: 0; } .content { padding: 0 37px; } .step-edit { text-transform: lowercase; font-weight: normal; .edit { font-size: $base-font-size; } } .not-allowed { cursor: not-allowed; @include opacity(0.5); } .content, .done, .step-edit { display: none; } &.-current { .content { display: block; } } &.-current.-reachable.-complete { .done, .step-edit { display: none; } .step-number { display: inline-block; } .content { display: block; } } &.-reachable.-complete { h1 { .done { display: inline-block; } .step-number { display: none; } .step-edit { cursor: pointer; display: block; @include rtl-float-right(); @include rtl-margin-right(2px); color: $gray; } } .content { display: none; } } small { color: $gray; } .default-input { min-width: 40%; &[name=address1], &[name=address2] { min-width: 60%; } } .radio-field { margin-top: 30px; label { display: inline; } } .checkbox-field div { margin-top: 60px; } .checkbox-field + .checkbox-field div { margin-top: 0; } .select-field div { background: $gray-lighter; padding: 10px 50px; } .form-footer { text-align: center; } #conditions-to-approve { padding-top: 16px; } .payment-options { label { display: table-cell; } .custom-radio { @include rtl-margin-right($medium-space); } .payment-option { margin-bottom: 8px; } } .step-number { display: inline-block; padding: 10px; } .address-selector { @include display(flex); @include justify-content(space-between); @include align-items(flex-start); @include flex-wrap(wrap); } .address-item { background: $gray-lighter; @include flex(0 0 49%); margin-bottom: $small-space; &.selected { background: white; border: $brand-primary 3px solid; } } .address-alias { display: inline-block; font-weight: 400; margin-bottom: 10px; } .address { @include rtl-margin-left(25px); font-weight: normal; } .radio-block { padding: 15px; @include rtl-text-align-left(); } .custom-radio { @include rtl-margin-right(0); input[type="radio"] { @include size(20px,20px); } } .delete-address, .edit-address { color: $gray; display: inline-block; margin: 0 5px; .delete, .edit { font-size: $base-font-size; } } hr { margin: 0; } .address-footer { text-align: center; padding: 10px; } #delivery-addresses, #invoice-addresses { margin-top: 20px; } .add-address { margin-top: 20px; a { color: $gray-darker; i { font-size: $font-size-lg; } } } .delivery-option { background: $gray-lighter; padding: 15px 0; margin: 0 0 25px; label { text-align: inherit; } } .carrier-delay, .carrier-name { display: inline-block; word-break: break-word; @include rtl-text-align-left(); } #customer-form, #delivery-address, #invoice-address, #login-form { margin-left: 5px; margin-top: 25px; .form-control-label { @include rtl-text-align-left(); } .radio-inline { padding: 0; } } .sign-in { font-size: $font-size-sm; } .forgot-password { margin-left: 230px; } } .additional-information { font-size: $font-size-sm; margin-top: 20px; } .condition-label { margin-left: 40px; margin-top: 10px; label { text-align: inherit; display: block; clear: none; } } .cancel-address { margin: 10px; display: block; color: $gray-dark; text-decoration: underline; } #cart-summary-product-list { img { border: $gray-light 1px solid; width: 50px; } .media-body { vertical-align: middle; } } #order-summary-content { padding-top: 15px; h4.h4 { margin-top: 10px; margin-bottom: 20px; font-size: 13px; text-transform: uppercase; } h4.black { color: #000000; } h4.addresshead { margin-top: 3px; } .noshadow { box-shadow: none; } #order-items { @include rtl-border-right(0); h3.h3 { color: $gray-darker; margin-top: 20px; } table { tr { &:first-child { td { border-top: 0; } } } } } .order-confirmation-table { padding: 1rem; margin-bottom: 2rem; background-color: #fff; border: 3px solid #e5e5e5; border-radius: 0; } .summary-selected-carrier { margin-bottom: 0.75rem; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 0; padding: 1rem; } .step-edit { display: inline; color: $gray; font-size: 0; i{ font-size: 14px; vertical-align: -2px; } } .step-edit:hover { cursor: pointer; } a { .step-edit { color: $gray; } } } #gift_message{ max-width: 100%; border-color: $gray-darker; } } /**** ORDER CONFIRMATION *****/ #order-details { padding-left: $large-space; > .card-title { margin-bottom: $large-space; } ul { margin-bottom: $medium-space; li { margin-bottom: $small-space; } } } #order-items { @include rtl-border-right($gray-light 1px solid); hr { border-top-color: $gray-darker; } table { width: 100%; tr { height: $large-space; td { &:last-child { @include rtl-text-align-right(); } } } } .order-line { margin-top: 16px; } .image { img { width: 100%; border: 1px solid gray-lighter; margin-bottom: 16px; } } .details { margin-bottom: 16px; .customizations { margin-top: 10px; } } .qty { margin-bottom: 16px; } } #order-confirmation { #registration-form { width: 50%; margin: 0 auto 16px; } } @include media-breakpoint-down(md) { .done { margin: 0; padding: 0; } body#checkout section.checkout-step .address-item { @include flex-grow(1); } body#checkout section.checkout-step .delivery-option-2 { @include flex-direction(column); } .delivery-option { @include display(flex); margin: auto; .custom-radio { @include flex(0 0 auto); } } .condition-label { label[for="conditions_to_approve[terms-and-conditions]"] { @include rtl-text-align-left(); } } #order-confirmation { #registration-form { width: 100%; } } } @include media-breakpoint-down(sm) { body#checkout section.checkout-step.-reachable.-complete h1 .step-edit { float: none; margin-top: 4px; margin-left: $medium-space; } body#checkout { #header .header-nav { max-height: none; padding: 0; } section.checkout-step { .content { padding: 15px; } } .form-group { margin-bottom: 8px; } } #order-items { @include rtl-border-right(0); margin-bottom: 40px; .card-title { border-bottom: $main-border; margin-bottom: 16px; padding-bottom: 16px; } hr { border-top-color: $gray-light; } } #order-details { padding-left: 15px; .card-title { border-bottom: $main-border; margin-bottom: 16px; padding-bottom: 16px; } } } @include media-breakpoint-down(xs) { body#checkout { section.checkout-step { .content { padding: 15px 0; } } } #payment-confirmation { button { font-size: 12px; &.btn { white-space: normal; } } } } .cart-empty { .cart-summary { } } .js-payment-binary { display: none; .accept-cgv { display: none; } &.disabled { opacity: 0.6; cursor: not-allowed; &::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .accept-cgv { display: block; } } }