feat(input): add styles for icon actions

cft-group · Jan 14, 2021 · ea64c8d · ea64c8d
1 parent 2df7ae6
commit ea64c8d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/src/packages/core/src/input/input.css b/src/packages/core/src/input/input.css
@@ -100,6 +100,36 @@
   z-index: 2;
 }
 
+._e_input__action {
+  display: inline-block;
+  width: var(--S24);
+  height: var(--S24);
+  margin-left: var(--S8);
+  cursor: pointer;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  & svg {
+    width: var(--S24);
+    height: var(--S24);
+    fill: var(--N600);
+  }
+
+  &:hover {
+    & svg {
+      fill: var(--N700);
+    }
+  }
+
+  &:active {
+    & svg {
+      fill: var(--N800);
+    }
+  }
+}
+
 ._e_input__icon_passive {
   pointer-events: none;
 }

diff --git a/src/packages/core/src/input/input.html b/src/packages/core/src/input/input.html
@@ -52,7 +52,7 @@
       <span class="_e_input__background"></span>
       <span class="_e_input__line"></span>
       <div class="_e_input__icon">
-        <svg style="margin-right: var(--S8)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="white"/>
           <path d="M2.48081 4.69409C1.5382 5.92048 0.827434 7.334 0.413574 8.86958H6.65629L2.48081 4.69409Z" fill="#0052B4"/>
           <path d="M23.5869 8.86954C23.173 7.334 22.4622 5.92048 21.5196 4.69409L17.3442 8.86954H23.5869Z" fill="#0052B4"/>
@@ -68,9 +68,11 @@
           <path d="M8.86927 8.86961V8.86951L3.51446 3.51465C3.26818 3.76084 3.03324 4.01823 2.80908 4.28504L7.3936 8.86956H8.86927V8.86961Z" fill="#D80027"/>
           <path d="M15.1304 8.86956L20.4852 3.51465C20.239 3.26837 19.9817 3.03344 19.7148 2.80933L15.1304 7.39384V8.86956Z" fill="#D80027"/>
         </svg>
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447C15.9261 8.85499 15.9261 9.48816 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447Z" fill="#646572"/>
-        </svg>
+        <div class="_e_input__action">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447C15.9261 8.85499 15.9261 9.48816 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447Z" />
+          </svg>
+        </div>
       </div>
     </label>
     <span class="_e_input__hint">UK</span>

diff --git a/src/packages/core/src/input/input_labelless.html b/src/packages/core/src/input/input_labelless.html
@@ -5,6 +5,13 @@
       <span class="_e_input__label">Label</span>
       <span class="_e_input__background"></span>
       <span class="_e_input__line"></span>
+      <div class="_e_input__icon">
+        <div class="_e_input__action">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447C15.9261 8.85499 15.9261 9.48816 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447Z" />
+          </svg>
+        </div>
+      </div>
     </label>
     <span class="_e_input__hint">Hint</span>
   </div>
@@ -52,7 +59,7 @@
       <span class="_e_input__background"></span>
       <span class="_e_input__line"></span>
       <div class="_e_input__icon">
-        <svg style="margin-right: var(--S8)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="white"/>
           <path d="M2.48081 4.69409C1.5382 5.92048 0.827434 7.334 0.413574 8.86958H6.65629L2.48081 4.69409Z" fill="#0052B4"/>
           <path d="M23.5869 8.86954C23.173 7.334 22.4622 5.92048 21.5196 4.69409L17.3442 8.86954H23.5869Z" fill="#0052B4"/>
@@ -68,9 +75,6 @@
           <path d="M8.86927 8.86961V8.86951L3.51446 3.51465C3.26818 3.76084 3.03324 4.01823 2.80908 4.28504L7.3936 8.86956H8.86927V8.86961Z" fill="#D80027"/>
           <path d="M15.1304 8.86956L20.4852 3.51465C20.239 3.26837 19.9817 3.03344 19.7148 2.80933L15.1304 7.39384V8.86956Z" fill="#D80027"/>
         </svg>
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447C15.9261 8.85499 15.9261 9.48816 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447Z" fill="#646572"/>
-        </svg>
       </div>
     </label>
     <span class="_e_input__hint">UK</span>