Dialog componentAvailable since EcoComposer 2.1
The default values are :
modal--btn-close--right : 1rem * theming.$font-size,
modal--btn-close--top : 1rem * theming.$font-size,
modal--btn-close--color : 'modal--btn-close--color',
modal--btn-close--font-size : 1rem * theming.$font-size,
modal--container--element--border-radius : 1rem * theming.$font-size,
modal--container--element--box-shadow : 'modal--container--element--box-shadow',
modal--container--element--background-color : 'modal--container--element--background-color',
modal--container--element--label--color : 'modal--container--element--label--color',
modal--container--element--padding : 2rem * theming.$font-size,
print : false,
suffix : '',
themes : (
light : (
default--modal--btn-close--color : #fff,
default--modal--container--element--background-color : #eee,
default--modal--container--element--box-shadow : 0 0 3px #000,
default--modal--container--element--label--color : #333
),
dark : (
default--modal--btn-close--color : #fff,
default--modal--container--element--background-color : #444,
default--modal--container--element--box-shadow : 0 0 3px #000,
default--modal--container--element--label--color : #ccc
)
) We can implement it that way :
@include dialog.create();
@include dialog.create(
(
'suffix' : '-2',
'modal--container--element--border-radius' : 5px
)
); We can implement it that way :
<section id=dialog--example>
<a href=#modal class="ripple modal--btn--open" role=button>Contact us!</a>
<div id=modal class=modal--container>
<div class=modal--container--element>
<a href=# role=button class="ripple-2 modal--btn--close" aria-label=Close>X</a>
<h1>Contact</h1>
<div class=dialog--group>
<label for=dialog--subject>Subject</label>
<input id=dialog--subject name=dialog--subject/>
</div>
<label for=dialog--message>Message</label>
<textarea id=dialog--message name=dialog--message></textarea>
<a href=# class="ripple modal--btn--send margin-t10b20" role=button>Send</a>
</div>
</div>
</section>