<!--
  Dialog container related notes:
  - It is not the actual dialog window, just the container with which the script interacts.
  - It has to have the `aria-hidden="true"` attribute.
  - It can have a different id than `my-accessible-dialog`.
-->
<div id="my-accessible-dialog" aria-hidden="xtrue" class="dialog">

    <!--
    Overlay related notes:
    - It has to have the `tabindex="-1"` attribute.
    - It doesn’t have to have the `data-a11y-dialog-hide` attribute, however this is recommended. It hides the dialog when clicking outside of it.
  -->
    <div tabindex="-1" class="dialog-overlay" data-a11y-dialog-hide></div>

    <!--
    Dialog window content related notes:
    - It is the actual visual dialog element.
    - It has to have the `role="dialog"` attribute.
    - It doesn’t have to have the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
    - It doesn’t have to have a direct child with the `role="document"`, however this is recommended.
  -->
    <div role="dialog" aria-labelledby="dialog-title" class="dialog-content">
        <div role="document" class="dialog-body">

            <!--
          Dialog title related notes:
          - It should have a different content than `Dialog Title`.
          - It can have a different id than `dialog-title`.
          - It does not have to have the `tabindex="0"` attribute however it is recommended so the dialog doesn’t jump directly to a field, displaying keyboard on mobiles.
        -->
            <h1 id="dialog-title" tabindex="0">Dialog Title</h1>

            <!--
          Here lives the main content of the dialog.
        -->

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                                    laborum.

        </div>
        <!--
        Closing button related notes:
        - It does have to have the `type="button"` attribute.
        - It does have to have the `data-a11y-dialog-hide` attribute.
        - It does have to have an aria-label attribute if you use an icon as content.
      -->
        <button type="button" data-a11y-dialog-hide aria-label="Close this dialog window" class="dialog-close">
        <svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
      </button>
    </div>
</div>
<!--
  Dialog container related notes:
  - It is not the actual dialog window, just the container with which the script interacts.
  - It has to have the `aria-hidden="true"` attribute.
  - It can have a different id than `my-accessible-dialog`.
-->
<div id="my-accessible-dialog" aria-hidden="xtrue" class="dialog">

  <!--
    Overlay related notes:
    - It has to have the `tabindex="-1"` attribute.
    - It doesn’t have to have the `data-a11y-dialog-hide` attribute, however this is recommended. It hides the dialog when clicking outside of it.
  -->
  <div tabindex="-1" class="dialog-overlay" data-a11y-dialog-hide></div>

  <!--
    Dialog window content related notes:
    - It is the actual visual dialog element.
    - It has to have the `role="dialog"` attribute.
    - It doesn’t have to have the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
    - It doesn’t have to have a direct child with the `role="document"`, however this is recommended.
  -->
  <div role="dialog" aria-labelledby="dialog-title" class="dialog-content">
    <div role="document" class="dialog-body">
      
        <!--
          Dialog title related notes:
          - It should have a different content than `Dialog Title`.
          - It can have a different id than `dialog-title`.
          - It does not have to have the `tabindex="0"` attribute however it is recommended so the dialog doesn’t jump directly to a field, displaying keyboard on mobiles.
        -->
        <h1 id="dialog-title" tabindex="0">Dialog Title</h1>

        <!--
          Here lives the main content of the dialog.
        -->

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


      
      </div>
    <!--
        Closing button related notes:
        - It does have to have the `type="button"` attribute.
        - It does have to have the `data-a11y-dialog-hide` attribute.
        - It does have to have an aria-label attribute if you use an icon as content.
      -->
      <button type="button" data-a11y-dialog-hide aria-label="Close this dialog window" class="dialog-close">
        {{ icon 'core/cancel' 24 }}
      </button>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    /* -------------------------------------------------------------------------- *\
     * Necessary styling for the dialog to work
     * -------------------------------------------------------------------------- */
    
    .dialog[aria-hidden="true"],
    .dialog [aria-hidden="true"] {
      display: none;
    }
    
    body.dialog-open {
        overflow: hidden;
    }
    
    /* -------------------------------------------------------------------------- *\
     * Styling to make the dialog look like a dialog
     * -------------------------------------------------------------------------- */
    
    .dialog-overlay {
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.66);
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    
    .dialog-content {
      background-color: rgb(255, 255, 255);
      z-index: 3;
      position: fixed;
      top: 50%;
      left: 50%;
      max-height: 80%;
      
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .dialog-content {
          overflow: scroll;
        }
    }
    /* -------------------------------------------------------------------------- *\
     * Extra dialog styling to make it shiny
     * -------------------------------------------------------------------------- */
    
    
    .dialog-content {
    	max-width: 90%;
    	width: 80%;
    	border-radius: 2px;
    	display: flex;
    }
    
    .dialog-body {
    	overflow: auto;	
    	max-height: 80%;
    	width: 100%;
    	border-radius: 2px;
    	padding: $half-gutter $half-gutter 0 $half-gutter;
    }
    
    .dialog-content.role-confirm {
    	width: 400px;
    	top: 33%;
    	-webkit-transform: translate(-50%, -33%);
      	-ms-transform: translate(-50%, -33%);
      	transform: translate(-50%, -33%);
    }
    
    @media screen and (min-width: 700px) {
      .dialog-body {
        
      }
    }
    
    .dialog-overlay {
      background-color: rgba(43, 46, 56, 0.9);
      opacity: 0.9;
    }
    
    .dialog h1 {
      @include font-scale(xl, helvetica);
    }
    
    .dialog p {
      @include font-scale(m, helvetica);
    }
    
    .dialog-close {
      position: absolute;
      top: -1.5em;
      right: -0.5em;
      border: 0;
      padding: 0;
      background-color: transparent;
      font-weight: bold;
      font-size: 1.25em;
      // width: .8em;
      // height: .8em;
      text-align: center;
      cursor: pointer;
      transition: 0.15s;
      z-index: 3;
    }
    
    .dialog-close svg {
    	fill: rgba(255, 255, 255, 1);
    }
    
    @media screen and (min-width: 700px) {
      .dialog-close {
        right: -1.5em;
      }
    }
    
    .confirm-dialog-buttons {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	/*margin: $main-gutter (-$main-gutter) 0 (-$main-gutter);*/
    	padding: $half-gutter ($main-gutter+$half-gutter);
    	border-top: 1px solid palette(ui);
    }
    
    .confirm-dialog-buttons a.button {
    	margin-right: .5em;
    }
    
    .confirm-dialog-buttons a {
    	margin-left: .5em;
    	color: palette(type, primary);
       	border-bottom: 1px solid palette(type, primary-light);
       	text-decoration: none;
    }
    
    /* ---- FORMS ---- */
    
    .dialog .field-wrap {
    	padding-left: 0;
    }
  • URL: /components/raw/modal-dialog/modal-dialog.scss
  • Filesystem Path: src/components/16-dialogs/02-molecules/01-modal-dialog/modal-dialog.scss
  • Size: 2.9 KB
  • Handle: @modal-dialog
  • Preview:
  • Filesystem Path: src/components/16-dialogs/02-molecules/01-modal-dialog/modal-dialog.hbs

There are no notes for this item.