flounder
Version:
a native friendly dropdown menu
401 lines (320 loc) • 11.4 kB
CSS
/*
* Copyright (c) 2016-2018 dunnhumby Germany GmbH.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*
*/
.flounder--wrapper
{
display: inline-block;
text-align: left;
width: 18rem;
}
.flounder
{
border: 1px solid;
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.flounder__arrow--wrapper
{
background-color: transparent;
height: 100%;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: 30px;
}
.flounder__arrow--inner
{
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 7px solid #000000;
height: 0;
margin-top: 11px;
pointer-events: none;
position: absolute;
right: 10px;
width: 0;
}
div:hover ~ .flounder__arrow--wrapper,
div:hover ~ .flounder__arrow--wrapper,
input:hover ~ .flounder__arrow--wrapper,
div:focus ~ .flounder__arrow--wrapper,
input:focus ~ .flounder__arrow--wrapper
{
background-color: #eeeeee;
}
div:active ~ .flounder__arrow--wrapper,
input:active ~ .flounder__arrow--wrapper
{
background-color: #cccccc;
}
.flounder__list--wrapper
{
background-color: #ffffff;
border: 1px solid;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
display: block;
left: -1px;
max-height: 200px;
overflow-x: hidden;
position: absolute;
width: 100%;
z-index: 800;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - option */
/* -------------------------------------------------------------------------- */
.flounder__option--selected--displayed
{
border-bottom-right-radius: 0;
border-top-right-radius: 0;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 2em;
overflow: hidden;
padding-left: 3px;
padding-right: 35px;
text-indent: 0.5em;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 100%;
z-index: -1;
}
.flounder__option
{
color: #000000;
padding: 8px 10px 7px;
}
.flounder__hover
{
background-color: #eeeeee;
}
.flounder__option--selected
{
background-color: #cccccc;
}
.flounder__option--selected.flounder__hover
{
background-color: #aaaaaa;
color: #cccccc;
}
.flounder__option--description
{
color: #aaaaaa;
font-size: 0.7em;
font-weight: 200;
}
.flounder__hover > .flounder__option--description
{
color: #eeeeee;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - sections */
/* -------------------------------------------------------------------------- */
.flounder__section,
.flounder__header
{
cursor: auto;
pointer-events: none;
}
.flounder__section
{
border: 1px solid #dddddd;
margin: 5px 0 3px 2px;
padding-top: 2px;
text-indent: 5px;
}
.flounder__header
{
color: #777777;
}
.flounder__section .flounder__option
{
cursor: pointer;
pointer-events: auto;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - hover */
/* -------------------------------------------------------------------------- */
.flounder:hover,
:hover > .flounder__list--wrapper
{
z-index: 799;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - open */
/* -------------------------------------------------------------------------- */
.open .flounder
{
z-index: 800;
}
.open .flounder__option--selected--displayed
{
background-color: #ffffff;
border-bottom: none;
border-bottom-left-radius: none;
border-bottom-right-radius: none;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - search */
/* -------------------------------------------------------------------------- */
.flounder__input--search
{
background-color: transparent;
border: none;
box-sizing: border-box;
display: inline-block;
height: 26px;
padding: 0;
text-indent: 8px;
z-index: 1;
}
.flounder > .flounder__input--search
{
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.flounder__input--search:focus
{
outline: none;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - hidden classes select */
/* -------------------------------------------------------------------------- */
.flounder__option--selected--hidden
{
display: none;
}
.flounder--hidden--ios
{
height: 1px;
opacity: 0;
position: absolute;
top: 0;
width: 1px;
}
.flounder--hidden
{
left: -999999px;
position: absolute;
}
.flounder--search--hidden
{
display: none;
}
.flounder__disabled
{
border-color: #cccccc;
color: #cccccc;
cursor: auto;
pointer-events: none;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - multi select */
/* -------------------------------------------------------------------------- */
.flounder--multiple .flounder__option--selected--displayed
{
position: absolute;
}
.flounder__multiple__tag__close
{
background-image: url( "data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%20fill%3D%22%23D2D7D9%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M9%203H8v1H7v1H6V4H5V3H3v2h1v1h1v1H4v1H3v2h2V9h1V8h1v1h1v1h2V8H9V7H8V6h1V5h1V3z%22%2F%3E%3C%2Fsvg%3E" );
background-repeat: no-repeat;
cursor: pointer;
display: inline-block;
height: 13px;
left: -2px;
position: relative;
top: 3px;
width: 12px;
}
.flounder__multiple__tag__close:hover,
div:hover > .flounder__multiple__tag__close,
div:focus > .flounder__multiple__tag__close
{
background-image: url( "data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%20fill%3D%22%23279BC8%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M9%203H8v1H7v1H6V4H5V3H3v2h1v1h1v1H4v1H3v2h2V9h1V8h1v1h1v1h2V8H9V7H8V6h1V5h1V3z%22%2F%3E%3C%2Fsvg%3E" );
}
.flounder__multi--tag--list
{
margin-top: 1px;
min-height: 30px;
}
.flounder__multiple--select--tag
{
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
padding: 4px 5px;
position: relative;
user-select: none;
z-index: 2;
}
.flounder__multiple--select--tag:nth-last-child( 2 )
{
margin-right: 0;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - description */
/* -------------------------------------------------------------------------- */
.flounder__option > span,
.flounder__option > div
{
pointer-events: none;
}
/* -------------------------------------------------------------------------- */
/* FLOUNDER - loading */
/* -------------------------------------------------------------------------- */
@keyframes loading
{
0%
{
content: "Loading.";
}
33%
{
content: "Loading..";
}
66%
{
content: "Loading...";
}
}
.flounder__loading,
.flounder__loading--failed
{
color: #777777;
display: flex;
min-height: 1em;
pointer-events: none;
}
.flounder__loading:after
{
animation: loading 1s infinite;
content: "Loading";
display: block;
}
.flounder__loading--failed:after
{
content: "Data load failed";
display: block;
}
.flounder__no-results
{
cursor: initial;
}