Skip to content

Commit

Permalink
chore: less rewrite about calendar、filter、tips (#237)
Browse files Browse the repository at this point in the history
  • Loading branch information
@doingSth @Phieo
doingSth authored and Phieo committed Mar 21, 2019
1 parent 50faa1d commit 0bf3229
Show file tree
Hide file tree
Showing 5 changed files with 351 additions and 342 deletions.
367 changes: 184 additions & 183 deletions components/calendar/index.less
View file
@@ -1,188 +1,189 @@
.am-calendar {
background-color: #fff;
padding-top: 10px;
}

.am-calendar-months {
display: flex;
box-sizing: border-box;
padding: 0 26px;
align-items: center;
height: 28px;
}

.am-calendar-prev-month,
.am-calendar-next-month {
display: flex;
width: 40px;
font-size: 20px;
}

.am-calendar-prev-month {
justify-content: flex-start;
}

.am-calendar-next-month {
justify-content: flex-end;
}

.am-calendar-arrow {
height: 28px;
width: 12px;
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/vYcMhkfyHRIOeVXWdcPe.png');
background-size: 8px 14px;
background-position: left center;
background-repeat: no-repeat;
}

.am-calendar-arrow.next {
transform: rotate(180deg);
}

.am-calendar-selected-month {
flex: 1;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #333;
}

.am-calendar-days {
display: flex;
padding: 14px 10px 9px;
border-bottom: 1rpx solid #eee;
height: 20px;
line-height: 20px;
}

.am-calendar-day {
flex: 1;
text-align: center;
color: #333;
font-size: 14px;
}

.am-calendar-dates {
display: flex;
flex-direction: column;
}

.am-calendar-week {
margin-bottom: 17px;
display: flex;
flex-direction: row;
padding: 0 10px;
}

.am-calendar-week:first-child {
margin-top: 12px;
}

.am-calendar-date-wrap {
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
height: 42px;
flex: 1;
}

.am-calendar-date {
text-align: center;
height: 23px;
line-height: 23px;
font-size: 19px;
font-family: 'Helvetica';
color: #333;
}

.am-calendar-tag {
position: absolute;
top: 21px;
width: 42px;
overflow: hidden;
text-overflow: hidden;
white-space: nowrap;
color: #f5a623;
font-size: 10px;
font-weight: 500;
}

.am-calendar-today {
color: #108ee9;
}

.am-calendar-gray {
color: #ccc;
}

.am-calendar-selected .am-calendar-block {
position: absolute;
left: ~"calc(50% - 21px)";
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
width: 42px;
height: 42px;
background: #309EF2;
border-radius: 2px;
}

.am-calendar-middle.is-range .am-calendar-block {
position: absolute;
left: 0;
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
height: 42px;
background: #309EF2;
width: 100%;
border-radius: 0;
}

.am-calendar-start.is-range .am-calendar-block {
position: absolute;
left: ~"calc(50% - 21px)";
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
width: 100%;
height: 42px;
background: #309EF2;
border-radius: 2px 0 0 2px;
}

.am-calendar-end.is-range .am-calendar-block {
position: absolute;
left: 0;
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
width: ~"calc(50% + 21px)";
height: 42px;
background: #309EF2;
border-radius: 0 2px 2px 0;
}

.am-calendar-selected .am-calendar-block.has-tag,
.am-calendar-start .am-calendar-block.has-tag,
.am-calendar-middle .am-calendar-block.has-tag,
.am-calendar-end .am-calendar-block.has-tag {
top: ~"calc(50% - 7px)";
}

.am-calendar-selected .am-calendar-date,
.am-calendar-start .am-calendar-date,
.am-calendar-middle .am-calendar-date,
.am-calendar-end .am-calendar-date {
position: relative;
color: #fff;
&-months {
display: flex;
box-sizing: border-box;
padding: 0 26px;
align-items: center;
height: 28px;
}

&-prev-month,
&-next-month {
display: flex;
width: 40px;
font-size: 20px;
}

&-prev-month {
justify-content: flex-start;
}

&-next-month {
justify-content: flex-end;
}

&-arrow {
height: 28px;
width: 12px;
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/vYcMhkfyHRIOeVXWdcPe.png');
background-size: 8px 14px;
background-position: left center;
background-repeat: no-repeat;
}

&-arrow.next {
transform: rotate(180deg);
}

&-selected-month {
flex: 1;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #333;
}

&-days {
display: flex;
padding: 14px 10px 9px;
border-bottom: 1rpx solid #eee;
height: 20px;
line-height: 20px;
}

&-day {
flex: 1;
text-align: center;
color: #333;
font-size: 14px;
}

&-dates {
display: flex;
flex-direction: column;
}

&-week {
margin-bottom: 17px;
display: flex;
flex-direction: row;
padding: 0 10px;
}

&-week:first-child {
margin-top: 12px;
}

&-date-wrap {
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
height: 42px;
flex: 1;
}

&-date {
text-align: center;
height: 23px;
line-height: 23px;
font-size: 19px;
/* stylelint-disable font-family-no-missing-generic-family-keyword */
font-family: 'Helvetica';
color: #333;
}

&-tag {
position: absolute;
top: 21px;
width: 42px;
overflow: hidden;
text-overflow: hidden;
white-space: nowrap;
color: #f5a623;
font-size: 10px;
font-weight: 500;
}

&-today {
color: #108ee9;
}

&-gray {
color: #ccc;
}

&-selected &-block {
position: absolute;
left: ~"calc(50% - 21px)";
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
width: 42px;
height: 42px;
background: #309EF2;
border-radius: 2px;
}

&-middle.is-range &-block {
position: absolute;
left: 0;
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
height: 42px;
background: #309EF2;
width: 100%;
border-radius: 0;
}

&-start.is-range &-block {
position: absolute;
left: ~"calc(50% - 21px)";
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
width: 100%;
height: 42px;
background: #309EF2;
border-radius: 2px 0 0 2px;
}

&-end.is-range &-block {
position: absolute;
left: 0;
top: ~"calc(50% - 10px)";
transform: translateY(-50%);
width: ~"calc(50% + 21px)";
height: 42px;
background: #309EF2;
border-radius: 0 2px 2px 0;
}

&-selected &-block.has-tag,
&-start &-block.has-tag,
&-middle &-block.has-tag,
&-end &-block.has-tag {
top: ~"calc(50% - 7px)";
}

&-selected &-date,
&-start &-date,
&-middle &-date,
&-end &-date {
position: relative;
color: #fff;
}

&-selected &-tag,
&-start &-tag,
&-middle &-tag,
&-end &-tag {
color: #fff;
}

&-disable &-date {
color: #999;
}
}

.am-calendar-selected .am-calendar-tag,
.am-calendar-start .am-calendar-tag,
.am-calendar-middle .am-calendar-tag,
.am-calendar-end .am-calendar-tag {
color: #fff;
}

.am-calendar-disable .am-calendar-date {
color: #999;
}

0 comments on commit 0bf3229

Please sign in to comment.