fix: #489 anchor styling defined in the TransformModal affecting the …

…global style
josdejong · Oct 9, 2024 · a213583 · a213583
1 parent 337c33b
commit a213583
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 179 deletions.
diff --git a/src/lib/components/modals/Modal.svelte b/src/lib/components/modals/Modal.svelte
@@ -88,41 +88,41 @@
     & .jse-modal-inner {
       @include jse-modal-style;
     }
-  }
 
-  @keyframes zoom {
-    from {
-      transform: scale(0.95);
-    }
-    to {
-      transform: scale(1);
+    @keyframes zoom {
+      from {
+        transform: scale(0.95);
+      }
+      to {
+        transform: scale(1);
+      }
     }
-  }
 
-  @keyframes fade {
-    from {
-      opacity: 0;
+    @keyframes fade {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
     }
-    to {
-      opacity: 1;
-    }
-  }
 
-  // styling for the select box, svelte-select
-  // see docs: https://github.com/rob-balfre/svelte-select#css-custom-properties-variables
-  :global(.svelte-select) {
-    --border: #{$svelte-select-border};
-    --item-is-active-bg: #{$svelte-select-item-is-active-bg};
-    --border-radius: #{$svelte-select-border-radius};
-    --background: #{$svelte-select-background};
-    --padding: #{$svelte-select-padding};
-    --multi-select-padding: #{$svelte-select-multi-select-padding};
-    --font-size: #{$svelte-select-font-size};
-    --height: 36px;
-    --multi-item-height: 28px;
-    --multi-item-margin: 2px;
-    --multi-item-padding: 2px 8px;
-    --multi-item-border-radius: 6px;
-    --indicator-top: 8px;
+    // styling for the select box, svelte-select
+    // see docs: https://github.com/rob-balfre/svelte-select#css-custom-properties-variables
+    :global(.svelte-select) {
+      --border: #{$svelte-select-border};
+      --item-is-active-bg: #{$svelte-select-item-is-active-bg};
+      --border-radius: #{$svelte-select-border-radius};
+      --background: #{$svelte-select-background};
+      --padding: #{$svelte-select-padding};
+      --multi-select-padding: #{$svelte-select-multi-select-padding};
+      --font-size: #{$svelte-select-font-size};
+      --height: 36px;
+      --multi-item-height: 28px;
+      --multi-item-margin: 2px;
+      --multi-item-padding: 2px 8px;
+      --multi-item-border-radius: 6px;
+      --indicator-top: 8px;
+    }
   }
 </style>
diff --git a/src/lib/components/modals/SortModal.scss b/src/lib/components/modals/SortModal.scss
@@ -2,47 +2,47 @@
 
 .jse-modal-contents {
   @include jse-modal-contents;
-}
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-
-  th,
-  td {
-    text-align: left;
-    vertical-align: middle;
-    font-weight: normal;
-    padding-bottom: $padding;
-
-    input.jse-path {
-      width: 100%;
-      box-sizing: border-box;
-      padding: 6px 16px; // TODO: define variables for those props
-      border: $input-border;
-      border-radius: $input-radius;
-      font-family: inherit;
-      font-size: inherit;
-      background: inherit;
-      color: inherit;
-      outline: none;
-
-      &:read-only {
-        background: $input-background-readonly;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    th,
+    td {
+      text-align: left;
+      vertical-align: middle;
+      font-weight: normal;
+      padding-bottom: $padding;
+
+      input.jse-path {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 6px 16px; // TODO: define variables for those props
+        border: $input-border;
+        border-radius: $input-radius;
+        font-family: inherit;
+        font-size: inherit;
+        background: inherit;
+        color: inherit;
+        outline: none;
+
+        &:read-only {
+          background: $input-background-readonly;
+        }
       }
-    }
 
-    :global(.svelte-select input) {
-      box-sizing: border-box;
+      :global(.svelte-select input) {
+        box-sizing: border-box;
+      }
     }
   }
-}
 
-.jse-space {
-  height: 200px; // Trick for the property select box dropdown to be fully visible
+  .jse-space {
+    height: 200px; // Trick for the property select box dropdown to be fully visible
 
-  .jse-error {
-    color: $error-color;
+    .jse-error {
+      color: $error-color;
+    }
   }
 }