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

117 lines
2.3 KiB
SCSS

.#{$ns}DateRangePicker {
position: relative;
display: inline-flex;
flex-wrap: nowrap;
border: $DatePicker-borderWidth solid $DatePicker-borderColor;
font-size: $DatePicker-fontSize;
padding: $DatePicker-paddingY $DatePicker-paddingX;
height: $DatePicker-height;
outline: none;
white-space: nowrap;
border-radius: $DatePicker-borderRadius;
color: $DatePicker-color;
background-color: $DatePicker-bg;
&:not(.is-disabled) {
cursor: pointer;
&:hover {
background-color: $DatePicker-onHover-bg;
border-color: $DatePicker-onHover-borderColor;
.#{$ns}DateRangePicker-toggler {
color: $DatePicker-onHover-iconColor;
}
}
}
&.is-focused {
border-color: $DatePicker-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
}
&.is-disabled {
background: $gray200;
> &-input {
color: $text--muted-color;
}
}
&-placeholder {
color: $DatePicker-placeholderColor;
user-select: none;
margin-right: $gap-base;
flex-basis: 0;
flex-grow: 1;
}
&-value {
margin-right: $gap-base;
flex-basis: 0;
flex-grow: 1;
}
&-toggler {
cursor: pointer;
color: $DatePicker-iconColor;
&:hover {
color: $DatePicker-onHover-iconColor;
}
}
&-clear {
@include input-clear();
display: inline-block;
line-height: 1;
margin-right: $gap-xs;
}
}
.#{$ns}DateRangePicker-wrap {
width: auto;
white-space: nowrap;
padding: $gap-md;
}
.#{$ns}DateRangePicker-start,
.#{$ns}DateRangePicker-end {
display: inline-block;
.rdtPicker {
padding: 0;
box-shadow: none;
border: none;
}
}
.#{$ns}DateRangePicker-end {
margin-left: 20px;
}
.#{$ns}DateRangePicker-rangers {
margin: 0 0 $gap-sm;
padding: 0;
list-style: none;
}
.#{$ns}DateRangePicker-ranger {
display: inline-block;
margin-right: $gap-sm;
a {
cursor: pointer;
}
}
.#{$ns}DateRangePicker-actions {
text-align: right;
margin-top: $gap-sm;
}
.#{$ns}DateRangeControl:not(.is-inline) > .#{$ns}DateRangePicker {
display: flex;
}