[ACA-4712] disallow using important for styles (#3368)

* ACA-4712 Added rule to prevent using important for styles

* ACA-4712 Removed important from some global styles and from manage rule component

* ACA-4712 Removed important from rest global and theme styles

* ACA-4712 Removed usages of important from styles for components
This commit is contained in:
AleksanderSklorz 2023-07-26 09:43:14 +02:00 committed by GitHub
parent 4019508f0f
commit 5508ff1362
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 135 additions and 121 deletions

View File

@ -9,6 +9,7 @@
{ {
"resolveNestedSelectors": true "resolveNestedSelectors": true
} }
] ],
"declaration-no-important": true
} }
} }

View File

@ -10,7 +10,6 @@
&__title { &__title {
align-items: center; align-items: center;
width: unset !important;
flex: 1; flex: 1;
} }
@ -89,11 +88,6 @@
padding: 0 8px; padding: 0 8px;
min-width: unset; min-width: unset;
} }
.mat-icon {
// Something pops out of this button for some reason so this is necessary
overflow: hidden !important;
}
} }
} }
} }

View File

@ -22,7 +22,7 @@ $top-margin: 12px;
font-size: 16px; font-size: 16px;
padding-left: 15px; padding-left: 15px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 12px !important; margin-bottom: 12px;
.mat-form-field { .mat-form-field {
font-size: 16px; font-size: 16px;

View File

@ -9,7 +9,10 @@ $top-margin: 12px;
width: 100%; width: 100%;
max-width: $search-width; max-width: $search-width;
height: $search-height + $top-margin; height: $search-height + $top-margin;
margin: 0 !important;
&.mat-menu-trigger {
margin: 0;
}
.app-search-button { .app-search-button {
width: 32px; width: 32px;
@ -23,9 +26,11 @@ $top-margin: 12px;
.app-close-icon { .app-close-icon {
height: 6px; height: 6px;
.mat-icon { &.app-suffix-search-icon-wrapper {
font-size: 18px !important; .mat-icon {
line-height: 28px; font-size: 18px;
line-height: 28px;
}
} }
} }
@ -70,8 +75,8 @@ mat-checkbox {
background-color: $search-background; background-color: $search-background;
border-radius: $search-border-radius; border-radius: $search-border-radius;
height: $search-height; height: $search-height;
margin-bottom: 0 !important; margin-bottom: 0;
padding-bottom: 26px !important; padding-bottom: 26px;
} }
.app-search-control { .app-search-control {

View File

@ -16,12 +16,12 @@
.link:hover, .link:hover,
.aca-location-link .adf-datatable-cell-value:hover { .aca-location-link .adf-datatable-cell-value:hover {
color: var(--theme-primary-color) !important; color: var(--theme-primary-color);
text-decoration: underline; text-decoration: underline;
} }
.adf-is-selected .link:not(:hover), .adf-is-selected .link:not(:hover),
.adf-is-selected .adf-datatable-cell-value:not(:hover) { .adf-is-selected .adf-datatable-cell-value:not(:hover) {
color: var(--theme-primary-color) !important; color: var(--theme-primary-color);
} }
} }

View File

@ -22,7 +22,7 @@
[acaExpansionPanel]="item" [acaExpansionPanel]="item"
[@.disabled]="true" [@.disabled]="true"
> >
<mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" role="group"> <mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group">
<mat-panel-title> <mat-panel-title>
<div class="item"> <div class="item">
<button <button

View File

@ -52,7 +52,6 @@
border-radius: 0; border-radius: 0;
&-header { &-header {
height: 32px !important;
padding: 0 32px 0 0; padding: 0 32px 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -66,7 +65,7 @@
.mat-button { .mat-button {
line-height: 32px; line-height: 32px;
align-items: center; align-items: center;
border: none !important; border: none;
} }
.action-button__label { .action-button__label {
@ -99,7 +98,7 @@
} }
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
background: none !important; background: none;
} }
.item { .item {
@ -128,7 +127,7 @@
} }
.action-button--active { .action-button--active {
color: var(--theme-selected-text-color) !important; color: var(--theme-selected-text-color);
background: var(--theme-selected-background-color); background: var(--theme-selected-background-color);
} }
} }

View File

@ -83,9 +83,9 @@ app-view-profile {
} }
.app-selected:focus { .app-selected:focus {
border: 2px solid var(--theme-blue-button-color) !important; border: 2px solid var(--theme-blue-button-color);
border-radius: 6px; border-radius: 6px;
outline: none !important; outline: none;
box-shadow: 0 0 2px var(--theme-blue-button-color); box-shadow: 0 0 2px var(--theme-blue-button-color);
} }

