fix: some reorganization of the styles

josdejong · Jul 11, 2024 · 551c8af · 551c8af
1 parent dfe4af8
commit 551c8af
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/src/lib/components/modals/JSONEditorModal.svelte b/src/lib/components/modals/JSONEditorModal.svelte
@@ -299,13 +299,17 @@
             </button>
           {/if}
           {#if !readOnly}
-            <button type="button" class="jse-primary" on:click={handleApply} use:focus bind:this={refApply}>
+            <button
+              type="button"
+              class="jse-primary"
+              on:click={handleApply}
+              use:focus
+              bind:this={refApply}
+            >
               Apply
             </button>
           {:else}
-            <button type="button" class="jse-primary" on:click={handleClose}>
-              Close
-            </button>
+            <button type="button" class="jse-primary" on:click={handleClose}> Close </button>
           {/if}
         </div>
       </div>

diff --git a/src/lib/components/modals/Modal.svelte b/src/lib/components/modals/Modal.svelte
@@ -2,6 +2,7 @@
   // code based on: https://svelte.dev/examples/modal
   import { onEscape } from '$lib/actions/onEscape.js'
   import { onDestroy, onMount } from 'svelte'
+  import { classnames } from '$lib/utils/cssUtils.js'
 
   export let className: string | undefined = undefined
   export let fullscreen = false
@@ -23,26 +24,28 @@
   on:close={close}
   on:click|self={close}
   use:onEscape={close}
-  class={className}
+  class={classnames('jse-modal', className)}
   class:jse-fullscreen={fullscreen}
 >
-  <div class="jse-modal">
+  <div class="jse-modal-inner">
     <slot />
   </div>
 </dialog>
 
 <style lang="scss">
   @import '../../styles.scss';
 
-  dialog {
+  dialog.jse-modal {
     border-radius: $border-radius;
     font-size: $padding; // for some reason that I don't understand, the font-size of the dialog is used as margin around the dialog
     border: none;
     padding: 0;
     display: flex;
     min-width: 0;
     overflow: visible;
-    transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
+    transition:
+      width 0.1s ease-in-out,
+      height 0.1s ease-in-out;
 
     &.jse-sort-modal {
       width: 400px;
@@ -67,22 +70,22 @@
       width: 100%;
       height: 100%;
     }
-  }
 
-  dialog::backdrop {
-    background: $modal-overlay-background;
-  }
+    &::backdrop {
+      background: $modal-overlay-background;
+    }
 
-  dialog > .jse-modal {
-    @include jse-modal-style;
-  }
+    &[open] {
+      animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
 
-  dialog[open] {
-    animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
+    &[open]::backdrop {
+      animation: fade 0.2s ease-out;
+    }
 
-  dialog[open]::backdrop {
-    animation: fade 0.2s ease-out;
+    & .jse-modal-inner {
+      @include jse-modal-style;
+    }
   }
 
   @keyframes zoom {