From c68523d4cabbf334dfdd4949985cbc80cdeecd0f Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 7 Dec 2022 16:57:46 +0200 Subject: [PATCH] Remove shadows and add border in cards for mobile devices. Add filters-toggle in search. --- less/card.less | 46 ++++++++++++++++++++++++++++++++++++---------- less/input.less | 6 +++++- less/search.less | 23 +++++++++++++++++++---- 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/less/card.less b/less/card.less index 08d665a..5e1bb63 100644 --- a/less/card.less +++ b/less/card.less @@ -1,7 +1,12 @@ +@card-body-padding-horizontal: @global-small-gutter; +@card-body-padding-vertical: @global-small-gutter; @card-border-radius: @global-border-radius; -@card-default-background: @global-background; -@card-default-box-shadow: @global-large-box-shadow; +@card-default-background: @global-inverse-color; +@card-default-box-shadow-m: @global-large-box-shadow; +@card-default-border-width: @global-border-width; +@card-default-border: @global-border; +@card-default-border-m: transparent; @card-default-hover-background: @card-default-background; @card-default-hover-box-shadow: @global-small-box-shadow; @card-default-header-border-width: @global-border-width; @@ -11,13 +16,13 @@ @card-primary-background: @global-primary-background; @card-primary-background-gradient: @global-primary-gradient; -@card-primary-box-shadow: @global-large-box-shadow; +@card-primary-box-shadow-m: @global-large-box-shadow; @card-primary-hover-background: @card-primary-background; @card-primary-hover-box-shadow: @global-small-box-shadow; @card-primary-hover-background-gradient: @global-primary-gradient; @card-secondary-background: @global-secondary-background; -@card-secondary-box-shadow: @global-large-box-shadow; +@card-secondary-box-shadow-m: @global-large-box-shadow; @card-secondary-color: @global-color; @card-secondary-color-mode: light; @card-secondary-hover-background: @card-secondary-background; @@ -26,6 +31,8 @@ @card-disabled-box-shadow: none; @card-disabled-border: @global-border; @card-disabled-border-width: @global-border-width; +@card-disabled-opacity: 0.6; +@card-disabled-opacity-m: 1; .hook-card() { transition: .1s ease-in-out; @@ -35,6 +42,7 @@ &.uk-disabled { box-shadow: @card-disabled-box-shadow; border: @card-disabled-border-width solid @card-disabled-border; + opacity: @card-disabled-opacity; } } @@ -47,7 +55,7 @@ } .hook-card-default() { - box-shadow: @card-default-box-shadow; + border: @card-default-border-width solid @card-default-border; } .hook-card-default-hover() { @@ -63,7 +71,6 @@ } .hook-card-primary() { - box-shadow: @card-primary-box-shadow; background-image: @card-primary-background-gradient; } @@ -71,14 +78,33 @@ box-shadow: @card-primary-hover-box-shadow; } -.hook-card-secondary() { - box-shadow: @card-secondary-box-shadow; -} - .hook-card-secondary-hover() { box-shadow: @card-secondary-hover-box-shadow; } +.hook-card-misc() { + @media (min-width: @breakpoint-medium) { + .uk-card { + &.uk-disabled { + opacity: @card-disabled-opacity-m; + } + } + + .uk-card-default { + border: @card-default-border-width solid @card-default-border-m; + box-shadow: @card-default-box-shadow-m; + } + + .uk-card-primary{ + box-shadow: @card-primary-box-shadow-m; + } + + .uk-card-secondary { + box-shadow: @card-secondary-box-shadow-m; + } + } +} + @inverse-card-box-shadow: @inverse-global-large-box-shadow; @inverse-card-hover-box-shadow: @inverse-global-medium-box-shadow; diff --git a/less/input.less b/less/input.less index 6adf132..ccc82c0 100644 --- a/less/input.less +++ b/less/input.less @@ -244,7 +244,7 @@ &.search { --input-font-size: 14px; --input-padding-horizontal: 30px; - --input-padding-vertical: 20px; + --input-padding-vertical: 15px; } &.advanced-search { @@ -260,6 +260,10 @@ --input-shadow-focus: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow); } + &.icon-left { + --input-padding-horizontal: 0; + } + &.x-small { --input-padding-horizontal: 15px; --input-padding-vertical: 5px; diff --git a/less/search.less b/less/search.less index 3c0f5e4..7f9ca5d 100644 --- a/less/search.less +++ b/less/search.less @@ -14,7 +14,11 @@ --search-input-icon-color-collapsed: @global-color; --search-input-icon-color-disabled: @global-muted-color; --search-input-divider: @global-border-width solid @global-border; - --search-input-icon-padding: 20px; + --search-input-icon-padding-horizontal: 15px; + --search-input-icon-padding-vertical: 16px; + /* Filters Icon */ + --search-filters-toogle-border: @global-border-width solid @global-border; + --search-filters-toogle-padding: 10px; border-radius: var(--search-input-border-radius); border: var(--search-input-border-width) solid var(--search-input-border); box-shadow: var(--search-input-shadow); @@ -33,7 +37,7 @@ } &.collapsed { - width: calc(2 * var(--search-input-icon-padding) + 26px); + width: calc(2 * var(--search-input-icon-padding-horizontal) + 26px); & .search-icon { color: var(--search-input-icon-color-collapsed); @@ -57,7 +61,7 @@ } & .search-icon { - padding: var(--search-input-icon-padding); + padding: var(--search-input-icon-padding-vertical) var(--search-input-icon-padding-horizontal); color: var(--search-input-icon-color); cursor: pointer; user-select: none; @@ -69,6 +73,16 @@ } } + & .filters-toggle { + padding: calc(var(--search-input-icon-padding-vertical) - var(--search-filters-toogle-padding)) calc(var(--search-input-icon-padding-horizontal) - var(--search-filters-toogle-padding)); + + & > a { + border: var(--search-filters-toogle-border); + border-radius: 500px; + padding: var(--search-filters-toogle-padding); + } + } + /* Modifiers */ &.inner { --search-input-background: @global-inverse-color; @@ -89,7 +103,8 @@ &.border-bottom { --search-input-border-width: 1px; --search-input-border-radius: 0; - --search-input-icon-padding: 10px; + --search-input-icon-padding-vertical: 10px; + --search-input-icon-padding-horizontal: 10px; --search-input-border: @global-muted-background; --search-input-border-style: hidden hidden solid hidden; --search-input-border-focus: @secondary-color;