OCDE - Pattern Library v1.13.0

Sidebar: Desktop (Example) 

<nav class="sidebar sidebar-desktop ">

    <div class="sidebar-x-options">
        <div class="brandvoice brandvoice-sidebar">
            <h3>Hospitality, Tourism, and Recreation</h3>
        </div>

        <button class="sidebaroption sidebaroption-is-active" type="button">
            <span class="sidebaroption-x-title">Child Development or Early Care and Education</span>
            <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
        </button>
        <button class="sidebaroption" type="button">
            <span class="sidebaroption-x-title">Family and Consumer Sciences, General</span>
            <span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
        </button>
        <button class="sidebaroption" type="button">
            <span class="sidebaroption-x-title">Food Processing and Related Technology</span>
            <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
        </button>
        <button class="sidebaroption" type="button">
            <span class="sidebaroption-x-title">Gerontology</span>
            <span class="sidebaroption-x-body">Work with older adults.</span>
        </button>
        <button class="sidebaroption" type="button">
            <span class="sidebaroption-x-title">Hospitality</span>
            <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
        </button>
        <button class="sidebaroption" type="button">
            <span class="sidebaroption-x-title">Natural Resources</span>
            <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </button>
        <button class="sidebaroption" type="button">
            <span class="sidebaroption-x-title">Nutrition, Foods, and Culinary Arts</span>
            <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </button>
        <button class="sidebaroption" type="button">
            <span class="sidebaroption-x-title">Public Relations</span>
            <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </button>
    </div>

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

  <div class="sidebar-x-options">
    <div class="{{render '@brandvoice--sidebar'}}">
      <h3>Hospitality, Tourism, and Recreation</h3>
    </div>

    <button class="sidebaroption sidebaroption-is-active" type="button">
      <span class="sidebaroption-x-title">Child Development or Early Care and Education</span>
      <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
    </button>
    <button class="sidebaroption" type="button">
      <span class="sidebaroption-x-title">Family and Consumer Sciences, General</span>
      <span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
    </button>
    <button class="sidebaroption" type="button">
      <span class="sidebaroption-x-title">Food Processing and Related Technology</span>
      <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
    </button>
    <button class="sidebaroption" type="button">
      <span class="sidebaroption-x-title">Gerontology</span>
      <span class="sidebaroption-x-body">Work with older adults.</span>
    </button>
    <button class="sidebaroption" type="button">
      <span class="sidebaroption-x-title">Hospitality</span>
      <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
    </button>
    <button class="sidebaroption" type="button">
      <span class="sidebaroption-x-title">Natural Resources</span>
      <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
    </button>
    <button class="sidebaroption" type="button">
      <span class="sidebaroption-x-title">Nutrition, Foods, and Culinary Arts</span>
      <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
    </button>
    <button class="sidebaroption" type="button">
      <span class="sidebaroption-x-title">Public Relations</span>
      <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
    </button>
  </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.