From 1d63ceca571787b20a9e599eb49b75215f375291 Mon Sep 17 00:00:00 2001 From: Maciej Kleban Date: Fri, 17 Nov 2023 17:11:08 +0100 Subject: [PATCH] Replace hard-coded colors with bootstrap variants * Replace custom variables with Bootstrap variants * Replace custom button colors with Bootstrap variants * Remove custom colors and replace them with bootstrap variants * Fix checkbox offset styles --------- Co-authored-by: Maciej Kleban --- .../dso-edit-metadata-value.component.scss | 16 -- src/app/shared/alert/alert.component.scss | 7 +- .../notification/notification.component.scss | 9 +- .../search-range-filter.component.scss | 6 +- .../submission-form-footer.component.scss | 15 -- src/styles/_custom_variables.scss | 20 +- src/styles/_global-styles.scss | 232 ++++++++++-------- .../_theme_sass_variable_overrides.scss | 2 +- 8 files changed, 151 insertions(+), 156 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss index e3bda1697a7..4a207ee1a4a 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss @@ -14,19 +14,3 @@ .cdk-drag-placeholder { opacity: 0; } - -.btn.btn-outline-warning:not(:disabled):hover { - background-color: #7f480c; -} -.btn.btn-success:not(:disabled):focus, .btn.btn-outline-success:not(:disabled):focus{ - outline: 2px solid rgba(43, 99, 47, 1) -} -.btn.btn-danger:not(:disabled):focus, .btn.btn-outline-danger:not(:disabled):focus{ - outline: 2px solid rgba(190, 114, 114, 1); -} -.btn.btn-warning:not(:disabled):focus, .btn.btn-outline-warning:not(:disabled):focus { - outline: 2px solid rgba(88, 87, 65, 1); -} -.btn.btn-primary:not(:disabled):focus, .btn.btn-outline-primary:not(:disabled):focus { - outline: 2px solid rgba(130, 135, 139, 1); -} diff --git a/src/app/shared/alert/alert.component.scss b/src/app/shared/alert/alert.component.scss index 7b225a47b55..907edae24bf 100644 --- a/src/app/shared/alert/alert.component.scss +++ b/src/app/shared/alert/alert.component.scss @@ -1,5 +1,8 @@ -.close:focus { - outline: none !important; +.close { + opacity: 0.75; + &:focus { + outline: none !important; + } } button.close { opacity: 0.6; diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss index aa0720afb70..ecfc25fee06 100644 --- a/src/app/shared/notifications/notification/notification.component.scss +++ b/src/app/shared/notifications/notification/notification.component.scss @@ -5,7 +5,8 @@ } .close { - outline: none !important + outline: none !important; + opacity: 0.8; } .notification-icon { @@ -30,9 +31,3 @@ .alert-warning .notification-progress-loader span { background: var(--ds-notification-bg-warning); } -.alert-success{ - color: var(--ds-notification-success-color); -} -.alert-danger { - color: var(--ds-notification-danger-color); -} diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss index 8d207dd023c..1240f356786 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss @@ -26,7 +26,7 @@ } .noUi-connect { - background: var(--ds-range-filter-connect-color); + background: var(--ds-slider-color); } .noUi-target { @@ -38,9 +38,9 @@ width: calc(100% + var(--ds-slider-handle-width)); } .noUi-handle { - border-color: var(--ds-range-filter-border-color); + border-color: var(--ds-slider-handle-color); &::before, &::after { - background-color: var(--ds-range-filter-border-color); + background-color: var(--ds-slider-handle-color); } } } diff --git a/src/app/submission/form/footer/submission-form-footer.component.scss b/src/app/submission/form/footer/submission-form-footer.component.scss index 6e6ae89b745..e69de29bb2d 100644 --- a/src/app/submission/form/footer/submission-form-footer.component.scss +++ b/src/app/submission/form/footer/submission-form-footer.component.scss @@ -1,15 +0,0 @@ -:host{ - .btn:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus, .custom-control-input:focus ~ .custom-control-label::before{ - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 0 0 0.2rem rgba(27, 41, 55, 0.6); - } - - .btn.btn-success:focus{ - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(0, 100, 0, 0.7) - } - .btn.btn-danger:focus{ - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(200, 0, 0, 0.7) - } - .btn.btn-warning:focus{ - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(89, 81, 0, 0.7) - } -} diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 683e4df0bba..37af68509e9 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -32,7 +32,7 @@ --ds-expandable-navbar-bg: var(--ds-navbar-bg); --ds-expandable-navbar-link-color: var(--ds-navbar-link-color); --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover); - + $admin-sidebar-bg: darken(#2B4E72, 17%); $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%); --ds-admin-sidebar-bg: #{$admin-sidebar-bg}; @@ -61,20 +61,7 @@ --ds-notification-bg-danger: #{darken(adjust-hue($danger, -10), 10%)}; --ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)}; --ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)}; - --ds-notification-success-color: #307B23; - --ds-notification-danger-color: #9a6e6e; - --ds-text-warning-color: #cf822c; - --ds-text-success-color: #74a030; - --ds-range-filter-border-color: #949494; - --ds-range-filter-connect-color: #63852e; - - --ds-badge-archived-background-color: #2a701e; - --ds-badge-archived-color: #000; - --ds-button-success-background-color: #358726; - --ds-button-success-background-hover-color: #{darken(#358726, 10%)}; - --ds-button-warning-background-color: #{darken($yellow, 20%)}; - --ds-button-warning-background-hover-color: #{darken($yellow, 30%)}; - + --ds-fa-fixed-width: #{$fa-fixed-width}; --ds-icon-padding: #{$icon-padding}; --ds-collapsed-sidebar-width: #{$collapsed-sidebar-width}; @@ -98,8 +85,9 @@ --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)}; --ds-breadcrumb-max-length: 200px; - --ds-slider-color: #{$green}; + --ds-slider-color: #{darken($green, 20%)}; --ds-slider-handle-width: 18px; + --ds-slider-handle-color: #{darken($blue, 17%)}; --ds-search-form-scope-max-width: 150px; diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index 42722e70fd4..27d11250b4a 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -222,57 +222,56 @@ ds-dynamic-form-control-container.d-none { } .badge-validation { - background-color: #{map-get($theme-colors, warning)}; + background-color: #{map-get($theme-colors, warning)}; } .badge-waiting-controller { - background-color: #{map-get($theme-colors, info)}; + background-color: #{map-get($theme-colors, info)}; } .badge-workspace { - background-color: #{map-get($theme-colors, primary)}; + background-color: #{map-get($theme-colors, primary)}; } .badge-archived { - background-color: var(--ds-badge-archived-background-color); - color: var(--ds-badge-archived-color) + background-color: darken($green, 25); } .badge-workflow { - background-color: #{map-get($theme-colors, info)}; + background-color: #{map-get($theme-colors, info)}; } .badge-item-type { - background-color: #{map-get($theme-colors, info)}; + background-color: #{map-get($theme-colors, info)}; } .visually-hidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; -} - -ul.dso-edit-menu-dropdown > li .nav-item.nav-link { - // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons) - padding: 0; - display: inline; + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +ul.dso-edit-menu-dropdown>li .nav-item.nav-link { + // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons) + padding: 0; + display: inline; } .table th, .table td { - vertical-align: middle; + vertical-align: middle; } .pt-0\.5 { padding-top: 0.125rem !important; } - + .pr-0\.5 { padding-right: 0.125rem !important; } @@ -295,85 +294,107 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link { padding-bottom: 0.125rem !important; } -.btn.btn-success{ - background-color: var(--ds-button-success-background-color); - border-color: var(--ds-button-success-background-color); - &:hover{ - background-color: var(--ds-button-success-background-hover-color); - border-color: var(--ds-button-success-background-hover-color); - } -} -.btn.btn-outline-success{ - border-color: var(--ds-button-success-background-color); - color: var(--ds-button-success-background-color); - &:hover{ - background-color: var(--ds-button-success-background-hover-color); - color: $white; - } -} -.btn.btn-outline-warning{ - border-color:var(--ds-button-warning-background-color); - color:var(--ds-button-warning-background-color); - &:hover{ - background-color:var(--ds-button-warning-background-hover-color); - color: $white; - } - &:disabled{ - background-color: transparent; - &:hover{ - color:var(--ds-button-warning-background-color); - } - } -} - - -.btn:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus, .custom-control-input:focus ~ .custom-control-label::before, .form-control:focus, .page-link:focus{ - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 0 0 0.2rem rgba(27, 41, 55, 0.5); -} - -.btn.btn-success:focus, .btn.btn-outline-success:focus{ - outline: 2px solid rgba(76, 145, 76, 1); - outline-offset: 2px; - box-shadow: none; -} -.btn.btn-danger:focus, .btn.btn-outline-danger:focus{ - outline: 2px solid rgba(205, 126, 126, 1); - outline-offset: 2px; - box-shadow: none; -} -.btn.btn-warning:focus, .btn.btn-outline-warning:focus { - outline: 2px solid rgba(88, 87, 65, 1); - outline-offset: 2px; - box-shadow: none; -} -.btn.btn-primary:focus, .btn.btn-outline-primary:focus { - box-shadow: none; - outline: 2px solid rgba(134, 137, 139, 1); - outline-offset: 2px; -} -.btn.btn-secondary:focus, .btn.btn-outline-secondary:focus { - box-shadow: none; - outline: 2px solid rgba(141, 148, 155, 1); - outline-offset: 2px; -} -.btn.btn-warning{ - background-color:var(--ds-button-warning-background-color); - &:hover{ - background-color:var(--ds-button-warning-background-hover-color); - } - &:disabled{ - background-color: transparent; - } +.btn { + &:focus { + outline-offset: 2px !important; + outline-style: solid !important; + outline-width: 2px !important; + box-shadow: none !important; + } + &:disabled { + opacity: 0.7; + } + &.btn-success { + background-color: darken($success, 20%); + border-color: darken($success, 20%); + &:hover { + background-color: darken($success, 30%); + border-color: darken($success, 30%); + } + &:focus { + outline-color: darken($success, 20%); + } + } + &.btn-outline-success { + border-color: darken($success, 20%); + color: darken($success, 20%); + + &:hover { + background-color: darken($success, 30%); + color: $white; + } + &:focus { + outline-color: darken($success, 20%); + } + } + &.btn-warning { + background-color: darken($warning, 20%); + &:hover { + background-color: darken($warning, 30%); + } + &:disabled { + background-color: transparent; + } + &:focus { + outline-color: darken($warning, 22%); + } + } + + &.btn-outline-warning { + border-color: darken($warning, 20%); + color: darken($warning, 20%); + &:hover { + background-color: darken($warning, 30%); + color: $white; + } + &:disabled { + background-color: transparent; + + &:hover { + color: darken($warning, 20%); + } + } + :focus { + outline-color: darken($warning, 22%); + } + &:not(:disabled):hover { + background-color: darken($warning, 22%); + } + } + + &.btn-secondary { + &:focus { + outline-color: darken($secondary, 20%); + } + } + + &.btn-danger:focus, &.btn-outline-danger:focus { + outline-color: darken($danger, 20%); + } + + &.btn-primary:focus, &.btn-outline-primary:focus { + outline-color: darken($primary, 5%); + } +} + +dynamic-ng-bootstrap-checkbox .custom-control-input:focus ~ .custom-control-label::before { + outline: 2px solid $gray-700 !important; + box-shadow: none !important; + outline-offset: 2px !important; } + dynamic-ng-bootstrap-checkbox .custom-control-label::before { - border-color: #858c91; + border-color: $gray-700; } + .text-warning { - color: var(--ds-text-warning-color) !important; + color: darken($warning, 10%) !important; } + .text-success { - color: var(--ds-text-success-color) !important; + color: darken($success, 11%) !important; } + ngb-accordion { a.close { opacity: 0.75; @@ -382,3 +403,22 @@ ngb-accordion { opacity: 0.9; } } + +.form-control, .page-link { + &:disabled::placeholder { + color: lighten($gray-700, 10%); + } + &:focus { + box-shadow: none; + outline: 2px solid lighten($gray-700, 10%); + outline-offset: 2px !important; + } +} + +.alert-success { + color: darken($success, 22%); +} + +.alert-danger { + color: darken($danger, 22%); +} diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss index b5799c97496..aaa27f6f9e7 100644 --- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss @@ -12,7 +12,7 @@ $navbar-dark-color: #FFFFFF; /* Reassign color vars to semantic color scheme */ $blue: #2b4e72 !default; $green: #92C642 !default; -$cyan: #207698 !default; +$cyan: #1e6f90 !default; $yellow: #ec9433 !default; $red: #CF4444 !default; $dark: #43515f !default;