VihangaN

 /* overriding theme class to align icons properly */
a.sf-sub-menu__link {
  display: flex;
  gap:1rem;
  align-items: center;
}


 /* icon styles */

VihangaN

@font-face {
  font-family: "duotone";
  src: url("duotone-Regular.ttf") format("truetype"),
    url("duotone-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],

VihangaN

Glassmorphism icon

A Pen by Vihanga nivarthana on CodePen.

License.

VihangaN

import React, { useState } from "react";

export default function App() {
  let [isOn, setOn] = useState(false);

  const toggle = (e) => {
    if (e.target.checked) {
      setOn(true);
    } else {
      setOn(false);

VihangaN

.slider{
    position: relative;
    width:100px;
    height: 50px;
    display: inline-block;
    cursor: pointer;
    margin:0px 10px 0px 10px;
    transform: scale(0.7);
}

VihangaN

<label className="slider" >
<input type="checkbox"/>
<div className="sort"></div>
</label>