diff options
Diffstat (limited to 'cds-ui/designer-client/src')
2 files changed, 30 insertions, 1 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index 495f8e19c..d93d49dba 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -172,6 +172,13 @@ (click)="selectProp(dict.name)"></td> --> </td> <td> + <div class="custom-control custom-checkbox reuiredInput"> + <input type="checkbox" class="custom-control-input" + id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)" + (click)="selectProp(dict.name)"> + <label class="custom-control-label" for="customCheck-{{dict.name}}"></label> + </div> + <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg"> <img *ngIf="!dict.definition?.property?.required" diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 2d7e23094..91b1f8652 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -18,7 +18,7 @@ body{ transition: 0.3s !important; } /*Bootstrap*/ -.custom-control-input:checked ~ .custom-control-label::before { +.custom-control-input:checked ~ .custom-control-label::before{ border-color: transparent !important; } .btn-outline-danger{ @@ -33,6 +33,28 @@ body{ border: solid 1px #C3CDDB !important; border-radius: 0 !important; } +.reuiredInput .custom-control-label::before{ + width: 18px !important; + height: 18px !important; + border-radius: 50% !important; +} + +.reuiredInput .custom-control-label::after{ + content: "_"; + color: #C4CEDB !important; + width: 18px !important; + height: 18px !important; + line-height: 6px; + text-align: center; +} +.reuiredInput .custom-control-input:checked ~ .custom-control-label::after{ + top: 4px !important; + left: -24px !important; + content: ""; +} +.reuiredInput .custom-control-input:checked ~ .custom-control-label::before{ + background: #66BB00 !important; +} .custom-control-input:checked ~ .custom-control-label::before{ background: #1B3E6F !important; } |