OCDE - Pattern Library v1.13.0

Dialog: Select Dialog (Example) 

<div class="dialog dialog-select dialog-is-open l-dialog" id="dialog" tabindex="-1">
    <div class="dialog-x-content">

        <nav class="sidebar sidebar-dialog ">
            <div class="brandvoice brandvoice-dialog">
                <h3>Your results (9)</h3>
                <button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
            </div>

            <button class="sidebaroption sidebaroption-is-active" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Child Development or Early Care and Education
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
                </span>
            </button>

            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Family and Consumer Sciences, General
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
                </span>
            </button>

            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Food Processing and Related Technology
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
                </span>
            </button>

            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Gerontology
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Work with older adults.</span>
                </span>
            </button>

            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Hospitality
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
                </span>
            </button>

            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Natural Resources
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                </span>
            </button>

            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Nutrition, Foods, and Culinary Arts
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                </span>
            </button>

            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-container">
                    <span class="sidebaroption-x-title">
                        <span class="sidebaroption-x-highlight">
                            Public Relations
                            <svg class="sidebaroption-x-activeindicator">
                                <use xlink:href="#icon-pointerright"></use>
                            </svg>
                        </span>
                    </span>
                    <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                </span>
            </button>
        </nav>

    </div>
</div>
 
<div class="{{render '@dialog--select'}} {{render '@l-dialog'}}" id="dialog" tabindex="-1">
  <div class="dialog-x-content">


    <nav class="{{render '@sidebar--dialog'}}">
      <div class="{{render '@brandvoice--dialog'}}">
        <h3>Your results (9)</h3>
        <button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
      </div>

      <button class="sidebaroption sidebaroption-is-active" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Child Development or Early Care and Education
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
        </span>
      </button>

      <button class="sidebaroption" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Family and Consumer Sciences, General
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span
            class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
        </span>
      </button>

      <button class="sidebaroption" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Food Processing and Related Technology
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
        </span>
      </button>

      <button class="sidebaroption" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Gerontology
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span class="sidebaroption-x-body">Work with older adults.</span>
        </span>
      </button>

      <button class="sidebaroption" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Hospitality
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
        </span>
      </button>

      <button class="sidebaroption" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Natural Resources
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </span>
      </button>

      <button class="sidebaroption" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Nutrition, Foods, and Culinary Arts
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </span>
      </button>

      <button class="sidebaroption" type="button">
        <span class="sidebaroption-x-container">
          <span class="sidebaroption-x-title">
            <span class="sidebaroption-x-highlight">
              Public Relations
              <svg class="sidebaroption-x-activeindicator">
                <use xlink:href="#icon-pointerright"></use>
              </svg>
            </span>
          </span>
          <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </span>
      </button>
    </nav>


  </div>
</div>
 
/* No context defined. */
  • Content: 
    .dialog {
  // align-items: safe center;
  background-color: rgba($color-dark1, .5);
  box-sizing: border-box;
  display: flex;
  // justify-content: safe center;
  opacity: 0;
  // overflow-y: auto;
  pointer-events: none;
  transition: opacity $transition-duration $transition-easing;

  .dialog-x-content {
    // background-color: $color-light1;
    height: 100%;
    // overflow-x: hidden;
    // overflow-y: auto;
    position: relative;
    width: 100%;
  }

  .dialog-x-close {
    position: absolute;
    right: $gridspacing;
    top: $gridspacing;
  }

  &.dialog-is-open {
    opacity: 1;
    pointer-events: auto;
  }
}


.dialog-select {
  .dialog-x-content {
    margin: 0 auto;
  }

  @media (min-width: $sidebar-max-width) {
    padding-top: $gridspacing * 10;
  }
}
  • URL: /components/raw/dialog/_dialog.scss
  • Filesystem Path: src/scss/02-modules/dialog/_dialog.scss
  • Size: 783 Bytes

No notes defined.