Skip to content

Instantly share code, notes, and snippets.

/Sweet & Pure CSS3 UISwitch.markdown

Created November 3, 2015 22:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/de9a5f069b3dcbda56ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/de9a5f069b3dcbda56ee to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 3, 2015.
    9 changes: 9 additions & 0 deletions Sweet & Pure CSS3 UISwitch.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Sweet & Pure CSS3 UISwitch
    --------------------------
    A pretty sweet and pure CSS3 iOS 7 UISwitch.

    Forked from [Christian Petersen](http://codepen.io/cbp/)'s Pen [Sweet & Pure CSS3 UISwitch](http://codepen.io/cbp/pen/FLdjI/).

    A [Pen](http://codepen.io/thehalvo/pen/mejvJX) by [Jordan Halvorsen](http://codepen.io/thehalvo) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/thehalvo/pen/mejvJX/license).
    44 changes: 44 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <div class="wrapper">
    <h1>CSS3 UISwitch Example</h1>

    <section id="fields" class="fields section">
    <div class="fields__item">
    <input type="checkbox" class="uiswitch">
    <h6>Off (unchecked)</h6>
    </div>
    <div class="fields__item">
    <input type="checkbox" class="uiswitch" checked>
    <h6>On (checked)</h6>
    </div>

    <div class="fields__item">
    <input type="checkbox" class="uiswitch" disabled>
    <h6>Disabled Off</h6>
    </div>

    <div class="fields__item">
    <input type="checkbox" class="uiswitch" checked disabled>
    <h6>Disabled On</h6>
    </div>

    <div class="fields__item">
    <input type="checkbox" class="uiswitch custom">
    <h6>Custom</h6>
    </div>

    <div class="fields__item">
    <input type="checkbox" class="uiswitch my-switch">
    <h6>Custom</h6>
    </div>
    </section>

    <section id="usage" class="section">
    <p>It's a one liner!</p>
    <pre><code>&lt;input type="checkbox" class="uiswitch"&gt;</code></pre>
    <p>Or just use SCSS and customize it too!</p>
    <pre><code>import 'uiswitch';

    $uiswitch-thumb-tint: #ffffff;
    $uiswitch-on-tint: red;</code></pre>
    </section>
    </div>
    1 change: 1 addition & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // Read more @ https://github.com/fnky/css3-uiswitch
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    229 changes: 229 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,229 @@
    @import "bourbon";

    // UISwitch2
    // A customizable UISwitch in pure CSS3.
    //
    // @author Christian Petersen <[email protected]>

    $uiswitch-thumb-tint: #ffffff !default;
    $uiswitch-on-tint: #4CD964 !default;

    $uiswitch-active-tint: #e5e5e5 !default;
    $uiswitch-on-tint-start: $uiswitch-on-tint !default;
    $uiswitch-on-tint-end: desaturate($uiswitch-on-tint-start, 1) !default;
    $uiswitch-off-tint: #ffffff !default;

    %uiswitch {
    @include box-sizing(border-box);
    @include appearance(none);
    @include user-select(none);
    @include size(51px 31px);
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    outline: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    background-color: $uiswitch-active-tint;
    @include transition-duration(600ms);
    @include transition-timing-function(ease-in-out);

    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;

    // Background
    &::before {
    @include box-sizing(border-box);
    @include size(47px 27px);
    content: ' ';
    position: absolute;
    left: 2px;
    top: 2px;
    background-color: $uiswitch-off-tint;
    border-radius: 16px;
    z-index: 1;
    @include transition-duration(300ms);
    @include transform(scale(1));
    }

    // Thumb
    &::after {
    @include box-sizing(border-box);
    @include size(27px);
    content: ' ';
    position: absolute;
    border-radius: 27px;
    background: $uiswitch-thumb-tint;
    z-index: 2;
    top: 2px;
    left: 2px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25),
    0px 4px 11px 0px rgba(0,0,0,0.08),
    -1px 3px 3px 0px rgba(0,0,0,0.14);
    @include transition(transform 300ms, width 280ms);
    @include transform(translate3d(0, 0, 0));
    @include transition-timing-function(cubic-bezier(0.42, 0.800, 0.58, 1.2));
    }

    // Background tint for ON state
    &:checked {
    @include linear-gradient(-180deg, $uiswitch-on-tint-start 0%, $uiswitch-on-tint-end 100%);
    }

    // Thumb for ON state
    &:checked::after {
    @include transform(translate3d(16px, 0, 0));
    right: 18px;
    left: inherit;
    }

    // Thumb for active state
    &:active::after {
    width: 35px;
    }

    &:checked::before,
    &:active::before {
    @include transform(scale(0));
    }

    // Disabled
    &:disabled {
    opacity: 0.5;
    cursor: default;
    @include transition(none);

    &:active::before,
    &:active::after,
    &:checked:active::before,
    &:checked::before {
    width: 27px;
    @include transition(none);
    }

    &:active::before {
    @include size(41px 27px);
    @include transform(translate3d(6px, 0, 0));
    }

    &:checked:active::before {
    @include size(27px);
    @include transform(scale(0));
    }
    }
    }

    @mixin uiswitch($on-tint: $uiswitch-on-tint,
    $thumb-tint: $uiswitch-thumb-tint,
    $off-tint: $uiswitch-off-tint,
    $active-tint: $uiswitch-active-tint) {

    @extend %uiswitch;
    background-color: $active-tint;

    $on-tint-start: $on-tint;
    $on-tint-end: desaturate($on-tint-start, 1);

    &::before {
    background-color: $off-tint;
    }

    &::after {
    background: $thumb-tint;
    }

    &:checked {
    @include linear-gradient(-180deg, $on-tint-start 0%,
    $on-tint-end 100%);
    }

    }

    // Make .uiswitch class available out of the box
    .uiswitch {
    @include uiswitch();
    }

    // DEMO STUFF
    body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    }

    p {
    font-size: 18px;
    font-weight: 300;
    }

    pre, code {
    font-family: Monaco, Menlo, "Courier New", Courier, monospace;
    font-size: 13px;
    }

    pre {
    text-align: left;
    }

    pre {
    background-color: #fbfbfb;
    border: 1px solid #eee;
    padding: .6em;
    display: inline-block;
    border-radius: 3px;
    }

    .wrapper {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    }

    h1 {
    font-weight: 200;
    text-align: center;
    margin: 2em;
    }

    .fields {}

    .fields__item {
    display: inline-block;
    margin-right: 1.875em;
    text-align: center;
    }

    h6 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #aaa;
    margin: 1em;
    }

    .section {
    margin: 2em auto;
    }

    .custom { background-color: #eadcbc; }
    .custom::before { background-color: #f7f2e5; }
    .custom::after { background: #fff3a6; }
    .custom:checked {
    background-color: #ffca3f; background-image: -webkit-linear-gradient(-90deg, #ffca3f 0%, #feca40 100%);
    background-image: linear-gradient(-180deg,#ffca3f 0%, #feca40 100%);
    }

    .my-switch {
    border-radius: 4px; }
    .my-switch::before {
    border-radius: 2px; }
    .my-switch::after {
    border-radius: 1px; }
    .my-switch:checked {
    background: hotpink; }
    .my-switch:checked::after {
    background-color: #333; }