From 60b581dc8e8aa393cd3b7e604375132e015acaf8 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 28 Mar 2022 01:35:16 +0300 Subject: [PATCH 1/8] Add shadows variables --- css/structure/shadow.css | 3 +++ css/structure/variables.css | 1 + 2 files changed, 4 insertions(+) diff --git a/css/structure/shadow.css b/css/structure/shadow.css index 8f36eb1..6108cbb 100644 --- a/css/structure/shadow.css +++ b/css/structure/shadow.css @@ -1,3 +1,6 @@ :root { --shadow-main: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%); + --shadow-button: -5px -5px 15px rgb(255 255 255 / 5%), 5px 5px 15px rgb(0 0 0 / 30%); + --shadow-inset: inset -3px -3px 6px rgb(255 255 255 / 90%), inset 3px 3px 6px rgb(0 0 0 / 10%); + --shadow-nav: 0 3px 6px 0 rgb(0 0 0 / 10%); } diff --git a/css/structure/variables.css b/css/structure/variables.css index bc6a9ba..b63cb0d 100644 --- a/css/structure/variables.css +++ b/css/structure/variables.css @@ -12,6 +12,7 @@ --disable-color: #B3B3B3; --muted-color: #EAEAEA; --light-color: #FFFFFF; + --table-color: #F5F5F5; --default-color: #F9F9F9; --light-blue: #F4F8F9; From 3b700ea4c14ba05d1f8c2cf3ef3253623eda55f3 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 30 Mar 2022 13:01:03 +0300 Subject: [PATCH 2/8] Add explore variables --- css/structure/variables.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/css/structure/variables.css b/css/structure/variables.css index b63cb0d..2e28dcc 100644 --- a/css/structure/variables.css +++ b/css/structure/variables.css @@ -16,7 +16,12 @@ --default-color: #F9F9F9; --light-blue: #F4F8F9; - --explore-color: #D95F2D; + /* Explore */ + --explore-color: #E96439; + --explore-color-rgb: 233, 100, 57; + --explore-light-color: #FF7A4E; + --explore-dark-color: #E96439; + /* Provide */ --provide-color: #37C7E9; /* Monitor */ --monitor-color: #56A601; From 08fdb662a6b3b295579119c7bfeb3a2b18f98392 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Wed, 30 Mar 2022 19:18:06 +0300 Subject: [PATCH 3/8] [Library & Monitor Dashboard | new-theme]: Applied new theme & redesign changes in notifications & filters offcanvas switcher icons and boxes. 1. offcanvas.css: [NEW] Custom css for custom 'offcanvas' classes. 2. import.css: Import new file offcanvas.css 3. structure.css: Removed custom css for notifications offcanvas. 4. monitor.component.ts: Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#style_switcher" (filters). 5. monitor.component.html: Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes | Small changes in close button, switcher button and message. 6. monitor-dashboard-custom.css: For #filters_switcher_toggle only top is defined here. Now css will be imported by offcanvas.css file. 7. notification-user.component.ts: Updated default value for property 'colorClass' from 'portal-color' to 'uk-text-primary'. 8. notifications-sidebar.component.ts: a. Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#notifications". b. Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes c. Small changes in close button, switcher button and font sizes. 9. notifications-sidebar.module.ts: Removed iconsService.registerIcons from constructor. 10. notification-sidebar.component.css: Unnecessary css removed | css updated and moved to new file offcanvas.css. --- css/import.css | 1 + css/structure/offcanvas.css | 60 +++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 css/structure/offcanvas.css diff --git a/css/import.css b/css/import.css index 11ff9dc..62a4272 100644 --- a/css/import.css +++ b/css/import.css @@ -15,6 +15,7 @@ @import "structure/link.css"; @import "structure/list.css"; @import "structure/navbar.css"; +@import "structure/offcanvas.css"; @import "structure/pill.css"; @import "structure/shadow.css"; @import "structure/slider.css"; diff --git a/css/structure/offcanvas.css b/css/structure/offcanvas.css new file mode 100644 index 0000000..bd242e8 --- /dev/null +++ b/css/structure/offcanvas.css @@ -0,0 +1,60 @@ +:root { + --offcanvas-background-color: var(--default-color); + /*--offcanvas-shadow: var(--shadow-main);*/ + --offcanvas-shadow: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%); +} + +.offcanvas-switcher { + top: 320px !important; + position: fixed; + width: 60px; + height: 60px; + cursor: pointer; + padding: 4px; + box-sizing: border-box; + right: 0; + z-index: 980; + + background: var(--offcanvas-background-color); + border-radius: 6px 0px 0px 6px; + + transition: .3s ease-out; + transition-property: right; + + box-shadow: var(--offcanvas-shadow); + clip-path: inset(-30px 0px -30px -30px); +} + +/* Uncomment this if you want to always see the switcher icon */ +/*.offcanvas-switcher.open {*/ +/* right: 550px;*/ +/* z-index: 1001;*/ +/*}*/ + +.offcanvas-switcher .offcanvas-count { + position: absolute; + top: 0; + left: 0; + font-size: 10px; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + height: 20px; + border-radius: 50%; + padding: 1px 8px; + background-color: var(--secondary-color); + color: var(--light-color); +} + + +.offcanvas .uk-offcanvas-bar { + background-color: var(--offcanvas-background-color); + box-shadow: var(--offcanvas-shadow); + border-radius: 8px 0px 0px 8px; + padding: 0; + width: 550px; +} + + +.offcanvas .uk-offcanvas-flip .uk-offcanvas-bar { + right: -550px; +} From ca92c36bad13d0be11514abf7786f1e476ae7f5e Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 30 Mar 2022 20:51:09 +0300 Subject: [PATCH 4/8] Dropdown add shadow --- css/structure/dropdown.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/css/structure/dropdown.css b/css/structure/dropdown.css index d56cd68..f224c04 100644 --- a/css/structure/dropdown.css +++ b/css/structure/dropdown.css @@ -1,5 +1,6 @@ :root { --dropdown-background: var(--light-color); + --dropdown-shadow: var(--shadow-main); --dropdown-color: var(--grey-color); --dropdown-background-hover: var(--light-blue); --dropdown-font-size: 14px; @@ -8,6 +9,7 @@ .uk-navbar-dropdown, .uk-dropdown { background: var(--dropdown-background); + box-shadow: var(--dropdown-shadow); border-radius: 0; padding: 5px 0; } @@ -15,9 +17,14 @@ .uk-navbar-dropdown-nav > li > a, .uk-dropdown-nav > li > a { padding: 5px 30px; background: transparent; - color: var(--dropdown-color); + color: var(--dropdown-color) !important; font-weight: normal; + display: inherit; font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + white-space: nowrap; } .uk-navbar-dropdown-nav > li:hover > a, .uk-dropdown-nav > li:hover > a, @@ -25,6 +32,10 @@ background: var(--dropdown-background-hover); } +.uk-navbar-dropdown-nav > li.uk-active > a, .uk-dropdown-nav > li.uk-active > a { + font-weight: 600; +} + .uk-nav > .uk-nav-divider { margin: 5px 0; } From bad18d6334538c23ccf5a95ce38361d9aaa9dade Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 31 Mar 2022 16:37:33 +0300 Subject: [PATCH 5/8] Add inputs.css --- css/structure/input.css | 172 +++++++++++++++++++++++++++++++++++- css/structure/variables.css | 1 + 2 files changed, 171 insertions(+), 2 deletions(-) diff --git a/css/structure/input.css b/css/structure/input.css index 4c32b82..972c776 100644 --- a/css/structure/input.css +++ b/css/structure/input.css @@ -1,3 +1,171 @@ -textarea { - resize: none; +:root { + --input-placeholder-color: var(--placeholder-color); + --input-background: transparent; + --input-shadow: none; + --input-padding-vertical: 20px; + --input-padding-horizontal: 20px; + --input-font-size: 16px; + --input-border-radius: 6px; + --input-border: 1px solid transparent; + --input-color: var(--grey-color); + --input-color-disabled: var(--disable-color); + --input-background-disabled: var(--muted-color); + --input-danger-color: var(--danger-color); +} + +/** Input Border */ +.input-border { + border: var(--input-border); + border-radius: 6px; +} + +.input-border.danger { + border: 1px solid var(--input-danger-color); +} + +.input-border.disabled { + border: 1px solid var(--muted-color); +} + + /** Input wrapper*/ +.input-wrapper { + box-shadow: var(--input-shadow); + background: var(--input-background); + border-radius: 6px; + position: relative; + padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal); + cursor: text; + color: var(--input-color); +} + +.input-wrapper.select { + cursor: pointer; +} + +.input-border.disabled > .input-wrapper { + cursor: not-allowed !important; + user-select: none; + background-color: var(--input-background-disabled); + color: var(--input-color-disabled); + box-shadow: none; +} + +/** Placeholder */ +.input-wrapper > .placeholder { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + overflow: hidden; + pointer-events: none; + color: var(--input-placeholder-color); + padding: var(--input-padding-vertical) var(--input-padding-horizontal); +} + +.input-border.danger > .input-wrapper > .placeholder { + color: var(--input-danger-color); +} + +.input-wrapper.disabled > .placeholder { + color: var(--input-color-disabled); +} + +.input-wrapper > .placeholder > label { + position: absolute; + font-size: var(--input-font-size); + line-height: 24px; + top: calc(var(--input-padding-vertical) + 15px); + transform: translateY(-50%); + transition: all 0.5s ease 0s; +} + +.input-wrapper.active > .placeholder > label { + top: calc(0.8 * var(--input-padding-vertical)); + font-size: 12px; + line-height: 18px; + transform: translateY(-35%); +} + +/* Icon */ +.input-border.danger > .input-wrapper .icon { + color: var(--input-danger-color); +} + +/** Input */ +.input-wrapper .input { + outline: 0 none !important; + box-shadow: none !important; + border-radius: 0; + border: 0 none; + padding: 0 var(--input-padding-horizontal) 0 0; + font-size: var(--input-font-size); + background: transparent !important; + color: inherit; + width: 100%; + min-height: 32px; + line-height: inherit; + resize: none; + cursor: inherit; + display: flex; + flex-direction: column; + justify-content: center; +} + +.input-wrapper textarea.input { + margin-top: 5px; +} + +.input-wrapper .uk-grid .input { + min-height: 27px; +} + +.input-wrapper .input:disabled { + background: transparent; +} + +/* Tools */ +.input-wrapper > .tools { + padding-right: var(--input-padding-horizontal); +} + +/* Options */ +.uk-dropdown.options { + max-height: 200px; + min-width: 200px; + overflow: auto; +} + +/* Chips and Search Input */ +.input-wrapper:not(.focused) .input.search { + opacity: 0; +} + +.input-wrapper .chip { + max-width: calc(100% - var(--input-padding-horizontal)); +} + +.input-wrapper:not(.static) .uk-grid .input, .input-wrapper .uk-grid-margin .input, .input-wrapper:not(.static) .chip, .input-wrapper .uk-grid-margin.chip { + margin-top: 10px; +} + +.input-wrapper .chip .uk-label { + padding: 5px 20px; +} + +/** Modifiers */ +.x-small { + --input-padding-horizontal: 15px; + --input-padding-vertical: 10px; + --input-font-size: 14px; +} + +.inner { + --input-shadow: var(--shadow-inset); + --input-background: var(--light-color); +} + +.flat { + --input-background: var(--light-color); + --input-border: 1px solid var(--muted-color); } diff --git a/css/structure/variables.css b/css/structure/variables.css index 2e28dcc..b453b7f 100644 --- a/css/structure/variables.css +++ b/css/structure/variables.css @@ -15,6 +15,7 @@ --table-color: #F5F5F5; --default-color: #F9F9F9; --light-blue: #F4F8F9; + --danger-color: #BB121A; /* Explore */ --explore-color: #E96439; From 2f93f24ef900d6cd2c7b0b667a9cabd124fd76a9 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 4 Apr 2022 11:08:04 +0300 Subject: [PATCH 6/8] Add some modifiers in input.css and add advanced-search-input.css --- css/import.css | 1 + css/structure/advanced-search-input.css | 35 ++++++ css/structure/input.css | 158 +++++++++++++++++++----- 3 files changed, 164 insertions(+), 30 deletions(-) create mode 100644 css/structure/advanced-search-input.css diff --git a/css/import.css b/css/import.css index 62a4272..40e684c 100644 --- a/css/import.css +++ b/css/import.css @@ -3,6 +3,7 @@ @import "theme.update.css"; @import "structure/variables.css"; +@import "structure/advanced-search-input.css"; @import "structure/alert.css"; @import "structure/background.css"; @import "structure/breadcrumb.css"; diff --git a/css/structure/advanced-search-input.css b/css/structure/advanced-search-input.css new file mode 100644 index 0000000..336c0c7 --- /dev/null +++ b/css/structure/advanced-search-input.css @@ -0,0 +1,35 @@ +.advanced-search-input { + --advanced-input-shadow: var(--shadow-inset); + --advanced-input-border-radius: 54px; + --advanced-input-search-color: var(--secondary-color); + --advanced-input-search-color-disabled: var(--disable-color); + --advanced-input-divider: 1px solid var(--muted-color); + border-radius: var(--advanced-input-border-radius); + box-shadow: var(--advanced-input-shadow); +} + +.advanced-search-input .inputs > :not(:last-child) { + position: relative; +} + +.advanced-search-input .inputs > :not(:last-child):after { + content: ''; + position: absolute; + right: 0; + top: 15px; + bottom: 15px; + width: 0; + border-left: var(--advanced-input-divider); +} + +.advanced-search-input .search { + color: var(--advanced-input-search-color); + cursor: pointer; + user-select: none; +} + +.advanced-search-input .search.disabled { + color: var(--advanced-input-search-color-disabled); + cursor: default; + pointer-events: none; +} diff --git a/css/structure/input.css b/css/structure/input.css index 972c776..4e2d96a 100644 --- a/css/structure/input.css +++ b/css/structure/input.css @@ -1,48 +1,96 @@ -:root { +.input-wrapper { + /* Basic Information */ --input-placeholder-color: var(--placeholder-color); - --input-background: transparent; - --input-shadow: none; + --input-placeholder-weight: 400; + --input-hint-color: var(--placeholder-color); + --input-color: var(--grey-color); + --input-border-radius: 6px; + /* Size modifiers */ --input-padding-vertical: 20px; --input-padding-horizontal: 20px; --input-font-size: 16px; - --input-border-radius: 6px; + /* Styling */ + --input-background: transparent; + --input-shadow: none; --input-border: 1px solid transparent; - --input-color: var(--grey-color); + /* Hover Styling */ + --input-background-hover: var(--input-background); + --input-shadow-hover: var(--input-shadow); + --input-border-hover: var(--input-border); + /* Focus Styling */ + --input-background-focus: var(--input-background); + --input-shadow-focus: var(--input-shadow); + --input-border-focus: var(--input-border); + /* Active Styling */ + --input-background-active: var(--input-background); + --input-shadow-active: var(--input-shadow); + --input-border-active: var(--input-border); + /* Disabled */ --input-color-disabled: var(--disable-color); --input-background-disabled: var(--muted-color); --input-danger-color: var(--danger-color); + /* Select arrow transform */ + --input-arrow-transform: rotate(0); + --input-arrow-transform-active: rotate(0); } -/** Input Border */ -.input-border { +/** Input Wrapper */ +.input-wrapper { border: var(--input-border); - border-radius: 6px; + border-radius: var(--input-border-radius); } -.input-border.danger { +.input-wrapper:hover { + border: var(--input-border-hover); +} + +.input-wrapper.focused { + border: var(--input-border-focus); +} + +.input-wrapper.active { + border: var(--input-border-active); +} + +.input-wrapper.danger { border: 1px solid var(--input-danger-color); } -.input-border.disabled { +.input-wrapper.disabled { border: 1px solid var(--muted-color); } - /** Input wrapper*/ -.input-wrapper { +/** Input Box*/ +.input-box { box-shadow: var(--input-shadow); background: var(--input-background); - border-radius: 6px; + border-radius: var(--input-border-radius); position: relative; padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal); cursor: text; color: var(--input-color); } -.input-wrapper.select { +.input-wrapper:hover > .input-box { + box-shadow: var(--input-shadow-hover); + background: var(--input-background-hover); +} + +.input-wrapper.focused > .input-box { + box-shadow: var(--input-shadow-focus); + background: var(--input-background-focus); +} + +.input-wrapper.active > .input-box { + box-shadow: var(--input-shadow-active); + background: var(--input-background-active); +} + +.input-box.select { cursor: pointer; } -.input-border.disabled > .input-wrapper { +.input-wrapper.disabled > .input-box { cursor: not-allowed !important; user-select: none; background-color: var(--input-background-disabled); @@ -51,7 +99,7 @@ } /** Placeholder */ -.input-wrapper > .placeholder { +.input-box > .placeholder { position: absolute; left: 0; top: 0; @@ -61,17 +109,28 @@ pointer-events: none; color: var(--input-placeholder-color); padding: var(--input-padding-vertical) var(--input-padding-horizontal); + font-weight: var(--input-placeholder-weight); } -.input-border.danger > .input-wrapper > .placeholder { +.input-box .input::placeholder, .input-box .input.placeholder { + color: var(--input-placeholder-color); +} + +.input-wrapper.hint > .input-box .input::placeholder { + color: var(--input-hint-color); +} + +.input-wrapper.danger > .input-box .input::placeholder, +.input-wrapper.danger > .input-box .input.placeholder { color: var(--input-danger-color); } -.input-wrapper.disabled > .placeholder { +.input-wrapper.disabled > .input-box .input::placeholder, +.input-wrapper.disabled > .input-box .input.placeholder { color: var(--input-color-disabled); } -.input-wrapper > .placeholder > label { +.input-box > .placeholder > label { position: absolute; font-size: var(--input-font-size); line-height: 24px; @@ -80,7 +139,9 @@ transition: all 0.5s ease 0s; } -.input-wrapper.active > .placeholder > label { +.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)); font-size: 12px; line-height: 18px; @@ -88,12 +149,21 @@ } /* Icon */ -.input-border.danger > .input-wrapper .icon { +.input-wrapper > .input-box .icon { + transition: all 0.3s linear 0s; + transform: var(--input-arrow-transform); +} + +.input-wrapper.opened > .input-box.select .icon { + transform: var(--input-arrow-transform-active); +} + +.input-wrapper.danger > .input-box .icon { color: var(--input-danger-color); } /** Input */ -.input-wrapper .input { +.input-box .input { outline: 0 none !important; box-shadow: none !important; border-radius: 0; @@ -112,20 +182,20 @@ justify-content: center; } -.input-wrapper textarea.input { +.input-box textarea.input { margin-top: 5px; } -.input-wrapper .uk-grid .input { +.input-box .uk-grid .input { min-height: 27px; } -.input-wrapper .input:disabled { +.input-box .input:disabled { background: transparent; } /* Tools */ -.input-wrapper > .tools { +.input-box > .tools { padding-right: var(--input-padding-horizontal); } @@ -137,19 +207,19 @@ } /* Chips and Search Input */ -.input-wrapper:not(.focused) .input.search { +.input-wrapper:not(.focused) > .input-box .input.search { opacity: 0; } -.input-wrapper .chip { +.input-box .chip { max-width: calc(100% - var(--input-padding-horizontal)); } -.input-wrapper:not(.static) .uk-grid .input, .input-wrapper .uk-grid-margin .input, .input-wrapper:not(.static) .chip, .input-wrapper .uk-grid-margin.chip { +.input-box:not(.static) .uk-grid .input, .input-box .uk-grid-margin .input, .input-box:not(.static) .chip, .input-box .uk-grid-margin.chip { margin-top: 10px; } -.input-wrapper .chip .uk-label { +.input-box .chip .uk-label { padding: 5px 20px; } @@ -169,3 +239,31 @@ --input-background: var(--light-color); --input-border: 1px solid var(--muted-color); } + +.filter { + --input-placeholder-color: var(--primary-color); + --input-font-size: 14px; + --input-padding-horizontal: 20px; + --input-padding-vertical: 10px; + --input-border-radius: 60px; + --input-border: 1px solid var(--muted-color); + --input-background: var(--default-color); + --input-color: var(--primary-color); + --input-border-hover: 1px solid var(--primary-color); + --input-arrow-transform-active: rotate(-180deg); +} + +.advanced { + --input-placeholder-weight: 700; + --input-placeholder-color: var(--grey-color); + --input-border-radius: 54px; + --input-padding-horizontal: 30px; + --input-padding-vertical: 15px; + --input-font-size: 14px; + --input-background-hover: var(--muted-color); + --input-shadow-hover: var(--shadow-main); + --input-background-focus: var(--muted-color); + --input-shadow-focus: var(--shadow-main); + --input-background-active: var(--default-color); + --input-shadow-active: var(--shadow-main); +} From e95be93cca857b74dc256fce2d22d157e51e0af1 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 4 Apr 2022 17:21:29 +0300 Subject: [PATCH 7/8] Input css: Fix visibillity hidden behavior. Fix opacity and alignment of placeholder. --- css/structure/input.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/css/structure/input.css b/css/structure/input.css index 4e2d96a..3f35cfb 100644 --- a/css/structure/input.css +++ b/css/structure/input.css @@ -35,6 +35,10 @@ } /** Input Wrapper */ +[style*="visibility: hidden"] .input-wrapper { + opacity: 0; +} + .input-wrapper { border: var(--input-border); border-radius: var(--input-border-radius); @@ -114,6 +118,7 @@ .input-box .input::placeholder, .input-box .input.placeholder { color: var(--input-placeholder-color); + opacity: 1; } .input-wrapper.hint > .input-box .input::placeholder { @@ -121,7 +126,7 @@ } .input-wrapper.danger > .input-box .input::placeholder, -.input-wrapper.danger > .input-box .input.placeholder { +.input-wrapper.danger > .input-box .placeholder { color: var(--input-danger-color); } @@ -135,6 +140,7 @@ font-size: var(--input-font-size); line-height: 24px; top: calc(var(--input-padding-vertical) + 15px); + left: var(--input-padding-horizontal); transform: translateY(-50%); transition: all 0.5s ease 0s; } From e552bc1f3041ff03719538a7abf08aa04d2a4182 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 5 Apr 2022 15:34:13 +0300 Subject: [PATCH 8/8] Rename advanced-search-input to search-input --- css/import.css | 5 ++-- css/structure/advanced-search-input.css | 35 ---------------------- css/structure/search-input.css | 40 +++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 38 deletions(-) delete mode 100644 css/structure/advanced-search-input.css create mode 100644 css/structure/search-input.css diff --git a/css/import.css b/css/import.css index 40e684c..c1ab8ed 100644 --- a/css/import.css +++ b/css/import.css @@ -3,7 +3,6 @@ @import "theme.update.css"; @import "structure/variables.css"; -@import "structure/advanced-search-input.css"; @import "structure/alert.css"; @import "structure/background.css"; @import "structure/breadcrumb.css"; @@ -18,12 +17,12 @@ @import "structure/navbar.css"; @import "structure/offcanvas.css"; @import "structure/pill.css"; +@import "structure/search-input.css"; @import "structure/shadow.css"; @import "structure/slider.css"; +@import "structure/stepper.css"; @import "structure/tab.css"; @import "structure/text.css"; @import "structure/width.css"; @import "openaire.css"; - -@import "structure/stepper.css"; diff --git a/css/structure/advanced-search-input.css b/css/structure/advanced-search-input.css deleted file mode 100644 index 336c0c7..0000000 --- a/css/structure/advanced-search-input.css +++ /dev/null @@ -1,35 +0,0 @@ -.advanced-search-input { - --advanced-input-shadow: var(--shadow-inset); - --advanced-input-border-radius: 54px; - --advanced-input-search-color: var(--secondary-color); - --advanced-input-search-color-disabled: var(--disable-color); - --advanced-input-divider: 1px solid var(--muted-color); - border-radius: var(--advanced-input-border-radius); - box-shadow: var(--advanced-input-shadow); -} - -.advanced-search-input .inputs > :not(:last-child) { - position: relative; -} - -.advanced-search-input .inputs > :not(:last-child):after { - content: ''; - position: absolute; - right: 0; - top: 15px; - bottom: 15px; - width: 0; - border-left: var(--advanced-input-divider); -} - -.advanced-search-input .search { - color: var(--advanced-input-search-color); - cursor: pointer; - user-select: none; -} - -.advanced-search-input .search.disabled { - color: var(--advanced-input-search-color-disabled); - cursor: default; - pointer-events: none; -} diff --git a/css/structure/search-input.css b/css/structure/search-input.css new file mode 100644 index 0000000..1fbd355 --- /dev/null +++ b/css/structure/search-input.css @@ -0,0 +1,40 @@ +.search-input { + --search-input-shadow: none; + --search-input-border-radius: 54px; + --search-input-icon-color: var(--secondary-color); + --search-input-icon-color-disabled: var(--disable-color); + --search-input-divider: 1px solid var(--muted-color); + border-radius: var(--search-input-border-radius); + box-shadow: var(--search-input-shadow); +} + +.search-input .inputs > :not(:last-child) { + position: relative; +} + +.search-input .inputs > :not(:last-child):after { + content: ''; + position: absolute; + right: 0; + top: 15px; + bottom: 15px; + width: 0; + border-left: var(--search-input-divider); +} + +.search-input .search { + color: var(--search-input-icon-color); + cursor: pointer; + user-select: none; +} + +.search-input .search.disabled { + color: var(--search-input-icon-color-disabled); + cursor: default; + pointer-events: none; +} + +/* Modifiers */ +.inner { + --search-input-shadow: var(--shadow-inset); +}