diff options
Diffstat (limited to 'src2/styles')
| -rw-r--r-- | src2/styles/globals.css | 468 |
1 files changed, 468 insertions, 0 deletions
diff --git a/src2/styles/globals.css b/src2/styles/globals.css new file mode 100644 index 00000000..b871a325 --- /dev/null +++ b/src2/styles/globals.css @@ -0,0 +1,468 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +* { + -webkit-tap-highlight-color: transparent; +} + +html, body { + @apply + w-screen + text-body-2 + text-gray_r-12 + bg-gray_r-1 + overflow-x-clip + ; +} + +@layer base { + 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; + } + + h1, .h1 { + @apply + text-h-md + font-semibold + ; + } + + h2, .h2 { + @apply + text-body-2 + font-semibold + leading-6 + ; + } + + a { + @apply + font-medium + text-red_r-11 + ; + } +} + +@layer components { + .badge-red, + .badge-solid-red, + .badge-gray, + .badge-yellow, + .badge-blue, + .badge-green, + .badge-solid-green { + @apply + text-caption-2 + leading-none + font-medium + px-1 + py-1 + rounded + w-fit + ; + } + + .badge-red { + @apply + bg-red_r-5 + text-red_r-10 + ; + } + + .badge-solid-red { + @apply + bg-red_r-10 + text-white + ; + } + + .badge-gray { + @apply + bg-gray_r-5 + text-gray_r-10 + ; + } + + .badge-yellow { + @apply + bg-yellow_r-3 + text-yellow_r-11 + ; + } + + .badge-blue { + @apply + bg-blue-200 + text-blue-600 + ; + } + + .badge-green { + @apply + bg-green_r-5 + text-green_r-10 + ; + } + + .badge-solid-green { + @apply + bg-green_r-10 + text-white + ; + } + + .form-label { + @apply + font-medium + block + ; + } + + .form-input { + @apply + p-3 + rounded + border + text-gray_r-12 + border-gray_r-7 + bg-transparent + w-full + leading-none + focus:outline-none + focus:border-yellow_r-9 + disabled:bg-gray_r-5 + ; + } + + .form-input[aria-invalid] { + @apply + border-red_r-10 + focus:border-red_r-10 + ; + } + + .btn-yellow, + .btn-light, + .btn-red, + .btn-solid-red, + .btn-green { + @apply + block + w-fit + py-3 + px-6 + rounded + border + text-center + font-medium + ease-linear + duration-150 + ; + } + + .btn-yellow { + @apply + bg-yellow_r-9 + border-yellow_r-9 + disabled:text-gray_r-10 + disabled:bg-yellow_r-7 + disabled:border-yellow_r-7 + ; + } + + .btn-red { + @apply + bg-red_r-3 + border-red_r-6 + text-red_r-11 + disabled:text-red_r-10 + disabled:bg-red_r-6 + ; + } + + .btn-solid-red { + @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 + ; + } + + .btn-green { + @apply + bg-green_r-3 + border-green_r-6 + text-green_r-11 + disabled:text-green_r-10 + disabled:bg-green_r-6 + ; + } + + .btn-light { + @apply + bg-gray_r-3 + border-gray_r-6 + disabled:text-gray_r-10 + disabled:bg-gray_r-6 + ; + } + + .product-card { + @apply + w-full + h-full + border + border-gray_r-3 + shadow + bg-white + rounded + relative + flex + flex-col + ; + } + + .product-card__image { + @apply + w-full + h-[160px] + object-contain + object-center + border-b + border-gray_r-6 + ; + } + + .product-card__content { + @apply + p-2 + pb-3 + flex-1 + ; + } + + .product-card__title { + @apply + text-caption-1 + text-gray_r-12 + leading-5 + ; + } + + .product-card__brand { + @apply + text-caption-1 + mb-1 + block + ; + } +} + +@layer utilities { + .wrap-line-ellipsis-1, + .wrap-line-ellipsis-2, + .wrap-line-ellipsis-3 { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + + .wrap-line-ellipsis-1 { + -webkit-line-clamp: 1; + } + + .wrap-line-ellipsis-2 { + -webkit-line-clamp: 2; + } + + .wrap-line-ellipsis-3 { + -webkit-line-clamp: 3; + } +} + +.menu-wrapper { + @apply + fixed + top-0 + left-0 + bg-white + w-[80%] + h-full + z-[60] + overflow-y-auto + translate-x-[-100%] + ease-linear + duration-150 + ; +} + +.menu-wrapper.active{ + @apply translate-x-0; +} + +.menu-overlay { + @apply + fixed + top-0 + left-0 + w-full + h-full + z-[55] + bg-gray_r-12/40 + ; +} + +.sticky-header { + @apply + px-4 + py-3 + bg-gray_r-1/90 + backdrop-blur-lg + sticky + top-0 + border-b + border-gray_r-7 + z-50 + ; +} + +.content-container { + @apply + max-w-full + overflow-x-hidden + ; +} + +#indoteknik_toast { + @apply + fixed + bottom-4 + translate-y-[200%] + left-[50%] + translate-x-[-50%] + z-[100] + flex + items-center + p-4 + mb-4 + w-[90%] + text-gray-500 + bg-white + border + border-gray-300 + rounded-lg + shadow + ease-linear + duration-300 + ; +} + +#indoteknik_toast.active { + @apply translate-y-0; +} + +.category-menu { + @apply hidden; +} + +.swiper-slide { + @apply !h-auto; +} + +.lazy-load-image-background { + @apply + !block + w-full + ; +} + +.swiper-pagination-bullet-active { + @apply !bg-red_r-11; +} + +.pagination { + @apply + flex + justify-center + gap-x-1 + ; +} + +.pagination-item { + @apply + p-1 + flex + justify-center + items-center + w-10 + rounded + ease-linear + duration-150 + border + border-gray_r-6 + bg-gray_r-3 + hover:bg-gray_r-5 + text-gray_r-12 + ; +} + +.pagination-item--active { + @apply + border-yellow_r-9 + bg-yellow_r-9 + ; +} + +.pagination-dots { + @apply + p-1 + flex + justify-center + items-end + w-10 + rounded + ease-linear + bg-gray_r-3 + text-caption-2 + ; +} + +.idt-transition { + @apply + transition-all + ease-linear + duration-300 + ; +} + +.form-select__placeholder { + @apply + !text-gray_r-9 + ; +} + +.form-select__control { + @apply + !shadow-none + !border-gray_r-7 + ; +} + +.form-select__control--menu-is-open { + @apply + !border-yellow_r-9 + ; +}
\ No newline at end of file |