Permalink
Fetching contributors…
Cannot retrieve contributors at this time
235 lines (192 sloc) 5.65 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("form") {
fieldset {
padding: $padding 0;
margin: 0;
border: 0;
border-top: 1px solid $gray-dark;
&.no-legend {
border: 0;
padding: 0;
}
}
legend {
font-size: 1.3rem;
padding-#{$align-opposite-direction}: $padding;
}
select[multiple],
select[size] { height: auto; }
// Override normalize
input[type="search"] {
box-sizing: border-box;
-webkit-appearance: none;
}
// Required values to match browser restrictions
label,
#{$form-class-input-static} {
font-size: inherit;
line-height: normal;
}
//-------------------- Inputs --------------------//
#{$form-class-input},
#{$form-class-input-static},
#{$form-class-input-radio},
#{$form-class-input-checkbox} {
@include reset-inline-block;
line-height: normal;
border: 1px solid $gray-dark;
border-radius: 0;
-webkit-appearance: none; // Remove inner shadow on iOS
@include size-medium;
@include is-small(true, true) { @include size-small; }
@include is-large(true, true) { @include size-large; }
}
#{$form-class-input} {
background: $gray-lightest;
border-radius: $round;
transition: all $default-transition;
&:hover { border-color: $gray-darkest; }
&:focus {
border-color: $info;
}
&[readonly] {
color: $gray-darkest;
border: 1px solid $gray-dark;
}
&.is-disabled,
&[disabled],
option[disabled],
optgroup[disabled] {
color: $gray-darkest;
border-color: $gray;
}
}
#{$form-class-input-static} {
background: transparent;
border-color: transparent;
padding-#{$align-direction}: 0 !important;
padding-#{$align-opposite-direction}: 0 !important;
}
#{$form-class-input-radio},
#{$form-class-input-checkbox} {
padding-#{$align-direction}: 0 !important;
padding-#{$align-opposite-direction}: 0 !important;
border: 0;
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
position: relative;
top: -2px;
margin-#{$align-opposite-direction}: 5px;
}
&.is-disabled {
color: $gray-darkest;
}
}
select#{$form-class-input} {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&[multiple] {
max-height: 500px;
}
&::-ms-expand {
display: none;
}
}
textarea#{$form-class-input} {
line-height: 135%;
min-height: 150px;
}
//-------------------- Fields, Labels --------------------//
#{$form-class-fields} {
@include reset-list;
}
#{$form-class-field},
#{$form-class-fields} li {
margin-bottom: $margin;
&.is-required {
#{$form-class-field-label} { font-weight: bold; }
}
&:not(.is-disabled) {
&.is-error {
#{$form-class-input} {
border-color: $error;
}
#{$form-class-input-radio},
#{$form-class-input-checkbox} {
color: $error-dark;
}
}
&.is-success {
#{$form-class-input} {
border-color: $success;
}
#{$form-class-input-radio},
#{$form-class-input-checkbox} {
color: $success-dark;
}
}
}
}
#{$form-class-field-label} {
display: block;
vertical-align: middle;
margin-bottom: .5em;
}
#{$form-class-field-help} {
margin-top: .5em;
font-size: $small-size;
}
#{$form-class-actions} {
text-align: center;
}
//-------------------- Modifiers --------------------//
@if index($form-modifiers, "horizontal") {
#{$form-class-modifier-horizontal} {
#{$form-class-field},
#{$form-class-fields} li { @include grid-row; }
#{$form-class-field-label} {
text-align: $align-opposite-direction;
border: 1px solid transparent; // matches input sizes
padding-top: $medium-padding;
}
#{$form-class-field-column} {
padding-#{$align-direction}: $margin;
text-align: $align-direction;
}
}
}
@if index($form-modifiers, "inline") {
#{$form-class-modifier-inline} {
margin-bottom: -($margin / 2);
#{$form-class-field},
#{$form-class-fields} li,
#{$form-class-field-label},
#{$form-class-actions},
fieldset {
display: inline-block;
vertical-align: middle;
line-height: normal;
margin-#{$align-opposite-direction}: $margin;
margin-bottom: $margin / 2;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
#{$form-class-field-label} {
margin: 0;
margin-#{$align-opposite-direction}: ($margin / 2);
}
legend,
#{$form-class-field-help} { display: none; }
}
}
}