Refactor

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