d-md-components/dialog/views/index.html

A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).

<index: attributes="class">
  <div class="dmd-dialog mdl-shadow--16dp{{if animating}} dmd-dialog--animating{{/if}}{{if show}} dmd-dialog--showing{{/if}}{{if class}} {{class}}{{/if}}"
       style="z-index: {{options.zIndex || 300}};{{if origin && !show}}top: {{origin.y}}px; left: {{origin.x}}px{{/if}}">
    <div class="dmd-dialog---inner">
      {{if title}}
        <div class="dmd-dialog---title">
          {{title}}
        </div>
      {{/if}}
      <div class="dmd-dialog---content">
        {{@content}}
      </div>
    </div>
    <div class="dmd-dialog---actions">
      {{each actions as #action}}
        <button class="mdl-button {{typeof #action.class === 'string' ? #action.class : 'mdl-button--accent'}}" on-click="maybeHide(#action.text || #action)">
          {{#action.text || #action}}
        </button>
      {{/each}}
    </div>
  </div>
  {{if options.overlay}}
    <view is="overlay" as="overlay" options="{{
        {autohide: false,
         class:    options.overlay.class}
      }}" zIndex="{{options.zIndex -1 || 299}}" 
          on-click="overlayClicked()" />
  {{/if}}