Skip to content

Instantly share code, notes, and snippets.

@joma74

joma74/!UIUX

Last active May 9, 2018 22:03
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. joma74 revised this gist May 9, 2018. 1 changed file with 14 additions and 0 deletions.
    14 changes: 14 additions & 0 deletions flex-items-center
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <div class="flex-shrink w-32" style="min-width: 8ch;">
    <div id="positioned" class="relative">
    <select id="positioned-child-1" class="appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 pr-8 rounded">
    <option>BTC</option>
    <option>ETH</option>
    <option>LTC</option>
    </select>
    <div id="positioned-child-2" class="flex items-center pointer-events-none absolute pin-y pin-r px-1 text-grey-darker">
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
    </svg>
    </div>
    </div>
    </div>
  2. joma74 revised this gist May 9, 2018. 1 changed file with 20 additions and 0 deletions.
    20 changes: 20 additions & 0 deletions douchebag-items-center
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    .douchebag-items-center {
    top: 50%; transform: translateY(-50%);
    }

    .douchebag-justify-center {
    right: 50%; transform: translateX(-50%);
    }

    <div id="positioned" class="relative">
    <select id="positioned-child-1" class="appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 pr-8 rounded">
    <option>BTC</option>
    <option>ETH</option>
    <option>LTC</option>
    </select>
    <div id="positioned-child-2" class="douchebag-items-center pointer-events-none absolute pin-y pin-r px-1 text-grey-darker">
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
    </svg>
    </div>
    </div>
  3. joma74 created this gist May 9, 2018.
    1 change: 1 addition & 0 deletions !UIUX
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    UI/UX