OCDE - Pattern Library v1.13.0

Dialog: Default + Is Open (Example) 

<div class="dialog dialog-is-open l-dialog" id="dialog" tabindex="-1">
    <div class="dialog-x-content">
        <button class="dialog-x-close" type="button" data-dialog="close" data-dialog-target="dialog">Close Dialog</button>
        <h1>HTML Ipsum Presents</h1>

        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

        <h2>Header Level 2</h2>

        <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
        </blockquote>

        <h3>Header Level 3</h3>

        <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ul>

        <pre><code>
    #header h1 a {
      display: block;
      width: 300px;
      height: 80px;
    }
    </code></pre>
    </div>
</div>
 
<div class="{{render '@dialog--isopen'}} {{render '@l-dialog'}}" id="dialog" tabindex="-1">
  <div class="dialog-x-content">
    <button class="dialog-x-close" type="button" data-dialog="close" data-dialog-target="dialog">Close Dialog</button>
    <h1>HTML Ipsum Presents</h1>

    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <h2>Header Level 2</h2>

    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>

    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

    <h3>Header Level 3</h3>

    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>

    <pre><code>
    #header h1 a {
      display: block;
      width: 300px;
      height: 80px;
    }
    </code></pre>
  </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.