hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace hard-coded colors with bootstrap variants

Browse Source 
* 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 <maciej.kleban@pcgacademia.pl>
This commit is contained in:
Maciej Kleban
2023-11-17 17:11:08 +01:00
parent 7fbb692e94
commit c20b0a7c11
8 changed files with 143 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
View File

@@ -14,19 +14,3 @@
.cdk-drag-placeholder { .cdk-drag-placeholder {
opacity: 0; 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);
}

7
src/app/shared/alert/alert.component.scss
View File

@@ -1,5 +1,8 @@
.close:focus { .close {
outline: none !important; opacity: 0.75;
&:focus {
outline: none !important;
}
} }
button.close { button.close {
opacity: 0.6; opacity: 0.6;

9
src/app/shared/notifications/notification/notification.component.scss
View File

@@ -5,7 +5,8 @@
} }
.close { .close {
outline: none !important outline: none !important;
opacity: 0.8;
} }
.notification-icon { .notification-icon {
@@ -30,9 +31,3 @@
.alert-warning .notification-progress-loader span { .alert-warning .notification-progress-loader span {
background: var(--ds-notification-bg-warning); background: var(--ds-notification-bg-warning);
} }
.alert-success{
color: var(--ds-notification-success-color);
}
.alert-danger {
color: var(--ds-notification-danger-color);
}

6
src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
View File

@@ -26,7 +26,7 @@
} }
.noUi-connect { .noUi-connect {
background: var(--ds-range-filter-connect-color); background: var(--ds-slider-color);
} }
.noUi-target { .noUi-target {
@@ -38,9 +38,9 @@
width: calc(100% + var(--ds-slider-handle-width)); width: calc(100% + var(--ds-slider-handle-width));
} }
.noUi-handle { .noUi-handle {
border-color: var(--ds-range-filter-border-color); border-color: var(--ds-slider-handle-color);
&::before, &::after { &::before, &::after {
background-color: var(--ds-range-filter-border-color); background-color: var(--ds-slider-handle-color);
} }
} }
} }

15
src/app/submission/form/footer/submission-form-footer.component.scss
View File

@@ -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)
}
}

16
src/styles/_custom_variables.scss
View File

@@ -61,19 +61,6 @@
--ds-notification-bg-danger: #{darken(adjust-hue($danger, -10), 10%)}; --ds-notification-bg-danger: #{darken(adjust-hue($danger, -10), 10%)};
--ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)}; --ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)};
--ds-notification-bg-warning: #{darken(adjust-hue($warning, -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-fa-fixed-width: #{$fa-fixed-width};
--ds-icon-padding: #{$icon-padding}; --ds-icon-padding: #{$icon-padding};
@@ -98,8 +85,9 @@
--ds-breadcrumb-link-active-color: #{darken($cyan, 30%)}; --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
--ds-breadcrumb-max-length: 200px; --ds-breadcrumb-max-length: 200px;
--ds-slider-color: #{$green}; --ds-slider-color: #{darken($green, 20%)};
--ds-slider-handle-width: 18px; --ds-slider-handle-width: 18px;
--ds-slider-handle-color: #{darken($blue, 17%)};
--ds-search-form-scope-max-width: 150px; --ds-search-form-scope-max-width: 150px;

220
src/styles/_global-styles.scss
View File

