<div class="o-grid p-layout">
<div class="o-grid__item o-grid__header">
<form>
<label for="search">
<input type="search" name="search" id="search" />
<button class="c-btn c-btn--yellow">Search</button>
</label>
</form>
</div>
<div class="o-grid__item o-grid__main">
<button class="c-btn c-btn--yellow c-btn--3d">3D button</button>
<br><br>
<dl id="accordion-group-main-light"
role="presentation"
class="c-accordion c-accordion--light">
<dt role="heading" aria-level="3">
<button aria-expanded="true"
class="c-accordion__trigger"
aria-controls="sect-main-light-1"
id="accordion-main-light-1"
type="button">
<span class="c-accordion__heading">
Accordion heading 1
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-main-light-1"
role="region"
aria-labelledby="accordion-main-light-1"
class="c-accordion__panel">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
</div>
</dd>
<dt role="heading" aria-level="3">
<button aria-expanded="false"
class="c-accordion__trigger"
aria-controls="sect-main-light-2"
id="accordion-main-light-2"
type="button">
<span class="c-accordion__heading">
Accordion heading 2
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-main-light-2"
role="region"
aria-labelledby="accordion-main-light-2"
class="c-accordion__panel">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
</div>
</dd>
<dt role="heading" aria-level="3">
<button aria-expanded="false"
class="c-accordion__trigger"
aria-controls="sect-main-light-3"
id="accordion-main-light-3"
type="button">
<span class="c-accordion__heading">
Accordion heading 3
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-main-light-3"
role="region"
aria-labelledby="accordion-main-light-3"
class="c-accordion__panel">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
</div>
</dd>
</dl>
<br><br>
<dl id="accordion-group-main-dark"
role="presentation"
class="c-accordion c-accordion--dark c-accordion--single">
<dt role="heading" aria-level="3">
<button aria-expanded="false"
class="c-accordion__trigger"
aria-controls="sect-main-dark-1"
id="accordion-main-dark-1"
type="button">
<span class="c-accordion__heading">
Accordion heading 1
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-main-dark-1"
role="region"
aria-labelledby="accordion-main-dark-1"
class="c-accordion__panel">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
</div>
</dd>
<dt role="heading" aria-level="3">
<button aria-expanded="true"
class="c-accordion__trigger"
aria-controls="sect-main-dark-2"
id="accordion-main-dark-2"
type="button">
<span class="c-accordion__heading">
Accordion heading 2
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-main-dark-2"
role="region"
aria-labelledby="accordion-main-dark-2"
class="c-accordion__panel">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
</div>
</dd>
<dt role="heading" aria-level="3">
<button aria-expanded="false"
class="c-accordion__trigger"
aria-controls="sect-main-dark-3"
id="accordion-main-dark-3"
type="button">
<span class="c-accordion__heading">
Accordion heading 3
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-main-dark-3"
role="region"
aria-labelledby="accordion-main-dark-3"
class="c-accordion__panel">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
</div>
</dd>
</dl>
</div>
<div class="o-grid__item o-grid__sidebar">
<a href="#" role="button" class="c-btn c-btn--yellow">Link button</a>
<br><br>
<dl id="accordion-group-sidebar"
role="presentation"
class="c-accordion p-sidebar-menu">
<dt role="heading" aria-level="3">
<button aria-expanded="false"
class="c-accordion__trigger p-sidebar-menu__button"
aria-controls="sect-sidebar-1"
id="accordion-sidebar-1"
type="button">
<span class="c-accordion__heading">
Menu 1
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-sidebar-1"
role="region"
aria-labelledby="accordion-sidebar-1"
class="c-accordion__panel p-sidebar-menu__panel">
<div>
<ul class="p-sidebar-menu__list">
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 1</a>
</li>
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 1</a>
</li>
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 1</a>
</li>
</ul>
</div>
</dd>
<dt role="heading" aria-level="3">
<button aria-expanded="false"
class="c-accordion__trigger p-sidebar-menu__button"
aria-controls="sect-sidebar-2"
id="accordion-sidebar-2"
type="button">
<span class="c-accordion__heading">
Menu 2
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-sidebar-2"
role="region"
aria-labelledby="accordion-sidebar-2"
class="c-accordion__panel p-sidebar-menu__panel">
<div>
<ul class="p-sidebar-menu__list">
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 2</a>
</li>
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 2</a>
</li>
</ul>
</div>
</dd>
<dt role="heading" aria-level="3">
<button aria-expanded="true"
class="c-accordion__trigger p-sidebar-menu__button"
aria-controls="sect-sidebar-3"
id="accordion-sidebar-3"
type="button">
<span class="c-accordion__heading">
Menu 3
</span>
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
</button>
</dt>
<dd id="sect-sidebar-3"
role="region"
aria-labelledby="accordion-sidebar-3"
class="c-accordion__panel p-sidebar-menu__panel">
<div>
<ul class="p-sidebar-menu__list">
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 3</a>
</li>
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 3</a>
</li>
<li class="p-sidebar-menu__item">
<span class="c-arrow">
<i class="c-arrow__left"></i>
<i class="c-arrow__right"></i>
</span>
<a class="p-sidebar-menu__link" href="#">Submenu 3</a>
</li>
</ul>
</div>
</dd>
</dl>
</div>
<div class="o-grid__item o-grid__footer">
<a href="#" role="button" class="c-btn c-btn--large c-btn--blue">Contact</a>
<dl id="accordion-group-footer"
role="presentation"
class="c-accordion c-accordion--disable">
<dt role="heading" aria-level="3">
<button aria-expanded="true"
class="c-accordion__trigger"
aria-controls="sect-footer-1"
id="accordion-footer-1"
type="button">
<span class="c-accordion__heading">
Connect with me
</span>
</button>
</dt>
<dd id="sect-footer-1"
role="region"
aria-labelledby="accordion-footer-1"
class="c-accordion__panel">
<div>
<ul class="c-social-media__list">
<li class="c-social-media__item">
<a class="c-social-media__link" href="https://twitter.com/iamryanyu/">
<svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
<path d="M612 116.258a250.714 250.714 0 0 1-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 0 1-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"/>
</svg>
</a>
</li>
<li class="c-social-media__item">
<a class="c-social-media__link" href="https://www.linkedin.com/in/ryan-yu-8748325a/">
<svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.117 430.117">
<path d="M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"/>
</svg>
</a>
</li>
<li class="c-social-media__item">
<a class="c-social-media__link" href="https://codepen.io/iamryanyu/">
<svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" width="31.665" height="31.665" viewBox="0 0 31.665 31.665"><path d="M16.878.415a2.501 2.501 0 0 0-2.809.034L1.485 9.214a2.5 2.5 0 0 0-1.071 2.052v9.444c0 .84.421 1.623 1.122 2.086l12.79 8.455a2.5 2.5 0 0 0 2.758 0l13.044-8.618a2.501 2.501 0 0 0 1.122-2.086v-9.279a2.5 2.5 0 0 0-1.121-2.085L16.878.415zm9.743 10.23L21.8 13.882l-4.521-3.288-.029-6.467 9.371 6.518zM13.979 4.133v6.329l-4.633 3.24-4.621-3.099 9.254-6.47zM3.458 13.722l2.991 2.004-2.991 2.093v-4.097zm10.6 13.493l-9.331-6.258 4.661-3.258 4.67 3.133v6.383zm-1.772-11.541l3.021-2.113 3.519 2.313-3.119 2.095-3.421-2.295zm5.068 11.541V20.83l4.463-2.991 4.805 3.159-9.268 6.217zm10.6-9.288l-3.168-2.082 3.168-2.125v4.207z"/></svg>
</a>
</li>
<li class="c-social-media__item">
<a class="c-social-media__link" href="https://github.com/iamryanyu/">
<svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" width="438.549" height="438.549" viewBox="0 0 438.549 438.549"><path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"/></svg>
</a>
</li>
</ul>
</div>
</dd>
</dl>
</div>
</div>
/**
* Variables
*/
//* Colors *//
// Black
$black: hsla(0, 0%, 0%, 1);
// White
$white: hsla(0, 0%, 100%, 1);
$lily-white: hsla(0, 0%, 92%, 1);
// Gray
$gray: hsla(0, 0%, 50%, 1);
$mischka: hsla(217, 17%, 85%, 1); // #d2d7df
$light-grey: hsla(0, 0%, 83%, 1);
// Yellow
$fuel-yellow: hsla(39, 84%, 53%, 1); // #eca320
// Blue
$united-nations-blue: hsla(213, 90%, 64%, 1); // #509cf6
//* Font size *//
$baseFontSize: 16;
/**
* Functions
*/
@function rem($pixels) {
@return $pixels / $baseFontSize * 1rem;
}
/**
* Placeholder
*/
%button-reset {
align-items: center;
background-color: transparent;
border: 0;
box-sizing: border-box;
color: currentColor;
display: flex;
justify-content: center;
margin: 0;
outline: unset;
padding: 0;
text-decoration: none;
}
%list-reset {
list-style: none;
margin: 0;
padding: 0;
}
/**
* Mixins
*/
@mixin button-3d($color) {
box-shadow: 0px 4px darken($color, 20%);
}
/**
* Elements
*/
body {
background: #22c1c3; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fdbb2d, #22c1c3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fdbb2d, #22c1c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/**
* Objects
*/
.o-grid {
display: grid;
grid-gap: rem(10);
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 20% 1fr 20%;
}
.o-grid__item {
background-color: $mischka;
}
.o-grid__header {
align-items: center;
justify-content: flex-end;
display: flex;
grid-area: header;
padding: rem(20);
}
.o-grid__main {
grid-area: main;
padding: rem(50);
}
.o-grid__sidebar {
grid-area: sidebar;
padding: rem(20);
}
.o-grid__footer {
align-items: center;
display: flex;
grid-area: footer;
justify-content: space-between;
padding: rem(20);
}
/**
* Components style
*/
/* Button */
.c-btn {
background-color: transparent;
border: 0;
border-radius: rem(3);
color: $black;
padding: rem(5) rem(10);
text-decoration: none;
}
.c-btn--large {
font-size: rem(25);
}
.c-btn--3d {
&.c-btn--yellow {
@include button-3d($fuel-yellow);
}
&.c-btn--blue {
@include button-3d($united-nations-blue);
}
}
.c-btn--yellow {
background-color: $fuel-yellow;
}
.c-btn--blue {
background-color: $united-nations-blue;
color: $white;
}
/* Arrow */
.c-arrow {
pointer-events: none;
.p-sidebar-menu__item & {
margin: rem(-6) rem(10) 0 rem(3);
left: 0;
right: auto;
transform: rotate(90deg) scale(0.6);
}
}
.c-arrow__left,
.c-arrow__right {
background-color: var(--icon-bg-color);
display: block;
height: 2px;
position: absolute;
right: rem(20);
top: calc(50% - 1px);
transition: transform 0.5s ease, background-color 0.5s ease;
width: rem(12);
.p-sidebar-menu & {
right: 0;
}
.p-sidebar-menu__item & {
left: 0;
right: auto;
}
}
.c-arrow__left {
transform: translateX(rem(3)) rotate(50deg);
.c-accordion__trigger[aria-expanded='false'] & {
transform: translateX(rem(-3)) rotate(50deg);
}
}
.c-arrow__right {
transform: translateX(rem(-4)) rotate(-50deg);
.c-accordion__trigger[aria-expanded='false'] & {
transform: translateX(rem(4)) rotate(-50deg);
}
}
/* Accordion */
.c-accordion {
// Default themes
--default-heading-bg-color: transparent;
--default-heading-font-color: hsla(0, 0%, 0%, 1);
--default-heading-border-color: transparent;
--default-icon-bg-color: hsla(0, 0%, 50%, 1);
--default-panel-bg-color: transparent;
--default-panel-font-color: hsla(0, 0%, 0%, 1);
// Default themes
--heading-bg-color: var(--default-heading-bg-color);
--heading-font-color: var(--default-heading-font-color);
--heading-border-color: var(--default-heading-border-color);
--icon-bg-color: var(--default-icon-bg-color);
--panel-bg-color: var(--default-panel-bg-color);
--panel-font-color: var(--default-panel-font-color);
margin: 0;
}
.c-accordion--light {
// Light themes
--light-heading-bg-color: hsla(0, 0%, 93%, 1);
--light-heading-font-color: hsla(0, 0%, 0%, 1);
--light-heading-border-color: hsla(0, 0%, 85%, 1);
--light-icon-bg-color: hsla(0, 0%, 50%, 1);
--light-panel-bg-color: hsla(0, 0%, 100%, 1);
--light-panel-font-color: hsla(0, 0%, 0%, 1);
--heading-bg-color: var(--light-heading-bg-color);
--heading-font-color: var(--light-heading-font-color);
--heading-border-color: var(--light-heading-border-color);
--icon-bg-color: var(--light-icon-bg-color);
--panel-bg-color: var(--light-panel-bg-color);
--panel-font-color: var(--light-panel-font-color);
}
.c-accordion--dark {
// Dark themes
--dark-heading-bg-color: hsla(0, 0%, 40%, 1);
--dark-heading-font-color: hsla(0, 0%, 100%, 1);
--dark-heading-border-color: hsla(0, 0%, 35%, 1);
--dark-icon-bg-color: hsla(0, 0%, 100%, 1);
--dark-panel-bg-color: hsla(0, 0%, 50%, 1);
--dark-panel-font-color: hsla(0, 0%, 100%, 1);
--heading-bg-color: var(--dark-heading-bg-color);
--heading-font-color: var(--dark-heading-font-color);
--heading-border-color: var(--dark-heading-border-color);
--icon-bg-color: var(--dark-icon-bg-color);
--panel-bg-color: var(--dark-panel-bg-color);
--panel-font-color: var(--dark-panel-font-color);
}
.c-accordion__trigger {
@extend %button-reset;
background-color: var(--heading-bg-color);
border-top: 1px solid var(--heading-border-color);
display: block;
padding: rem(20);
position: relative;
text-align: left;
transition: background-color 0.5s ease, border-color 0.5s ease;
width: 100%;
.c-accordion--disable & {
cursor: default;
}
}
.c-accordion__heading {
color: var(--heading-font-color);
pointer-events: none;
transition: color 0.5s ease;
}
.c-accordion__panel {
background-color: var(--panel-bg-color);
color: var(--panel-font-color);
margin: 0;
padding: 0 rem(20);
overflow: hidden;
transition: background-color 0.5s ease, color 0.5s ease;
}
/* Social media */
.c-social-media__list {
@extend %list-reset;
display: flex;
}
.c-social-media__item {
margin: 0 rem(5);
}
.c-social-media__link {
background-color: $black;
border-radius: 50%;
color: $white;
display: block;
height: rem(24);
padding: rem(10);
transition: background-color 0.6s ease, color 0.6s ease;
width: rem(24);
&:hover {
background-color: $white;
color: $black;
}
}
.c-social-media__icon {
fill: currentColor;
height: 100%;
width: 100%;
}
/**
* Patterns
*/
.p-layout {
background-color: $white;
margin: rem(50) auto;
width: 90%;
}
.p-sidebar-menu__button {
padding-left: 0;
padding-right: 0;
}
.p-sidebar-menu__panel {
border-bottom: 1px solid $gray;
padding: 0;
}
.p-sidebar-menu__list {
@extend %list-reset;
margin-bottom: rem(20);
}
.p-sidebar-menu__item {
display: flex;
padding: rem(10) 0;
position: relative;
}
.p-sidebar-menu__link {
color: $gray;
font-size: rem(14);
&:hover {
text-decoration: none;
}
}
View Compiled
/**
* Accordion
*/
const accordions = [...document.querySelectorAll('.c-accordion:not(.c-accordion--disable)')];
const accordionTriggers = [...document.querySelectorAll('.c-accordion__trigger')];
const accordionPanels = [...document.querySelectorAll('.c-accordion__panel')];
const speed = 0.5;
const toggleAccordion = (accordionBtn, target, isTargetExpanded, isSingle = false) => {
if (isSingle) {
const thisAccordionPanels = [...accordionBtn.closest('.c-accordion').querySelectorAll('.c-accordion__panel')];
const panelIndex = thisAccordionPanels.findIndex(panel => panel.id === target.id);
const newAccordionPanels = [
...thisAccordionPanels.slice(0, panelIndex),
...thisAccordionPanels.slice(panelIndex + 1)
];
TweenMax.to(newAccordionPanels, speed, {
height: 0,
ease: Bounce.easeOut,
onUpdate:() => {
accordionTriggers.map(trigger => {
trigger.setAttribute('aria-expanded', false);
});
},
});
}
if (isTargetExpanded === true) {
//console.log('collaps1', target);
// collapse
TweenMax.to(target, speed, {
height: 0,
ease: Bounce.easeOut,
onUpdate:() => {
accordionBtn.setAttribute('aria-expanded', false);
},
});
} else {
//console.log('expand', target);
// expand
TweenMax.set(target, {
height: 'auto',
});
TweenMax.from(target, speed, {
height: 0,
ease: Elastic.easeOut.config(1, 0.75),
onUpdate:() => {
accordionBtn.setAttribute('aria-expanded', true);
},
});
}
}
const handleAccordion = (e) => {
e.preventDefault();
const accordionBtn = e.target;
const isSingle = e.target.closest('.c-accordion').classList.contains('c-accordion--single');
// Trigger the accordion button
if (e.target.classList.contains('c-accordion__trigger')) {
let target = document.getElementById(e.target.getAttribute('aria-controls'));
let isTargetExpanded = e.target.getAttribute('aria-expanded') === 'true' ? true : false;
toggleAccordion(accordionBtn, target, isTargetExpanded, isSingle);
}
};
const keyboardAccordion = (e) => {
const target = e.target;
const key = e.which.toString();
// 38: Up, 40: Down
if (target.classList.contains('c-accordion__trigger')) {
if (key.match(/38|40/)) {
const index = accordionTriggers.indexOf(target);
const length = accordionTriggers.length;
const direction = (key.match(/40/)) ? 1 : -1;
const newIndex = (index + length + direction) % length;
accordionTriggers[newIndex].focus();
e.preventDefault();
}
}
};
const accordionInit = () => {
accordionTriggers.map(accordionBtn => {
let target = document.getElementById(accordionBtn.getAttribute('aria-controls'));
let isTargetExpanded = accordionBtn.getAttribute('aria-expanded') === 'true' ? false : true;
console.log(accordionBtn);
toggleAccordion(accordionBtn, target, isTargetExpanded);
});
};
accordions.map(accordion => {
accordion.addEventListener('click', handleAccordion);
accordion.addEventListener('keydown', keyboardAccordion);
});
// Init
accordionInit();
/**
* Theme Switch
*/
const themeSwitchers = [...document.querySelectorAll('.js-theme-switch')];
const accordion = document.querySelector('.c-accordion');
const themeValues = [
'heading-bg-color',
'heading-font-color',
'heading-border-color',
'icon-bg-color',
'panel-bg-color',
'panel-font-color',
];
const getThemeColors = (themeVal) => {
return getComputedStyle(accordion).getPropertyValue(themeVal);
};
const setThemeColors = (theme) => {
themeValues.map(themeVal => {
accordion.style.setProperty(`--${themeVal}`, getThemeColors(`--${theme}-${themeVal}`));
});
}
const handleThemeSwitch = (e) => {
if (e.target.classList.contains('c-theme-switch__light')) {
// light theme
setThemeColors('light');
} else {
// dark theme
setThemeColors('dark');
}
};
themeSwitchers.map(switcher => {
switcher.addEventListener('click', handleThemeSwitch);
});
This Pen doesn't use any external CSS resources.