123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- // form-item 进行校验的时候加上边框颜色
- .is-error {
- .el-input.el-input--mini,
- .el-input.el-input--small,
- .el-input.el-input--medium {
- border-color: #ff4d4f;
- }
- }
- // input start
- // 处理input禁用样式
- .el-input.is-disabled {
- background-color: #f6f8f9;
- }
- // 处理input显示输入字数统计,遮挡文本内容的问题
- .el-input.el-input--mini,
- .el-input.el-input--small,
- .el-input.el-input--medium {
- border: 1px solid #dcdfe6;
- border-radius: 2.5px;
- display: inline-flex !important;
- align-items: center;
- overflow: hidden;
- input {
- border-width: 0 !important;
- padding: 0 0 0 8px !important;
- }
- .el-input__suffix {
- display: block !important;
- position: relative !important;
- width: max-content;
- span.el-input__suffix-inner {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- .el-input__count-inner {
- width: max-content;
- // padding-left: 0;
- transform: translate(5px);
- }
- }
- }
- }
- // 设置图标区域的行高
- $sizes: (
- "mini": 28px,
- "small": 32px,
- "medium": 36px,
- );
- @each $size, $height in $sizes {
- .el-input--#{$size} {
- .el-input__suffix {
- height: $height;
- line-height: $height;
- .el-input__suffix-inner,
- .el-input-group__append {
- height: $height;
- line-height: $height;
- }
- }
- // 前置
- .el-input-group__prepend ,
- // 后置
- .el-input-group__append {
- height: $height;
- line-height: $height;
- }
- }
- }
- // input添加了插槽之后的问题
- .el-input.el-input--mini.el-input-group,
- .el-input.el-input--small.el-input-group,
- .el-input.el-input--medium.el-input-group {
- // display: inline-table !important;
- input {
- padding: 0 30px 0 15px !important;
- flex: 1;
- }
- // 前置
- .el-input-group__prepend ,
- // 后置
- .el-input-group__append {
- border-width: 0;
- padding: 0 20px;
- width: fit-content;
- }
- // 前置
- .el-input-group__prepend {
- border-right: 1px solid #dcdfe6;
- }
- // 后置
- .el-input-group__append {
- border-left: 1px solid #dcdfe6;
- }
- .el-input__suffix {
- transform: translate(0) !important;
- width: fit-content;
- margin-left: -25px;
- overflow: hidden;
- }
- }
- // 登录页面输入框有边框
- .login-form {
- .el-form-item {
- .el-input.el-input--mini,
- .el-input.el-input--small,
- .el-input.el-input--medium {
- border-width: 0;
- input {
- padding: 0 30px 0 15px !important;
- }
- }
- i.ri-eye-off-line {
- top: 0 !important;
- }
- }
- }
- // input end
- // date-picker start
- // 上面的样式会导致时间选择组件icon与文本重叠
- .el-date-editor:not(.el-range-editor) {
- input {
- margin-left: 25px !important;
- }
- }
- // 处理时间范围选择组件 placeholder文本被遮挡的问题
- .el-range-editor {
- .el-range-separator {
- width: max-content;
- }
- }
- // date-picker end
- // textarea start
- // 处理文本域显示输入字数统计,遮挡文本内容的问题
- .el-textarea.el-input--mini,
- .el-textarea.el-input--small,
- .el-textarea.el-input--medium {
- position: relative;
- textarea {
- }
- .el-input__count {
- position: relative;
- display: block;
- bottom: 0;
- right: 0;
- text-align: right;
- }
- }
- // textarea end
- // 处理单选框的报错 Blocked aria-hidden on an element because its descendant retained focus.
- input[aria-hidden="true"] {
- display: none !important;
- }
- .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
- box-shadow: none !important;
- }
|