forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feature/checkout-cart-fill' (#5) from feature/checkout-cart-fill into develop
Reviewed-on: #5
This commit is contained in:
commit
d8a33abb9b
@ -25,6 +25,7 @@ export default class Footer {
|
||||
this.paymentContainer = await waitElement(".footerCheckout__stamps");
|
||||
this.developedByContainer = await waitElement(".footerCheckout__developedBy");
|
||||
this.checkoutContainer = await waitElement(".container-main");
|
||||
this.self = await waitElement(".footerCheckout__prateleira");
|
||||
}
|
||||
|
||||
innerToPayments() {
|
||||
@ -86,10 +87,22 @@ export default class Footer {
|
||||
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
||||
|
||||
if (this.checkoutEmpty && this.checkoutContainer) {
|
||||
if (this.checkoutContainer.classList.contains("container-cart-fill")) {
|
||||
this.checkoutContainer.classList.remove("container-cart-fill");
|
||||
} else {
|
||||
if (this.checkoutEmpty.style.display === "none") {
|
||||
this.checkoutContainer.classList.add("container-cart-fill");
|
||||
} else {
|
||||
this.checkoutContainer.classList.remove("container-fill");
|
||||
}
|
||||
|
||||
if (
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
|
||||
let target = this.checkoutEmpty;
|
||||
@ -97,10 +110,22 @@ export default class Footer {
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
for (let i = 0; i < mutations.length; i++) {
|
||||
if (mutations[i].attributeName === "style") {
|
||||
if (this.checkoutContainer.classList.contains("container-cart-fill")) {
|
||||
this.checkoutContainer.classList.remove("container-cart-fill");
|
||||
} else {
|
||||
if (this.checkoutEmpty.style.display === "none") {
|
||||
this.checkoutContainer.classList.add("container-cart-fill");
|
||||
} else {
|
||||
this.checkoutContainer.classList.remove("container-cart-fill");
|
||||
}
|
||||
|
||||
if (
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
|
||||
break;
|
||||
@ -109,13 +134,113 @@ export default class Footer {
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
|
||||
addCarrossel() {
|
||||
$(this.self.children[1]).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
async getProducts() {
|
||||
let url = (name) => {
|
||||
let domain = "https://m3academy.myvtex.com/";
|
||||
return domain + name;
|
||||
};
|
||||
|
||||
let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
|
||||
|
||||
let response = await API.then((res) => res.json());
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
async innerToSelf() {
|
||||
let datas = await this.getProducts();
|
||||
|
||||
datas.forEach(() => {
|
||||
$(this.self.children[1]).slick("unslick");
|
||||
|
||||
this.createdCardsProducts(datas);
|
||||
|
||||
this.addCarrossel();
|
||||
});
|
||||
}
|
||||
|
||||
createdCardsProducts(data) {
|
||||
let structure = "";
|
||||
|
||||
data.forEach((data) => {
|
||||
structure += `<li>
|
||||
<div>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="${data.items[0].images[0].imageUrl}" alt="">
|
||||
</figure>
|
||||
|
||||
<h3>
|
||||
${data.productName}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
${data.items.reduce((acc, item) => {
|
||||
return (acc += `<div>
|
||||
<span>${item.name}</span>
|
||||
</div>`);
|
||||
}, "")}
|
||||
</div>
|
||||
|
||||
<a href="${data.link}">
|
||||
<span>
|
||||
Ver Produto
|
||||
</span>
|
||||
</a>
|
||||
</div></li>`;
|
||||
});
|
||||
|
||||
this.self.children[1].innerHTML = `
|
||||
${structure.trim()}
|
||||
`;
|
||||
}
|
||||
|
||||
innerSelfList() {
|
||||
this.self.innerHTML = `
|
||||
<div>
|
||||
<h2>Você também pode gostar:</h2>
|
||||
</div>
|
||||
<ul class="self-list"></ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,6 @@ function OnProgress(target) {
|
||||
<div class="progress-content">
|
||||
<p>Dados Pessoais</p>
|
||||
<span class="progress-bullet"></span>
|
||||
<span class="progress-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
.container {
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
@mixin btn-primary-blue-black() {
|
||||
border: none;
|
||||
color: $clr-common-black;
|
||||
background: $clr-primary-blue-500;
|
||||
}
|
||||
|
||||
@mixin btn-primary-blue-white() {
|
||||
border: none;
|
||||
color: $clr-common-white;
|
||||
background: $clr-primary-blue-500;
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
@ -341,6 +347,7 @@
|
||||
.summary {
|
||||
.cart-more-options {
|
||||
margin: 0;
|
||||
float: none;
|
||||
width: max-content;
|
||||
|
||||
.srp-container {
|
||||
@ -400,15 +407,10 @@
|
||||
width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: $clr-gray-600;
|
||||
border: none;
|
||||
@include btn-primary-blue-white();
|
||||
|
||||
border-radius: 5px;
|
||||
color: $clr-common-white;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
@ -444,12 +446,12 @@
|
||||
}
|
||||
|
||||
&__current {
|
||||
border: 1px solid $clr-blue-500;
|
||||
border: 1px solid $clr-common-black;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $clr-blue-500;
|
||||
color: $clr-common-black;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -481,23 +483,17 @@
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
padding: 12px 8px;
|
||||
width: 172px;
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: $clr-gray-600;
|
||||
border: none;
|
||||
@include btn-primary-blue-white();
|
||||
|
||||
border-radius: 5px;
|
||||
color: $clr-common-white;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -150px;
|
||||
top: 36px;
|
||||
transition: all 0.2s linear;
|
||||
width: 96px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
@ -590,9 +586,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-totalizers {
|
||||
&-totalizers.totalizers {
|
||||
padding: 0;
|
||||
width: 346px;
|
||||
float: none;
|
||||
|
||||
.coupon-data {
|
||||
#cart-link-coupon-add {
|
||||
@ -608,7 +604,6 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $clr-blue-500;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -673,10 +668,9 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background: $clr-gray-600;
|
||||
border: none;
|
||||
@include btn-primary-blue-white();
|
||||
|
||||
border-radius: 5px;
|
||||
color: $clr-common-white;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
@ -715,6 +709,7 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
font-family: $font-family-200;
|
||||
line-height: 16px;
|
||||
color: $clr-gray-600;
|
||||
padding: 12px 0;
|
||||
@ -731,21 +726,25 @@
|
||||
}
|
||||
|
||||
tfoot {
|
||||
td.info,
|
||||
td.monetary {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: $clr-gray-600;
|
||||
tr {
|
||||
td.info,
|
||||
td.monetary {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
font-family: $font-family-100;
|
||||
color: $clr-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-links-bottom {
|
||||
.cart-links-bottom.cart-links {
|
||||
display: flex;
|
||||
float: none;
|
||||
flex-direction: column;
|
||||
width: 343px;
|
||||
|
||||
@ -776,14 +775,13 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $clr-blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-place-order-wrapper {
|
||||
a {
|
||||
background: $clr-green-500;
|
||||
border: none;
|
||||
@include btn-primary-blue-black();
|
||||
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
@ -799,8 +797,8 @@
|
||||
font-family: $font-family-100;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: inherit;
|
||||
letter-spacing: 0.05em;
|
||||
color: $clr-common-white;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
@ -810,3 +808,307 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-cart.container-cart-fill {
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
|
||||
#cart-title {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ship-country {
|
||||
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;
|
||||
|
||||
span {
|
||||
color: $clr-common-black;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.vtex-shipping-preview-0-x-postalCodeForgotten {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ship-postalCode {
|
||||
width: 62.682215743%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.input-small {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-pc-input {
|
||||
width: 34.985422741%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.srp-data {
|
||||
margin-bottom: 48.35px;
|
||||
}
|
||||
|
||||
.totalizers {
|
||||
padding: 0 16px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,9 +10,10 @@
|
||||
background-color: $clr-common-white;
|
||||
}
|
||||
|
||||
.container-cart {
|
||||
.container-main.container-cart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 16px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -21,43 +22,37 @@
|
||||
#cart-title {
|
||||
display: none !important;
|
||||
}
|
||||
.cart-template,
|
||||
.checkout-container {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.checkout-container,
|
||||
.cart-template {
|
||||
min-height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
.checkout-container {
|
||||
width: fluid(300px, 375px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.link-choose-products {
|
||||
width: fluid(250px, 343px);
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.link-choose-products {
|
||||
width: fluid(250px, 300px);
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.transactions-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.checkout-container {
|
||||
width: fluid(400px, 1280px);
|
||||
padding: 0;
|
||||
}
|
||||
width: fluid(400px, 1280px);
|
||||
padding: 0 !important;
|
||||
max-width: none;
|
||||
|
||||
.link-choose-products {
|
||||
width: fluid(327px, 400px);
|
||||
max-width: none;
|
||||
max-width: 327px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: fluid(659px, 2500px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-cart {
|
||||
|
||||
@ -57,10 +57,6 @@ body {
|
||||
margin: 40px 0 30px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
.footerCheckout {
|
||||
padding: 16px 25px 18.88px 8px;
|
||||
|
||||
@include mq("md", min) {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
border-top: 1px solid $clr-common-black;
|
||||
color: $clr-gray-400;
|
||||
|
||||
&__wrapper {
|
||||
border-top: 1px solid $clr-common-black;
|
||||
padding: 16px 25px 18.88px 8px;
|
||||
|
||||
@include mq("md", min) {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
order: 0;
|
||||
margin: 0 0 16px;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,7 +161,7 @@ body :where(ul, li, ol) {
|
||||
.progress-item {
|
||||
&--left,
|
||||
&--right {
|
||||
width: 39.9183%;
|
||||
width: 40%;
|
||||
|
||||
.progress-line {
|
||||
position: absolute;
|
||||
@ -183,14 +183,18 @@ body :where(ul, li, ol) {
|
||||
}
|
||||
}
|
||||
|
||||
&--center {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
.progress-container {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
left: 29%;
|
||||
transform: translateX(-50%);
|
||||
right: 72%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,6 +21,8 @@ $clr-blue-500: #4267b2;
|
||||
|
||||
$clr-green-500: #4caf50;
|
||||
|
||||
$clr-primary-blue-500: #00c8ff;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xxs: 0,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user