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