Skip to content

Instantly share code, notes, and snippets.

@fbaierl
Last active August 30, 2021 08:29
Show Gist options
  • Save fbaierl/5cb1616402ccb589b0d82691ec90b848 to your computer and use it in GitHub Desktop.
Save fbaierl/5cb1616402ccb589b0d82691ec90b848 to your computer and use it in GitHub Desktop.
#toggle-switch-container {
width: 160px;
height: 36px;
margin: auto;
position: relative;
border-radius: 6px;
overflow: hidden;
user-select: none;
cursor: pointer;
}
.toggle-inner-container {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
text-transform: uppercase;
font-size: .6em;
letter-spacing: .2em;
}
.toggle-inner-container:first-child {
background: #e9e9e9;
color: #a9a9a9;
}
.toggle-inner-container:nth-child(2) {
background: dodgerblue;
color: white;
clip-path: inset(0 50% 0 0);
transition: .3s cubic-bezier(0,0,0,1);
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
box-sizing: border-box;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
/**
* A toggle switch with two labels. Modeled after: https://codemyui.com/toggle-switch-with-lables/
*/
object ToggleSwitchWithLabels {
private var toggled = true
def apply(labelOn: String, labelOff: String) = {
def onClick = {
println("on click: " + toggled)
toggled = !toggled
if (toggled) {
jQuery("#toggle-container").css("clipPath", "inset(0 50% 0 0)")
jQuery("#toggle-container").css("backgroundColor", "dodgerblue")
} else {
jQuery("#toggle-container").css("clipPath", "inset(0 0 0 50%)")
jQuery("#toggle-container").css("backgroundColor", "#D74046")
}
}
div(id := "toggle-switch-container", onclick := {() => onClick })(
div(cls := "toggle-inner-container")(
div(cls := "toggle")(
p(labelOff)
),
div(cls := "toggle")(
p(labelOn)
)
),
div(id := "toggle-container", cls := "toggle-inner-container")(
div(cls := "toggle")(
p(labelOff)
),
div(cls := "toggle")(
p(labelOn)
)
)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment