fix: icon color and spacing

Der-Zauberer · Jan 14, 2025 · eb7caef · eb7caef
1 parent 0cb320e
commit eb7caef
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 8 deletions.
diff --git a/colors/index.html b/colors/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <swd-menu>
-            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger"></swd-icon></a>
+            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
             <a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
             <div class="contents only-bigger-md">
                 <a href="/SimpleWebDesign/components">Components</a>

diff --git a/components/index.html b/components/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <swd-menu>
-            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon white-text"></swd-icon></a>
+            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
             <a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
             <div class="contents only-bigger-md">
                 <a href="/SimpleWebDesign/components/" selected>Components</a>
@@ -324,6 +324,19 @@ <h2 id="menu">Menu</h2>
                     &lt;/swd-menu&gt;
                 </swd-code>
 
+                <swd-card-outline class="top-item">
+                    <swd-menu class="margin-bottom" style="position: initial; z-index: initial;">
+                        <a class="only-smaller-md" tabindex="0"><swd-icon class="hamburger-icon"></swd-icon></a>
+                        <a class="swd-menu-title" href="#">Page Title</a>
+                    </swd-menu>
+                </swd-card-outline>
+                <swd-code swd-code-language="html" class="bottom-item">
+                    &lt;swd-menu&gt;<br>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&lt;a tabindex="0"&gt;&lt;swd-icon class="hamburger-icon"&gt;&lt;/swd-icon&gt;&lt;/a&gt;<br>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="swd-menu-title"&gt;Page Title&lt;/a&gt;<br>
+                    &lt;/swd-menu&gt;
+                </swd-code>
+
                 <h2 id="navigation">Navigation</h2>
 
                 <swd-card-outline class="top-item">

diff --git a/downloads/index.html b/downloads/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <swd-menu>
-            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger"></swd-icon></a>
+            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
             <a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
             <div class="contents only-bigger-md">
                 <a href="/SimpleWebDesign/components">Components</a>

diff --git a/functions/index.html b/functions/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <swd-menu>
-            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger"></swd-icon></a>
+            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
             <a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
             <div class="contents only-bigger-md">
                 <a href="/SimpleWebDesign/components">Components</a>

diff --git a/imprint/index.html b/imprint/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <swd-menu>
-            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger"></swd-icon></a>
+            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
             <a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
             <div class="contents only-bigger-md">
                 <a href="/SimpleWebDesign/components">Components</a>

diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <swd-menu>
-            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger"></swd-icon></a>
+            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
             <a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
             <div class="contents only-bigger-md">
                 <a href="/SimpleWebDesign/components">Components</a>

diff --git a/privacy-policy/index.html b/privacy-policy/index.html
@@ -12,7 +12,7 @@
     <body>
 
         <swd-menu>
-            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger"></swd-icon></a>
+            <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
             <a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
             <div class="contents only-bigger-md">
                 <a href="/SimpleWebDesign/components">Components</a>

diff --git a/resources/style.css b/resources/style.css
@@ -464,7 +464,11 @@ swd-input label { color: var(--theme-text-grey-color); cursor: text; }
 swd-input:has(input:focus, select:focus, textarea:focus, input[selected], select[selected], textarea[selected]) label { color: var(--theme-primary-color) }
 swd-input swd-input-range { position: absolute; transform: translateY(100%); bottom: -2px; right: 0; color: var(--theme-text-grey-color); }
 swd-input swd-input-error { position: absolute; transform: translateY(100%); bottom: -2px; left: 0; color: var(--theme-error-color); display: none }
-swd-input:has(input:user-invalid, select:user-invalid, textarea:user-invalid, input[invalid], select[invalid], textarea[invalid]) swd-input-error { display: inherit }
+swd-input:has(*:user-invalid, *[invalid]) swd-input-error { display: inherit }
+
+swd-input:has(swd-icon) input, swd-input:has(swd-icon) select, swd-input:has(swd-icon) textarea {
+    width: calc(100% - 1em - round(0.5em, 1px));
+}
 
 swd-input swd-icon {
     position: absolute;
@@ -527,6 +531,11 @@ swd-menu {
     overflow: hidden;
 }
 
+swd-menu * {
+    --theme-text-color: white;
+    color: white;
+}
+
 swd-menu:hover { overflow: auto }
 
 swd-menu a {