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

27
src/style/var.less
View File

@ -134,6 +134,33 @@
@button-plain-background-color: @white; @button-plain-background-color: @white;
@button-disabled-opacity: @disabled-opacity; @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
@card-padding: @padding-xs @padding-md; @card-padding: @padding-xs @padding-md;
@card-font-size: @font-size-sm; @card-font-size: @font-size-sm;