Edit to keep classes with cooresponding component and allow scoping

galaxyproject · May 13, 2024 · 1edab2f · 1edab2f
1 parent 707360b
commit 1edab2f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -108,30 +108,3 @@ function setElementValues(oldArray: string[], newArray: string[], value: string)
             :handle-click="handleClick" />
     </div>
 </template>
-
-<style lang="scss">
-@import "theme/blue.scss";
-@import "~@fortawesome/fontawesome-free/scss/_variables";
-.ui-form-field {
-    div > .ui-drilldown {
-        $ui-drilldown-padding: 1rem;
-        $ui-drilldown-border: 0.5px solid $gray-500;
-
-        .indent {
-            padding-left: calc($ui-drilldown-padding + $ui-drilldown-padding/2);
-        }
-        .align-indent {
-            display: inline-block;
-            width: $ui-drilldown-padding;
-            border-bottom: $ui-drilldown-border;
-        }
-        .align-checkbox {
-            width: $ui-drilldown-padding;
-        }
-        /* selector: all except first nested drilldown */
-        & > * .descendant-lines {
-            border-left: $ui-drilldown-border;
-        }
-    }
-}
-</style>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -22,3 +22,15 @@ defineProps<{
         </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+.ui-drilldown {
+    $ui-drilldown-border: 0.5px solid $gray-500;
+
+    /* selector: all except first nested drilldown */
+    & > * .descendant-lines {
+        border-left: $ui-drilldown-border;
+    }
+}
+</style>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -73,3 +73,23 @@ onMounted(() => {
             :handle-click="handleClick" />
     </div>
 </template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+.ui-drilldown {
+    $ui-drilldown-padding: 1rem;
+    $ui-drilldown-border: 0.5px solid $gray-500;
+
+    .indent {
+        padding-left: calc($ui-drilldown-padding + $ui-drilldown-padding/2);
+    }
+    .align-indent {
+        display: inline-block;
+        width: $ui-drilldown-padding;
+        border-bottom: $ui-drilldown-border;
+    }
+    .align-checkbox {
+        width: $ui-drilldown-padding;
+    }
+}
+</style>