Skip to content

Commit 7fbb692

Browse files
DawnkaiDawnkai
committed
Deque Analysis Color Contrast fixes
1 parent ab17164 commit 7fbb692

8 files changed

Lines changed: 161 additions & 14 deletions

File tree

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,19 @@
1414
.cdk-drag-placeholder {
1515
opacity: 0;
1616
}
17+
18+
.btn.btn-outline-warning:not(:disabled):hover {
19+
background-color: #7f480c;
20+
}
21+
.btn.btn-success:not(:disabled):focus, .btn.btn-outline-success:not(:disabled):focus{
22+
outline: 2px solid rgba(43, 99, 47, 1)
23+
}
24+
.btn.btn-danger:not(:disabled):focus, .btn.btn-outline-danger:not(:disabled):focus{
25+
outline: 2px solid rgba(190, 114, 114, 1);
26+
}
27+
.btn.btn-warning:not(:disabled):focus, .btn.btn-outline-warning:not(:disabled):focus {
28+
outline: 2px solid rgba(88, 87, 65, 1);
29+
}
30+
.btn.btn-primary:not(:disabled):focus, .btn.btn-outline-primary:not(:disabled):focus {
31+
outline: 2px solid rgba(130, 135, 139, 1);
32+
}

‎src/app/shared/alert/alert.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
.close:focus {
22
outline: none !important;
33
}
4+
button.close {
5+
opacity: 0.6;
6+
}

‎src/app/shared/notifications/notification/notification.component.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,9 @@
3030
.alert-warning .notification-progress-loader span {
3131
background: var(--ds-notification-bg-warning);
3232
}
33+
.alert-success{
34+
color: var(--ds-notification-success-color);
35+
}
36+
.alert-danger {
37+
color: var(--ds-notification-danger-color);
38+
}

‎src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727

2828
.noUi-connect {
29-
background: var(--ds-slider-color);
29+
background: var(--ds-range-filter-connect-color);
3030
}
3131

3232
.noUi-target {
@@ -37,4 +37,10 @@
3737
margin: 0 calc(-1 * (var(--ds-slider-handle-width) / 2));
3838
width: calc(100% + var(--ds-slider-handle-width));
3939
}
40+
.noUi-handle {
41+
border-color: var(--ds-range-filter-border-color);
42+
&::before, &::after {
43+
background-color: var(--ds-range-filter-border-color);
44+
}
45+
}
4046
}

‎src/app/submission/form/footer/submission-form-footer.component.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
:host{
2+
.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{
3+
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 0 0 0.2rem rgba(27, 41, 55, 0.6);
4+
}
5+
6+
.btn.btn-success:focus{
7+
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)
8+
}
9+
.btn.btn-danger:focus{
10+
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)
11+
}
12+
.btn.btn-warning:focus{
13+
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)
14+
}
15+
}

‎src/styles/_bootstrap_variables.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,9 @@ $green: #94BA65 !default;
2626
$cyan: #006666 !default;
2727
$yellow: #ec9433 !default;
2828
$red: #CF4444 !default;
29+
$teal: #1F7293 !default;
2930
$dark: darken($blue, 17%) !default;
3031

31-
32-
3332
$theme-colors: (
3433
primary: $blue,
3534
secondary: $gray-700,
@@ -41,7 +40,7 @@ $theme-colors: (
4140
dark: $dark
4241
) !default;
4342
/* Fonts */
44-
$link-color: map-get($theme-colors, info) !default;
43+
$link-color: $teal !default;
4544

4645
$navbar-dark-color: rgba(white, .5) !default;
4746
$navbar-light-color: rgba(black, .5) !default;

‎src/styles/_custom_variables.scss‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,19 @@
6161
--ds-notification-bg-danger: #{darken(adjust-hue($danger, -10), 10%)};
6262
--ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)};
6363
--ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)};
64+
--ds-notification-success-color: #307B23;
65+
--ds-notification-danger-color: #9a6e6e;
66+
--ds-text-warning-color: #cf822c;
67+
--ds-text-success-color: #74a030;
68+
--ds-range-filter-border-color: #949494;
69+
--ds-range-filter-connect-color: #63852e;
70+
71+
--ds-badge-archived-background-color: #2a701e;
72+
--ds-badge-archived-color: #000;
73+
--ds-button-success-background-color: #358726;
74+
--ds-button-success-background-hover-color: #{darken(#358726, 10%)};
75+
--ds-button-warning-background-color: #{darken($yellow, 20%)};
76+
--ds-button-warning-background-hover-color: #{darken($yellow, 30%)};
6477

6578
--ds-fa-fixed-width: #{$fa-fixed-width};
6679
--ds-icon-padding: #{$icon-padding};
@@ -81,7 +94,7 @@
8194
--ds-home-news-background-color: #{$gray-200};
8295

