Remove shadows and add border in cards for mobile devices. Add filters-toggle in search.
This commit is contained in:
parent
09073af6b6
commit
c68523d4ca
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue