amis2/scss/components/form/_number.scss
2019-08-12 21:14:33 +08:00

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;
}