<div class="support-notice">🐤 <strong>Heads-up!</strong> This demo only works in Chrome Canary at the moment with the experimental features flag enabled.</div>
<div id="invitePanel" class="invite-panel">
<div class="panel-content">
<h2>Notifications <span class="indicator">2</span></h2>
<ol>
<li>
<svg viewBox="0 0 448 512" width="100" title="calendar-check">
<path d="M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z" />
</svg>
<span>Weekly Scrum</span>
<span>Tuesdays <time datetime="08:00-08:30">8-8:15am</time></span>
<button>Accept</button>
<button>Decline</button>
</li>
<li>
<svg viewBox="0 0 448 512" width="100" title="calendar-check">
<path d="M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z" />
</svg>
<span>Weekly Scrum</span>
<span>Tuesdays <time datetime="08:00-08:30">8-8:15am</time></span>
<button>Accept</button>
<button>Decline</button>
</li>
</ol>
</div>
</div>
<button id="trigger" class="invite-trigger">
<span class="indicator">2</span>
</button>
<div class="calendar">
<header>
<h1>June 2024</h1>
</header>
<ul class="weekdays">
<li>
<abbr title="S">Sunday</abbr>
</li>
<li>
<abbr title="M">Monday</abbr>
</li>
<li>
<abbr title="T">Tuesday</abbr>
</li>
<li>
<abbr title="W">Wednesday</abbr>
</li>
<li>
<abbr title="T">Thursday</abbr>
</li>
<li>
<abbr title="F">Friday</abbr>
</li>
<li>
<abbr title="S">Saturday</abbr>
</li>
</ul>
<ol class="day-grid">
<li class="month=prev">29</li>
<li class="month=prev">30</li>
<li class="month=prev">31</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li class="month-next">1</li>
<li class="month-next">2</li>
</ol>
</div>
.invite-panel {
height: 0;
overflow-y: clip;
transition: height 0.25s ease-in;
}
@media screen and
(prefers-reduced-motion: reduce),
(update: slow) {
#invitePanel {
transition-duration: 20ms;
}
}
@layer presentation {
.invite-panel {
background: #eaeaea;
.panel-content {
padding: 1rem;
}
h2 span {
background: #000;
font-size: 1rem;
}
ol {
background: #fff;
}
li {
align-items: center;
border-block-end: 1px solid #ccc;
display: flex;
gap: 1ch;
padding: 0.25rem 0.5rem;
span:first-of-type {
font-weight: 800;
}
}
svg {
max-inline-size: 24px;
}
}
.invite-trigger {
appearance: none;
background: none;
border: 0;
cursor: pointer;
inset-block-end: 1rem;
inset-inline-end: 1rem;
position: fixed;
}
span.indicator {
align-items: center;
aspect-ratio: 1;
background: hsl(20 100% 50%);
border-radius: 50%;
color: #fff;
display: inline-flex;
font-size: 1.5rem;
justify-content: center;
text-align: center;
transition: background 0.25s ease-in;
width: 4ch;
&:hover {
background: #000;
}
}
}
@layer layout {
header {
background: #000;
color: #fff;
display: flex;
font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
justify-content: center;
margin-bottom: 2rem;
min-block-size: 10vh;
place-items: center;
position: relative;
}
.calendar ul,
.calendar ol {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 1em;
margin: 0 auto;
max-width: 64em;
padding: 0;
li {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
}
}
ul.weekdays {
margin-bottom: 1em;
}
ul.weekdays li {
height: 4vw;
}
ol.day-grid li {
background-color: #eaeaea;
border: 1px solid #eaeaea;
height: 12vw;
max-height: 125px;
}
ul.weekdays abbr[title] {
border: none;
font-weight: 800;
text-decoration: none;
}
ol.day-grid li:nth-child(1),
ol.day-grid li:nth-child(2),
ol.day-grid li:nth-child(3),
ol.day-grid li:nth-child(34),
ol.day-grid li:nth-child(35) {
background-color: #fff;
}
@media all and (max-width: 800px) {
ul,
ol {
grid-gap: 0.25em;
}
ul.weekdays li {
font-size: 0;
}
ul.weekdays > li abbr:after {
content: attr(title);
font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
text-align: center;
}
}
}
@layer base {
:is(ul, ol) {
padding-inline-start: 0;
li {
list-style: none;
margin-inline-start: 0;
}
}
.support-notice {
background: hsl(50 100% 90%);
border-radius: 8px;
font-family: monospace;
font-size: 1rem;
line-height: 1.55;
margin-block: 1rem;
margin-inline: auto;
padding: 1rem;
width: max(30ch, 80vw);
@supports (height: calc-size(auto)) {
display: none;
}
}
}
const btn = document.querySelector('#trigger');
const panel = document.querySelector('#invitePanel');
function toggleHeight() {
if (panel.getAttribute("style") === null) {
panel.setAttribute('style', 'height: calc-size(auto);');
} else {
panel.removeAttribute("style", "");
}
}
btn.addEventListener('click', toggleHeight);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.