8396
--ds-breadcrumb-bg: #{$gray-200} !important;
84-
--ds-breadcrumb-link-color: #{$cyan};
97+
--ds-breadcrumb-link-color: #{darken($cyan, 10%)};
8598
--ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
8699
--ds-breadcrumb-max-length: 200px;
87100

‎src/styles/_global-styles.scss‎

Lines changed: 98 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,8 @@ ds-dynamic-form-control-container.d-none {
234234
}
235235

236236
.badge-archived {
237-
background-color: #{map-get($theme-colors, success)};
237+
background-color: var(--ds-badge-archived-background-color);
238+
color: var(--ds-badge-archived-color)
238239
}
239240

240241
.badge-workflow {
@@ -269,27 +270,115 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
269270
}
270271

271272
.pt-0\.5 {
272-
padding-top: 0.125rem !important;
273+
padding-top: 0.125rem !important;
273274
}
274275

275276
.pr-0\.5 {
276-
padding-right: 0.125rem !important;
277+
padding-right: 0.125rem !important;
277278
}
278279

279280
.pb-0\.5 {
280-
padding-bottom: 0.125rem !important;
281+
padding-bottom: 0.125rem !important;
281282
}
282283

283284
.pl-0\.5 {
284-
padding-left: 0.125rem !important;
285+
padding-left: 0.125rem !important;
285286
}
286287

287288
.px-0\.5 {
288-
padding-left: 0.125rem !important;
289-
padding-right: 0.125rem !important;
289+
padding-left: 0.125rem !important;
290+
padding-right: 0.125rem !important;
290291
}
291292

292293
.py-0\.5 {
293-
padding-top: 0.125rem !important;
294-
padding-bottom: 0.125rem !important;
294+
padding-top: 0.125rem !important;
295+
padding-bottom: 0.125rem !important;
296+
}
297+
298+
.btn.btn-success{
299+
background-color: var(--ds-button-success-background-color);
300+
border-color: var(--ds-button-success-background-color);
301+
&:hover{
302+
background-color: var(--ds-button-success-background-hover-color);
303+
border-color: var(--ds-button-success-background-hover-color);
304+
}
305+
}
306+
.btn.btn-outline-success{
307+
border-color: var(--ds-button-success-background-color);
308+
color: var(--ds-button-success-background-color);
309+
&:hover{
310+
background-color: var(--ds-button-success-background-hover-color);
311+
color: $white;
312+
}
313+
}
314+
.btn.btn-outline-warning{
315+
border-color:var(--ds-button-warning-background-color);
316+
color:var(--ds-button-warning-background-color);
317+
&:hover{
318+
background-color:var(--ds-button-warning-background-hover-color);
319+
color: $white;
320+
}
321+
&:disabled{
322+
background-color: transparent;
323+
&:hover{
324+
color:var(--ds-button-warning-background-color);
325+
}
326+
}
327+
}
328+
329+
330+
.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{
331+
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 0 0 0.2rem rgba(27, 41, 55, 0.5);
332+
}
333+
334+
.btn.btn-success:focus, .btn.btn-outline-success:focus{
335+
outline: 2px solid rgba(76, 145, 76, 1);
336+
outline-offset: 2px;
337+
box-shadow: none;
338+
}
339+
.btn.btn-danger:focus, .btn.btn-outline-danger:focus{
340+
outline: 2px solid rgba(205, 126, 126, 1);
341+
outline-offset: 2px;
342+
box-shadow: none;
343+
}
344+
.btn.btn-warning:focus, .btn.btn-outline-warning:focus {
345+
outline: 2px solid rgba(88, 87, 65, 1);
346+
outline-offset: 2px;
347+
box-shadow: none;
348+
}
349+
.btn.btn-primary:focus, .btn.btn-outline-primary:focus {
350+
box-shadow: none;
351+
outline: 2px solid rgba(134, 137, 139, 1);
352+
outline-offset: 2px;
353+
}
354+
.btn.btn-secondary:focus, .btn.btn-outline-secondary:focus {
355+
box-shadow: none;
356+
outline: 2px solid rgba(141, 148, 155, 1);
357+
outline-offset: 2px;
358+
}
359+
.btn.btn-warning{
360+
background-color:var(--ds-button-warning-background-color);
361+
&:hover{
362+
background-color:var(--ds-button-warning-background-hover-color);
363+
}
364+
&:disabled{
365+
background-color: transparent;
366+
}
367+
}
368+
dynamic-ng-bootstrap-checkbox .custom-control-label::before {
369+
border-color: #858c91;
370+
}
371+
.text-warning {
372+
color: var(--ds-text-warning-color) !important;
373+
}
374+
.text-success {
375+
color: var(--ds-text-success-color) !important;
376+
}
377+
ngb-accordion {
378+
a.close {
379+
opacity: 0.75;
380+
}
381+
a.close:not(:disabled):not(.disabled):hover {
382+
opacity: 0.9;
383+
}
295384
}

0 commit comments

Comments
 (0)