Skip to content

Commit

Permalink
Refactor quick-order-list.css (#3006)
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrew Etchen authored Oct 5, 2023
1 parent 5c8c151 commit 7ee3da2
Showing 1 changed file with 18 additions and 114 deletions.
132 changes: 18 additions & 114 deletions assets/quick-order-list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ quick-order-list .quantity__button {
width: calc(3.5rem / var(--font-body-scale));
}

.quick-order-list__contents {
position: relative;
}

.quick-order-list__container {
padding-bottom: 4rem;
}
Expand All @@ -28,10 +24,6 @@ quick-order-list .quantity__button {
border-top: 0.1rem solid rgba(var(--color-foreground), .08);
}

.totals__product-total {
text-align: center;
}

.variant-item__quantity .quantity:before {
z-index: 0;
}
Expand All @@ -48,15 +40,6 @@ quick-order-list .quantity__button {
background-color: rgb(var(--color-background));
}

.totals__product-total {
text-align: right;
}

.variant__items {
max-height: 90rem;
overflow-y: auto;
}

.variant-item__quantity-wrapper--no-info,
.variant-item__error {
padding-left: calc(15px + 3.4rem);
Expand Down Expand Up @@ -142,10 +125,6 @@ quick-order-list .quantity__button {
display: flex;
}

.quick-order-list__table .variant-item__inner.variant-item__inner--no-sku {
vertical-align: middle;
}

.variant-item__discounted-prices {
justify-content: flex-end;
}
Expand All @@ -161,7 +140,6 @@ quick-order-list .quantity__button {
max-width: 30rem;
}


.variant-item__info {
position: relative;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -208,12 +186,6 @@ quick-order-list .quantity__button {
font-weight: 400;
}

.product-option {
font-size: 1.4rem;
word-break: break-word;
line-height: calc(1 + 0.5 / var(--font-body-scale));
}

.variant-item__sold-out {
opacity: 0.7;
font-size: 1.6rem;
Expand All @@ -222,7 +194,7 @@ quick-order-list .quantity__button {

quick-order-list-remove-button {
display: flex;
margin-left: 1rem;
margin: 0 0 0 1.2rem;
align-self: center;
}

Expand All @@ -242,14 +214,7 @@ quick-order-list-remove-button {
margin-top: 1rem;
}

.quick-order-list-buttons {
display: flex;
justify-content: space-between;
flex-direction: column;
}

.quick-order-list-total__column {
display: flex;
flex-wrap: wrap;
}

Expand All @@ -266,18 +231,10 @@ quick-order-list-remove-button .button {
margin: 0 0.1rem 0.1rem 0;
}


quick-order-list-remove-button .button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}

@media screen and (min-width: 990px) {
quick-order-list-remove-button .button {
min-width: 1.5rem;
min-height: 1.5rem;
}
}

quick-order-list-remove-button .icon-remove {
height: 1.5rem;
width: 1.5rem;
Expand All @@ -292,6 +249,11 @@ quick-order-list-remove-button .icon-remove {
padding: 0;
}

.variant-remove-total {
position: relative;
align-self: center;
}

.variant-remove-total .button--tertiary {
width: max-content;
}
Expand All @@ -302,16 +264,16 @@ quick-order-list-remove-button .icon-remove {
margin-right: 0.8rem;
}

.quick-order-list__message svg {
margin-right: 1rem;
width: 1.3rem;
}

.quick-order-list__message {
margin-top: 1rem;
display: block;
}

.quick-order-list__message svg {
margin-right: 1rem;
width: 1.3rem;
}

.quick-order-list-error {
margin-top: 1rem;
display: flex;
Expand Down Expand Up @@ -350,11 +312,6 @@ quick-order-list-remove-button:hover .icon-remove {
text-underline-offset: 0.3rem;
}

.variant-remove-total {
position: relative;
align-self: center;
}

.variant-item .loading-overlay:not(.hidden)~*,
.variant-remove-total .loading-overlay:not(.hidden)~* {
visibility: hidden;
Expand Down Expand Up @@ -385,15 +342,6 @@ quick-order-list-remove-button:hover .icon-remove {
display: none;
}

.product-option+.product-option {
margin-top: 0.4rem;
}

.product-option * {
display: inline;
margin: 0;
}

.quick-order-list__table thead th {
text-transform: uppercase;
}
Expand Down Expand Up @@ -472,17 +420,12 @@ quick-order-list-remove-button:hover .icon-remove {
text-align: center;
}

.quick-order-list-total__column {
.quick-order-list-total__column,
.quick-order-list-buttons {
display: flex;
flex-direction: column;
align-items: center;
}

.quick-order-list-buttons {
width: 100%;
align-items: center;
display: flex;
flex-direction: column;
}

.quick-order-list__button {
Expand All @@ -497,10 +440,6 @@ quick-order-list-remove-button:hover .icon-remove {
margin-top: -2rem;
}

.quick-order-list-total__confirmation .button--tertirary {
margin-left: 2rem;
}

@media screen and (min-width: 990px) {
.quick-order-list__table {
border-spacing: 0;
Expand All @@ -514,10 +453,6 @@ quick-order-list-remove-button:hover .icon-remove {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.quick-order-list__table thead th:first-child {
width: 20%;
}

.quick-order-list__table th+th {
padding-left: 5.4rem;
}
Expand All @@ -529,16 +464,14 @@ quick-order-list-remove-button:hover .icon-remove {

.quick-order-list__table td {
padding-top: 1.6rem;
vertical-align: middle;
}

.quick-order-list__table .desktop-row-error td {
padding-top: 0;
}

.quick-order-list__table .variant-item--unit-price td {
vertical-align: top;

vertical-align: middle;
}

.variant-item {
Expand All @@ -559,37 +492,21 @@ quick-order-list-remove-button:hover .icon-remove {
margin-right: 3rem;
}

.quick-order-list-total__column {
width: 20%;
}

.quick-order-list__total-items {
width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));
margin-left: calc(15px + 3.4rem);
flex-direction: column;
}
}

quick-order-list-remove-button {
margin: 0 0 0 1.2rem;
}

@media screen and (min-width: 990px) {
.variant-item .variant-item__quantity {
padding-left: 0;
}

.quick-order-list__table thead th:first-child {
width: 37%;
}

.quick-order-list__table thead th:first-child,
.quick-order-list-total__column {
width: 37%;
}

.quick-order-list-buttons {
display: flex;
align-self: flex-start;
}

quick-order-list-remove-all-button {
Expand Down Expand Up @@ -629,21 +546,13 @@ quick-order-list-remove-button {
min-height: 10rem;
}

.quick-order-list-total {
padding-top: 2rem;
border-top: 0.1rem solid rgba(var(--color-foreground), .08);
}

.quick-order-list-total__price {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
width: min-content;
}

.quick-order-list-total__price {
flex-grow: 1;
text-align: right;
width: min-content;
}

.quick-order-list-total__price .button {
Expand All @@ -660,7 +569,6 @@ quick-order-list-remove-button {
.totals__product-total {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
align-items: center;
padding-bottom: 2rem;
Expand Down Expand Up @@ -689,22 +597,18 @@ quick-order-list-remove-button {
margin-top: 2rem;
}

.quick-order-list-total__column {
width: 100%;
}

.quick-order-list__button-confirm {
width: 100%;
max-width: 36rem;
}

quick-order-list .tax-note {
text-align: center
text-align: center;
}
}

quick-order-list .tax-note {
margin-bottom: 2rem;
margin: 0 0 2rem;
display: block;
width: 100%;
}

0 comments on commit 7ee3da2

Please sign in to comment.