Permalink
Fetching contributors…
Cannot retrieve contributors at this time
136 lines (113 sloc) 3.48 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("input") {
#{$input-class} {
@include reset-inline-block;
}
// Checkbox, radio
#{$input-class} {
#{$input-class-checkbox},
#{$input-class-radio} {
@include reset-inline-block;
background: $gray-lightest;
border: 1px solid $gray-dark;
width: 16px;
height: 16px;
top: -3px;
line-height: 1rem;
border-radius: $round;
&:hover { border-color: $gray-darkest; }
}
#{$input-class-radio} { border-radius: 50%; }
input {
display: none;
// Style when the checkbox is checked
&:checked + #{$input-class-checkbox},
&:checked + #{$input-class-radio} {
border-color: $info;
background: $info-light;
}
// Style when input is disabled
&[disabled] + #{$input-class-checkbox},
&[disabled] + #{$input-class-radio} {
cursor: not-allowed;
border-color: $gray;
}
}
}
// Select
#{$input-class} {
#{$input-class-select} {
@include reset-inline-block;
cursor: pointer;
background: $gray-lightest;
border: 1px solid $gray-dark;
border-radius: $round;
white-space: nowrap;
line-height: 1rem;
z-index: 3;
&.is-active {
border-color: $info;
}
}
#{$input-class-select-label},
#{$input-class-select-arrow} {
display: inline-block;
vertical-align: middle;
line-height: normal;
@include size-medium;
}
#{$input-class-select-arrow} {
float: $align-opposite-direction;
.caret-down { border-top-color: #000; }
}
// Position the real select over the custom one
select {
position: absolute;
top: 0;
left: 0;
z-index: 5;
opacity: 0;
width: 100%;
// Style when the select is hovered
&:hover + #{$input-class-select} {
border-color: $gray-darkest;
}
// Style when the select is focused
&:focus + #{$input-class-select} {
border-color: $info;
}
// Style when select is disabled
&[disabled] + #{$input-class-select} {
cursor: not-allowed;
color: $gray-darkest;
border-color: $gray;
#{$input-class-select-arrow} { opacity: $default-opacity; }
}
}
// Select dropdown
#{$input-class-select-options} {
max-height: 300px;
overflow: auto;
z-index: 5;
li.is-disabled {
> a,
> a:hover {
background: none;
color: $gray-darkest;
cursor: default;
}
}
&.hide-selected {
li.is-active { display: none !important; }
}
&.hide-first {
li:first-child:not(#{$drop-class-heading}) { display: none !important; }
}
}
}
}