253 lines
6.5 KiB
Plaintext
253 lines
6.5 KiB
Plaintext
.@{picker-prefix-cls} {
|
|
&-rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
&-suffix {
|
|
.@{picker-prefix-cls}-rtl & {
|
|
margin-right: (@padding-xs / 2);
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&-clear {
|
|
.@{picker-prefix-cls}-rtl & {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&-separator {
|
|
.@{picker-prefix-cls}-rtl & {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
&-header {
|
|
&-view {
|
|
button {
|
|
&:not(:first-child) {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
margin-right: @padding-xs;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ======================== Range =========================
|
|
&-range {
|
|
// Clear
|
|
.@{picker-prefix-cls}-clear {
|
|
.@{picker-prefix-cls}-rtl& {
|
|
right: auto;
|
|
left: @input-padding-horizontal-base;
|
|
}
|
|
}
|
|
|
|
// Active bar
|
|
.@{picker-prefix-cls}-active-bar {
|
|
.@{picker-prefix-cls}-rtl& {
|
|
margin-right: @input-padding-horizontal-base;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&.@{picker-prefix-cls}-small {
|
|
.@{picker-prefix-cls}-active-bar {
|
|
.@{picker-prefix-cls}-rtl& {
|
|
margin-right: @input-padding-horizontal-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ======================== Ranges ========================
|
|
&-ranges {
|
|
.@{picker-prefix-cls}-dropdown-rtl & {
|
|
text-align: right;
|
|
}
|
|
|
|
.@{picker-prefix-cls}-ok {
|
|
.@{picker-prefix-cls}-dropdown-rtl & {
|
|
float: left;
|
|
margin-right: @padding-xs;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ======================== Panel ========================
|
|
&-panel {
|
|
&-rtl {
|
|
direction: rtl;
|
|
}
|
|
}
|
|
|
|
&-prev-icon,
|
|
&-super-prev-icon {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
transform: rotate(135deg);
|
|
}
|
|
}
|
|
|
|
&-next-icon,
|
|
&-super-next-icon {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
&-cell {
|
|
.picker-cell-inner(~'@{picker-cell-inner-cls}');
|
|
}
|
|
|
|
// ======================== Body ==========================
|
|
.picker-cell-inner(@cellClassName) {
|
|
.@{cellClassName} {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: inline-block;
|
|
min-width: @picker-panel-cell-height;
|
|
height: @picker-panel-cell-height;
|
|
line-height: @picker-panel-cell-height;
|
|
border-radius: @border-radius-base;
|
|
transition: background @animation-duration-slow, border @animation-duration-slow;
|
|
}
|
|
|
|
&-in-view&-range-start::before {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 50%;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&-in-view&-range-end::before {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
&-in-view&-range-start&-range-end::before {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 50%;
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
.@{picker-prefix-cls}-date-panel
|
|
&-in-view&-in-range&-range-hover-start
|
|
.@{cellClassName}::after {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: -5px - @border-width-base;
|
|
}
|
|
}
|
|
|
|
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: -5px - @border-width-base;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// Hover with range start & end
|
|
&-range-hover&-range-start::after {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
&-range-hover&-range-end::after {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 50%;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// range start border-radius
|
|
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
border-radius: 0 @border-radius-base @border-radius-base 0;
|
|
}
|
|
}
|
|
|
|
// range end border-radius
|
|
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
border-radius: @border-radius-base 0 0 @border-radius-base;
|
|
}
|
|
}
|
|
|
|
// Edge start
|
|
tr > &-in-view&-range-hover:not(&-selected):first-child::after,
|
|
&-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
|
|
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
|
|
&-in-view&-range-hover-start::after {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 6px;
|
|
left: 0;
|
|
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-left: none;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: @border-radius-base;
|
|
border-bottom-right-radius: @border-radius-base;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
|
|
// Edge end
|
|
tr > &-in-view&-range-hover:not(&-selected):last-child::after,
|
|
&-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
|
|
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
|
|
&-in-view&-range-hover-end::after {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: 6px;
|
|
border-right: none;
|
|
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-top-left-radius: @border-radius-base;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: @border-radius-base;
|
|
}
|
|
}
|
|
|
|
tr > &-in-view&-range-hover-start:last-child::after,
|
|
tr > &-in-view&-range-hover-end:first-child::after,
|
|
&-in-view&-start&-range-hover-edge-start:not(&-range-hover)::after,
|
|
&-in-view&-start&-range-hover-end&-range-hover-edge-start:not(&-range-hover)::after,
|
|
&-in-view&-end&-range-hover-start&-range-hover-edge-end:not(&-range-hover)::after,
|
|
tr > &-in-view&-start&-range-hover&-range-hover-edge-start:last-child::after,
|
|
tr > &-in-view&-end&-range-hover&-range-hover-edge-end:first-child::after {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 6px;
|
|
left: 6px;
|
|
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-radius: @border-radius-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ======================== Footer ========================
|
|
&-footer {
|
|
&-extra {
|
|
.@{picker-prefix-cls}-dropdown-rtl & {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================== Time Panel ======================
|
|
&-time-panel {
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
direction: ltr;
|
|
}
|
|
}
|
|
}
|