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..6e6ae89b745 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 5dfc03fbd36..6b236647994 100644 --- a/src/styles/_bootstrap_variables.scss +++ b/src/styles/_bootstrap_variables.scss @@ -26,9 +26,9 @@ $green: #94BA65 !default; $cyan: #006666 !default; $yellow: #ec9433 !default; $red: #CF4444 !default; -$dark: darken($blue, 17%) !default; - +$teal: #1F7293 !default; +$dark: darken($blue, 17%) !default; $theme-colors: ( primary: $blue, @@ -41,7 +41,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 778ef6e9e3a..683e4df0bba 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,7 +61,20 @@ --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}; @@ -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 00fcb0f86f1..388e9e68a6f 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -234,7 +234,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 { @@ -269,27 +270,101 @@ 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; -} - -.pl-0\.5 { - padding-left: 0.125rem !important; -} - -.px-0\.5 { - padding-left: 0.125rem !important; - padding-right: 0.125rem !important; -} - -.py-0\.5 { - padding-top: 0.125rem !important; - padding-bottom: 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; + } }