From 8c4585873a56165631bee6b9d33d11fe83fc897c Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 28 Jun 2022 21:10:46 +0300
Subject: [PATCH] Fix input border-bottom modofier. Add overflow-y: scroll to
 avoid screen sliding left on modal's close

---
 less/base.less  |  6 ++++++
 less/input.less | 34 ++++++++++++++++++++++------------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/less/base.less b/less/base.less
index 2270510..b84f070 100644
--- a/less/base.less
+++ b/less/base.less
@@ -31,3 +31,9 @@
 /* Inverse */
 @inverse-base-link-color: @global-inverse-color;
 @inverse-base-link-hover-color: @global-inverse-color;
+
+.hook-base-misc() {
+  body {
+    overflow-y: scroll;
+  }
+}
diff --git a/less/input.less b/less/input.less
index 3e1f652..6af28a0 100644
--- a/less/input.less
+++ b/less/input.less
@@ -16,17 +16,17 @@
   --input-shadow: none;
   --input-border: transparent;
   --input-border-width: @global-border-width;
-  --input-border-bottom: var(--input-border);
+  --input-border-style: solid;
   /* 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);
+  --input-border-style-hover: var(--input-border-style);
   /* 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);
+  --input-border-style-focus: var(--input-border-style);
   /* Disabled */
   --input-color-disabled: @global-muted-color;
   /* Danger */
@@ -39,8 +39,9 @@
 }
 
 .input-wrapper {
-  border: var(--input-border-width) solid var(--input-border);
-  border-bottom: var(--input-border-width) solid var(--input-border-bottom);
+  border-width: var(--input-border-width);
+  border-color: var(--input-border);
+  border-style: var(--input-border-style);
   border-radius: var(--input-border-radius);
 
   & > .input-box {
@@ -146,8 +147,8 @@
   }
 
   &:hover {
-    border: var(--input-border-width) solid var(--input-border-hover);
-    border-bottom: var(--input-border-width) solid var(--input-border-bottom-hover);
+    border-color: var(--input-border-hover);
+    border-style: var(--input-border-style-hover);
 
     & > .input-box {
       box-shadow: var(--input-shadow-hover);
@@ -156,8 +157,8 @@
   }
 
   &.focused {
-    border: var(--input-border-width) solid var(--input-border-focus);
-    border-bottom: var(--input-border-width) solid var(--input-border-bottom-focus);
+    border-color: var(--input-border-focus);
+    border-style: var(--input-border-style-focus);
 
     & > .input-box {
       box-shadow: var(--input-shadow-focus);
@@ -179,7 +180,7 @@
   }
 
   &.danger {
-    border: var(--input-border-width) solid var(--input-danger-color);
+    border-color: var(--input-danger-color);
     & > .input-box {
       & .input::placeholder, & .placeholder {
         color: var(--input-danger-color);
@@ -224,10 +225,11 @@
 
   &.border-bottom {
     --input-border-radius: 0;
-    --input-border-bottom: @global-muted-background;
+    --input-border: @global-muted-background;
+    --input-border-style: hidden hidden solid hidden;
     --input-padding-horizontal: 0;
     --input-padding-vertical: 5px;
-    --input-border-bottom-focus: @global-color;
+    --input-border-focus: @global-color;
     --input-font-size: 14px;
   }
 
@@ -265,6 +267,14 @@
   &.small-vertical {
     --input-padding-vertical: 10px;
   }
+
+  &.small-font-size {
+    --input-font-size: 14px;
+  }
+
+  &.normal-font-size {
+    --input-font-size: 16px;
+  }
 }
 
 .uk-dropdown.options {