@qsxy/element-plus-react 1.0.3 → 2.0.0

package/theme-chalk/form-item.scss

@@ -0,0 +1,437 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$form-item-margin-bottom: () !default;
+$form-item-margin-bottom: map.merge(
+    (
+        'large': 22px,
+        'default': 18px,
+        'small': 18px,
+    ),
+    $form-item-margin-bottom
+);
+
+$form-item-line-height: () !default;
+$form-item-line-height: map.merge(
+    (
+        'large': 40px,
+        'default': 32px,
+        'small': 24px,
+    ),
+    $form-item-line-height
+);
+
+$form-item-error-padding-top: () !default;
+$form-item-error-padding-top: map.merge(
+    (
+        'large': 4px,
+        'default': 2px,
+        'small': 2px,
+    ),
+    $form-item-error-padding-top
+);
+
+$form-item-label-top-line-height: () !default;
+$form-item-label-top-line-height: map.merge(
+    (
+        'large': 22px,
+        'default': 22px,
+        'small': 20px,
+    ),
+    $form-item-label-top-line-height
+);
+
+$form-item-label-top-margin-bottom: () !default;
+$form-item-label-top-margin-bottom: map.merge(
+    (
+        'large': 12px,
+        'default': 8px,
+        'small': 4px,
+    ),
+    $form-item-label-top-margin-bottom
+);
+
+@include b(form-item) {
+    display: flex;
+    --font-size: #{map.get($input-font-size, 'default')};
+    margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
+
+    .#{$namespace}-form-item {
+        margin-bottom: 0;
+    }
+
+    .#{$namespace}-input__validateIcon {
+        display: none;
+    }
+
+    @each $size in (large, default, small) {
+        @include m($size) {
+            --font-size: #{map.get($input-font-size, $size)};
+            @include set-css-var-value(('form', 'label-font-size'), var(--font-size));
+
+            margin-bottom: #{map.get($form-item-margin-bottom, $size)};
+
+            @include e(label) {
+                height: #{map.get($form-item-line-height, $size)};
+                line-height: #{map.get($form-item-line-height, $size)};
+            }
+
+            @include e(content) {
+                line-height: #{map.get($form-item-line-height, $size)};
+            }
+
+            @include e(error) {
+                padding-top: #{map.get($form-item-error-padding-top, $size)};
+            }
+        }
+    }
+
+    @include m(label-left) {
+        .#{$namespace}-form-item__label {
+            text-align: left;
+            justify-content: flex-start;
+        }
+    }
+
+    @include m(label-right) {
+        .#{$namespace}-form-item__label {
+            text-align: right;
+            justify-content: flex-end;
+        }
+    }
+
+    @include m(label-top) {
+        display: block;
+
+        .#{$namespace}-form-item__label {
+            display: block;
+            width: fit-content;
+            height: auto;
+            text-align: left;
+            margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
+            line-height: #{map.get($form-item-label-top-line-height, 'default')};
+            padding-right: 0;
+        }
+
+        &.is-flat {
+            .#{$namespace}-form-item {
+                display: inline-block;
+                padding-right: 16px;
+                width: 100%;
+                vertical-align: top;
+            }
+        }
+    }
+
+    @include e(label-wrap) {
+        display: flex;
+    }
+
+    @include e(label) {
+        display: inline-flex;
+        align-items: center;
+
+        flex: 0 0 auto;
+        font-size: getCssVar('form-label-font-size');
+        color: getCssVar('text-color', 'regular');
+
+        height: #{map.get($form-item-line-height, 'default')};
+        line-height: #{map.get($form-item-line-height, 'default')};
+
+        padding: 0 12px 0 0;
+        box-sizing: border-box;
+
+        .#{$namespace}-help-icon {
+            margin-left: 4px;
+            color: var(--#{$namespace}-color-info);
+            cursor: help;
+        }
+    }
+
+    .#{$namespace}-form-item__label--help {
+        margin-left: 5px;
+        cursor: pointer;
+        color: var(--#{$namespace}-color-info-light-3);
+        font-size: 16px;
+    }
+
+    @include e(content) {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        flex: 1;
+        line-height: #{map.get($form-item-line-height, 'default')};
+        position: relative;
+        font-size: var(--font-size);
+        min-width: 0;
+
+        .#{$namespace}-input-group {
+            vertical-align: top;
+        }
+    }
+
+    @include e(error) {
+        color: getCssVar('color-danger');
+        font-size: 12px;
+        line-height: 1;
+        padding-top: #{map.get($form-item-error-padding-top, 'default')};
+        position: absolute;
+        top: 100%;
+        left: 0;
+
+        @include m(inline) {
+            position: relative;
+            top: auto;
+            left: auto;
+            display: inline-block;
+            margin-left: 10px;
+        }
+    }
+
+    @include e(warning) {
+        color: getCssVar('color-warning');
+        font-size: 12px;
+        line-height: 1;
+        padding-top: #{map.get($form-item-error-padding-top, 'default')};
+        position: absolute;
+        top: 100%;
+        left: 0;
+
+        @include m(inline) {
+            position: relative;
+            top: auto;
+            left: auto;
+            display: inline-block;
+            margin-left: 10px;
+        }
+    }
+
+    @include when(required) {
+        @include pseudo('not(.is-no-asterisk)') {
+            &.asterisk-left {
+                > .#{$namespace}-form-item__label:before,
+                > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
+                    content: '*';
+                    color: getCssVar('color-danger');
+                    margin-right: 4px;
+                }
+            }
+
+            &.asterisk-right {
+                > .#{$namespace}-form-item__label:after,
+                > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:after {
+                    content: '*';
+                    color: getCssVar('color-danger');
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+
+    @include when(error) {
+        @include e(content) {
+            .#{$namespace}-input__wrapper,
+            .#{$namespace}-textarea__inner,
+            .#{$namespace}-select__wrapper,
+            .#{$namespace}-input-tag__wrapper,
+            :not(.#{$namespace}-input-otp--underlined) .#{$namespace}-input-otp__input-field {
+                &,
+                &:hover,
+                &:focus,
+                &.is-focus {
+                    box-shadow: 0 0 0 1px getCssVar('color-danger') inset !important;
+                }
+            }
+
+            .#{$namespace}-input-otp--underlined .#{$namespace}-input-otp__input-field {
+                &,
+                &:hover,
+                &:focus,
+                &.is-focus {
+                    &::after {
+                        box-shadow: 0 0 0 1px getCssVar('color-danger') inset !important;
+                    }
+                }
+            }
+
+            .#{$namespace}-input-group__prepend {
+                .#{$namespace}-input__wrapper,
+                .#{$namespace}-select__wrapper {
+                    box-shadow: 0 0 0 1px transparent inset;
+                    // box-shadow: 1px 0 0 0 var(--el-color-danger) inset, 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset;
+                }
+
+                .#{$namespace}-input__validateIcon {
+                    display: none;
+                }
+            }
+            .#{$namespace}-input-group__append {
+                .#{$namespace}-input__wrapper,
+                .#{$namespace}-select__wrapper {
+                    box-shadow: 0 0 0 1px transparent inset;
+                    // box-shadow: 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset, -1px 0 0 0 var(--el-color-danger) inset;
+                }
+
+                .#{$namespace}-input__validateIcon {
+                    display: none;
+                }
+            }
+
+            .#{$namespace}-input__validateIcon {
+                color: getCssVar('color-danger');
+            }
+
+            .#{$namespace}-input-group__prepend {
+                .#{$namespace}-form-item.is-error {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 1px 0 0 0 var(--el-color-danger) inset, 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset !important;
+                        }
+                    }
+                }
+                .#{$namespace}-form-item.is-success {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 1px 0 0 0 var(--el-input-border-color) inset, 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset !important;
+                        }
+                    }
+                }
+            }
+
+            .#{$namespace}-input-group__append {
+                .#{$namespace}-form-item.is-error {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset, -1px 0 0 0 var(--el-color-danger) inset !important;
+                        }
+                    }
+                }
+                .#{$namespace}-form-item.is-success {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset, -1px 0 0 0 var(--el-input-border-color) inset !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @include when(warning) {
+        @include e(content) {
+            .#{$namespace}-input__wrapper,
+            .#{$namespace}-textarea__inner,
+            .#{$namespace}-select__wrapper,
+            .#{$namespace}-input-tag__wrapper,
+            :not(.#{$namespace}-input-otp--underlined) .#{$namespace}-input-otp__input-field {
+                &,
+                &:hover,
+                &:focus,
+                &.is-focus {
+                    box-shadow: 0 0 0 1px getCssVar('color-warning') inset !important;
+                }
+            }
+
+            .#{$namespace}-input-otp--underlined .#{$namespace}-input-otp__input-field {
+                &,
+                &:hover,
+                &:focus,
+                &.is-focus {
+                    &::after {
+                        box-shadow: 0 0 0 1px getCssVar('color-warning') inset !important;
+                    }
+                }
+            }
+
+            .#{$namespace}-input-group__prepend {
+                .#{$namespace}-input__wrapper,
+                .#{$namespace}-select__wrapper {
+                    box-shadow: 0 0 0 1px transparent inset;
+                    // box-shadow: 1px 0 0 0 var(--el-color-danger) inset, 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset;
+                }
+
+                .#{$namespace}-input__validateIcon {
+                    display: none;
+                }
+            }
+            .#{$namespace}-input-group__append {
+                .#{$namespace}-input__wrapper,
+                .#{$namespace}-select__wrapper {
+                    box-shadow: 0 0 0 1px transparent inset;
+                    // box-shadow: 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset, -1px 0 0 0 var(--el-color-danger) inset;
+                }
+
+                .#{$namespace}-input__validateIcon {
+                    display: none;
+                }
+            }
+
+            .#{$namespace}-input__validateIcon {
+                color: getCssVar('color-warning');
+            }
+
+            .#{$namespace}-input-group__prepend {
+                .#{$namespace}-form-item.is-error {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 1px 0 0 0 var(--el-color-danger) inset, 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset !important;
+                        }
+                    }
+                }
+                .#{$namespace}-form-item.is-success {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 1px 0 0 0 var(--el-input-border-color) inset, 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset !important;
+                        }
+                    }
+                }
+            }
+
+            .#{$namespace}-input-group__append {
+                .#{$namespace}-form-item.is-error {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 0 1px 0 0 var(--el-color-danger) inset, 0 -1px 0 0 var(--el-color-danger) inset, -1px 0 0 0 var(--el-color-danger) inset !important;
+                        }
+                    }
+                }
+                .#{$namespace}-form-item.is-success {
+                    .#{$namespace}-form-item__content {
+                        .#{$namespace}-input__wrapper,
+                        .#{$namespace}-select__wrapper {
+                            box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset, -1px 0 0 0 var(--el-input-border-color) inset !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @include m(feedback) {
+        .#{$namespace}-input__validateIcon {
+            display: inline-flex;
+        }
+    }
+
+    @include e(nostyle) {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        line-height: 0;
+
+        .#{$namespace}-input-group__prepend,
+        .#{$namespace}-input-group__append {
+            background-color: getCssVar('el-fill-color-blank');
+        }
+    }
+}