Switch

index.jade

.switchSlide
	input.switchSlide__radio-0#concessionaria_0(name='concessionaria' type='radio' value='0' required)
	input.switchSlide__radio-1#concessionaria_1(name='concessionaria' type='radio' value='1' required)
	ul.switchSlide__widget
		li.switchSlide__opt.switchSlide__opt-0
			label(for='concessionaria_0') Não
		li.switchSlide__opt.switchSlide__opt-1
			label(for='concessionaria_1') Sim

.switchSlide
	input.switchSlide__radio-0#porta_0(name='porta' type='radio' value='2' required)
	input.switchSlide__radio-1#porta_1(name='porta' type='radio' value='3' required)
	input.switchSlide__radio-2#porta_2(name='porta' type='radio' value='4' required)
	ul.switchSlide__widget
		li.switchSlide__opt.switchSlide__opt-0
			label(for='porta_0') 2
		li.switchSlide__opt.switchSlide__opt-1
			label(for='porta_1') 3
		li.switchSlide__opt.switchSlide__opt-2
			label(for='porta_2') 4

style.stylus

body
	background #FC0
	
totalRadio = 3 - 1

switchSlideBgColor = rgba(51, 51, 51, 0.5)
switchSlideTxtColor = rgba(white, 0.7)
switchSlideSelectedColor = rgba(gray, 0.7)
switchSlideBgKnob = white
marginKnob = 2px
scaleSize = 0.9

active-bar(v, num)
	&:first-child:before
		per = (v)%
		mar = marginKnob * num * 2
		calcMargin = "calc(%s + %s)" % (per mar)
		transform: translate3d(calcMargin, 0, 0) scale(scaleSize, scaleSize)
		visibility: visible
		opacity: 1

.switchSlide
	display: inline-block
	vertical-align: middle
	font-size: 1.1em
	margin-bottom 20px
	> input[type=radio]
		display: none

.switchSlide__widget
	list-style: none
	margin: 0
	padding: 0
	background-color: switchSlideBgColor
	display: flex
	flex-flow: row wrap
	justify-content: center
	align-items: center
	position: relative
	box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px
	border-radius: 5px
	font-family: Consolas, 'Liberation Mono', Courier, monospace

.switchSlide__opt
	position: relative
	display: block
	margin: 0
	padding 0
	text-align: center
	flex: 1
	color switchSlideTxtColor
	&:first-child:before
		calcMargin = marginKnob * 2
		position: absolute
		top: 0
		left: 0
		width: "calc(100% - %s)" % calcMargin
		height: "calc(100% - %s)" % calcMargin
		margin: marginKnob
		box-sizing: border-box
		background-color: switchSlideBgKnob
		content: ''
		border-radius: 5px
		visibility: hidden
		opacity: 0
		z-index 1
		will-change: transform, opacity
		transform: translate3d(0, 0, 0) scale(scaleSize, scaleSize)
		transition: transform 0.3s, opacity 0.3s
		pointer-events: none

	> label
		display block
		padding 1em 1em
		position relative
		z-index 2

for num in (0..totalRadio)
	.switchSlide__radio-{num}:checked ~ .switchSlide__widget > .switchSlide__opt
		active-bar(num * 100, num)
		&-{num}
			color switchSlideSelectedColor

switch.markdown

Switch

Switch pure css

A Pen by Thiago Lagden on CodePen.

License.