From 56ebe08b90860f353a20435bd1e533f77083904d Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sun, 1 May 2022 11:39:18 +0200
Subject: [PATCH] feat: add .modal__close
---
.../01-molecules/21-modal/modal.mustache | 1 +
source/css/molecules/modal.pcss | 18 +++++++++++++++++-
2 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/source/_patterns/01-molecules/21-modal/modal.mustache b/source/_patterns/01-molecules/21-modal/modal.mustache
index ed03bfa..2bf1b24 100644
--- a/source/_patterns/01-molecules/21-modal/modal.mustache
+++ b/source/_patterns/01-molecules/21-modal/modal.mustache
@@ -2,6 +2,7 @@
<div class="modal__content" role="dialog">
<div class="modal__container w-full max-w-2xl" role="dialog">
<div class="modal__container-body elevation-10">
+ <button class="modal__close" title="ZavĹ™Ăt"><i class="ico--cross"></i></button>
{{> molecules-image-card }}
</div>
</div>
diff --git a/source/css/molecules/modal.pcss b/source/css/molecules/modal.pcss
index 4efee0a..110eee4 100644
--- a/source/css/molecules/modal.pcss
+++ b/source/css/molecules/modal.pcss
@@ -35,10 +35,26 @@
}
.modal__container-body {
- @apply bg-white;
+ @apply bg-white relative;
}
}
+.modal__close {
+ @apply
+ absolute
+ right-0
+ top-0
+ h-8
+ w-8
+ flex
+ items-center
+ justify-center
+ z-50
+ m-auto
+ text-black
+ bg-white;
+}
+
.ReactModal__Body--open {
@apply overflow-hidden;
}
--
GitLab