@kyndryl-design-system/shidoka-applications 1.5.3 → 1.5.4
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/components/reusable/modal/modal.d.ts +1 -1
- package/components/reusable/modal/modal.d.ts.map +1 -1
- package/components/reusable/modal/modal.js +18 -3
- package/components/reusable/modal/modal.js.map +1 -1
- package/components/reusable/modal/modal.scss.js +31 -19
- package/components/reusable/modal/modal.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
|
|
|
8
8
|
* @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).
|
|
9
9
|
*/
|
|
10
10
|
export declare class Modal extends LitElement {
|
|
11
|
-
static styles: import("lit").CSSResultGroup;
|
|
11
|
+
static styles: import("lit").CSSResultGroup[];
|
|
12
12
|
/** Modal open state. */
|
|
13
13
|
open: boolean;
|
|
14
14
|
/** Modal size. `'auto'`, `'md'`, or `'lg'`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;GAKG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,iCAkBpB;IAEF,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,mCAAmC;IAEnC,UAAU,UAAS;IAEnB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAkEf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import n from"./modal.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import n from"./modal.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/close/32.js';import{css as d}from'./../../../external/@lit/reactive-element/css-tag.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.size="auto",this.titleText="",this.labelText="",this.okText="OK",this.cancelText="Cancel",this.destructive=!1,this.okDisabled=!1}render(){const e={modal:!0,"size--md":"md"===this.size,"size--lg":"lg"===this.size};return t`
|
|
2
2
|
<button class="anchor" @click=${this._openModal}>
|
|
3
3
|
<slot name="anchor"></slot>
|
|
4
4
|
</button>
|
|
@@ -13,7 +13,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
13
13
|
class="close"
|
|
14
14
|
@click=${e=>this._closeModal(e,"cancel")}
|
|
15
15
|
>
|
|
16
|
-
<kd-icon .icon=${
|
|
16
|
+
<kd-icon .icon=${r}></kd-icon>
|
|
17
17
|
</button>
|
|
18
18
|
|
|
19
19
|
<header>
|
|
@@ -52,5 +52,20 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
52
52
|
</div>
|
|
53
53
|
</form>
|
|
54
54
|
</dialog>
|
|
55
|
-
`}_openModal(){this.open=!0}_closeModal(e,t){(!this.beforeClose||this.beforeClose&&this.beforeClose(t))&&(this.open=!1,this._dialog.returnValue=t,this._emitCloseEvent(e))}_emitCloseEvent(e){const t=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("open")&&(this.open?this._dialog.showModal():this._dialog.close())}};
|
|
55
|
+
`}_openModal(){this.open=!0}_closeModal(e,t){(!this.beforeClose||this.beforeClose&&this.beforeClose(t))&&(this.open=!1,this._dialog.returnValue=t,this._emitCloseEvent(e))}_emitCloseEvent(e){const t=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("open")&&(this.open?this._dialog.showModal():this._dialog.close())}};c.styles=[n,d`
|
|
56
|
+
@supports (transition-behavior: allow-discrete) {
|
|
57
|
+
@starting-style {
|
|
58
|
+
dialog[open] {
|
|
59
|
+
opacity: 0;
|
|
60
|
+
transform: scale(0);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@starting-style {
|
|
65
|
+
dialog[open]::backdrop {
|
|
66
|
+
background-color: rgb(0, 0, 0, 0);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
`],e([i({type:Boolean})],c.prototype,"open",void 0),e([i({type:String})],c.prototype,"size",void 0),e([i({type:String})],c.prototype,"titleText",void 0),e([i({type:String})],c.prototype,"labelText",void 0),e([i({type:String})],c.prototype,"okText",void 0),e([i({type:String})],c.prototype,"cancelText",void 0),e([i({type:Boolean})],c.prototype,"destructive",void 0),e([i({type:Boolean})],c.prototype,"okDisabled",void 0),e([i({attribute:!1})],c.prototype,"beforeClose",void 0),e([l("dialog")],c.prototype,"_dialog",void 0),c=e([s("kyn-modal")],c);export{c as Modal};
|
|
56
71
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = ModalScss;\n\n /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n @property({ type: String })\n size = 'auto';\n\n /** Title/heading text, required. */\n @property({ type: String })\n titleText = '';\n\n /** Label text, optional. */\n @property({ type: String })\n labelText = '';\n\n /** OK button text. */\n @property({ type: String })\n okText = 'OK';\n\n /** Cancel button text. */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Disables the primary button. */\n @property({ type: Boolean })\n okDisabled = false;\n\n /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </button>\n\n <dialog\n class=\"${classMap(classes)}\"\n autofocus\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n\n <header>\n <div>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n </header>\n\n <form method=\"dialog\" class=\"body\">\n <slot></slot>\n\n <div class=\"actions\">\n <kd-button\n value=\"ok\"\n ?destructive=${this.destructive}\n ?disabled=${this.okDisabled}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kd-button>\n\n <kd-button\n value=\"cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kd-button>\n\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = [\n ModalScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n opacity: 0;\n transform: scale(0);\n }\n }\n\n @starting-style {\n dialog[open]::backdrop {\n background-color: rgb(0, 0, 0, 0);\n }\n }\n }\n `,\n ];\n\n /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n @property({ type: String })\n size = 'auto';\n\n /** Title/heading text, required. */\n @property({ type: String })\n titleText = '';\n\n /** Label text, optional. */\n @property({ type: String })\n labelText = '';\n\n /** OK button text. */\n @property({ type: String })\n okText = 'OK';\n\n /** Cancel button text. */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Disables the primary button. */\n @property({ type: Boolean })\n okDisabled = false;\n\n /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </button>\n\n <dialog\n class=\"${classMap(classes)}\"\n autofocus\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n\n <header>\n <div>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n </header>\n\n <form method=\"dialog\" class=\"body\">\n <slot></slot>\n\n <div class=\"actions\">\n <kd-button\n value=\"ok\"\n ?destructive=${this.destructive}\n ?disabled=${this.okDisabled}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kd-button>\n\n <kd-button\n value=\"cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kd-button>\n\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"ghCAiBO,IAAMA,EAAN,cAAoBC,EAApBC,kCAuBLC,KAAIC,MAAG,EAIPD,KAAIE,KAAG,OAIPF,KAASG,UAAG,GAIZH,KAASI,UAAG,GAIZJ,KAAMK,OAAG,KAITL,KAAUM,WAAG,SAIbN,KAAWO,aAAG,EAIdP,KAAUQ,YAAG,CAgHd,CApGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACP,WAA0B,OAAdX,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOU,CAAI;sCACuBZ,KAAKa;;;;;iBAK1BC,EAASJ;;;kBAGPK,GAAaf,KAAKgB,YAAYD,EAAG;;;;mBAIhCA,GAAaf,KAAKgB,YAAYD,EAAG;;2BAE1BE;;;;;cAKM,KAAnBjB,KAAKI,UACHQ,CAAI,uBAAuBZ,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;;;;;6BAUXH,KAAKO;0BACRP,KAAKQ;uBACPO,GAAaf,KAAKgB,YAAYD,EAAG;;gBAEzCf,KAAKK;;;;;;uBAMGU,GAAaf,KAAKgB,YAAYD,EAAG;;gBAEzCf,KAAKM;;;;;;;;;;;KAYlB,CAEOO,aACNb,KAAKC,MAAO,CACb,CAEOe,YAAYD,EAAUG,KAEzBlB,KAAKmB,aACLnB,KAAKmB,aAAenB,KAAKmB,YAAYD,MAEtClB,KAAKC,MAAO,EACZD,KAAKoB,QAAQF,YAAcA,EAC3BlB,KAAKqB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAalB,KAAKoB,QAAQF,YAC1BO,UAAWV,KAGff,KAAK0B,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf7B,KAAKC,KACPD,KAAKoB,QAAQU,YAEb9B,KAAKoB,QAAQW,QAGlB,GAjKelC,EAAAmC,OAAS,CACvBC,EACAC,CAAG;;;;;;;;;;;;;;;OAoBLC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLzC,EAAA0C,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJ3C,EAAA0C,UAAA,YAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH3C,EAAA0C,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH3C,EAAA0C,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJ3C,EAAA0C,UAAA,cAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACI3C,EAAA0C,UAAA,kBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACEzC,EAAA0C,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACCzC,EAAA0C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA5C,EAAA0C,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO7C,EAAA0C,UAAA,eAAA,GA7DH1C,EAAKsC,EAAA,CADjBQ,EAAc,cACF9C"}
|
|
@@ -44,10 +44,10 @@ dialog {
|
|
|
44
44
|
max-height: calc(100% - 32px);
|
|
45
45
|
}
|
|
46
46
|
dialog[open] {
|
|
47
|
-
animation: dialog-in
|
|
47
|
+
animation: dialog-in 400ms ease-out;
|
|
48
48
|
}
|
|
49
49
|
dialog::backdrop {
|
|
50
|
-
background:
|
|
50
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
51
51
|
}
|
|
52
52
|
dialog.size--md {
|
|
53
53
|
width: 384px;
|
|
@@ -56,6 +56,35 @@ dialog.size--lg {
|
|
|
56
56
|
width: 711px;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
@supports (transition-behavior: allow-discrete) {
|
|
60
|
+
dialog {
|
|
61
|
+
transition: opacity 400ms ease-out, transform 400ms ease-out, overlay 400ms ease-out allow-discrete, display 400ms ease-out allow-discrete;
|
|
62
|
+
opacity: 0;
|
|
63
|
+
transform: scale(0);
|
|
64
|
+
}
|
|
65
|
+
dialog::backdrop {
|
|
66
|
+
background-color: rgba(0, 0, 0, 0);
|
|
67
|
+
transition: display 400ms allow-discrete, overlay 400ms allow-discrete, background-color 400ms;
|
|
68
|
+
}
|
|
69
|
+
dialog[open] {
|
|
70
|
+
animation: none;
|
|
71
|
+
opacity: 1;
|
|
72
|
+
transform: scale(1);
|
|
73
|
+
}
|
|
74
|
+
dialog[open]::backdrop {
|
|
75
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
@keyframes dialog-in {
|
|
79
|
+
0% {
|
|
80
|
+
opacity: 0;
|
|
81
|
+
transform: scale(0);
|
|
82
|
+
}
|
|
83
|
+
100% {
|
|
84
|
+
opacity: 1;
|
|
85
|
+
transform: scale(1);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
59
88
|
button {
|
|
60
89
|
appearance: none;
|
|
61
90
|
background: none;
|
|
@@ -183,22 +212,5 @@ h1 {
|
|
|
183
212
|
display: flex;
|
|
184
213
|
align-items: center;
|
|
185
214
|
gap: 16px;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
@keyframes dialog-in {
|
|
189
|
-
0% {
|
|
190
|
-
opacity: 0;
|
|
191
|
-
transform: scale(0);
|
|
192
|
-
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
|
|
193
|
-
}
|
|
194
|
-
75% {
|
|
195
|
-
transform: scale(1.1);
|
|
196
|
-
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
|
|
197
|
-
}
|
|
198
|
-
100% {
|
|
199
|
-
opacity: 1;
|
|
200
|
-
transform: scale(1);
|
|
201
|
-
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
|
|
202
|
-
}
|
|
203
215
|
}`;export{e as default};
|
|
204
216
|
//# sourceMappingURL=modal.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|