View File

@ -20,10 +20,6 @@ body {
} }
} }
.mat-icon {
overflow: unset !important;
}
[dir='rtl'] .mat-icon { [dir='rtl'] .mat-icon {
transform: scale(-1, 1); transform: scale(-1, 1);
} }

View File

@ -82,13 +82,13 @@
@mixin base-font-size($font-size) { @mixin base-font-size($font-size) {
html, html,
body { body {
font-size: $font-size !important; font-size: $font-size;
} }
} }
@mixin base-font-family($font-family) { @mixin base-font-family($font-family) {
html, html,
body { body {
font-family: $font-family !important; font-family: $font-family;
} }
} }

View File

@ -21,6 +21,6 @@
} }
@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) { @mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
border: $thickness solid $border-color !important; border: $thickness solid $border-color;
border-radius: $radius; border-radius: $radius;
} }

View File

@ -5,21 +5,23 @@
background-color: var(--theme-about-panel-background-color); background-color: var(--theme-about-panel-background-color);
overflow: auto; overflow: auto;
mat-accordion { .mat-accordion {
box-shadow: none !important; box-shadow: none;
border: none !important; border: none;
&.adf-about-panel {
.mat-expansion-panel {
box-shadow: none;
border-radius: 12px;
margin: 24px;
width: 95%;
border: 1px solid var(--theme-about-panel-border-color);
}
}
} }
mat-expansion-panel { .mat-expansion-panel-header {
box-shadow: none !important; height: 80px;
border-radius: 12px !important;
margin: 24px !important;
width: 95%;
border: 1px solid var(--theme-about-panel-border-color);
}
mat-expansion-panel-header {
height: 80px !important;
line-height: 32px; line-height: 32px;
} }

View File

@ -1,45 +1,47 @@
@mixin adf-pagination-theme($theme) { @mixin adf-pagination-theme($theme) {
.adf-pagination__block { adf-pagination {
flex: none !important; &.adf-pagination {
padding: 0 !important; height: 32px;
font-weight: 400; line-height: 24px;
font-size: 14px; padding: 16px 0;
line-height: 24px;
letter-spacing: 0.25px;
}
.adf-pagination { .adf-pagination__block {
height: 32px !important; flex: none;
line-height: 24px !important; padding: 0;
padding: 16px 0; font-weight: 400;
} font-size: 14px;
line-height: 24px;
letter-spacing: 0.25px;
.adf-pagination__range-block { &.adf-pagination__range-block {
padding: 0 24px !important; padding: 0 24px;
} }
}
.adf-pagination__perpage-block { .adf-pagination__perpage-block {
flex: auto !important; flex: auto;
padding-right: 24px !important; padding-right: 24px;
} }
.adf-pagination__actualinfo-block { .adf-pagination__actualinfo-block {
padding-right: 12px !important; padding-right: 12px;
.mat-menu-trigger { .mat-menu-trigger {
display: none !important; display: none;
}
}
.adf-pagination__previous-button {
margin: 0 12px 0 0;
}
.adf-pagination__next-button {
margin: 0;
}
.adf-pagination__controls-block {
padding-right: 24px;
}
} }
} }
.adf-pagination__previous-button {
margin: 0 12px 0 0 !important;
}
.adf-pagination__next-button {
margin: 0 !important;
}
.adf-pagination__controls-block {
padding-right: 24px !important;
}
} }

View File

@ -11,8 +11,4 @@
display: none; display: none;
} }
} }
adf-share-dialog .mat-form-field-label-wrapper label {
display: none !important;
}
} }

View File

