OCDE - Pattern Library v1.13.0

Sidebar: Desktop Empty (Example) 

<nav class="sidebar sidebar-desktop ">

    <div class="sidebar-x-empty">
        <div class="sidebar-x-emptytext1 l-flex">
            <img src="../../assets/images/thinking-face.png" alt="thinking face" />
            <div class="sidebar-x-emptybody">
                <p>
                    <strong>
                        No results found for this location. Try searching in a wider area.
                    </strong>
                </p>
                <p>
                    Program Finder currently doesn’t cover every county, but we’re
                    expanding across California! If you don’t see results for your area,
                    check back soon.
                </p>
            </div>
        </div>
    </div>

</nav>
 
<nav class="{{render "@sidebar--desktop"}}">

  <div class="sidebar-x-empty">
    <div class="sidebar-x-emptytext1 l-flex">
      <img
        src="{{path "/assets/images/thinking-face.png"}}"
        alt="thinking face"
      />
      <div class="sidebar-x-emptybody">
        <p>
          <strong>
            No results found for this location. Try searching in a wider area.
          </strong>
        </p>
        <p>
          Program Finder currently doesn’t cover every county, but we’re
          expanding across California! If you don’t see results for your area,
          check back soon.
        </p>
      </div>
    </div>
  </div>

</nav>
 
/* No context defined. */
  • Content: 
    .sidebar {
  background-color: $color-light1;
  height: 100%;

  .sidebar-x-options {
    overflow-y: auto;
    max-height: 100%;
    padding: 8px;
    padding-bottom: $gridspacing * 3;
  }

  .sidebar-x-empty {
    margin-bottom: $gridspacing * 4;
    padding-left: $gridspacing;
    padding-right: $gridspacing * 2;
  }

  .sidebar-x-emptytext1{
    gap: 1rem;

    img {
      height: $gridspacing * 3;
      position: relative;
      top: $gridspacing;
      width: $gridspacing * 3;
    }

    .sidebar-x-emptybody > * + * {
      margin-top: $gridspacing;
    }
  }

  .sidebar-x-emptybacklink {
    display: inline-block;
    margin-top: $gridspacing;
  }
}

.sidebar-desktop {
  max-width: 320px;

  .sidebar-x-options {
    padding-top: 0;
  }

  @media (min-width: $media-hd) {
    max-width: $sidebar-max-width;
  }
}

.sidebar-dialog {
  margin-left: auto;
  margin-right: auto;
  max-width: $sidebar-max-width;

  .sidebar-x-options {
    height: calc(100% - #{$brandvoice-dialog-height});
  }

  nav {
    height: 100%;
    overflow-y: auto;
  }

  @media (min-width: $sidebar-max-width) {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }
}
  • URL: /components/raw/sidebar/_sidebar.scss
  • Filesystem Path: src/scss/02-modules/sidebar/_sidebar.scss
  • Size: 1.2 KB

No notes defined.