summaryrefslogtreecommitdiff
path: root/src/styles/globals.css
diff options
context:
space:
mode:
authorRafi Zadanly <zadanlyr@gmail.com>2023-02-22 14:00:00 +0700
committerRafi Zadanly <zadanlyr@gmail.com>2023-02-22 14:00:00 +0700
commit7265295454801c1d921385a4b67fb3780b46771e (patch)
treea45e7c0add3641d6a234c3b610adc72a08631616 /src/styles/globals.css
parent757b69f4d814ec4890c209f7a9fdf3d9940157d9 (diff)
fix
Diffstat (limited to 'src/styles/globals.css')
-rw-r--r--src/styles/globals.css238
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;
+}