mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-27 01:43:22 +00:00
Separate cart page and cart dropdown styles
This commit is contained in:
71
app/assets/stylesheets/darkswarm/cart-page.css.scss
Normal file
71
app/assets/stylesheets/darkswarm/cart-page.css.scss
Normal 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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user