amis2/scss/components/form/_date.scss
2019-12-18 18:57:07 +08:00

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