Skip to content

Instantly share code, notes, and snippets.

@lanche86

lanche86/index.html

Created June 13, 2013 20:30
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. lanche86 created this gist Jun 13, 2013.
    10 changes: 10 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <form>
    <fieldset class="radioset">
    <ul>
    <li><input type="radio" name="radio[]" id="radio1" checked><label for="radio1">foo</label>
    <li><input type="radio" name="radio[]" id="radio2"><label for="radio2">bar</label>
    <li><input type="radio" name="radio[]" id="radio3"><label for="radio3">baz</label>
    <li><input type="radio" name="radio[]" id="radio4"><label for="radio4">qux</label>
    </ul>
    </fieldset>
    </form>
    115 changes: 115 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    @import "compass";
    * {
    -webkit-box-sizing: border-box;
    font-family: sans-serif;
    }

    body {
    background: #eee;
    margin: 2em;
    }

    .radioset {
    border: 0;
    border-radius: .5em;
    background: #f0f0f0 linear-gradient( #fefefe, #f5f5f5 25%, #f0f0f0 75%, #ddd );
    box-shadow: 0 3px 15px -5px;
    min-width: 16em;
    max-width: 30em;
    margin: auto;

    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;

    &::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 12.5%;
    right: 12.5%;
    height: 6px;
    margin-top: -3px;
    background: #CCC;
    box-shadow: inset 0 3px 5px -4px #000, 0 1px #fff;
    }
    }

    li {
    display: inline-block;
    position: relative;
    width: 25%;
    }

    [type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    label {
    line-height: 30px;
    padding-bottom: 40px;
    display: block;
    color: #789;
    text-shadow: 0 1px #fff, 0 -1px #eee;
    font-variant: small-caps;

    &::before,
    &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 60%;
    border-radius: 50%;
    @include transition( .35s cubic-bezier( 0.175, 0.885, 0.320, 1.275 ) all ); // inspired by Ladda by hakim.se
    }

    &::before {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 0 solid #CCC;
    background: #CCC;
    box-shadow: inset 0 3px 5px -4px #000, 0 2px 1px -1px #fff;
    }

    &::after {
    width: 0;
    height: 0;
    background: #fff;
    }
    }

    :checked {
    + label {

    &::before,
    &::after {
    @include transition( .4s cubic-bezier( 1, -1, 0.4, 1.4 ) all );
    }

    &::before {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    }

    &::after {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    box-shadow: inset 0 -5px 5px -5px #ccc, 0 2px 5px -2px #000;
    }
    }
    }
    }