mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
352 lines
7.9 KiB
SCSS
352 lines
7.9 KiB
SCSS
.#{$ns}InputRange {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: var(--InputRange-padding) 0;
|
|
width: 100%;
|
|
|
|
&-wrap {
|
|
position: relative;
|
|
flex: auto;
|
|
}
|
|
|
|
&-input {
|
|
width: var(--InputRange-input-width);
|
|
margin: var(--InputRange-input-marginTop)
|
|
var(--InputRange-input-marginRight) var(--InputRange-input-marginBottom)
|
|
var(--InputRange-input-marginLeft);
|
|
|
|
.#{$ns}Number {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.#{$ns}Number-handler {
|
|
transition: 0.3s opacity;
|
|
color: var(--Number-handler-color);
|
|
|
|
&-up-inner,
|
|
&-down-inner {
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: var(--Number-handler-onHover-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-mobile {
|
|
padding: 0;
|
|
|
|
.#{$ns}InputRange-input {
|
|
width: var(--InputRange-input-mobile-width);
|
|
// margin-left: 0;
|
|
|
|
.#{$ns}Number-handler-wrap {
|
|
display: none !important;
|
|
}
|
|
|
|
input {
|
|
padding: 0 !important;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-clear {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
height: var(--InputRange-clearIcon-height);
|
|
width: var(--InputRange-clearIcon-width);
|
|
fill: var(--InputRange-clearIcon-color);
|
|
}
|
|
&:hover svg {
|
|
fill: var(--InputRange-clearIcon-hoverColor);
|
|
}
|
|
}
|
|
|
|
// disabled
|
|
&.is-disabled {
|
|
.#{$ns}InputRange-track {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.#{$ns}InputRange-track-active {
|
|
background-color: var(--InputRange-track-onActive-onDisabled-bg);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.#{$ns}InputRange-handle-icon {
|
|
border-color: var(--InputRange-handle-onDisabled-border-color);
|
|
background-color: var(--InputRange-handle-onDisabled-bg);
|
|
cursor: not-allowed;
|
|
|
|
&:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.icon-slider-handle {
|
|
g path {
|
|
fill: var(--InputRange-handle-icon-onDisabled-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}Number-handler {
|
|
cursor: not-allowed;
|
|
|
|
&-up-inner,
|
|
&-down-inner {
|
|
cursor: not-allowed;
|
|
&:hover {
|
|
color: var(--text--muted-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// hander
|
|
&-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0 auto calc(var(--InputRange-handle-width) / -2);
|
|
width: var(--InputRange-handle-width);
|
|
height: var(--InputRange-handle-height);
|
|
|
|
&.is-mobile {
|
|
width: var(--InputRange-handle-mobile-width);
|
|
height: var(--InputRange-handle-mobile-height);
|
|
}
|
|
|
|
&-icon,
|
|
&-drage {
|
|
width: 100%;
|
|
height: 100%;
|
|
appearance: none;
|
|
background-color: var(--InputRange-handle-bg);
|
|
border: var(--InputRange-handle-border);
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
outline: none;
|
|
border-radius: var(--InputRange-handle-border-radius);
|
|
transition: var(--InputRange-handle-transition);
|
|
|
|
&:hover {
|
|
transform: var(--InputRange-handle-onActive-transform);
|
|
box-shadow: var(--InputRange-handle-onFocus-boxShadow);
|
|
}
|
|
|
|
&:active {
|
|
transform: var(--InputRange-handle-onActive-transform);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: var(--InputRange-handle-onFocus-boxShadow);
|
|
}
|
|
}
|
|
|
|
&:not(.is-mobile) {
|
|
.#{$ns}InputRange-handle-drage {
|
|
transform: var(--InputRange-handle-onActive-transform);
|
|
box-shadow: var(--InputRange-handle-onFocus-boxShadow);
|
|
border-width: var(--InputRange-handle-onDrage-border-width);
|
|
}
|
|
}
|
|
|
|
.input-range--disabled & {
|
|
background: var(--InputRange-slider-onDisabled-bg);
|
|
border: var(--InputRange-slider-onDisabled-border);
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.icon-slider-handle {
|
|
width: var(--InputRange-handle-icon-width);
|
|
height: var(--InputRange-handle-icon-height);
|
|
top: 0;
|
|
|
|
g path {
|
|
fill: var(--InputRange-handle-icon-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// track
|
|
&-track {
|
|
background: var(--InputRange-track-bg);
|
|
border-radius: var(--InputRange-track-border-radius);
|
|
cursor: pointer;
|
|
display: block;
|
|
height: var(--InputRange-track-height);
|
|
position: relative;
|
|
transition: var(--InputRange-track-transition);
|
|
|
|
&.is-active {
|
|
background: var(--InputRange-track-onActive-bg);
|
|
transition: 0.3s all;
|
|
}
|
|
|
|
&-dot {
|
|
width: var(--InputRange-track-dot-width);
|
|
height: var(--InputRange-track-dot-height);
|
|
border-radius: 50%;
|
|
background-color: var(--InputRange-track-dot-bg);
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
&-track--background {
|
|
left: 0.5rem;
|
|
margin-top: calc(-0.5 * var(--InputRange-track-height));
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
}
|
|
|
|
&-track-active {
|
|
background: var(--InputRange-track-onActive-bg);
|
|
border-radius: var(--InputRange-track-border-radius);
|
|
position: absolute;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
// label
|
|
&-label {
|
|
position: absolute;
|
|
padding: var(--InputRange-label-padding);
|
|
background-color: var(--InputRange-label-bg);
|
|
color: var(--InputRange-label-color);
|
|
font-size: var(--InputRange-label-font-size);
|
|
font-weight: var(--InputRange-label-fontWeight);
|
|
line-height: var(--InputRange-label-lineHeight);
|
|
border-radius: var(--InputRange-label-border-radius);
|
|
visibility: hidden;
|
|
|
|
&-visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
&.pos-top {
|
|
left: 50%;
|
|
bottom: var(--InputRange-label-position-bottom);
|
|
transform: translateX(-50%);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -4px;
|
|
border-width: 4px 4px 0 4px;
|
|
border-style: solid;
|
|
border-color: var(--InputRange-label-bg) transparent transparent
|
|
transparent;
|
|
}
|
|
}
|
|
|
|
&.pos-bottom {
|
|
top: var(--InputRange-label-position-bottom);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -4px;
|
|
border-width: 0 4px 4px 4px;
|
|
border-style: solid;
|
|
border-color: transparent transparent var(--InputRange-label-bg)
|
|
transparent;
|
|
}
|
|
}
|
|
|
|
&.pos-left {
|
|
top: 50%;
|
|
transform: translateY(-50%) translateX(-100%) translateX(-12px);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: -4px;
|
|
border-width: 4px 0 4px 4px;
|
|
border-style: solid;
|
|
border-color: transparent transparent transparent
|
|
var(--InputRange-label-bg);
|
|
}
|
|
}
|
|
|
|
&.pos-right {
|
|
top: 50%;
|
|
transform: translateY(-50%) translateX(26px);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: -4px;
|
|
border-width: 4px 4px 4px 0;
|
|
border-style: solid;
|
|
border-color: transparent var(--InputRange-label-bg) transparent
|
|
transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-mobile {
|
|
.#{$ns}InputRange-label {
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
// marks
|
|
&-marks {
|
|
position: relative;
|
|
top: 8px;
|
|
color: var(--InputRange-marks-color);
|
|
font-size: var(--InputRange-marks-fontSize);
|
|
font-weight: var(--InputRange-marks-fontWeight);
|
|
line-height: var(--InputRange-marks-lineHeight);
|
|
margin-top: var(--InputRange-marks-marginTop);
|
|
div {
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-mobile {
|
|
.#{$ns}InputRange-marks {
|
|
div {
|
|
top: 0;
|
|
|
|
&:nth-child(2n) {
|
|
top: px2rem(-30px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|