Skip to content

Commit

Permalink
Fix styles of add_to_wishlist button.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tyronejosee
tyronejosee committed Apr 5, 2024
1 parent 998b574 commit 4fd206f
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 82 deletions.
98 changes: 49 additions & 49 deletions static/css/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,55 +32,55 @@

/* Scrollbar: Dark */
.dark ::-webkit-scrollbar {
width: 12px;
width: 12px;
height: 12px;
background-color: #262626;
}

.dark ::-webkit-scrollbar-track {
background-color: #262626;
border-radius: 12px;
background-color: #262626;
border-radius: 12px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}

.dark ::-webkit-scrollbar-thumb {
background-color: #525252;
border-radius: 12px;
background-color: #525252;
border-radius: 12px;
}

.dark ::-webkit-scrollbar-thumb:hover {
background-color: #dc2626;
background-color: #dc2626;
}

/* Scrollbar: Light */
.light ::-webkit-scrollbar {
width: 12px;
width: 12px;
height: 12px;
background-color: #e5e5e5;
}

.light ::-webkit-scrollbar-track {
background-color: #e5e5e5;
border-radius: 12px;
background-color: #e5e5e5;
border-radius: 12px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}

.light ::-webkit-scrollbar-thumb {
background-color: #a3a3a3;
border-radius: 12px;
background-color: #a3a3a3;
border-radius: 12px;
}

.light ::-webkit-scrollbar-thumb:hover {
background-color: #dc2626;
background-color: #dc2626;
}

