Product detail and header

1 files changed, 220 insertions, 0 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 00000000..763a6d39
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,220 @@
+@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;
+
+html, body {
+    @apply max-w-full;
+    @apply text-base;
+    @apply text-gray-900;
+}
+
+@layer base {
+    h1, .h1 {
+        @apply text-lg; 
+        @apply font-semibold;
+        @apply text-gray-900;
+    }
+
+    a {
+        @apply font-medium;
+        @apply text-yellow-900;
+    }
+}
+
+@layer components {
+    .badge-red {
+        @apply text-xs;
+        @apply font-medium;
+        @apply px-1;
+        @apply py-0.5;
+        @apply rounded;
+        @apply bg-red-300;
+        @apply text-red-900;
+    }
+
+    .badge-yellow {
+        @apply text-xs;
+        @apply font-medium;
+        @apply px-1;
+        @apply py-0.5;
+        @apply rounded;
+        @apply bg-yellow-300;
+        @apply text-yellow-900;
+    }
+
+    .form-label {
+        @apply text-sm;
+        @apply mb-1;
+        @apply block;
+    }
+
+    .form-input {
+        @apply p-3;
+        @apply rounded;
+        @apply border;
+        @apply border-gray-300;
+        @apply bg-transparent;
+        @apply w-full;
+        @apply leading-none;
+    }
+
+    .btn-primary {
+        @apply p-3;
+        @apply bg-yellow-900;
+        @apply border-yellow-900;
+        @apply rounded;
+        @apply border;
+        @apply text-white;
+        @apply text-center;
+        @apply disabled:bg-yellow-700;
+        @apply disabled:border-yellow-700;
+    }
+
+    .btn-light {
+        @apply p-3;
+        @apply bg-gray-100;
+        @apply border-gray-300;
+        @apply rounded;
+        @apply border;
+        @apply text-gray-900;
+        @apply text-center;
+    }
+
+    .product-card {
+        @apply w-full;
+        @apply h-full;
+        @apply border;
+        @apply border-gray-300;
+        @apply rounded;
+        @apply relative;
+        @apply flex;
+        @apply flex-col;
+    }
+
+    .product-card__image {
+        @apply w-full;
+        @apply h-[160px];
+        @apply object-contain;
+        @apply object-center;
+        @apply border-b;
+        @apply border-gray-300;
+    }
+
+    .product-card__description {
+        @apply p-2;
+        @apply pb-3;
+        @apply flex;
+        @apply flex-col;
+        @apply flex-1;
+        @apply justify-between;
+    }
+
+    .product-card__title {
+        @apply text-sm;
+        @apply text-gray-900;
+    }
+
+    .product-card__brand {
+        @apply text-sm;
+    }
+}
+
+@layer utilities {
+    .wrap-line-ellipsis-2 {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    .wrap-line-ellipsis-3 {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.menu-wrapper {
+    @apply fixed;
+    @apply top-0;
+    @apply left-0;
+    @apply bg-white;
+    @apply w-[85%];
+    @apply h-full;
+    @apply z-[60];
+    @apply py-4;
+    @apply px-4;
+    @apply overflow-y-auto;
+    @apply translate-x-[-100%];
+    @apply ease-linear;
+    @apply duration-150;
+}
+
+.menu-wrapper.active{
+    @apply translate-x-0;
+}
+
+.menu-overlay {
+    @apply fixed;
+    @apply top-0;
+    @apply left-0;
+    @apply w-full;
+    @apply h-full;
+    @apply z-[55];
+    @apply bg-gray-900/60;
+}
+
+.sticky-header {
+    @apply px-4; 
+    @apply py-3;
+    @apply bg-white;
+    @apply border-b;
+    @apply sticky;
+    @apply top-0;
+    @apply shadow;
+    @apply z-50;
+}
+
+.content-container {
+    @apply max-w-full;
+    @apply overflow-x-hidden;
+}
+
+#indoteknik_toast {
+    @apply fixed;
+    @apply bottom-4;
+    @apply translate-y-[200%];
+    @apply left-[50%];
+    @apply translate-x-[-50%];
+    @apply z-[100];
+    @apply flex;
+    @apply items-center;
+    @apply p-4;
+    @apply mb-4;
+    @apply w-[90%];
+    @apply text-gray-500;
+    @apply bg-white;
+    @apply border;
+    @apply border-gray-300;
+    @apply rounded-lg;
+    @apply shadow;
+    @apply ease-linear;
+    @apply duration-300;
+}
+
+#indoteknik_toast.active {
+    @apply translate-y-0;
+}
+
+.category-menu {
+    @apply hidden;
+}
+
+.swiper-slide {
+    @apply !h-auto;
+}
\ No newline at end of file