Improved filters styles. Fixes #711
parent
1811f33daa
commit
1baf634d1f
|
@ -1,7 +1,7 @@
|
||||||
section.filters
|
section.filters
|
||||||
div.filters-inner
|
div.filters-inner
|
||||||
h1
|
h1
|
||||||
a.title(href="", title="back to categories") filters
|
span.title filters
|
||||||
|
|
||||||
form
|
form
|
||||||
fieldset
|
fieldset
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
section.filters
|
section.filters
|
||||||
div.filters-inner
|
div.filters-inner
|
||||||
h1
|
h1
|
||||||
a.title(href="", title="back to categories") filters
|
span.title filters
|
||||||
|
|
||||||
form
|
form
|
||||||
fieldset
|
fieldset
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
section.filters
|
section.filters
|
||||||
div.filters-inner
|
div.filters-inner
|
||||||
h1
|
h1
|
||||||
a.title filters
|
span.title filters
|
||||||
form
|
form
|
||||||
fieldset
|
fieldset
|
||||||
input(type="text", placeholder="Search by subject...", ng-model="filtersSubject")
|
input(type="text", placeholder="Search by subject...", ng-model="filtersSubject")
|
||||||
a.icon.icon-search(href="", title="search")
|
a.icon.icon-search(href="", title="search")
|
||||||
div.filters-step-cat
|
div.filters-step-cat
|
||||||
div.filters-applied
|
div.filters-applied
|
||||||
a.hide.button.save-filters(href="", title="save", ng-class="{hide: filters.length}") save
|
a.hide.button.button-gray.save-filters(href="", title="save", ng-class="{hide: filters.length}") save as custom filter
|
||||||
h2.hidden.breadcrumb
|
h2.hidden.breadcrumb
|
||||||
a.back(href="", title="back to categories") Filters
|
a.back(href="", title="back to categories") Filters
|
||||||
span.icon-arrow-right
|
span.icon-arrow-right
|
||||||
|
@ -44,9 +44,9 @@ section.filters
|
||||||
a(href="", title="Created by", data-type="createdBy")
|
a(href="", title="Created by", data-type="createdBy")
|
||||||
span.title Created by
|
span.title Created by
|
||||||
span.icon.icon-arrow-right
|
span.icon.icon-arrow-right
|
||||||
li(ng-if="filters.myFilters.length")
|
li.custom-filters(ng-if="filters.myFilters.length")
|
||||||
a(href="", title="My filters", data-type="myFilters")
|
a(href="", title="Custom filters", data-type="myFilters")
|
||||||
span.title My filters
|
span.title Custom filters
|
||||||
span.icon.icon-arrow-right
|
span.icon.icon-arrow-right
|
||||||
|
|
||||||
div.filter-list.hidden
|
div.filter-list.hidden
|
||||||
|
|
|
@ -27,13 +27,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 1rem;
|
|
||||||
.subfilter {
|
|
||||||
@extend %large;
|
@extend %large;
|
||||||
|
margin-top: 1rem;
|
||||||
|
.icon-arrow-right {
|
||||||
|
@extend %medium;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
form {
|
input[type="text"] {
|
||||||
input {
|
|
||||||
background: $grayer;
|
background: $grayer;
|
||||||
color: $white;
|
color: $white;
|
||||||
@include placeholder {
|
@include placeholder {
|
||||||
|
@ -47,7 +48,6 @@
|
||||||
top: .7rem;
|
top: .7rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.filters-inner {
|
.filters-inner {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -63,8 +63,9 @@
|
||||||
|
|
||||||
.filters-step-cat {
|
.filters-step-cat {
|
||||||
.save-filters {
|
.save-filters {
|
||||||
float: right;
|
color: $white;
|
||||||
padding: 8 0;
|
display: block;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.my-filter-name {
|
.my-filter-name {
|
||||||
background: $grayer;
|
background: $grayer;
|
||||||
|
@ -74,14 +75,6 @@
|
||||||
color: $gray-light;
|
color: $gray-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.breadcrumb {
|
|
||||||
.back {
|
|
||||||
@extend %xlarge;
|
|
||||||
}
|
|
||||||
.icon-arrow-right {
|
|
||||||
@extend %large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-cats {
|
.filters-cats {
|
||||||
|
@ -90,6 +83,11 @@
|
||||||
border-bottom: 1px solid $gray-light;
|
border-bottom: 1px solid $gray-light;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
.custom-filters {
|
||||||
|
.title {
|
||||||
|
color: $green-taiga;
|
||||||
|
}
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
@include transition (color .2s ease-in);
|
@include transition (color .2s ease-in);
|
||||||
color: $grayer;
|
color: $grayer;
|
||||||
|
|
Loading…
Reference in New Issue