From f2d544d4f1ec152db80528be300f0936add71190 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 12 Oct 2022 12:24:36 +0300
Subject: [PATCH] Add border-bottom modifier for search. Add paddings for tab
 left and right

---
 less/search.less | 31 ++++++++++++++++++++++++++++++-
 less/tab.less    |  8 ++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/less/search.less b/less/search.less
index 8f0afb3..3c0f5e4 100644
--- a/less/search.less
+++ b/less/search.less
@@ -3,8 +3,13 @@
     --search-input-shadow: none;
     --search-input-background: none;
     --search-input-border-width: 0;
+    --search-input-border-style: solid;
     --search-input-border: transparent;
     --search-input-border-radius: 500px;
+    /* Focus Styling */
+    --search-input-border-focus: var(--search-input-border);
+    --search-input-border-style-focus: var(--search-input-border-style);
+    /* Icon */
     --search-input-icon-color: @global-secondary-background;
     --search-input-icon-color-collapsed: @global-color;
     --search-input-icon-color-disabled: @global-muted-color;
@@ -17,6 +22,16 @@
     width: 100%;
     transition: width 0.5s ease-out;
 
+    /* Override border style variable in order to cheat angular optimization (DO NOT REMOVE)*/
+    & {
+      border-style: var(--search-input-border-style);
+    }
+
+    &.focused {
+      border-color: var(--search-input-border-focus);
+      border-style: var(--search-input-border-style-focus);
+    }
+
     &.collapsed {
       width: calc(2 * var(--search-input-icon-padding) + 26px);
 
@@ -55,7 +70,6 @@
     }
 
     /* Modifiers */
-
     &.inner {
       --search-input-background: @global-inverse-color;
       --search-input-shadow: @global-inset-shadow;
@@ -71,6 +85,21 @@
       --search-input-background: @global-background;
       --search-input-shadow: @global-medium-box-shadow;
     }
+
+    &.border-bottom {
+      --search-input-border-width: 1px;
+      --search-input-border-radius: 0;
+      --search-input-icon-padding: 10px;
+      --search-input-border: @global-muted-background;
+      --search-input-border-style: hidden hidden solid hidden;
+      --search-input-border-focus: @secondary-color;
+
+      .input-wrapper {
+        --input-padding-horizontal: 0;
+        --input-padding-vertical: 0;
+        --input-font-size: 14px;
+      }
+    }
   }
 }
 
diff --git a/less/tab.less b/less/tab.less
index 223d8de..aab0281 100644
--- a/less/tab.less
+++ b/less/tab.less
@@ -7,6 +7,12 @@
 @tab-item-padding-horizontal: 10px;
 @tab-item-padding-vertical: 10px;
 
+/*Left & Right*/
+@tab-left-item-padding-horizontal: 5px;
+@tab-left-item-padding-vertical: 5px;
+@tab-right-item-padding-horizontal: 5px;
+@tab-right-item-padding-vertical: 5px;
+
 /** Hover */
 @tab-item-hover-color: @global-secondary-background;
 
@@ -51,6 +57,7 @@
 .hook-tab-left-item() {
   border-right: @tab-item-border-width solid transparent;
   border-bottom: none;
+  padding: @tab-left-item-padding-vertical @tab-left-item-padding-horizontal;
 }
 
 .hook-tab-right() {
@@ -67,4 +74,5 @@
 .hook-tab-right-item() {
   border-left: @tab-item-border-width solid transparent;
   border-bottom: none;
+  padding: @tab-right-item-padding-vertical @tab-right-item-padding-horizontal;
 }