amis-rpc-design/libs/amis/packages/amis-ui/scss/components/react-datetime.scss

268 lines
4.6 KiB
SCSS
Raw Normal View History

2023-10-07 19:42:30 +08:00
/*!
* https://github.com/arqex/react-datetime
*/
.rdt {
position: relative;
}
.rdtPicker {
display: none;
position: absolute;
width: 240px;
padding: 4px;
margin-top: 1px;
z-index: 99999 !important;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #f9f9f9;
&.is-mobile-year {
width: px2rem(184px);
}
&.is-mobile-embed {
width: px2rem(240px);
}
}
.rdtPickerNotDays {
width: 192px;
}
.rdtOpen .rdtPicker {
display: block;
}
.rdtStatic .rdtPicker {
box-shadow: none;
position: static;
}
.rdtPicker .rdtTimeToggle {
text-align: center;
}
.rdtPicker table {
width: 100%;
margin: 0;
padding: 0 12px;
border-spacing: 0 8px;
border-collapse: inherit;
}
.rdtMonths,
.rdtYears {
table {
border-spacing: 0 12px;
}
.headerTable {
border-spacing: 0;
border-bottom: 1px solid #e8e9eb;
}
}
.rdtPicker td,
.rdtPicker th {
text-align: center;
height: 24px;
line-height: 24px;
width: 24px;
}
.rdtPicker td {
cursor: pointer;
> span {
display: inline-block;
border-radius: var(--inputDate-default-option-top-left-border-radius)
var(--inputDate-default-option-top-right-border-radius)
var(--inputDate-default-option-bottom-right-border-radius)
var(--inputDate-default-option-bottom-left-border-radius);
height: 24px;
width: 24px;
}
}
.rdtPicker td.rdtDay:hover,
.rdtPicker td.rdtHour:hover,
.rdtPicker td.rdtMinute:hover,
.rdtPicker td.rdtSecond:hover,
.rdtPicker .rdtTimeToggle:hover {
background: #eeeeee;
cursor: pointer;
}
.rdtPicker td.rdtOld,
.rdtPicker td.rdtNew {
color: var(--inputDate-disabled-option-color);
span {
background: var(--inputDate-disabled-option-bg-color);
}
}
.rdtPicker td.rdtToday {
position: relative;
> span {
border: 1px solid #2468f2;
}
}
.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
background-color: #428bca;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.rdtPicker td.rdtActive.rdtToday:before {
border-bottom-color: #fff;
}
.rdtPicker td.rdtDisabled,
.rdtPicker td.rdtDisabled:hover {
background: none;
color: #b8babf;
cursor: not-allowed;
}
.rdtPicker td span.rdtOld {
color: #b8babf;
}
.rdtPicker td span.rdtDisabled,
.rdtPicker td span.rdtDisabled:hover {
background: none;
color: #b8babf;
cursor: not-allowed;
> span {
border-color: #e8e9eb;
}
}
.rdtPicker th {
border-bottom: 1px solid #f9f9f9;
}
.rdtPicker .dow {
width: 14.2857%;
border-bottom: none;
cursor: default;
}
.rdtPicker th.rdtSwitch {
width: 100px;
height: 40px;
line-height: 40px;
}
.rdtPicker th.rdtNext,
.rdtPicker th.rdtPrev {
font-size: 21px;
vertical-align: top;
height: 40px;
line-height: 40px;
}
.rdtPrev span,
.rdtNext span {
display: block;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
background: none;
color: #b8babf;
cursor: not-allowed;
}
.rdtPicker thead tr:first-of-type th {
cursor: pointer;
}
.rdtPicker thead tr:first-of-type th:hover {
background: #eeeeee;
}
.rdtPicker tfoot {
border-top: 1px solid #f9f9f9;
}
.rdtPicker button {
border: none;
background: none;
cursor: pointer;
}
.rdtPicker button:hover {
background-color: #eee;
}
.rdtPicker thead button {
width: 100%;
height: 100%;
}
td.rdtMonth,
td.rdtYear,
td.rdtQuarter {
height: 24px;
width: 48px;
line-height: 24px;
text-align: center;
cursor: pointer;
> span {
width: 48px;
}
}
td.rdtMonth:hover,
td.rdtYear:hover,
td.rdtQuarter:hover {
background: #eee;
}
.rdtCounters {
display: inline-block;
}
.rdtCounters > div {
float: left;
}
.rdtCounter {
height: 100px;
}
.rdtCounter {
width: 40px;
}
.rdtCounterSeparator {
line-height: 100px;
}
.rdtCounter .rdtBtn {
height: 40%;
line-height: 40px;
cursor: pointer;
display: block;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.rdtCounter .rdtBtn:hover {
background: #eee;
}
.rdtCounter .rdtCount {
height: 20%;
font-size: 1.2em;
}
.rdtMilli {
vertical-align: middle;
padding-left: 8px;
width: 48px;
}
.rdtMilli input {
width: 100%;
font-size: 1.2em;
margin-top: 37px;
}
.rdtTime td {
cursor: default;
}