vdesign-ui 0.3.0 → 0.3.1

package/dist/components/input/style.less

@@ -1,472 +1,472 @@
-@input-prefix-cls: vd-input;
-@search-prefix-cls: vd-search;
-@stepper-prefix-cls: vd-stepper;
-@password-prefix-cls: vd-password;
-
-
-
-.@{input-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-
-    &--border{
-        margin-inline-end: var(--spacing-input-form_divider-margin_y);
-    }
-    &__control {
-        flex: 1;
-        width: 100%;
-        min-width: 0;
-        margin: 0;
-        padding: 0;
-        background-color: transparent;
-        color: var(--color-input-text-active);
-        font-size: var(--en-single-f-d-s-fontSize);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        caret-color: var(--color-input-cursor);
-
-    }
-
-    &--active {
-        &.vd-hairline--bottom {
-            &::after {
-                border-color: var(--color-input-form-border-active) !important;
-                border-bottom-width: 2px;
-            }
-        }
-    }
-
-    &--error {
-        background-color: var(--color-input-form-bg-wrong) !important;
-
-        .@{input-prefix-cls}-form__append {
-            color: var(--color-input-form-border-wrong);
-        }
-
-        &::after {
-            border: 0 solid var(--color-input-form-border-wrong);
-            border-bottom-width: 2px;
-        }
-
-        &.vd-hairline--bottom {
-            &::after {
-                border-color: var(--color-input-form-border-wrong) !important;
-                border-bottom-width: 2px;
-            }
-        }
-    }
-
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding-inline-start: var(--spacing-input-max_text-padding_y);
-    padding-inline-end: var(--spacing-input-max_text-padding_y);
-    height: var(--height-input-bg);
-
-    &.vd-hairline--bottom {
-        &::after {
-            border-color: var(--color-input-form-border-default);
-        }
-    }
-
-    .@{input-prefix-cls}-textarea {
-        &__control {
-            outline: 0 none;
-            border: 0;
-            text-decoration: none;
-            resize: none;
-            line-height: 20px;
-        }
-    }
-
-    input::-webkit-input-placeholder,
-    textarea::-webkit-input-placeholder {
-        font-size: var(--en-single-f-d-r-fontSize);
-        font-weight: var(--en-single-f-d-r-fontWeight);
-        color: var(--color-input-text-default);
-    }
-
-    &--disabled {
-        .@{input-prefix-cls}__control {
-            color: var(--color-input-text-disable);
-        }
-    }
-
-
-    &-textarea {
-        height: auto;
-        display: block;
-        background-color: var(--color-input-textarea-bg-default);
-        border-radius: var(--radius-input-bg);
-        min-height: var(--height-input-textarea);
-        padding-inline-start: var(--spacing-input-textarea-padding_y);
-        padding-inline-end: var(--spacing-input-textarea-padding_y);
-        padding-block-start: var(--spacing-input-textarea-padding_x);
-        padding-block-end: var(--spacing-input-textarea-padding_x);
-        font-size: var(--en-single-f-d-s-fontSize);
-    
-        .@{input-prefix-cls}-form__right {
-            display: block;
-    
-            .@{input-prefix-cls}__word-limit {
-                text-align: end;
-                color: var(--color-input-text-default);
-                font-size: var(--en-single-f-b-r-fontSize);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                margin-block-start: var(--spacing-input-textarea_text-margin_down);
-    
-                &--error {
-                    color: var(--color-input-text-wrong);
-                }
-            }
-        }
-    }    
-
-
-    &-form {
-        padding-inline-start: 0;
-        padding-inline-end: 0;
-        height: var(--height-input-form_text);
-
-        &__prefix {
-            position: relative;
-            color: var(--color-input-text-active);
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-            padding-inline-end: var(--spacing-input-form_divider-margin_y);
-        }
-        
-        &__right {
-            display: inline-flex;
-            align-items: center;
-        
-            .@{input-prefix-cls}__word-limit {
-                text-align: end;
-                color: var(--color-input-text-default);
-                font-size: var(--en-single-f-b-r-fontSize);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
-        
-                &--error {
-                    color: var(--color-input-text-wrong);
-                }
-            }
-        }
-        
-        &__suffix {
-            margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
-            color: var(--color-input-text-active);
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-        
-            .vd-iconfont {
-                vertical-align: middle;
-                color: var(--text-color-h3);
-                font-size: var(--icon-input-clean);
-            }
-        }
-        
-        &__append {
-            color: var(--color-input-text-default);
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-        }
-        
-        &__password {
-            display: flex;
-            align-items: center;
-            color: var(--color-input-text-active);
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-        
-            &--close {
-                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
-        
-                .vd-iconfont {
-                    color: var(--text-color-h2);
-                    font-size: var(--icon-input-clean);
-                }
-            }
-        
-            &--password {
-                color: var(--text-color-h2);
-                margin-inline-start: var(--spacing-input-form_suffix_icon-margin_y);
-                margin-inline-end: var(--spacing-input-suffix_icon-margin_y);
-                font-size: var(--icon-input-form_suffix);
-            }
-        }        
-    }
-
-    &--bigsize {
-        height: var(--height-input-form_number_text);
-
-        .@{input-prefix-cls}__control {
-            font-size: var(--en-single-f-g-b-fontSize);
-            font-weight: var(--en-single-f-g-b-fontWeight);
-        }
-    }
-
-    &-textarea--warning {
-        &::after {
-            display: none;
-        }
-
-        .@{input-prefix-cls}__word-limit {
-            color: var(--color-input-form_counter-warning);
-        }
-    }
-
-    &-inputarea {
-        display: flex;
-        border-radius: 0;
-    }
-
-}
-
-.@{search-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-    flex: 1;
-    display: flex;
-    align-items: center;
-    height: var(--height-input-search_content);
-    padding-inline-start: var(--spacing-input-search_textarea-padding_y);
-    padding-inline-end: var(--spacing-input-search_textarea-padding_y);
-    background-color: var(--color-input-trade-bg);
-
-    .@{input-prefix-cls} {    
-        &-search {
-            padding-inline-start: 0;
-            padding-inline-end: 0;
-            flex: 1;
-        }
-    }
-
-    &-content {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        background-color: var(--color-input-trade-bg);
-        padding-inline-start: var(--spacing-input-textarea-padding_y);
-        padding-inline-end: var(--spacing-input-textarea-padding_y);
-        border-radius: var(--radius-input-bg);
-
-        .@{search-prefix-cls} {
-            &__control {
-                width: 100%;
-                background-color: transparent;
-                height: var(--height-input-search_bg);
-                color: var(--color-input-text-active);
-                font-size: var(--en-single-f-d-s-fontSize);
-                font-weight: var(--en-single-f-d-s-fontWeight);
-                caret-color: var(--color-input-cursor);
-
-                &::-webkit-input-placeholder {
-                    color: var(--color-input-text-default);
-                    font-size: var(--en-single-f-d-r-fontSize);
-                    font-weight: var(--en-single-f-d-r-fontWeight);
-                }
-            }
-        }
-    }
-
-    &__prefix {
-        display: flex;
-        padding-inline-end: var(--spacing-input-suffix_icon-margin_y);
-
-        .vd-iconfont {
-            vertical-align: middle;
-            color: var(--text-color-h3);
-            font-size: var(--icon-input-search);
-        }
-    }
-
-    &__action {
-        margin-inline-start: var(--spacing-input-search_cancel-margin_left);
-        display: flex;
-    }
-}
-
-.@{stepper-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-    display: flex;
-    align-items: center;
-    background-color: var(--color-input-trade-bg);
-    height: var(--height-input-bg);
-    padding-inline-start: var(--spacing-input-trade-padding_y);
-    padding-inline-end: var(--spacing-input-trade-padding_y);
-    border-radius: var(--radius-input-trade_bg);
-
-    &-input {
-        width: 100%;
-        padding: 0;
-        background-color: transparent;
-        color: var(--color-input-text-active);
-        font-size: var(--en-single-f-d-s-fontSize);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        margin-inline-end: var(--spacing-input-trade_number_input-margin_left);
-        caret-color: var(--color-input-cursor);
-
-        &::-webkit-input-placeholder {
-            color: var(--color-input-text-default);
-            font-size: var(--en-single-f-d-r-fontSize);
-            font-weight: var(--en-single-f-d-r-fontWeight);
-        }
-    }
-
-    .@{stepper-prefix-cls}__minus {
-        padding-inline-start: 0;
-        padding-inline-end: var(--spacing-input-trade_number_divider-margin_y);
-        background-color: transparent;
-
-        .vd-iconfont {
-            color: var(--text-color-h2);
-            font-size: var(--icon-input-trade_number_input_icon);
-        }
-    }
-
-    .@{stepper-prefix-cls}__plus {
-        padding-inline-start: var(--spacing-input-trade_number_divider-margin_y);
-        padding-inline-end: 0;
-        background-color: transparent;
-
-        .vd-iconfont {
-            color: var(--text-color-h2);
-            font-size: var(--icon-input-trade_number_input_icon);
-        }
-    }
-
-    &--center {
-        text-align: center;
-
-        .@{stepper-prefix-cls} {
-            &-input {
-                text-align: center;
-                margin-inline-start: var(--spacing-input-trade_number_input-margin_left);
-            }
-        }
-    }
-
-    &--disabled {
-        .@{stepper-prefix-cls} {
-            color: var(--color-input-text-disable);
-        }
-
-        .vd-iconfont {
-            opacity: var(--opacity-30);
-        }
-    }
-
-    &--gray {
-        background-color: var(--bg-color-3);
-        border-radius: var(--radius-input-bg);
-    }
-
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-}
-
-.@{password-prefix-cls} {
-    input {
-        outline: 0 none;
-        border: 0;
-        text-decoration: none;
-    }
-    direction: ltr;
-    position: relative;
-    margin: 0 var(--spacing-input-code-padding_y);
-    -webkit-user-select: none;
-    user-select: none;
-
-    &__security {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        cursor: pointer;
-        height: var(--height-input-code);
-    }
-
-    &__item {
-        position: relative;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-input-text-active);
-        font-size: var(--en-single-f-f-b-fontSize);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        width: var(--width-input-code_number);
-        height: var(--height-input-code_number);
-        margin-inline-end: var(--spacing-input-code_number-margin_right);
-
-        &:last-child {
-            margin-inline-end: 0;
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            left: 50%;
-            bottom: ~"calc(var(--spacing-input-code_number-margin_bottom) * -1)";
-            transform: translateX(-50%);
-            background-color: var(--color-input-form-border-default);
-            width: var(--width-input-code_number_line);
-            height: var(--height-input-code_number_line);
-        }
-
-        &.vd-password-is-filled {
-            &::after {
-                background-color: var(--color-input-form-border-active);
-            }
-        }
-
-        .mask-icon {
-            visibility: visible;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 16px;
-            height: 16px;
-            background-color: var(--color-input-text-active);
-            border-radius: 100%;
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    &__input {
-        opacity: 0;
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    }
-}
-
-.vd-textarea-auto {
-    height: auto;
-    min-height: auto;
-}
-
-
-[lang|='ar'], [dir='rtl']{
-    .@{input-prefix-cls} {
-        &__word-limit{
-            display: flex;
-        }
-    }
-    
+@input-prefix-cls: vd-input;
+@search-prefix-cls: vd-search;
+@stepper-prefix-cls: vd-stepper;
+@password-prefix-cls: vd-password;
+
+
+
+.@{input-prefix-cls} {
+    input {
+        outline: 0 none;
+        border: 0;
+        text-decoration: none;
+    }
+
+    &--border{
+        margin-inline-end: var(--spacing-input-form_divider-margin_y);
+    }
+    &__control {
+        flex: 1;
+        width: 100%;
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        background-color: transparent;
+        color: var(--color-input-text-active);
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        caret-color: var(--color-input-cursor);
+
+    }
+
+    &--active {
+        &.vd-hairline--bottom {
+            &::after {
+                border-color: var(--color-input-form-border-active) !important;
+                border-bottom-width: 2px;
+            }
+        }
+    }
+
+    &--error {
+        background-color: var(--color-input-form-bg-wrong) !important;
+
+        .@{input-prefix-cls}-form__append {
+            color: var(--color-input-form-border-wrong);
+        }
+
+        &::after {
+            border: 0 solid var(--color-input-form-border-wrong);
+            border-bottom-width: 2px;
+        }
+
+        &.vd-hairline--bottom {
+            &::after {
+                border-color: var(--color-input-form-border-wrong) !important;
+                border-bottom-width: 2px;
+            }
+        }
+    }
+
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-inline-start: var(--spacing-input-max_text-padding_y);
+    padding-inline-end: var(--spacing-input-max_text-padding_y);
+    height: var(--height-input-bg);
+
+    &.vd-hairline--bottom {
+        &::after {
+            border-color: var(--color-input-form-border-default);
+        }
+    }
+
+    .@{input-prefix-cls}-textarea {
+        &__control {
+            outline: 0 none;
+            border: 0;
+            text-decoration: none;
+            resize: none;
+            line-height: 20px;
+        }
+    }
+
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+        font-size: var(--en-single-f-d-r-fontSize);
+        font-weight: var(--en-single-f-d-r-fontWeight);
+        color: var(--color-input-text-default);
+    }
+
+    &--disabled {
+        .@{input-prefix-cls}__control {
+            color: var(--color-input-text-disable);
+        }
+    }
+
+
+    &-textarea {
+        height: auto;
+        display: block;
+        background-color: var(--color-input-textarea-bg-default);
+        border-radius: var(--radius-input-bg);
+        min-height: var(--height-input-textarea);
+        padding-inline-start: var(--spacing-input-textarea-padding_y);
+        padding-inline-end: var(--spacing-input-textarea-padding_y);
+        padding-block-start: var(--spacing-input-textarea-padding_x);
+        padding-block-end: var(--spacing-input-textarea-padding_x);
+        font-size: var(--en-single-f-d-s-fontSize);
+    
+        .@{input-prefix-cls}-form__right {
+            display: block;
+    
+            .@{input-prefix-cls}__word-limit {
+                text-align: end;
+                color: var(--color-input-text-default);
+                font-size: var(--en-single-f-b-r-fontSize);
+                font-weight: var(--en-single-f-b-r-fontWeight);
+                margin-block-start: var(--spacing-input-textarea_text-margin_down);
+    
+                &--error {
+                    color: var(--color-input-text-wrong);
+                }
+            }
+        }
+    }    
+
+
+    &-form {
+        padding-inline-start: 0;
+        padding-inline-end: 0;
+        height: var(--height-input-form_text);
+
+        &__prefix {
+            position: relative;
+            color: var(--color-input-text-active);
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+            padding-inline-end: var(--spacing-input-form_divider-margin_y);
+        }
+        
+        &__right {
+            display: inline-flex;
+            align-items: center;
+        
+            .@{input-prefix-cls}__word-limit {
+                text-align: end;
+                color: var(--color-input-text-default);
+                font-size: var(--en-single-f-b-r-fontSize);
+                font-weight: var(--en-single-f-b-r-fontWeight);
+                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
+        
+                &--error {
+                    color: var(--color-input-text-wrong);
+                }
+            }
+        }
+        
+        &__suffix {
+            margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
+            color: var(--color-input-text-active);
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+        
+            .vd-iconfont {
+                vertical-align: middle;
+                color: var(--text-color-h3);
+                font-size: var(--icon-input-clean);
+            }
+        }
+        
+        &__append {
+            color: var(--color-input-text-default);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+        }
+        
+        &__password {
+            display: flex;
+            align-items: center;
+            color: var(--color-input-text-active);
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+        
+            &--close {
+                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
+        
+                .vd-iconfont {
+                    color: var(--text-color-h2);
+                    font-size: var(--icon-input-clean);
+                }
+            }
+        
+            &--password {
+                color: var(--text-color-h2);
+                margin-inline-start: var(--spacing-input-form_suffix_icon-margin_y);
+                margin-inline-end: var(--spacing-input-suffix_icon-margin_y);
+                font-size: var(--icon-input-form_suffix);
+            }
+        }        
+    }
+
+    &--bigsize {
+        height: var(--height-input-form_number_text);
+
+        .@{input-prefix-cls}__control {
+            font-size: var(--en-single-f-g-b-fontSize);
+            font-weight: var(--en-single-f-g-b-fontWeight);
+        }
+    }
+
+    &-textarea--warning {
+        &::after {
+            display: none;
+        }
+
+        .@{input-prefix-cls}__word-limit {
+            color: var(--color-input-form_counter-warning);
+        }
+    }
+
+    &-inputarea {
+        display: flex;
+        border-radius: 0;
+    }
+
+}
+
+.@{search-prefix-cls} {
+    input {
+        outline: 0 none;
+        border: 0;
+        text-decoration: none;
+    }
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: var(--height-input-search_content);
+    padding-inline-start: var(--spacing-input-search_textarea-padding_y);
+    padding-inline-end: var(--spacing-input-search_textarea-padding_y);
+    background-color: var(--color-input-trade-bg);
+
+    .@{input-prefix-cls} {    
+        &-search {
+            padding-inline-start: 0;
+            padding-inline-end: 0;
+            flex: 1;
+        }
+    }
+
+    &-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        background-color: var(--color-input-trade-bg);
+        padding-inline-start: var(--spacing-input-textarea-padding_y);
+        padding-inline-end: var(--spacing-input-textarea-padding_y);
+        border-radius: var(--radius-input-bg);
+
+        .@{search-prefix-cls} {
+            &__control {
+                width: 100%;
+                background-color: transparent;
+                height: var(--height-input-search_bg);
+                color: var(--color-input-text-active);
+                font-size: var(--en-single-f-d-s-fontSize);
+                font-weight: var(--en-single-f-d-s-fontWeight);
+                caret-color: var(--color-input-cursor);
+
+                &::-webkit-input-placeholder {
+                    color: var(--color-input-text-default);
+                    font-size: var(--en-single-f-d-r-fontSize);
+                    font-weight: var(--en-single-f-d-r-fontWeight);
+                }
+            }
+        }
+    }
+
+    &__prefix {
+        display: flex;
+        padding-inline-end: var(--spacing-input-suffix_icon-margin_y);
+
+        .vd-iconfont {
+            vertical-align: middle;
+            color: var(--text-color-h3);
+            font-size: var(--icon-input-search);
+        }
+    }
+
+    &__action {
+        margin-inline-start: var(--spacing-input-search_cancel-margin_left);
+        display: flex;
+    }
+}
+
+.@{stepper-prefix-cls} {
+    input {
+        outline: 0 none;
+        border: 0;
+        text-decoration: none;
+    }
+    display: flex;
+    align-items: center;
+    background-color: var(--color-input-trade-bg);
+    height: var(--height-input-bg);
+    padding-inline-start: var(--spacing-input-trade-padding_y);
+    padding-inline-end: var(--spacing-input-trade-padding_y);
+    border-radius: var(--radius-input-trade_bg);
+
+    &-input {
+        width: 100%;
+        padding: 0;
+        background-color: transparent;
+        color: var(--color-input-text-active);
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        margin-inline-end: var(--spacing-input-trade_number_input-margin_left);
+        caret-color: var(--color-input-cursor);
+
+        &::-webkit-input-placeholder {
+            color: var(--color-input-text-default);
+            font-size: var(--en-single-f-d-r-fontSize);
+            font-weight: var(--en-single-f-d-r-fontWeight);
+        }
+    }
+
+    .@{stepper-prefix-cls}__minus {
+        padding-inline-start: 0;
+        padding-inline-end: var(--spacing-input-trade_number_divider-margin_y);
+        background-color: transparent;
+
+        .vd-iconfont {
+            color: var(--text-color-h2);
+            font-size: var(--icon-input-trade_number_input_icon);
+        }
+    }
+
+    .@{stepper-prefix-cls}__plus {
+        padding-inline-start: var(--spacing-input-trade_number_divider-margin_y);
+        padding-inline-end: 0;
+        background-color: transparent;
+
+        .vd-iconfont {
+            color: var(--text-color-h2);
+            font-size: var(--icon-input-trade_number_input_icon);
+        }
+    }
+
+    &--center {
+        text-align: center;
+
+        .@{stepper-prefix-cls} {
+            &-input {
+                text-align: center;
+                margin-inline-start: var(--spacing-input-trade_number_input-margin_left);
+            }
+        }
+    }
+
+    &--disabled {
+        .@{stepper-prefix-cls} {
+            color: var(--color-input-text-disable);
+        }
+
+        .vd-iconfont {
+            opacity: var(--opacity-30);
+        }
+    }
+
+    &--gray {
+        background-color: var(--bg-color-3);
+        border-radius: var(--radius-input-bg);
+    }
+
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+.@{password-prefix-cls} {
+    input {
+        outline: 0 none;
+        border: 0;
+        text-decoration: none;
+    }
+    direction: ltr;
+    position: relative;
+    margin: 0 var(--spacing-input-code-padding_y);
+    -webkit-user-select: none;
+    user-select: none;
+
+    &__security {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        cursor: pointer;
+        height: var(--height-input-code);
+    }
+
+    &__item {
+        position: relative;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-input-text-active);
+        font-size: var(--en-single-f-f-b-fontSize);
+        font-weight: var(--en-single-f-f-b-fontWeight);
+        width: var(--width-input-code_number);
+        height: var(--height-input-code_number);
+        margin-inline-end: var(--spacing-input-code_number-margin_right);
+
+        &:last-child {
+            margin-inline-end: 0;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            bottom: ~"calc(var(--spacing-input-code_number-margin_bottom) * -1)";
+            transform: translateX(-50%);
+            background-color: var(--color-input-form-border-default);
+            width: var(--width-input-code_number_line);
+            height: var(--height-input-code_number_line);
+        }
+
+        &.vd-password-is-filled {
+            &::after {
+                background-color: var(--color-input-form-border-active);
+            }
+        }
+
+        .mask-icon {
+            visibility: visible;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 16px;
+            height: 16px;
+            background-color: var(--color-input-text-active);
+            border-radius: 100%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    &__input {
+        opacity: 0;
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+}
+
+.vd-textarea-auto {
+    height: auto;
+    min-height: auto;
+}
+
+
+[lang|='ar'], [dir='rtl']{
+    .@{input-prefix-cls} {
+        &__word-limit{
+            display: flex;
+        }
+    }
+    
 }