agnosticui-core 2.0.0-alpha.20 → 2.0.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{VueInput.vue_vue_type_script_setup_true_lang-fMqllTsp.js → VueInput.vue_vue_type_script_setup_true_lang-wYdAqg-i.js} +2 -1
- package/dist/components/Input/vue/VueInput.js +1 -1
- package/dist/components/Input/vue/VueInput.vue.d.ts.map +1 -1
- package/dist/components/Input/vue/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Drawer/v1/dialog--drawer-bottom.hbs +48 -0
- package/src/components/Drawer/v1/dialog--drawer-end.hbs +48 -0
- package/src/components/Drawer/v1/dialog--drawer-start.hbs +48 -0
- package/src/components/Drawer/v1/dialog--drawer-top.hbs +48 -0
- package/src/components/Drawer/v1/dialog-demo.css +13 -0
- package/src/components/Drawer/v1/dialog.config.yml +5 -0
- package/src/components/Drawer/v1/dialog.css +99 -0
- package/src/components/Drawer/v1/dialog.hbs +48 -0
- package/src/components/Drawer/v1/drawer-animations.css +52 -0
- package/src/components/Drawer/v1/drawer.css +50 -0
- package/src/components/Input/vue/VueInput.vue +1 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as b, createElementBlock as n, openBlock as d, mergeProps as y, createCommentVNode as o, renderSlot as u } from "vue";
|
|
2
2
|
import "./components/Input/core/Input.js";
|
|
3
|
-
const g = [".value", ".labelHidden", ".noLabel", ".capsule", ".rounded", ".underlined", ".underlinedWithBackground", ".inline", ".required", ".disabled", ".readonly", ".invalid", "type", "placeholder", "label", "ariaLabel", "helpText", "errorMessage", "size", "rows", "cols"], B = {
|
|
3
|
+
const g = ["name", ".value", ".labelHidden", ".noLabel", ".capsule", ".rounded", ".underlined", ".underlinedWithBackground", ".inline", ".required", ".disabled", ".readonly", ".invalid", "type", "placeholder", "label", "ariaLabel", "helpText", "errorMessage", "size", "rows", "cols"], B = {
|
|
4
4
|
key: 0,
|
|
5
5
|
slot: "addon-left"
|
|
6
6
|
}, m = {
|
|
@@ -49,6 +49,7 @@ const g = [".value", ".labelHidden", ".noLabel", ".capsule", ".rounded", ".under
|
|
|
49
49
|
a("blur", l);
|
|
50
50
|
};
|
|
51
51
|
return (l, t) => (d(), n("ag-input", y({
|
|
52
|
+
name: e.name,
|
|
52
53
|
".value": e.value,
|
|
53
54
|
".labelHidden": e.labelHidden,
|
|
54
55
|
".noLabel": e.noLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VueInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/vue/VueInput.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"VueInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/vue/VueInput.vue"],"names":[],"mappings":"AA2CA;AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,eAAe,CAAC;AAEvB;;;;;GAKG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,UAAU,EACV,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAC1D;CAAG;AAwFN,iBAAS,cAAc;0BAsFY,GAAG;2BACF,GAAG;EAGtC;AAcD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-bottom"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-bottom"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-end"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-end"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-start"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-start"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog drawer-top"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="drawer-end-title"
|
|
5
|
+
aria-describedby="drawer-end-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content drawer-content drawer-slide-top"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="drawer-end-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="drawer-end-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open drawer
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.dialog h1 {
|
|
2
|
+
margin: 0;
|
|
3
|
+
|
|
4
|
+
/* Since this is in a modal we want to force it smaller */
|
|
5
|
+
font-size: var(--agnostic-h3);
|
|
6
|
+
font-weight: 400;
|
|
7
|
+
line-height: 1;
|
|
8
|
+
margin-block-end: var(--fluid-16);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.dialog-form-demo > input {
|
|
12
|
+
margin-block-end: var(--fluid-24);
|
|
13
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
title: Dialog
|
|
2
|
+
notes: |
|
|
3
|
+
Dialog is a base-level implementation of a dialog component that can/will be leveraged for other components like popover, modal, menu, etc. Currently, the demo here is utilizing Kitty Giraudel's [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog) which is a very clean styling-agnostic JavaScript implementation that supports what you'd expect from an a11y-compliant dialog and has saved me a lot of time while I figure out the styles. Thus, the structure should be consistent with what `a11y-dialog` recommends in terms of markup structure. The `a11y-dialog` script is currently pulled in via CDN.
|
|
4
|
+
|
|
5
|
+
To be absolutely 100% clear, if you utilize AgnosticUI's CSS package, you only get the HTML/CSS for dialog. The functionality in terms of showing / dismissing the dialog, navigating with your keyboard, etc., is being handled by [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog). The AgnosticUI framework implementations (React, Angular, Svelte, Vue, etc.) likely WILL handle said functionality once they've been implemented (not the case at time of writing).
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
.dialog,
|
|
2
|
+
.dialog-overlay {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
right: 0;
|
|
6
|
+
bottom: 0;
|
|
7
|
+
left: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.dialog {
|
|
11
|
+
z-index: 1001;
|
|
12
|
+
display: flex;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.dialog[aria-hidden="true"] {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.dialog-overlay {
|
|
20
|
+
background-color: rgb(50 50 50 / 60%);
|
|
21
|
+
animation: fade-in var(--agnostic-timing-fast) both;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.dialog-content {
|
|
25
|
+
background-color: var(--agnostic-light);
|
|
26
|
+
margin: auto;
|
|
27
|
+
z-index: 1001;
|
|
28
|
+
position: relative;
|
|
29
|
+
padding: var(--fluid-16);
|
|
30
|
+
max-width: 90%;
|
|
31
|
+
width: 600px;
|
|
32
|
+
border-radius: var(--agnostic-radius);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.dialog-fade-in {
|
|
36
|
+
animation: fade-in var(--agnostic-timing-fast) both;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dialog-slide-up {
|
|
40
|
+
animation: slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Cannot use two separate CSS classes with animation: foo, bar
|
|
45
|
+
* as the later class will overwrite the first (so this combines)
|
|
46
|
+
*/
|
|
47
|
+
.dialog-slide-up-fade-in {
|
|
48
|
+
animation:
|
|
49
|
+
fade-in var(--agnostic-timing-fast) both,
|
|
50
|
+
slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media screen and (min-width: 700px) {
|
|
54
|
+
.dialog-content {
|
|
55
|
+
padding: var(--fluid-32);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@keyframes fade-in {
|
|
60
|
+
from {
|
|
61
|
+
opacity: 0%;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes slide-up {
|
|
66
|
+
from {
|
|
67
|
+
transform: translateY(10%);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Shared with AgnosticUI close buton so only need positioning and transition */
|
|
72
|
+
.dialog-close {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: var(--fluid-8);
|
|
75
|
+
right: var(--fluid-8);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@media (prefers-reduced-motion), (update: slow) {
|
|
79
|
+
.dialog-slide-up-fade-in,
|
|
80
|
+
.dialog-fade-in,
|
|
81
|
+
.dialog-slide-up,
|
|
82
|
+
.dialog-content {
|
|
83
|
+
transition-duration: 0.001ms !important;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@media only screen and (min-width: 576px) {
|
|
88
|
+
.dialog-close {
|
|
89
|
+
top: var(--fluid-12);
|
|
90
|
+
right: var(--fluid-12);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@media screen and (min-width: 768px) {
|
|
95
|
+
.dialog-close {
|
|
96
|
+
top: var(--fluid-16);
|
|
97
|
+
right: var(--fluid-16);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="dialog"
|
|
2
|
+
id="dialog-example"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
aria-labelledby="dialog-example-title"
|
|
5
|
+
aria-describedby="dialog-example-description">
|
|
6
|
+
<div class="dialog-overlay"
|
|
7
|
+
data-a11y-dialog-hide></div>
|
|
8
|
+
<div class="dialog-content"
|
|
9
|
+
role="document">
|
|
10
|
+
<div class="mbs16 mbe24 mis16 mie16">
|
|
11
|
+
<button data-a11y-dialog-hide
|
|
12
|
+
class="close-button close-button-large dialog-close"
|
|
13
|
+
aria-label="Close this dialog window">
|
|
14
|
+
<svg class="close"
|
|
15
|
+
viewBox="0 0 24 24"
|
|
16
|
+
aria-hidden="true">
|
|
17
|
+
<path fill="currentColor"
|
|
18
|
+
d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
|
|
19
|
+
</svg>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<h1 id="dialog-example-title">Subscribe to our newsletter</h1>
|
|
23
|
+
<p id="dialog-example-description">
|
|
24
|
+
Fill in the form below to receive our newsletter!
|
|
25
|
+
</p>
|
|
26
|
+
<form class="dialog-form-demo">
|
|
27
|
+
<label class="label"
|
|
28
|
+
for="email">Email (required)</label>
|
|
29
|
+
<input class="input input-rounded"
|
|
30
|
+
type="email"
|
|
31
|
+
name="EMAIL"
|
|
32
|
+
id="email"
|
|
33
|
+
placeholder="john.doe@gmail.com"
|
|
34
|
+
required />
|
|
35
|
+
<button class="btn btn-primary btn-rounded btn-block"
|
|
36
|
+
type="submit"
|
|
37
|
+
name="button">Sign up</button>
|
|
38
|
+
</form>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button type="button"
|
|
44
|
+
class="btn btn-primary btn-bordered"
|
|
45
|
+
data-a11y-dialog-show="dialog-example">
|
|
46
|
+
Open the dialog
|
|
47
|
+
</button>
|
|
48
|
+
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Place these alongside the content like:
|
|
3
|
+
* <div class="dialog-content drawer-content drawer-slide-start"...
|
|
4
|
+
*/
|
|
5
|
+
.drawer-slide-start {
|
|
6
|
+
animation: slide-start var(--agnostic-timing-fast) ease-in-out;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.drawer-slide-end {
|
|
10
|
+
animation: slide-end var(--agnostic-timing-fast) ease-in-out;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.drawer-slide-bottom {
|
|
14
|
+
animation: slide-bottom var(--agnostic-timing-fast) ease-in-out;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.drawer-slide-top {
|
|
18
|
+
animation: slide-top var(--agnostic-timing-fast) ease-in-out;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes slide-top {
|
|
22
|
+
from {
|
|
23
|
+
transform: translateY(-100%);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@keyframes slide-bottom {
|
|
28
|
+
from {
|
|
29
|
+
transform: translateY(100%);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@keyframes slide-start {
|
|
34
|
+
from {
|
|
35
|
+
transform: translateX(-100%);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@keyframes slide-end {
|
|
40
|
+
from {
|
|
41
|
+
transform: translateX(100%);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media (prefers-reduced-motion), (update: slow) {
|
|
46
|
+
.drawer-slide-top,
|
|
47
|
+
.drawer-slide-bottom,
|
|
48
|
+
.drawer-slide-start,
|
|
49
|
+
.drawer-slide-end {
|
|
50
|
+
transition-duration: 0.001ms !important;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
.drawer-start {
|
|
2
|
+
right: initial;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.drawer-start[aria-hidden] {
|
|
6
|
+
transform: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.drawer-end {
|
|
10
|
+
left: initial;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.drawer-end[aria-hidden] {
|
|
14
|
+
transform: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.drawer-top {
|
|
18
|
+
bottom: initial;
|
|
19
|
+
transform: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.drawer-top[aria-hidden] {
|
|
23
|
+
transform: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.drawer-bottom {
|
|
27
|
+
top: initial;
|
|
28
|
+
transform: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.drawer-bottom[aria-hidden] {
|
|
32
|
+
transform: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.drawer-content {
|
|
36
|
+
margin: initial;
|
|
37
|
+
max-width: initial;
|
|
38
|
+
border-radius: initial;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.drawer-start .drawer-content,
|
|
42
|
+
.drawer-end .drawer-content {
|
|
43
|
+
width: 25rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.drawer-top .drawer-content,
|
|
47
|
+
.drawer-bottom .drawer-content {
|
|
48
|
+
height: 25vh;
|
|
49
|
+
width: 100%;
|
|
50
|
+
}
|