From 09341b18896d4582455a99ef50944bd544bb10df Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 6 Apr 2022 18:23:44 +0300 Subject: [PATCH] Search input and input css changes --- css/structure/input.css | 61 +++++++++++++++++++++++----------- css/structure/search-input.css | 29 ++++++++++++++-- 2 files changed, 69 insertions(+), 21 deletions(-) diff --git a/css/structure/input.css b/css/structure/input.css index 6fc9e81..5575ec6 100644 --- a/css/structure/input.css +++ b/css/structure/input.css @@ -6,8 +6,8 @@ --input-color: var(--grey-color); --input-border-radius: 6px; /* Size modifiers */ - --input-padding-vertical: 20px; - --input-padding-horizontal: 20px; + --input-padding-vertical: 12px; + --input-padding-horizontal: 25px; --input-font-size: 16px; /* Styling */ --input-background: transparent; @@ -24,6 +24,7 @@ /* Disabled */ --input-color-disabled: var(--disable-color); --input-background-disabled: var(--muted-color); + /* Danger */ --input-danger-color: var(--danger-color); /* Select arrow transform */ --input-arrow-transform: rotate(0); @@ -62,11 +63,15 @@ background: var(--input-background); border-radius: var(--input-border-radius); position: relative; - padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal); + padding: calc(var(--input-padding-vertical) + 23px) 0 var(--input-padding-vertical) var(--input-padding-horizontal); cursor: text; color: var(--input-color); } +.input-box.static { + padding-top: var(--input-padding-vertical); +} + .input-wrapper:hover > .input-box { box-shadow: var(--input-shadow-hover); background: var(--input-background-hover); @@ -99,7 +104,6 @@ overflow: hidden; pointer-events: none; color: var(--input-placeholder-color); - padding: var(--input-padding-vertical) var(--input-padding-horizontal); font-weight: var(--input-placeholder-weight); } @@ -126,7 +130,7 @@ position: absolute; font-size: var(--input-font-size); line-height: 24px; - top: calc(var(--input-padding-vertical) + 15px); + top: calc(var(--input-padding-vertical) + 24px); left: var(--input-padding-horizontal); transform: translateY(-50%); transition: all 0.5s ease 0s; @@ -135,10 +139,9 @@ .input-wrapper.active > .input-box > .placeholder > label, .input-wrapper.focused > .input-box > .placeholder > label, .input-wrapper.hint > .input-box > .placeholder > label { - top: calc(0.8 * var(--input-padding-vertical)); + top: calc(var(--input-padding-vertical) + 13px); font-size: 12px; line-height: 18px; - transform: translateY(-35%); } /* Icon */ @@ -166,7 +169,7 @@ background: transparent !important; color: inherit; width: 100%; - min-height: 32px; + min-height: 24px; line-height: inherit; resize: none; cursor: inherit; @@ -175,6 +178,10 @@ justify-content: center; } +.input-wrapper:not(.focused) .input-box .input { + text-overflow: ellipsis; +} + .input-box textarea.input { margin-top: 5px; } @@ -217,23 +224,17 @@ } /** Modifiers */ -.x-small { - --input-padding-horizontal: 15px; - --input-padding-vertical: 10px; - --input-font-size: 14px; -} - -.inner { +.input-wrapper.inner { --input-shadow: var(--shadow-inset); --input-background: var(--light-color); } -.flat { +.input-wrapper.flat { --input-background: var(--light-color); --input-border: 1px solid var(--muted-color); } -.filter { +.input-wrapper.filter { --input-placeholder-color: var(--primary-color); --input-font-size: 14px; --input-padding-horizontal: 20px; @@ -246,15 +247,37 @@ --input-arrow-transform-active: rotate(-180deg); } -.advanced { +.input-wrapper.search { + --input-font-size: 14px; + --input-padding-horizontal: 30px; + --input-padding-vertical: 20px; +} + +.input-wrapper.advanced-search { --input-placeholder-weight: 700; --input-placeholder-color: var(--grey-color); --input-border-radius: 54px; --input-padding-horizontal: 30px; - --input-padding-vertical: 15px; + --input-padding-vertical: 10px; --input-font-size: 14px; --input-background-hover: var(--muted-color); --input-shadow-hover: var(--shadow-main); --input-background-focus: var(--default-color); --input-shadow-focus: var(--shadow-main); } + +.input-wrapper.x-small { + --input-padding-horizontal: 15px; + --input-padding-vertical: 8px; + --input-font-size: 14px; +} + +.input-wrapper.small { + --input-padding-horizontal: 20px; + --input-padding-vertical: 10px; + --input-font-size: 14px; +} + +.input-wrapper.small-vertical { + --input-padding-vertical: 10px; +} diff --git a/css/structure/search-input.css b/css/structure/search-input.css index 5a3b9c0..c53a325 100644 --- a/css/structure/search-input.css +++ b/css/structure/search-input.css @@ -1,13 +1,23 @@ .search-input { --search-input-shadow: none; --search-input-background: none; + --search-input-border: none; --search-input-border-radius: 54px; --search-input-icon-color: var(--secondary-color); + --search-input-icon-color-collapsed: var(--primary-color); --search-input-icon-color-disabled: var(--disable-color); --search-input-divider: 1px solid var(--muted-color); + --search-input-icon-padding: 20px; border-radius: var(--search-input-border-radius); + border: var(--search-input-border); box-shadow: var(--search-input-shadow); background: var(--search-input-background); + width: 100%; + transition: width 0.5s ease-out; +} + +.search-input.collapsed { + width: calc(2*var(--search-input-icon-padding) + 26px); } .search-input .inputs > :not(:last-child) { @@ -24,13 +34,18 @@ border-left: var(--search-input-divider); } -.search-input .search { +.search-input .search-icon { + padding: var(--search-input-icon-padding); color: var(--search-input-icon-color); cursor: pointer; user-select: none; } -.search-input .search.disabled { +.search-input.collapsed .search-icon { + color: var(--search-input-icon-color-collapsed); +} + +.search-input .search-icon.disabled { color: var(--search-input-icon-color-disabled); cursor: default; pointer-events: none; @@ -41,3 +56,13 @@ --search-input-background: var(--light-color); --search-input-shadow: var(--shadow-inset); } + +.flat { + --search-input-background: var(--light-color); + --search-input-border: 1px solid var(--muted-color); +} + +.outer { + --search-input-background: var(--default-color); + --search-input-shadow: var(--shadow-button); +}