Stylesheet rejig

makeup · Feb 27, 2024 · a7acbec · a7acbec
1 parent c3cae57
commit a7acbec
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 20 deletions.
diff --git a/docs/makeup-switch-style/docs.css → docs/docs.css b/docs/makeup-switch-style/docs.css → docs/docs.css
@@ -16,9 +16,6 @@ li {
     margin: 4px 0;
     padding: 4px 8px;
 }
-
-span.makeup-switch,
-makeup-switch-ssr,
 makeup-switch {
     margin-left: auto;
 }
diff --git a/docs/makeup-switch-element/index.html b/docs/makeup-switch-element/index.html
@@ -3,9 +3,9 @@
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <title>makeup-switch-element</title>
-        <link href="../makeup-switch-style/docs.css" rel="stylesheet" />
-        <!-- <link href="../makeup-switch-style/theme-1.css" rel="stylesheet" /> -->
-        <link href="../makeup-switch-style/placeholder.css" rel="stylesheet" />
+        <link href="../docs.css" rel="stylesheet" />
+        <!-- <link href="../theme-1.css" rel="stylesheet" /> -->
+        <link href="skeleton.css" rel="stylesheet" />
         <link rel="icon" href="../favicon.ico" type="image/x-icon">
     </head>
     <body>
@@ -19,7 +19,7 @@ <h2>Declarative</h2>
                     <span id="label1">makeup-switch 1</span>
                     <makeup-switch labelledby="label1">
                         <template shadowrootmode="open">
-                            <link href="../makeup-switch-style/switch.css" rel="stylesheet" />
+                            <link href="switch.css" rel="stylesheet" />
                             <span class="switch">
                                 <span class="switch__control" role="switch" tabindex="0"></span>
                                 <span class="switch__button"></span>
@@ -31,7 +31,7 @@ <h2>Declarative</h2>
                     <span id="label2">makeup-switch 2</span>
                     <makeup-switch labelledby="label2" checked>
                         <template shadowrootmode="open">
-                            <link href="../makeup-switch-style/switch.css" rel="stylesheet" />
+                            <link href="switch.css" rel="stylesheet" />
                             <span class="switch">
                                 <span class="switch__control" role="switch" tabindex="0"></span>
                                 <span class="switch__button"></span>
@@ -43,7 +43,7 @@ <h2>Declarative</h2>
                     <span id="label3">makeup-switch 3</span>
                     <makeup-switch labelledby="label3" disabled>
                         <template shadowrootmode="open">
-                            <link href="../makeup-switch-style/switch.css" rel="stylesheet" />
+                            <link href="switch.css" rel="stylesheet" />
                             <span class="switch">
                                 <span class="switch__control" role="switch" tabindex="0"></span>
                                 <span class="switch__button"></span>
@@ -55,7 +55,7 @@ <h2>Declarative</h2>
                     <span id="label4">makeup-switch 4</span>
                     <makeup-switch labelledby="label4" checked disabled>
                         <template shadowrootmode="open">
-                            <link href="../makeup-switch-style/switch.css" rel="stylesheet" />
+                            <link href="switch.css" rel="stylesheet" />
                             <span class="switch">
                                 <span class="switch__control" role="switch" tabindex="0"></span>
                                 <span class="switch__button"></span>
@@ -69,19 +69,19 @@ <h2>Imperative</h2>
             <ul>
                 <li>
                     <span id="label5">makeup-switch 5</span>
-                    <makeup-switch labelledby="label5" placeholder="true"></makeup-switch>
+                    <makeup-switch labelledby="label5" skeleton="true"></makeup-switch>
                 </li>
                 <li>
                     <span id="label6">makeup-switch 6</span>
-                    <makeup-switch labelledby="label6" placeholder="true" checked></makeup-switch>
+                    <makeup-switch labelledby="label6" skeleton="true" checked></makeup-switch>
                 </li>
                 <li>
                     <span id="label7">makeup-switch 7</span>
-                    <makeup-switch labelledby="label7" placeholder="true" disabled></makeup-switch>
+                    <makeup-switch labelledby="label7" skeleton="true" disabled></makeup-switch>
                 </li>
                 <li>
                     <span id="label8">makeup-switch 8</span>
-                    <makeup-switch labelledby="label8" placeholder="true" checked disabled></makeup-switch>
+                    <makeup-switch labelledby="label8" skeleton="true" checked disabled></makeup-switch>
                 </li>
             </ul>
         </main>

diff --git a/docs/makeup-switch-element/index.min.js b/docs/makeup-switch-element/index.min.js
diff --git a/docs/makeup-switch-element/index.min.js.map b/docs/makeup-switch-element/index.min.js.map
diff --git a/docs/makeup-switch-style/placeholder.css → docs/makeup-switch-element/skeleton.css b/docs/makeup-switch-style/placeholder.css → docs/makeup-switch-element/skeleton.css
@@ -1,9 +1,9 @@
-makeup-switch[placeholder="true"] {
+makeup-switch[skeleton="true"] {
     align-items: center;
     display: inline-flex;
     height: 40px;
 }
-makeup-switch[placeholder="true"]::after {
+makeup-switch[skeleton="true"]::after {
     background-color: #eee;
     border-radius: 400px;
     content: '';

diff --git a/docs/makeup-switch-style/switch.css → docs/makeup-switch-element/switch.css b/docs/makeup-switch-style/switch.css → docs/makeup-switch-element/switch.css
diff --git a/docs/makeup-switch-style/theme-1.css → docs/theme-1.css b/docs/makeup-switch-style/theme-1.css → docs/theme-1.css
diff --git a/packages/makeup-switch-element/dist/index.js b/packages/makeup-switch-element/dist/index.js
@@ -6,7 +6,7 @@ class MakeupSwitchElement extends HTMLElement {
     return ['checked', 'disabled', 'label', 'labelledby'];
   }
   connectedCallback(e) {
-    this.removeAttribute('placeholder');
+    this.removeAttribute('skeleton');
     this.model._observeEvents();
   }
   disconnectedCallback(e) {

diff --git a/packages/makeup-switch-element/src/index.js b/packages/makeup-switch-element/src/index.js
@@ -11,7 +11,7 @@ class MakeupSwitchElement extends HTMLElement {
     }
 
     connectedCallback(e) {
-        this.removeAttribute('placeholder');
+        this.removeAttribute('skeleton');
         this.model._observeEvents();
     }