honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update 

Update year view to look nicer and highlight today in year view like the other calendar views.
This commit is contained in:
mohammadamer 2021-10-03 00:48:50 +03:00 committed by GitHub
parent 39ea25afc2
commit 91a2da907d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
samples/react-calendar/src/webparts/calendar/components/Year.module.scss
View File

@ -4,50 +4,52 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow-y: auto; overflow-y: auto;
}
.month { .month {
margin: 5px 10px 15px 10px; margin: 5px 10px 15px 10px;
}
.monthName { .monthName {
color: $ms-color-themeDark; color: $ms-color-themePrimary;
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
} }
.day { .day {
display: inline-block; display: inline-block;
width: 30px; width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
border: dotted 1px; border: dotted 1px;
border-radius: 50%; border-radius: 50%;
transform: scale(0.9, 0.9); transform: scale(0.9, 0.9);
} }
.date { .date {
width: 30px; width: 30px;
height: 30px; height: 30px;
background: white; border-radius: 50px;
border-radius: 50px; border: none;
border: none; outline: none;
outline: none;
}
.date.inMonth:hover { &.inMonth {
cursor: pointer; &:hover {
background: $ms-color-themeDark; cursor: pointer;
color: white; background: $ms-color-themePrimary;
font-weight: bold; color: white;
} font-weight: bold;
}
}
.today { &.today {
background: $ms-color-themeDark; background: $ms-color-themePrimary;
} color: white;
}
.date.prevMonth, .date.prevMonth,
.date.nextMonth { .date.nextMonth {
color: grey; color: grey;
}
}
}
} }