From f2d544d4f1ec152db80528be300f0936add71190 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" 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; }