Spaces:
Runtime error
Runtime error
| .toggleSwitch span span { | |
| display: none; | |
| } | |
| .toggleSwitch { | |
| display: inline-block; | |
| position: relative; | |
| overflow: visible; | |
| padding: 0; | |
| cursor: pointer; | |
| width: 200px; | |
| user-select: none; | |
| flex: 1 0 100px; | |
| } | |
| @media (hover: hover) { | |
| .toggleSwitch:hover a { | |
| background-color: #3c86fa; | |
| } | |
| .toggleSwitch:hover { | |
| background-color: white; | |
| } | |
| } | |
| .toggleSwitch * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .toggleSwitch label, | |
| .toggleSwitch > span { | |
| line-height: 20px; | |
| height: 20px; | |
| vertical-align: middle; | |
| } | |
| .toggleSwitch input:focus ~ a, | |
| .toggleSwitch input:focus + label { | |
| outline: none; | |
| } | |
| .toggleSwitch label { | |
| position: relative; | |
| z-index: 3; | |
| display: block; | |
| width: 100%; | |
| } | |
| .toggleSwitch input { | |
| position: absolute; | |
| opacity: 0; | |
| z-index: 5; | |
| } | |
| .toggleSwitch > span { | |
| position: absolute; | |
| left: 0; | |
| width: calc(100% - 6px); | |
| margin: 0; | |
| text-align: left; | |
| white-space: nowrap; | |
| margin: 0 3px; | |
| } | |
| .toggleSwitch > span span { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 5; | |
| display: block; | |
| width: 50%; | |
| margin-left: 50px; | |
| font-size: 1.2em; | |
| opacity: 1; | |
| text-align: center; | |
| line-height: 34px; | |
| } | |
| .toggleSwitch a { | |
| position: absolute; | |
| right: 50%; | |
| z-index: 4; | |
| display: block; | |
| top: 0; | |
| bottom: 0; | |
| padding: 0; | |
| left: 0; | |
| width: 50%; | |
| background-color: #333333; | |
| -webkit-transition: all 0.2s ease-out; | |
| -moz-transition: all 0.2s ease-out; | |
| transition: all 0.2s ease-out; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); | |
| } | |
| .toggleSwitch > span span:first-of-type { | |
| color: white; | |
| opacity: 1; | |
| left: 0; | |
| margin: 0; | |
| width: 50%; | |
| } | |
| .toggleSwitch > span span:last-of-type { | |
| left: auto; | |
| right: 0; | |
| color: black; | |
| margin: 0; | |
| width: 50%; | |
| } | |
| .toggleSwitch > span:before { | |
| content: ''; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| left: 0; | |
| top: -2px; | |
| /* background-color: #fafafa; | |
| border: 1px solid #ccc; */ | |
| border-radius: 30px; | |
| -webkit-transition: all 0.2s ease-out; | |
| -moz-transition: all 0.2s ease-out; | |
| transition: all 0.2s ease-out; | |
| } | |
| .toggleSwitch input:checked ~ a { | |
| left: 50%; | |
| } | |
| .toggleSwitch input:checked ~ span:before { | |
| /* border-color: #0097D1; | |
| box-shadow: inset 0 0 0 30px #0097D1; */ | |
| } | |
| .toggleSwitch input:checked ~ span span:first-of-type { | |
| left: 0; | |
| color: black; | |
| } | |
| .toggleSwitch input:checked ~ span span:last-of-type { | |
| /* opacity: 1; | |
| color: #fff; */ | |
| color: white; | |
| } |