✨ feat(modal.scss): Support showing modal using class toggle (previou…

…sly using .shown class, but was never documented)
Spiderpig86 · Jul 1, 2022 · 2c3c6d7 · 2c3c6d7
1 parent 4bcf67e
commit 2c3c6d7
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -18149,7 +18149,7 @@ ul .divider::after {
   /* Visible state */
 }
 
-.modal:target, .modal.shown {
+.modal:target, .modal.modal--visible {
   display: flex;
   opacity: 1;
   z-index: 999;
@@ -18158,7 +18158,7 @@ ul .divider::after {
   /* The div in the modal dialpog used to create the translucent background */
 }
 
-.modal:target .modal-overlay, .modal.shown .modal-overlay {
+.modal:target .modal-overlay, .modal.modal--visible .modal-overlay {
   position: absolute;
   /* Absolute inside of the modal container */
   top: 0;
@@ -18170,8 +18170,8 @@ ul .divider::after {
 }
 
 .modal:target .modal-container,
-.modal:target .modal-container, .modal.shown .modal-container,
-.modal.shown .modal-container {
+.modal:target .modal-container, .modal.modal--visible .modal-container,
+.modal.modal--visible .modal-container {
   animation: slide-down var(--animation-duration) ease 1;
   z-index: 1;
 }

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -15525,7 +15525,7 @@ ul .divider::after {
   /* Visible state */
 }
 
-.modal:target, .modal.shown {
+.modal:target, .modal.modal--visible {
   display: flex;
   opacity: 1;
   z-index: 999;
@@ -15534,7 +15534,7 @@ ul .divider::after {
   /* The div in the modal dialpog used to create the translucent background */
 }
 
-.modal:target .modal-overlay, .modal.shown .modal-overlay {
+.modal:target .modal-overlay, .modal.modal--visible .modal-overlay {
   position: absolute;
   /* Absolute inside of the modal container */
   top: 0;
@@ -15546,8 +15546,8 @@ ul .divider::after {
 }
 
 .modal:target .modal-container,
-.modal:target .modal-container, .modal.shown .modal-container,
-.modal.shown .modal-container {
+.modal:target .modal-container, .modal.modal--visible .modal-container,
+.modal.modal--visible .modal-container {
   animation: slide-down var(--animation-duration) ease 1;
   z-index: 1;
 }

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/components/modal.scss b/src/components/modal.scss
@@ -19,7 +19,7 @@ $generate-utility: should-generate-classes($MODAL);
 
         /* When the modal dialog is visible */
         &:target,
-        &.shown {
+        &.modal--visible {
             display: flex;
             opacity: 1;
             z-index: 999;