v8: Adjust new styles of checkboxes/radiobuttons

In noticed the updated/custom styles of checkboxes/radiobuttons in latest v8.

I think the umb-form-check should use display: inline-flex or similar fix, so the checkbox/radiobutton labels isn’t stretched to full width.

.umb-form-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding: 0;
    margin: 0;
    min-height: 22px;
    cursor: pointer!important;
}

Furthermore it seems to top position can just be set to 0 and add margin-top: 1px; for umb-form-check__state.

.umb-form-check__state {
    height: 17px;
    position: absolute;
    top: 2px;
    left: 0;
}
.umb-form-check__text {
    margin: 0 0 0 26px;
    position: relative;
    top: -1px;
    line-height: 20px;
}

Chrome

IE11

With this change it also looks nicer in IE with this change + line-height: 22px; .

.umb-form-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding: 0;
    margin: 0;
    min-height: 22px;
    line-height: 22px;
    cursor: pointer!important;
}
.umb-form-check__state {
    height: 17px;
    position: absolute;
    top: 0;
    left: 0;
}
.umb-form-check__text {
    margin: 0 0 0 26px;
    position: relative;
    top: 0;
    line-height: 20px;
}
.umb-form-check__icon:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

IE

[bjarnef]

Furtermore I don’t think it is valid to have <div> nested inside <label> and should therefore be changed to <span> instead.

<label class="checkbox umb-form-check umb-form-check--checkbox">
    <input type="checkbox" name="{{name}}"
           value="{{value}}"
           ng-model="model.checked"
           class="umb-form-check__input"
           ng-required="required"
           ng-change="onChange(model)"/>

    <div class="umb-form-check__state umb-form-check__state" aria-hidden="true">
        <div class="umb-form-check__check">
            <i class="umb-form-check__icon icon-check"></i>
        </div>
    </div>
    <span class="umb-form-check__text">{{text}}</span>
</label>

[bjarnef]

Maybe the checkbox/radiobutton should also have a background color (e.g. white), so they don’t seem to be disabled in e.g. Nested Content.

Maybe also consider how the disable style look. At the moment it doesn’t seem to directives support this, but they probably should using ng-disabled.

Pro Tip: To make to directives support disabled status more or less the same logic from umb-toggle can be copied. https://github.com/umbraco/Umbraco-CMS/blob/91c52cffc8b7c70dc956f6c6610460be2d1adc51/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js#L120