@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/input/input.scss

@@ -0,0 +1,630 @@
+//@import '../theme/variables.scss';
+@import './variables.scss';
+
+$module: #{$prefix}-input;
+
+@keyframes #{$module}-active {
+    from {
+        transform: scale($motion-scale_size-inactive);
+    }
+
+    to {
+        transform: scale($motion-scale_size-active);
+    }
+}
+
+@keyframes #{$module}-inactive {
+    from {
+        transform: scale($motion-scale_size-active);
+    }
+
+    to {
+        transform: scale($motion-scale_size-inactive);
+    }
+}
+
+.#{$module}-wrapper {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+
+    @include shadow-0;
+    @include font-size-regular;
+    background-color: $color-input_default-bg-default;
+    border: $width-input_wrapper-border $color-input_default-border-default solid;
+    border-radius: $radius-input_wrapper;
+
+    width: 100%;
+    outline: none;
+    cursor: text;
+    box-sizing: border-box;
+    color: $color-input_default-text-default;
+
+    &-default {
+        height: $height-input_wrapper_default;
+        @include font-size-regular;
+        line-height: $height-input_default;
+    }
+
+    &-small {
+        height: $height-input_wrapper_small;
+        @include font-size-header-6;
+        line-height: $height-input_small;
+    }
+
+    &-large {
+        height: $height-input_wrapper_large;
+        @include font-size-header-6;
+        line-height: $height-input_large;
+    }
+
+    &:hover {
+        background-color: $color-input_default-bg-hover;
+        border-color: $color-input_default-border-hover;
+    }
+
+    // &:active {
+    //     background-color: $color-input_default-bg-active;
+    // }
+
+    &-focus {
+        background-color: $color-input_default-bg-focus;
+        border: $color-input_default-border-focus solid $width-input_wrapper_focus-border;
+
+        &:hover {
+            background-color: $color-input_default-bg-focus;
+            border-color: $color-input_default-border-focus;
+        }
+
+        &:active {
+            background-color: $color-input_default-bg-focus;
+            border-color: $color-input_default-border-focus;
+        }
+    }
+
+    &.#{$module}-readonly {
+        cursor: default;
+    }
+
+    &-error {
+        background-color: $color-input_danger-bg-default;
+        border-color: $color-input_danger-border-default;
+
+        &:hover {
+            background-color: $color-input_danger-bg-hover;
+            border-color: $color-input_danger-border-hover;
+        }
+
+        &.#{$module}-wrapper-focus {
+            background-color: $color-input_danger-bg-focus;
+            border-color: $color-input_danger-border-focus;
+        }
+
+        // &:active {
+        //     background-color: $color-input_danger-bg-active;
+        //     border-color: $color-input_danger-border-active;
+        // }
+    }
+
+    &-warning {
+        background-color: $color-input_warning-bg-default;
+        border-color: $color-input_warning-border-default;
+
+        &:hover {
+            background-color: $color-input_warning-bg-hover;
+            border-color: $color-input_warning-border-hover;
+        }
+
+        &.#{$module}-wrapper-focus {
+            background-color: $color-input_warning-bg-focus;
+            border-color: $color-input_warning-border-focus;
+        }
+
+        // &:active {
+        //     background-color: $color-input_warning-bg-active;
+        //     border-color: $color-input_warning-border-active;
+        // }
+    }
+
+    &__with-prefix {
+        display: inline-flex;
+        align-items: center;
+
+        .#{$module} {
+            padding-left: 0;
+        }
+    }
+
+    &__with-suffix {
+        display: inline-flex;
+        align-items: center;
+
+        .#{$module} {
+            padding-right: 0;
+        }
+    }
+
+    &-clearable,
+    &-modebtn {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &-hidden {
+        border: none;
+    }
+
+    .#{$prefix}-icon {
+        color: $color-input-icon-default;
+    }
+
+    .#{$module}-clearbtn,
+    .#{$module}-modebtn {
+        color: $color-input-icon-hover;
+
+        & > svg {
+            pointer-events: none;
+        }
+
+        &:hover {
+            cursor: pointer;
+
+            .#{$prefix}-icon {
+                color: $color-input-icon-hover;
+            }
+        }
+    }
+
+    &__with-suffix-icon.#{$module}-wrapper-clearable:not(.#{$module}-wrapper__with-suffix-hidden) {
+        .#{$module}-clearbtn {
+            min-width: $width-input-icon_clear_before_suffix;
+            justify-content: flex-end;
+        }
+    }
+
+    &-modebtn.#{$module}-wrapper-clearable {
+        .#{$module}-clearbtn {
+            min-width: $width-input-icon_clear_before_modebtn;
+            justify-content: center;
+        }
+    }
+
+    &.#{$module}-wrapper__with-append-only {
+        .#{$module} {
+            border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+
+            &:not(:last-child) {
+                border-right-style: none;
+                border-radius: 0;
+            }
+        }
+    }
+
+    &.#{$module}-wrapper__with-prepend-only {
+        .#{$module} {
+            border-radius: $radius-input_wrapper 0 0 $radius-input_wrapper;
+
+            &:not(:last-child) {
+                border-right-style: none;
+                border-radius: 0;
+            }
+        }
+    }
+
+    &.#{$module}-wrapper__with-prepend,
+    &.#{$module}-wrapper__with-append {
+        display: inline-flex;
+        align-items: center;
+        background-color: transparent;
+
+        &:hover {
+            background-color: transparent;
+        }
+
+        &.#{$module}-wrapper-focus {
+            border: $width-input_wrapper_focus-border $color-input_default-border-default solid;
+            background-color: transparent;
+        }
+
+        .#{$module} {
+            background-color: $color-input_default-bg-default;
+            border: $width-input_wrapper_focus-border transparent solid;
+
+            &:hover {
+                background-color: $color-input_default-bg-hover;
+
+                & + .#{$module}-clearbtn,
+                & ~ .#{$module}-modebtn {
+                    background-color: $color-input_default-bg-hover;
+                }
+            }
+
+            &:focus {
+                border: $width-input_wrapper_focus-border $color-input_default-border-focus solid;
+                background-color: $color-input_default-bg-focus;
+
+                &.#{$module}-sibling-clearbtn,
+                &.#{$module}-sibling-modebtn {
+                    border-right-style: none;
+                }
+
+                &.#{$module}-sibling-modebtn {
+
+                    & + .#{$module}-clearbtn {
+                        border-right-style: none;
+                    }
+                }
+
+                & + .#{$module}-clearbtn,
+                & ~ .#{$module}-modebtn {
+                    box-sizing: border-box;
+                    background-color: $color-input_default-bg-focus;
+                }
+
+                & + .#{$module}-clearbtn {
+                    border: $width-input_wrapper_focus-border $color-input_default-border-focus solid;
+                    border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+                    border-left-style: none;
+
+                    &:not(:last-child) {
+                        border-radius: 0;
+                    }
+                }
+
+                & ~ .#{$module}-modebtn {
+                    border: $width-input_wrapper_focus-border $color-input_default-border-focus solid;
+                    border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+                    border-left-style: none;
+
+                    &:not(:last-child) {
+                        border-radius: 0;
+                    }
+                }
+            }
+
+            &-clearbtn,
+            &-modebtn,
+            &-clearbtn:hover,
+            &-modebtn:hover {
+                background-color: $color-input_default-bg-default;
+
+                &:last-child {
+                    border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+                }
+            }
+        }
+
+        &.#{$module}-wrapper-error {
+            border-color: transparent;
+
+            .#{$module} {
+                background-color: $color-input_danger-bg-default;
+                border-color: $color-input_danger-border-default;
+
+                &:hover {
+                    background-color: $color-input_danger-bg-hover;
+                    border-color: $color-input_danger-border-hover;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_danger-bg-hover;
+                    }
+                }
+
+                &:focus {
+                    background-color: $color-input_danger-bg-focus;
+                    border-color: $color-input_danger-border-focus;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_danger-bg-focus;
+                        border-color: $color-input_danger-border-focus;
+                    }
+                }
+
+                &-clearbtn,
+                &-modebtn,
+                &-clearbtn:hover,
+                &-modebtn:hover {
+                    background-color: $color-input_danger-bg-default;
+
+                    &:last-child {
+                        border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+                    }
+                }
+            }
+        }
+
+        &.#{$module}-wrapper-warning {
+            border-color: transparent;
+
+            .#{$module} {
+                background-color: $color-input_warning-bg-default;
+                border-color: $color-input_warning-border-default;
+
+                &:hover {
+                    background-color: $color-input_warning-bg-hover;
+                    border-color: $color-input_warning-border-hover;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_warning-bg-hover;
+                    }
+                }
+
+                &:focus {
+                    background-color: $color-input_warning-bg-focus;
+                    border-color: $color-input_warning-border-focus;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_warning-bg-focus;
+                        border-color: $color-input_warning-border-focus;
+                    }
+                }
+
+                &-clearbtn,
+                &-modebtn,
+                &-clearbtn:hover,
+                &-modebtn:hover {
+                    background-color: $color-input_warning-bg-default;
+
+                    &:last-child {
+                        border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+                    }
+                }
+            }
+        }
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+        // border: $border-thickness-control $color-input_disabled-border-default solid;
+        color: $color-input_disabled-text-default;
+        background-color: $color-input_disabled-bg-default;
+
+        &:hover {
+            background-color: $color-input_disabled-bg-default;
+        }
+
+        .#{$module}-append,
+        .#{$module}-prepend,
+        .#{$module}-suffix,
+        .#{$module}-prefix,
+        .#{$prefix}-icon {
+            color: $color-input_disabled-text-default;
+        }
+    }
+}
+
+.#{$module} {
+    border: none;
+    outline: none;
+    width: 100%;
+    color: inherit;
+    padding-left: $spacing-input-paddingLeft;
+    padding-right: $spacing-input-paddingRight;
+
+    background-color: transparent;
+    box-sizing: border-box;
+
+    &::placeholder {
+        color: $color-input_placeholder-text-default;
+    }
+
+    &-large {
+        height: $height-input_large;
+        @include font-size-header-6;
+        line-height: $height-input_large;
+    }
+
+    &-small {
+        height: $height-input_small;
+        @include font-size-regular;
+        line-height: $height-input_small;
+    }
+
+    &-default {
+        height: $height-input_default;
+        @include font-size-regular;
+        line-height: $height-input_default;
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+        color: inherit;
+    }
+
+    // &-prefix {
+    //     padding: 0 $spacing-tight;
+    //     display: flex;
+    //     align-items: center;
+    //     height: 100%;
+    //     width: auto;
+    //     white-space: nowrap;
+    // }
+
+    &-inset-label {
+        margin-right: $spacing-input_insetLabel-marginRight;
+        font-weight: $font-input_insetLabel-fontWeight;
+        @include font-size-regular;
+        color: $color-input_prefix-text-default;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
+    &-prefix,
+    &-suffix {
+        @include all-center;
+
+        &-text {
+            margin: 0 $spacing-base-tight;
+            color: $color-input_prefix-text-default;
+            font-weight: 600;
+            white-space: nowrap;
+        }
+
+        &-icon {
+            color: $color-input-icon-default;
+            margin: $spacing-input_prefix_icon-marginY $spacing-input_prefix_icon-marginX;
+        }
+    }
+
+    &-suffix {
+        @include all-center;
+    }
+
+    &-clearbtn,
+    &-modebtn {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        justify-content: center;
+        min-width: $width-input-icon;
+    }
+
+    &-clearbtn + &-suffix {
+        & + .#{$module}-suffix-text {
+            margin-left: 0;
+        }
+
+        & + .#{$module}-suffix-icon {
+            margin-left: 0;
+        }
+    }
+
+    &-suffix-hidden {
+        display: none;
+    }
+
+    &-prepend,
+    &-append {
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        background-color: $color-input_default-bg-default;
+        color: $color-input_prefix-text-default;
+
+        &-icon,
+        &-text {
+            padding: $spacing-input_prepend-paddingY $spacing-input_prepend-paddingX;
+        }
+
+        @include font-size-regular;
+        flex-shrink: 0;
+    }
+
+    &-append {
+        border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+        border-left: $width-input_append-border $color-input_default-border-default solid;
+    }
+
+    &-prepend {
+        border-radius: $radius-input_wrapper 0 0 $radius-input_wrapper;
+        border-right: $width-input_prepend-border $color-input_default-border-default solid;
+    }
+
+    &-disabled {
+        &::placeholder {
+            color: $color-input_disabled-text-default;
+        }
+    }
+
+    &-group {
+        display: inline-flex;
+        align-items: center;
+        align-content: center;
+        flex-wrap: wrap;
+
+        // select与autocomplete的border-radius都是基于select
+        .#{$prefix}-select,
+        .#{$prefix}-cascader,
+        .#{$prefix}-tree-select,
+        & > .#{$module}-wrapper {
+            border-radius: 0;
+
+            &:first-child {
+                border-radius: $radius-input_wrapper 0 0 $radius-input_wrapper;
+            }
+
+            &:last-child {
+                border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+            }
+
+            &:not(:last-child) {
+                position: relative;
+
+                &::after {
+                    content: '';
+                    background-color: $color-input_group-border-default;
+                    width: $width-input_group_pseudo-border;
+                    // height: $inputGroup-border-height;
+                    position: absolute;
+                    right: -1px;
+                    top: 1px;
+                    bottom: 1px;
+                }
+            }
+        }
+
+        .#{$prefix}-input-number,
+        .#{$prefix}-datepicker,
+        .#{$prefix}-autocomplete {
+            border-radius: 0;
+
+            .#{$prefix}-datepicker-range-input {
+                border-radius: 0;
+            }
+
+            &:first-child {
+                .#{$module}-wrapper,
+                .#{$prefix}-datepicker-range-input {
+                    border-radius: $radius-input_wrapper 0 0 $radius-input_wrapper;
+                }
+            }
+
+            &:last-child {
+                .#{$module}-wrapper,
+                .#{$prefix}-datepicker-range-input {
+                    border-radius: 0 $radius-input_wrapper $radius-input_wrapper 0;
+                }
+            }
+
+            &:not(:last-child) {
+                position: relative;
+
+                &::after {
+                    content: '';
+                    background-color: $color-input_group-border-default;
+                    width: $width-input_group_pseudo-border;
+                    // height: $inputGroup-border-height;
+                    position: absolute;
+                    right: -1px;
+                    top: 1px;
+                    bottom: 1px;
+                }
+            }
+        }
+    }
+
+    &-group-wrapper {
+        &-with-top-label {
+            margin-top: $spacing-input_group_withTopLabel-marginTop;
+            margin-bottom: $spacing-input_group_withTopLabel-marginBottom;
+
+            .#{$prefix}-input-group {
+                display: flex;
+            }
+
+            .#{$prefix}-input-group {
+                .#{$prefix}-form-field {
+                    margin-top: 0;
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/input/rtl.scss

@@ -0,0 +1,100 @@
+//@import '../theme/variables.scss';
+@import "./variables.scss";
+
+$module: #{$prefix}-input;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module}-wrapper {
+        direction: rtl;
+
+        &__with-prefix {
+            .#{$module} {
+                padding-left: auto;
+                padding-right: 0;
+            }
+        }
+
+        &__with-suffix {
+            .#{$module} {
+                padding-right: auto;
+                padding-left: 0;
+            }
+        }
+    }
+
+    .#{$module} {
+        padding-left: $spacing-input-paddingRight;
+        padding-right: $spacing-input-paddingLeft;
+
+        &-inset-label {
+            margin-right: auto;
+            margin-left: $spacing-input_insetLabel-marginRight;
+        }
+
+        &-clearbtn + &-suffix {
+            & + .#{$module}-suffix-text {
+                margin-left: auto;
+                margin-right: 0;
+            }
+
+            & + .#{$module}-suffix-icon {
+                margin-left: auto;
+                margin-right: 0;
+            }
+        }
+
+        &-append {
+            border-left: 0;
+            border-right: $width-input_append-border $color-input_default-border-default solid;
+        }
+
+        &-prepend {
+            border-right: 0;
+            border-left: $width-input_prepend-border $color-input_default-border-default solid;
+        }
+
+        &-group {
+            .#{$prefix}-select,
+            .#{$prefix}-cascader,
+            .#{$prefix}-tree-select,
+            & > .#{$module}-wrapper {
+
+                &:not(:last-child) {
+
+                    &::after {
+                        right: auto;
+                        left: -1px;
+                    }
+                }
+            }
+
+            .#{$prefix}-input-number {
+
+                &:not(:last-child) {
+
+                    &::after {
+                        right: auto;
+                        left: -1px;
+                    }
+                }
+            }
+        }
+    }
+
+    .#{$module}-textarea-wrapper {
+        direction: rtl;
+    }
+
+    .#{$module}-textarea {
+
+        &-counter {
+            text-align: left;
+        }
+
+        &-showClear {
+            padding-right: 0;
+            padding-left: $spacing-textarea_withShowClear-paddingRight;
+        }
+    }
+}