bike/BikeBikeBike
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Restyled select boxes

Browse Source
This commit is contained in:
Godwin 2016-08-04 13:24:45 -07:00 committed by GitHub
parent dda6ecc6fa
commit d50140b295
1 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/assets/stylesheets/_application.scss
View File

@ -3151,6 +3151,7 @@ html[data-lingua-franca-example="html"] {
.select-field {
line-height: 1.75em;
position: relative;
select {
display: block;
@ -3158,7 +3159,7 @@ html[data-lingua-franca-example="html"] {
font-family: inherit;
font-size: 1.5em;
padding: 0 0.5em;
border: 0.1rem solid #CCC;
border: 0.1em solid;
cursor: pointer;
@include default-box-shadow(top, 1.5, false);
@ -3168,6 +3169,51 @@ html[data-lingua-franca-example="html"] {
}
}
@if capable_of(pointer-events) {
label {
@include after {
content: '';
position: absolute;
display: block;
border: 0.1em solid;
width: 1.75em;
height: 1.75em;
background-color: $colour-5;
font-size: 1.5em;
z-index: 1;
right: 0em;
bottom: 0em;
pointer-events: none;
}
@include before {
content: '';
position: absolute;
display: block;
@include _(transform, rotate(-45deg));
border: 0 solid $white;
border-width: 0 0 0.25em 0.25em;
width: 1em;
height: 1em;
right: 0.75em;
bottom: 1em;
z-index: 2;
pointer-events: none;
}
}
&:hover label {
@include after {
background-color: $colour-3;
}
}
select {
padding-right: 2.25em;
@include _(appearance, none);
}
}
&.full select {
width: 100%;
margin-bottom: 2em;