Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
350 lines (310 sloc) 6.79 KB
// Base form styles
// based on formalize.me
// =================================================================================
/* BASE FORM STYLES
----------------- */
label {
font-weight: bold;
font-size: 12px;
}
fieldset {
border: 1px solid $grayLight;
font-size: 12px;
line-height: 1.3em;
margin: 0 0 1.5em;
padding: 0 1.4em 1.4em 1.4em;
}
legend {
background: $whiteDark;
border: 1px solid $grayLight;
@include border-radius(5px);
font-weight: bold;
display: block;
left: 0;
margin: 0;
padding: rhythm(.2) rhythm(.8);
position: relative;
@include text-shadow( 1px 1px 0 rgba($white, .7) );
top: 0;
}
fieldset {
padding-top: 1.4em;
}
legend {
margin-top: 0;
margin-bottom: 0;
}
/* INPUT WIDTH
----------------- */
.input-tiny {
width: 50px;
}
.input-small {
width: 100px;
}
.input-medium {
width: 150px;
}
.input-large {
width: 200px;
}
.input-xlarge {
width: 250px;
}
.input-xxlarge {
width: 300px;
}
.input-xxxlarge {
width: 350px;
}
.input-full {
width: 100%;
}
// Added via JS to <textarea> and class="input-full".
// Applies only to IE7. Other browsers don't need it.
.input_full_wrap {
display: block;
padding-right: 8px;
}
/* UI Consistency
----------------- */
input[type="search"]::-webkit-search-decoration {
display: none;
}
button,
select {
// Suppress red glow that Firefox
// adds to form fields by default.
&:invalid {
@include box-shadow(none);
}
}
// For Firefox
input,
textarea {
// Add blue glow.
@include border-radius(3px);
@include single-box-shadow( rgba($black, .075), 0, 1px, 1px, 0, true );
@include single-transition(all, .2s, linear, 0s);
&:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
$shadow: inset 0 1px 1px rgba($black, .075), 0 0 8px rgba(82,168,236,.6);
@include box-shadow($shadow);
}
// Suppress red glow that Firefox
// adds to form fields by default.
&:invalid {
@include box-shadow(none); }
}
input[type="file"],
input[type="radio"],
input[type="checkbox"],
select,
button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
&:focus {
@include tab-focus();
@include box-shadow(none); // override for file inputs
}
}
input[type="file"],
input[type="radio"],
input[type="checkbox"] {
&:focus,
&:active {
@include box-shadow(none);
}
}
button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
-webkit-appearance: none;
@include border-radius(4px);
@include background-clip(padding-box);
background: $grayLight image-url('button.png') repeat-x;
@include background-image(linear-gradient($white, $grayLight));
border: 1px solid;
border-color: $grayLight #bbbbbb $grayDarker;
cursor: pointer;
color: #333333;
// Helvetica Neue present, because it works better
// for line-height on buttons than Arial, on OS X.
font: bold 12px / 1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
outline: 0;
overflow: visible;
margin: 0;
padding: 3px 10px;
// IE7
*padding-top: 2px;
*padding-bottom: 0;
// Kill phantom spacing and dotted
// border that appears in Firefox.
text-shadow: white 0 1px 1px;
@include transition(none);
vertical-align: top;
width: auto;
&:hover {
background: $grayLighter;
@include background-image(linear-gradient($white, $grayLighter 1px, $gray));
}
&:active {
background: $grayLight;
@include background-image(linear-gradient($white, $grayLight 1px, $grayLighter));
@include box-shadow(inset rgba($black, 0.25) 0 1px 2px 0);
border-color: $grayDarker #bbbbbb $grayLight;
}
&::-moz-focus-inner {
border: 0;
padding: 0;
}
}
button {
// IE7
*padding-top: 1px;
*padding-bottom: 1px;
}
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
@include box-sizing(border-box);
@include background-clip(padding-box);
@include border-radius(0);
-webkit-appearance: none;
background-color: $white;
border: 1px solid;
border-color: $grayLight;
color: $black;
outline: 0;
margin: 0;
padding: 3px 4px;
text-align: left;
font-size: 13px;
// Leaving out Helvetica Neue, to not throw off size="..."
// on inputs. Arial is more reliable, on Windows and OS X.
font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
height: 2em;
vertical-align: top;
// IE7
*padding-top: 2px;
*padding-bottom: 1px;
*height: auto;
&[disabled] {
background-color: $grayLighter;
}
}
button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled] {
@include box-shadow(none);
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
color: #888888;
cursor: default;
}
// Separate rule for Firefox.
// Separate rule for IE, too.
// Cannot stack with WebKit's.
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #888888;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #888888;
}
input.placeholder_text,
textarea.placeholder_text {
color: #888888;
}
textarea,
select[size],
select[multiple] {
height: auto;
}
// Set height back to normal,
// for Opera, WebKit, and IE.
select[size="0"],
select[size="1"] {
height: 1.8em;
// IE7
*height: auto;
}
// Tweaks for Safari + Chrome.
@media (-webkit-min-device-pixel-ratio: 0) {
select[size],
select[multiple],
select[multiple][size] {
background-image: none;
padding-right: 3px;
}
select,
select[size="0"],
select[size="1"] {
background-image: image-url("select_arrow.gif");
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
::-webkit-validation-bubble-message {
-webkit-box-shadow: none;
box-shadow: none;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, $black));
border: 1px solid;
border-color: #747474 #5e5e5e #4f4f4f;
color: $white;
font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
overflow: hidden;
padding: 15px 15px 17px;
@include text-shadow($black 0 0 1px);
height: 16px;
}
::-webkit-validation-bubble-arrow,
::-webkit-validation-bubble-top-outer-arrow,
::-webkit-validation-bubble-top-inner-arrow {
-webkit-box-shadow: none;
box-shadow: none;
background: #666666;
border: 0;
}
}
textarea {
min-height: 40px;
overflow: auto;
resize: vertical;
width: 100%;
}
optgroup {
color: $black;
font-style: normal;
font-weight: normal;
// Font family repeated, for Firefox.
font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
// Kill phantom spacing and dotted
// border that appears in Firefox.
&::-moz-focus-inner {
border: 0;
padding: 0;
}
}
Something went wrong with that request. Please try again.