switch.scss
TLDR
The switch.scss
file defines the styling for a switch widget. It includes styles for a switch container, as well as styles for different states and sizes of the switch.
.Switch.override-main {
display: flex;
flex-shrink: 0;
align-items: center;
box-sizing: content-box;
height: 14px;
width: 26px;
border-radius: 44px;
padding: 2px;
background-color: rgba(var(--center-channel-color-rgb), 0.24);
transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
&:not(.readonly) {
cursor: pointer;
}
&.on {
background-color: rgb(var(--button-bg-rgb));
.octo-switch-inner {
transform: translateX(12px) translateY(0);
}
}
.octo-switch-inner {
width: 14px;
height: 14px;
border-radius: 44px;
background-color: rgb(var(--center-channel-bg-rgb));
transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
transform: translateX(0) translateY(0);
}
&.size--medium {
width: 36px;
height: 20px;
.octo-switch-inner {
width: 20px;
height: 20px;
}
&.on {
.octo-switch-inner {
transform: translateX(16px) translateY(0);
}
}
}
}