gsy-component-library
Version:
reusable components from grid singularity
54 lines (53 loc) • 1.92 kB
CSS
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700");
.switch {
display: flex;
flex-direction: column;
position: relative; }
.theme-d3a .switch__input:checked + .switch__slider {
background-color: #35d7c6; }
.theme-verbund .switch__input:checked + .switch__slider {
background-color: #35d7c6; }
.switch__input:checked + .switch__slider::before {
transform: translateX(26px); }
.switch__input:checked + .switch__slider .switch__slider__icon {
display: block;
margin-left: 8px;
margin-top: 2px; }
.theme-d3a .switch__input:checked + .switch__slider .switch__slider__icon svg {
fill: #fff; }
.theme-verbund .switch__input:checked + .switch__slider .switch__slider__icon svg {
fill: #fff; }
.switch__slider {
width: 60px;
height: 30px;
cursor: pointer;
transition: 0.4s;
border-radius: 34px;
position: relative; }
.theme-d3a .switch__slider {
background-color: #1d5064; }
.theme-verbund .switch__slider {
background-color: #1d5064; }
.switch__slider:focus, .switch__slider:hover {
outline: 0; }
.theme-d3a .switch__slider:focus, .theme-d3a .switch__slider:hover {
box-shadow: 5px 5px 0 0 rgba(9, 21, 25, 0.25); }
.theme-verbund .switch__slider:focus, .theme-verbund .switch__slider:hover {
box-shadow: 5px 5px 0 0 rgba(9, 21, 25, 0.25); }
.switch__slider::before {
content: '';
transition: 0.4s;
height: 22px;
width: 22px;
left: 6px;
bottom: 4px;
border-radius: 50%;
position: absolute;
display: block; }
.theme-d3a .switch__slider::before {
background-color: #fff; }
.theme-verbund .switch__slider::before {
background-color: #fff; }
.switch__slider__icon {
display: none; }