gaf-mobile/app/styles/modules/CustomRadio.less

GAF mobile Web site

@import (reference) '../themes/variables';
@import (reference) '../libs/mixins';

/* Private Var */
@CustomRadio-baseColor: @quinary-color-light;
@CustomRadio-bgColor: @septenary-color-xxxlight;
@CustomRadio-markerColor: @septenary-color-xxxlight;

.CustomRadio {
	@this: CustomRadio;

    &[type="radio"] {
        opacity: 0;
        position: absolute;
    }

	+ span,
    + label {
		position: relative;

        &::before {
            display: inline-block;
            border: 1px solid @quaternary-color-xxlight;
            vertical-align: middle;
            .circle(24px);
            background-color: @CustomRadio-bgColor;
            .transition(0.2s, ease-in);
            content: "";
        }
	}

    &:checked {
        + label,
        + span {
            @{this}-textLabel {
                font-weight: 900;
            }

            &::before {
                border-color: @CustomRadio-baseColor;
                background-color: @CustomRadio-baseColor;
            }

            &::after {
                display: inline-block;
                position: absolute;
                top: 3px;
                left: 8px;
                width: 12px;
                height: 12px;
                background: url('../images/icons/flicon-check-light.svg') no-repeat center;
                content: "";
            }
        }
    }
}