Separate cart page and cart dropdown styles

This commit is contained in:
Matt-Yorkley
2020-05-21 17:50:17 +02:00
parent b4e5542e5f
commit 400fce8ef9
2 changed files with 71 additions and 140 deletions

View File

@@ -0,0 +1,71 @@
@import "mixins";
@import "branding";
@import "compass/css3/user-interface";
@import "variables";
#update-cart {
#errorExplanation {
display: none;
}
}
#cart-detail {
.cart-item-delete, .bought-item-delete {
a {
font-size: 1.125em;
}
}
.out-of-stock {
color: $clr-brick;
}
button, .button {
margin: 0;
}
.toggle-bought {
cursor: pointer;
}
tr.bought td {
color: $med-grey;
h5 {
color: $med-grey;
}
.already-confirmed {
float: right;
}
}
input {
&.ng-invalid-stock, &.ng-invalid-number {
border: 1px solid $clr-brick;
}
}
}
.item-thumb-image {
display: none;
@media screen and (min-width: 640px) {
display: inline-block;
float: left;
padding-right: 0.5em;
width: 36px;
height: 36px;
}
}
.links {
.button {
padding: 1.125rem 0 1.1875rem;
width: 210px;
@media all and (max-width: 480px) {
width: 100%;
}
}
}

View File

@@ -1,140 +0,0 @@
@import "mixins";
@import "branding";
@import "compass/css3/user-interface";
@import 'variables';
.cart {
@include user-select(none);
.cart-span, .cart-span a {
display: inline-block;
}
.cart-span {
float: left;
}
.joyride-tip-guide {
display: block;
right: 0;
top: $topbar-height;
width: 480px;
@media screen and (min-width: 641px) {
overflow-y: auto;
max-height: calc(95vh - 55px);
}
@media screen and (max-width: 640px) {
width: 96%;
}
.joyride-nub {
right: 22px !important;
left: auto;
}
table {
width: 100%;
border: none;
border-spacing: 0px;
margin-bottom: 5px;
tr.total-cart {
color: #fff;
background-color: #424242;
td {
color: #fff;
}
}
tr.product-cart {
background-color: #333333;
border-top: 1px solid #424242;
td {
padding: 4px 12px;
color: #fff;
}
}
}
.buttons {
margin-bottom: 0.1em;
.button {
height: auto;
top: 0px;
}
}
}
}
// Shopping cart
#update-cart {
#errorExplanation {
display: none;
}
}
#cart-detail {
.cart-item-delete, .bought-item-delete {
a {
font-size: 1.125em;
}
}
.out-of-stock {
color: $clr-brick;
}
button, .button {
margin: 0;
}
.toggle-bought {
cursor: pointer;
}
tr.bought td {
color: $med-grey;
h5 {
color: $med-grey;
}
.already-confirmed {
float: right;
}
}
input {
&.ng-invalid-stock, &.ng-invalid-number {
border: 1px solid $clr-brick;
}
}
}
.item-thumb-image {
display: none;
@media screen and (min-width: 640px) {
display: inline-block;
float: left;
padding-right: 0.5em;
width: 36px;
height: 36px;
}
}
.links {
.button {
padding: 1.125rem 0 1.1875rem;
width: 210px;
@media all and (max-width: 480px) {
width: 100%;
}
}
}