diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 14:00:00 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 14:00:00 +0700 |
| commit | 7265295454801c1d921385a4b67fb3780b46771e (patch) | |
| tree | a45e7c0add3641d6a234c3b610adc72a08631616 /src/styles/globals.css | |
| parent | 757b69f4d814ec4890c209f7a9fdf3d9940157d9 (diff) | |
fix
Diffstat (limited to 'src/styles/globals.css')
| -rw-r--r-- | src/styles/globals.css | 238 |
1 files changed, 83 insertions, 155 deletions
diff --git a/src/styles/globals.css b/src/styles/globals.css index f4c726e8..5ba9e902 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -8,14 +8,13 @@ -webkit-tap-highlight-color: transparent; } -html, body { - @apply - w-screen +html, +body { + @apply w-screen text-body-2 text-gray_r-12 bg-gray_r-1 - overflow-x-clip - ; + overflow-x-clip; } button { @@ -23,14 +22,14 @@ button { } @layer base { - input[type="number"]::-webkit-inner-spin-button, - input[type="number"]::-webkit-outer-spin-button { + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } - input[type=number] { - -moz-appearance:textfield; + input[type='number'] { + -moz-appearance: textfield; } } @@ -42,94 +41,73 @@ button { .badge-blue, .badge-green, .badge-solid-green { - @apply - text-[11px] + @apply text-[11px] leading-none font-medium px-1 py-1 rounded - w-fit - ; + w-fit; } .badge-red { - @apply - bg-red_r-5 - text-red_r-10 - ; + @apply bg-red_r-5 + text-red_r-10; } .badge-solid-red { - @apply - bg-red_r-10 - text-white - ; + @apply bg-red_r-10 + text-white; } .badge-gray { - @apply - bg-gray_r-5 - text-gray_r-10 - ; + @apply bg-gray_r-5 + text-gray_r-10; } .badge-yellow { - @apply - bg-yellow_r-3 - text-yellow_r-11 - ; + @apply bg-yellow_r-3 + text-yellow_r-11; } .badge-blue { - @apply - bg-blue-200 - text-blue-600 - ; + @apply bg-blue-200 + text-blue-600; } .badge-green { - @apply - bg-green_r-5 - text-green_r-10 - ; + @apply bg-green_r-5 + text-green_r-10; } - + .badge-solid-green { - @apply - bg-green_r-10 - text-white - ; + @apply bg-green_r-10 + text-white; } .form-label { - @apply - font-medium - block - ; + @apply font-medium + block; } .form-input { - @apply - p-3 + @apply p-3 rounded border text-gray_r-12 border-gray_r-7 + bg-white bg-transparent w-full leading-none focus:outline-none focus:border-yellow_r-9 - disabled:bg-gray_r-5 - ; + disabled:bg-gray_r-5; } .form-input[aria-invalid] { - @apply - border-red_r-10 - focus:border-red_r-10 - ; + @apply border-red_r-10 + focus:border-red_r-10; } .btn-yellow, @@ -137,8 +115,7 @@ button { .btn-red, .btn-solid-red, .btn-green { - @apply - block + @apply block w-fit py-3 px-6 @@ -147,63 +124,51 @@ button { text-center font-medium ease-linear - duration-150 - ; + duration-150; } .btn-yellow { - @apply - bg-yellow_r-9 + @apply bg-yellow_r-9 border-yellow_r-9 disabled:text-gray_r-10 disabled:bg-yellow_r-7 - disabled:border-yellow_r-7 - ; + disabled:border-yellow_r-7; } .btn-red { - @apply - bg-red_r-3 + @apply bg-red_r-3 border-red_r-6 text-red_r-11 disabled:text-red_r-10 - disabled:bg-red_r-6 - ; + disabled:bg-red_r-6; } .btn-solid-red { - @apply - bg-red_r-11 + @apply bg-red_r-11 border-red_r-11 text-gray_r-1 disabled:text-gray_r-1 disabled:bg-red_r-8 - disabled:border-red_r-8 - ; + disabled:border-red_r-8; } .btn-green { - @apply - bg-green_r-3 + @apply bg-green_r-3 border-green_r-6 text-green_r-11 disabled:text-green_r-10 - disabled:bg-green_r-6 - ; + disabled:bg-green_r-6; } .btn-light { - @apply - bg-gray_r-3 + @apply bg-gray_r-3 border-gray_r-6 disabled:text-gray_r-10 - disabled:bg-gray_r-6 - ; + disabled:bg-gray_r-6; } .product-card { - @apply - w-full + @apply w-full h-full border border-gray_r-3 @@ -212,43 +177,34 @@ button { rounded relative flex - flex-col - ; + flex-col; } .product-card__image { - @apply - w-full + @apply w-full h-[160px] object-contain object-center border-b - border-gray_r-6 - ; + border-gray_r-6; } .product-card__content { - @apply - p-2 + @apply p-2 pb-3 - flex-1 - ; + flex-1; } .product-card__title { - @apply - text-caption-1 + @apply text-caption-1 text-gray_r-12 - leading-5 - ; + leading-5; } .product-card__brand { - @apply - text-caption-1 + @apply text-caption-1 mb-1 - block - ; + block; } } @@ -269,15 +225,14 @@ button { .wrap-line-ellipsis-2 { -webkit-line-clamp: 2; } - + .wrap-line-ellipsis-3 { -webkit-line-clamp: 3; } } .menu-wrapper { - @apply - fixed + @apply fixed top-0 left-0 bg-white @@ -287,29 +242,25 @@ button { overflow-y-auto translate-x-[-100%] ease-linear - duration-150 - ; + duration-150; } -.menu-wrapper.active{ +.menu-wrapper.active { @apply translate-x-0; } .overlay { - @apply - fixed + @apply fixed top-0 left-0 w-full h-full z-[55] - bg-gray_r-12/40 - ; + bg-gray_r-12/40; } .sticky-header { - @apply - px-4 + @apply px-4 py-3 bg-gray_r-1/90 backdrop-blur-lg @@ -317,20 +268,16 @@ button { top-0 border-b border-gray_r-7 - z-50 - ; + z-50; } .content-container { - @apply - max-w-full - overflow-x-hidden - ; + @apply max-w-full + overflow-x-hidden; } #indoteknik_toast { - @apply - fixed + @apply fixed bottom-4 translate-y-[200%] left-[50%] @@ -348,8 +295,7 @@ button { rounded-lg shadow ease-linear - duration-300 - ; + duration-300; } #indoteknik_toast.active { @@ -365,10 +311,8 @@ button { } .lazy-load-image-background { - @apply - !block - w-full - ; + @apply !block + w-full; } .swiper-pagination-bullet-active { @@ -376,16 +320,13 @@ button { } .pagination { - @apply - flex + @apply flex justify-center - gap-x-1 - ; + gap-x-1; } .pagination-item { - @apply - p-1 + @apply p-1 flex justify-center items-center @@ -397,20 +338,16 @@ button { border-gray_r-6 bg-gray_r-3 hover:bg-gray_r-5 - text-gray_r-12 - ; + text-gray_r-12; } .pagination-item--active { - @apply - border-yellow_r-9 - bg-yellow_r-9 - ; + @apply border-yellow_r-9 + bg-yellow_r-9; } .pagination-dots { - @apply - p-1 + @apply p-1 flex justify-center items-end @@ -418,33 +355,24 @@ button { rounded ease-linear bg-gray_r-3 - text-caption-2 - ; + text-caption-2; } .idt-transition { - @apply - transition-all + @apply transition-all ease-out - duration-200 - ; + duration-200; } .form-select__placeholder { - @apply - !text-gray_r-9 - ; + @apply !text-gray_r-9; } .form-select__control { - @apply - !shadow-none - !border-gray_r-7 - ; + @apply !shadow-none + !border-gray_r-7; } .form-select__control--menu-is-open { - @apply - !border-yellow_r-9 - ; -}
\ No newline at end of file + @apply !border-yellow_r-9; +} |
