amis/packages/amis-ui/scss/components/form/_range.scss
2023-06-05 11:27:21 +08:00

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