lechindianer/mihainator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prototype CSS only calendar result

Browse Source
This commit is contained in:
Pascal Schmid
2024-10-12 21:34:53 +02:00
parent a97b4f55fd
commit 101162c72e
5 changed files with 1468 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
assets/css/app.css
View File

@@ -3,3 +3,108 @@
@import "tailwindcss/utilities";
/* This file is for your main application CSS */
.calendar-wrapper {
display: flex;
position: absolute;
width: 80vw;
flex-wrap: wrap;
left: 10%;
top: 200px;
}
.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);
.month {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
margin-bottom: 20px;
font-weight: 300;
.year {
font-weight: 600;
margin-left: 10px;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #0a3d62;
width: 40px;
height: 40px;
border-radius: 40px;
transition-duration: .2s;
position: relative;
&:hover {
background: #eee;
}
}
}
.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;
}
}
.dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
button {
cursor: pointer;
outline: 0;
border: 0;
background: transparent;
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;
}
}
}
}