mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-23 13:31:06 +08:00
style(input): cut size
This commit is contained in:
parent
20fcfe4065
commit
4733320cea
@ -28,9 +28,13 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(input) {
|
||||
@include once {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
@include input-size-mixin("small");
|
||||
@include input-size-mixin("medium");
|
||||
@include input-size-mixin("large");
|
||||
@include e(icon) {
|
||||
position: absolute;
|
||||
line-height: $--input-icon-size;
|
||||
@ -44,7 +48,6 @@
|
||||
line-height: $--input-icon-size;
|
||||
height: $--input-icon-size;
|
||||
width: $--input-icon-size;
|
||||
color: $--input-icon-color;
|
||||
}
|
||||
}
|
||||
left: 0;
|
||||
@ -58,59 +61,11 @@
|
||||
transform: translateY(-50%);
|
||||
line-height: 12px;
|
||||
}
|
||||
@include e(input, textarea) {
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
border-radius: $--input-border-radius;
|
||||
outline: none;
|
||||
color: map-get($--input-color, 'default');
|
||||
font-family: $--n-font-family;
|
||||
background-color: map-get($--input-background-color, 'default');
|
||||
width: 100%;
|
||||
caret-color: $--input-caret-color;
|
||||
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
vertical-align: bottom;
|
||||
box-shadow: map-get($--input-box-shadow, 'default');
|
||||
&:hover {
|
||||
box-shadow: map-get($--input-box-shadow, 'hover');
|
||||
@include e(icon) {
|
||||
i {
|
||||
&::before {
|
||||
color: $--input-icon-color;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: map-get($--input-box-shadow, 'focus');
|
||||
background-color: map-get($--input-background-color, 'focus');
|
||||
}
|
||||
&::placeholder {
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
color: map-get($--input-placeholder-color, 'default');
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@include input-size-mixin("small");
|
||||
@include input-size-mixin("medium");
|
||||
@include input-size-mixin("large");
|
||||
@include m(icon) {
|
||||
@include e(input) {
|
||||
padding-left: 38px!important;
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
cursor: not-allowed;
|
||||
@include e(input, textarea) {
|
||||
cursor: not-allowed;
|
||||
background-color: map-get($--input-background-color, 'disabled');
|
||||
color: map-get($--input-color, 'disabled');
|
||||
box-shadow: map-get($--input-box-shadow, 'disabled') !important;
|
||||
&::placeholder {
|
||||
color: map-get($--input-placeholder-color, 'disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(clearable) {
|
||||
@include e(input, textarea, textarea-mirror) {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
@include e(textarea, textarea-mirror) {
|
||||
@ -137,5 +92,60 @@
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
@include m(clearable) {
|
||||
@include e(input, textarea, textarea-mirror) {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
@include m(icon) {
|
||||
@include e(input) {
|
||||
padding-left: 38px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(input, textarea) {
|
||||
@include once {
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
border-radius: $--input-border-radius;
|
||||
outline: none;
|
||||
font-family: $--n-font-family;
|
||||
width: 100%;
|
||||
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
color: map-get($--input-color, 'default');
|
||||
background-color: map-get($--input-background-color, 'default');
|
||||
caret-color: $--input-caret-color;
|
||||
box-shadow: map-get($--input-box-shadow, 'default');
|
||||
&:hover {
|
||||
box-shadow: map-get($--input-box-shadow, 'hover');
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: map-get($--input-box-shadow, 'focus');
|
||||
background-color: map-get($--input-background-color, 'focus');
|
||||
}
|
||||
&::placeholder {
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
color: map-get($--input-placeholder-color, 'default');
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
cursor: not-allowed;
|
||||
@include e(input, textarea) {
|
||||
cursor: not-allowed;
|
||||
background-color: map-get($--input-background-color, 'disabled');
|
||||
color: map-get($--input-color, 'disabled');
|
||||
box-shadow: map-get($--input-box-shadow, 'disabled') !important;
|
||||
&::placeholder {
|
||||
color: map-get($--input-placeholder-color, 'disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user