From 07a2f3bbbb728ec51f77502a1a2771aeab4eb063 Mon Sep 17 00:00:00 2001 From: Dawnkai Date: Fri, 27 Oct 2023 14:32:50 +0200 Subject: [PATCH 1/2] Deque Analysis Color Contrast fixes --- .../dso-edit-metadata-value.component.scss | 16 +++ src/app/shared/alert/alert.component.scss | 3 + .../notification/notification.component.scss | 6 + .../search-range-filter.component.scss | 8 +- .../submission-form-footer.component.scss | 15 +++ src/styles/_bootstrap_variables.scss | 5 +- src/styles/_custom_variables.scss | 15 ++- src/styles/_global-styles.scss | 107 ++++++++++++++++-- 8 files changed, 161 insertions(+), 14 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 4a207ee1a4a..e3bda1697a7 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,3 +14,19 @@ .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 1a70081367a..7b225a47b55 100644 --- a/src/app/shared/alert/alert.component.scss +++ b/src/app/shared/alert/alert.component.scss @@ -1,3 +1,6 @@ .close: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 06c46b0f5d0..aa0720afb70 100644 --- a/src/app/shared/notifications/notification/notification.component.scss +++ b/src/app/shared/notifications/notification/notification.component.scss @@ -30,3 +30,9 @@ .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 b1cfa841f83..8d207dd023c 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-slider-color); + background: var(--ds-range-filter-connect-color); } .noUi-target { @@ -37,4 +37,10 @@ margin: 0 calc(-1 * (var(--ds-slider-handle-width) / 2)); width: calc(100% + var(--ds-slider-handle-width)); } + .noUi-handle { + border-color: var(--ds-range-filter-border-color); + &::before, &::after { + background-color: var(--ds-range-filter-border-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 e69de29bb2d..a435e5c3932 100644 --- a/src/app/submission/form/footer/submission-form-footer.component.scss +++ b/src/app/submission/form/footer/submission-form-footer.component.scss @@ -0,0 +1,15 @@ +: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/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss index 69b288905a1..f5051608fa7 100644 --- a/src/styles/_bootstrap_variables.scss +++ b/src/styles/_bootstrap_variables.scss @@ -34,10 +34,9 @@ $green: #94BA65 !default; $cyan: #006666 !default; $yellow: #ec9433 !default; $red: #CF4444 !default; +$teal: #1F7293 !default; $dark: darken($blue, 17%) !default; - - $theme-colors: ( primary: $blue, secondary: $gray-700, @@ -49,7 +48,7 @@ $theme-colors: ( dark: $dark ) !default; /* Fonts */ -$link-color: map-get($theme-colors, info) !default; +$link-color: $teal !default; $navbar-dark-color: rgba(white, .5) !default; $navbar-light-color: rgba(black, .5) !default; diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index ad9a074e1b4..b58e3a92a88 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -61,6 +61,19 @@ --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}; @@ -81,7 +94,7 @@ --ds-home-news-background-color: #{$gray-200}; --ds-breadcrumb-bg: #{$gray-200} !important; - --ds-breadcrumb-link-color: #{$cyan}; + --ds-breadcrumb-link-color: #{darken($cyan, 10%)}; --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)}; --ds-breadcrumb-max-length: 200px; diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index b6b2d143d42..ec2e68b328f 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -232,7 +232,8 @@ ds-dynamic-form-control-container.d-none { } .badge-archived { - background-color: #{map-get($theme-colors, success)}; + background-color: var(--ds-badge-archived-background-color); + color: var(--ds-badge-archived-color) } .badge-workflow { @@ -291,29 +292,117 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link { .pt-0\.5 { - padding-top: 0.125rem !important; + padding-top: 0.125rem !important; } .pr-0\.5 { - padding-right: 0.125rem !important; + padding-right: 0.125rem !important; } .pb-0\.5 { - padding-bottom: 0.125rem !important; + padding-bottom: 0.125rem !important; } .pl-0\.5 { - padding-left: 0.125rem !important; + padding-left: 0.125rem !important; } .px-0\.5 { - padding-left: 0.125rem !important; - padding-right: 0.125rem !important; + padding-left: 0.125rem !important; + padding-right: 0.125rem !important; } .py-0\.5 { - padding-top: 0.125rem !important; - padding-bottom: 0.125rem !important; + padding-top: 0.125rem !important; + 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; + } +} +dynamic-ng-bootstrap-checkbox .custom-control-label::before { + border-color: #858c91; +} +.text-warning { + color: var(--ds-text-warning-color) !important; +} +.text-success { + color: var(--ds-text-success-color) !important; +} +ngb-accordion { + a.close { + opacity: 0.75; + } + a.close:not(:disabled):not(.disabled):hover { + opacity: 0.9; + } } // Margin utility classes based on DSpace content spacing From 0b43109a2946d187c439110e42649cbee5512ae5 Mon Sep 17 00:00:00 2001 From: Maciej Kleban Date: Fri, 17 Nov 2023 17:11:08 +0100 Subject: [PATCH 2/2] 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 | 16 +- src/styles/_global-styles.scss | 232 ++++++++++-------- .../_theme_sass_variable_overrides.scss | 2 +- 8 files changed, 149 insertions(+), 154 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 a435e5c3932..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 b58e3a92a88..c10a875f571 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -61,19 +61,6 @@ --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}; @@ -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 ec2e68b328f..584d9269d17 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -220,51 +220,50 @@ 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; } /* Flexbox gap */ @@ -317,85 +316,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; @@ -405,10 +426,29 @@ ngb-accordion { } } +.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%); +} + // Margin utility classes based on DSpace content spacing .mt-cs { margin-top: var(--ds-content-spacing); } .mb-cs { margin-bottom: var(--ds-content-spacing); } .my-cs { margin-top: var(--ds-content-spacing); margin-bottom: var(--ds-content-spacing); } .mt-ncs { margin-top: calc(var(--ds-content-spacing) * -1); } .mb-ncs { margin-bottom: calc(var(--ds-content-spacing) * -1); } -.my-ncs { margin-top: calc(var(--ds-content-spacing) * -1); margin-bottom: calc(var(--ds-content-spacing) * -1); } +.my-ncs { margin-top: calc(var(--ds-content-spacing) * -1); margin-bottom: calc(var(--ds-content-spacing) * -1); } \ No newline at end of file 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;