@@ -222,51 +222,50 @@ ds-dynamic-form-control-container.d-none {
} }
.badge-validation { .badge-validation {
background-color: #{map-get($theme-colors, warning)}; background-color: #{map-get($theme-colors, warning)};
} }
.badge-waiting-controller { .badge-waiting-controller {
background-color: #{map-get($theme-colors, info)}; background-color: #{map-get($theme-colors, info)};
} }
.badge-workspace { .badge-workspace {
background-color: #{map-get($theme-colors, primary)}; background-color: #{map-get($theme-colors, primary)};
} }
.badge-archived { .badge-archived {
background-color: var(--ds-badge-archived-background-color); background-color: darken($green, 25);
color: var(--ds-badge-archived-color)
} }
.badge-workflow { .badge-workflow {
background-color: #{map-get($theme-colors, info)}; background-color: #{map-get($theme-colors, info)};
} }
.badge-item-type { .badge-item-type {
background-color: #{map-get($theme-colors, info)}; background-color: #{map-get($theme-colors, info)};
} }
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
padding: 0 !important; padding: 0 !important;
margin: -1px !important; margin: -1px !important;
overflow: hidden !important; overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important; clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important; white-space: nowrap !important;
border: 0 !important; border: 0 !important;
} }
ul.dso-edit-menu-dropdown > li .nav-item.nav-link { 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) // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons)
padding: 0; padding: 0;
display: inline; display: inline;
} }
.table th, .table th,
.table td { .table td {
vertical-align: middle; vertical-align: middle;
} }
.pt-0\.5 { .pt-0\.5 {
@@ -295,85 +294,107 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
padding-bottom: 0.125rem !important; padding-bottom: 0.125rem !important;
} }
.btn.btn-success{ .btn {
background-color: var(--ds-button-success-background-color); &:focus {
border-color: var(--ds-button-success-background-color); outline-offset: 2px !important;
&:hover{ outline-style: solid !important;
background-color: var(--ds-button-success-background-hover-color); outline-width: 2px !important;
border-color: var(--ds-button-success-background-hover-color); box-shadow: none !important;
} }
} &:disabled {
.btn.btn-outline-success{ opacity: 0.7;
border-color: var(--ds-button-success-background-color); }
color: var(--ds-button-success-background-color); &.btn-success {
&:hover{ background-color: darken($success, 20%);
background-color: var(--ds-button-success-background-hover-color); border-color: darken($success, 20%);
color: $white; &:hover {
} background-color: darken($success, 30%);
} border-color: darken($success, 30%);
.btn.btn-outline-warning{ }
border-color:var(--ds-button-warning-background-color); &:focus {
color:var(--ds-button-warning-background-color); outline-color: darken($success, 20%);
&:hover{ }
background-color:var(--ds-button-warning-background-hover-color); }
color: $white; &.btn-outline-success {
} border-color: darken($success, 20%);
&:disabled{ color: darken($success, 20%);
background-color: transparent;
&:hover{ &:hover {
color:var(--ds-button-warning-background-color); 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 {
.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{ outline: 2px solid $gray-700 !important;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 0 0 0.2rem rgba(27, 41, 55, 0.5); box-shadow: none !important;
outline-offset: 2px !important;
} }
.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 { dynamic-ng-bootstrap-checkbox .custom-control-label::before {
border-color: #858c91; border-color: $gray-700;
} }
.text-warning { .text-warning {
color: var(--ds-text-warning-color) !important; color: darken($warning, 10%) !important;
} }
.text-success { .text-success {
color: var(--ds-text-success-color) !important; color: darken($success, 11%) !important;
} }
ngb-accordion { ngb-accordion {
a.close { a.close {
opacity: 0.75; opacity: 0.75;
@@ -382,3 +403,22 @@ ngb-accordion {
opacity: 0.9; 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%);
}

2
src/themes/dspace/styles/_theme_sass_variable_overrides.scss
View File

@@ -12,7 +12,7 @@ $navbar-dark-color: #FFFFFF;
/* Reassign color vars to semantic color scheme */ /* Reassign color vars to semantic color scheme */
$blue: #2b4e72 !default; $blue: #2b4e72 !default;
$green: #92C642 !default; $green: #92C642 !default;
$cyan: #207698 !default; $cyan: #1e6f90 !default;
$yellow: #ec9433 !default; $yellow: #ec9433 !default;
$red: #CF4444 !default; $red: #CF4444 !default;
$dark: #43515f !default; $dark: #43515f !default;