Switch pure css
A Pen by Thiago Lagden on CodePen.
Created
August 10, 2016 15:44
-
-
Save lagden/67c7653b5354794b1322385515afdc88 to your computer and use it in GitHub Desktop.
Switch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment