smart-webcomponents-react/source/styles/components/smart.checkbox.css

[](https://jqwidgets.com/license/)

.smart-toggle-box{display:inline-block;outline:0;height:var(--smart-editor-height);cursor:pointer}.smart-toggle-box.smart-element{border:none;background:0 0}.smart-toggle-box .smart-container,.smart-toggle-box.smart-container{position:relative;display:flex;align-items:center}.smart-toggle-box .smart-ripple{background:var(--smart-primary)}.smart-toggle-box .smart-overlay{top:0;height:100%;background:var(--smart-primary);width:var(--smart-editor-height);position:absolute;left:2px;border-radius:100%;padding:0;opacity:0;box-sizing:content-box;transition:opacity 280ms ease-in-out;margin:0}.smart-toggle-box .smart-label{color:var(--smart-background-color);background:inherit;font-size:inherit;font-family:inherit;margin:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:auto}.smart-toggle-box.smart-check-box .smart-input{width:var(--smart-check-box-default-size);min-width:var(--smart-check-box-default-size);height:var(--smart-check-box-default-size);min-height:var(--smart-check-box-default-size);background-color:var(--smart-background);box-sizing:initial;border:var(--smart-border-width) solid var(--smart-border);display:inline-block;color:var(--smart-background-color);border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);margin:0 0 0 8px;transition:background linear .2s;position:relative}.smart-toggle-box.smart-check-box .smart-input:after{font-family:var(--smart-font-family-icon);display:flex;justify-content:center;align-content:center;height:100%;align-items:center}.smart-toggle-box.smart-check-box[checked] .smart-input:after{font-weight:100;content:var(--smart-icon-check);pointer-events:none}.smart-toggle-box.smart-check-box[checked=null] .smart-input:after{content:"-";margin-top:-1px}.smart-toggle-box.smart-radio-button .smart-input{width:var(--smart-radio-button-default-size);min-width:var(--smart-radio-button-default-size);height:var(--smart-radio-button-default-size);min-height:var(--smart-radio-button-default-size);background-color:var(--smart-background);box-sizing:initial;border-style:solid;border-width:var(--smart-border-width);border-color:var(--smart-border);display:inline-block;border-radius:100%;color:var(--smart-background-color);margin:0 0 0 8px;position:relative}.smart-toggle-box.smart-radio-button .smart-input:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;font-style:normal;text-decoration:inherit;font-variant:normal;text-transform:none;color:inherit;border-radius:50%;line-height:100%}.smart-toggle-box.smart-radio-button[checked] .smart-input:after{font-size:15px;font-weight:100;background:var(--smart-primary-color)}.smart-toggle-box.smart-radio-button[checked][hover]:not([focus]) .smart-input::after{background:var(--smart-ui-state-color-hover)}.smart-toggle-box[active] .smart-input,.smart-toggle-box[checked] .smart-input{border-color:var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active)}.smart-toggle-box[active]:focus .smart-overlay,.smart-toggle-box[active][focus] .smart-overlay{opacity:.4}.smart-toggle-box[hover] .smart-input{border-color:var(--smart-ui-state-border-hover);background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover)}.smart-toggle-box:focus .smart-input,.smart-toggle-box[focus] .smart-input{outline:0;overflow:visible;border-color:var(--smart-primary);background-color:var(--smart-primary);color:var(--smart-primary-color)}.smart-toggle-box:focus .smart-overlay,.smart-toggle-box[focus] .smart-overlay{opacity:.3}.smart-toggle-box[readonly],.smart-toggle-box[readonly] .smart-input,.smart-toggle-box[readonly] .smart-label{cursor:initial}.smart-toggle-box[check-mode=input]{cursor:default}.smart-toggle-box[check-mode=input] .smart-input,.smart-toggle-box[check-mode=label] .smart-label{cursor:pointer}.smart-toggle-box[right-to-left] .smart-container,.smart-toggle-box[right-to-left] .smart-hidden-input{direction:rtl}.smart-toggle-box[right-to-left] .smart-overlay{left:initial;right:2px}.smart-toggle-box[right-to-left] .smart-input{margin:0 8px 0 0}
smart-check-box{display:inline-block;outline:0;height:var(--smart-editor-height);font-family:var(--smart-check-box-font-family);font-size:var(--smart-check-box-font-size);cursor:pointer;line-height:1}smart-check-box .smart-container{position:relative;display:flex;align-items:center}smart-check-box .smart-overlay{top:0;height:100%;background:var(--smart-check-box-background-active);width:var(--smart-editor-height);position:absolute;left:2px;border-radius:100%;padding:0;opacity:0;box-sizing:content-box;transition:opacity 280ms ease-in-out}smart-check-box .smart-input{width:var(--smart-check-box-default-size);min-width:var(--smart-check-box-default-size);height:var(--smart-check-box-default-size);min-height:var(--smart-check-box-default-size);background-color:var(--smart-check-box-background);box-sizing:initial;border-style:solid;border-width:var(--smart-check-box-border-width);border-color:var(--smart-check-box-border);display:inline-block;color:var(--smart-check-box-color);border-top-left-radius:var(--smart-check-box-border-top-left-radius);border-top-right-radius:var(--smart-check-box-border-top-right-radius);border-bottom-left-radius:var(--smart-check-box-border-bottom-left-radius);border-bottom-right-radius:var(--smart-check-box-border-bottom-right-radius);margin:0 0 0 8px;transition:background linear .2s;position:relative}smart-check-box .smart-input:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;font-style:normal;font-variant:normal;font-family:"Material icons";font-size:15px;font-weight:100;text-decoration:inherit;text-transform:none;color:inherit;line-height:100%}smart-check-box .smart-label{color:var(--smart-check-box-color);font-size:var(--smart-check-box-font-size);font-family:var(--smart-check-box-font-family);margin:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:auto}smart-check-box .smart-ripple{background:var(--smart-check-box-background-active)}smart-check-box:focus .smart-input,smart-check-box[focus] .smart-input{outline:0;overflow:visible;border-color:var(--smart-check-box-border-focus);background-color:var(--smart-check-box-background-focus);color:var(--smart-check-box-color-focus)}smart-check-box:focus .smart-overlay,smart-check-box[focus] .smart-overlay{opacity:.3}smart-check-box:focus[active] .smart-overlay,smart-check-box[focus][active] .smart-overlay{opacity:.4}smart-check-box[hover] .smart-input{border-color:var(--smart-check-box-border-hover);background-color:var(--smart-check-box-background-hover);color:var(--smart-check-box-color-hover)}smart-check-box[active] .smart-input,smart-check-box[checked] .smart-input{border-color:var(--smart-check-box-border-active);background-color:var(--smart-check-box-background-active);color:var(--smart-check-box-color-active)}smart-check-box[checked] .smart-input:after{content:"\e876";font-family:"Material icons";font-size:15px;font-weight:100}smart-check-box[checked=null] .smart-input:after{content:"-"}smart-check-box[check-mode=label]{cursor:default}smart-check-box[check-mode=label] .smart-label{cursor:pointer}smart-check-box[check-mode=input]{cursor:default}smart-check-box[check-mode=input] .smart-input{cursor:pointer}smart-check-box[readonly],smart-check-box[readonly] .smart-input,smart-check-box[readonly] .smart-label{cursor:initial}smart-check-box[right-to-left] .smart-container,smart-check-box[right-to-left] .smart-hidden-input{direction:rtl}smart-check-box[right-to-left] .smart-overlay{left:initial;right:2px}smart-check-box[right-to-left] .smart-input{margin:0 8px 0 0}