vuc-iview
Version:
A high quality UI components Library with Vue.js
308 lines (307 loc) • 8.45 kB
text/less
@date-picker-prefix-cls: ~"@{css-prefix}date-picker";
@picker-prefix-cls: ~"@{css-prefix}picker";
@date-picker-cells-width: 196px;
@date-picker-cells-width-with-weeknumbers: 226px;
.@{date-picker-prefix-cls} {
//position: relative;
display: inline-block;
line-height: normal;
&-rel {
position: relative;
}
.@{select-dropdown-prefix-cls} {
width: auto;
padding: 0;
overflow: visible;
max-height: none;
}
&-cells {
width: @date-picker-cells-width;
margin: 10px;
white-space: normal;
span {
display: inline-block;
width: 24px;
height: 24px;
em {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
margin: 2px;
font-style: normal;
border-radius: @btn-border-radius-small;
text-align: center;
transition: all @transition-time @ease-in-out;
}
}
&-header span {
line-height: 24px;
text-align: center;
margin: 2px;
color: @btn-disable-color;
}
&-cell:hover {
em {
background: @date-picker-cell-hover-bg;
}
}
&-focused {
em {
box-shadow: 0 0 0 1px @primary-color inset;
}
}
&-cell {
span& {
width: 28px;
height: 28px;
cursor: pointer;
}
&-prev-month,
&-next-month {
em {
color: @btn-disable-color;
}
&:hover {
em {
background: transparent;
}
}
}
span&-week-label,
span&-week-label:hover,
span&-disabled,
span&-disabled:hover {
cursor: @cursor-disabled;
color: @btn-disable-color;
em {
color: inherit;
background: inherit;
}
}
span&-disabled,
span&-disabled:hover {
background: @btn-disable-bg;
}
&-today {
em {
position: relative;
&:after {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: @primary-color;
position: absolute;
top: 1px;
right: 1px;
}
}
}
&-range {
position: relative;
em {
position: relative;
z-index: 1;
}
&:before {
content: '';
display: block;
background: @date-picker-cell-hover-bg;
border-radius: 0;
border: 0;
position: absolute;
top: 2px;
bottom: 2px;
left: 0;
right: 0;
}
}
&-selected,
&-selected:hover {
em {
background: @primary-color;
color: #fff;
}
}
span&-disabled&-selected {
em {
background: @btn-disable-color;
color: @btn-disable-bg;
}
}
&-today&-selected {
em {
&:after {
background: #fff;
}
}
}
}
}
&-cells-show-week-numbers {
width: @date-picker-cells-width-with-weeknumbers;
}
&-cells-year,
&-cells-month {
margin-top: 14px;
span {
width: 40px;
height: 28px;
line-height: 28px;
margin: 10px 12px;
border-radius: @btn-border-radius-small;
em {
width: 40px;
height: 28px;
line-height: 28px;
margin: 0;
}
}
.@{date-picker-prefix-cls}-cells-cell-focused {
background-color: tint(@primary-color, 80%);
}
}
&-header {
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid @border-color-split;
&-label {
cursor: pointer;
transition: color @transition-time @ease-in-out;
&:hover {
color: @primary-color;
}
}
}
&-btn-pulse {
background-color: tint(@primary-color, 80%) ;
border-radius: @border-radius-small;
transition: background-color @transition-time @ease-in-out;
}
&-prev-btn {
float: left;
&-arrow-double {
margin-left: 10px;
i:after {
content: "\F115";
margin-left: -8px;
}
}
}
&-next-btn {
float: right;
&-arrow-double {
margin-right: 10px;
i:after {
content: "\F11F";
margin-left: -8px;
}
}
}
&-with-range {
.@{picker-prefix-cls}-panel {
&-body {
min-width: (@date-picker-cells-width + 20) * 2;
}
&-content {
float: left;
}
}
.@{picker-prefix-cls}-cells-show-week-numbers {
min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
}
}
&-with-week-numbers {
.@{picker-prefix-cls}-panel {
&-body-date {
min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
}
}
}
&-transfer {
z-index: @zindex-transfer;
max-height: none;
width: auto;
}
&-focused input {
.active();
}
}
.@{picker-prefix-cls} {
&-panel {
&-icon-btn {
display: inline-block;
width: 20px;
height: 24px;
line-height: 26px;
margin-top: 4px;
text-align: center;
cursor: pointer;
color: @btn-disable-color;
transition: color @transition-time @ease-in-out;
&:hover {
color: @primary-color;
}
i {
font-size: 14px;
}
}
&-body-wrapper&-with-sidebar {
/* padding-left: 92px; */
padding-right: 92px;
}
&-sidebar {
width: 92px;
float: right;
/* margin-left: -92px; */
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: @table-thead-bg;
border-right: 1px solid @border-color-split;
border-radius: @border-radius-small 0 0 @border-radius-small;
overflow: auto;
}
&-shortcut {
padding: @btn-padding-large;
transition: all @transition-time @ease-in-out;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
background: @border-color-split;
}
}
&-body {
float: left;
}
}
&-confirm {
border-top: 1px solid @border-color-split;
text-align: right;
padding: 8px;
clear: both;
&>span {
color: @link-color;
cursor: pointer;
user-select: none;
float: left;
padding: 2px 0;
transition: all @transition-time @ease-in-out;
&:hover {
color: @link-hover-color;
}
&:active {
color: @link-active-color;
}
}
&-time {
float: left;
}
}
}