@brizy/ui
Version:
React elements in Brizy style
1 lines • 4.22 kB
CSS
.brz-ui-image-preview,.brz-ui-modal{pointer-events:none}.brz-ui-image-preview.zoom-appear,.brz-ui-image-preview.zoom-enter,.brz-ui-modal.zoom-appear,.brz-ui-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.brz-ui-image-preview-mask,.brz-ui-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;height:100%;background-color:rgba(0,0,0,.45)}.brz-ui-image-preview-mask-hidden,.brz-ui-modal-mask-hidden{display:none}.brz-ui-image-preview-wrap,.brz-ui-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.brz-ui-switch{margin:0;padding:0;color:var(--color-dark,#212733);font-size:14px;font-variant:proportional-nums;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;box-sizing:border-box;min-width:44px;height:22px;line-height:22px;vertical-align:middle;background-color:rgba(0,0,0,.25);border:0;border-radius:100px;cursor:pointer;transition:.2s;user-select:none}.brz-ui-switch:focus{outline:0;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.brz-ui-switch-checked:focus{box-shadow:0 0 0 2px #1890ff33}.brz-ui-switch:focus:hover{box-shadow:none}.brz-ui-switch-checked{background-color:var(--color-dark,#212733)}.brz-ui-switch-disabled,.brz-ui-switch-loading{cursor:not-allowed;opacity:.4}.brz-ui-switch-disabled *,.brz-ui-switch-loading *{box-shadow:none;cursor:not-allowed}.brz-ui-switch-inner{display:block;margin:0 7px 0 25px;color:var(--color-white,#fff);font-size:13px;transition:margin .2s}.brz-ui-switch-checked .brz-ui-switch-inner{margin:0 25px 0 7px}.brz-ui-switch-handle{position:absolute;top:2px;left:2px;width:18px;height:18px;transition:.2s ease-in-out}.brz-ui-switch-handle::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--color-white,#fff);border-radius:9px;box-shadow:0 2px 4px 0 rgba(0,35,11,.2);transition:.2s ease-in-out;content:''}.brz-ui-switch-checked .brz-ui-switch-handle{left:calc(100% - 18px - 2px)}.brz-ui-switch:not(.brz-ui-switch-disabled):active .brz-ui-switch-handle::before{right:-30%;left:0}.brz-ui-switch:not(.brz-ui-switch-disabled):active.brz-ui-switch-checked .brz-ui-switch-handle::before{right:0;left:-30%}.brz-ui-switch-loading-icon{position:absolute;top:50%;left:50%;color:rgba(0,0,0,.65);transform:translate(-50%,-50%)}.brz-ui-switch-checked .brz-ui-switch-loading-icon{color:var(--color-dark,#212733)}.brz-ui-switch-small{min-width:28px;height:16px;line-height:16px}.brz-ui-switch-small .brz-ui-switch-inner{margin:0 5px 0 18px;font-size:13px}.brz-ui-switch-small .brz-ui-switch-handle{width:12px;height:12px}.brz-ui-switch-small .brz-ui-switch-loading-icon{transform:translate(-50%,-50%) scale(.66667)}.brz-ui-switch-small.brz-ui-switch-checked .brz-ui-switch-inner{margin:0 18px 0 5px}.brz-ui-switch-small.brz-ui-switch-checked .brz-ui-switch-handle{left:calc(100% - 12px - 2px)}.brz-ui-switch-rtl{direction:rtl}.brz-ui-switch-rtl .brz-ui-switch-inner{margin:0 25px 0 7px}.brz-ui-switch-rtl .brz-ui-switch-handle{right:2px;left:auto}.brz-ui-switch-rtl:not(.brz-ui-switch-rtl-disabled):active .brz-ui-switch-handle::before{right:0;left:-30%}.brz-ui-switch-rtl:not(.brz-ui-switch-rtl-disabled):active.brz-ui-switch-checked .brz-ui-switch-handle::before{right:-30%;left:0}.brz-ui-switch-rtl.brz-ui-switch-checked .brz-ui-switch-inner{margin:0 7px 0 25px}.brz-ui-switch-rtl.brz-ui-switch-checked .brz-ui-switch-handle{right:calc(100% - 18px - 2px)}.brz-ui-switch-rtl.brz-ui-switch-small.brz-ui-switch-checked .brz-ui-switch-handle{right:calc(100% - 12px - 2px)}.brz-ui-switch.brz-ui-switch{height:28px;width:50px}.brz-ui-switch.brz-ui-switch>.brz-ui-switch-handle{left:4px;transform:translateY(-50%);top:50%}.brz-ui-switch.brz-ui-switch.brz-ui-switch-checked{background-color:var(--brz-ui-global-switch-color,var(--brz-ui-switch-color,var(--color-blue,#3dbfe8)))}.brz-ui-switch.brz-ui-switch.brz-ui-switch-checked>.brz-ui-switch-handle{left:calc(100% - 24px)}.brz-ui-switch.brz-ui-switch__color-inherit.brz-ui-switch-checked{background-color:inherit}.brz-ui-switch.brz-ui-switch .brz-ui-click-animating-node{opacity:0}.brz-ui-switch.brz-ui-switch.brz-ui-switch-checked:focus,.brz-ui-switch.brz-ui-switch:focus{box-shadow:none}