tl-uniapp/src/tl-form/triangulum-ui.css

自主开发的UniApp组件——Жидзин（triangulum-ui）系列组件库。用于组件

/*-----------------------------------------------------------*/
.color.default, .color .default { color: #303133; }
.color.regular, .color .regular { color: #606266; }
.color.secondary, .color .secondary  { color: #909399; }
.color.primary, .color .primary { color: #409EFF; }
.color.brand, .color .brand { color: #409EFF; }
.color.success, .color .success { color: #67C23A; }
.color.warning, .color .warning { color: #E6A23C; }
.color.danger, .color .danger { color: #F56C6C; }
.color.info, .color .info { color: #8896b3; }


/*-----------------------------------------------------------*/
.tl-form { display: flex; /* padding: 0px 10px; */ font-size: 28rpx; flex-direction: column; justify-content: space-between; box-sizing: content-box; border-bottom: 0.5px solid #dcdfe6; }
.tl-form.top .item-bar, .tl-form .item-bar.top { flex-direction: column; }
.tl-form.top .item-bar .label, .tl-form .item-bar.top .label { margin: 0 20rpx 10rpx 0 !important; padding: 0 !important; flex-direction: row; align-items: center; }
.tl-form.top .item-bar .label .title, .tl-form .item-bar.top .label .title { margin: 0 10rpx 0 0; }
.tl-form.top .item-bar .right-box, .tl-form .item-bar.top .right-box { width: 100%; }
.tl-form .loading { height: 0px; transition: all 0.5s 0s; overflow: hidden; }
.tl-form .item-bar { display: flex; padding: 20rpx 0; min-height: 70rpx; line-height: 40rpx; align-items: flex-start; box-sizing: content-box; border-bottom: 1rpx solid #ebeef5; }
.tl-form .item-bar:last-child { border-bottom: none; }
.tl-form .item-bar.narrow { padding: 10rpx 0; min-height: 60rpx; }
.tl-form .item-bar.narrow .label { padding: 10rpx 0 0 0; }
/* 注间：.label样式不能设置flex:0 0的收缩比，这会导致min-width属性失效，但right-box样式可以设置flex: 1。20230409 by Sieyoo */
.tl-form .item-bar .label { display: flex; margin: 0 20rpx 0 0; padding: 15rpx 0 0 0; /* min-width: 60px; */ flex-direction: column; /* color: inherit; */ }
.tl-form .item-bar .label .title { line-height: 40rpx; font-weight: bold; color: #303133; }
.tl-form .item-bar .label .title .require { margin: 0 4rpx 0 0; color: #f56c6c; }
.tl-form .item-bar .label .subtitle { margin: 10rpx 0 0 0; color: #909399; line-height: 30rpx; font-size: 24rpx; zoom: 0.9166666666; }
.tl-form .item-bar .right-box { flex: 1; min-height: 60rpx; font-size: inherit; display: flex; flex-direction: column; }
.tl-form .item-bar .right-box {}
.tl-form .item-bar .right-box .form-content {}
/* .tl-form .item-bar .right-box .form-content.medium{ min-height: 70rpx;} */
.tl-form .item-bar .right-box .alert { margin: 10rpx 0 0 0; line-height: 30rpx; color: #f56c6c; font-size: 24rpx; }
.tl-form .item-bar .right-box .sidenote { margin: 10rpx 0 0 0; line-height: 30rpx; color: #c0c4cc; font-size: 24rpx; zoom: 0.9166666666; }
.tl-form .tl-form-button { padding: 20rpx; }
.tl-form .tl-form-button .button { display: flex; align-items: center; justify-content: center; width: 686rpx; height: 88rpx; background-color: #165dff; border-radius: 200px; color: #ffffff; font-size: 32rpx; }
.tl-form-button-hover { opacity: 0.9; transform: scale(0.98, 0.98); cursor: pointer; position: relative; top: 3rpx; left: 3rpx; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1) inset; }


/*-----------------------------------------------------------*/
.tl-textarea { display: flex; flex: 1; padding: 0; border-radius: 10rpx; position: relative;  }
.tl-textarea .textarea { flex: 1; font-size: 26rpx; width: 100%; height: calc(40rpx * 3 + 30rpx); padding: 10rpx 0 20rpx 0; line-height: 40rpx; box-sizing: border-box; border-radius: 10rpx; transition: all 0.2s 0s; }
.tl-textarea .textarea.border { padding: 10rpx 10rpx 20rpx 20rpx; box-shadow: inset 0 0 10rpx rgba(192, 196, 204, 0.6); }
.tl-textarea .textarea.focused { padding: 10rpx 10rpx 20rpx 20rpx; box-shadow: inset 0 0 10rpx #C0C4CC; }
.tl-textarea .radius { border-radius: 10rpx; }
.tl-textarea .no-radius { border-radius: 0; }
.tl-textarea .disabled { background-color: #f5f7fa; }
.tl-textarea .textarea .input-placeholder { color: #C0C4CC; }
.tl-textarea .count { position: absolute; right: 4rpx; bottom: 4rpx; padding: 0 4rpx; line-height: 30rpx; font-size: 24rpx; color: #909399; text-shadow: 0 0 2px #FFF; zoom: 0.833; background-color: transparent; }


/*-----------------------------------------------------------*/
.tl-datetime-picker ::v-deep .uni-date-x { color: #c0c4cc; box-shadow: inset 0 0 10rpx rgba(192, 196, 204, 0.6); border-radius: 8rpx; }
.tl-datetime-picker ::v-deep .uni-date__x-input.value { color: #303133 !important; }
.tl-datetime-picker ::v-deep .uniui-clear { margin-left: 4rpx; }


/*-----------------------------------------------------------*/
.tl-upload { display: flex; margin: 0 0 0 0; justify-content: flex-start; flex-wrap: wrap; }
/* .tl-upload { @include flex; flex-wrap: wrap; flex: 1;} */
/* .tl-upload .preview { border-radius: 2px; margin: 0 8px 8px 0; position: relative; overflow: hidden; @include flex;} */
.tl-upload .preview { display: flex; margin: 0 16rpx 16rpx 0; width: calc(30vw - 80rpx); height: calc(30vw - 80rpx); max-width: 200rpx; max-height: 200rpx; justify-content: center; align-items: center; overflow: hidden; border-radius: 10rpx; position: relative; }
.tl-upload .preview.border { box-sizing: border-box; border: 1rpx solid #e4e7ed; }
.tl-upload .preview image.image { width: 100%; height: 100%; cursor: pointer; }
.tl-upload .preview .file-preview { position: relative; width: 100%; height: 100%; cursor: pointer; background-color: #eaeaea; display: flex; align-items: center; justify-content: center; }
.tl-upload .preview .file-preview .flie { width: 100%; height: 100%; }
.tl-upload .preview .file-preview .file-name { position: absolute; bottom: 0; width: 100%; font-size: 10px; padding: 0 4px; line-height: 15px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; color: #fff; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); }
.tl-upload .text-preview { position: relative; display: flex; align-items: center; /* justify-content: space-between; */ padding: 0 10px; margin-right: 10px; width: 100%; height: 32px; color: #1d2129; background-color: #f7f8fa; border-radius: 4px; /*    white-space: nowrap; text-overflow: ellipsis; overflow: hidden; */ box-sizing: border-box; margin-bottom: 6px; }
.tl-upload .text-preview .progress { position: absolute; right: 0; top: 0; height: 32px; z-index: 1; transition: all 0.2s; background: rgba(0, 0, 0, 0.1); }
.tl-upload .text-preview .message { margin-top: 1px; font-size: 12px; color: #060935; }
.tl-upload .text-preview .icon { flex-shrink: 0; width: 16px; height: 16px; border-radius: 2px; }
.tl-upload .text-preview .title { flex-basis: auto; width: 210px; margin: 0 6px; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tl-upload .text-preview .deletable { flex-shrink: 0; height: 16px; width: 16px; }
.tl-upload .text-preview .deletable .deletable-icon { display: block; width: 100%; height: 100%; }
.tl-upload .preview .deletable { position: absolute; top: 0; right: 0; height: 20px; width: 20px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.tl-upload .preview .deletable .icon { position: absolute; transform: scale(0.7); top: 0px; right: 0px; width: 20px; height: 20px; color: #ffffff; /* #ifdef H5 */ top: 1px; right: 0; /* #endif */ }
.tl-upload .success { position: absolute; bottom: 0; right: 0; display: flex; border-style: solid; border-top-color: transparent; border-left-color: transparent; /* border-bottom-color: ; border-right-color: ; */ border-width: 9px; align-items: center; justify-content: center; }
.tl-upload .success .icon { position: absolute; transform: scale(0.7); bottom: -15px; right: -15px; width: 36px; height: 36px; }
.tl-upload .status { position: absolute; top: -10px; bottom: -10px; left: 0; right: -10px; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
.tl-upload .status .icon { position: relative; z-index: 1; }
.tl-upload .status .message { font-size: 12px; color: #ffffff; margin-top: 5px; }
.tl-upload .add-button { display: flex; align-items: center; justify-content: center; margin: 0 16rpx 16rpx 0; width: calc(30vw - 80rpx); height: calc(30vw - 80rpx); /* max-width: 200rpx; max-height: 200rpx; */ background-color: #fff; border-radius: 10rpx; box-sizing: border-box; border: 1rpx solid #e4e7ed; cursor: pointer; }
.tl-upload .add-button image { width: 40%; height: 40%; }
.tl-upload .add-button .text { font-size: 11px; /* color: $tl-upload-text-color; */ margin-top: 2px; }
.tl-upload .add-button:hover { background-color: #f8f8f8; }
.tl-upload .add-button-text { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 0; height: 44px; width: 100%; color: #ffffff; font-size: 16px; background-color: #165dff; border-radius: 100px; }
.tl-upload .add-button-text { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 0; height: 40px; width: 100%; color: #ffffff; font-size: 16px; background-color: #165dff; border-radius: 100px; }
.tl-upload .add-button-text__hover { opacity: 0.7; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1) inset !important; }
.tl-upload .add-button-text-disabled { background-color: #c2c6ce; cursor: no-drop; pointer-events: none; }
.tl-upload .button--disabled { opacity: 0.5; }


/*-----------------------------------------------------------*/
.tl-check { display: flex; margin: 0px 5px 0 0; font-size: inherit; line-height: 30px; color: #303133; }
.tl-check .title { margin-right: 5px; }
.tl-check .check-box { display: flex; flex-wrap: wrap; gap: 20rpx; }
.tl-check .check-box .check { flex-shrink: 0; margin: 0; padding: 0 20rpx; height: 70rpx; line-height: 70rpx; color: #c0c4cc; box-sizing: border-box; box-shadow: inset 0 0 10rpx rgba(192, 196, 204, 0.6); border-radius: 10rpx; }
.tl-check .check-box .check.mini { min-width: 150rpx; margin-right: 6rpx; text-align: center; }
.tl-check .check-box .check.large { min-width: 358rpx; margin-right: 13rpx; text-align: center; }
.tl-check .check-box .check.selected { padding: 0 18rpx; line-height: 66rpx; color: #409eff; border: 2rpx solid #409eff; box-shadow: none; }
.tl-check .unit {}


/*-----------------------------------------------------------*/
.tl-filter-bar { display: flex; margin: 0 0 10rpx 0; padding: 10rpx 20rpx; justify-content: space-between; box-sizing: content-box; border-bottom: 1rpx solid #DCDFE6; }
.tl-filter-bar .filter-item {}


/*-----------------------------------------------------------*/
.tl-icon{width: 40px; height: 40px;}
.tl-icon svg{width: 100%; height: 100%;}
.tl-icon .st0{fill:none;stroke:#EEEEEE;stroke-width:10;stroke-miterlimit:10;}
.tl-icon .st1{fill:none;stroke:#EEEEEE;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.tl-icon .st2{fill:none;stroke:#FF3000;stroke-width:10;stroke-miterlimit:10;}
.tl-icon .st3{fill:#FFFFFF;stroke:#FF3000;stroke-width:10;stroke-miterlimit:10;}
.tl-icon .st4{fill:none;stroke:#FF3000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}


/*-----------------------------------------------------------*/
.tl-input-digit { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.tl-input-digit .prefix { flex: 0; white-space: nowrap; margin-right: 10rpx; }
.tl-input-digit .input-wrapper { flex: 1; position: relative; display: flex; margin: 0; flex: 1; }
.tl-input-digit .input-wrapper .input { width: 100%; height: 70rpx; line-height: 70rpx; font-size: inherit; border-radius: 10rpx; transition: all 0.2s 0s; }
.tl-input-digit .input-wrapper .input.border { padding: 0 20rpx; box-shadow: inset 0 0 10rpx rgba(192, 196, 204, 0.6); }
.tl-input-digit .input-wrapper .input.focused { padding: 0 20rpx; box-shadow: inset 0 0 10rpx #C0C4CC; }
.tl-input-digit .input-wrapper .input .place{ color: #C0C4CC; }
.tl-input-digit .clear {display: flex; width: 40rpx; height: 40rpx; border-radius: 50%; color: #FFF; font-size: 24rpx; background-color: #C0C4CC; align-items: center; justify-content: center; transform: scale(0.82); margin-left: 10rpx; }
.tl-input-digit .subfix { flex: 0; white-space: nowrap; margin-left: 10rpx; }


/*-----------------------------------------------------------*/
.tl-plain-select { display: flex; margin: 0px 5px 0 0; font-size: 13px; line-height: 30px; color: #303133; }
.tl-plain-select.medium { font-size: 15px; }
.tl-plain-select.small { font-size: 13px; }
.tl-plain-select.mini { font-size: 11px; }
.tl-plain-select.default { color: #303133; }
.tl-plain-select.primary { color: #409eff; }
.tl-plain.success { color: #5cb87a; }
.tl-plain-select.warning { color: #e6a23c; }
.tl-plain-select.danger { color: #f56c6c; }
.tl-plain-select.info { color: #8896b3; }
.tl-plain-select .title { margin-right: 5px; }
.tl-plain .value {}
.tl-plain .unit {}


/*-----------------------------------------------------------*/
.tl-plain { display: flex; margin: 0 10rpx 0 0; padding: 10rpx 0 0 0; font-size: inherit; line-height: 40rpx; color: #303133; }
.tl-plain .subhead { margin-right: 5px; }
.tl-plain .value {}
.tl-plain .unit {}


/*-----------------------------------------------------------*/
.tl-select { display: flex; margin: 0 0 0 0; font-size: inherit; line-height: 40rpx; color: #303133; }  
/* .tl-select.medium { font-size: 30px; }  
.tl-select.small { font-size: 26rpx; }  
.tl-select.mini { font-size: 22rpx; }  */
.tl-select .picker { width: 100%; }  
.tl-select .picker .content-bar { display: flex; min-height: 70rpx; justify-content: space-between; align-items: center; }
.tl-select .picker .content-bar .subhead { margin-right: 10rpx; white-space: nowrap; position: relative; }
.tl-select .picker .content-bar .value { flex: 1; padding: 0 50rpx 0 20rpx; height: 70rpx; line-height: 70rpx; box-shadow: inset 0 0 10rpx rgba(192, 196, 204, 0.6); border-radius: 10rpx; transition: all 0.2s 0s; }  
.tl-select .picker .content-bar .tip { color: #C0C4CC; }
.tl-select .picker .content-bar .disabled {}
.tl-select .picker .content-bar .icon { right: 20rpx; margin: 0; width: 0; height: 0; border-left: 10rpx solid transparent; border-right: 10rpx solid transparent; border-top: 16rpx solid rgba(192, 196, 204, 0.6); position: absolute; }


/*-----------------------------------------------------------*/
.tl-time { display: flex; margin: 0;  width: 100%; font-size: inherit; line-height: 30px; color: #303133; }
.tl-time .picker { width: 100%;}
.tl-time .picker .content-bar { display: flex; margin: 0; min-height: 70rpx; justify-content: space-between; align-items: center; }
.tl-time .picker .content-bar .subhead { flex: 0; margin-right: 5px; white-space: nowrap; }
.tl-time .picker .content-bar .value { flex: 1; padding: 0 50rpx 0 20rpx; height: 70rpx; line-height: 70rpx; box-shadow: inset 0 0 10rpx rgba(192, 196, 204, 0.6); border-radius: 10rpx; transition: all 0.2s 0s; }  
.tl-time .picker .content-bar .tip { color: #C0C4CC; }
.tl-time .picker .content-bar .disabled {}
.tl-time .picker .content-bar .icon { right: 20rpx; margin: 0; width: 0; height: 0; border-left: 10rpx solid transparent; border-right: 10rpx solid transparent; border-top: 16rpx solid rgba(192, 196, 204, 0.6); position: absolute; }


/*-----------------------------------------------------------*/
.tl-input { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.tl-input .prefix { flex: 0; white-space: nowrap; margin-right: 10rpx; }
.tl-input .input-wrapper { flex: 1; position: relative; display: flex; margin: 0; flex: 1; }
.tl-input .input-wrapper .input { width: 100%; height: 70rpx; line-height: 70rpx; font-size: inherit; border-radius: 10rpx; transition: all 0.2s 0s; }
.tl-input .input-wrapper .input.border { padding: 0 20rpx; box-shadow: inset 0 0 10rpx rgba(192, 196, 204, 0.6); }
.tl-input .input-wrapper .input.focused { padding: 0 20rpx; box-shadow: inset 0 0 10rpx #C0C4CC; }
.tl-input .input-wrapper .input .place{ color: #C0C4CC; }
.tl-input .clear {display: flex; width: 40rpx; height: 40rpx; border-radius: 50%; color: #FFF; font-size: 24rpx; background-color: #C0C4CC; align-items: center; justify-content: center; transform: scale(0.82); margin-left: 10rpx; }
.tl-input .subfix { flex: 0; white-space: nowrap; margin-left: 10rpx; }