mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
177 lines
4.0 KiB
SCSS
177 lines
4.0 KiB
SCSS
.#{$ns}Number {
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: $Form-input-height;
|
|
font-size: $Form-input-fontSize;
|
|
height: $Form-input-height;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
background-color: $Number-bg;
|
|
border: $Number-borderWidth solid $Number-borderColor;
|
|
border-radius: $Number-borderRadius;
|
|
|
|
&-focused {
|
|
border-color: $Form-input-onFocused-borderColor;
|
|
box-shadow: $Form-input-boxShadow;
|
|
}
|
|
|
|
&-handler {
|
|
text-align: center;
|
|
overflow: hidden;
|
|
display: block;
|
|
touch-action: none;
|
|
|
|
&-active {
|
|
background: #ddd;
|
|
}
|
|
}
|
|
|
|
&-handler-up-inner,
|
|
&-handler-down-inner {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $Form-input-onFocused-borderColor;
|
|
|
|
.#{$ns}Number-handler-up,
|
|
.#{$ns}Number-handler-wrap {
|
|
border-color: $Form-input-onFocused-borderColor;
|
|
}
|
|
}
|
|
|
|
&-disabled:hover {
|
|
border-color: $Form-input-borderColor;
|
|
|
|
.#{$ns}Number-handler-up,
|
|
.#{$ns}Number-handler-wrap {
|
|
border-color: $Form-input-borderColor;
|
|
}
|
|
}
|
|
|
|
&-input-wrap {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
&-input {
|
|
width: 100%;
|
|
background-color: transparent;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
outline: 0;
|
|
-moz-appearance: textfield;
|
|
line-height: $Form-input-height - $Number-borderWidth * 2;
|
|
height: 100%;
|
|
transition: all 0.3s ease;
|
|
border: 0;
|
|
border-radius: $Form-input-borderRadius;
|
|
padding: 0 $Form-input-paddingX;
|
|
}
|
|
|
|
&-handler {
|
|
background-color: $Number-handler-bg;
|
|
color: $Number-handler-color;
|
|
font-family: $Number-handler-fontFamily;
|
|
font-size: $Number-handler-fontSize;
|
|
|
|
&:hover {
|
|
background-color: $Number-handler-onHover-bg;
|
|
color: $Number-handler-onHover-color;
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: $Number-handler-onActive-bg;
|
|
}
|
|
}
|
|
|
|
&-handler-up {
|
|
&-inner {
|
|
transform: $Number-handler--up-transform;
|
|
|
|
&:after {
|
|
content: $Number-handler--up-content;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-handler-down {
|
|
&-inner {
|
|
&:after {
|
|
content: $Number-handler--down-content;
|
|
}
|
|
}
|
|
}
|
|
|
|
// @if $Number-handler-mode==vertical {
|
|
&-handler-wrap {
|
|
float: right;
|
|
border-left: px2rem(1px) solid $Form-input-borderColor;
|
|
width: $Number-handler-width;
|
|
height: 100%;
|
|
}
|
|
|
|
&-handler {
|
|
line-height: ($Form-input-height - px2rem(6px)) / 2;
|
|
height: ($Form-input-height - $Number-borderWidth * 2) / 2;
|
|
}
|
|
|
|
&-handler-up {
|
|
border-bottom: $Number-handler-borderBottom;
|
|
padding-top: px2rem(1px);
|
|
}
|
|
// } @else {
|
|
// position: relative;
|
|
|
|
// &-input {
|
|
// text-align: center;
|
|
// }
|
|
|
|
// &-handler-up,
|
|
// &-handler-down {
|
|
// position: absolute;
|
|
// width: $Number-handler-width;
|
|
// height: 100%;
|
|
// top: 0;
|
|
// }
|
|
|
|
// &-handler-down {
|
|
// left: 0;
|
|
// }
|
|
|
|
// &-handler-up {
|
|
// right: 0;
|
|
// }
|
|
// }
|
|
|
|
&-handler-down-disabled,
|
|
&-handler-up-disabled {
|
|
background-color: $Number-handler-onDisabled-bg;
|
|
pointer-events: none;
|
|
color: $Number-handler-onDisabled-color;
|
|
}
|
|
|
|
&-disabled {
|
|
.#{$ns}Number-input {
|
|
opacity: 0.72;
|
|
cursor: not-allowed;
|
|
background-color: $gray200;
|
|
}
|
|
|
|
.#{$ns}Number-handler {
|
|
opacity: 0.72;
|
|
|
|
&:hover {
|
|
color: $text--muted-color;
|
|
border-color: $Form-input-borderColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
|
|
display: block;
|
|
}
|