Fixing the Toggle button for the examples filter

The text td and tm as been added to better show the user the usability of the button
eclipse-thingweb · Oct 10, 2023 · 44e1fe0 · 44e1fe0
1 parent 4d51a56
commit 44e1fe0
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 30 deletions.
diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss
@@ -63,29 +63,26 @@
             font-size: var(--fs-p);
 
             .thing-type-toggle {
-                width: fit-content;
+                width: 6rem;
+                height: 3rem;
+                border-radius: 50vw;
+                background-color: var(--clr-controls-bg);
+                position: relative;
 
                 input[type="checkbox"] {
                     appearance: none;
-                    width: 6rem;
-                    height: 3rem;
-                    border-radius: 50vw;
-                    background-color: var(--clr-controls-bg);
-                    position: relative;
-                    transition: background-color 250ms ease-in-out;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
                     cursor: pointer;
 
                     &::before {
-                        content: 'TD';
+                        content: '';
                         position: absolute;
                         top: .4rem;
                         left: .4rem;
                         width: 2.2rem;
                         height: 2.2rem;
-                        font-size: var(--fs-footer);
-                        font-weight: var(--fw-bold);
-                        font-family: var(--ff-primary);
-                        color: var(--clr-controls-txt);
                         border-radius: 50%;
                         background-color: var(--clr-controls);
                         display: grid;
@@ -94,12 +91,48 @@
                     }
                 }
 
-                input[type="checkbox"]:checked {
+                .td-text, .tm-text{
+                    position: absolute;
+                    height: 100%;
+                    z-index: 1;
+                    font-size: var(--fs-footer);
+                    font-weight: var(--fw-bold);
+                    font-family: var(--ff-primary);
+                    pointer-events: none;
+                    display: flex;
+                    align-items: center;
+                }
 
+                .td-text {
+                    left: .9rem;
+                    z-index: 1;
+                    color: var(--clr-neutral-900);
+                    transition: color 250ms ease-in-out 200ms;
+                }
+
+                .tm-text{
+                    content: 'TM';
+                    right: 1rem;
+                    z-index: 1;
+                    color: var(--clr-neutral-200);
+                    transition: color 250ms ease-in-out;
+                }
+
+                input[type="checkbox"]:checked {
                     &::before {
-                        content: 'TM';
+                        content: '';
                         left: 3.2rem;
                     }
+
+                    & ~ .td-text{
+                        color: var(--clr-neutral-200);
+                        transition: color 250ms ease-in-out;
+                    }
+
+                    & ~ .tm-text{
+                        color: var(--clr-neutral-900);
+                        transition: color 250ms ease-in-out 200ms;
+                    }
                 }
             }
 

diff --git a/packages/web-new/src/styles/styles.css b/packages/web-new/src/styles/styles.css
@@ -1647,42 +1647,70 @@ main .console {
   font-size: var(--fs-p);
 }
 .examples-menu .examples-menu-container__filter .thing-type-toggle {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.examples-menu .examples-menu-container__filter .thing-type-toggle input[type=checkbox] {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   width: 6rem;
   height: 3rem;
   border-radius: 50vw;
   background-color: var(--clr-controls-bg);
   position: relative;
-  transition: background-color 250ms ease-in-out;
+}
+.examples-menu .examples-menu-container__filter .thing-type-toggle input[type=checkbox] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
 }
 .examples-menu .examples-menu-container__filter .thing-type-toggle input[type=checkbox]::before {
-  content: "TD";
+  content: "";
   position: absolute;
   top: 0.4rem;
   left: 0.4rem;
   width: 2.2rem;
   height: 2.2rem;
-  font-size: var(--fs-footer);
-  font-weight: var(--fw-bold);
-  font-family: var(--ff-primary);
-  color: var(--clr-controls-txt);
   border-radius: 50%;
   background-color: var(--clr-controls);
   display: grid;
   place-items: center;
   transition: left 500ms var(--trans-bouncy);
 }
-.examples-menu .examples-menu-container__filter .thing-type-toggle input[type=checkbox]:checked::before {
+.examples-menu .examples-menu-container__filter .thing-type-toggle .td-text, .examples-menu .examples-menu-container__filter .thing-type-toggle .tm-text {
+  position: absolute;
+  height: 100%;
+  z-index: 1;
+  font-size: var(--fs-footer);
+  font-weight: var(--fw-bold);
+  font-family: var(--ff-primary);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+}
+.examples-menu .examples-menu-container__filter .thing-type-toggle .td-text {
+  left: 0.9rem;
+  z-index: 1;
+  color: var(--clr-neutral-900);
+  transition: color 250ms ease-in-out 200ms;
+}
+.examples-menu .examples-menu-container__filter .thing-type-toggle .tm-text {
   content: "TM";
+  right: 1rem;
+  z-index: 1;
+  color: var(--clr-neutral-200);
+  transition: color 250ms ease-in-out;
+}
+.examples-menu .examples-menu-container__filter .thing-type-toggle input[type=checkbox]:checked::before {
+  content: "";
   left: 3.2rem;
 }
+.examples-menu .examples-menu-container__filter .thing-type-toggle input[type=checkbox]:checked ~ .td-text {
+  color: var(--clr-neutral-200);
+  transition: color 250ms ease-in-out;
+}
+.examples-menu .examples-menu-container__filter .thing-type-toggle input[type=checkbox]:checked ~ .tm-text {
+  color: var(--clr-neutral-900);
+  transition: color 250ms ease-in-out 200ms;
+}
 .examples-menu .examples-menu-container__filter .category-field {
   flex: 1 1 25rem;
   display: flex;