moved css to styles

KxSystems · Oct 16, 2024 · 6a1f20a · 6a1f20a
1 parent 16ba3fb
commit 6a1f20a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 75 deletions.
diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts
@@ -11,7 +11,7 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { live } from "lit/directives/live.js";
 import { customElement } from "lit/decorators.js";
@@ -33,85 +33,13 @@ import {
 } from "../../models/dataSource";
 import { MetaObjectPayload } from "../../models/meta";
 import { DataSourceCommand, DataSourceMessage2 } from "../../models/messages";
-import { shoelaceStyles } from "./styles";
+import { dataSourceStyles, shoelaceStyles } from "./styles";
 
 const MAX_RULES = 32;
 
 @customElement("kdb-data-source-view")
 export class KdbDataSourceView extends LitElement {
-  static styles = [
-    shoelaceStyles,
-    css`
-      .container {
-        display: flex;
-        flex-flow: row nowrap;
-        overflow-x: auto;
-        gap: var(--sl-spacing-medium);
-        padding-left: var(--sl-spacing-medium);
-        padding-right: var(--sl-spacing-medium);
-      }
-
-      .tabs {
-        flex-grow: 1;
-      }
-
-      .actions {
-        display: flex;
-        flex-flow: column nowrap;
-        flex-grow: 0;
-        gap: var(--sl-spacing-x-small);
-        margin-top: calc(
-          1rem * var(--sl-line-height-dense) + 3 * var(--sl-spacing-medium)
-        );
-      }
-
-      .actions sl-button-group > sl-button {
-        flex-grow: 1;
-      }
-
-      sl-tab::part(base) {
-        padding: var(--sl-spacing-medium);
-      }
-
-      sl-select::part(listbox) {
-        min-width: max-content;
-      }
-
-      sl-tab-panel {
-        --padding: 0;
-        overflow-y: scroll;
-        padding-top: var(--sl-spacing-medium);
-        padding-bottom: var(--sl-spacing-medium);
-        height: calc(
-          100vh - 1rem * var(--sl-line-height-dense) - 2 *
-            var(--sl-spacing-medium)
-        );
-      }
-
-      sl-input,
-      sl-select {
-        min-width: 13rem;
-        max-width: 13rem;
-      }
-
-      sl-checkbox {
-        padding-bottom: var(--sl-spacing-2x-small);
-      }
-
-      .col {
-        display: flex;
-        flex-direction: column;
-        gap: var(--sl-spacing-x-small);
-      }
-
-      .row {
-        display: flex;
-        flex-direction: row;
-        gap: var(--sl-spacing-x-small);
-        align-items: flex-end;
-      }
-    `,
-  ];
+  static styles = [shoelaceStyles, dataSourceStyles];
 
   readonly vscode = acquireVsCodeApi();
   private declare debounce;

diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts
@@ -63,6 +63,76 @@ export const shoelaceStyles = css`
   }
 `;
 
+export const dataSourceStyles = css`
+  .container {
+    display: flex;
+    flex-flow: row nowrap;
+    overflow-x: auto;
+    gap: var(--sl-spacing-medium);
+    padding-left: var(--sl-spacing-medium);
+    padding-right: var(--sl-spacing-medium);
+  }
+
+  .tabs {
+    flex-grow: 1;
+  }
+
+  .actions {
+    display: flex;
+    flex-flow: column nowrap;
+    flex-grow: 0;
+    gap: var(--sl-spacing-x-small);
+    margin-top: calc(
+      1rem * var(--sl-line-height-dense) + 3 * var(--sl-spacing-medium)
+    );
+  }
+
+  .actions sl-button-group > sl-button {
+    flex-grow: 1;
+  }
+
+  sl-tab::part(base) {
+    padding: var(--sl-spacing-medium);
+  }
+
+  sl-select::part(listbox) {
+    min-width: max-content;
+  }
+
+  sl-tab-panel {
+    --padding: 0;
+    overflow-y: scroll;
+    padding-top: var(--sl-spacing-medium);
+    padding-bottom: var(--sl-spacing-medium);
+    height: calc(
+      100vh - 1rem * var(--sl-line-height-dense) - 2 * var(--sl-spacing-medium)
+    );
+  }
+
+  sl-input,
+  sl-select {
+    min-width: 13rem;
+    max-width: 13rem;
+  }
+
+  sl-checkbox {
+    padding-bottom: var(--sl-spacing-2x-small);
+  }
+
+  .col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sl-spacing-x-small);
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    gap: var(--sl-spacing-x-small);
+    align-items: flex-end;
+  }
+`;
+
 export const vscodeStyles = css`
   .dropdown-container {
     box-sizing: border-box;