card drawer show amount for free delivery

main
alexanderroese 2024-06-19 08:52:54 +02:00
parent 12f505fc2b
commit 0e8a8f4cb3
2 changed files with 39 additions and 15 deletions

View File

@ -416,7 +416,7 @@ cart-drawer-items::-webkit-scrollbar-track-piece {
}
}
.shx-shipping-costs-progress {
.shx-shipping-costs-progress-bar-container {
margin: 50px auto;
padding: 2px;
width: 100%;
@ -425,18 +425,42 @@ cart-drawer-items::-webkit-scrollbar-track-piece {
height: 30px;
}
.shx-shipping-costs-progress-bar {
height: 100%;
width: 0%;
background-color: #05e35e;
animation: fill-bar 3s;
.shx-shipping-costs-progress-bar-container progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #378c2c;
border-radius: 23px;
width: 100%;
margin: 0px auto;
height: 10px;
}
@keyframes fill-bar {
from {
width: 0%;
}
to {
width: 100%;
}
.shx-shipping-costs-progress-bar-container progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.shx-shipping-costs-progress-bar-container progress:not([value]) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.shx-shipping-costs-progress-bar-container progress::-webkit-progress-bar {
background: #fff;
border-radius: 23px;
width: 100%;
margin: 0px auto;
height: 10px;
}
.shx-shipping-costs-progress-bar-container progress::-webkit-progress-value {
background: green;
border-radius: 23px;
-webkit-transition: width 5s ease;
-moz-transition: width 5s ease;
-o-transition: width 5s ease;
transition: width 5s ease;
}

View File

@ -91,8 +91,8 @@
</span>
</div>
<div class="shx-shipping-costs-progress">
<div class="shx-shipping-costs-progress-bar"></div>
<div class="shx-shipping-costs-progress-bar-container">
<progress value="45" max="100"></progress>
</div>
{% endif %}