BFNA Design System

Off Canvas 

<div class="off-canvas">
    <button class="off-canvas__close"><i class="material-icons">close</i></button>

    <section class="off-canvas__col">
        <nav class="off-canvas__nav off-canvas--updates">
            <h2 class="off-canvas__heading">Updates</h2>
            <a href="#" class="off-canvas__item">Articles</a><br>
            <a href="#" class="off-canvas__item">Infographics</a><br>
            <a href="#" class="off-canvas__item">Videos</a><br>
        </nav>

        <nav class="off-canvas__nav off-canvas--about">
            <h2 class="off-canvas__heading">The Foundation</h2>
            <a href="#" class="off-canvas__item">About the Foundation</a><br>
            <a href="#" class="off-canvas__item">Board of Directors | Team</a><br>
            <a href="#" class="off-canvas__item">Bertelsmann Stiftung</a><br>
            <a href="#" class="off-canvas__item">Contact</a><br>
        </nav>
    </section>

    <section class="off-canvas__col off-canvas--right-col">
        <nav class="off-canvas__nav off-canvas--topics">
            <h2 class="off-canvas__heading">Topics</h2>
            <a href="#" class="off-canvas__item">Democracy</a><br>
            <a href="#" class="off-canvas__item">Digital World</a><br>
            <a href="#" class="off-canvas__item">Politics & Society</a><br>
        </nav>

        <nav class="off-canvas__nav off-canvas--archive">
            <a href="#" class="off-canvas__item">Archived Projects</a><br>
        </nav>
    </section>
</div>
 
<div class="off-canvas">
  <button class="off-canvas__close"><i class="material-icons">close</i></button>
  
  <section class="off-canvas__col">
    <nav class="off-canvas__nav off-canvas--updates">
      <h2 class="off-canvas__heading">Updates</h2>
      <a href="#" class="off-canvas__item">Articles</a><br>
      <a href="#" class="off-canvas__item">Infographics</a><br>
      <a href="#" class="off-canvas__item">Videos</a><br>
    </nav>

    <nav class="off-canvas__nav off-canvas--about">
      <h2 class="off-canvas__heading">The Foundation</h2>
      <a href="#" class="off-canvas__item">About the Foundation</a><br>
      <a href="#" class="off-canvas__item">Board of Directors | Team</a><br>
      <a href="#" class="off-canvas__item">Bertelsmann Stiftung</a><br>
      <a href="#" class="off-canvas__item">Contact</a><br>
    </nav>
  </section>
  
  <section class="off-canvas__col off-canvas--right-col">
    <nav class="off-canvas__nav off-canvas--topics">
      <h2 class="off-canvas__heading">Topics</h2>
      <a href="#" class="off-canvas__item">Democracy</a><br>
      <a href="#" class="off-canvas__item">Digital World</a><br>
      <a href="#" class="off-canvas__item">Politics & Society</a><br>
    </nav>
    
    <nav class="off-canvas__nav off-canvas--archive">
      <a href="#" class="off-canvas__item">Archived Projects</a><br>
    </nav>
  </section>
</div>
 
/* No context defined for this component. */
  • Content: 
    .off-canvas {
  top: -100vh;
  left: -100vw;
  width: 100vw;
  box-sizing: border-box;
  height: 100vh;
  position: fixed;
  z-index: 5;
  display: flex;
  @include breakpoint($small-only) { flex-direction: column; }
  transition: all .3s ease;
  opacity: 0;

  &--expanded { 
    top: 0; 
    left: 0; 
    opacity: 1;
  }

  &__close {
    all: unset;
    line-height: 0;
    position: absolute;
  }

  // Columns
  &__col { 
    flex: 1; 
    display: flex;
    flex-direction: column;
  }
  
  // Defining sections in each column
  &--updates { flex: 1; }
  &--about { flex: 0; }
  &--topics { flex: 1; }

  &__item { display: inline-block; }

  @include breakpoint($small-only) {
    .off-canvas--topics { flex: 0; }
    .off-canvas--right-col { order: -1; }
    .off-canvas--archive { opacity: .6; }
  }
}

.off-canvas {
  padding: 1rem;
  background-color: hsla(var(--navy-hsl), .95);
  overflow-y: scroll;
  @include breakpoint($large) { padding: 6rem; }


  &__close {
    top: 1rem;
    right: 1rem;

    @include breakpoint($large) {
      top: 2rem;
      right: 2rem;
    }
    > i { font-size: 2rem; }
  }

  &__item,
  &__close,
  &__heading { color: hsla(var(--white-hsl), 1); }

  &--topics,
  &--archive { 
    @include breakpoint($large) { text-align: right; }
  }

  &__heading { 
    font-weight: 600; 
    padding: 0 1rem;
    font-size: 1.2rem;
    @media screen and (min-height: 700px) { 
      font-size: 1.6rem; 
      padding: 0 1rem .3rem;
    }
  }

  &__item { 
    text-decoration: none; 
    font-weight: 300;
    padding: 0 1rem .3rem;
    cursor: pointer;
    font-size: 1rem;

    @media screen and (min-height: 700px) { 
      font-size: 1.3rem; 
      margin-bottom: .2rem;
    }
    // @include breakpoint($medium) { font-size: 1.3rem; }
    
    // @include breakpoint($large) { font-size: 1.8rem; }

    &:hover { background-color: hsla(var(--white-hsl), .05); }
  }
}

@include breakpoint($small-only) {
  .off-canvas__heading { font-size: 1.1rem; }
  .off-canvas--topics  { font-size: 1.3rem; }
}

// @include breakpoint($medium) {
//   .off-canvas--updates,
//   .off-canvas--archive {
//     .off-canvas__heading {
//       font-size: 2.5rem;
//       letter-spacing: 0.72px;
//     }

//     .off-canvas__item { 
//       font-size: 2.5rem;
//       letter-spacing: 0.5px;
//     }
//   }

//   .off-canvas--topics {
//     .off-canvas__heading {
//       font-size: 2.5rem;
//       letter-spacing: 0.72px;
//     }

//     .off-canvas__item { 
//       font-size: 3rem;
//       letter-spacing: 0.96px;
//     }
//   }

//   .off-canvas--about {
//     .off-canvas__heading {
//       font-size: 2rem;
//       letter-spacing: 0.72px;
//     }

//     .off-canvas__item { 
//       font-size: 1.7rem;
//       letter-spacing: 0.96px;
//     }
//   }
// }
  • URL: /components/raw/off-canvas/off-canvas.scss
  • Filesystem Path: src/components/04-modules/off-canvas/off-canvas.scss
  • Size: 2.8 KB

There are no notes for this item.