vendor/assets/stylesheets/pure-nr.css in pure-css-rails-0.0.1 vs vendor/assets/stylesheets/pure-nr.css in pure-css-rails-0.0.2

- old
+ new

@@ -1,7 +1,7 @@ /*! -Pure v0.1.1-pre +Pure v0.2.0 Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yui/pure/blob/master/LICENSE.md */ /*! @@ -548,25 +548,22 @@ text-align: center; cursor: pointer; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; } - /* Firefox: Get rid of the inner focus border */ -.pure-button::-moz-focus-inner{ +.pure-button::-moz-focus-inner { padding: 0; border: 0; } -a:focus { - outline: none; -} +/*csslint unqualified-attributes:false, outline-none:false*/ - .pure-button { font-size: 100%; *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/ *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */ padding: 0.5em 1.5em 0.5em; @@ -575,46 +572,43 @@ *color: #444; /* IE 6 & 7 */ border: 1px solid #999; /*IE 6/7/8*/ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ background-color: #E6E6E6; text-decoration: none; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; border-radius: 2px; -webkit-font-smoothing: antialiased; /* Transitions */ -webkit-transition: 0.1s linear -webkit-box-shadow; -moz-transition: 0.1s linear -moz-box-shadow; -ms-transition: 0.1s linear box-shadow; -o-transition: 0.1s linear box-shadow; transition: 0.1s linear box-shadow; } - .pure-button-hover, -.pure-button:hover { - - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0); - - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.05))); - background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); - background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.05)); - background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); - background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); - background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); +.pure-button:hover, +.pure-button:focus { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); + background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); + background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10)); + background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); + background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); + background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); } - +.pure-button:focus { + outline: 0; +} .pure-button-active, .pure-button:active { - -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; - -moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; } .pure-button[disabled], .pure-button-disabled, .pure-button-disabled:hover, +.pure-button-disabled:focus, .pure-button-disabled:active { border: none; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=40); @@ -624,33 +618,27 @@ cursor: not-allowed; box-shadow: none; } .pure-button-hidden { - display:none; + display: none; } /* Firefox: Get rid of the inner focus border */ .pure-button::-moz-focus-inner{ padding: 0; border: 0; } - -/* Sam */ .pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { background-color: rgb(0, 120, 231); color: #fff; } -.pure-button:-moz-focusring { - outline-color: rgba(0, 0, 0, 0.85); -} - /* This page has Normalize.css form-specific style rules applied to a .pure-form context */ /* ========== Forms Core =========*/ @@ -797,178 +785,255 @@ .pure-form textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } -.pure-form input, -.pure-form select { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - font-size: 0.8em; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - -webkit-transition: 0.3s linear border; - -moz-transition: 0.3s linear border; - -ms-transition: 0.3s linear border; - -o-transition: 0.3s linear border; - transition: 0.3s linear border; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; +.pure-form input[type="text"], +.pure-form input[type="password"], +.pure-form input[type="email"], +.pure-form input[type="url"], +.pure-form input[type="date"], +.pure-form input[type="month"], +.pure-form input[type="time"], +.pure-form input[type="datetime"], +.pure-form input[type="datetime-local"], +.pure-form input[type="week"], +.pure-form input[type="number"], +.pure-form input[type="search"], +.pure-form input[type="tel"], +.pure-form input[type="color"], +.pure-form select, +.pure-form textarea { + padding: 0.5em 0.6em; + display: inline-block; + border: 1px solid #ccc; + font-size: 0.8em; + box-shadow: inset 0 1px 3px #ddd; + border-radius: 4px; + -webkit-transition: 0.3s linear border; + -moz-transition: 0.3s linear border; + -ms-transition: 0.3s linear border; + -o-transition: 0.3s linear border; + transition: 0.3s linear border; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; } -.pure-form input:focus, -.pure-form select:focus { - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - border-color: #129FEA; +.pure-form input[type="text"]:focus, +.pure-form input[type="password"]:focus, +.pure-form input[type="email"]:focus, +.pure-form input[type="url"]:focus, +.pure-form input[type="date"]:focus, +.pure-form input[type="month"]:focus, +.pure-form input[type="time"]:focus, +.pure-form input[type="datetime"]:focus, +.pure-form input[type="datetime-local"]:focus, +.pure-form input[type="week"]:focus, +.pure-form input[type="number"]:focus, +.pure-form input[type="search"]:focus, +.pure-form input[type="tel"]:focus, +.pure-form input[type="color"]:focus, +.pure-form select:focus, +.pure-form textarea:focus { + outline: 0; + outline: thin dotted \9; /* IE6-9 */ + border-color: #129FEA; } + +.pure-form input[type="file"]:focus, +.pure-form input[type="radio"]:focus, +.pure-form input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 1px auto #129FEA; +} .pure-form .pure-checkbox, .pure-form .pure-radio { - margin: 0.5em 0; - display: block; + margin: 0.5em 0; + display: block; } -.pure-form input[disabled], +.pure-form input[type="text"][disabled], +.pure-form input[type="password"][disabled], +.pure-form input[type="email"][disabled], +.pure-form input[type="url"][disabled], +.pure-form input[type="date"][disabled], +.pure-form input[type="month"][disabled], +.pure-form input[type="time"][disabled], +.pure-form input[type="datetime"][disabled], +.pure-form input[type="datetime-local"][disabled], +.pure-form input[type="week"][disabled], +.pure-form input[type="number"][disabled], +.pure-form input[type="search"][disabled], +.pure-form input[type="tel"][disabled], +.pure-form input[type="color"][disabled], .pure-form select[disabled], .pure-form textarea[disabled], .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; - border-color: transparent; + cursor: not-allowed; + background-color: #eaeded; + color: #cad2d3; + border-color: transparent; } .pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid { - color: #b94a48; - border: 1px solid #ee5f5b; + color: #b94a48; + border: 1px solid #ee5f5b; } .pure-form input:focus:invalid:focus, .pure-form textarea:focus:invalid:focus, .pure-form select:focus:invalid:focus { - border-color: #e9322d; + border-color: #e9322d; } +.pure-form input[type="file"]:focus:invalid:focus, +.pure-form input[type="radio"]:focus:invalid:focus, +.pure-form input[type="checkbox"]:focus:invalid:focus { + outline-color: #e9322d; +} .pure-form select { - border: 1px solid #ccc; - background-color: white; + border: 1px solid #ccc; + background-color: white; } .pure-form select[multiple] { - height: auto; + height: auto; } .pure-form label { - margin: 0.5em 0 0.2em; - color: #999; - font-size:90%; + margin: 0.5em 0 0.2em; + color: #999; + font-size: 90%; } .pure-form fieldset { - margin: 0; - padding: 0.35em 0 0.75em; - border: 0; + margin: 0; + padding: 0.35em 0 0.75em; + border: 0; } .pure-form legend { - display: block; - width: 100%; - padding: 0.3em 0; - margin-bottom: 0.3em; - font-size: 125%; - color: #333; - border-bottom: 1px solid #e5e5e5; + display: block; + width: 100%; + padding: 0.3em 0; + margin-bottom: 0.3em; + font-size: 125%; + color: #333; + border-bottom: 1px solid #e5e5e5; } -.pure-form.pure-form-stacked input[type='text'], -.pure-form.pure-form-stacked select, -.pure-form.pure-form-stacked label { - display: block; +.pure-form-stacked input[type="text"], +.pure-form-stacked input[type="password"], +.pure-form-stacked input[type="email"], +.pure-form-stacked input[type="url"], +.pure-form-stacked input[type="date"], +.pure-form-stacked input[type="month"], +.pure-form-stacked input[type="time"], +.pure-form-stacked input[type="datetime"], +.pure-form-stacked input[type="datetime-local"], +.pure-form-stacked input[type="week"], +.pure-form-stacked input[type="number"], +.pure-form-stacked input[type="search"], +.pure-form-stacked input[type="tel"], +.pure-form-stacked input[type="color"], +.pure-form-stacked select, +.pure-form-stacked label { + display: block; } .pure-form-aligned input, .pure-form-aligned textarea, .pure-form-aligned select, -.pure-form-aligned .pure-help-inline { - display: inline-block; - *display: inline; /* IE7 inline-block hack */ - *zoom: 1; - vertical-align: middle; +/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ +.pure-form-aligned .pure-help-inline, +.pure-form-message-inline { + display: inline-block; + *display: inline; + *zoom: 1; + vertical-align: middle; } -/* aligned Forms */ +/* Aligned Forms */ .pure-form-aligned .pure-control-group { - margin-bottom: 0.5em; + margin-bottom: 0.5em; } .pure-form-aligned .pure-control-group label { - text-align: right; - display: inline-block; - vertical-align: middle; - width: 10em; - margin: 0 1em 0 0; + text-align: right; + display: inline-block; + vertical-align: middle; + width: 10em; + margin: 0 1em 0 0; } .pure-form-aligned .pure-controls { - margin: 1.5em 0 0 10em; + margin: 1.5em 0 0 10em; } /* Rounded Inputs */ .pure-form .pure-input-rounded { - border-radius: 20px; - padding-left:1em; + border-radius: 20px; + padding-left: 1em; } /* Grouped Inputs */ .pure-form .pure-group fieldset { - margin-bottom: 10px; + margin-bottom: 10px; } .pure-form .pure-group input { - display: block; - padding: 10px; - margin: 0; - border-radius: 0; - position: relative; - top: -1px; + display: block; + padding: 10px; + margin: 0; + border-radius: 0; + position: relative; + top: -1px; } .pure-form .pure-group input:focus { - z-index: 2; + z-index: 2; } .pure-form .pure-group input:first-child { - top: 1px; - border-radius: 4px 4px 0 0; + top: 1px; + border-radius: 4px 4px 0 0; } .pure-form .pure-group input:last-child { - top: -2px; - border-radius: 0 0 4px 4px; + top: -2px; + border-radius: 0 0 4px 4px; } .pure-form .pure-group button { - margin: 0.35em 0; + margin: 0.35em 0; } .pure-form .pure-input-1 { - width: 100%; + width: 100%; } .pure-form .pure-input-2-3 { - width: 66%; + width: 66%; } .pure-form .pure-input-1-2 { - width: 50%; + width: 50%; } .pure-form .pure-input-1-3 { - width: 33%; + width: 33%; } .pure-form .pure-input-1-4 { - width: 25%; + width: 25%; } /* Inline help for forms */ -.pure-form .pure-help-inline { - display: inline-block; - padding-left: 0.3em; - color: #666; - vertical-align: middle; - font-size: 90%; +/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ +.pure-form .pure-help-inline, +.pure-form-message-inline { + display: inline-block; + padding-left: 0.3em; + color: #666; + vertical-align: middle; + font-size: 90%; } +/* Block help for forms */ +.pure-form-message { + display: block; + color: #666; + font-size: 90%; +} + .pure-g { letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ *letter-spacing: normal; /* reset IE < 8 */ *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ @@ -983,11 +1048,12 @@ word-spacing: -0.43em; } .pure-u { display: inline-block; - zoom: 1; *display: inline; /* IE < 8: fake inline-block */ + *display: inline; /* IE < 8: fake inline-block */ + zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } @@ -1019,11 +1085,12 @@ .pure-u-13-24, .pure-u-17-24, .pure-u-19-24, .pure-u-23-24 { display: inline-block; - zoom: 1; *display: inline; /* IE < 8: fake inline-block */ + *display: inline; /* IE < 8: fake inline-block */ + zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } @@ -1138,10 +1205,13 @@ .pure-u-23-24 { width: 95.8333%; } +/*csslint adjoining-classes:false, outline-none:false*/ +/*TODO: Remove this lint rule override after a refactor of this code.*/ + .pure-menu ul { position: absolute; visibility: hidden; } @@ -1166,47 +1236,54 @@ left: 0; top: 0; visibility: visible; } +.pure-menu-open > ul:focus { + outline: 0; +} + .pure-menu li { position: relative; } -.pure-menu a, .pure-menu .pure-menu-heading { +.pure-menu a, +.pure-menu .pure-menu-heading { display: block; color: inherit; line-height: 1.5em; padding: 5px 20px; text-decoration: none; white-space: nowrap; } .pure-menu.pure-menu-horizontal > .pure-menu-heading { display: inline-block; - margin: 0; - zoom: 1; *display: inline; + zoom: 1; + margin: 0; vertical-align: middle; } .pure-menu.pure-menu-horizontal > ul { display: inline-block; - zoom: 1; *display: inline; + zoom: 1; vertical-align: middle; + height: 2.4em; } .pure-menu li a { padding: 5px 20px; } .pure-menu-can-have-children > .pure-menu-label:after { content: '\25B8'; float: right; - font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */ + /* These specific fonts have the Unicode char we need. */ + font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; margin-right: -20px; margin-top: -1px; } .pure-menu-can-have-children > .pure-menu-label { - padding-right:30px; + padding-right: 30px; } .pure-menu-separator { background-color: #dfdfdf; display: block; @@ -1214,61 +1291,80 @@ font-size: 0; margin: 7px 2px; overflow: hidden; } -.pure-menu-hidden { display: none; } +.pure-menu-hidden { + display: none; +} /* FIXED MENU */ .pure-menu-fixed { position: fixed; - top:0; - left:0; + top: 0; + left: 0; width: 100%; } /* HORIZONTAL MENU CODE */ /* Initial menus should be inline-block so that they are horizontal */ .pure-menu-horizontal li { display: inline-block; - zoom: 1; *display: inline; + zoom: 1; vertical-align: middle; } -/* Submenus should still be display:block; */ +/* Submenus should still be display: block; */ .pure-menu-horizontal li li { display: block; } /* Content after should be down arrow */ .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after { content: "\25BE"; } /*Add extra padding to elements that have the arrow so that the hover looks nice */ .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label { - padding-right:30px; + padding-right: 30px; } +/* Adjusting separator for vertical menus */ +.pure-menu-horizontal li.pure-menu-separator { + height: 50%; + width: 1px; + margin: 0 7px; +} +/* Submenus should be horizontal separator again */ +.pure-menu-horizontal li li.pure-menu-separator { + height: 1px; + width: auto; + margin: 7px 2px; +} + + +/*csslint adjoining-classes:false*/ +/*TODO: Remove this lint rule override after a refactor of this code.*/ + /* MAIN MENU STYLING */ .pure-menu.pure-menu-open, .pure-menu.pure-menu-horizontal li .pure-menu-children { - background: #ffffff; /* Old browsers */ + background: #fff; /* Old browsers */ border: 1px solid #b7b7b7; } /* remove borders for horizontal menus */ -.pure-menu.pure-menu-horizontal, .pure-menu.pure-menu-horizontal .pure-menu-heading { +.pure-menu.pure-menu-horizontal, +.pure-menu.pure-menu-horizontal .pure-menu-heading { border: none; } - /* LINK STYLES */ .pure-menu a { border: 1px solid transparent; border-left: none; @@ -1283,19 +1379,24 @@ .pure-menu .pure-menu-can-have-children > li:hover:after { color: #fff; } +/* Focus style for a dropdown menu-item when the parent has been opened */ +.pure-menu .pure-menu-open { + background: #dedede; +} -/* HOVER STATES */ -.pure-menu li a:hover { +.pure-menu li a:hover, +.pure-menu li a:focus { background: #eee; } /* DISABLED STATES */ -.pure-menu li.pure-menu-disabled a:hover { +.pure-menu li.pure-menu-disabled a:hover, +.pure-menu li.pure-menu-disabled a:focus { background: #fff; color: #bfbfbf; } .pure-menu .pure-menu-disabled > a { @@ -1311,12 +1412,12 @@ /* HEADINGS */ .pure-menu .pure-menu-heading { color: #565d64; text-transform: uppercase; - font-size:90%; - margin-top:0.5em; + font-size: 90%; + margin-top: 0.5em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #dfdfdf; } @@ -1329,20 +1430,22 @@ .pure-menu.pure-menu-open.pure-menu-fixed { border: none; border-bottom: 1px solid #b7b7b7; } +/*csslint box-model:false*/ +/*TODO: Remove this lint rule override after a refactor of this code.*/ + .pure-paginator { list-style: none; margin: 0; padding: 0; } .pure-paginator li { display: inline-block; *display: inline; - /* IE 7 inline-block hack */ - *zoom: 1; + zoom: 1; margin: 0 -0.35em 0 0; } .pure-paginator .pure-button { border-radius: 0; padding: 0.8em 1.4em; @@ -1350,29 +1453,22 @@ height: 1.1em; } .pure-paginator .pure-button:focus { outline-style: none; } -.pure-paginator .prev, .pure-paginator .next { +.pure-paginator .prev, +.pure-paginator .next { color: #C0C1C3; - text-shadow: 0px -1px 0px rgba(0,0,0, 0.45); + text-shadow: 0 -1px 0 rgba(0,0,0, 0.45); } .pure-paginator .prev { border-radius: 2px 0 0 2px; } .pure-paginator .next { border-radius: 0 2px 2px 0; } -/* -* CSS TABLES -* ========== -* Simple CSS for HTML Tables -* Author: tilomitra -*/ - -/* foundational CSS */ .pure-table { /* Remove spacing between table cells (from Normalize.css) */ border-collapse: collapse; border-spacing: 0; empty-cells: show; @@ -1409,11 +1505,11 @@ } /* striping: even - #fff (white) - odd - #edf5ff (light blue) + odd - #f2f2f2 (light gray) */ .pure-table td { background-color: transparent; } .pure-table-odd td { @@ -1425,11 +1521,11 @@ background-color: #f2f2f2; } /* BORDERED TABLES */ .pure-table-bordered td { - border-bottom:1px solid #cbcbcb; + border-bottom: 1px solid #cbcbcb; } .pure-table-bordered tbody > tr:last-child td, .pure-table-horizontal tbody > tr:last-child td { border-bottom-width: 0; } @@ -1438,10 +1534,10 @@ /* HORIZONTAL BORDERED TABLES */ .pure-table-horizontal td, .pure-table-horizontal th { border-width: 0 0 1px 0; - border-bottom:1px solid #cbcbcb; + border-bottom: 1px solid #cbcbcb; } .pure-table-horizontal tbody > tr:last-child td { border-bottom-width: 0; }