#7 improving styleOverview.html,

WebEngineering-FHNW · Oct 20, 2022 · 0124ebc · 0124ebc
1 parent 234a242
commit 0124ebc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/docs/src/examples/style/styleOverview.html b/docs/src/examples/style/styleOverview.html
@@ -17,6 +17,14 @@
             grid-template-columns: max-content max-content;
             grid-column-gap: 1em;
         }
+        .drop-size {
+            width: 40px;
+            height:40px;
+        }
+        .drop-shape {
+            border-radius: 50% 15% 50% 50%;
+            transform: rotate(-45deg) ;
+        }
         .flow {
             display: flex;
             gap: 1em;
@@ -120,5 +128,8 @@ <h2>CSS custom properties</h2>
         resetFlatterClasses();
     }
 </script>
+
+<!--empty div just to use the classes once and avoid inspection warnings-->
+<div class="drop-size drop-shape flow"></div>
 </body>
 </html>
diff --git a/docs/src/examples/style/useStyles.js b/docs/src/examples/style/useStyles.js
@@ -11,24 +11,23 @@ import {
 
 const root = document.querySelector("#out");
 
-const dimensions = "width: 40px; height:40px;";
 const stanza = ( colorName, color, cssName) => dom (`
 <!--suppress CssUnresolvedCustomProperty -->
     <p>${colorName}</p>    
     <p>${cssName}</p>
-    <div style="${dimensions} background: ${color};"></div>
-    <div style="${dimensions} background: var(${cssName});"></div>
+    <div class="drop-size drop-shape" style="background: ${color};"></div>
+    <div class="drop-size drop-shape" style="background: var(${cssName});"></div>
 `);
 
 const stanza2= ( colorName, color, cssName) => dom (`
 <!--suppress CssUnresolvedCustomProperty -->
     <p>${colorName}</p>    
     <p>${"--kb-rgb-" + cssName}, ${"--kb-hsla-" + cssName}</p>
 
-    <div style="${dimensions} background: ${color};"></div>
+    <div class="drop-size drop-shape" style="background: ${color};"></div>
     <div class="flow">
-        <div style="${dimensions} background: var(${"--kb-rgb-"  + cssName});"></div>
-        <div style="${dimensions} background: var(${"--kb-hsla-" + cssName});"></div>
+        <div class="drop-size drop-shape" style="background: var(${"--kb-rgb-"  + cssName});"></div>
+        <div class="drop-size drop-shape" style="background: var(${"--kb-hsla-" + cssName});"></div>
     </div>
 `);
 
@@ -41,8 +40,8 @@ root.append( ... stanza( "shadowColor",  shadowColor  ,"--kolibri-color-shadow"
 root.append( ... dom (`
     <p>shadow</p>
     <p>--kolibri-box-shadow</p>
-    <div style="${dimensions} box-shadow: ${shadowCss}"></div>
-    <div style="${dimensions} box-shadow: var(--kolibri-box-shadow)"></div>
+    <div class="drop-size" style="box-shadow: ${shadowCss}"></div>
+    <div class="drop-size" style="box-shadow: var(--kolibri-box-shadow)"></div>
 `));