Working on inputs

workadventure · May 21, 2024 · a1e37b6 · a1e37b6
1 parent 1c5086f
commit a1e37b6
Show file tree

Hide file tree

Showing 6 changed files with 707 additions and 87 deletions.
diff --git a/example/index.html b/example/index.html
diff --git a/example/src/style.css b/example/src/style.css
@@ -8,3 +8,28 @@ Override Tailwind's default color palette
     --neutral-100: 0 89% 21%;
 }
 */
+.chip,
+.btn:not(.btn-border) {
+    --squircle-smooth: 1;
+    --squircle-radius: 8px;
+    mask-image: paint(squircle);
+}
+.btn.btn-border {
+    border: none !important;
+    position: relative;
+}
+.btn.btn-border:after {
+    content: "";
+    display: block;
+    position: absolute;
+    z-index:0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    --squircle-smooth: 1;
+    --squircle-radius: 8px;
+    mask-image: paint(squircle);
+    --squircle-outline: 1.05px;
+    background: #4156F6;
+}
diff --git a/src/base/index.scss b/src/base/index.scss
@@ -141,3 +141,4 @@ h6,
 .subtitle {
     @apply text-neutral text-center m-0;
 }
+
diff --git a/src/components/buttons.scss b/src/components/buttons.scss
@@ -116,34 +116,58 @@
 
         &.btn-primary {
             @apply border-primary text-primary stroke-primary fill-primary;
+            &:after {
+                @apply bg-primary;
+            }
         }
 
         &.btn-secondary {
             @apply border-secondary text-secondary hover:bg-secondary-600/10 stroke-secondary fill-secondary;
+            &:after {
+                @apply bg-secondary;
+            }
         }
 
         &.btn-contrast {
             @apply border-contrast text-contrast hover:bg-contrast/10 stroke-contrast fill-contrast;
+            &:after {
+                @apply bg-contrast;
+            }
         }
 
         &.btn-neutral {
             @apply border-neutral text-neutral hover:bg-neutral-800/10 stroke-neutral fill-neutral;
+            &:after {
+                @apply bg-neutral;
+            }
         }
 
         &.btn-danger {
             @apply border-danger text-danger hover:bg-danger-800/10 stroke-danger fill-danger;
+            &:after {
+                @apply bg-danger;
+            }
         }
 
         &.btn-warning {
             @apply border-warning text-warning hover:bg-warning-600/10 stroke-warning fill-warning;
+            &:after {
+                @apply bg-warning;
+            }
         }
 
         &.btn-success {
             @apply border-success text-success hover:bg-success-800/10 stroke-success fill-success;
+            &:after {
+                @apply bg-success;
+            }
         }
 
         &.btn-light {
             @apply border-white text-white hover:bg-white/10 stroke-white fill-white;
+            &:after {
+                @apply bg-white;
+            }
         }
     }
 

diff --git a/src/components/inputs.scss b/src/components/inputs.scss
@@ -1,5 +1,5 @@
 .input-text {
-    @apply outline-none h-[52px] bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all ;
+    @apply outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-50 disabled:bg-contrast-200;
 
     &.input-text-lg {
         @apply h-13 text-lg;
@@ -8,7 +8,26 @@
         @apply h-10 text-sm;
     }
     &.input-text-xs {
-        @apply h-8 text-sm;
+        @apply h-8 text-sm rounded;
+    }
+    &.input-text-light {
+        @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200;
+    }
+}
+
+.input-search {
+    @apply outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-6 rounded-full text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all;
+    &.input-search-lg {
+        @apply h-13 text-lg;
+    }
+    &.input-search-sm {
+        @apply h-10 text-sm px-3;
+    }
+    &.input-search-xs {
+        @apply h-8 text-sm rounded px-3;
+    }
+    &.input-search-light {
+        @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100;
     }
 }
 

diff --git a/src/components/tailwind.config.ts b/src/components/tailwind.config.ts
@@ -3,6 +3,7 @@ import responsiveRegex from "../lib/responsiveRegex";
 import colors from "../theming/colors";
 import fontFamily from "../theming/fontFamily";
 import base from "../../dist/style/base";
+import utilities from "../../dist/style/utilities";
 import { Config } from "tailwindcss";
 import opacity from "../theming/opacity";
 
@@ -14,6 +15,15 @@ export default {
             height: {
                 "13": "3.25rem",
             },
+            borderRadius: {
+                none: "0",
+                sm: "4px",
+                DEFAULT: "8px",
+                md: "12px",
+                lg: "16px",
+                xl: "32px",
+                full: "9999px",
+            },
             opacity,
             fontSize: {
                 xxs: ["11px", { lineHeight: "1rem" }],
Original file line number	Diff line number	Diff line change
Expand Up		@@ -141,3 +141,4 @@ h6,
		.subtitle {
		@apply text-neutral text-center m-0;
		}