taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adjust advanced filter form & applied filters styles

stable
Héctor Fernández Cascallar 2019-01-24 23:09:49 +01:00 committed by Alex Hermida
parent 5d3ccf39c7
commit 2920193fe2
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/modules/components/filter/filter.jade
View File

@ -59,6 +59,7 @@ form(name="vm.filtersForm")
a( a(
ng-click="vm.toggleAdvancedFilter()" ng-click="vm.toggleAdvancedFilter()"
href="" href=""
ng-class="{'collapsed': !vm.showAdvancedFilter, 'exclude': vm.filterMode == 'exclude'}"
) )
span {{'COMMON.FILTERS.TITLE_ADVANCED_FILTER' | translate}} span {{'COMMON.FILTERS.TITLE_ADVANCED_FILTER' | translate}}
tg-svg.ng-animate-disabled( tg-svg.ng-animate-disabled(

29
app/modules/components/filter/filter.scss
View File

@ -1,3 +1,8 @@
// custom colors
$exclude-background: #fcc;
$exclude-filter-text: #828282;
$radio-mark-background: #d6d5d5;
tg-filter { tg-filter {
background-color: $mass-white; background-color: $mass-white;
display: block; display: block;
@ -14,7 +19,8 @@ tg-filter {
padding: 0 1rem 1rem; padding: 0 1rem 1rem;
.single-filter { .single-filter {
&.exclude { &.exclude {
background: $red-light; background: $exclude-background;
color: $exclude-filter-text;
text-decoration: line-through; text-decoration: line-through;
} }
&:hover { &:hover {
@ -28,8 +34,14 @@ tg-filter {
.filters-advanced { .filters-advanced {
@include font-type(light); @include font-type(light);
@include font-size(xsmall); @include font-size(xsmall);
font-size: 10pt;
font-weight: 600;
padding: 0 1rem 1rem; padding: 0 1rem 1rem;
.collapsed.exclude {
color: $red-light;
}
a .icon { a .icon {
margin-left: 5px; margin-left: 5px;
vertical-align: bottom; vertical-align: bottom;
@ -37,7 +49,7 @@ tg-filter {
} }
.filters-advanced-form { .filters-advanced-form {
padding: .5rem 0; padding: .75rem 0;
text-align: center; text-align: center;
} }
@ -51,6 +63,7 @@ tg-filter {
.filter-mode { .filter-mode {
cursor: pointer; cursor: pointer;
&.include { &.include {
margin-right: .75rem; margin-right: .75rem;
} }
@ -72,18 +85,18 @@ tg-filter {
} }
.radio-mark { .radio-mark {
background: $whitish; background: $radio-mark-background;
height: 18px; height: 22px;
margin-right: 3px; margin-right: 3px;
text-align: center; text-align: center;
width: 18px; width: 22px;
} }
.radio-mark-inner { .radio-mark-inner {
height: 12px; height: 14px;
margin-top: 3px; margin-top: 4px;
opacity: 0; opacity: 0;
width: 12px; width: 14px;
&.include { &.include {
background: $primary; background: $primary;