Skip to content

Commit c20b0a7

Browse files
DawnkaiMaciej Kleban
Dawnkai
and
Maciej Kleban
committed
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 <maciej.kleban@pcgacademia.pl>
1 parent 7fbb692 commit c20b0a7

8 files changed

Lines changed: 148 additions & 153 deletions

File tree

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,3 @@
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: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
.close:focus {
2-
outline: none !important;
1+
.close {
2+
opacity: 0.75;
3+
&:focus {
4+
outline: none !important;
5+
}
36
}
47
button.close {
58
opacity: 0.6;

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
}
66

77
.close {
8-
outline: none !important
8+
outline: none !important;
9+
opacity: 0.8;
910
}
1011

1112
.notification-icon {
@@ -30,9 +31,3 @@
3031
.alert-warning .notification-progress-loader span {
3132
background: var(--ds-notification-bg-warning);
3233
}
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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727

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

3232
.noUi-target {
@@ -38,9 +38,9 @@
3838
width: calc(100% + var(--ds-slider-handle-width));
3939
}
4040
.noUi-handle {
41-
border-color: var(--ds-range-filter-border-color);
41+
border-color: var(--ds-slider-handle-color);
4242
&::before, &::after {
43-
background-color: var(--ds-range-filter-border-color);
43+
background-color: var(--ds-slider-handle-color);
4444
}
4545
}
4646
}

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +0,0 @@
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/_custom_variables.scss‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -61,19 +61,6 @@
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%)};
7764

7865
--ds-fa-fixed-width: #{$fa-fixed-width};
7966
--ds-icon-padding: #{$icon-padding};
@@ -98,8 +85,9 @@
9885
--ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
9986
--ds-breadcrumb-max-length: 200px;
10087

101-
--ds-slider-color: #{$green};
88+
--ds-slider-color: #{darken($green, 20%)};
10289
--ds-slider-handle-width: 18px;
90+
--ds-slider-handle-color: #{darken($blue, 17%)};
10391

10492
--ds-search-form-scope-max-width: 150px;
10593

‎src/styles/_global-styles.scss‎

Lines changed: 135 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -222,51 +222,50 @@ ds-dynamic-form-control-container.d-none {
222222
}
223223

224224
.badge-validation {
225-
background-color: #{map-get($theme-colors, warning)};
225+
background-color: #{map-get($theme-colors, warning)};
226226
}
227227

228228
.badge-waiting-controller {
229-
background-color: #{map-get($theme-colors, info)};
229+
background-color: #{map-get($theme-colors, info)};
230230
}
231231

232232
.badge-workspace {
233-
background-color: #{map-get($theme-colors, primary)};
233+
background-color: #{map-get($theme-colors, primary)};
234234
}
235235

236236
.badge-archived {
237-
background-color: var(--ds-badge-archived-background-color);
238-
color: var(--ds-badge-archived-color)
237+
background-color: darken($green, 25);
239238
}
240239

241240
.badge-workflow {
242-
background-color: #{map-get($theme-colors, info)};
241+
background-color: #{map-get($theme-colors, info)};
243242
}
244243

245244
.badge-item-type {
246-
background-color: #{map-get($theme-colors, info)};
245+
background-color: #{map-get($theme-colors, info)};
247246
}
248247

249248
.visually-hidden {
250-
position: absolute !important;
251-
width: 1px !important;
252-
height: 1px !important;
253-
padding: 0 !important;
254-
margin: -1px !important;
255-
overflow: hidden !important;
256-
clip: rect(0, 0, 0, 0) !important;
257-
white-space: nowrap !important;
258-
border: 0 !important;
259-
}
260-
261-
ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
262-
// ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons)
263-
padding: 0;
264-
display: inline;
249+
position: absolute !important;
250+
width: 1px !important;
251+
height: 1px !important;
252+
padding: 0 !important;
253+
margin: -1px !important;
254+
overflow: hidden !important;
255+
clip: rect(0, 0, 0, 0) !important;
256+
white-space: nowrap !important;
257+
border: 0 !important;
258+
}
259+
260+
ul.dso-edit-menu-dropdown>li .nav-item.nav-link {
261+
// ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons)
262+
padding: 0;
263+
display: inline;
265264
}
266265

