#675 Improve modals styling further

joomlatools · Nov 27, 2023 · 97abf3c · 97abf3c
1 parent f0786b2
commit 97abf3c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/css/admin.css b/code/libraries/joomlatools/component/koowa/resources/assets/css/admin.css
@@ -14792,6 +14792,9 @@ html .form-inline .select2-container--bootstrap {
   font-weight: 400;
   line-height: 2.875rem;
 }
+.k-ui-j4-form .k-ui-namespace .joomla-modal.modal.fade {
+  transition: opacity 0.15s linear;
+}
 .k-ui-j4-form .k-ui-namespace .btn-close {
   box-sizing: content-box;
   width: 1em;
@@ -14967,6 +14970,9 @@ html .form-inline .select2-container--bootstrap {
    * these are not available outside Joomla scope (for example in koowa template)
    */
 }
+.k-ui-j5-form .fade.show {
+  opacity: 1;
+}
 .k-ui-j5-form {
   --hue: 214;
   --template-bg-dark-3: hsl(var(--hue), 40%, 97%);
@@ -15385,9 +15391,7 @@ html .form-inline .select2-container--bootstrap {
   }
 }
 .k-ui-j5-form .joomla-modal.modal.fade {
-  opacity: unset;
-  transition: unset;
-  -webkit-backface-visibility: unset;
+  transition: opacity 0.15s linear;
 }
 .k-ui-j5-form joomla-dialog dialog {
   width: 96vw;

diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/css/admin.min.css b/code/libraries/joomlatools/component/koowa/resources/assets/css/admin.min.css
diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/scss/admin.scss b/code/libraries/joomlatools/component/koowa/resources/assets/scss/admin.scss
@@ -58,6 +58,10 @@ $k-atom-body: false;
 
 .k-ui-j5-form {
 
+  .fade.show {
+    opacity: 1;
+  }
+
   @import "joomla5/form";
   @import "joomla5/styles";
 

diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/scss/joomla4/_form.scss b/code/libraries/joomlatools/component/koowa/resources/assets/scss/joomla4/_form.scss
@@ -564,6 +564,11 @@
   line-height: 2.875rem;
 }
 
+.joomla-modal.modal.fade {
+  -webkit-transition:opacity .15s linear;
+  transition:opacity .15s linear;
+}
+
 /**
  * Modals
  */

diff --git a/code/libraries/joomlatools/component/koowa/resources/assets/scss/joomla5/_form.scss b/code/libraries/joomlatools/component/koowa/resources/assets/scss/joomla5/_form.scss
@@ -466,9 +466,8 @@
 }
 
 .joomla-modal.modal.fade {
-  opacity: unset;
-  transition: unset;
-  -webkit-backface-visibility: unset;
+  -webkit-transition:opacity .15s linear;
+  transition:opacity .15s linear;
 }
 
 /**