diff --git a/scss/_forms.scss b/scss/_forms.scss index 3b281110..79667eb9 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -46,9 +46,10 @@ legend { margin-bottom: $base-line-height + px; @include font-size($base-font-size * 1.5); @include line-height($base-line-height * 2); - color: $labelColour; + color: $label-colour; border: 0; border-bottom: 1px solid #eee; + white-space: normal; // Small & small { @@ -66,6 +67,8 @@ textarea { @include font-size($base-font-size); @include line-height($base-line-height); font-weight: normal; + vertical-align: baseline; + *vertical-align: middle; } // And only set font-family here for those that need it (note the missing label element) @@ -80,12 +83,12 @@ textarea { label { display: block; margin-bottom: 5px; - color: $labelColour; + color: $label-colour; font-weight: bold; & small { font-weight: normal; - color: lighten($labelColour, 30%); + color: lighten($label-colour, 30%); } &.checkbox, @@ -108,25 +111,24 @@ textarea, select, .uneditable-input, .file-wrapper { - width: 210px; height: $base-line-height * 1.5 + px; padding: 4px; margin-bottom: 9px; @include font-size($base-font-size); @include line-height($base-line-height); - color: $inputColour; + color: $input-colour; background-color: #FFF; - border: 1px solid $inputBorder; + border: 1px solid $input-border; @include border-radius(3px); } + .uneditable-textarea { width: auto; height: auto; } - // Mini reset for unique input types input { &[type="image"], @@ -136,12 +138,13 @@ input { height: auto; padding: 0; margin: 3px 0; - *margin-top: 0; /* IE7 */ line-height: normal; cursor: pointer; @include border-radius(0); - border: 0 \9; /* IE9 and down */ + @include box-sizing(border-box); + border: 0 \9; // IE9 and down } + &[type="image"] { border: 0; } @@ -152,19 +155,11 @@ input { padding: initial; line-height: initial; border: initial; - background-color: $inputBackground; + background-color: $input-background; background-color: initial; @include box-shadow(none); } - // Help out input buttons - &[type="button"], - &[type="reset"], - &[type="submit"] { - width: auto; - height: auto; - } - // Remove shadow from image inputs &[type="image"] { @include box-shadow(none); @@ -187,6 +182,17 @@ input { } +// Help out input buttons +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + width: auto; + height: auto; + cursor: pointer; + -webkit-appearance: button; +} + // Set the height of select and file controls to match text inputs select { @@ -196,7 +202,7 @@ select { @include line-height(28); // Chrome on Linux and Mobile Safari need background-color - background-color: $inputBackground; + background-color: $input-background; // Make multiple select elements height not fixed &[multiple], @@ -306,12 +312,7 @@ select { input, select, textarea, -.uneditable-input, -// Redeclare since the fluid row class is more specific -.row-fluid input, -.row-fluid select, -.row-fluid textarea, -.row-fluid .uneditable-input { +.uneditable-input { &[class*="span"] { float: none; margin-left: 0; @@ -322,9 +323,6 @@ textarea, width: 90%; } -// GRID SIZING FOR INPUTS -//#grid > .input ($gridColumnWidth, $gridGutterWidth); - // DISABLED STATE // -------------- // Disabled and read-only inputs @@ -501,8 +499,6 @@ textarea { .search-query { padding-left: 14px; padding-right: 14px; - padding-left: 4px \9; // IE7-8 doesn't have border-radius, so don't indent the padding - padding-right: 4px \9; margin-bottom: 0; // remove the default margin on all inputs @include border-radius(100px); } @@ -516,7 +512,7 @@ textarea { padding: ($base-line-height - 1 + px) 20px ($base-line-height + px); margin-top: $base-line-height + px; margin-bottom: $base-line-height + px; - background-color: $formActionsBackground; + background-color: $form-actions-background; border-top: 1px solid #ddd; @include clearfix(); // Adding clearfix to allow for .pull-right button containers @@ -531,14 +527,14 @@ textarea { // For text that needs to appear as an input but should not be an input .uneditable-input { - background-color: $inputBackground; + background-color: $input-background; border-color: #eee; @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); cursor: not-allowed; } // Placeholder text gets special styles; can't be bundled together though for some reason -@include placeholder($placeholderText); +@include placeholder($placeholder-text); // HELP TEXT // --------- diff --git a/scss/_normalize.scss b/scss/_normalize.scss index f3f6f32d..8ad89aaa 100644 --- a/scss/_normalize.scss +++ b/scss/_normalize.scss @@ -5,23 +5,29 @@ // Kickoff uses an amended version of this file. * { - @include box-sizing(); - *behavior: url(polyfills/boxsizing.htc); + @include box-sizing(border-box); } // HTML5 display definitions // Corrects block display not defined in IE6/7/8/9 & FF3 -article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { display: block; } // Corrects inline-block display not defined in IE6/7/8/9 & FF3 audio,canvas,video { display: inline-block; - @if $support-ie7 == true { - *display: inline; - *zoom: 1; - } } // Prevents modern browsers from displaying 'audio' without controls @@ -31,35 +37,25 @@ audio:not([controls]) { height: 0; } // Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 -// Known issue: no IE6 support +// Hide the `template` element in IE, Safari, and Firefox < 22. -[hidden] { display: none; } +[hidden], +template { + display: none; +} /* ============ */ /* === BASE === */ /* ============ */ -// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units -// http://clagnut.com/blog/348/#c790 -// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom -// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ -html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} - -// Addresses font-family inconsistency between 'textarea' and other form elements. -html,button,input,select,textarea { - font-family: sans-serif; -} - // Addresses margins handled incorrectly in IE6/7 body { margin: 0; } // ============= // === LINKS === // ============= +// Remove the gray background color from active links in IE 10. +a { background: transparent; } // Addresses outline displayed oddly in Chrome a:focus { outline: thin dotted; } @@ -69,47 +65,6 @@ a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } -// ============= -// === LISTS === -// ============= - -// Addresses margins set differently in IE6/7 -dl,menu,ol.normal,ul.normal { - margin: 1em 0; -} - - - -// Addresses paddings set differently in IE6/7 -menu,ol.normal,ul.normal { - padding: 0 0 0 40px; -} - -// Corrects list images handled incorrectly in IE7 -nav ul, -nav ol { - list-style: none; - list-style-image: none; -} - -// ======================== -// === EMBEDDED CONTENT === -// ======================== -// 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 -// 2. Improves image quality when scaled in IE7 -// code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ - -img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ -} - -// Corrects overflow displayed oddly in IE9 -svg:not(:root) { - overflow: hidden; -} - - // =============== // === FIGURES === // =============== @@ -121,37 +76,6 @@ figure { // ============= // === FORMS === // ============= -// Corrects margin displayed oddly in IE6/7 -form { margin: 0; } - -// Define consistent border, margin, and padding -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - - -// 1. Corrects color not being inherited in IE6/7/8/9 -// 2. Corrects text not wrapping in FF3 -// 3. Corrects alignment displayed oddly in IE6/7 -legend { - border: 0; // 1 - padding: 0; - white-space: normal; // 2 - *margin-left: -7px; // 3 -} - - -// 1. Corrects font size not being inherited in all browsers -// 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome -// 3. Improves appearance and consistency in all browsers -button,input,select,textarea { - font-size: 100%; // 1 - margin: 0; // 2 - vertical-align: baseline; // 3 - *vertical-align: middle; // 3 -} // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet button, @@ -159,42 +83,11 @@ input { line-height: normal; // 1 } - -// 1. Improves usability and consistency of cursor style between image-type 'input' and others -// 2. Corrects inability to style clickable 'input' types in iOS -// 3. Removes inner spacing in IE7 without affecting normal text inputs -// Known issue: inner spacing remains in IE6 -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; // 1 - -webkit-appearance: button; // 2 - *overflow: visible; // 3 -} - -// Re-set default cursor for disabled elements -button[disabled], -input[disabled] { - cursor: default; -} - -// 1. Addresses box sizing set to content-box in IE8/9 -// 2. Removes excess padding in IE8/9 -// 3. Removes excess padding in IE7 -// Known issue: excess padding remains in IE6 -input[type="checkbox"], -input[type="radio"] { - @include box-sizing(border-box); // 1 - padding: 0; // 2 - *height: 13px; // 3 - *width: 13px; // 3 -} - -// 1. Addresses appearance set to searchfield in S5, Chrome +// 1. Addresses appearance set to searchfield in Safari 5, Chrome // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) input[type="search"] { -webkit-appearance: textfield; // 1 + @include box-sizing(content-box); } // Removes inner padding and search cancel button in S5, Chrome on OS X @@ -218,13 +111,3 @@ textarea { overflow: auto; // 1 vertical-align: top; // 2 } - - -// ============== -// === TABLES === -// ============== -// Remove most spacing between table cells -table { - border-collapse: collapse; - border-spacing: 0; -} diff --git a/scss/_typography.scss b/scss/_typography.scss index 8dec3bfb..5cad29b4 100644 --- a/scss/_typography.scss +++ b/scss/_typography.scss @@ -27,6 +27,13 @@ // http://modularscale.com/scale/?px1=16&px2=&ra1=1.333&ra2=0 // ------------------------------------------------------------------------------ +// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom +// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ +html { + font-size: $base-font-size + px; + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} // Body text body { @@ -185,7 +192,8 @@ ul, ol { } } -.unstyled { +.unstyled, +nav ul, nav ol { margin: 0; padding: 0; list-style: none;