From 0b66dc8cb96a1539e33a67e3905ac2c6d476da1e Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 7 Apr 2022 18:19:19 +0300
Subject: [PATCH] Add border-bottom input

---
 css/structure/input.css  | 17 ++++++++++++++++-
 css/structure/shadow.css |  5 +++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/css/structure/input.css b/css/structure/input.css
index 5575ec6..2147491 100644
--- a/css/structure/input.css
+++ b/css/structure/input.css
@@ -13,14 +13,17 @@
   --input-background: transparent;
   --input-shadow: none;
   --input-border: 1px solid transparent;
+  --input-border-bottom: var(--input-border);
   /* Hover Styling */
   --input-background-hover: var(--input-background);
   --input-shadow-hover: var(--input-shadow);
   --input-border-hover: var(--input-border);
+  --input-border-bottom-hover: var(--input-border-bottom);
   /* Focus Styling */
   --input-background-focus: var(--input-background);
   --input-shadow-focus: var(--input-shadow);
   --input-border-focus: var(--input-border);
+  --input-border-bottom-focus: var(--input-border-bottom);
   /* Disabled */
   --input-color-disabled: var(--disable-color);
   --input-background-disabled: var(--muted-color);
@@ -38,15 +41,18 @@
 
 .input-wrapper {
   border: var(--input-border);
+  border-bottom: var(--input-border-bottom);
   border-radius: var(--input-border-radius);
 }
 
 .input-wrapper:hover {
   border: var(--input-border-hover);
+  border-bottom: var(--input-border-bottom-hover);
 }
 
 .input-wrapper.focused {
   border: var(--input-border-focus);
+  border-bottom: var(--input-border-bottom-focus);
 }
 
 .input-wrapper.danger {
@@ -148,6 +154,7 @@
 .input-wrapper > .input-box .icon {
   transition: all 0.3s linear 0s;
   transform: var(--input-arrow-transform);
+  margin-right: var(--input-padding-horizontal);
 }
 
 .input-wrapper.opened > .input-box.select .icon {
@@ -215,7 +222,7 @@
   max-width: calc(100% - var(--input-padding-horizontal));
 }
 
-.input-box:not(.static) .uk-grid .input, .input-box .uk-grid-margin .input, .input-box:not(.static) .chip, .input-box .uk-grid-margin.chip {
+.input-box .uk-grid .input, .input-box .uk-grid-margin .input, .input-box:not(.static) .chip, .input-box .uk-grid-margin.chip {
   margin-top: 10px;
 }
 
@@ -234,6 +241,14 @@
   --input-border: 1px solid var(--muted-color);
 }
 
+.input-wrapper.border-bottom {
+  --input-border-radius: 0;
+  --input-border-bottom: 1px solid var(--muted-color);
+  --input-padding-horizontal: 0;
+  --input-padding-vertical: 5px;
+  --input-border-bottom-focus: 1px solid var(--grey-color);
+}
+
 .input-wrapper.filter {
   --input-placeholder-color: var(--primary-color);
   --input-font-size: 14px;
diff --git a/css/structure/shadow.css b/css/structure/shadow.css
index 7baa132..1d5142b 100644
--- a/css/structure/shadow.css
+++ b/css/structure/shadow.css
@@ -1,7 +1,8 @@
 :root {
-  --shadow-main: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%);
+  --shadow-main: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
   --shadow-main-dark: -15px -15px 20px rgb(255 255 255 / 5%), 15px 15px 20px rgb(0 0 0 / 30%);
-  --shadow-button: -5px -5px 15px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 30%);
+  --shadow-button: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
+  --shadow-button-dark: -5px -5px 15px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 30%);
   --shadow-inset: inset -3px -3px 6px rgb(255 255 255 / 90%), inset 3px 3px 6px rgb(0 0 0 / 10%);
   --shadow-nav: 0 3px 6px 0 rgb(0 0 0 / 10%);
 }