@ -27,8 +27,8 @@
} }
} }
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected > svg { .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
fill: var(--theme-blue-button-color) !important; fill: var(--theme-blue-button-color);
} }
.mat-list-base .mat-list-option { .mat-list-base .mat-list-option {
@ -45,9 +45,9 @@
} }
} }
.adf-search-user-button, .adf-search-user-button.mat-button,
.app-search-button { .app-search-button {
line-height: 36px !important; line-height: 36px;
@include rounded-border(transparent); @include rounded-border(transparent);
@ -58,21 +58,23 @@
} }
} }
.mat-menu-item { .mat-menu-content {
.mat-menu-ripple { .mat-menu-item {
display: none; .mat-menu-ripple {
} display: none;
}
@include rounded-border(transparent); @include rounded-border(transparent);
&:focus-visible { &:focus-visible {
@include rounded-border; @include rounded-border;
background-color: white; background-color: white;
} }
&.cdk-keyboard-focused:not([disabled]) { &.cdk-keyboard-focused:not([disabled]) {
background-color: white; background-color: white;
}
} }
} }
@ -141,7 +143,7 @@
} }
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) { .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
background-color: var(--theme-datetimepicker-cell-background) !important; background-color: var(--theme-datetimepicker-cell-background);
} }
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected { .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
@ -156,7 +158,7 @@
.mat-expansion-panel .mat-expansion-panel-header { .mat-expansion-panel .mat-expansion-panel-header {
border: 2px solid transparent; border: 2px solid transparent;
.mat-button { .mat-button-base.mat-button {
outline: none; outline: none;
@include rounded-border(transparent); @include rounded-border(transparent);
@ -193,8 +195,10 @@
} }
} }
.adf-filter-button { .mat-button-base {
margin-left: -2px !important; &.adf-filter-button {
margin-left: -2px;
}
} }
.adf-pagination { .adf-pagination {

View File

@ -10,29 +10,43 @@ $contrast-gray: #646569;
color: var(--theme-text-color, rgba(0, 0, 0, 0.54)); color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
} }
.adf-name-location-cell-location { .adf-name-location-cell-location.adf-datatable-cell-value {
color: $contrast-gray !important; color: $contrast-gray;
} }
.mat-form-field-label, .mat-tab-label, .mat-checkbox-label, .mat-toolbar { .mat-tab-list {
color: $contrast-gray !important; .mat-tab-labels {
opacity: 1 !important; .mat-tab-label {
&.mat-tab-label-active {
color: #212121;
}
}
}
} }
.mat-tab-label-active { .mat-form-field-label-wrapper .mat-form-field-label,
color: #212121 !important; .mat-tab-list .mat-tab-labels .mat-tab-label,
.mat-checkbox-label,
mat-toolbar.mat-toolbar.mat-toolbar-multiple-row,
mat-toolbar.mat-toolbar.mat-toolbar-single-row {
color: $contrast-gray;
opacity: 1;
} }
.adf-upload-dialog { .adf-upload-dialog {
&__header, &__content { &__header,
&__content {
color: $contrast-gray; color: $contrast-gray;
} }
} }
.adf-version-list-item { .adf-version-list {
&-comment, &-date { .adf-version-list-item {
color: $contrast-gray; &-comment,
opacity: 1 !important; &-date {
color: $contrast-gray;
opacity: 1;
}
} }
} }
@ -41,15 +55,16 @@ $contrast-gray: #646569;
color: $contrast-gray; color: $contrast-gray;
} }
.adf-textitem-edit-icon.mat-icon { .adf-property-field {
color: $contrast-gray !important; .adf-textitem-edit-icon.mat-icon {
color: $contrast-gray;
}
} }
.adf-property-field.adf-card-textitem-field:hover .adf-property-clear-value { .adf-property-field.adf-card-textitem-field:hover .adf-property-clear-value {
color: $contrast-gray !important; color: $contrast-gray;
} }
.adf-empty-content__icon { .adf-empty-content__icon {
color: $contrast-gray; color: $contrast-gray;
} }

View File

@ -8,7 +8,7 @@ $background: map-get($custom-theme, background);
$data-table-thumbnail-width: 35px; $data-table-thumbnail-width: 35px;
$data-table-cell-min-width: 150px; $data-table-cell-min-width: 150px;
$data-table-cell-min-width-no-grow: 120px; $data-table-cell-min-width-no-grow: 120px;
$data-table-cell-min-width-file-size: 110px !important; $data-table-cell-min-width-file-size: 110px;
// Upload drag // Upload drag
$adf-upload-dragging-color: unset; $adf-upload-dragging-color: unset;

View File

@ -48,10 +48,10 @@
} }
.scrollable { .scrollable {
overflow: auto !important; overflow: auto;
.main-content { .main-content {
overflow: auto !important; overflow: auto;
} }
} }
} }