VihangaN

var UniqueWidgetB=function(Sr){"use strict";var kt,O,Wo,Je,Go,qo,Er,xr,Pr,Cr,Ko,Mt={},Xo=[],Nf=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,un=Array.isArray;function ke(e,t){for(var n in t)e[n]=t[n];return e}function Yo(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function ne(e,t,n){var r,i,o,s={};for(o in t)o=="key"?r=t[o]:o=="ref"?i=t[o]:s[o]=t[o];if(arguments.length>2&&(s.children=arguments.length>3?kt.call(arguments,2):n),typeof e=="function"&&e.defaultProps!=null)for(o in e.defaultProps)s[o]===void 0&&(s[o]=e.defaultProps[o]);return Lt(e,s,r,i,null)}function Lt(e,t,n,r,i){var o={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:i??++Wo,__i:-1,__u:0};return i==null&&O.vnode!=null&&O.vnode(o),o}function Zo(){return{current:null}}function ae(e){return e.children}function ge(e,t){this.props=e,this.context=t}function ft(e,t){if(t==null)return e.__?ft(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if((n=e.__k[t])!=null&&n.__e!=null)

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>