diff --git a/projects/components/src/radio/radio-group.component.scss b/projects/components/src/radio/radio-group.component.scss index d4a80cd3d..a3948b5e9 100644 --- a/projects/components/src/radio/radio-group.component.scss +++ b/projects/components/src/radio/radio-group.component.scss @@ -1,3 +1,66 @@ -.radio-button { - padding-right: 16px; +@import 'color-palette'; +@import 'font'; + +.title { + @include body-2-medium($gray-7); + display: block; + padding-bottom: 11px; +} + +.radio-group { + ::ng-deep .radio-button { + line-height: 18px; + padding-right: 10px; + margin-bottom: 10px; + + &.mat-radio-checked { + .mat-radio-container { + height: 18px; + width: 18px; + + .mat-radio-outer-circle { + background: $blue-4; + height: 18px; + width: 18px; + } + + .mat-radio-outer-circle { + border-width: 0px; + } + + .mat-radio-inner-circle { + height: 16px; + width: 16px; + top: 1px; + left: 1px; + background: white; + } + } + } + + .mat-radio-container { + height: 18px; + width: 18px; + + .mat-radio-outer-circle { + border-color: $gray-2; + border-width: 1px; + height: 18px; + width: 18px; + } + + .mat-radio-label-content { + padding-left: 9px; + margin-top: 1px; + } + } + + .radio-button-label { + @include body-2-regular($gray-7); + } + } + + .radio-button:last-child { + margin-bottom: 0px; + } } diff --git a/projects/components/src/radio/radio-group.component.ts b/projects/components/src/radio/radio-group.component.ts index e1c68d293..42598663d 100644 --- a/projects/components/src/radio/radio-group.component.ts +++ b/projects/components/src/radio/radio-group.component.ts @@ -8,10 +8,15 @@ import { RadioOption } from './radio-option'; styleUrls: ['./radio-group.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` - - + + - + `