Style moved

web-atoms · Dec 14, 2024 · 64d1433 · 64d1433
1 parent ccdac2e
commit 64d1433
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/src/button-bar/AtomButtonBar.tsx b/src/button-bar/AtomButtonBar.tsx
@@ -2,31 +2,7 @@ import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
 
-    styled.css `
-    display: inline-flex;
-    gap: 0;
-    align-items: center;
-    border: solid 1px lightblue;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    & > * {
-        border-radius: 10px;
-        padding: 5px;
-        cursor: pointer;
-        &:first-child {
-            border-top-right-radius: 0;
-            border-bottom-right-radius:0;
-        }
-        &:last-child {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-        &[data-item=selected-item] {
-            background-color: lightblue;
-        }
-    }
-`.installGlobal("*[data-button-bar=button-bar]");
+import "../styles/button-bar.global.less";
 
 export default class AtomButtonBar extends AtomItemsControl {
 

diff --git a/src/html-editor/commands/Source.tsx b/src/html-editor/commands/Source.tsx
@@ -24,7 +24,8 @@ async function showDialog(s: AtomHtmlEditor, e: Event): Promise<string> {
         protected create(): void {
             this.source = s.htmlContent;
             this.render(<div class={css}>
-                <textarea value={Bind.twoWaysImmediate(() => this.source)}/>
+                <textarea
+                    value={Bind.twoWaysImmediate(() => this.source)}/>
                 <div class="command-bar">
                     <button
                         eventClick={Bind.event(() => this.close(this.source))}

diff --git a/src/styles/button-bar.global.less b/src/styles/button-bar.global.less
@@ -0,0 +1,25 @@
+*[data-button-bar=button-bar] {
+    display: inline-flex;
+    gap: 0;
+    align-items: center;
+    border: solid 1px lightblue;
+    border-radius: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    & > * {
+        border-radius: 10px;
+        padding: 5px;
+        cursor: pointer;
+        &:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius:0;
+        }
+        &:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        &[data-item=selected-item] {
+            background-color: lightblue;
+        }
+    }
+}