From 295d35698417a0eddb815a707075d631847fdeb8 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 7 Dec 2021 11:49:46 +0100
Subject: [PATCH] Change radio button color to dark green
For all elements using radio buttons.
---
.../likert/likert-radio-button-group.component.ts | 7 ++++++-
.../radio-with-images/radio-group-images.component.ts | 5 ++++-
.../ui-elements/radio/radio-button-group.component.ts | 5 ++++-
3 files changed, 14 insertions(+), 3 deletions(-)
diff --git a/projects/common/ui-elements/likert/likert-radio-button-group.component.ts b/projects/common/ui-elements/likert/likert-radio-button-group.component.ts
index 8162cc539..f81a243e8 100644
--- a/projects/common/ui-elements/likert/likert-radio-button-group.component.ts
+++ b/projects/common/ui-elements/likert/likert-radio-button-group.component.ts
@@ -26,7 +26,12 @@ import { LikertElementRow } from './likert-element-row';
[style.grid-row-end]="2">
</mat-radio-button>
</mat-radio-group>
- `
+ `,
+ styles: [
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-outer-circle {border-color: #006064 !important}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-inner-circle {background-color: #006064 !important}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-ripple-element {background-color: #006064 !important}'
+ ]
})
export class LikertRadioButtonGroupComponent extends FormElementComponent {
@Input() elementModel!: LikertElementRow;
diff --git a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
index 7bc4d3250..d6a7fe1c8 100644
--- a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
+++ b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
@@ -71,7 +71,10 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'::ng-deep app-radio-group-images mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}',
'mat-radio-group {margin-top: 10px}',
'.error-message { font-size: 75% }',
- '.grid-layout mat-radio-button {margin-top: 15px}'
+ '.grid-layout mat-radio-button {margin-top: 15px}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-outer-circle {border-color: #006064 !important}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-inner-circle {background-color: #006064 !important}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-ripple-element {background-color: #006064 !important}'
]
})
export class RadioGroupImagesComponent extends FormElementComponent {
diff --git a/projects/common/ui-elements/radio/radio-button-group.component.ts b/projects/common/ui-elements/radio/radio-button-group.component.ts
index e5014eaa5..40e1d398f 100644
--- a/projects/common/ui-elements/radio/radio-button-group.component.ts
+++ b/projects/common/ui-elements/radio/radio-button-group.component.ts
@@ -46,7 +46,10 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
'.error-message { font-size: 75% }',
'::ng-deep app-radio-button-group .strike .mat-radio-label {text-decoration: line-through}',
'::ng-deep app-radio-button-group .mat-radio-label {align-items: baseline}',
- '::ng-deep app-radio-button-group mat-radio-button .mat-radio-label .mat-radio-container {top: 4px;}'
+ '::ng-deep app-radio-button-group mat-radio-button .mat-radio-label .mat-radio-container {top: 4px;}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-outer-circle {border-color: #006064 !important}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-inner-circle {background-color: #006064 !important}',
+ ':host ::ng-deep mat-radio-button .mat-radio-label .mat-ripple-element {background-color: #006064 !important}'
]
})
export class RadioButtonGroupComponent extends FormElementComponent {
--
GitLab