Skip to content

Instantly share code, notes, and snippets.

@lucasmazza

lucasmazza/dabblet.css

Created August 28, 2018 00:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lucasmazza/6d2086039ed0ef25bd7d94bb37e53dbf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lucasmazza/6d2086039ed0ef25bd7d94bb37e53dbf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lucasmazza created this gist Aug 28, 2018.
    21 changes: 21 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    /**
    * Slide up menu
    */

    .thing {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: calc(50% - 200px);
    height: 50px;
    width: 400px;
    border: 1px solid #000;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    padding: 20px;
    transition: height .5s ease-in-out;
    }

    .thing.is-expanded {
    height: 90vh;
    }
    3 changes: 3 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="thing">
    <button onClick="this.parentElement.classList.toggle('is-expanded');">ohai</button>
    <div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    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","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}