@layer components{
@layer components {

/* Containers */
.container__main {
Expand Down Expand Up @@ -112,7 +112,7 @@
.headline {
@apply font-bold text-2xl lg:text-3xl;
}

.sub-headline {
@apply font-bold text-xl lg:text-2xl;
}
Expand All @@ -128,7 +128,7 @@

.type-base--bold {
@apply font-bold;
}
}

.type-base--url {
@apply font-bold hover:underline focus:text-primary;
Expand All @@ -143,27 +143,27 @@
}

/* Icons */
.icon--sm{
.icon--sm {
@apply w-4 h-4;
}
.icon--md{

.icon--md {
@apply w-8 h-8;
}

.icon--lg{
.icon--lg {
@apply w-12 h-12;
}

/* Navbar */
.navbar {
@apply bg-white dark:bg-neutral-900 sticky top-0 z-30 border-b border-neutral-100 dark:border-neutral-800;
}

.navbar__wrapper {
@apply max-w-screen-xl mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between p-4;
}

/* Details */
.product-detail {
@apply grid gap-4 grid-cols-1 md:grid-cols-2;
Expand All @@ -172,25 +172,25 @@
.product-detail__content {
@apply flex flex-col h-full space-y-4;
}

.product-detail__title {
@apply relative flex items-center mb-4 overflow-hidden;
}

.product-detail__tab {
@apply flex items-center justify-center type-base--url h-10 box w-full;
}

/* Deal */
.deal {
@apply grid gap-4 grid-cols-1 md:grid-cols-2;
}
.deal__header{

.deal__header {
@apply md:flex md:items-center md:space-x-4 my-4;
}
.deal__img{

.deal__img {
@apply w-full h-64 object-cover rounded-xl;
}

Expand All @@ -200,7 +200,7 @@
}

.list__itm-title {
@apply type-base--bold block px-4 py-2;
@apply type-base--bold text-primary block px-4 py-2;
}

.list__itm {
Expand Down Expand Up @@ -237,7 +237,7 @@
.btn__scroll {
@apply shadow p-4 fixed z-50 bottom-4 right-4 bg-primary hover:bg-red-700 text-white focus:ring-red-300 rounded-xl;
}

.btn__icon {
@apply flex items-center justify-center px-2 py-2 rounded-lg bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-neutral-800 dark:text-neutral-200 focus:ring-white;
}
Expand All @@ -254,35 +254,35 @@
.form__wrapper {
@apply max-w-screen-sm px-4 mx-auto;
}

.form__header {
@apply flex flex-col items-center p-4;
}

.form__label {
@apply block space-y-2;
}

.form__input-text {
@apply bg-neutral-100 dark:bg-neutral-800 rounded-xl block w-full h-10 px-4 focus:outline-none focus:ring focus:ring-primary placeholder-neutral-400 text-sm dark:placeholder-neutral-600;
}

.form__input-text--readonly {
@apply bg-neutral-100 dark:bg-neutral-800 rounded-xl block w-full h-10 px-4 focus:outline-none focus:ring focus:ring-neutral-500 text-sm dark:text-neutral-500;
}

.form__input-file {
@apply block w-full file:mr-4 file:h-10 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-neutral-100 file:text-primary hover:file:bg-neutral-200;
}

.form__input-number {
@apply bg-neutral-100 dark:bg-neutral-800 rounded-xl block w-full h-10 px-4 focus:outline-none focus:ring focus:ring-primary placeholder-neutral-400 dark:placeholder-neutral-600;
@apply bg-neutral-100 dark:bg-neutral-800 rounded-xl block w-full h-10 px-4 focus:outline-none focus:ring focus:ring-primary placeholder-neutral-400 dark:placeholder-neutral-600;
}

.form__input-select {
@apply bg-neutral-100 dark:bg-neutral-800 w-full rounded-xl h-10 px-4 focus:outline-none focus:ring focus:ring-primary;
}

.form__input-checkbox {
@apply w-4 h-4 accent-primary rounded-md;
}
Expand All @@ -299,23 +299,23 @@
.data-table {
@apply overflow-x-auto rounded-xl h-[500px] bg-neutral-100 dark:bg-neutral-800;
}

.data-table__wrapper {
@apply w-full text-left;
}

.data-table__head {
@apply sticky top-0 type-base--bold bg-neutral-200 dark:bg-neutral-700 z-10;
}

.data-table__body {
@apply hover:bg-neutral-200 dark:hover:bg-neutral-700;
}

.data-table__cell {
@apply px-4 h-10 truncate;
}

.data-table__cell--big {
@apply px-4 h-20;
}
Expand All @@ -328,19 +328,19 @@
.product-card {
@apply grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:md:grid-cols-6;
}

.product-card__wrapper {
@apply box relative p-2;
}

.product-card__img {
@apply w-full h-auto rounded-2xl bg-white aspect-square;
}

.product-card__content {
@apply flex justify-between items-center space-y-4 mt-2;
@apply flex justify-between items-center py-1 mt-2;
}

.product-card__title {
@apply h-14 overflow-hidden;
}
Expand Down Expand Up @@ -370,7 +370,7 @@
.checkout__img {
@apply overflow-hidden rounded-xl cursor-copy;
}

.checkout__content {
@apply flex flex-col h-full;
}
Expand All @@ -392,7 +392,7 @@
@apply flex justify-center items-center mt-4 md:mt-0 space-x-4;
}


.hover-scale {
transition: transform 0.3s ease;
}
Expand Down
30 changes: 4 additions & 26 deletions static/css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -924,6 +924,8 @@ video {
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
}

.list__itm {
Expand Down Expand Up @@ -1594,12 +1596,8 @@ video {
display: flex;
align-items: center;
justify-content: space-between;
}

.product-card__content > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}

.product-card__title {
Expand Down Expand Up @@ -2208,21 +2206,6 @@ video {
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}

.bg-neutral-600 {
--tw-bg-opacity: 1;
background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}

.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.object-cover {
-o-object-fit: cover;
object-fit: cover;
Expand Down Expand Up @@ -2495,11 +2478,6 @@ video {
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

:is(.dark .dark\:bg-red-500) {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

:is(.dark .dark\:bg-neutral-900) {
--tw-bg-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity));
Expand Down
12 changes: 5 additions & 7 deletions templates/components/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,11 @@
<span class="type-base--bold">${{ product.normal_price }}</span>
{% endif %}
</div>
<div>
<a href="{% url 'cart:add_prod_wishlist' product.id %}" title="Add to wishlist" aria-label="Add to wishlist" class="invisible group-hover:visible">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon--sm">
<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
</svg>
</a>
</div>
<a href="{% url 'cart:add_prod_wishlist' product.id %}" title="Add to wishlist" aria-label="Add to wishlist" class="invisible group-hover:visible">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon--sm">
<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
</svg>
</a>
</div>
<div class="product-card__title">
<a href="{% url 'products:detail' product.pk %}" title="{{ product.title }}">
Expand Down

0 comments on commit 4fd206f

Please sign in to comment.