267266
.table th,
268267
.table td {
269-
vertical-align: middle;
268+
vertical-align: middle;
270269
}
271270

272271
.pt-0\.5 {
@@ -295,85 +294,107 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
295294
padding-bottom: 0.125rem !important;
296295
}
297296

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-
}
297+
.btn {
298+
&:focus {
299+
outline-offset: 2px !important;
300+
outline-style: solid !important;
301+
outline-width: 2px !important;
302+
box-shadow: none !important;
303+
}
304+
&:disabled {
305+
opacity: 0.7;
306+
}
307+
&.btn-success {
308+
background-color: darken($success, 20%);
309+
border-color: darken($success, 20%);
310+
&:hover {
311+
background-color: darken($success, 30%);
312+
border-color: darken($success, 30%);
313+
}
314+
&:focus {
315+
outline-color: darken($success, 20%);
316+
}
317+
}
318+
&.btn-outline-success {
319+
border-color: darken($success, 20%);
320+
color: darken($success, 20%);
321+
322+
&:hover {
323+
background-color: darken($success, 30%);
324+
color: $white;
325+
}
326+
&:focus {
327+
outline-color: darken($success, 20%);
328+
}
329+
}
330+
&.btn-warning {
331+
background-color: darken($warning, 20%);
332+
&:hover {
333+
background-color: darken($warning, 30%);
334+
}
335+
&:disabled {
336+
background-color: transparent;
337+
}
338+
&:focus {
339+
outline-color: darken($warning, 22%);
340+
}
341+
}
342+
343+
&.btn-outline-warning {
344+
border-color: darken($warning, 20%);
345+
color: darken($warning, 20%);
346+
&:hover {
347+
background-color: darken($warning, 30%);
348+
color: $white;
349+
}
350+
&:disabled {
351+
background-color: transparent;
352+
353+
&:hover {
354+
color: darken($warning, 20%);
355+
}
356+
}
357+
:focus {
358+
outline-color: darken($warning, 22%);
359+
}
360+
&:not(:disabled):hover {
361+
background-color: darken($warning, 22%);
362+
}
363+
}
364+
365+
&.btn-secondary {
366+
&:focus {
367+
outline-color: darken($secondary, 20%);
368+
}
369+
}
370+
371+
&.btn-danger:focus, &.btn-outline-danger:focus {
372+
outline-color: darken($danger, 20%);
373+
}
374+
375+
&.btn-primary:focus, &.btn-outline-primary:focus {
376+
outline-color: darken($primary, 5%);
377+
}
378+
}
379+
380+
dynamic-ng-bootstrap-checkbox .custom-control-input:focus ~ .custom-control-label::before {
381+
outline: 2px solid $gray-700 !important;
382+
box-shadow: none !important;
383+
outline-offset: 2px !important;
367384
}
385+
368386
dynamic-ng-bootstrap-checkbox .custom-control-label::before {
369-
border-color: #858c91;
387+
border-color: $gray-700;
370388
}
389+
371390
.text-warning {
372-
color: var(--ds-text-warning-color) !important;
391+
color: darken($warning, 10%) !important;
373392
}
393+
374394
.text-success {
375-
color: var(--ds-text-success-color) !important;
395+
color: darken($success, 11%) !important;
376396
}
397+
377398
ngb-accordion {
378399
a.close {
379400
opacity: 0.75;
@@ -382,3 +403,22 @@ ngb-accordion {
382403
opacity: 0.9;
383404
}
384405
}
406+
407+
.form-control, .page-link {
408+
&:disabled::placeholder {
409+
color: lighten($gray-700, 10%);
410+
}
411+
&:focus {
412+
box-shadow: none;
413+
outline: 2px solid lighten($gray-700, 10%);
414+
outline-offset: 2px !important;
415+
}
416+
}
417+
418+
.alert-success {
419+
color: darken($success, 22%);
420+
}
421+
422+
.alert-danger {
423+
color: darken($danger, 22%);
424+
}

0 commit comments

Comments
 (0)