* {
margin: 0;
padding: 0;
}
// : Use a value from 300 to 800
// : Use a unique and descriptive class name
.open-sans- {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: ;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
@font-face {
font-family: Open Sans;
}
body {
min-height: 100vh;
padding: 0 10px;
font-family: 'Open Sans';
align-items: center;
justify-content: center;
}
.calendar-container {
background: #ffffff;
width: 190px;
height: 210px;
border-radius: 5px;
border: 1px solid #000000;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.calendar-container header {
text-align: center;
align-items: center;
padding: 15px 20px 8px;
justify-content: space-between;
}
header .calendar-navigation {
display: flex;
}
header .calendar-navigation span {
margin: 0 21px;
cursor: pointer;
text-align: center;
border-radius: 50%;
user-select: none;
color: #aeabab;
font-size: 12px;
}
.calendar-navigation span:last-child {
margin-right: -8px;
}
header .calendar-navigation span:hover {
opacity: 0.7;
}
header .calendar-current-date {
font-weight: 500;
font-size: 12px;
}
.calendar-body ul {
list-style: none;
flex-wrap: wrap;
display: flex;
text-align: center;
}
.calendar-body .calendar-dates {
margin-bottom: 30px;
}
.calendar-body li {
width: calc(100% / 7);
height: 30px;
line-height: 30px;
font-size: 12px;
color: #000000;
position: relative;
z-index: 1;
cursor: pointer;
text-align: center;
height: 20px;
}
.calendar-body .calendar-weekdays li {
cursor: default;
font-weight: 500;
font-size: 12px;
color: #555555;
font-weight: bold;
}
.calendar-body .calendar-dates li {
position: relative;
z-index: 1;
font-size: 12px;
}
.calendar-dates li.inactive {
color: #aaa;
cursor: default;
}
.calendar-dates li.active {
color: #fff;
}
.calendar-dates li::before {
position: absolute;
content: "";
z-index: -1;
top: 75%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
}
.calendar-dates li.active::before {
background: #fc89ac;
border: 1px soild #326c7a;
}
.calendar-dates li:not(.active):not(.highlight):hover::before {
background: #fc89ac;
}
.calendar-dates li.highlight {
background: transparent !important;
border: 2px dotted #38f3b1 !important;
border-radius: 50%;
position: relative;
z-index: 10;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(100% / 7);
/*calendar*/