Style components
This commit is contained in:
@@ -13,81 +13,34 @@
|
||||
}
|
||||
|
||||
/* Taken from https://codepen.io/alvarotrigo/pen/xxYVrmK */
|
||||
.calendar {
|
||||
display: inline-grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
margin: 40px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 40px 30px -20px rgba(0, 0, 0, 0.3);
|
||||
.days>span {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.month {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 300;
|
||||
.dates {
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50px;
|
||||
margin: 2px;
|
||||
transition-duration: .2s;
|
||||
|
||||
.year {
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
&.today {
|
||||
box-shadow: inset 0px 0px 0px 2px #0a3d62;
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
color: #999;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
|
||||
span {
|
||||
width: 50px;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.dates {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50px;
|
||||
margin: 2px;
|
||||
transition-duration: .2s;
|
||||
|
||||
&.today {
|
||||
box-shadow: inset 0px 0px 0px 2px #0a3d62;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: #0a3d62;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user