mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-04-22 19:13:44 +03:00
14ed8d4d6b
- Style search box & filter dropdown - Enable sort filter on select change - Fix some PHP notices
40 lines
1,005 B
SCSS
40 lines
1,005 B
SCSS
// Remove the browser styling from a select box and create a simple dropdown.
|
|
// See https://www.filamentgroup.com/lab/select-css.html
|
|
.custom-select {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
padding: 0.5rem 2rem 0.5rem .8rem;
|
|
width: auto;
|
|
|
|
font-size: 1em;
|
|
line-height: 1.3;
|
|
|
|
border: 1px solid $color__text-lighter;
|
|
box-shadow: none;
|
|
border-radius: 0.5em;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
|
|
background-color: transparent;
|
|
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');
|
|
background-repeat: no-repeat;
|
|
background-position: right .7em top 50%;
|
|
background-size: .65em auto;
|
|
|
|
&::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
|
|
box-shadow: 0 0 0 3px -moz-mac-focusring;
|
|
color: #222;
|
|
outline: none;
|
|
}
|
|
|
|
& option {
|
|
font-weight: normal;
|
|
}
|
|
}
|