improved analog-clock

Author: olton

examples/button-{simple}.html renamed to examples/push-button.html

@@ -55003,7 +55003,7 @@ button.glow-animated-hover,
   justify-content: center;
   height: var(--analog-clock-icon-size);
   width: var(--analog-clock-icon-size);
-  top: 30px;
+  top: 50px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 10px;
@@ -55032,7 +55032,7 @@ button.glow-animated-hover,
   right: 35px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 8px;
+  font-size: 14px;
   color: var(--analog-clock-color);
   background: var(--analog-clock-background);
   font-weight: 600;
@@ -55146,15 +55146,15 @@ button.glow-animated-hover,
   background: var(--analog-clock-minute-color);
 }
 .analog-clock .digital-clock {
-  width: 66px;
+  width: 86px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: absolute;
-  bottom: 50px;
+  bottom: 60px;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 10px;
+  font-size: 18px;
   border-radius: 2px;
   background: var(--analog-clock-background);
   font-weight: 700;
@@ -55178,8 +55178,8 @@ button.glow-animated-hover,
   content: ":";
   display: block;
   color: #c6c6c6;
-  top: 4px;
-  font-size: 10px;
+  top: 50%;
+  transform: translateY(-50%);
   font-weight: 900;
 }
 .analog-clock .digital-clock .dc-minute::before {

lib/metro.css

@@ -55,7 +55,7 @@
         justify-content: center;
         height: var(--analog-clock-icon-size);
         width: var(--analog-clock-icon-size);
-        top: 30px;
+        top: 50px;
         left: 50%;
         transform: translateX(-50%);
         font-size: 10px;
@@ -86,7 +86,7 @@
         right: 35px;
         top: 50%;
         transform: translateY(-50%);
-        font-size: 8px;
+        font-size: 14px;
         color: var(--analog-clock-color);
         background: var(--analog-clock-background);
         font-weight: 600;
@@ -213,15 +213,15 @@
     }
 
     .digital-clock {
-        width: 66px;
+        width: 86px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         position: absolute;
-        bottom: 50px;
+        bottom: 60px;
         left: 50%;
         transform: translateX(-50%);
-        font-size: 10px;
+        font-size: 18px;
         border-radius: 2px;
         background: var(--analog-clock-background);
         font-weight: 700;
@@ -244,8 +244,8 @@
                 content: ':';
                 display: block;
                 color: #c6c6c6;
-                top: 4px;
-                font-size: 10px; 
+                top: 50%;
+                transform: translateY(-50%);
                 font-weight: 900;
             }
             &::before {

lib/metro.css.map

@@ -39,7 +39,7 @@ suite("Analog Clock Component Tests", () => {
         expect(document.querySelector("#test-clock .moon")).not.toBeNull(); // showMoon is true by default
         expect(document.querySelector("#test-clock .day-month")).not.toBeNull(); // showDay is true by default
         expect(document.querySelector("#test-clock .digital-clock")).not.toBeNull(); // showDigitalClock is true by default
-        expect(document.querySelector("#test-clock").classList.contains("show-numbers")).toBe(false); // showNumbers is false by default
+        expect(document.querySelector("#test-clock").classList.contains("show-numbers")).toBe(true); // showNumbers is false by default
     });
 
     // Test initialization with custom options

source/components/analog-clock/analog-clock.less

@@ -9,9 +9,9 @@ afterAll(async () => {
     await B.bye()
 })
 
-describe("button.html tests", () => {
-    it("button.html", async () => {
-        await B.visit(`${getFileUrl(`./examples/button.html`)}`)
+describe("push-button.html tests", () => {
+    it("push-button.html", async () => {
+        await B.visit(`${getFileUrl(`./examples/push-button.html`)}`)
         expect(B.error).toBeNull(B.error)
     })
 })