|
@@ -0,0 +1,165 @@
|
|
|
+// 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;
|
|
|
+}
|