ds-one 0.2.5-alpha.17 → 0.2.5-alpha.19

package/DS1/4-page/ds-grid.ts

@@ -1,8 +1,9 @@
 // ds-grid.ts
 // Simple grid layout component
 
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { detectMobileDevice } from "../0-face/device";
+import styles from "./styles/ds-grid.css?inline";
 
 declare global {
   interface CustomElementRegistry {
@@ -20,61 +21,7 @@ export class Grid extends LitElement {
   private resizeObserver?: () => void;
   private resizeTimeout?: any;
 
-  static styles = css`
-    :host {
-      margin-top: 0.5px !important;
-      margin-left: 0.5px !important;
-      display: grid;
-      width: 1440px;
-      height: 1280px;
-      grid-template-columns: repeat(auto-fill, 19px);
-      grid-template-rows: repeat(auto-fill, 19px);
-      gap: 1px;
-      row-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: calc(1px * var(--sf)) solid var(--yellow);
-      position: fixed;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-    }
-
-    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
-    :host(.mobile) {
-      width: calc(100% - calc(1px * var(--sf)));
-      max-width: 100vw;
-      margin-left: 0.5px !important;
-      margin-top: 0 !important;
-      box-sizing: border-box;
-      position: fixed;
-      top: calc(0.5px * var(--sf));
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-      gap: calc(1px * var(--sf));
-      grid-template-columns: repeat(14, calc(19px * var(--sf)));
-      grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
-    }
-
-    :host([align="left"]) {
-      left: 0;
-      transform: none;
-    }
-
-    :host([align="center"]) {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    :host([align="right"]) {
-      left: auto;
-      right: 0;
-      transform: none;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback() {
     super.connectedCallback();