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 {
|
&-totalizers.totalizers {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 346px;
|
|
||||||
float: none;
|
float: none;
|
||||||
|
|
||||||
.coupon-data {
|
.coupon-data {
|
||||||
@ -825,6 +824,62 @@
|
|||||||
display: none;
|
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-coupon-add,
|
||||||
.link-choose-more-products {
|
.link-choose-more-products {
|
||||||
color: $clr-common-black;
|
color: $clr-common-black;
|
||||||
@ -834,12 +889,35 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cart-more-options {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.srp-container,
|
.srp-container,
|
||||||
.cart-more-options,
|
.cart-more-options,
|
||||||
.cart-more-options .srp-data {
|
.cart-more-options .srp-data {
|
||||||
width: 100%;
|
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 {
|
.srp-postal-code__form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -853,7 +931,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ship-postalCode {
|
.ship-postalCode {
|
||||||
width: 58%;
|
|
||||||
width: 62.682215743%;
|
width: 62.682215743%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@ -865,7 +942,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.srp-pc-input {
|
.srp-pc-input {
|
||||||
width: 42%;
|
|
||||||
width: 34.985422741%;
|
width: 34.985422741%;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
@ -879,13 +955,160 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cart-more-options {
|
||||||
.srp-container {
|
.srp-container {
|
||||||
|
padding: 0;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cart-links-bottom {
|
.cart-links-bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
margin-bottom: 43.42px;
|
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