OCDE - Pattern Library v1.13.0

Brand Voice: Dialog (Example) 

<div class="brandvoice brandvoice-dialog">
    <button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
</div>
 
<div class="{{render '@brandvoice--dialog'}}">
  <button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
</div>
 
{
  "modifier": "brandvoice-dialog"
}
  • Content: 
    .brandvoice {

}

.brandvoice-sidebar {

  padding: $gridspacing * 3;

  h3 {
    @include textstyle-h1;
    border-bottom: 2px solid rgba($color-interactive1, .08);
    padding-bottom: $gridspacing * 2;
  }

  @media (min-width: $media-tablet) {

    padding-top: $gridspacing * 2;

    h3 {
      @include textstyle-title2;
    }
  }

  @media (min-width: $media-desktop) {
    padding: $gridspacing * 4;
    padding-bottom: 0;

    h3 {
      @include textstyle-h1;
      border-bottom: none;
    }
  }

  @media (min-width: $media-hd) {
    h3 {
      @include textstyle-title2;
    }
  }
}

.brandvoice-dialog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $brandvoice-dialog-height;
  padding: 0 ($gridspacing * 2);

  button {
    margin-left: auto;
  }
}
  • URL: /components/raw/brandvoice/_brandvoice.scss
  • Filesystem Path: src/scss/02-modules/brandvoice/_brandvoice.scss
  • Size: 802 Bytes

No notes defined.