mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:49:09 +08:00
388 lines
7.3 KiB
SCSS
388 lines
7.3 KiB
SCSS
.#{$ns}DatePicker {
|
|
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;
|
|
color: $DatePicker-color;
|
|
background-color: $DatePicker-bg;
|
|
border-radius: $DatePicker-borderRadius;
|
|
|
|
&:not(.is-disabled) {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: $DatePicker-onHover-bg;
|
|
border-color: $DatePicker-onHover-borderColor;
|
|
|
|
.#{$ns}DatePicker-toggler:before {
|
|
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;
|
|
}
|
|
|
|
&:before {
|
|
line-height: 1;
|
|
color: inherit;
|
|
content: $DatePicker-toggler-icon;
|
|
display: inline-block;
|
|
font-size: $DatePicker-toggler-fontSize;
|
|
font-family: $DatePicker-toggler-vendor;
|
|
}
|
|
}
|
|
|
|
&-clear {
|
|
display: inline-block;
|
|
@include input-clear();
|
|
line-height: 1;
|
|
margin-right: $gap-xs;
|
|
}
|
|
}
|
|
|
|
.#{$ns}DateControl:not(.is-inline)>.#{$ns}DatePicker {
|
|
display: flex;
|
|
}
|
|
|
|
.#{$ns}DatePicker-shortcuts {
|
|
margin: 0;
|
|
background: $Calendar-shortcuts-bg;
|
|
padding: ($Calendar-shortcuts-height - $Calendar-fontSize * $lineHeightBase) / 2 $gap-sm;
|
|
list-style: none;
|
|
|
|
&+.rdt .rdtPicker {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.#{$ns}DatePicker-shortcut {
|
|
display: inline-block;
|
|
margin-right: $gap-md;
|
|
|
|
a {
|
|
font-size: $Calendar-fontSize;
|
|
cursor: pointer;
|
|
color: $Calendar-shortcut-color;
|
|
text-decoration: $Calendar-shortcut-decoration;
|
|
|
|
&:hover {
|
|
color: $Calendar-shortcut-onHover-color;
|
|
text-decoration: $Calendar-shortcut-onHover-decoration;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}DatePicker-popover {
|
|
margin: px2rem(2px) 0 0;
|
|
|
|
&.#{$ns}PopOver--leftTopLeftBottom,
|
|
&.#{$ns}PopOver--rightTopRightBottom {
|
|
margin: px2rem(-2px) 0 0;
|
|
}
|
|
}
|
|
|
|
// override third-party styles
|
|
.rdt {
|
|
user-select: none;
|
|
font-size: $Calendar-fontSize;
|
|
color: $Calendar-color;
|
|
|
|
.rdtPicker {
|
|
margin-top: 0;
|
|
padding: $gap-sm;
|
|
background: transparent;
|
|
border: none;
|
|
|
|
.dow {
|
|
color: $Calendar-wLabel-color;
|
|
font-weight: normal;
|
|
}
|
|
|
|
td.rdtDay,
|
|
td.rdtHour,
|
|
td.rdtMinute,
|
|
td.rdtSecond,
|
|
.rdtTimeToggle {
|
|
background-color: $Calendar-cell-bg;
|
|
|
|
&:hover {
|
|
background-color: $Calendar-cell-onHover-bg;
|
|
}
|
|
}
|
|
|
|
td.rdtBetween {
|
|
background: $Calendar-cell-onBetween-bg;
|
|
}
|
|
|
|
td.rdtToday:before {
|
|
border-bottom-color: $Calendar-cell-onActive-bg;
|
|
}
|
|
|
|
td.rdtActive.rdtToday:before {
|
|
border-bottom-color: $Calendar-cell-bg;
|
|
}
|
|
|
|
td.rdtActive,
|
|
td.rdtActive:hover {
|
|
background: $Calendar-cell-onActive-bg;
|
|
}
|
|
|
|
|
|
|
|
td.rdtDisabled,
|
|
td.rdtDisabled:hover {
|
|
background-color: $Calendar-cell-onDisabled-bg;
|
|
}
|
|
}
|
|
|
|
thead tr:first-child th {
|
|
cursor: default;
|
|
font-weight: normal;
|
|
border-bottom: none;
|
|
}
|
|
|
|
thead tr:first-child th:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
tfoot {
|
|
border-top: 0;
|
|
|
|
td {
|
|
padding-top: px2rem(5px);
|
|
text-align: left;
|
|
|
|
span {
|
|
width: 10px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
input {
|
|
outline: none;
|
|
width: 42px;
|
|
font-size: $Calendar-input-fontSize;
|
|
color: $Calendar-input-color;
|
|
border: 1px solid $Calendar-input-borderColor;
|
|
border-radius: $Calendar-input-borderRadius;
|
|
height: $Calendar-input-height;
|
|
line-height: $Calendar-input-lineHeight;
|
|
padding: $Calendar-input-paddingY $Calendar-input-paddingX;
|
|
box-shadow: none;
|
|
|
|
&:focus {
|
|
border-color: $Calendar-input-onFocused-borderColor;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.rdtActions {
|
|
margin-top: $gap-sm;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rdtCounter {
|
|
.rdtBtn {
|
|
height: 30%;
|
|
line-height: px2rem(20px);
|
|
}
|
|
|
|
.rdtCount {
|
|
height: 40%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rdtBtn {
|
|
line-height: $Calendar-btn-lineHeight;
|
|
padding: $Calendar-btn-paddingY $Calendar-btn-paddingX;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-size: $Calendar-btn-fontSize;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.is-disabled {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.fa,
|
|
.iconfont {
|
|
font-size: $fontSizeSm;
|
|
}
|
|
|
|
@include button-variant($Calendar-btn-bg,
|
|
$Calendar-btn-border,
|
|
$Calendar-btn-color,
|
|
$Calendar-btn-onHover-bg,
|
|
$Calendar-btn-onHover-border,
|
|
$Calendar-btn-onHover-color,
|
|
$Calendar-btn-onActive-bg,
|
|
$Calendar-btn-onActive-border,
|
|
$Calendar-btn-onActive-color);
|
|
|
|
border-radius: $Calendar-btn-borderRadius;
|
|
|
|
&+.rdtBtn {
|
|
margin-left: $gap-xs;
|
|
}
|
|
|
|
&Cancel {
|
|
@include button-variant($Calendar-btnCancel-bg,
|
|
$Calendar-btnCancel-border,
|
|
$Calendar-btnCancel-color,
|
|
$Calendar-btnCancel-onHover-bg,
|
|
$Calendar-btnCancel-onHover-border,
|
|
$Calendar-btnCancel-onHover-color,
|
|
$Calendar-btnCancel-onActive-bg,
|
|
$Calendar-btnCancel-onActive-border,
|
|
$Calendar-btnCancel-onActive-color);
|
|
}
|
|
}
|
|
|
|
.rdtBtnPrev:before,
|
|
.rdtBtnNext:before {
|
|
display: inline-block;
|
|
color: inherit;
|
|
font-style: normal;
|
|
line-height: 1;
|
|
}
|
|
|
|
.rdtBtnPrev:before {
|
|
font-family: $DatePicker-prevBtn-vendor;
|
|
font-size: $DatePicker-prevBtn-fontSize;
|
|
content: $DatePicker-prevBtn-icon;
|
|
}
|
|
|
|
.rdtBtnNext:before {
|
|
font-family: $DatePicker-nextBtn-vendor;
|
|
font-size: $DatePicker-nextBtn-fontSize;
|
|
content: $DatePicker-nextBtn-icon;
|
|
}
|
|
|
|
.rdtPrev,
|
|
.rdtNext {
|
|
cursor: pointer !important;
|
|
width: px2rem(20px);
|
|
padding: 0;
|
|
color: #999;
|
|
font-size: px2rem(20px);
|
|
text-decoration: none;
|
|
font-family: auto;
|
|
font-weight: normal;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.rdtSwitch {
|
|
text-align: center;
|
|
color: #000;
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
|
|
&:hover {
|
|
color: $link-onHover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.rdtHeader {
|
|
display: table;
|
|
table-layout: fixed;
|
|
border-collapse: separate;
|
|
width: 100%;
|
|
// padding: 0 10px;
|
|
|
|
>* {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
.rdtSwitch+.rdtSwitch {
|
|
margin-left: $gap-xs;
|
|
}
|
|
}
|
|
|
|
td.rdtMonth,
|
|
td.rdtYear {
|
|
width: px2rem(50px);
|
|
height: px2rem(40px);
|
|
|
|
>span {
|
|
height: px2rem(24px);
|
|
display: block;
|
|
}
|
|
|
|
&:hover,
|
|
&.rdtActive {
|
|
background: transparent !important;
|
|
|
|
>span {
|
|
background: $info;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.rdtDisabled {
|
|
background: transparent !important;
|
|
|
|
>span {
|
|
background: #edf1f2;
|
|
color: #999;
|
|
}
|
|
}
|
|
} |