@syncfusion/ej2
Version:
A modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies.
2 lines (1 loc) • 10.5 kB
CSS
/*! radiobutton layout */.e-radio-wrapper{display:inline-block;line-height:1;position:relative}.e-radio{-webkit-appearance:none;height:1px;opacity:0;position:absolute;width:1px}.e-radio+label{-webkit-tap-highlight-color:transparent;cursor:pointer;display:inline-block;margin:0;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.e-radio+label .e-label{display:inline-block;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif,"-apple-system","BlinkMacSystemFont";font-size:14px;font-weight:normal;line-height:20px;padding-left:28px;vertical-align:text-top;white-space:normal}.e-radio+label::before{border:1px solid;border-radius:50%;box-sizing:border-box;content:'';height:20px;left:0;position:absolute;top:0;width:20px}.e-radio+label:focus::before{box-shadow:0 0 8px 0 rgba(0,112,240,0.9)}.e-radio+label::after{border:1px solid;border-radius:50%;box-sizing:border-box;content:'';height:8px;left:6px;position:absolute;top:6px;transform:scale(0);width:8px}.e-radio+label .e-ripple-container{border-radius:50%;height:34px;left:-8px;position:absolute;top:-8px;width:34px;z-index:1}.e-radio+label.e-right .e-label,.e-radio+label.e-rtl .e-label{padding-left:0;padding-right:28px}.e-radio+label.e-right::before,.e-radio+label.e-rtl::before{left:auto;right:0}.e-radio+label.e-right::after,.e-radio+label.e-rtl::after{left:auto;right:6px}.e-radio+label.e-right .e-ripple-container,.e-radio+label.e-rtl .e-ripple-container{left:auto;right:-8px}.e-radio+label.e-right.e-rtl .e-label{padding-left:28px;padding-right:0}.e-radio+label.e-right.e-rtl::before{left:0;right:auto}.e-radio+label.e-right.e-rtl::after{left:6px;right:auto}.e-radio+label.e-right.e-rtl .e-ripple-container{left:-8px;right:auto}.e-radio+label.e-small .e-label{line-height:14px;padding-left:22px}.e-radio+label.e-small::before{height:14px;width:14px}.e-radio+label.e-small::after{height:6px;left:4px;top:4px;width:6px}.e-radio+label.e-small .e-ripple-container{left:-10px;top:-10px}.e-radio+label.e-small.e-right .e-label,.e-radio+label.e-small.e-rtl .e-label{padding-left:0;padding-right:22px}.e-radio+label.e-small.e-right::after,.e-radio+label.e-small.e-rtl::after{left:auto;right:4px}.e-radio+label.e-small.e-right .e-ripple-container,.e-radio+label.e-small.e-rtl .e-ripple-container{left:auto;right:-10px}.e-radio+label.e-small.e-right.e-rtl .e-label{padding-left:22px;padding-right:0}.e-radio+label.e-small.e-right.e-rtl::after{left:4px;right:auto}.e-radio+label.e-small.e-right.e-rtl .e-ripple-container{left:-10px;right:auto}.e-radio:checked+label::after{transform:scale(1);transition:none}.e-small .e-radio+label .e-label,.e-radio+label.e-small .e-label{line-height:14px;padding-left:22px}.e-small .e-radio+label::before,.e-radio+label.e-small::before{height:14px;width:14px}.e-small .e-radio+label::after,.e-radio+label.e-small::after{height:6px;left:4px;top:4px;width:6px}.e-small .e-radio+label .e-ripple-container,.e-radio+label.e-small .e-ripple-container{left:-10px;top:-10px}.e-small .e-radio+label.e-right .e-label,.e-small .e-radio+label.e-rtl .e-label,.e-radio+label.e-small.e-right .e-label,.e-radio+label.e-small.e-rtl .e-label{padding-left:0;padding-right:22px}.e-small .e-radio+label.e-right::after,.e-small .e-radio+label.e-rtl::after,.e-radio+label.e-small.e-right::after,.e-radio+label.e-small.e-rtl::after{left:auto;right:4px}.e-small .e-radio+label.e-right .e-ripple-container,.e-small .e-radio+label.e-rtl .e-ripple-container,.e-radio+label.e-small.e-right .e-ripple-container,.e-radio+label.e-small.e-rtl .e-ripple-container{left:auto;right:-10px}.e-small .e-radio+label.e-right.e-rtl .e-label,.e-radio+label.e-small.e-right.e-rtl .e-label{padding-left:22px;padding-right:0}.e-small .e-radio+label.e-right.e-rtl::after,.e-radio+label.e-small.e-right.e-rtl::after{left:4px;right:auto}.e-small .e-radio+label.e-right.e-rtl .e-ripple-container,.e-radio+label.e-small.e-right.e-rtl .e-ripple-container{left:-10px;right:auto}.e-bigger.e-small .e-radio+label .e-label,.e-radio+label.e-bigger.e-small .e-label{line-height:18px;padding-left:28px}.e-bigger.e-small .e-radio+label::before,.e-radio+label.e-bigger.e-small::before{height:18px;width:18px}.e-bigger.e-small .e-radio+label::after,.e-radio+label.e-bigger.e-small::after{height:8px;left:5px;top:5px;width:8px}.e-bigger.e-small .e-radio+label .e-ripple-container,.e-radio+label.e-bigger.e-small .e-ripple-container{height:36px;left:-11px;top:-11px;width:36px}.e-bigger.e-small .e-radio+label.e-right .e-label,.e-bigger.e-small .e-radio+label.e-rtl .e-label,.e-radio+label.e-bigger.e-small.e-right .e-label,.e-radio+label.e-bigger.e-small.e-rtl .e-label{padding-left:0;padding-right:28px}.e-bigger.e-small .e-radio+label.e-right::after,.e-bigger.e-small .e-radio+label.e-rtl::after,.e-radio+label.e-bigger.e-small.e-right::after,.e-radio+label.e-bigger.e-small.e-rtl::after{left:auto;right:5px}.e-bigger.e-small .e-radio+label.e-right .e-ripple-container,.e-bigger.e-small .e-radio+label.e-rtl .e-ripple-container,.e-radio+label.e-bigger.e-small.e-right .e-ripple-container,.e-radio+label.e-bigger.e-small.e-rtl .e-ripple-container{left:auto;right:-10px}.e-bigger.e-small .e-radio+label.e-right.e-rtl .e-label,.e-radio+label.e-bigger.e-small.e-right.e-rtl .e-label{padding-left:28px;padding-right:0}.e-bigger.e-small .e-radio+label.e-right.e-rtl::after,.e-radio+label.e-bigger.e-small.e-right.e-rtl::after{left:5px;right:auto}.e-bigger.e-small .e-radio+label.e-right.e-rtl .e-ripple-container,.e-radio+label.e-bigger.e-small.e-right.e-rtl .e-ripple-container{left:-10px;right:auto}.e-bigger .e-radio+label .e-label,.e-radio+label.e-bigger .e-label{font-size:15px;line-height:22px;padding-left:32px}.e-bigger .e-radio+label::before,.e-radio+label.e-bigger::before{height:22px;width:22px}.e-bigger .e-radio+label::after,.e-radio+label.e-bigger::after{height:10px;left:6px;top:6px;width:10px}.e-bigger .e-radio+label .e-ripple-container,.e-radio+label.e-bigger .e-ripple-container{height:48px;left:-11px;top:-11px;width:48px}.e-bigger .e-radio+label.e-right .e-label,.e-bigger .e-radio+label.e-rtl .e-label,.e-radio+label.e-bigger.e-right .e-label,.e-radio+label.e-bigger.e-rtl .e-label{padding-left:0;padding-right:32px}.e-bigger .e-radio+label.e-right::after,.e-bigger .e-radio+label.e-rtl::after,.e-radio+label.e-bigger.e-right::after,.e-radio+label.e-bigger.e-rtl::after{left:auto;right:6px}.e-bigger .e-radio+label.e-right .e-ripple-container,.e-bigger .e-radio+label.e-rtl .e-ripple-container,.e-radio+label.e-bigger.e-right .e-ripple-container,.e-radio+label.e-bigger.e-rtl .e-ripple-container{left:auto;right:-11px}.e-bigger .e-radio+label.e-right.e-rtl .e-label,.e-radio+label.e-bigger.e-right.e-rtl .e-label{padding-left:32px;padding-right:0}.e-bigger .e-radio+label.e-right.e-rtl::after,.e-radio+label.e-bigger.e-right.e-rtl::after{left:6px;right:auto}.e-bigger .e-radio+label.e-right.e-rtl .e-ripple-container,.e-radio+label.e-bigger.e-right.e-rtl .e-ripple-container{left:-12px;right:auto}.e-bigger .e-radio+label.e-small .e-label,.e-radio+label.e-bigger.e-small .e-label{line-height:18px;padding-left:28px}.e-bigger .e-radio+label.e-small::before,.e-radio+label.e-bigger.e-small::before{height:18px;width:18px}.e-bigger .e-radio+label.e-small::after,.e-radio+label.e-bigger.e-small::after{height:8px;left:5px;top:5px;width:8px}.e-bigger .e-radio+label.e-small .e-ripple-container,.e-radio+label.e-bigger.e-small .e-ripple-container{height:36px;left:-11px;top:-11px;width:36px}.e-bigger .e-radio+label.e-small.e-right .e-label,.e-bigger .e-radio+label.e-small.e-rtl .e-label,.e-radio+label.e-bigger.e-small.e-right .e-label,.e-radio+label.e-bigger.e-small.e-rtl .e-label{padding-left:0;padding-right:28px}.e-bigger .e-radio+label.e-small.e-right::after,.e-bigger .e-radio+label.e-small.e-rtl::after,.e-radio+label.e-bigger.e-small.e-right::after,.e-radio+label.e-bigger.e-small.e-rtl::after{left:auto;right:5px}.e-bigger .e-radio+label.e-small.e-right .e-ripple-container,.e-bigger .e-radio+label.e-small.e-rtl .e-ripple-container,.e-radio+label.e-bigger.e-small.e-right .e-ripple-container,.e-radio+label.e-bigger.e-small.e-rtl .e-ripple-container{left:auto;right:-10px}.e-bigger .e-radio+label.e-small.e-right.e-rtl .e-label,.e-radio+label.e-bigger.e-small.e-right.e-rtl .e-label{padding-left:28px;padding-right:0}.e-bigger .e-radio+label.e-small.e-right.e-rtl::after,.e-radio+label.e-bigger.e-small.e-right.e-rtl::after{left:5px;right:auto}.e-bigger .e-radio+label.e-small.e-right.e-rtl .e-ripple-container,.e-radio+label.e-bigger.e-small.e-right.e-rtl .e-ripple-container{left:-10px;right:auto}/*! radiobutton theme */.e-radio+label::before{background-color:#1a1a1a;border-color:#f0f0f0}.e-radio+label.e-focus .e-ripple-container{background-color:#000}.e-radio+label .e-label{color:#f0f0f0}.e-radio+label .e-ripple-element{background-color:transparent}.e-radio+label:active .e-ripple-element{background-color:transparent}.e-radio:focus+label::before{border-color:#fff;box-shadow:0 0 8px 0 rgba(0,112,240,0.9)}.e-radio:hover+label::before{border-color:#fff}.e-radio:checked+label::before{background-color:#1a1a1a;border-color:#f0f0f0}.e-radio:checked+label::after{background-color:#f0f0f0;color:#f0f0f0}.e-radio:checked+label:active .e-ripple-element{background-color:transparent}.e-radio:checked+.e-focus .e-ripple-container{background-color:transparent}.e-radio:checked+.e-focus::before{outline:#1a1a1a 0 solid;outline-offset:0}.e-radio:checked:focus+label::before{border-color:#fff}.e-radio:checked:focus+label::after{background-color:#fff}.e-radio:checked+label:hover::before{border-color:#fff}.e-radio:checked+label:hover::after{background-color:#fff}.e-radio:disabled+label{cursor:default;pointer-events:none}.e-radio:disabled+label::before{border-color:rgba(240,240,240,0.35);cursor:default}.e-radio:disabled+label .e-ripple-container{background-color:transparent}.e-radio:disabled+label .e-ripple-container::after{background-color:transparent;cursor:default}.e-radio:disabled+label .e-label{color:rgba(240,240,240,0.35)}.e-radio:disabled:checked+label::before{background-color:transparent;border-color:rgba(240,240,240,0.35)}.e-radio:disabled:checked+label::after{background-color:rgba(240,240,240,0.35);border-color:rgba(240,240,240,0.35);cursor:default}.e-radio:disabled:checked+label .e-ripple-container{background-color:transparent}.e-radio:disabled:checked+label .e-ripple-container::after{background-color:transparent}