DOTD Component Library

Drawer 

<div class="c-drawer">
      <div class="c-drawer__container">
          <div class="c-drawer__header">
              <h4 class="o-heading o-heading--xs c-drawer__heading">
                  Search
              </h4>
              <button class="o-button o-button--icon c-drawer__close js-toggle" data-prefix="drawer" data-toggled="body" aria-label="Close">
                  <span class="o-icon o-icon--md">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path d="M13.2373 12L19 6.23734L17.7627 5L12 10.7627L6.23751 5L5 6.23734L10.7627 12L5 17.7627L6.23751 19L12 13.2373L17.7627 19L19 17.7627L13.2373 12Z" />
                      </svg>
                  </span>
              </button>
          </div>
          <div class="c-drawer__content">
              <div class="o-rich-text c-drawer__text">
                  <script async src='https://cse.google.com/cse.js?cx=9766aba3a08f84203'></script>
                  <div class='gcse-search'></div>
              </div>
          </div>
      </div>
  </div>
 
{% set base_class = drawer.base_class|default('c-drawer') %}
{% if drawer %}
  <div class="{{ bem(base_class, drawer.element, drawer.modifiers, drawer.extra) }}">
    <div class="{{ bem(base_class, 'container') }}">
      <div class="{{ bem(base_class, 'header') }}">
        {% include "@heading" with {
          "heading": {
            "level": "4",
            "size": "xs",
            "text": drawer.heading,
            "extra": bem(base_class, 'heading')
          }
        } %}
        {% include "@button" with {
          "button": {
            "icon": {
              "name": "close",
              "modifiers": "md"
            },
            "attributes": {
              "aria-label": "Close",
              "data-toggled": "body",
              "data-prefix": "drawer"
            },
            "modifiers": "icon",
            "extra": [bem(base_class, 'close'), "js-toggle"]
          }
        } %}
      </div>
      <div class="{{ bem(base_class, 'content') }}">
        {% include "@rich-text" with {
          "rich_text": {
            "text": drawer.content,
            "includes": drawer.includes,
            "extra": bem(base_class, 'text')
          }
        } %}
      </div>
    </div>
  </div>
{% endif %}
 
{
  "drawer": {
    "heading": "Search",
    "content": "<script async src='https://cse.google.com/cse.js?cx=9766aba3a08f84203'></script><div class='gcse-search'></div>"
  }
}
  • Content: 
    /* ------------------------------------*\
  $DRAWER
\*------------------------------------ */

.c-drawer {
  display: flex;
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background-color: var(--dotd-color-background-default-strong);
  z-index: var(--dotd-z-index-top);
  box-shadow: var(--dotd-box-shadow);
  transition: right var(--dotd-animation-duration) var(--dotd-animation-timing);

  &__container {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--dotd-color-background-default-strong);
    box-shadow: var(--dotd-box-shadow-sm);
    position: sticky;
    top: 0;
    left: 0;
    padding: var(--dotd-space-sm) var(--dotd-space-sm) var(--dotd-space-sm) var(--dotd-space-md);
    z-index: var(--dotd-z-index-top);
  }

  &__content {
    flex: 1;
    padding: var(--dotd-space);
    background-color: var(--dotd-color-background-default-strong);
    overflow: auto;
  }

  &::after {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--dotd-color-overlay-default);
    opacity: 0;
    transition: opacity var(--dotd-animation-duration) var(--dotd-animation-timing);
    z-index: -1;
    pointer-events: none;
  }
}

body.drawer-is-active {
  .c-drawer {
    right: 0;

    &::after {
      opacity: 1;
      pointer-events: auto;
    }
  }
}
  • URL: /components/raw/drawer/_drawer.scss
  • Filesystem Path: components/03-organisms/drawer/_drawer.scss
  • Size: 1.5 KB

No notes defined.