Commit 2d99e3f8 authored by Mark Otto's avatar Mark Otto

base import of normalize into the reset css, tweaks to selector specificity across the board

parent d324a242
......@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Aug 22 12:48:23 PDT 2011
* Date: Wed Aug 24 23:48:05 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
......@@ -85,13 +85,92 @@ blockquote:before,
blockquote:after {
content: "";
}
header,
section,
footer,
html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: thin dotted;
}
article,
aside {
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button, input {
line-height: normal;
*overflow: visible;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Preboot.less
* Variables and mixins to pre-ignite any new web development project
* ------------------------------------------------------------------ */
......@@ -113,6 +192,7 @@ aside {
width: 940px;
margin: 0 auto;
zoom: 1;
margin-bottom: 18px;
}
.container:before, .container:after {
display: table;
......@@ -147,6 +227,7 @@ aside {
* ------------------------------------------------------------------------------------------- */
.row {
zoom: 1;
margin-bottom: 18px;
}
.row:before, .row:after {
display: table;
......@@ -374,6 +455,7 @@ div.container {
div.container-fluid {
padding: 0 20px;
zoom: 1;
margin-bottom: 18px;
}
div.container-fluid:before, div.container-fluid:after {
display: table;
......@@ -481,6 +563,9 @@ a:hover {
-moz-opacity: 0.65;
opacity: 0.65;
cursor: default;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn:disabled {
background-image: none;
......@@ -489,12 +574,17 @@ a:hover {
-moz-opacity: 0.65;
opacity: 0.65;
cursor: default;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn:disabled.primary {
color: #fff;
}
.btn:active {
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
......@@ -622,7 +712,7 @@ em {
line-height: inherit;
}
.muted {
color: #e6e6e6;
color: #bfbfbf;
}
blockquote {
margin-bottom: 18px;
......@@ -675,7 +765,9 @@ pre {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Forms.less
* Base styles for various input types, form layouts, and states
......@@ -683,11 +775,11 @@ pre {
form {
margin-bottom: 18px;
}
form fieldset {
fieldset {
margin-bottom: 18px;
padding-top: 18px;
}
form fieldset legend {
fieldset legend {
display: block;
margin-left: 150px;
font-size: 20px;
......@@ -700,19 +792,19 @@ form fieldset legend {
color: #404040;
}
form .clearfix {
.clearfix {
margin-bottom: 18px;
}
form label,
form input,
form select,
form textarea {
label,
input,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
}
form label {
label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
......@@ -721,20 +813,19 @@ form label {
text-align: right;
color: #404040;
}
form div.input {
div.input {
margin-left: 150px;
}
form input[type=checkbox], form input[type=radio] {
input[type=checkbox], input[type=radio] {
cursor: pointer;
}
form input[type=text],
form input[type=password],
form textarea,
form select,
form .uneditable-input {
input[type=text],
input[type=password],
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
margin: 0;
padding: 4px;
font-size: 13px;
line-height: 18px;
......@@ -745,14 +836,14 @@ form .uneditable-input {
-moz-border-radius: 3px;
border-radius: 3px;
}
form select, form input[type=file] {
select, input[type=file] {
height: 27px;
line-height: 27px;
}
form textarea {
textarea {
height: auto;
}
form .uneditable-input {
.uneditable-input {
background-color: #eee;
display: block;
border-color: #ccc;
......@@ -760,16 +851,16 @@ form .uneditable-input {
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}
form :-moz-placeholder {
:-moz-placeholder {
color: #bfbfbf;
}
form ::-webkit-input-placeholder {
::-webkit-input-placeholder {
color: #bfbfbf;
}
form input[type=text],
form input[type=password],
form select,
form textarea {
input[type=text],
input[type=password],
select,
textarea {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
......@@ -777,7 +868,7 @@ form textarea {
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
form input[type=text]:focus, form input[type=password]:focus, form textarea:focus {
input[type=text]:focus, input[type=password]:focus, textarea:focus {
outline: none;
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
......@@ -812,46 +903,46 @@ form div.error .input-prepend span.add-on, form div.error .input-append span.add
border-color: #c87872;
color: #b9554d;
}
form .input-mini,
form input.mini,
form textarea.mini,
form select.mini {
.input-mini,
input.mini,
textarea.mini,
select.mini {
width: 60px;
}
form .input-small,
form input.small,
form textarea.small,
form select.small {
.input-small,
input.small,
textarea.small,
select.small {
width: 90px;
}
form .input-medium,
form input.medium,
form textarea.medium,
form select.medium {
.input-medium,
input.medium,
textarea.medium,
select.medium {
width: 150px;
}
form .input-large,
form input.large,
form textarea.large,
form select.large {
.input-large,
input.large,
textarea.large,
select.large {
width: 210px;
}
form .input-xlarge,
form input.xlarge,
form textarea.xlarge,
form select.xlarge {
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
width: 270px;
}
form .input-xxlarge,
form input.xxlarge,
form textarea.xxlarge,
form select.xxlarge {
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
width: 530px;
}
form textarea.xxlarge {
textarea.xxlarge {
overflow-y: scroll;
}
form input[readonly]:focus, form textarea[readonly]:focus, form input.disabled {
input[readonly]:focus, textarea[readonly]:focus, input.disabled {
background: #f5f5f5;
border-color: #ddd;
-webkit-box-shadow: none;
......@@ -992,16 +1083,16 @@ form input[readonly]:focus, form textarea[readonly]:focus, form input.disabled {
.inputs-list input[type=radio], .inputs-list input[type=checkbox] {
margin-bottom: 0;
}
form.form-stacked {
.form-stacked {
padding-left: 20px;
}
form.form-stacked fieldset {
.form-stacked fieldset {
padding-top: 9px;
}
form.form-stacked legend {
.form-stacked legend {
margin-left: 0;
}
form.form-stacked label {
.form-stacked label {
display: block;
float: none;
width: auto;
......@@ -1010,30 +1101,30 @@ form.form-stacked label {
line-height: 20px;
padding-top: 0;
}
form.form-stacked .clearfix {
.form-stacked .clearfix {
margin-bottom: 9px;
}
form.form-stacked .clearfix div.input {
.form-stacked .clearfix div.input {
margin-left: 0;
}
form.form-stacked .inputs-list {
.form-stacked .inputs-list {
margin-bottom: 0;
}
form.form-stacked .inputs-list li {
.form-stacked .inputs-list li {
padding-top: 0;
}
form.form-stacked .inputs-list li label {
.form-stacked .inputs-list li label {
font-weight: normal;
padding-top: 0;
}
form.form-stacked div.error {
.form-stacked div.error {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0;
margin-left: -10px;
}
form.form-stacked .actions {
.form-stacked .actions {
margin-left: -20px;
padding-left: 20px;
}
......@@ -1575,6 +1666,7 @@ footer {
margin: 0 0 20px;
padding: 0;
zoom: 1;
margin-bottom: 18px;
}
.tabs:before,
.pills:before,
......@@ -1750,6 +1842,8 @@ footer {
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
zoom: 1;
margin-bottom: 18px;
margin-bottom: 0;
}
.modal .modal-footer:before, .modal .modal-footer:after {
display: table;
......
This diff is collapsed.
......@@ -8,174 +8,176 @@
form {
margin-bottom: @baseline;
}
// Groups of fields with labels on top (legends)
fieldset {
margin-bottom: @baseline;
padding-top: @baseline;
legend {
display: block;
margin-left: 150px;
font-size: 20px;
line-height: 1;
*margin: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
color: @grayDark;
}
// Groups of fields with labels on top (legends)
fieldset {
margin-bottom: @baseline;
padding-top: @baseline;
legend {
display: block;
margin-left: 150px;
font-size: 20px;
line-height: 1;
*margin: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
color: @grayDark;
}
}
// Parent element that clears floats and wraps labels and fields together
.clearfix {
margin-bottom: @baseline;
}
// Parent element that clears floats and wraps labels and fields together
.clearfix {
margin-bottom: @baseline;
}
// Set font for forms
label, input, select, textarea {
#font > .sans-serif(normal,13px,normal);
}
// Set font for forms
label,
input,
select,
textarea {
#font > .sans-serif(normal,13px,normal);
}
// Float labels left
label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
float: left;
width: 130px;
text-align: right;
color: @grayDark;
}
// Float labels left
label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
float: left;
width: 130px;
text-align: right;
color: @grayDark;
}
// Shift over the inside div to align all label's relevant content
div.input {
margin-left: 150px;
}
// Shift over the inside div to align all label's relevant content
div.input {
margin-left: 150px;
}
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
cursor: pointer;
}
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
cursor: pointer;
}
// Inputs, Textareas, Selects
input[type=text],
input[type=password],
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
margin: 0;
padding: 4px;
font-size: 13px;
line-height: @baseline;
height: @baseline;
color: @gray;
border: 1px solid #ccc;
.border-radius(3px);
}
select,
input[type=file] {
height: @baseline * 1.5;
line-height: @baseline * 1.5;
}
textarea {
height: auto;
}
.uneditable-input {
background-color: #eee;
display: block;
border-color: #ccc;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
}
// Inputs, Textareas, Selects
input[type=text],
input[type=password],
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
padding: 4px;
font-size: 13px;
line-height: @baseline;
height: @baseline;
color: @gray;
border: 1px solid #ccc;
.border-radius(3px);
}
select,
input[type=file] {
height: @baseline * 1.5;
line-height: @baseline * 1.5;
}
textarea {
height: auto;
}
.uneditable-input {
background-color: #eee;
display: block;
border-color: #ccc;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
}
::-webkit-input-placeholder {
color: @grayLight;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
}
::-webkit-input-placeholder {
color: @grayLight;
}
// Focus states
input[type=text],
input[type=password],
select, textarea {
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
outline: none;
border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
}
// Focus states
// Error styles
form div.error {
background: lighten(@red, 57%);
padding: 10px 0;
margin: -10px 0 10px;
.border-radius(4px);
@error-text: desaturate(lighten(@red, 25%), 25%);
> label,
span.help-inline,
span.help-block {
color: @red;
}
input[type=text],
input[type=password],
select, textarea {
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
outline: none;
border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
}
// Error styles
div.error {
background: lighten(@red, 57%);
padding: 10px 0;
margin: -10px 0 10px;
.border-radius(4px);
@error-text: desaturate(lighten(@red, 25%), 25%);
> label,
span.help-inline,
span.help-block {
color: @red;
textarea {
border-color: @error-text;
.box-shadow(0 0 3px rgba(171,41,32,.25));
&:focus {
border-color: darken(@error-text, 10%);
.box-shadow(0 0 6px rgba(171,41,32,.5));
}
input[type=text],
input[type=password],
textarea {
}
.input-prepend,
.input-append {
span.add-on {
background: lighten(@red, 50%);
border-color: @error-text;
.box-shadow(0 0 3px rgba(171,41,32,.25));
&:focus {
border-color: darken(@error-text, 10%);
.box-shadow(0 0 6px rgba(171,41,32,.5));
}
}
.input-prepend,
.input-append {
span.add-on {
background: lighten(@red, 50%);
border-color: @error-text;
color: darken(@error-text, 10%);
}
color: darken(@error-text, 10%);
}
}
}
// Form element sizes
.input-mini, input.mini, textarea.mini, select.mini {
width: 60px;
}
.input-small, input.small, textarea.small, select.small {
width: 90px;
}
.input-medium, input.medium, textarea.medium, select.medium {
width: 150px;
}
.input-large, input.large, textarea.large, select.large {
width: 210px;
}
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
width: 270px;
}
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: scroll;
}
// Form element sizes
.input-mini, input.mini, textarea.mini, select.mini {
width: 60px;
}
.input-small, input.small, textarea.small, select.small {
width: 90px;
}
.input-medium, input.medium, textarea.medium, select.medium {
width: 150px;
}
.input-large, input.large, textarea.large, select.large {
width: 210px;
}
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
width: 270px;
}
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: scroll;
}
// Turn off focus for disabled (read-only) form elements
input[readonly]:focus,
textarea[readonly]:focus,
input.disabled {
background: #f5f5f5;
border-color: #ddd;
.box-shadow(none);
}
// Turn off focus for disabled (read-only) form elements
input[readonly]:focus,
textarea[readonly]:focus,
input.disabled {
background: #f5f5f5;
border-color: #ddd;
.box-shadow(none);
}
// Actions (the buttons)
......@@ -261,13 +263,11 @@ form {
border-color: @green;
}
}
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
}
}
.input-append {
input[type=text] {
float: left;
......@@ -320,7 +320,7 @@ form {
}
// Stacked forms
form.form-stacked {
.form-stacked {
padding-left: 20px;
fieldset {
padding-top: @baseline / 2;
......@@ -364,4 +364,4 @@ form.form-stacked {
margin-left: -20px;
padding-left: 20px;
}
}
}
\ No newline at end of file
......@@ -558,6 +558,7 @@ footer {
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 #fff);
.clearfix();
margin-bottom: 0;
.btn {
float: right;
margin-left: 10px;
......
......@@ -4,7 +4,7 @@
// ERIC MEYER RESET
// ----------------
// --------------------------------------------------
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
......@@ -13,9 +13,133 @@ ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
// HTML5
// -----
// Normalize.css
// Pulling in select resets form the normalize.css project
// --------------------------------------------------
header, section, footer, article, aside {
// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
outline: thin dotted;
}
// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
// Display block in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
// Prevents modern browsers from displaying 'audio' without controls
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio:not([controls]) {
display: none;
}
// Prevents sub and sup affecting line-height in all browsers
// -------------------------
// Source: http://github.com/necolas/normalize.css
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Img border in a's and image quality
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
// Forms
// -------------------------
// Source: http://github.com/necolas/normalize.css
// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
*overflow: visible; // Inner spacing ie IE6/7
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; // Cursors on all buttons applied consistently
-webkit-appearance: button; // Style clicable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
overflow: auto; // Remove vertical scrollbar in IE6-9
vertical-align: top; // Readability and alignment cross-browser
}
// Tables
// -------------------------
// Source: http://github.com/necolas/normalize.css
// Remove spacing between table cells
table {
border-collapse: collapse;
border-spacing: 0;
}
\ No newline at end of file
......@@ -152,6 +152,7 @@ a {
background-image: none;
.opacity(65);
cursor: default;
.box-shadow(none);
}
// this can't be included with the .disabled def because IE8 and below will drop it ;_;
......@@ -159,10 +160,13 @@ a {
background-image: none;
.opacity(65);
cursor: default;
color: #fff;
.box-shadow(none);
&.primary {
color: #fff;
}
}
&:active {
@shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
@shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
}
......
......@@ -130,7 +130,7 @@ em {
line-height: inherit;
}
.muted {
color: @grayLighter;
color: @grayLight;
}
// Blockquotes
......@@ -181,5 +181,8 @@ pre {
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment