css nice toggles

Subject:

references: http://codepen.io/mallendeo/pen/eLIiG

2015-12-12 10:02:02gstlouis

HTML

%h2 Toggle it!
%ul.tg-list
  %li.tg-list-item
    %h4 Light
    %input#cb1.tgl.tgl-light{type: "checkbox"}/
    %label.tgl-btn{for: "cb1"}
  %li.tg-list-item
    %h4 iOS 7
    %input#cb2.tgl.tgl-ios{type: "checkbox"}/
    %label.tgl-btn{for: "cb2"}
  %li.tg-list-item
    %h4 Skewed
    %input#cb3.tgl.tgl-skewed{type: "checkbox"}/
    %label.tgl-btn{"data-tg-off" => "OFF", "data-tg-on" => "ON", for: "cb3"}
  %li.tg-list-item
    %h4 Flat
    %input#cb4.tgl.tgl-flat{type: "checkbox"}/
    %label.tgl-btn{for: "cb4"}
  %li.tg-list-item
    %h4 Flip
    %input#cb5.tgl.tgl-flip{type: "checkbox"}/
    %label.tgl-btn{"data-tg-off" => "Nope", "data-tg-on" => "Yeah!", for: "cb5"}

CSS

html, body {
    display: flex;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tg-list{
    text-align: center;
    display: flex;
    align-items: center;
}
.tg-list-item{
    margin: 0 2em;
}
h2{
    color: #777;
}
h4{
    color: #999;
}
.tgl{
    display: none;
    // add default box-sizing for this scope
    &, &:after, &:before,
    & *, & *:after, & *:before,
    & + .tgl-btn{
        box-sizing: border-box;
        &::selection{
            background: none;
        }
    }
    + .tgl-btn{
        outline: 0;
        display: block;
        width: 4em;
        height: 2em;
        position: relative;
        cursor: pointer;
     user-select: none;
        &:after, &:before{
            position: relative;
            display: block;
            content: "";
            width: 50%;
            height: 100%;
        }
        &:after{
            left: 0;
        }
        &:before{
            display: none;
        }
    }
    &:checked{
        + .tgl-btn{
            &:after{
                left: 50%;
            }
        }
    }
}

// themes
.tgl-light{
    + .tgl-btn{
        background: #f0f0f0;
        border-radius: 2em;
        padding: 2px;
        transition: all .4s ease;
        &:after{
            border-radius: 50%;
            background: #fff;
            transition: all .2s ease;
        }
    }
    &:checked{
        + .tgl-btn{
            background: #9FD6AE;
        }
    }
}
.tgl-ios{
    + .tgl-btn{
        background: #fbfbfb;
        border-radius: 2em;
        padding: 2px;
        transition: all .4s ease;
        border: 1px solid #e8eae9;
        &:after{
            border-radius: 2em;
            background: #fbfbfb;
            transition:
        left .3s cubic-bezier(
          0.175, 0.885, 0.320, 1.275
        ),
        padding .3s ease, margin .3s ease;
            box-shadow:
        0 0 0 1px rgba(0,0,0,.1),
        0 4px 0 rgba(0,0,0,.08);
        }
    &:hover:after {
      will-change: padding;
    }
        &:active{
            box-shadow: inset 0 0 0 2em #e8eae9;
            &:after{
                padding-right: .8em;
            }
        }
    }
    &:checked{
        + .tgl-btn{
            background: #86d993;
            &:active{
                box-shadow: none;
                &:after{
                    margin-left: -.8em;
                }
            }
        }
    }
}
.tgl-skewed{
    + .tgl-btn{
        overflow: hidden;
        transform: skew(-10deg);
        backface-visibility: hidden;
        transition: all .2s ease;
        font-family: sans-serif;
        background: #888;
        &:after, &:before{
            transform: skew(10deg);
            display: inline-block;
            transition: all .2s ease;
            width: 100%;
            text-align: center;
            position: absolute;
            line-height: 2em;
            font-weight: bold;
            color: #fff;

            text-shadow: 0 1px 0 rgba(0,0,0,.4);
        }
        &:after{
            left: 100%;
            content: attr(data-tg-on);
        }    
        &:before{
            left: 0;
            content: attr(data-tg-off);
        }    
        &:active{
            background: #888;
            &:before{
                left: -10%;
            }
        }
    }
    &:checked{
        + .tgl-btn{
            background: #86d993;
            &:before{
                left: -100%;
            }    
            &:after{
                left: 0;
            }
            &:active{
                &:after{
                    left: 10%;
                }
            }
        }
    }
}
.tgl-flat{
    + .tgl-btn{
        padding: 2px;
        transition: all .2s ease;
        background: #fff;
        border: 4px solid #f2f2f2;
        border-radius: 2em;
        &:after{
            transition: all .2s ease;
            background: #f2f2f2;
            content: "";
            border-radius: 1em;
        }
    }
    &:checked{
        + .tgl-btn{
            border: 4px solid #7FC6A6;
            &:after{
                left: 50%;
                background: #7FC6A6;
            }
        }
    }
}

.tgl-flip{
    + .tgl-btn{
        padding: 2px;
        transition: all .2s ease;
        font-family: sans-serif;
        perspective: 100px;
        &:after, &:before{
            display: inline-block;
            transition: all .4s ease;
            width: 100%;
            text-align: center;
            position: absolute;
            line-height: 2em;
            font-weight: bold;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
            border-radius: 4px;
        }
        &:after{
            content: attr(data-tg-on);
            background: #02C66F;
            transform: rotateY(-180deg);
        }    
        &:before{
            background: #FF3A19;
            content: attr(data-tg-off);
        }

        &:active{
            &:before{
                transform: rotateY(-20deg);
            }
        }
    }
    &:checked{
        + .tgl-btn{
            &:before{
                transform: rotateY(180deg);
            }    
            &:after{
                transform: rotateY(0);
                left: 0;
                background: #7FC6A6;
            }
            &:active{
                &:after{
                    transform: rotateY(20deg);
                }
            }
        }
    }
}

 

gstlouis
vote
2015-12-12 10:02:34