Skip to content
Snippets Groups Projects
Commit 9819f03b authored by jojohoch's avatar jojohoch
Browse files

Replace Flex layout module with classes in RadioGroupImagesComponent

- Reformat styles
parent 342d6f44
No related branches found
No related tags found
No related merge requests found
......@@ -16,7 +16,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[value]="elementModel.value">
<mat-radio-button *ngFor="let option of elementModel.options; let i = index"
[style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
fxLayout="column" fxLayoutAlign="end center"
class="fx-column-end-center"
[value]="i">
<img *ngIf="option.imgSrc && (option.imgPosition === 'above' || option.imgPosition === 'left')"
[style.object-fit]="'scale-down'"
......@@ -41,14 +41,34 @@ import { FormElementComponent } from '../../directives/form-element-component.di
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
`,
styles: [
'mat-radio-group {display: grid}',
':host ::ng-deep .mat-radio-label {flex-direction: column-reverse;}',
':host ::ng-deep .mat-radio-label .mat-radio-container {margin-top: 15px; margin-left: 10px;}',
':host ::ng-deep .mat-radio-label .mat-radio-label-content {text-align: center;}',
'mat-radio-button {margin-bottom: 60px;}',
'.error-message { font-size: 75% }'
]
styles: [`
mat-radio-group {
display: grid;
}
:host ::ng-deep .mat-radio-label {
flex-direction: column-reverse;
}
:host ::ng-deep .mat-radio-label .mat-radio-container {
margin-top: 15px;
margin-left: 10px;
}
:host ::ng-deep .mat-radio-label .mat-radio-label-content {
text-align: center;
}
mat-radio-button {
margin-bottom: 60px;
}
.error-message {
font-size: 75%;
}
.fx-column-end-center {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
`]
})
export class RadioGroupImagesComponent extends FormElementComponent {
@Input() elementModel!: RadioButtonGroupComplexElement;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment