sp-element-title: apply foundation.css

uzabase · Oct 26, 2024 · a7ab4a3 · a7ab4a3
1 parent a1c609c
commit a7ab4a3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/elementTitle/element-title.css b/src/components/elementTitle/element-title.css
@@ -23,12 +23,14 @@
 
 .text-links {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     gap: 16px;
 }
 
 .buttons {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     gap: 8px;
 }

diff --git a/src/components/elementTitle/sp-element-title.ts b/src/components/elementTitle/sp-element-title.ts
@@ -1,13 +1,12 @@
 // @ts-ignore
 import resetStyle from "@acab/reset.css?inline" assert { type: "css" };
 // @ts-ignore
+import foundationStyle from "../foundation.css?inline" assert { type: "css" };
+// @ts-ignore
 import elementTitleStyle from "./element-title.css?inline" assert { type: "css" };
 
-const resetStyles = new CSSStyleSheet();
-resetStyles.replaceSync(resetStyle);
-
 const styles = new CSSStyleSheet();
-styles.replaceSync(elementTitleStyle);
+styles.replaceSync(`${resetStyle} ${foundationStyle} ${elementTitleStyle}`);
 
 export class SpElementTitle extends HTMLElement {
   #headingElement = document.createElement("h3");
@@ -26,7 +25,7 @@ export class SpElementTitle extends HTMLElement {
     super();
     this.attachShadow({ mode: "open" });
 
-    this.shadowRoot.adoptedStyleSheets = [resetStyles, styles];
+    this.shadowRoot.adoptedStyleSheets = [styles];
 
     this.#textLinkSlotElement.name = "text-links";
     this.#buttonSlotElement.name = "buttons";