@charset "utf-8"; | |
@import "../util"; | |
$border-size: 2px; | |
$right-padding: 60px; | |
/** | |
* Input field | |
*/ | |
#q-field { | |
width: 100%; | |
margin: 0; | |
margin-bottom: 3px; | |
display: block; | |
} | |
header input { | |
outline: none; | |
font-size: 11pt; | |
border: $border-size solid $nearly-white; | |
padding: 2px; | |
} | |
#searchbar { | |
position: relative; | |
width: 100%; | |
padding-right: $right-padding; | |
button[type=submit] { | |
position: absolute; | |
font-weight: normal; | |
@include choose-item; | |
padding: 0; | |
height: 100%; | |
top: 0; | |
right: $right-distance; | |
width: 30px; | |
cursor:pointer; | |
> span:nth-of-type(1) { | |
@include blind; | |
} | |
&::after { | |
font-family: "FontAwesome"; | |
content: $fa-search; | |
} | |
border: { | |
width: $border-size; | |
style: solid; | |
color: $nearly-white; | |
} | |
&:hover { | |
@include choose-hover; | |
} | |
&:active { | |
@include choose-active; | |
} | |
/** | |
* This is just for styling the last button, | |
* in case there are more than one buttons. | |
*/ | |
&:last-of-type { | |
@include box-sizing-box(); | |
border: { | |
right-width: $border-size; | |
right-style: solid; | |
top-right-radius: $standard-border-radius; | |
bottom-right-radius: $standard-border-radius; | |
} | |
} | |
} | |
button + button { | |
right: 0; | |
} | |
} | |
#koralquery { | |
margin-top: 10px; | |
margin-right: 40px; | |
border: { | |
radius: $standard-border-radius; | |
color: $dark-green; | |
style: solid; | |
width: $border-size; | |
} | |
white-space: pre; | |
background-color: $nearly-white; | |
color: $dark-grey; | |
} | |
/** | |
* Checkbox styling | |
* http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css | |
*/ | |
.checkbox { | |
display: none; | |
+ label { | |
cursor: pointer; | |
span { | |
border-radius: 4px; | |
display: inline-block; | |
width: 1em; // 12px | |
height: 1em; | |
line-height: 1em; // 12px; | |
vertical-align: middle; | |
padding: 0; | |
margin-right: .2em; | |
/* | |
background-color: $nearly-white; | |
&:hover { | |
border-color: $nearly-white; | |
} | |
*/ | |
&::after { | |
font-family: "FontAwesome"; | |
content: $fa-check; | |
} | |
} | |
} | |
&:checked + label span { | |
&:after { | |
content: $fa-checked; | |
} | |
} | |
} |