@gsretail.com/gui-core/build/core/Switch/GuiSwitch.styled.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n}from"../../node_modules/tslib/tslib.es6.js";import t from"@emotion/styled";var i,e=function(e){return t(e)(i||(i=n(["\n\n  &.gui-switch {\n\n    .MuiFormControlLabel-root {\n      cursor: pointer;\n      margin-left: 0; //-11px;\n      margin-right: 0; //16px;\n\n      & .labelTxt {\n        font-size: 0.8125rem; //13px\n        white-space: nowrap;\n      }\n\n      &.MuiFormControlLabel-labelPlacementStart {\n        & .labelTxt {\n          padding: 0 8px 0 0;\n        }\n      }\n      &.MuiFormControlLabel-labelPlacementTop {\n        & .labelTxt {\n          padding: 0 0 4px 0;\n        }\n      }\n      &.MuiFormControlLabel-labelPlacementBottom {\n        & .labelTxt {\n          padding: 4px 0 0 0;\n        }\n      }\n      &.MuiFormControlLabel-labelPlacementEnd {\n        & .labelTxt {\n          padding: 0 8px;\n        }\n      }\n\n      &.Mui-disabled {\n        cursor: not-allowed;\n        opacity: 0.4;\n      }\n    }\n\n    .MuiSwitch-root {\n      width: 52px;\n      height: 24px;\n      padding: 0;\n\n      & .MuiSwitch-track {\n        opacity: 1;\n        border-radius: 20px;\n      }\n\n      & .MuiSwitch-switchBase {\n        padding: 2px 3px;\n\n        & .MuiSwitch-thumb {\n          width: 20px;\n          height: 20px;\n          background-color: ",";\n        }\n\n        &:not(.Mui-checked) + .MuiSwitch-track {\n          background-color: ",";\n        }\n\n        &.Mui-checked {\n          -webkit-transform: translateX(26px);\n          -ms-transform: translateX(26px);\n          transform: translateX(26px);\n\n          & + .MuiSwitch-track {\n            opacity: 1;\n          }\n\n          &.MuiSwitch-colorSecondary +.MuiSwitch-track {\n            background-color: ",";\n          }\n        }\n\n        &.Mui-disabled {\n          & + .MuiSwitch-track {\n            opacity: unset;\n          }\n        }\n      }\n\n      // label\n      & + p {\n        position: relative;\n        top: 1px;\n      }\n\n      &.MuiSwitch-sizeSmall {\n        width: 48px;\n        height: 20px;\n\n        & .MuiButtonBase-root {\n          & .MuiSwitch-thumb {\n            width: 16px;\n            height: 16px;\n          }\n        }\n      }\n    }\n  }\n\n"],["\n\n  &.gui-switch {\n\n    .MuiFormControlLabel-root {\n      cursor: pointer;\n      margin-left: 0; //-11px;\n      margin-right: 0; //16px;\n\n      & .labelTxt {\n        font-size: 0.8125rem; //13px\n        white-space: nowrap;\n      }\n\n      &.MuiFormControlLabel-labelPlacementStart {\n        & .labelTxt {\n          padding: 0 8px 0 0;\n        }\n      }\n      &.MuiFormControlLabel-labelPlacementTop {\n        & .labelTxt {\n          padding: 0 0 4px 0;\n        }\n      }\n      &.MuiFormControlLabel-labelPlacementBottom {\n        & .labelTxt {\n          padding: 4px 0 0 0;\n        }\n      }\n      &.MuiFormControlLabel-labelPlacementEnd {\n        & .labelTxt {\n          padding: 0 8px;\n        }\n      }\n\n      &.Mui-disabled {\n        cursor: not-allowed;\n        opacity: 0.4;\n      }\n    }\n\n    .MuiSwitch-root {\n      width: 52px;\n      height: 24px;\n      padding: 0;\n\n      & .MuiSwitch-track {\n        opacity: 1;\n        border-radius: 20px;\n      }\n\n      & .MuiSwitch-switchBase {\n        padding: 2px 3px;\n\n        & .MuiSwitch-thumb {\n          width: 20px;\n          height: 20px;\n          background-color: ",";\n        }\n\n        &:not(.Mui-checked) + .MuiSwitch-track {\n          background-color: ",";\n        }\n\n        &.Mui-checked {\n          -webkit-transform: translateX(26px);\n          -ms-transform: translateX(26px);\n          transform: translateX(26px);\n\n          & + .MuiSwitch-track {\n            opacity: 1;\n          }\n\n          &.MuiSwitch-colorSecondary +.MuiSwitch-track {\n            background-color: ",";\n          }\n        }\n\n        &.Mui-disabled {\n          & + .MuiSwitch-track {\n            opacity: unset;\n          }\n        }\n      }\n\n      // label\n      & + p {\n        position: relative;\n        top: 1px;\n      }\n\n      &.MuiSwitch-sizeSmall {\n        width: 48px;\n        height: 20px;\n\n        & .MuiButtonBase-root {\n          & .MuiSwitch-thumb {\n            width: 16px;\n            height: 16px;\n          }\n        }\n      }\n    }\n  }\n\n"])),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.grey[400]}),(function(n){return n.theme.palette.grey[600]}))};export{e as default};