ant-design/components/date-picker/style/RangePicker.less

236 lines
4.6 KiB
Plaintext
Raw Normal View History

@input-box-height: 34px;
2015-12-11 11:11:24 +08:00
.@{calendar-prefix-cls}-range-picker-input {
background-color: transparent;
border: 0;
height: 18px;
line-height: 18px;
outline: 0;
width: 43%;
text-align: center;
2015-12-11 11:11:24 +08:00
&[disabled] {
cursor: not-allowed;
2015-12-11 11:11:24 +08:00
}
}
2015-12-25 15:27:24 +08:00
.@{calendar-prefix-cls}-range-picker-separator {
color: @text-color-secondary;
2015-12-25 15:27:24 +08:00
}
2015-12-11 11:11:24 +08:00
.@{calendar-prefix-cls}-range {
2015-12-25 14:52:41 +08:00
width: 470px;
2015-12-11 11:11:24 +08:00
overflow: hidden;
.@{calendar-prefix-cls}-date-panel {
&::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
2015-12-11 11:11:24 +08:00
&-part {
2015-12-25 15:27:24 +08:00
width: 50%;
position: relative;
2015-12-11 11:11:24 +08:00
}
&-left {
float: left;
.@{calendar-prefix-cls} {
&-time-picker-inner {
2016-11-15 17:16:20 +08:00
border-right: 2px solid @border-color-split;
}
}
2015-12-11 11:11:24 +08:00
}
&-right {
float: right;
.@{calendar-prefix-cls} {
&-time-picker-inner {
2016-11-15 17:16:20 +08:00
border-left: 2px solid @border-color-split;
}
}
2015-12-11 11:11:24 +08:00
}
&-middle {
position: absolute;
left: 50%;
width: 20px;
2015-12-25 15:27:24 +08:00
margin-left: -132px;
2015-12-11 11:11:24 +08:00
text-align: center;
height: @input-box-height;
line-height: @input-box-height;
color: @text-color-secondary;
2015-12-11 11:11:24 +08:00
}
&-right .@{calendar-prefix-cls}-date-input-wrap {
2015-12-25 15:27:24 +08:00
margin-left: -118px;
2015-12-11 11:11:24 +08:00
}
&.@{calendar-prefix-cls}-time &-middle {
2016-09-29 12:20:21 +08:00
margin-left: -12px;
2015-12-11 11:11:24 +08:00
}
&.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
2016-09-29 12:20:21 +08:00
margin-left: 0;
2015-12-11 11:11:24 +08:00
}
.@{calendar-prefix-cls}-input-wrap {
2016-05-23 15:58:10 +08:00
position: relative;
2015-12-11 11:11:24 +08:00
height: @input-box-height;
}
2016-10-14 15:40:39 +08:00
2015-12-11 11:11:24 +08:00
.@{calendar-prefix-cls}-input,
2016-10-07 16:04:11 +08:00
.@{calendar-timepicker-prefix-cls}-input {
2016-03-02 15:10:13 +08:00
.input;
2015-12-24 16:22:59 +08:00
height: @input-height-sm;
border: 0;
box-shadow: none;
&:focus {
box-shadow: none;
}
2015-12-11 11:11:24 +08:00
}
2016-10-14 15:40:39 +08:00
2016-10-07 16:04:11 +08:00
.@{calendar-timepicker-prefix-cls}-icon {
2015-12-11 11:11:24 +08:00
display: none;
}
&.@{calendar-prefix-cls}-week-number {
width: 574px;
.@{calendar-prefix-cls}-range-part {
width: 286px;
}
}
.@{calendar-prefix-cls}-year-panel,
.@{calendar-prefix-cls}-month-panel {
top: @input-box-height;
}
.@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
top: 0;
}
.@{calendar-prefix-cls}-decade-panel-table,
.@{calendar-prefix-cls}-year-panel-table,
.@{calendar-prefix-cls}-month-panel-table {
height: 208px;
}
.@{calendar-prefix-cls}-in-range-cell {
border-radius: 0;
2016-06-15 16:14:40 +08:00
position: relative;
> div {
position: relative;
z-index: 1;
}
&:before {
content: '';
display: block;
background: @primary-1;
2015-12-27 14:29:05 +08:00
border-radius: 0;
border: 0;
2016-06-15 16:14:40 +08:00
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
right: 0;
2015-12-27 14:29:05 +08:00
}
2015-12-11 11:11:24 +08:00
}
&-bottom {
text-align: right;
.@{calendar-prefix-cls}-footer-btn {
padding-right: 16px;
}
}
2017-01-12 10:35:17 +08:00
// `div` for selector specificity
div&-quick-selector {
display: block;
text-align: left;
border-top: @border-width-base @border-style-base @border-color-split;
2016-11-15 17:16:20 +08:00
padding: 10.5px 10px;
> a {
margin-right: 16px;
}
2015-12-11 11:11:24 +08:00
}
2016-09-21 16:43:09 +08:00
.@{calendar-prefix-cls},
.@{calendar-prefix-cls}-month-panel,
.@{calendar-prefix-cls}-year-panel {
&-header {
border-bottom: 0;
}
&-body {
border-top: @border-width-base @border-style-base @border-color-split;
}
2015-12-11 11:11:24 +08:00
}
&.@{calendar-prefix-cls}-time {
2016-10-07 16:04:11 +08:00
.@{calendar-timepicker-prefix-cls} {
height: 207px;
2016-11-15 17:16:20 +08:00
width: 100%;
top: 68px;
2016-09-08 11:14:39 +08:00
z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
&-panel {
height: 241px;
margin-top: -34px;
}
&-inner {
padding-top: 34px;
2016-11-15 17:16:20 +08:00
height: 100%;
background: none;
}
&-combobox {
display: inline-block;
2016-11-15 17:16:20 +08:00
height: 100%;
background-color: @component-background;
border-top: @border-width-base @border-style-base @border-color-split;
}
&-select {
2016-11-15 17:16:20 +08:00
height: 100%;
ul {
2016-11-15 17:16:20 +08:00
max-height: 100%;
}
}
}
.@{calendar-prefix-cls}-footer-btn {
2016-11-15 17:16:20 +08:00
padding: 9px 12px 9px 0;
display: block;
.clearfix;
}
.@{calendar-prefix-cls}-ok-btn {
position: static;
height: 22px;
}
.@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
margin-right: 12px;
}
.@{calendar-prefix-cls}-today-btn {
margin: 8px 12px;
height: 22px;
line-height: 22px;
}
2015-12-11 11:11:24 +08:00
}
&-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
2016-11-15 17:16:20 +08:00
height: 247px;
&-panel {
2016-11-15 17:16:20 +08:00
height: 281px;
}
}
2015-12-11 11:11:24 +08:00
}
.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
.@{calendar-prefix-cls}-body {
border-top-color: transparent;
}
2016-12-05 00:27:03 +08:00
}