Fix: inconsistent style for toggle button

grislyeye · Jul 23, 2024 · 2402de9 · 2402de9
1 parent 726cc8f
commit 2402de9
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/src/vellum-doc.ts b/src/vellum-doc.ts
@@ -26,11 +26,8 @@ export class VellumDocument extends LitElement {
       position: fixed;
       bottom: 1.5em;
       left: 1.5em;
-      padding: 20px;
-      background-color: lightgray;
-      border-radius: 50%;
-      height: 20px;
-      width: 20px;
+      height: 50px;
+      width: 50px;
     }
 
     #index {
@@ -179,11 +176,18 @@ export class VellumDocument extends LitElement {
       </lion-drawer>
 
       <article id="document">
-        <div id="toggle" @click="${this.toggleIndex}">
-          <svg class="icon" viewBox="0 0 100 80" width="20" height="20">
-            <rect width="100" height="15"></rect>
-            <rect y="30" width="100" height="15"></rect>
-            <rect y="60" width="100" height="15"></rect>
+        <div>
+          <svg  id="toggle" class="icon"  @click="${this.toggleIndex}" viewBox="0 0 64 64" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+            <g>
+                <g transform="matrix(1.56894,0,0,1.46939,-3.65277,-8.41383)">
+                    <ellipse cx="22.724" cy="27.504" rx="20.396" ry="21.778" style="fill:rgb(211,211,211);"/>
+                </g>
+                <g transform="matrix(0.789127,0,0,0.789127,6.42717,6.64457)">
+                    <path d="M46.549,18.679L18.264,18.679C17.159,18.679 16.264,19.575 16.264,20.679C16.264,21.783 17.159,22.679 18.264,22.679L46.549,22.679C47.654,22.679 48.549,21.783 48.549,20.679C48.549,19.575 47.654,18.679 46.549,18.679Z" style="fill:rgb(29,29,27);fill-rule:nonzero;"/>
+                    <path d="M46.549,30.119L18.264,30.119C17.159,30.119 16.264,31.015 16.264,32.119C16.264,33.223 17.159,34.119 18.264,34.119L46.549,34.119C47.654,34.119 48.549,33.223 48.549,32.119C48.549,31.015 47.654,30.119 46.549,30.119Z" style="fill:rgb(29,29,27);fill-rule:nonzero;"/>
+                    <path d="M46.549,41.583L18.264,41.583C17.159,41.583 16.264,42.479 16.264,43.583C16.264,44.687 17.159,45.583 18.264,45.583L46.549,45.583C47.654,45.583 48.549,44.687 48.549,43.583C48.549,42.479 47.654,41.583 46.549,41.583Z" style="fill:rgb(29,29,27);fill-rule:nonzero;"/>
+                </g>
+            </g>
           </svg>
         </div>
         <div id="content" @click="${this.checkIndexVisibility}">