tree: aa825c12487418cac0ae4d81452964c009be11ee [path history] [tgz]
  1. dialog.scss
  2. readme.md
node_modules/mdl-ext/src/dialog/readme.md

Dialog

Additional styling for <dialog>, based on the Google Chrome Dialog polyfill. @include 'node_modules/dialog-polyfill/dialog-polyfill.css' before using this in your SASS build.

Introduction

The Material Design Lite Ext (MDLEXT) mdlext-dialog class provides better control of the dialog backdrop.

Basic Usage

Refer to the Google Chrome Dialog polyfill documentaion amd the MDLEXT lightbox component.

Configuration options

The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to the dialog. The table below lists the available classes and their effects.

MDLEXT classEffectRemarks
mdlext-dialogDefines container as an MDLEXT componentRequired on <dialog> element

You can modify the dialog trough the following SASS variables.

SASS variableDescriptionRemarks
$mdlext-dialog-paddingDialog paddingdefault 0
$mdlext-dialog-background-colorDialog background colordefault transparent
$mdlext-dialog-backdrop-colorBackdrop color when dialog is opendefault rgba(0,0,0,0.8)
$mdlext-dialog-open-animationAnimation when dialog opensdefault .5s .2s forwards
$mdlext-dialog-backdrop-animationBackdrop animation when dialog opensdefault .2s forwards