amis2/scss/components/form/_range.scss
catchonme 3c613d9646 select multiple 增加全选模式
select支持全选,range支持范围选择
2019-05-23 17:56:08 +08:00

217 lines
4.7 KiB
SCSS

.#{$ns}RangeControl {
position: relative;
@include clearfix();
padding-top: 1rem;
padding-bottom: 1.1rem;
&--withInput {
.#{$ns}InputRange {
width: calc(100% - 120px);
}
.#{$ns}InputRange-label--mid {
left: calc(50% - 60px);
}
&.is-multiple {
.#{$ns}InputRange {
width: calc(100% - 210px);
}
}
}
.#{$ns}InputRange {
&-input {
font-size: $fontSizeSm;
position: absolute;
right: px2rem(26px);
top: px2rem(12px);
height: px2rem(30px);
input {
padding: px2rem(10px);
width: px2rem(74px);
height: 100%;
&:focus {
outline: none;
border: $borderWidth solid $info;
}
}
&-separator {
display: inline-block;
padding: 0 5px;
}
}
&-unit {
position: absolute;
right: px2rem(10px);
top: px2rem(7px);
}
&-clear {
position: absolute;
top: px2rem(18px);
right: 0;
cursor: pointer;
svg {
height: px2rem(16px);
width: px2rem(16px);
fill: #999;
}
}
}
}
.#{$ns}InputRange {
height: $InputRange-slider-height;
position: relative;
width: 100%;
// slider
&-slider {
appearance: none;
background: $InputRange-slider-bg;
border: $InputRange-slider-border;
// border-radius: 100%;
cursor: pointer;
display: block;
width: $InputRange-slider-width;
height: $InputRange-slider-height;
margin-left: $InputRange-slider-width / -2;
margin-top: $InputRange-slider-height / -2 + $InputRange-track-height /
-2;
outline: none;
position: absolute;
z-index: 2;
top: 50%;
transition: $InputRange-slider-transition;
&:active {
transform: $InputRange-slider-onActive-transform;
}
&:focus {
box-shadow: $InputRange-slider-onFocus-boxShadow;
}
.input-range--disabled & {
background: $InputRange-slider-onDisabled-bg;
border: $InputRange-slider-onDisabled-border;
box-shadow: none;
transform: none;
}
&:before {
content: "||";
color: #fff;
display: block;
line-height: px2rem(22px);
text-align: center;
}
}
&-sliderContainer {
transition: $InputRange-sliderContainer-transition;
}
// label
&-label {
color: $InputRange-label-color;
font-family: $InputRange-fontFamily;
font-size: $InputRange-label-fontSize;
transform: translateZ(0);
white-space: nowrap;
}
&-label--min,
&-label--max,
&-label--mid {
bottom: $InputRange-label-positionBottom;
position: absolute;
}
// &-label--min {
// left: px2rem(15px);
// }
&-label--mid {
left: 50%;
bottom: px2rem(-5px);
}
&-label--max {
right: 0;
}
&-label--value {
position: absolute;
display: $InputRange-label--value-display;
top: $InputRange-label--value-positionTop;
}
// label Container
// &-labelContainer {
// left: -50%;
// position: relative;
// .#{$ns}InputRange-label--max & {
// left: 50%;
// }
// }
// track
&-track {
background: $InputRange-track-bg;
// border-radius: 0;
cursor: pointer;
display: block;
height: $InputRange-track-height;
position: relative;
transition: $InputRange-track-transition;
.#{$ns}InputRange.is-disabled & {
background: $InputRange-track-onDisabled-bg;
}
&.is-active {
background: $InputRange-track-onActive-bg;
}
}
&-track--background {
left: 0.5rem;
margin-top: -0.5 * $InputRange-track-height;
position: absolute;
right: 0.5rem;
top: 50%;
&::before,
&::after {
content: "";
width: 0.5rem;
height: 100%;
position: absolute;
top: 0;
background: inherit;
z-index: 1;
}
&::before {
left: -0.5rem;
}
&::after {
right: -0.5rem;
}
}
&-track--active {
background: $InputRange-track-onActive-bg;
}
}