Some style changes on filters dialog

This commit is contained in:
apapachristou 2020-08-03 12:35:34 +03:00
parent 62145205fc
commit 33ea9ce2ed
7 changed files with 128 additions and 89 deletions

View File

@ -0,0 +1,8 @@
::ng-deep .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

View File

@ -7,6 +7,7 @@ import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
@Component({ @Component({
selector: 'dataset-criteria-dialog-component', selector: 'dataset-criteria-dialog-component',
templateUrl: './dataset-criteria-dialog.component.html', templateUrl: './dataset-criteria-dialog.component.html',
styleUrls: ['./dataset-criteria-dialog.component.scss']
}) })
export class DatasetCriteriaDialogComponent implements OnInit { export class DatasetCriteriaDialogComponent implements OnInit {

View File

@ -21,7 +21,8 @@
.filters-title { .filters-title {
width: 93px; width: 93px;
color: #089dbb; // color: #089dbb;
color: #23bcba;
background-color: white; background-color: white;
padding: 0px 20px; padding: 0px 20px;
margin-top: -10px; margin-top: -10px;
@ -32,3 +33,12 @@
.style-icon { .style-icon {
color: #adadad; color: #adadad;
} }
::ng-deep .search-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

View File

@ -28,8 +28,6 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.filters { .filters {
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
border-radius: 5px; border-radius: 5px;
@ -37,7 +35,8 @@
.filters-title { .filters-title {
width: 93px; width: 93px;
color: #089dbb; // color: #089dbb;
color: #23bcba;
background-color: white; background-color: white;
padding: 0px 20px; padding: 0px 20px;
margin-top: -10px; margin-top: -10px;
@ -110,3 +109,12 @@
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #2e74b649; background-color: #2e74b649;
} }
::ng-deep .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

View File

@ -31,7 +31,8 @@
.filters-title { .filters-title {
width: 90px; width: 90px;
color: #089dbb; // color: #089dbb;
color: #23bcba;
background-color: white; background-color: white;
padding: 0px 20px; padding: 0px 20px;
margin-top: -10px; margin-top: -10px;

View File

@ -31,7 +31,8 @@
.filters-title { .filters-title {
width: 93px; width: 93px;
color: #089dbb; // color: #089dbb;
color: #23bcba;
background-color: white; background-color: white;
padding: 0px 20px; padding: 0px 20px;
margin-top: -10px; margin-top: -10px;

View File

@ -1,61 +1,62 @@
.dmp-criteria { .dmp-criteria {
mat-form-field { mat-form-field {
padding-bottom: 5px; padding-bottom: 5px;
width: 100%; width: 100%;
}
mat-card {
padding-bottom: 0px;
}
.hidden {
display: none;
}
.uploadButton {
float: right;
}
} }
.search ::ng-deep.mat-form-field-infix { mat-card {
margin-left: 1em; padding-bottom: 0px;
} }
.filter-category { .hidden {
background-color: #f6f6f6; display: none;
margin: 5px 0px;
} }
.category-title { .uploadButton {
color: black; float: right;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
} }
}
.import { .search ::ng-deep.mat-form-field-infix {
margin: 10px; margin-left: 1em;
padding: 0px; }
}
.filters { .filter-category {
border: 1px solid #e4e4e4; background-color: #f6f6f6;
border-radius: 5px; margin: 5px 0px;
} }
.filters-title { .category-title {
width: 90px; color: black;
color: #089dbb; // color: #089dbb;
background-color: white; margin-top: 8px;
padding: 0px 20px; margin-bottom: 12px;
margin-top: -10px; }
margin-left: 20px;
text-transform: uppercase;
}
.style-icon { .import {
color: #adadad; margin: 10px;
} padding: 0px;
}
.filters {
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.filters-title {
width: 90px;
// color: #089dbb;
color: #23bcba;
background-color: white;
padding: 0px 20px;
margin-top: -10px;
margin-left: 20px;
text-transform: uppercase;
}
.style-icon {
color: #adadad;
}
// ::ng-deep .mat-checkbox-inner-container { // ::ng-deep .mat-checkbox-inner-container {
// background: white; // background: white;
@ -73,48 +74,57 @@
// background-color: #00b29f !important; // background-color: #00b29f !important;
// } // }
::ng-deep .mat-checkbox { ::ng-deep .mat-checkbox {
background-color: #f6f6f6 !important; background-color: #f6f6f6 !important;
} }
::ng-deep .mat-checkbox .mat-checkbox-frame { ::ng-deep .mat-checkbox .mat-checkbox-frame {
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
} }
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate, .mat-accent .mat-pseudo-checkbox-indeterminate,
.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate { .mat-pseudo-checkbox-indeterminate {
background-color: #00b29f; background-color: #00b29f;
} }
::ng-deep .mat-ripple-element { ::ng-deep .mat-ripple-element {
background-color: #2e74b649 !important; background-color: #2e74b649 !important;
} }
::ng-deep .mat-radio-container { ::ng-deep .mat-radio-container {
border-radius: 1em; border-radius: 1em;
background: white; background: white;
} }
::ng-deep .mat-radio-button .mat-radio-outer-circle { ::ng-deep .mat-radio-button .mat-radio-outer-circle {
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
} }
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: #777777; border-color: #777777;
// border-color: #00b29f; // border-color: #00b29f;
} }
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
color: #777777; color: #777777;
background-color: #777777; background-color: #777777;
// color: #00b29f; // color: #00b29f;
// background-color: #00b29f; // background-color: #00b29f;
} }
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #2e74b649; background-color: #2e74b649;
} }
::ng-deep .search-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}