assets/css/scss/lsx-customizer.scss
@import "include-media";
@import "customizer-customizer-body-colours";
@mixin fa-icon() {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Checkout layout
// Structure
article.page {
.page-template-default:not(.has-sidebar).woocommerce-page.lsx-wc-checkout-layout-default
& {
.entry-content {
.woocommerce {
> * {
max-width: 1020px;
margin-left: auto;
margin-right: auto;
}
}
}
}
.page-template-default:not(.has-sidebar).woocommerce-page.lsx-wc-checkout-layout-two-column-addreses
& {
.entry-content {
.woocommerce {
> * {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
}
}
.page-template-default:not(.has-sidebar).woocommerce-page.lsx-wc-checkout-layout-stacked
& {
@include media(">=tablet") {
width: 750px !important;
}
.col2-set {
clear: both;
float: none;
width: 100%;
.col-1 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 5.8823529412%;
width: 41.1764705882%;
}
.form-row-last {
float: right;
margin-right: 0;
width: 52.9411764706%;
}
}
.col-2 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 5.8823529412%;
width: 41.1764705882%;
}
.form-row-last {
float: right;
margin-right: 0;
width: 52.9411764706%;
}
}
}
#order_review_heading {
clear: both;
float: none;
width: 100%;
}
#order_review {
clear: both;
float: none;
width: 100%;
}
#primary:not([class*="-8"]) {
.col2-set {
clear: both;
float: none;
width: 100%;
.col-1 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 4.347826087%;
width: 47.8260869565%;
}
.form-row-last {
float: right;
margin-left: 0;
margin-right: 0;
width: 47.8260869565%;
}
}
.col-2 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 4.347826087%;
width: 47.8260869565%;
}
.form-row-last {
float: right;
margin-left: 0;
margin-right: 0;
width: 47.8260869565%;
}
}
}
#order_review_heading {
clear: both;
float: none;
width: 100%;
}
#order_review {
clear: both;
float: none;
width: 100%;
}
}
}
.lsx-wc-checkout-layout-stacked {
.col2-set {
clear: both;
float: none;
width: 100%;
.col-1 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 5.8823529412%;
width: 41.1764705882%;
}
.form-row-last {
float: right;
margin-right: 0;
width: 52.9411764706%;
}
}
.col-2 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 5.8823529412%;
width: 41.1764705882%;
}
.form-row-last {
float: right;
margin-right: 0;
width: 52.9411764706%;
}
}
}
#order_review_heading {
clear: both;
float: none;
width: 100%;
}
#order_review {
clear: both;
float: none;
width: 100%;
}
#primary:not([class*="-8"]) {
.col2-set {
clear: both;
float: none;
width: 100%;
.col-1 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 4.347826087%;
width: 47.8260869565%;
}
.form-row-last {
float: right;
margin-left: 0;
margin-right: 0;
width: 47.8260869565%;
}
}
.col-2 {
float: none;
width: 100%;
.form-row-first {
float: left;
margin-right: 4.347826087%;
width: 47.8260869565%;
}
.form-row-last {
float: right;
margin-left: 0;
margin-right: 0;
width: 47.8260869565%;
}
}
}
#order_review_heading {
clear: both;
float: none;
width: 100%;
}
#order_review {
clear: both;
float: none;
width: 100%;
}
}
}
.lsx-wc-checkout-layout-two-column-addreses {
.col2-set {
width: 100%;
float: none;
&:after {
clear: both;
content: "";
display: table;
}
.col-1 {
float: left;
margin-right: 5.8823529412%;
width: 41.1764705882%;
}
.col-2 {
float: right;
margin-left: 0;
margin-right: 0;
width: 52.9411764706%;
}
.form-row-first {
float: none;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.form-row-last {
float: none;
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
&.lsx-wc-checkout-two-steps {
.woocommerce {
max-width: 900px !important;
margin-left: auto;
margin-right: auto;
}
.checkout {
.lsx-checkout-slides {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
}
#order_review_heading {
float: none;
width: 100%;
}
#order_review {
float: none;
width: 100%;
}
#primary:not([class*="-8"]) {
.col2-set {
float: none;
width: 100%;
.col-1 {
float: left;
margin-right: 4.347826087%;
width: 47.8260869565%;
}
.col-2 {
float: right;
margin-left: 0;
margin-right: 0;
width: 47.8260869565%;
}
}
#order_review_heading {
float: none;
width: 100%;
}
#order_review {
float: none;
width: 100%;
}
}
}
}
// Checkout steps
.lsx-wc-checkout-steps {
font-size: 18px;
margin-bottom: 4.2rem;
}
.lsx-wc-checkout-steps-items {
display: flex;
justify-content: center;
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
.lsx-wc-checkout-steps-item {
margin-right: 10px;
white-space: nowrap;
&:last-child {
margin-right: 0;
}
.fa-check-circle {
font-size: 30px;
margin-right: 5px;
vertical-align: middle;
@include media("<phone") {
border-radius: 50%;
line-height: 35px;
height: 35px;
position: relative;
text-align: center;
width: 35px;
&:before {
position: relative;
z-index: 2;
}
&:after {
border-radius: 50%;
content: "";
height: 21px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 21px;
z-index: 1;
}
}
}
& > span,
a > span {
display: inline-block;
line-height: 30px;
vertical-align: middle;
@include media("<phone") {
span {
display: none;
}
}
}
&:not(.lsx-wc-checkout-steps-item-done) {
@include media("<phone") {
.fa-check-circle {
display: none;
}
& > span,
a > span {
@include fa-icon();
&:before {
border-radius: 50%;
display: inline-block;
font-size: 90%;
height: 35px;
line-height: 35px;
text-align: center;
width: 35px;
}
}
}
}
.fa-angle-right {
font-size: 30px;
margin-left: 10px;
margin-right: 5px;
vertical-align: middle;
}
}
.lsx-wc-checkout-steps-item-current {
}
.lsx-wc-checkout-steps-item-disabled {
}
.lsx-wc-checkout-steps-item-cart {
@include media("<phone") {
&:not(.lsx-wc-checkout-steps-item-done) {
& > span,
a > span {
&:before {
content: "\f291";
}
}
}
}
}
.lsx-wc-checkout-steps-item-payment {
@include media("<phone") {
&:not(.lsx-wc-checkout-steps-item-done) {
& > span,
a > span {
&:before {
content: "\f09d";
}
}
}
}
}
.lsx-wc-checkout-steps-item-thankyou {
@include media("<phone") {
&:not(.lsx-wc-checkout-steps-item-done) {
& > span,
a > span {
&:before {
content: "\f118";
}
}
}
}
}
.lsx-wc-checkout-steps-counter {
border-radius: 50%;
display: inline-block;
font-size: 16px;
font-style: normal;
height: 26px;
line-height: 26px;
margin-right: 5px;
text-align: center;
vertical-align: middle;
width: 26px;
@include media("<tablet") {
display: none;
}
}
.lsx-wc-checkout-steps-link {
display: inline-block;
vertical-align: middle;
}
// Extra HTML
.lsx-wc-cart-extra-html {
margin-bottom: 4.25rem;
width: 100%;
@include media(">=phone") {
float: left;
margin-bottom: 0;
width: 48%;
}
}
.lsx-wc-checkout-extra-html {
}
// Main menu
.lsx-wc-my-account-menu-item {
& > a {
&:after {
@include fa-icon();
content: "\f007";
float: right;
font-size: 20px;
margin-left: 2rem;
#top-menu & {
margin-left: 1.2rem;
}
}
}
&.lsx-wc-my-account-menu-item-simple {
& > a {
&:before {
@include fa-icon();
content: "\f007";
float: right;
font-size: 20px;
margin-right: 0.5rem;
#top-menu & {
float: none;
margin-right: 0;
}
}
@include media(">=desktop") {
&:after,
span {
display: none;
}
}
}
}
&.lsx-wc-my-account-menu-item-right-aligned {
@include media(">=desktop") {
margin-left: auto;
}
& + .lsx-wc-cart-menu-item-right-aligned {
@include media(">=desktop") {
margin-left: 0;
}
}
}
&.lsx-wc-my-account-login {
& > a {
&:after {
content: "\f090";
}
}
&.lsx-wc-my-account-menu-item-simple {
& > a {
&:before {
content: "\f090";
}
}
}
}
}
ul.lsx-wc-my-account-sub-menu {
.lsx-wc-my-account-menu-item-simple & {
display: none !important;
}
}
.checkout {
&.lsx-wc-checkout-distraction-free {
#masthead {
> .container {
justify-content: center;
.primary-navbar,
#searchform {
display: none !important;
}
}
}
.breadcrumbs-container,
#top-menu,
.checkout-cta-bottom,
.lsx-wc-checkout-steps {
display: none;
}
&.using-gutenberg {
#primary {
.entry-content {
padding-top: 0;
}
}
}
&:not(.using-gutenberg) {
#primary {
margin-top: 0;
}
}
}
&.lsx-wc-checkout-two-steps {
.woocommerce {
margin-bottom: 8.4rem;
}
.lsx-checkout-slides {
margin: 0;
padding: 0;
//overflow: hidden;
margin-bottom: 8.4rem;
.lsx-two-step-checkout {
clear: both;
margin-left: 0;
padding-left: 0;
.col2-set,
#order_review {
width: 100%;
}
> li {
&:not(:first-child) {
display: none;
-webkit-backface-visibility: hidden;
}
&:not(.flex-active-slide) {
display: none !important;
}
}
.lsx-customizer-addresses {
}
#order_review_heading {
display: none;
}
.order-review {
#order_review_heading {
display: block;
width: 100%;
}
}
}
}
.lsx-checkout-slides {
.lsx-checkout-control-nav {
margin-left: 0;
text-align: center;
padding: 1em 0 3.632em;
margin-bottom: 2.618em;
li:first-child {
a:before {
content: "";
display: block;
height: 4px;
width: 50%;
position: absolute;
bottom: -1.1em;
right: 0;
}
}
li:nth-child(2) {
a:before {
content: "";
display: block;
height: 4px;
width: 50%;
position: absolute;
bottom: -1.1em;
left: 0;
}
a:before {
background-color: #ebebeb;
}
a.flex-active:before {
background-color: #d7d7d7;
}
}
li {
display: inline-block;
margin: 0 -2px;
position: relative;
width: 50%;
&:before {
display: block;
font-weight: 700;
}
a:after {
display: block;
content: "";
width: 1em;
height: 1em;
position: absolute;
bottom: -1.5em;
left: 50%;
margin-left: -0.5em;
border-radius: 100%;
box-sizing: border-box;
background-color: #ffffff;
border: 4px solid #d7d7d7;
}
a:before {
background-color: #d7d7d7;
}
a {
cursor: default;
color: inherit;
}
}
}
.flex-disabled {
display: none !important;
}
}
.flex-direction-nav {
margin: 1rem 0;
clear: both;
position: relative;
z-index: 9;
padding: 0;
li {
list-style: none;
a {
width: 100%;
//font-size: 18px !important;
}
&:first-child {
float: left;
a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f30a";
margin-right: 0.53em;
}
}
&:nth-child(2) {
float: right;
a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f30b";
margin-left: 0.53em;
}
}
}
a {
cursor: pointer;
}
}
}
}
@include customizer-customizer-body-colours(
#f6f6f6,
#dadddf,
#4a4a4a,
#418ad0,
#f7ae00,
#919191
);