UNPKG

@react-beauty/ui-checkbox

Version:

ui-checkbox

2 lines (1 loc) 4.79 kB
.react-beauty-el-checkbox-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--components-checkbox-gap);position:relative;width:100%}.react-beauty-el-checkbox-label{font-size:var(--components-checkbox-font-size-label);line-height:var(--components-checkbox-line-height-label);font-weight:var(--components-checkbox-font-weight-label);color:var(--components-checkbox-colors-label);cursor:pointer;margin-left:8px}.react-beauty-el-checkbox-label[data-disabled=true]{opacity:.32;cursor:not-allowed}.react-beauty-el-checkbox-box{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--components-checkbox-size);height:var(--components-checkbox-size);border-radius:var(--components-checkbox-border-radius);border:1px solid var(--colors-main-beerus);background-color:var(--components-checkbox-colors-background-unchecked);-webkit-transition:border-color var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing),background-color var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing);transition:border-color var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing),background-color var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing);box-sizing:border-box}.react-beauty-el-checkbox-box:after{content:"";position:absolute;width:30%;height:60%;border:solid var(--components-checkbox-colors-checkmark);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg) scale(0) translateY(-15%) translateX(-10%);-moz-transform:rotate(45deg) scale(0) translateY(-15%) translateX(-10%);-ms-transform:rotate(45deg) scale(0) translateY(-15%) translateX(-10%);transform:rotate(45deg) scale(0) translateY(-15%) translate(-10%);opacity:0;-webkit-transition:-webkit-transform var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing),opacity var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing);transition:transform var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing),opacity var(--components-checkbox-transition-duration) var(--components-checkbox-transition-timing)}[data-checked=true] .react-beauty-el-checkbox-box{border-color:var(--components-checkbox-colors-border-checked);background-color:var(--components-checkbox-colors-background-checked)}[data-checked=true] .react-beauty-el-checkbox-box:after{-webkit-transform:rotate(45deg) scale(1) translateY(-15%) translateX(-10%);-moz-transform:rotate(45deg) scale(1) translateY(-15%) translateX(-10%);-ms-transform:rotate(45deg) scale(1) translateY(-15%) translateX(-10%);transform:rotate(45deg) scale(1) translateY(-15%) translate(-10%);opacity:1}.react-beauty-el-checkbox-box[data-disabled=true]{opacity:.32;cursor:not-allowed;border-color:var(--components-checkbox-colors-border-disabled)}.react-beauty-el-checkbox-input{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:pointer}.react-beauty-el-checkbox-input:focus-visible+.react-beauty-el-checkbox-box{outline:2px solid var(--components-checkbox-colors-focus-ring);outline-offset:2px}.react-beauty-el-checkbox-input:disabled{cursor:not-allowed}.react-beauty-el-checkbox-helper-text{font-size:var(--components-checkbox-font-size-helper);line-height:var(--components-checkbox-line-height-helper);color:var(--components-checkbox-colors-helper-text-normal);padding:var(--space-none) var(--space-3);-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:calc(var(--components-checkbox-gap) / 2)}.react-beauty-el-checkbox-helper-text[data-error=true]{color:var(--components-checkbox-colors-helper-text-error)}.react-beauty-el-checkbox-helper-text[data-disabled=true]{opacity:.32}.react-beauty-el-checkbox-wrapper{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.react-beauty-el-checkbox-wrapper[data-disabled=true]{cursor:not-allowed}.react-beauty-el-checkbox-group-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--components-checkbox-group-gap)}