Skip to content

Instantly share code, notes, and snippets.

@g33kidd

g33kidd/SassMeister-input-HTML.html

Created March 30, 2015 16:29
Show Gist options
  • Save g33kidd/62a3dfb1abb2e7ec5a46 to your computer and use it in GitHub Desktop.
Save g33kidd/62a3dfb1abb2e7ec5a46 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. g33kidd created this gist Mar 30, 2015.
    8 changes: 8 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div class="dropdown">
    <input type="checkbox" id="dropdownToggle" />
    <label for="dropdownToggle">DROPDOWN</label>
    <ul class="dropdown-menu">
    <li>List Item</li>
    <li>List Item</li>
    </ul>
    </div>
    17 changes: 17 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    .dropdown {
    #dropdownToggle {
    display:none;
    &:checked ~ .dropdown-menu {
    display: block;
    }
    }

    .dropdown-menu {
    display: none;
    }
    }
    9 changes: 9 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    .dropdown #dropdownToggle {
    display: none;
    }
    .dropdown #dropdownToggle:checked ~ .dropdown-menu {
    display: block;
    }
    .dropdown .dropdown-menu {
    display: none;
    }
    8 changes: 8 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div class="dropdown">
    <input type="checkbox" id="dropdownToggle" />
    <label for="dropdownToggle">DROPDOWN</label>
    <ul class="dropdown-menu">
    <li>List Item</li>
    <li>List Item</li>
    </ul>
    </div>