From be7748153d03153c778acc738bcc73070496fb1b Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Mon, 7 Dec 2020 12:12:36 +0100
Subject: [PATCH] feat: modals, cf2021 modals, cf2021 actions
---
.../15-form-fields/13-textarea.mustache | 2 +-
.../02-cards/card-actions.mustache | 28 +++++
.../dropdown-button.mustache | 5 +-
.../01-molecules/21-modal/modal.mustache | 24 ++++
.../08-event-feed/event-feed.mustache | 14 +--
.../03-templates/cf2021/anonymous.mustache | 10 +-
.../03-templates/cf2021/chairman.mustache | 118 ++++++++++++------
.../03-templates/cf2021/user.mustache | 29 ++---
source/css/atoms/card.pcss | 9 ++
source/css/molecules/form-field.pcss | 2 +-
source/css/molecules/modal.pcss | 44 +++++++
source/css/style.pcss | 1 +
12 files changed, 215 insertions(+), 71 deletions(-)
create mode 100644 source/_patterns/01-molecules/02-cards/card-actions.mustache
create mode 100644 source/_patterns/01-molecules/21-modal/modal.mustache
create mode 100644 source/css/molecules/modal.pcss
diff --git a/source/_patterns/00-atoms/15-form-fields/13-textarea.mustache b/source/_patterns/00-atoms/15-form-fields/13-textarea.mustache
index 0e5eb88..a55d946 100644
--- a/source/_patterns/00-atoms/15-form-fields/13-textarea.mustache
+++ b/source/_patterns/00-atoms/15-form-fields/13-textarea.mustache
@@ -1 +1 @@
-<textarea class="text-input form-field__control {{ classes }}" value="" rows="10" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}></textarea>
+<textarea class="text-input form-field__control {{ classes }}" value="" rows="{{ rows }}{{^ rows }}10{{/ rows }}" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>{{ textareaContent }}</textarea>
diff --git a/source/_patterns/01-molecules/02-cards/card-actions.mustache b/source/_patterns/01-molecules/02-cards/card-actions.mustache
new file mode 100644
index 0000000..d460b4e
--- /dev/null
+++ b/source/_patterns/01-molecules/02-cards/card-actions.mustache
@@ -0,0 +1,28 @@
+<div class="card">
+ <div class="card__body">
+ <div class="flex items-center justify-between mb-4">
+ <h1 class="card-headline">UkonÄŤit rozpravu?</h1>
+ <button><i class="ico--close"></i></button>
+ </div>
+ <p class="card-body-text">Opravdu chcete ukonÄŤit rozpravu?</p>
+ </div>
+ <div class="card-actions space-x-1">
+ {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "UkonÄŤit") }}
+ {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+ </div>
+</div>
+
+
+<div class="card">
+ <div class="card__body">
+ <div class="flex items-center justify-between mb-4">
+ <h1 class="card-headline">UkonÄŤit rozpravu?</h1>
+ <button><i class="ico--close"></i></button>
+ </div>
+ <p class="card-body-text">Opravdu chcete ukonÄŤit rozpravu?</p>
+ </div>
+ <div class="card-actions card-actions--right space-x-1">
+ {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "UkonÄŤit") }}
+ {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+ </div>
+</div>
diff --git a/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache b/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
index 01264be..bdd083e 100644
--- a/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
+++ b/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
@@ -5,10 +5,7 @@
<i class="ico--chevron-down"></i>
<ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
<li class="dropdown-button__choice hover:bg-grey-125">
- <a class="block px-2 py-3" href="#">Přidat jako návrh postupu</a>
- </li>
- <li class="dropdown-button__choice hover:bg-grey-125">
- <a class="block px-2 py-3" href="#">PĹ™idat jako oznámenĂ</a>
+ <a class="block px-4 py-3" href="#">Přidat jako návrh postupu</a>
</li>
</ul>
</div>
diff --git a/source/_patterns/01-molecules/21-modal/modal.mustache b/source/_patterns/01-molecules/21-modal/modal.mustache
new file mode 100644
index 0000000..1e839ef
--- /dev/null
+++ b/source/_patterns/01-molecules/21-modal/modal.mustache
@@ -0,0 +1,24 @@
+<div class="modal__overlay hidden toggle-modal-sample-1" id="modal-sample-1">
+ <div class="modal__content" role="dialog">
+ <div class="modal__container w-full max-w-2xl" role="dialog">
+ <div class="modal__container-body">
+ {{> molecules-image-card }}
+ </div>
+ </div>
+ </div>
+</div>
+
+<button class="toggle-modal-sample-1">Toggle modal</button>
+
+<script>
+ var toggles = document.getElementsByClassName("toggle-modal-sample-1");
+ var modal = document.getElementById("modal-sample-1");
+
+ for (var i = 0; i < toggles.length; i++) {
+ toggles[i].addEventListener("click", function () {
+ modal.classList.toggle("hidden");
+ })
+
+ }
+
+</script>
diff --git a/source/_patterns/02-organisms/08-event-feed/event-feed.mustache b/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
index 4e5d8c2..53d2503 100644
--- a/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
+++ b/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
@@ -1,7 +1,7 @@
<div class="flex flex-col flex-1 overflow-hidden {{ classes }}{{^ classes }}h-64 max-w-lg{{/ classes }}">
<div class="overflow-hidden flex flex-1">
<div class="overflow-scroll h-full space-y-px">
- <div class="bg-yellow-100 p-3 border-orange-300 border-l-4">
+ <div class="bg-opacity-50 bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:55</div>
@@ -13,7 +13,7 @@
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 p-3 bg-yellow-100 border-green-300 border-l-4">
+ <div class="bg-opacity-50 bg-yellow-100 border-green-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:52</div>
@@ -25,7 +25,7 @@
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 p-3 border-blue-300 border-l-4">
+ <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:51</div>
@@ -37,7 +37,7 @@
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 p-3 border-red-600 border-l-4">
+ <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:43</div>
@@ -50,7 +50,7 @@
</div>
<span class="leading-tight mb-2">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 p-3 border-cyan-500 border-l-4">
+ <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:35</div>
@@ -62,7 +62,7 @@
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 p-3 border-orange-300 border-l-4">
+ <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
@@ -71,7 +71,7 @@
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 p-3 border-black border-l-4">
+ <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
diff --git a/source/_patterns/03-templates/cf2021/anonymous.mustache b/source/_patterns/03-templates/cf2021/anonymous.mustache
index 2e3a237..63320fa 100644
--- a/source/_patterns/03-templates/cf2021/anonymous.mustache
+++ b/source/_patterns/03-templates/cf2021/anonymous.mustache
@@ -43,7 +43,7 @@
</div>
<div class="space-y-6">
- <div class="flex items-start bg-yellow-100 p-2 -ml-2">
+ <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
@@ -135,8 +135,12 @@
</section>
</div>
<div>
- <h2 class="head-alt-base mb-4 pt-1">OznámenĂ</h2>
- {{> organisms-event-feed(classes: "w-full") }}
+ <div class="lg:card lg:elevation-10">
+ <div class="lg:card__body lg:pb-0">
+ <h2 class="head-alt-base mb-4 pt-1">OznámenĂ</h2>
+ </div>
+ {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-3") }}
+ </div>
</div>
</div>
diff --git a/source/_patterns/03-templates/cf2021/chairman.mustache b/source/_patterns/03-templates/cf2021/chairman.mustache
index c55c48d..05f5110 100644
--- a/source/_patterns/03-templates/cf2021/chairman.mustache
+++ b/source/_patterns/03-templates/cf2021/chairman.mustache
@@ -8,7 +8,10 @@
<i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
<ul class="dropdown__content whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-3 py-3" href="#"><i class="ico--bubbles mr-2"></i>UkonÄŤit rozpravu</a>
+ <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil mr-2"></i>Přejmenovat bod programu</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#" id="js-end-discussion"><i class="ico--bubbles mr-2"></i>UkonÄŤit rozpravu</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--switch mr-2"></i>UkonÄŤit bod programu</a>
@@ -55,7 +58,7 @@
</div>
<div class="space-y-6">
- <div class="flex items-start bg-yellow-100 p-2 -ml-2">
+ <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -133,7 +136,7 @@
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--bullhorn mr-1"></i> Vyhlásit procedurálnà návrh</a>
+ <a class="block px-2 py-3" href="#" id="js-announce-proposal"><i class="ico--bullhorn mr-1"></i> Vyhlásit procedurálnà návrh</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> OdmĂtnout procedurálnĂ návrh</a>
@@ -149,34 +152,7 @@
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
- <div class="flex-1">
- <div class="mb-1">
- <div class="flex justify-between">
- <div class="flex items-center">
- <span class="font-bold">{{ person.first }} {{ person.last }}</span>
- <span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
- <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
- {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
- {{> molecules-chip(classes: "chip--green-300 chip--condensed ml-2", cta: "Schválený")}}
- </div>
- <div class="flex items-center space-x-4">
- {{> molecules-thumbs }}
- <div class="dropdown dropdown--right">
- <i class="ico--dots-three-vertical cursor-pointer"></i>
- <ul class="dropdown__content text-xs whitespace-no-wrap">
- <li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <p class="text-black leading-normal">{{ excerpt.medium }}</p>
- </div>
- </div>
+
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
@@ -251,9 +227,9 @@
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
- <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+ <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
- {{> molecules-chip(classes: "chip--blue-300 chip--condensed ml-2", cta: "Vyhlášený")}}
+ {{> molecules-chip(classes: "chip--green-300 chip--condensed ml-2", cta: "Schválený")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
</div>
<div class="flex items-center space-x-4">
@@ -304,7 +280,7 @@
</div>
<div class="my-8 space-y-4">
- {{> molecules-textarea-field(nolabel: true) }}
+ {{> molecules-textarea-field(nolabel: true, placeholder: "VyplĹte text vašeho pĹ™ĂspÄ›vku", rows: 5) }}
<div class="space-x-4">
{{> molecules-dropdown-button(cta: "PĹ™idat pĹ™ĂspÄ›vek") }}
<span class="text-sm text-grey-200">Pro pokroÄŤilejšà formátovánĂ mĹŻĹľete pouĹľĂvat <a href="#" class="underline">Markdown</a>.</span>
@@ -313,10 +289,80 @@
</section>
</div>
<div>
- <h2 class="head-alt-base mb-4 pt-1">OznámenĂ</h2>
- {{> organisms-event-feed(classes: "w-full", action: "ico--trashcan") }}
+ <div class="lg:card lg:elevation-10">
+ <div class="lg:card__body lg:pb-0">
+ <h2 class="head-alt-base mb-4 pt-1">OznámenĂ</h2>
+ </div>
+ {{> organisms-event-feed(classes: "w-full", action: "ico--trashcan", itemPadding: "px-8 py-3") }}
+ <div class="lg:card__body">
+ {{> molecules-textarea-field(nolabel: true, placeholder: "VyplĹte text oznámenĂ", rows: 3) }}
+ {{> atoms-basic-button(cta: "PĹ™idat oznámenĂ", classes: "btn--black btn--hoveractive text-sm mt-2") }}
+ </div>
+ </div>
</div>
</div>
</article>
</div>
+
+<div class="modal__overlay hidden" id="js-announce-proposal-modal">
+ <div class="modal__content" role="dialog">
+ <div class="modal__container w-full max-w-xl" role="dialog">
+ <div class="modal__container-body">
+ <div class="card">
+ <div class="card__body">
+ <div class="flex items-center justify-between mb-4">
+ <h1 class="card-headline">Vyhlásit procedurálnà návrh</h1>
+ <button><i class="ico--close"></i></button>
+ </div>
+ <p class="card-body-text mb-2">Návrh mĹŻĹľete pĹ™ed vyhlášenĂm ještÄ› upravit. Pro pokroÄŤilĂ© formátovánĂ pouĹľijte Markdown.</p>
+ {{> molecules-textarea-field(nolabel: true, textareaContent: "lorem ipsum dolor sit amet") }}
+ </div>
+ <div class="card-actions card-actions--right space-x-2">
+ {{> atoms-basic-button(classes: "btn--blue-300 text-sm btn--hoveractive", cta: "Vyhlásit") }}
+ {{> atoms-basic-button(classes: "btn--grey-125 text-sm btn--hoveractive", cta: "Zrušit") }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="modal__overlay hidden" id="js-end-discussion-modal">
+ <div class="modal__content" role="dialog">
+ <div class="modal__container w-full max-w-md" role="dialog">
+ <div class="modal__container-body">
+ <div class="card">
+ <div class="card__body">
+ <div class="flex items-center justify-between mb-4">
+ <h1 class="card-headline">UkonÄŤit rozpravu?</h1>
+ <button><i class="ico--close"></i></button>
+ </div>
+ <p class="card-body-text">Opravdu chcete ukonÄŤit rozpravu?</p>
+ </div>
+ <div class="card-actions card-actions--right space-x-1">
+ {{> atoms-basic-button(classes: "btn--blue-300 text-sm btn--hoveractive", cta: "UkonÄŤit") }}
+ {{> atoms-basic-button(classes: "btn--red-600 text-sm btn--hoveractive", cta: "Zrušit") }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+ var announceProposalElem = document.getElementById("js-announce-proposal");
+ var announceProposalModalElem = document.getElementById("js-announce-proposal-modal");
+ var endDiscussionElem = document.getElementById("js-end-discussion");
+ var endDiscussionModalElem = document.getElementById("js-end-discussion-modal");
+
+ endDiscussionElem.addEventListener("click", function () {
+ endDiscussionModalElem.classList.remove("hidden");
+ return false;
+ })
+
+ announceProposalElem.addEventListener("click", function () {
+ announceProposalModalElem.classList.remove("hidden");
+ return false;
+ })
+</script>
diff --git a/source/_patterns/03-templates/cf2021/user.mustache b/source/_patterns/03-templates/cf2021/user.mustache
index 5642326..76e1e13 100644
--- a/source/_patterns/03-templates/cf2021/user.mustache
+++ b/source/_patterns/03-templates/cf2021/user.mustache
@@ -12,7 +12,7 @@
<section>
<div class="flex justify-between items-center mb-4">
- <h2 class="head-alt-base whitespace-no-wrap">PĹ™ĂspÄ›vky v rozpravÄ›</h2>
+ <h2 class="head-heavy-sm whitespace-no-wrap">PĹ™ĂspÄ›vky v rozpravÄ›</h2>
<div class="flex items-center">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
<select>
@@ -43,7 +43,7 @@
</div>
<div class="space-y-6">
- <div class="flex items-start bg-yellow-100 p-2 -ml-2">
+ <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
@@ -134,30 +134,21 @@
</div>
<div class="my-8 space-y-4">
- {{> molecules-textarea-field(nolabel: true) }}
+ {{> molecules-textarea-field(nolabel: true, placeholder: "VyplĹte text vašeho pĹ™ĂspÄ›vku", rows: 5) }}
<div class="space-x-4">
- <button class="btn btn--icon">
- <div class="btn__body-wrap">
- <div class="btn__body">PĹ™idat pĹ™ĂspÄ›vek</div>
- <div class="btn__icon dropdown-button">
- <i class="ico--chevron-down"></i>
- <ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
- <li class="dropdown-button__choice hover:bg-grey-125">
- <a class="block px-2 py-3" href="#">Přidat jako návrh postupu</a>
- </li>
- </ul>
- </div>
- </div>
- </button>
-
+ {{> molecules-dropdown-button(cta: "PĹ™idat pĹ™ĂspÄ›vek") }}
<span class="text-sm text-grey-200">Pro pokroÄŤilejšà formátovánĂ mĹŻĹľete pouĹľĂvat <a href="#" class="underline">Markdown</a>.</span>
</div>
</div>
</section>
</div>
<div>
- <h2 class="head-alt-base mb-4 pt-1">OznámenĂ</h2>
- {{> organisms-event-feed(classes: "w-full") }}
+ <div class="lg:card lg:elevation-10">
+ <div class="lg:card__body lg:pb-0">
+ <h2 class="head-heavy-sm mb-4">OznámenĂ</h2>
+ </div>
+ {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-4") }}
+ </div>
</div>
</div>
diff --git a/source/css/atoms/card.pcss b/source/css/atoms/card.pcss
index 022e449..98244c3 100644
--- a/source/css/atoms/card.pcss
+++ b/source/css/atoms/card.pcss
@@ -23,3 +23,12 @@
.card-body-text {
@apply font-light leading-normal text-sm break-words ;
}
+
+.card-actions {
+ @apply px-8 py-4 border-t border-grey-125 flex items-center;
+}
+
+
+.card-actions--right {
+ @apply justify-end;
+}
diff --git a/source/css/molecules/form-field.pcss b/source/css/molecules/form-field.pcss
index edca451..3f7d6f8 100644
--- a/source/css/molecules/form-field.pcss
+++ b/source/css/molecules/form-field.pcss
@@ -14,7 +14,7 @@
@apply absolute w-full h-full pointer-events-none;
content: "";
- box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
+ box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05);
}
&,
diff --git a/source/css/molecules/modal.pcss b/source/css/molecules/modal.pcss
new file mode 100644
index 0000000..bc8bd1c
--- /dev/null
+++ b/source/css/molecules/modal.pcss
@@ -0,0 +1,44 @@
+.modal-blur {
+ /* Add the blur effect */
+ /* filter: blur(8px);
+ -webkit-filter: blur(8px); */
+}
+
+.modal__overlay {
+ @apply
+ fixed
+ top-0 left-0 bottom-0 right-0
+ z-50
+ flex items-center flex-row
+ bg-white bg-opacity-75
+ cursor-pointer overflow-auto;
+}
+
+.modal__content {
+ @apply
+ inline-block
+ flex flex-row flex-grow items-center justify-center
+ max-w-full
+ h-full
+ m-auto
+ cursor-auto pointer-events-none outline-none;
+}
+
+.modal__container {
+ @apply
+ h-full
+ p-3
+ pointer-events-auto shadow-md;
+
+ @screen md {
+ @apply h-auto p-0;
+ }
+
+ .modal__container-body {
+ @apply min-h-full bg-white;
+ }
+}
+
+.ReactModal__Body--open {
+ @apply overflow-hidden;
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 144c249..1e31f33 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -47,6 +47,7 @@
@import "./molecules/dropdown-button.pcss";
@import "./molecules/flip-clock.pcss";
@import "./molecules/form-field.pcss";
+@import "./molecules/modal.pcss";
@import "./molecules/pagination.pcss";
@import "./molecules/program-point-list.pcss";
@import "./molecules/social-icon-group.pcss";
--
GitLab