199d199f3SIftekharul Islam@mixin marginTransition { 2*c652ed18SDixsie Wolmers transition: margin $duration--moderate-01, background $duration--moderate-01; 399d199f3SIftekharul Islam} 499d199f3SIftekharul Islam 599d199f3SIftekharul Islam@mixin borderRadius { 699d199f3SIftekharul Islam -webkit-border-radius: 60px; 799d199f3SIftekharul Islam -moz-border-radius: 60px; 899d199f3SIftekharul Islam border-radius: 60px; 999d199f3SIftekharul Islam} 1099d199f3SIftekharul Islam 11*c652ed18SDixsie Wolmers.toggle-container { 12*c652ed18SDixsie Wolmers display: flex; 13*c652ed18SDixsie Wolmers} 14*c652ed18SDixsie Wolmers 1599d199f3SIftekharul Islam.toggle-switch { 1699d199f3SIftekharul Islam position: absolute; 17*c652ed18SDixsie Wolmers top: 0; 1899d199f3SIftekharul Islam opacity: 0; 1999d199f3SIftekharul Islam} 2099d199f3SIftekharul Islam 2199d199f3SIftekharul Islam.toggle-switch + label { 2299d199f3SIftekharul Islam display: block; 2399d199f3SIftekharul Islam position: relative; 2499d199f3SIftekharul Islam cursor: pointer; 2599d199f3SIftekharul Islam outline: none; 2699d199f3SIftekharul Islam -webkit-user-select: none; 2799d199f3SIftekharul Islam -moz-user-select: none; 2899d199f3SIftekharul Islam -ms-user-select: none; 2999d199f3SIftekharul Islam user-select: none; 3099d199f3SIftekharul Islam} 3199d199f3SIftekharul Islam 3299d199f3SIftekharul Islam.toggle label { 3399d199f3SIftekharul Islam text-indent: -9999px; 34*c652ed18SDixsie Wolmers margin-right: 0.3rem; 35*c652ed18SDixsie Wolmers} 36*c652ed18SDixsie Wolmers 37*c652ed18SDixsie Wolmersinput.toggle-switch__round-flat:focus + label { 38*c652ed18SDixsie Wolmers outline: 1px solid $primary-accent; 39*c652ed18SDixsie Wolmers outline-offset: 3px; 4099d199f3SIftekharul Islam} 4199d199f3SIftekharul Islam 4299d199f3SIftekharul Islaminput.toggle-switch__round-flat + label { 4399d199f3SIftekharul Islam padding: 2px; 44*c652ed18SDixsie Wolmers width: 43px; 45*c652ed18SDixsie Wolmers height: 22px; 466f7ec80eSYoshie Muranaka background-color: $border-color-02; 4799d199f3SIftekharul Islam @include borderRadius; 4899d199f3SIftekharul Islam @include marginTransition; 4999d199f3SIftekharul Islam} 5099d199f3SIftekharul Islam 51*c652ed18SDixsie Wolmersinput.toggle-switch__round-flat + label:before, 52*c652ed18SDixsie Wolmersinput.toggle-switch__round-flat + label:after { 5399d199f3SIftekharul Islam display: block; 5499d199f3SIftekharul Islam position: absolute; 5599d199f3SIftekharul Islam content: ""; 5699d199f3SIftekharul Islam} 5799d199f3SIftekharul Islaminput.toggle-switch__round-flat + label:before { 5899d199f3SIftekharul Islam top: 2px; 5999d199f3SIftekharul Islam left: 2px; 6099d199f3SIftekharul Islam bottom: 2px; 6199d199f3SIftekharul Islam right: 2px; 626f7ec80eSYoshie Muranaka background-color: $primary-light; 6399d199f3SIftekharul Islam @include borderRadius; 6499d199f3SIftekharul Islam @include marginTransition; 6599d199f3SIftekharul Islam} 6699d199f3SIftekharul Islaminput.toggle-switch__round-flat + label:after { 6799d199f3SIftekharul Islam top: 4px; 6899d199f3SIftekharul Islam left: 4px; 6999d199f3SIftekharul Islam bottom: 4px; 70*c652ed18SDixsie Wolmers width: 15px; 716f7ec80eSYoshie Muranaka background-color: $border-color-02; 7299d199f3SIftekharul Islam -webkit-border-radius: 52px; 7399d199f3SIftekharul Islam -moz-border-radius: 52px; 7499d199f3SIftekharul Islam border-radius: 52px; 7599d199f3SIftekharul Islam @include marginTransition; 7699d199f3SIftekharul Islam} 7799d199f3SIftekharul Islaminput.toggle-switch__round-flat:checked + label { 786f7ec80eSYoshie Muranaka background-color: $primary-accent; 7999d199f3SIftekharul Islam} 8099d199f3SIftekharul Islaminput.toggle-switch__round-flat:checked + label:before { 81*c652ed18SDixsie Wolmers background-color: $primary-accent; 8299d199f3SIftekharul Islam} 8399d199f3SIftekharul Islaminput.toggle-switch__round-flat:checked + label:after { 8499d199f3SIftekharul Islam margin-left: 20px; 85*c652ed18SDixsie Wolmers background-color: $primary-light; 8699d199f3SIftekharul Islam} 87