From c089e5e88a834f41552eecfc8da6e6607928a4a9 Mon Sep 17 00:00:00 2001 From: Chris Ferdinandi Date: Fri, 18 Oct 2013 15:26:20 -0400 Subject: [PATCH] Fixed `input-inline` https://github.com/cferdinandi/kraken/issues/6 --- README.md | 2 + kraken.css | 510 ++++++++++++++++++++++++++--------------------------- 2 files changed, 257 insertions(+), 255 deletions(-) diff --git a/README.md b/README.md index aed2533e..31393a2f 100755 --- a/README.md +++ b/README.md @@ -15,6 +15,8 @@ Getting started with Kraken is really easy. [View the online tutorial](http://cf Kraken is an open-source project. [Learn how you can get involved.](http://cferdinandi.github.io/kraken/get-involved.html) ## Changelog +* v2.4 (October 18, 2013) + * Fixed [`input-inline`](https://github.com/cferdinandi/kraken/issues/6). * v2.3 (August 24,2013) * Minor styling update for Code section * v2.2 (July 29, 2013) diff --git a/kraken.css b/kraken.css index b6b7edf0..008ca465 100644 --- a/kraken.css +++ b/kraken.css @@ -1,6 +1,6 @@ /* ============================================================= - Kraken v2.3 + Kraken v2.4 A lightweight front-end boilerplate by Chris Ferdinandi. http://gomakethings.com @@ -23,10 +23,10 @@ Add your own here... - TYPOGRAPHIC SCALE + TYPOGRAPHIC SCALE (For math purposes. Actual font sizes in ems.) 4px, 5px, 8px, 10px, 11px, 14px, 15px, 17px (base), 20px, 23px, 26px, 30px, 34px, 51px, 68px, 85px, 102px - + * ============================================================= */ @@ -43,83 +43,83 @@ @viewport { width: device-width; zoom: 1.0; } /* Remove browser defaults */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -button, fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +button, fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; font-family: "Helvetica Neue", Arial, sans-serif; - font-size: 100%; - font: inherit; - vertical-align: baseline; + font-size: 100%; + font: inherit; + vertical-align: baseline; } /* Set display type for HTML5 semantic elements */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } -/* Force scrollbar display to prevent jumping on pages. +/* Force scrollbar display to prevent jumping on pages. * Fix text resize bug on mobile devices. */ -html { - overflow-y: scroll; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} +html { + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} /* Display audio, canvas, and video elements as inline block elements. */ -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; } /* Prevent modern browsers from displaying audio without controls. */ -audio:not([controls]) { - display: none; +audio:not([controls]) { + display: none; } -/* Prevent img and video elements from spilling +/* Prevent img and video elements from spilling * outside of the page on smaller screens. */ -img, video { - max-width: 100%; - height: auto; +img, video { + max-width: 100%; + height: auto; } -/* Prevent iframe, object, and embed elements from +/* Prevent iframe, object, and embed elements from * spilling outside of the page on smaller screens. */ iframe, object, embed { - max-width: 100%; + max-width: 100%; } /* Prevents IE from making scaled images look like crap */ -img { - -ms-interpolation-mode: bicubic; +img { + -ms-interpolation-mode: bicubic; } /* Address outline inconsistency between Chrome and other browsers. */ a:focus, -button:focus { +button:focus { outline: thin dotted; - outline: .294117647em auto -webkit-focus-ring-color; - outline-offset: -.142857143em; + outline: .294117647em auto -webkit-focus-ring-color; + outline-offset: -.142857143em; } /* Improve readability when focused and also mouse hovered in all browsers. */ -a:hover, a:active { - outline: 0; +a:hover, a:active { + outline: 0; } @@ -133,16 +133,16 @@ a:hover, a:active { /* Mobile-first. Single-column layout by default * Container sets the maximum page width. Adjust as needed. */ -.container { +.container { max-width: 80em; width: 88%; - margin-left: auto; + margin-left: auto; margin-right: auto; } /* Still mostly single-column. - * Grid-third, grid-half, and grid-img + * Grid-third, grid-half, and grid-img * provide sub-gridding on smaller screens. */ @media (min-width: 30em) { @@ -151,7 +151,7 @@ a:hover, a:active { margin-right: -1.515151515152%; } - [class^="grid-"], + [class^="grid-"], [class*=" grid-"] { float: left; width:96.969696969697%; @@ -194,26 +194,26 @@ a:hover, a:active { } .grid-3, - .grid-half { + .grid-half { width: 46.969696969697%; } .grid-4, - .grid-two-thirds { + .grid-two-thirds { width: 63.636363636364%; } - .grid-5 { + .grid-5 { width: 80.30303030303%; } .grid-6, - .grid-full { + .grid-full { width: 96.969696969697%; } - /* Offets let you shift grid elements to the right + /* Offets let you shift grid elements to the right * but stay aligned to the grid. */ .offset-1 { margin-left: 18.181818181818%; @@ -255,16 +255,16 @@ a:hover, a:active { Sets font styles for entire site. * ============================================================= */ -body { +body { font-family: "Helvetica Neue", Arial, sans-serif; - font-size: 106.25%; - line-height: 1.470588235; - color: #272727; + font-size: 106.25%; + line-height: 1.470588235; + color: #272727; background: #ffffff; } -p { - margin-bottom: 1.529411765em; +p { + margin-bottom: 1.529411765em; } @media (min-width: 40em) { @@ -274,16 +274,16 @@ p { } -/* Sizes +/* Sizes * For smaller and larger text */ -.text-small { - font-size: .882352941em; - line-height: 1.533333333; +.text-small { + font-size: .882352941em; + line-height: 1.533333333; } -.text-tall { - font-size: 1.166666667em; +.text-tall { + font-size: 1.166666667em; line-height: 1.4; } @@ -294,68 +294,68 @@ p { } -/* Colors +/* Colors * For alternate text colors */ -.text-muted { - color: #808080; +.text-muted { + color: #808080; } -/* Links +/* Links * Hyperlink styling */ -a { +a { color: #0088cc; text-decoration: none; } -a:hover { - color: #005580; - text-decoration: underline; +a:hover { + color: #005580; + text-decoration: underline; } -a img { - border: none; - background: none; -} +a img { + border: none; + background: none; +} /* Prevents border/background on linked image hover. * Adds slight opacity. */ -a:hover img { - border: none; - background: none; - opacity:0.8; - filter:alpha(opacity=80); +a:hover img { + border: none; + background: none; + opacity:0.8; + filter:alpha(opacity=80); } -/* Lists +/* Lists * Styling for lists */ -ul, ol { - margin-bottom: 1.529411765em; +ul, ol { + margin-bottom: 1.529411765em; margin-left: 2em; } -ul ul, ul ol, ol ol, ol ul { - margin-bottom: 0; +ul ul, ul ol, ol ol, ol ul { + margin-bottom: 0; } -ul { - list-style: disc; +ul { + list-style: disc; } -ol { - list-style: decimal; +ol { + list-style: decimal; } /* Removes list styling. - * For semantic reasons, should only + * For semantic reasons, should only * be used on unordered lists. */ -.list-unstyled { - margin-left: 0; - list-style: none; +.list-unstyled { + margin-left: 0; + list-style: none; } @@ -364,34 +364,34 @@ ol { * Heading class lets you use one heading type for semantics * but style it as another heading type. */ -h1, h2, h3, h4, h5, h6 { - line-height: 1.2; +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; font-weight: normal; - margin-bottom: 1em; + margin-bottom: 1em; padding-top: 1em; } -h1, .h1 { - font-size: 1.529411765em; +h1, .h1 { + font-size: 1.529411765em; padding-top: .5em; } -h2, .h2 { - font-size: 1.352941176em; +h2, .h2 { + font-size: 1.352941176em; } -h3, .h3 { - font-size: 1.176470588em; +h3, .h3 { + font-size: 1.176470588em; } h4, h5, h6, -.h4, .h5, .h6 { - font-size: .882352941em; - font-style: italic; +.h4, .h5, .h6 { + font-size: .882352941em; + font-style: italic; } -h4, .h4 { - text-transform: uppercase; +h4, .h4 { + text-transform: uppercase; } @media (min-width: 40em) { @@ -404,56 +404,56 @@ h4, .h4 { /* Lines, Quotes and Emphasis */ /* Lines */ -hr { - margin: 2em auto; - border: 0; - border-top: .071428571em solid #e5e5e5; - border-bottom: .071428571em solid #ffffff; +hr { + margin: 2em auto; + border: 0; + border-top: .071428571em solid #e5e5e5; + border-bottom: .071428571em solid #ffffff; } /* Bold */ -strong { - font-weight: bold; +strong { + font-weight: bold; } /* Italics */ -em { - font-style: italic; +em { + font-style: italic; } /* Subscript & Superscript */ -sub, sup { - position: relative; - font-size: 85%; +sub, sup { + position: relative; + font-size: 85%; font-weight: bold; - line-height: 0; - vertical-align: baseline; + line-height: 0; + vertical-align: baseline; margin-left: .3em; } -sup { - top: -0.5em; +sup { + top: -0.5em; } -sub { - bottom: -0.25em; +sub { + bottom: -0.25em; } /* Highlighting colors */ -::selection { - color: #ffffff; - background: #0088cc; +::selection { + color: #ffffff; + background: #0088cc; } -::-moz-selection { - color: #ffffff; - background: #0088cc; +::-moz-selection { + color: #ffffff; + background: #0088cc; } /* Blockquotes */ -blockquote { - border-left: .235294118em solid #e5e5e5; - margin-bottom:1.529411765em; +blockquote { + border-left: .235294118em solid #e5e5e5; + margin-bottom:1.529411765em; padding-left: 1.529411765em; padding-right: 1.529411765em; } @@ -462,10 +462,10 @@ blockquote, q { quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } @@ -477,35 +477,35 @@ q:before, q:after { Styling for code and preformatted text. * ============================================================= */ -code, pre { - font-family: Menlo, Monaco, "Courier New", monospace; +code, pre { + font-family: Menlo, Monaco, "Courier New", monospace; font-size: .823529412em; border-radius: .071428571em; } -code { +code { color: #d14; background-color: #f7f7f9; padding: .235294118em; } -pre { - display: block; +pre { + display: block; margin-bottom: 1.529411765em; line-height: 1.538461538em; background-color: #f5f5f5; padding: .823529412em; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; } -pre code { +pre code { font-size: 1em; - padding: 0; - color: inherit; - background-color: transparent; - border: 0; + padding: 0; + color: inherit; + background-color: transparent; + border: 0; } @@ -530,13 +530,13 @@ pre code { margin-bottom: .3em; } -.btn, -.btn:hover, +.btn, +.btn:hover, a .btn:hover { color: #ffffff; } -.btn:hover, +.btn:hover, a .btn:hover { background-color: #595959; border-color: #595959; @@ -548,16 +548,16 @@ a .btn:hover { border-color: #0088cc; } -.btn-blue:hover, +.btn-blue:hover, a .btn-blue:hover { background-color: #005580; - border-color: #005580; + border-color: #005580; } .btn:active { -webkit-box-shadow: inset 0 .142857143em .235294118em rgba(0, 0, 0, 0.15), 0 .071428571em .142857143em rgba(0, 0, 0, 0.05); box-shadow: inset 0 .142857143em .235294118em rgba(0, 0, 0, 0.15), 0 .071428571em .142857143em rgba(0, 0, 0, 0.05); - outline: 0; + outline: 0; } .btn-large { @@ -578,22 +578,22 @@ input[type="button"].btn-block { padding-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } .btn-block + .btn-block { - margin-top: .333333333em; + margin-top: .333333333em; } button, .btn { cursor: pointer; text-align: center; vertical-align: middle; - -webkit-appearance: none; + -webkit-appearance: none; } .btn:first-child, input.btn { - margin-left: 0; + margin-left: 0; } @@ -605,15 +605,15 @@ button, .btn { Styling for form elements. * ============================================================= */ -form, fieldset { +form, fieldset { margin-bottom: 1.529411765em; } -legend, label { +legend, label { display: block; font-weight: normal; - padding: 0; - margin-bottom: .294117647em; + padding: 0; + margin-bottom: .294117647em; } input, textarea, select { @@ -622,10 +622,10 @@ input, textarea, select { font: inherit; line-height: 1.470588235; color: #555555; - vertical-align: middle; - margin-bottom: 1.176470588em; - padding: .294117647em; - border: .071428571em solid #b8b8b8; + vertical-align: middle; + margin-bottom: 1.176470588em; + padding: .294117647em; + border: .071428571em solid #b8b8b8; border-radius: .176470588em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -636,42 +636,42 @@ form button, form .btn { margin-bottom: 1.176470588em; } -textarea { - height: 12em; +textarea { + height: 12em; } -input[type="image"], -input[type="checkbox"], +input[type="image"], +input[type="checkbox"], input[type="radio"] { display: inline-block; - width: auto; - height: auto; - padding: 0; - margin-bottom: .294117647em; - cursor: pointer; + width: auto; + height: auto; + padding: 0; + margin-bottom: .294117647em; + cursor: pointer; } -input:focus, -textarea:focus { - border-color: rgba(82, 168, 236, 0.8); +input:focus, +textarea:focus { + border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 .071428571em .071428571em rgba(0, 0, 0, 0.075), 0 0 .470588235em rgba(82, 168, 236, 0.6); box-shadow: inset 0 .071428571em .071428571em rgba(0, 0, 0, 0.075), 0 0 .470588235em rgba(82, 168, 236, 0.6); - outline: 0; - outline: thin dotted \9; + outline: 0; + outline: thin dotted \9; } -input[type="file"]:focus, -input[type="checkbox"]:focus, -select:focus { - outline: thin dotted; - outline: .294117647em auto -webkit-focus-ring-color; - outline-offset: -.117647059em; +input[type="file"]:focus, +input[type="checkbox"]:focus, +select:focus { + outline: thin dotted; + outline: .294117647em auto -webkit-focus-ring-color; + outline-offset: -.117647059em; } /* Inline Inputs */ .input-inline { - display: inline; + display: inline-block; width: auto; } @@ -701,26 +701,26 @@ select:focus { /* @font-face code. Change font names and URLs as need. * Commented Out. -@font-face { - font-family: 'icomoon'; - src: url('fonts/icomoon.eot'); - src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), - url('fonts/icomoon.woff') format('woff'), - url('fonts/icomoon.ttf') format('truetype'), - url('fonts/icomoon.svg#IcoMoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="icon-"]:before, -[class*=" icon-"]:before { - font-family: 'icomoon'; - font-style: normal; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; - text-rendering: optimizeLegibility; +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot'); + src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), + url('fonts/icomoon.woff') format('woff'), + url('fonts/icomoon.ttf') format('truetype'), + url('fonts/icomoon.svg#IcoMoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"]:before, +[class*=" icon-"]:before { + font-family: 'icomoon'; + font-style: normal; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + text-rendering: optimizeLegibility; } */ @@ -746,16 +746,16 @@ select:focus { /* Text alignment */ -.text-center { - text-align: center; +.text-center { + text-align: center; } -.text-right { - text-align: right; +.text-right { + text-align: right; } -.text-left { - text-align: left; +.text-left { + text-align: left; } @@ -778,58 +778,58 @@ select:focus { /* Spacing */ -.no-space { - margin: 0; - padding: 0; +.no-space { + margin: 0; + padding: 0; } -.no-space-bottom { - margin-bottom: 0; - padding-bottom: 0; +.no-space-bottom { + margin-bottom: 0; + padding-bottom: 0; } -.no-space-top { - margin-top: 0; - padding-top: 0; +.no-space-top { + margin-top: 0; + padding-top: 0; } -.space-bottom { - margin-bottom: 2em; +.space-bottom { + margin-bottom: 2em; } -.space-bottom-small { - margin-bottom: .470588235em; - padding-bottom: 0; +.space-bottom-small { + margin-bottom: .470588235em; + padding-bottom: 0; } -.space-top { - padding-top: .82352941234em; +.space-top { + padding-top: .82352941234em; } /* Screen Reader Text */ -.screen-reader { - position: absolute; - top: -9999em; - left:-9999em; +.screen-reader { + position: absolute; + top: -9999em; + left:-9999em; } /* Clearfix */ -.group:before, .group:after, -.container:before, .container:after, -.row:before, .row:after { - display: table; - content: ""; - *zoom: 1; +.group:before, .group:after, +.container:before, .container:after, +.row:before, .row:after { + display: table; + content: ""; + *zoom: 1; } -.group:after, -.container:after, -.row:after { - clear: both; +.group:after, +.container:after, +.row:after { + clear: both; } @@ -901,5 +901,5 @@ select:focus { tr, img { page-break-inside: avoid; } - + }