meri-design/dist/theme/Editable.css

基于vue框架的ui库

/*!
 * @meri-design v2.2.19-beta10
 * (c) 2019-2022 YuShu-Web
 * Released under the MIT License.
 * 2025-01-14 15:25:40
 */.p-icon{cursor:pointer;font-size:0;text-align:center}.p-icon+.p-icon{margin-left:8px}.p-icon svg{vertical-align:middle}.p-icon svg path{transition:fill .3s}.p-checkbox{align-items:center;cursor:pointer;display:inline-flex;min-height:16px;min-width:16px;vertical-align:middle;z-index:1}.p-checkbox+.p-checkbox{margin-left:8px}.p-checkbox-box{border:1px solid transparent;border-radius:2px;height:16px;position:relative;transition:all .3s;vertical-align:middle;width:16px}.p-checkbox-box:hover{box-shadow:0 0 4px 0 rgba(78,131,253,.4)}.p-checkbox-box:after{background:none;content:"";pointer-events:none;position:absolute;transform:rotate(0) scale(0);transition:transform .2s ease-in-out;z-index:1}.p-checkbox-uncheck{background-color:#fff;border-color:#c4c9cf}.p-checkbox-checked,.p-checkbox-uncheck:hover{border-color:#246fe5}.p-checkbox-checked{background-color:#246fe5}.p-checkbox-checked:after{border-bottom:2px solid #fff;border-right:2px solid #fff;height:8px;left:5px;top:2px;transform:rotate(45deg) scale(1);width:4px}.p-checkbox-notNull{background-color:#246fe5;border-color:#246fe5}.p-checkbox-notNull:after{background-color:#fff;height:2px;left:3px;top:6px;transform:scale(1);width:8px}.p-checkbox-text{color:#1b2129;font-size:14px;overflow:hidden;padding-left:8px;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:calc(100% - 16px)}.p-checkbox-disabled{cursor:not-allowed}.p-checkbox-disabled>i{pointer-events:none}.p-checkbox-disabled .p-checkbox-uncheck{background-color:#e1e5eb}.p-checkbox-disabled .p-checkbox-checked,.p-checkbox-disabled .p-checkbox-notNull{background-color:#c4c9cf;border-color:#c4c9cf}.p-editable{background-color:#fff;font-size:0;overflow:hidden;width:100%}.p-editable-item{width:100%}.p-editable-item .p-editable-item-title{align-content:center;cursor:pointer;display:inline-flex;height:38px;justify-content:space-between;line-height:38px;padding-right:12px;transition:background-color .3s;width:100%}.p-editable-item .p-editable-item-title:hover{background-color:#f1f4f6}.p-editable-item .p-editable-item-title:hover .p-editable-icon-handle{opacity:1;transform:translateX(0)}.p-editable-item .p-editable-item-title .p-editable-item-content{display:flex;width:calc(100% - 52px)}.p-editable-item .p-editable-item-title .p-editable-item-triangle{height:24px;width:24px}.p-editable-item .p-editable-item-title .p-editable-item-triangle svg{height:100%;transform:rotate(90deg);transition:transform .3s;vertical-align:middle;width:100%}.p-editable-item .p-editable-item-title .p-editable-item-triangle-show svg{transform:rotate(180deg)}.p-editable-item-text{color:#1b2129;max-width:calc(100% - 44px);padding-left:4px}.p-editable-item-text .p-editable-item-text-input,.p-editable-item-text .p-editable-item-text-span{display:block;font-size:14px;height:38px;line-height:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.p-editable-item-text .p-editable-item-text-input{background:none;border:0;font-size:14px;outline:none}.p-editable-icon-handle{opacity:.8;transform:translateX(52px);transition:all .3s .36s}