mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
119 lines
1.9 KiB
SCSS
119 lines
1.9 KiB
SCSS
// Filter-box
|
|
.row .row.filter-box {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.row.filter-box:first-child {
|
|
border: 1px solid $clr-blue-light;
|
|
|
|
@include border-radius(0.25em);
|
|
|
|
margin-top: 2px;
|
|
|
|
@include breakpoint(phablet) {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.row.filter-box.clear-filters {
|
|
background: transparent;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
products .filter-box {
|
|
background: $grey-050;
|
|
}
|
|
|
|
.filter-box {
|
|
background: rgba(245, 245, 245, 0.6);
|
|
|
|
.tdhead {
|
|
padding: 0.25rem 0.5rem;
|
|
margin-top: 0.9rem;
|
|
color: $clr-blue;
|
|
border-bottom: 1px solid $clr-blue-light;
|
|
}
|
|
|
|
// OVERRIDES
|
|
[class*="block-grid-"] {
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
[class*="block-grid-"] > li {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
|
|
li {
|
|
@include border-radius(12px);
|
|
|
|
padding-top: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
|
|
&:hover, &:focus {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
}
|
|
|
|
li.active {
|
|
background: white;
|
|
|
|
@include box-shadow(inset 0 1px 3px 0 rgba(143, 48, 29, 0.5));
|
|
}
|
|
|
|
li.active a {
|
|
color: $clr-brick;
|
|
|
|
&:hover, &:focus {
|
|
border-color: $clr-brick-bright;
|
|
}
|
|
}
|
|
|
|
li a {
|
|
@include csstrans;
|
|
|
|
display: table;
|
|
table-layout: fixed;
|
|
text-transform: capitalize;
|
|
overflow: visible;
|
|
line-height: 1;
|
|
color: $med-drk-grey;
|
|
font-size: 0.875rem;
|
|
|
|
span {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
}
|
|
|
|
i {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
margin: 0 0.2rem 0 0;
|
|
}
|
|
|
|
&:hover, &:focus {
|
|
color: $clr-brick-bright;
|
|
}
|
|
|
|
&:active, &.active {
|
|
color: $clr-brick;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button.filterbtn {
|
|
margin-bottom: 0 !important;
|
|
min-width: 160px;
|
|
}
|
|
|
|
#active-table-search {
|
|
position: relative;
|
|
|
|
@include placeholder(rgba(0, 0, 0, 0.4), #777);
|
|
|
|
input[type="text"], input[type="search"] {
|
|
@include big-input(rgba(0, 0, 0, 0.3), #777, $clr-brick);
|
|
}
|
|
}
|