UNPKG

zent

Version:

一套前端设计语言和基于React的实现

112 lines (111 loc) 2.37 kB
.zent-checkbox-wrap { display: inline-block; cursor: pointer; font-weight: 400; font-size: 12px; line-height: 14px; margin: 0; padding: 0; margin-right: 15px; vertical-align: middle } .zent-checkbox-wrap.zent-checkbox-disabled { cursor: not-allowed } .zent-checkbox-wrap:last-child { margin-right: 0 } .zent-checkbox { position: relative; display: inline-block; width: 14px; height: 14px; white-space: nowrap; outline: none; vertical-align: middle; line-height: 1; margin: 0; padding: 0; } .zent-checkbox input { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: 0; padding: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; } .zent-checkbox + span { margin-left: 5px; margin-right: 5px; vertical-align: middle; line-height: 16px } .zent-checkbox-inner { position: relative; top: 0; left: 0; display: inline-block; width: 14px; height: 14px; border-radius: 2px; border: 1px solid #BBB; background: #fff; box-sizing: border-box } .zent-checkbox-inner::after { box-sizing: content-box; position: absolute; display: block; top: 2px; left: 2px; content: ' '; font-size: 0; background: transparent } .zent-checkbox-checked .zent-checkbox-inner { border-color: #2277FF; background: #3388FF } .zent-checkbox-checked .zent-checkbox-inner::after { top: 3px; left: 2px; width: 6px; height: 3px; border: 2px solid #fff; background: transparent; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .zent-checkbox-indeterminate .zent-checkbox-inner { border-color: #3388FF; background: #fff } .zent-checkbox-indeterminate .zent-checkbox-inner::after { top: 5px; left: 3px; width: 6px; height: 2px; border: none; background: #3283FA; -webkit-transform: rotate(0deg); transform: rotate(0deg) } .zent-checkbox-disabled .zent-checkbox-inner { border-color: #e5e5e5; background: #f8f8f8; } .zent-checkbox-disabled input[type="checkbox"] { cursor: not-allowed; } .zent-checkbox-disabled.zent-checkbox-checked .zent-checkbox-inner { border-color: #e5e5e5; background: #E5E5E5; }