forked from M3-Academy/m3-academy-template-checkout
feat(cart-fill): created initial styles for table and small, large devices
This commit is contained in:
parent
5ac8c77b79
commit
015ddc2fcb
@ -588,7 +588,6 @@
|
||||
|
||||
&-totalizers.totalizers {
|
||||
padding: 0;
|
||||
width: 346px;
|
||||
float: none;
|
||||
|
||||
.coupon-data {
|
||||
@ -825,6 +824,62 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
.item-quantity-change {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #00c8ff;
|
||||
border-radius: 100%;
|
||||
|
||||
.icon-plus-sign,
|
||||
.icon-minus-sign {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $clr-common-white;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-plus-sign {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $clr-common-white;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-minus-sign {
|
||||
&::before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-coupon-add,
|
||||
.link-choose-more-products {
|
||||
color: $clr-common-black;
|
||||
@ -834,12 +889,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
.cart-more-options {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.srp-container,
|
||||
.cart-more-options,
|
||||
.cart-more-options .srp-data {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
th.shipping-date {
|
||||
font-size: 0px;
|
||||
|
||||
&::before {
|
||||
content: "Frete";
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
th.product-price {
|
||||
font-size: 0px;
|
||||
&::before {
|
||||
content: "Unidade";
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.srp-postal-code__form {
|
||||
width: 100%;
|
||||
}
|
||||
@ -853,7 +931,6 @@
|
||||
}
|
||||
|
||||
.ship-postalCode {
|
||||
width: 58%;
|
||||
width: 62.682215743%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -865,7 +942,6 @@
|
||||
}
|
||||
|
||||
.srp-pc-input {
|
||||
width: 42%;
|
||||
width: 34.985422741%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -879,13 +955,160 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cart-more-options {
|
||||
.srp-container {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-links-bottom {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 43.42px;
|
||||
|
||||
.link-choose-more-products-wrapper {
|
||||
margin: 0 0 14.91px;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-column .coupon-fields {
|
||||
span {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template .cart-items td.quantity {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
padding: 0 10px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.totalizers {
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-more-options {
|
||||
.srp-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.srp-data {
|
||||
width: 343px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template .cart-items th {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.cart-template-holder {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
width: fluid(1018px, 1280px);
|
||||
|
||||
.cart-template .cart-items td.quantity {
|
||||
margin: 6px auto 0 0;
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
.shipping-date,
|
||||
.product-price,
|
||||
.quantity-price {
|
||||
text-align: left;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template-holder {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cart-template .cart-items th {
|
||||
text-align: left;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
#cart-title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cart {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.cart-more-options {
|
||||
padding: 0;
|
||||
|
||||
.srp-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.srp-data {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row-fluid.summary {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cart-more-options {
|
||||
width: fluid(280px, 1018px);
|
||||
float: left;
|
||||
|
||||
.srp-container {
|
||||
.srp-content {
|
||||
.srp-main-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-links-bottom.cart-links {
|
||||
width: fluid(354px, 1018px);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btn-place-order-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.link-choose-more-products-wrapper {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cart-totalizers.totalizers {
|
||||
width: fluid(354px, 1018px);
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,3 +182,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout__prateleira {
|
||||
div {
|
||||
h2 {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-family: $font-family-200;
|
||||
color: $clr-common-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user