From e733b7ad74bc032519122a36369325e69b9e786b Mon Sep 17 00:00:00 2001
From: Y-k-Y <zzzzz.co.kr@gmail.com>
Date: Mon, 20 Jun 2022 00:56:43 +0900
Subject: [PATCH] fix: add universal input, select directive

---
 src/frontend/styles/components/writing.pcss | 18 ++-------
 src/frontend/styles/vars.pcss               | 43 +++++++++++++++++++++
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss
index 9c78067..a8a6450 100644
--- a/src/frontend/styles/components/writing.pcss
+++ b/src/frontend/styles/components/writing.pcss
@@ -33,22 +33,12 @@
       margin-bottom: 6px;
     }
 
-    select, input {
-      position: relative;
-      padding: 10px;
-      width: 100%;
-      border: none;
-      border-radius: 8px;
-      background-color: #F3F6F8;
-      box-sizing: border-box;
-      appearance: none;
+    select {
+      @apply --select;
     }
 
-    select {
-      padding-right: 36px;
-      background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16696 0.613295C7.04205 0.489128 6.87308 0.419434 6.69696 0.419434C6.52083 0.419434 6.35187 0.489128 6.22696 0.613295L3.83362 2.9733L1.47362 0.613295C1.34872 0.489128 1.17975 0.419434 1.00362 0.419434C0.827501 0.419434 0.658533 0.489128 0.533625 0.613295C0.471139 0.675271 0.421543 0.749005 0.387697 0.830244C0.353851 0.911484 0.336426 0.998621 0.336426 1.08663C0.336426 1.17464 0.353851 1.26177 0.387697 1.34301C0.421543 1.42425 0.471139 1.49799 0.533625 1.55996L3.36029 4.38663C3.42227 4.44911 3.496 4.49871 3.57724 4.53256C3.65848 4.5664 3.74562 4.58383 3.83362 4.58383C3.92163 4.58383 4.00877 4.5664 4.09001 4.53256C4.17125 4.49871 4.24498 4.44911 4.30696 4.38663L7.16696 1.55996C7.22944 1.49799 7.27904 1.42425 7.31288 1.34301C7.34673 1.26177 7.36416 1.17464 7.36416 1.08663C7.36416 0.998621 7.34673 0.911484 7.31288 0.830244C7.27904 0.749005 7.22944 0.675271 7.16696 0.613295Z' fill='black'/%3E%3C/svg%3E%0A");
-      background-repeat: no-repeat;
-      background-position: right 10px center;
+    input {
+      @apply --input;
     }
   }
 }
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index c292aa3..6caf067 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -6,6 +6,8 @@
   --color-button-danger: #ff5159;
   --color-bg-light: #f8f7fa;
   --color-page-active: #ff1767;
+  --color-input-primary: #F3F6F8;
+  --color-input-border: #477CFF;
 
   /**
    * Site layout sizes
@@ -66,6 +68,47 @@
       background: color-mod(var(--color-link-active) blackness(+10%));
     }
   }
+
+  --select {
+    position: relative;
+    padding: 10px 30px 10px 10px;
+    width: 100%;
+    border: none;
+    border-radius: 8px;
+    background-color: var(--color-input-primary);
+    box-sizing: border-box;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16696 0.613295C7.04205 0.489128 6.87308 0.419434 6.69696 0.419434C6.52083 0.419434 6.35187 0.489128 6.22696 0.613295L3.83362 2.9733L1.47362 0.613295C1.34872 0.489128 1.17975 0.419434 1.00362 0.419434C0.827501 0.419434 0.658533 0.489128 0.533625 0.613295C0.471139 0.675271 0.421543 0.749005 0.387697 0.830244C0.353851 0.911484 0.336426 0.998621 0.336426 1.08663C0.336426 1.17464 0.353851 1.26177 0.387697 1.34301C0.421543 1.42425 0.471139 1.49799 0.533625 1.55996L3.36029 4.38663C3.42227 4.44911 3.496 4.49871 3.57724 4.53256C3.65848 4.5664 3.74562 4.58383 3.83362 4.58383C3.92163 4.58383 4.00877 4.5664 4.09001 4.53256C4.17125 4.49871 4.24498 4.44911 4.30696 4.38663L7.16696 1.55996C7.22944 1.49799 7.27904 1.42425 7.31288 1.34301C7.34673 1.26177 7.36416 1.17464 7.36416 1.08663C7.36416 0.998621 7.34673 0.911484 7.31288 0.830244C7.27904 0.749005 7.22944 0.675271 7.16696 0.613295Z' fill='black'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: right 15px center;
+
+    &:focus {
+      border: solid 1px var(--color-input-border);
+      box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  --input {
+    padding: 10px;
+    width: 100%;
+    border: none;
+    border-radius: 8px;
+    background-color: var(--color-input-primary);
+    box-sizing: border-box;
+
+    &:focus {
+      border: solid 1px var(--color-input-border);
+      box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
 }
 
 /**