@activecollab/components
Version:
ActiveCollab Components
30 lines • 3.02 kB
JavaScript
import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
export const StyledToggleSlider = styled.div.withConfig({
displayName: "Styles__StyledToggleSlider",
componentId: "sc-4n6vdf-0"
})(["padding-left:6px;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-evenly;background-color:transparent;border:1px solid var(--color-theme-600);overflow:hidden;border-radius:12.5px;font-size:11px;transition:0.3s;&::before{position:absolute;content:\"\";user-select:none;height:16px;width:16px;left:4px;bottom:3px;background-color:var(--color-theme-600);border-radius:50%;transition:0.3s;}"]);
StyledToggleSlider.displayName = "StyledToggleSlider";
export const StyledToggleSliderOff = styled.div.withConfig({
displayName: "Styles__StyledToggleSliderOff",
componentId: "sc-4n6vdf-1"
})(["user-select:none;transform:translateX(-3px);opacity:1;transition-duration:0.3s;white-space:nowrap;color:var(--color-theme-600);"]);
StyledToggleSliderOff.displayName = "StyledToggleSliderOff";
export const StyledToggleSliderOn = styled.div.withConfig({
displayName: "Styles__StyledToggleSliderOn",
componentId: "sc-4n6vdf-2"
})(["user-select:none;transform:translateX(-30px);opacity:0;transition-duration:0.3s;white-space:nowrap;color:var(--page-paper-main);"]);
StyledToggleSliderOn.displayName = "StyledToggleSliderOn";
export const StyledToggleCheckbox = styled.input.withConfig({
displayName: "Styles__StyledToggleCheckbox",
componentId: "sc-4n6vdf-3"
})(["opacity:0;width:0;height:0;&:checked + ", ":before{background-color:var(--page-paper-main);transform:translateX(25px);}&:checked + ", "{border-color:var(--color-sucess-green);background-color:var(--color-sucess-green);color:var(--color-sucess-green);", "{transform:translateX(30px);opacity:0;}", "{transform:translateX(0);opacity:1;}}&:disabled + ", "{opacity:0.5;cursor:default;}"], StyledToggleSlider, StyledToggleSlider, StyledToggleSliderOff, StyledToggleSliderOn, StyledToggleSlider);
StyledToggleCheckbox.displayName = "StyledToggleCheckbox";
const StyledHelper = css(["", "{transform:translateX(0);}", " + ", ":before{transform:translateX(3px);}", ":checked + ", "{&::before{transform:translateX(23px);}", "{transform:translateX(-2px);}}"], StyledToggleSliderOff, StyledToggleCheckbox, StyledToggleSlider, StyledToggleCheckbox, StyledToggleSlider, StyledToggleSliderOn);
export const StyledToggle = styled.label.withConfig({
displayName: "Styles__StyledToggle",
componentId: "sc-4n6vdf-4"
})(["", " ", " position:relative;display:inline-block;width:50px;height:24px;font-size:13px;font-weight:bold;line-height:13px;border-radius:12.5px;&:hover{", "}&:focus{outline:1px solid var(--color-sucess-green);outline-offset:4px;}", ""], FontStyle, BoxSizingStyle, StyledHelper, props => props.$isHovered && css(["", ""], StyledHelper));
StyledToggle.displayName = "StyledToggle";
//# sourceMappingURL=Styles.js.map