From 3a4aa92c441467994a45a2c6a4f0c21202945404 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 12 Sep 2023 18:39:01 +0300
Subject: [PATCH] Change inputs style base on new mocks

---
 less/input.less | 50 +++++++++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/less/input.less b/less/input.less
index b4693c6..0a3f731 100644
--- a/less/input.less
+++ b/less/input.less
@@ -4,13 +4,14 @@
   /* Basic Information */
   --input-placeholder-color: @global-meta-color;
   --input-placeholder-weight: 400;
+  --input-placeholder-padding-horizontal: 5px;
   --input-hint-color: @global-meta-color;
   --input-color: @global-emphasis-color;
   --input-border-radius: @global-border-radius;
   /* Size modifiers */
   --input-padding-vertical: 12px;
   --input-padding-horizontal: 25px;
-  --input-font-size: @global-font-size;
+  --input-font-size: @global-small-font-size;
   /* Styling */
   --input-background: transparent;
   --input-shadow: none;
@@ -26,7 +27,7 @@
   --input-background-focus: var(--input-background);
   --input-shadow-focus: var(--input-shadow);
   --input-border-focus: var(--input-border);
-  --input-color-focus: @global-link-hover-color;
+  --input-placeholder-color-focus: @global-emphasis-color;
   --input-border-style-focus: var(--input-border-style);
   /* Disabled */
   --input-color-disabled: @global-muted-color;
@@ -60,37 +61,39 @@
     background: var(--input-background);
     border-radius: var(--input-border-radius);
     position: relative;
-    padding: calc(var(--input-padding-vertical) + 23px) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
-    cursor: text;
+    padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
+    cursor: pointer;
     color: var(--input-color);
 
     &.static {
       padding-top: var(--input-padding-vertical);
     }
 
-    &.select {
-      cursor: pointer;
-    }
-
     & > .placeholder {
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
-      overflow: hidden;
       pointer-events: none;
       color: var(--input-placeholder-color);
       font-weight: var(--input-placeholder-weight);
 
       & > label {
         position: absolute;
+        background: linear-gradient(
+                to top,
+                var(--input-background) 0%,
+                var(--input-background) 50%,
+                transparent 50%,
+                transparent 100%
+        );
+        padding: 0 var(--input-placeholder-padding-horizontal);
         font-size: var(--input-font-size);
         line-height: @global-line-height;
-        top: calc(var(--input-padding-vertical) + @global-line-height);
-        left: var(--input-padding-horizontal);
-        transform: translateY(-50%);
-        transition: all 0.5s ease 0s;
+        top: var(--input-padding-vertical);
+        left: calc(var(--input-padding-horizontal) - var(--input-placeholder-padding-horizontal));
+        transition: all 0.3s ease 0s;
       }
     }
 
@@ -210,13 +213,17 @@
     border-color: var(--input-border-focus);
     border-style: var(--input-border-style-focus);
 
+    & > .input-box:not(.select)  {
+      cursor: text;
+    }
+
     & > .input-box {
       box-shadow: var(--input-shadow-focus);
       background: var(--input-background-focus);
     }
 
-    &:not(.hint):not(.disabled) > .input-box > .placeholder > label {
-      color: var(--input-color-focus);
+    &:not(.hint):not(.disabled):not(.danger) > .input-box > .placeholder > label {
+      color: var(--input-placeholder-color-focus);
     }
   }
 
@@ -257,7 +264,8 @@
   &.active > .input-box > .placeholder > label,
   &.focused > .input-box > .placeholder > label,
   &.hint > .input-box > .placeholder > label {
-    top: calc(var(--input-padding-vertical) + 13px);
+    transform: translateY(-50%);
+    top: calc(var(--input-border-width) * -1);
     font-size: 12px;
     line-height: 18px;
   }
@@ -275,6 +283,7 @@
   &.flat {
     --input-background: @global-inverse-color;
     --input-border: @gray-300;
+    --input-border-focus: @global-emphasis-color;
   }
 
   &.border-bottom {
@@ -283,12 +292,11 @@
     --input-border-style: hidden hidden solid hidden;
     --input-padding-horizontal: 0;
     --input-padding-vertical: 5px;
+    --input-placeholder-padding-horizontal: 0;
     --input-border-focus: @global-color;
-    --input-font-size: 14px;
   }
 
   &.search {
-    --input-font-size: 14px;
     --input-padding-horizontal: 30px;
     --input-padding-vertical: 15px;
   }
@@ -299,7 +307,6 @@
     --input-border-radius: 54px;
     --input-padding-horizontal: 30px;
     --input-padding-vertical: 10px;
-    --input-font-size: 14px;
     --input-background-hover: @global-muted-background;
     --input-shadow-hover: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow);
     --input-background-focus: @global-background;
@@ -308,18 +315,17 @@
 
   &.icon-left {
     --input-padding-horizontal: 0;
+    --input-placeholder-padding-horizontal: 0;
   }
 
   &.x-small {
     --input-padding-horizontal: 15px;
-    --input-padding-vertical: 5px;
-    --input-font-size: 14px;
+    --input-padding-vertical: 10px;
   }
 
   &.small {
     --input-padding-horizontal: 20px;
     --input-padding-vertical: 10px;
-    --input-font-size: 14px;
   }
 
   &.small-vertical {