Skip to content

Instantly share code, notes, and snippets.

@gersteba

gersteba/dabblet.css

Forked from chriscoyier/dabblet.css
Last active March 27, 2018 17:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gersteba/2afc1a1c59bda8e73cb56c14d2983cf4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gersteba/2afc1a1c59bda8e73cb56c14d2983cf4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gersteba revised this gist Mar 27, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,6 +13,7 @@ label {
    }
    input[type=checkbox]:checked ~ label {
    border-color: red;
    margin-bottom: 60px;
    }

    /* Default State */
  2. gersteba revised this gist Mar 27, 2018. 3 changed files with 19 additions and 8 deletions.
    20 changes: 15 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,24 +6,34 @@ input[type=checkbox] {
    left: -9999px;
    }
    label {
    -webkit-appearance: push-button;
    -moz-appearance: button;
    display: inline-block;
    margin: 60px 0 10px 0;
    cursor: pointer;
    border: 2px solid transparent;
    }
    input[type=checkbox]:checked ~ label {
    border-color: red;
    }

    /* Default State */
    div {
    background: green;
    width: 400px;
    height: 100px;
    line-height: 100px;
    color: white;
    text-align: center;
    }
    div.first {
    background: red;
    }
    div.second{
    background: green;
    }

    /* Toggled State */
    input[type=checkbox]:checked ~ div {
    background: red;
    input[type=checkbox]:checked ~ div.first {
    background: green;
    }
    input[type=checkbox]:checked ~ div.second {
    background: red;
    }
    5 changes: 3 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    <label for="toggle-1">I'm a toggle</label>
    <input type="checkbox" id="toggle-1">
    <div>I'm controlled by toggle. No JavaScript!</div>
    <label for="toggle-1">I'm a toggle</label>
    <div class="first">I'm controlled by toggle. No JavaScript!</div>
    <div class="second">I'm controlled by toggle. No JavaScript!</div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
  3. @chriscoyier chriscoyier revised this gist Dec 21, 2011. No changes.
  4. @chriscoyier chriscoyier revised this gist Dec 21, 2011. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,7 @@ input[type=checkbox] {
    label {
    -webkit-appearance: push-button;
    -moz-appearance: button;
    display: inline-block;
    margin: 60px 0 10px 0;
    cursor: pointer;
    }
  5. @chriscoyier chriscoyier created this gist Dec 21, 2011.
    28 changes: 28 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    /* Checkbox Hack */

    input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    }
    label {
    -webkit-appearance: push-button;
    -moz-appearance: button;
    margin: 60px 0 10px 0;
    cursor: pointer;
    }

    /* Default State */
    div {
    background: green;
    width: 400px;
    height: 100px;
    line-height: 100px;
    color: white;
    text-align: center;
    }

    /* Toggled State */
    input[type=checkbox]:checked ~ div {
    background: red;
    }
    3 changes: 3 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <label for="toggle-1">I'm a toggle</label>
    <input type="checkbox" id="toggle-1">
    <div>I'm controlled by toggle. No JavaScript!</div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}