@brizy/ui
Version:
React elements in Brizy style
1 lines • 3.31 kB
CSS
.brz-ui-control__switch-arrows{position:relative;display:inline-block;vertical-align:middle;width:50px;height:28px;font-size:18px;text-transform:uppercase;background-color:var(--primary-dark,#3a404d);border-radius:18px;--tw-shadow:inset 0 1px 1px;--tw-shadow-colored:inset 0 1px 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:var(--switch-box-shadow, rgba(0,0,0, 0.38));--tw-shadow:var(--tw-shadow-colored);cursor:pointer;margin:0;line-height:1}.brz-ui-control__switch--check,.brz-ui-control__switch--un-check{position:absolute;top:50%;--tw-translate-y:-50%;--tw-translate-x:0px;--tw-rotate:0deg;--tw-skew-x:0deg;--tw-skew-y:0deg;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));margin:0;transition-property:inherit;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;color:var(--switch__icon-color,#000)}.brz-ui-control__switch--check{left:8px;opacity:0;font-size:12px}.brz-ui-control__switch--un-check{right:11px;font-size:8px}.brz-ui-control__switch--handle{width:20px;height:20px;position:absolute;top:50%;left:4px;--tw-translate-y:-50%;--tw-translate-x:0px;--tw-rotate:0deg;--tw-skew-x:0deg;--tw-skew-y:0deg;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-color:var(--switch__handle-bg,#fff);background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eslider handle%3C/title%3E%3Cg id='UI-Helpers' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' fill-rule='nonzero'%3E%3Cg id='slider-handle'%3E%3Ccircle id='Oval' fill='%23FFFFFF' cx='10' cy='10' r='10'%3E%3C/circle%3E%3Cpath d='M6,7 L14,7 L14,8 L6,8 L6,7 Z M6,10 L14,10 L14,11 L6,11 L6,10 Z M6,13 L14,13 L14,14 L6,14 L6,13 Z' id='Combined-Shape' fill='%233DBFE8'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");border-radius:50%;--tw-shadow:0 0 10px 1px;--tw-shadow-colored:0 0 10px 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:var(--switch__handle-box-shadow);--tw-shadow:var(--tw-shadow-colored);transition-property:left;transition-duration:150ms;transition-timing-function:cubic-bezier(0,0,0.2,1)}.brz-ui-control__switch--light .brz-ui-control__switch-arrows{--tw-bg-opacity:1;background-color:rgb(213 217 219 / var(--tw-bg-opacity,1))}.brz-ui-control__switch--on .brz-ui-control__switch-arrows{background-color:var(--active-color,#3dbfe8)}.brz-ui-control__switch--on .brz-ui-control__switch-arrows .brz-ui-control__switch--check{opacity:1}.brz-ui-control__switch--on .brz-ui-control__switch-arrows .brz-ui-control__switch--un-check{opacity:0}.brz-ui-control__switch--on .brz-ui-control__switch-arrows .brz-ui-control__switch--handle{left:25px}