summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAbdus <abdus@abdus.net>2021-06-14 19:15:14 +0530
committerAbdus <abdus@abdus.net>2021-06-14 19:15:14 +0530
commit84c9134725fa72b5156d5d110cec95cad5ce03aa (patch)
tree01355878d48f2264557f3e7493bd8724f16c7b1c
parente2bd0f8361ebe954456e81f9568b11321d50cca5 (diff)
downloadnextjs-eslint-typescript-template-84c9134725fa72b5156d5d110cec95cad5ce03aa.tar.bz2
nextjs-eslint-typescript-template-84c9134725fa72b5156d5d110cec95cad5ce03aa.zip
style: default styles for input fields
-rw-r--r--pages/index.tsx6
-rw-r--r--styles/globals.css30
2 files changed, 27 insertions, 9 deletions
diff --git a/pages/index.tsx b/pages/index.tsx
index 6c278fd..d7ae083 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -18,7 +18,11 @@ export default function Home() {
<Loader />
</p>
<p>
- <button type="button">click me</button>
+ <button type="button">button</button>
+ </p>
+ <p>
+ <input type="text" />
+ <textarea id="" name="" />
</p>
</Layout>
</>
diff --git a/styles/globals.css b/styles/globals.css
index 5d7d05a..7756b96 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,16 +3,21 @@
0 10px 40.8px -28px rgba(0, 0, 0, 0.035),
0 24.1px 118.1px -28px rgba(0, 0, 0, 0.046),
0 80px 141px -28px rgba(0, 0, 0, 0.07);
+ --border-radius: 0.5rem;
}
html[data-theme='light'] {
--background: ivory;
+ --background_input: #0000000d;
--foreground: #141414;
+ --border-color: var(--foreground);
}
html[data-theme='dark'] {
- --background: #141414;
+ --background: #161616;
+ --background_input: #222222;
--foreground: ivory;
+ --border-color: #25CC88;
}
html {
@@ -31,6 +36,10 @@ body {
transition: 0.3s ease background-color, 0.3s ease color;
}
+* {
+ box-sizing: border-box;
+}
+
a {
color: inherit;
text-decoration: none;
@@ -42,7 +51,7 @@ button {
font: inherit;
background-color: var(--foreground);
border: 1px solid var(--foreground);
- border-radius: 0.3rem;
+ border-radius: var(--border-radius);
cursor: pointer;
transition: 0.3s ease color, 0.3s ease background-color;
}
@@ -52,10 +61,15 @@ button:hover {
background-color: var(--background);
}
-* {
- box-sizing: border-box;
-}
-
-* {
- box-sizing: border-box;
+input,
+textarea {
+ width: 100%;
+ margin: 0.3rem 0;
+ padding: 0.7rem 1.2rem;
+ color: var(--foreground);
+ font: inherit;
+ background-color: var(--background_input);
+ border: none;
+ border-radius: var(--border-radius);
+ outline: none;
}