amis/scss/components/form/_date.scss

312 lines
6.9 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$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;
2019-04-30 11:11:25 +08:00
&:hover {
background-color: $DatePicker-onHover-bg;
2019-08-12 21:14:33 +08:00
border-color: $DatePicker-onHover-borderColor;
.#{$ns}DatePicker-toggler:before {
color: $DatePicker-onHover-iconColor;
}
2019-04-30 11:11:25 +08:00
}
}
&.is-focused {
border-color: $DatePicker-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
}
&.is-disabled {
background: $gray200;
2019-04-30 11:11:25 +08:00
> &-input {
color: $text--muted-color;
}
}
2019-04-30 11:11:25 +08:00
&-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;
2019-04-30 11:11:25 +08:00
&: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;
}
2019-04-30 11:11:25 +08:00
}
&-clear {
display: inline-block;
@include input-clear();
line-height: 1;
margin-right: $gap-xs;
}
}
.#{$ns}DateControl:not(.is-inline) > .#{$ns}DatePicker {
display: flex;
}
2019-09-05 11:12:15 +08:00
.#{$ns}DatePicker-shortcuts {
2019-09-05 00:07:41 +08:00
margin: $gap-sm $gap-md (-$gap-sm) $gap-md;
padding: 0;
list-style: none;
2019-09-11 18:32:50 +08:00
max-width: 206px;
2019-09-05 00:07:41 +08:00
}
2019-09-09 00:53:39 +08:00
2019-09-05 11:12:15 +08:00
.#{$ns}DatePicker-shortcut {
display: inline-block;
margin-right: $gap-sm;
a {
cursor: pointer;
}
}
2019-09-05 00:07:41 +08:00
2019-04-30 11:11:25 +08:00
// override third-party styles
.rdt {
user-select: none;
font-size: $Calendar-fontSize;
color: $Calendar-color;
.rdtPicker {
margin-top: 0;
padding: $gap-md;
2019-09-05 00:07:41 +08:00
border: none;
2019-04-30 11:11:25 +08:00
.dow {
color: $Calendar-wLabel-color;
font-weight: normal;
}
td.rdtDay,
td.rdtHour,
td.rdtMinute,
td.rdtSecond,
2019-04-30 11:11:25 +08:00
.rdtTimeToggle {
background-color: $Calendar-cell-bg;
&:hover {
background-color: $Calendar-cell-onHover-bg;
}
}
td.rdtToday:before {
border-bottom-color: $Calendar-cell-onActive-bg;
}
td.rdtActive.rdtToday:before {
border-bottom-color: $Calendar-cell-bg;
}
td.rdtActive,
2019-04-30 11:11:25 +08:00
td.rdtActive:hover {
background: $Calendar-cell-onActive-bg;
}
td.rdtDisabled,
td.rdtDisabled:hover {
background-color: $Calendar-cell-onDisabled-bg;
}
}
2019-04-30 11:11:25 +08:00
thead tr:first-child th {
cursor: default;
text-align: left;
font-weight: normal;
}
2019-04-30 11:11:25 +08:00
thead tr:first-child th:hover {
background: transparent;
}
2019-04-30 11:11:25 +08:00
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);
}
2019-04-30 11:11:25 +08:00
.rdtCount {
height: 40%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.rdtBtn {
line-height: $Calendar-btn-lineHeight;
padding: $Calendar-btn-paddingY $Calendar-btn-paddingX;
2019-04-30 11:11:25 +08:00
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 {
2019-04-30 11:11:25 +08:00
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;
2019-04-30 11:11:25 +08:00
}
.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;
}
.rdtHeader {
display: table;
table-layout: fixed;
border-collapse: separate;
width: 100%;
.rdtBtn {
display: table-cell;
width: px2rem(30px);
padding: 0;
}
.rdtSelect {
display: table-cell;
width: 100%;
2019-09-09 00:53:39 +08:00
border-left: 1px solid $DatePicker-header-select-borderColor;
border-right: 1px solid $DatePicker-header-select-borderColor;
2019-04-30 11:11:25 +08:00
.#{$ns}Select {
display: flex;
}
}
}