blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-26 03:16:35 +08:00
Code Issues Projects Releases Wiki Activity

feat(Calendar): add less vars

Browse Source
This commit is contained in:
陈嘉涵 2019-12-26 19:48:18 +08:00 committed by neverland
parent dec732daac
commit 30b3e4b6ba
2 changed files with 54 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/calendar/index.less
View File

@ -4,10 +4,10 @@
display: flex;
flex-direction: column;
height: 100%;
background-color: @white;
background-color: @calendar-background-color;
&__popup {
height: 80%;
height: @calendar-popup-height;
.van-popup__close-icon {
top: 13px;
@ -16,23 +16,23 @@
&__header {
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
box-shadow: @calendar-header-box-shadow;
}
&__header-title,
&__month-title {
height: 44px;
height: @calendar-header-title-height;
font-weight: @font-weight-bold;
line-height: 44px;
line-height: @calendar-header-title-height;
text-align: center;
}
&__header-title {
font-size: @font-size-lg;
font-size: @calendar-header-title-font-size;
}
&__month-title {
font-size: @font-size-md;
font-size: @calendar-month-title-font-size;
}
&__weekdays {
@ -41,8 +41,8 @@
&__weekday {
flex: 1;
font-size: @font-size-sm;
line-height: 30px;
font-size: @calendar-weekdays-font-size;
line-height: @calendar-weekdays-height;
text-align: center;
}
@ -64,8 +64,8 @@
top: 50%;
left: 50%;
z-index: 0;
color: fade(@gray-2, 80%);
font-size: 160px;
color: @calendar-month-mark-color;
font-size: @calendar-month-mark-font-size;
transform: translate(-50%, -50%);
pointer-events: none;
}
@ -81,14 +81,14 @@
&__day {
position: relative;
width: 14.285%;
height: 64px;
font-size: @font-size-lg;
height: @calendar-day-height;
font-size: @calendar-day-font-size;
cursor: pointer;
&--end,
&--start {
color: @white;
background-color: @red;
color: @calendar-range-edge-color;
background-color: @calendar-range-edge-background-color;
}
&--start {
@ -100,12 +100,12 @@
}
&--middle {
color: @red;
background-color: fade(@red, 10%);
color: @calendar-range-middle-color;
background-color: @calendar-range-middle-background-color;
}
&--disabled {
color: @gray-5;
color: @calendar-day-disabled-color;
cursor: default;
}
}
@ -115,8 +115,8 @@
position: absolute;
right: 0;
left: 0;
font-size: @font-size-xs;
line-height: 14px;
font-size: @calendar-info-font-size;
line-height: @calendar-info-line-height;
@media (max-width: 350px) {
font-size: 9px;
@ -132,10 +132,10 @@
}
&__selected-day {
width: 54px;
height: 54px;
color: @white;
background: @red;
width: @calendar-selected-day-size;
height: @calendar-selected-day-size;
color: @calendar-selected-day-color;
background-color: @calendar-selected-day-background-color;
border-radius: @border-radius-md;
}
@ -150,8 +150,8 @@
}
&__confirm {
height: 36px;
margin: 7px 0;
line-height: 34px;
height: @calendar-confirm-button-height;
margin: @calendar-confirm-button-margin;
line-height: @calendar-confirm-button-line-height;
}
}

27
src/style/var.less
View File

@ -134,6 +134,33 @@
@button-plain-background-color: @white;
@button-disabled-opacity: @disabled-opacity;
// Calendar
@calendar-background-color: @white;
@calendar-popup-height: 80%;
@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
@calendar-header-title-height: 44px;
@calendar-header-title-font-size: @font-size-lg;
@calendar-weekdays-height: 30px;
@calendar-weekdays-font-size: @font-size-sm;
@calendar-month-title-font-size: @font-size-md;
@calendar-month-mark-color: fade(@gray-2, 80%);
@calendar-month-mark-font-size: 160px;
@calendar-day-height: 64px;
@calendar-day-font-size: @font-size-lg;
@calendar-range-edge-color: @white;
@calendar-range-edge-background-color: @red;
@calendar-range-middle-color: @red;
@calendar-range-middle-background-color: fade(@red, 10%);
@calendar-selected-day-size: 54px;
@calendar-selected-day-color: @white;
@calendar-info-font-size: @font-size-xs;
@calendar-info-line-height: 14px;
@calendar-selected-day-background-color: @red;
@calendar-day-disabled-color: @gray-5;
@calendar-confirm-button-height: 36px;
@calendar-confirm-button-margin: 7px 0;
@calendar-confirm-button-line-height: 34px;
// Card
@card-padding: @padding-xs @padding-md;
@card-font-size: @font-size-sm;