diff options
author | Florian Dold <florian@dold.me> | 2022-10-25 01:13:25 +0200 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-10-25 19:19:10 -0300 |
commit | 3685f8cfb87ec0a10a97324bed1135b32707e1ee (patch) | |
tree | b5e88417093e2c746e1a660a4d116e961e3bcf89 /packages/demobank-ui/src/scss | |
parent | a286649b0a611d87916a178a795c1acd2917741c (diff) |
cherry-pick: demobank-ui: clean up build system
Diffstat (limited to 'packages/demobank-ui/src/scss')
-rw-r--r-- | packages/demobank-ui/src/scss/pure.scss | 1478 |
1 files changed, 765 insertions, 713 deletions
diff --git a/packages/demobank-ui/src/scss/pure.scss b/packages/demobank-ui/src/scss/pure.scss index 0d804d6bd..83fcadce7 100644 --- a/packages/demobank-ui/src/scss/pure.scss +++ b/packages/demobank-ui/src/scss/pure.scss @@ -1,404 +1,409 @@ /*! -Pure v0.6.2 +Pure v2.2.0 Copyright 2013 Yahoo! Licensed under the BSD License. -https://github.com/yahoo/pure/blob/master/LICENSE.md +https://github.com/pure-css/pure/blob/master/LICENSE */ /*! -normalize.css v^3.0 | MIT License | git.io/normalize +normalize.css v | MIT License | https://necolas.github.io/normalize.css/ Copyright (c) Nicolas Gallagher and Jonathan Neal */ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { - font-family: sans-serif; - /* 1 */ - -ms-text-size-adjust: 100%; - /* 2 */ - -webkit-text-size-adjust: 100%; - /* 2 */ } + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ /** - * Remove default margin. + * Remove the margin in all browsers. */ + body { - margin: 0; } + margin: 0; +} -/* HTML5 display definitions - ========================================================================== */ /** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. + * Render the `main` element consistently in IE. */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; } + +main { + display: block; +} /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -audio:not([controls]) { - display: none; - height: 0; } + +hr { + -webkit-box-sizing: content-box; + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} /** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -[hidden], -template { - display: none; } -/* Links +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics ========================================================================== */ + /** - * Remove the gray background color from active links in IE 10. + * Remove the gray background on active links in IE 10. */ + a { - background-color: transparent; } + background-color: transparent; +} /** - * Improve readability of focused elements when they are also in an - * active/hover state. + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ -a:active, -a:hover { - outline: 0; } -/* Text-level semantics - ========================================================================== */ -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ abbr[title] { - border-bottom: 1px dotted; } + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ +} /** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + * Add the correct font weight in Chrome, Edge, and Safari. */ + b, strong { - font-weight: bold; } + font-weight: bolder; +} /** - * Address styling not present in Safari and Chrome. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -dfn { - font-style: italic; } -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; } +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} /** - * Address styling not present in IE 8/9. + * Add the correct font size in all browsers. */ -mark { - background: #ff0; - color: #000; } -/** - * Address inconsistent and variable font size in all browsers. - */ small { - font-size: 80%; } + font-size: 80%; +} /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. */ + sub, sup { font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } + vertical-align: baseline; +} sub { - bottom: -0.25em; } + bottom: -0.25em; +} -/* Embedded content - ========================================================================== */ -/** - * Remove border when inside `a` element in IE 8/9/10. - */ -img { - border: 0; } - -/** - * Correct overflow not hidden in IE 9/10/11. - */ -svg:not(:root) { - overflow: hidden; } +sup { + top: -0.5em; +} -/* Grouping content +/* Embedded content ========================================================================== */ -/** - * Address margin not present in IE 8/9 and Safari. - */ -figure { - margin: 1em 40px; } - -/** - * Address differences between Firefox and other browsers. - */ -hr { - box-sizing: content-box; - height: 0; } /** - * Contain overflow in all browsers. + * Remove the border on images inside links in IE 10. */ -pre { - overflow: auto; } -/** - * Address odd `em`-unit font size rendering in all browsers. - */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; } +img { + border-style: none; +} /* Forms ========================================================================== */ + /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. */ + button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ - font: inherit; - /* 2 */ - margin: 0; - /* 3 */ } + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} /** - * Address `overflow` set to `hidden` in IE 8/9/10/11. + * Show the overflow in IE. + * 1. Show the overflow in Edge. */ -button { - overflow: visible; } + +button, +input { /* 1 */ + overflow: visible; +} /** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ + button, -select { - text-transform: none; } +select { /* 1 */ + text-transform: none; +} /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. + * Correct the inability to style clickable types in iOS and Safari. */ + button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +[type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } +} /** - * Re-set default cursor for disabled elements. + * Remove the inner border and padding in Firefox. */ -button[disabled], -html input[disabled] { - cursor: default; } + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} /** - * Remove inner padding and border in Firefox 4+. + * Restore the focus styles unset by the previous rule. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Correct the padding in Firefox. */ -input { - line-height: normal; } + +fieldset { + padding: 0.35em 0.75em 0.625em; +} /** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ } + +legend { + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} /** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; } + +progress { + vertical-align: baseline; +} /** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + * Remove the default vertical scrollbar in IE 10+. */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - box-sizing: content-box; - /* 2 */ } + +textarea { + overflow: auto; +} /** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + +[type="checkbox"], +[type="radio"] { + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} /** - * Define consistent border, margin, and padding. + * Correct the cursor style of increment and decrement buttons in Chrome. */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; } + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} /** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ -legend { - border: 0; - /* 1 */ - padding: 0; - /* 2 */ } + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} /** - * Remove default vertical scrollbar in IE 8/9/10/11. + * Remove the inner padding in Chrome and Safari on macOS. */ -textarea { - overflow: auto; } + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} /** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. */ -optgroup { - font-weight: bold; } -/* Tables +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + /** - * Remove most spacing between table cells. + * Add the correct display in IE 10+. */ -table { - border-collapse: collapse; - border-spacing: 0; } -td, -th { - padding: 0; } +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} /*csslint important:false*/ + /* ========================================================================== Pure Base Extras ========================================================================== */ + /** * Extra rules that Pure adds on top of Normalize.css */ + +html { + font-family: sans-serif; +} + /** * Always hide an element when it has the `hidden` HTML attribute. */ + .hidden, [hidden] { - display: none !important; } + display: none !important; +} /** * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining * aspect ratio. */ .pure-img { - max-width: 100%; - height: auto; - display: block; } + max-width: 100%; + height: auto; + display: block; +} /*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ + .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 */ + letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ + text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ + /* Sets the font stack to fonts known to work properly with the above letter - and word spacings. See: https://github.com/yahoo/pure/issues/41/ + and word spacings. See: https://github.com/pure-css/pure/issues/41/ The following font stack makes Pure Grids work on all known environments. @@ -412,48 +417,53 @@ th { * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. */ - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - /* Prevents distributing space between rows */ - -webkit-align-content: flex-start; - -ms-flex-line-pack: start; - align-content: flex-start; } + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + + /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + + /* Prevents distributing space between rows */ + -ms-flex-line-pack: start; + align-content: flex-start; +} /* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - table .pure-g { - display: block; } } + table .pure-g { + display: block; + } +} + /* Opera as of 12 on Windows needs word-spacing. The ".opera-only" selector is used to prevent actual prefocus styling and is not required in markup. */ .opera-only :-o-prefocus, .pure-g { - word-spacing: -0.43em; } + word-spacing: -0.43em; +} .pure-u { - display: inline-block; - *display: inline; - /* IE < 8: fake inline-block */ - zoom: 1; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; } + display: inline-block; + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + text-rendering: auto; +} /* Resets the font family back to the OS/browser's default sans-serif font, this the same font stack that Normalize.css sets for the `body`. */ -.pure-g [class*="pure-u"] { - font-family: sans-serif; } +.pure-g [class *= "pure-u"] { + font-family: sans-serif; +} .pure-u-1, .pure-u-1-1, @@ -501,260 +511,255 @@ this the same font stack that Normalize.css sets for the `body`. .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 { - display: inline-block; - *display: inline; - zoom: 1; - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; } + display: inline-block; + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + text-rendering: auto; +} .pure-u-1-24 { - width: 4.1667%; - *width: 4.1357%; } + width: 4.1667%; +} .pure-u-1-12, .pure-u-2-24 { - width: 8.3333%; - *width: 8.3023%; } + width: 8.3333%; +} .pure-u-1-8, .pure-u-3-24 { - width: 12.5000%; - *width: 12.4690%; } + width: 12.5000%; +} .pure-u-1-6, .pure-u-4-24 { - width: 16.6667%; - *width: 16.6357%; } + width: 16.6667%; +} .pure-u-1-5 { - width: 20%; - *width: 19.9690%; } + width: 20%; +} .pure-u-5-24 { - width: 20.8333%; - *width: 20.8023%; } + width: 20.8333%; +} .pure-u-1-4, .pure-u-6-24 { - width: 25%; - *width: 24.9690%; } + width: 25%; +} .pure-u-7-24 { - width: 29.1667%; - *width: 29.1357%; } + width: 29.1667%; +} .pure-u-1-3, .pure-u-8-24 { - width: 33.3333%; - *width: 33.3023%; } + width: 33.3333%; +} .pure-u-3-8, .pure-u-9-24 { - width: 37.5000%; - *width: 37.4690%; } + width: 37.5000%; +} .pure-u-2-5 { - width: 40%; - *width: 39.9690%; } + width: 40%; +} .pure-u-5-12, .pure-u-10-24 { - width: 41.6667%; - *width: 41.6357%; } + width: 41.6667%; +} .pure-u-11-24 { - width: 45.8333%; - *width: 45.8023%; } + width: 45.8333%; +} .pure-u-1-2, .pure-u-12-24 { - width: 50%; - *width: 49.9690%; } + width: 50%; +} .pure-u-13-24 { - width: 54.1667%; - *width: 54.1357%; } + width: 54.1667%; +} .pure-u-7-12, .pure-u-14-24 { - width: 58.3333%; - *width: 58.3023%; } + width: 58.3333%; +} .pure-u-3-5 { - width: 60%; - *width: 59.9690%; } + width: 60%; +} .pure-u-5-8, .pure-u-15-24 { - width: 62.5000%; - *width: 62.4690%; } + width: 62.5000%; +} .pure-u-2-3, .pure-u-16-24 { - width: 66.6667%; - *width: 66.6357%; } + width: 66.6667%; +} .pure-u-17-24 { - width: 70.8333%; - *width: 70.8023%; } + width: 70.8333%; +} .pure-u-3-4, .pure-u-18-24 { - width: 75%; - *width: 74.9690%; } + width: 75%; +} .pure-u-19-24 { - width: 79.1667%; - *width: 79.1357%; } + width: 79.1667%; +} .pure-u-4-5 { - width: 80%; - *width: 79.9690%; } + width: 80%; +} .pure-u-5-6, .pure-u-20-24 { - width: 83.3333%; - *width: 83.3023%; } + width: 83.3333%; +} .pure-u-7-8, .pure-u-21-24 { - width: 87.5000%; - *width: 87.4690%; } + width: 87.5000%; +} .pure-u-11-12, .pure-u-22-24 { - width: 91.6667%; - *width: 91.6357%; } + width: 91.6667%; +} .pure-u-23-24 { - width: 95.8333%; - *width: 95.8023%; } + width: 95.8333%; +} .pure-u-1, .pure-u-1-1, .pure-u-5-5, .pure-u-24-24 { - width: 100%; } - + width: 100%; +} .pure-button { - /* Structure */ - display: inline-block; - zoom: 1; - line-height: normal; - white-space: nowrap; - vertical-align: middle; - text-align: center; - cursor: pointer; - -webkit-user-drag: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - box-sizing: border-box; } + /* Structure */ + display: inline-block; + line-height: normal; + white-space: nowrap; + vertical-align: middle; + text-align: center; + cursor: pointer; + -webkit-user-drag: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} /* Firefox: Get rid of the inner focus border */ .pure-button::-moz-focus-inner { - padding: 0; - border: 0; } + padding: 0; + border: 0; +} /* Inherit .pure-g styles */ .pure-button-group { - 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 */ } + letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ + text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ +} .opera-only :-o-prefocus, .pure-button-group { - word-spacing: -0.43em; } + word-spacing: -0.43em; +} .pure-button-group .pure-button { - letter-spacing: normal; - word-spacing: normal; - vertical-align: top; - text-rendering: auto; } + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + text-rendering: auto; +} /*csslint outline-none:false*/ + .pure-button { - font-family: inherit; - font-size: 100%; - padding: 0.5em 1em; - color: #444; - /* rgba not supported (IE 8) */ - color: rgba(0, 0, 0, 0.8); - /* rgba supported */ - border: 1px solid #999; - /*IE 6/7/8*/ - border: none rgba(0, 0, 0, 0); - /*IE9 + everything else*/ - background-color: #E6E6E6; - text-decoration: none; - border-radius: 2px; } + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + color: rgba(0, 0, 0, 0.80); + border: none rgba(0, 0, 0, 0); + background-color: #E6E6E6; + text-decoration: none; + border-radius: 2px; +} .pure-button-hover, .pure-button:hover, .pure-button:focus { - /* csslint ignore:start */ - filter: alpha(opacity=90); - /* csslint ignore:end */ - background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); - background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } - + background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(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; } - + outline: 0; +} .pure-button-active, .pure-button:active { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; - border-color: #000; } + -webkit-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; + border-color: #000; +} .pure-button[disabled], .pure-button-disabled, .pure-button-disabled:hover, .pure-button-disabled:focus, .pure-button-disabled:active { - border: none; - background-image: none; - /* csslint ignore:start */ - filter: alpha(opacity=40); - /* csslint ignore:end */ - opacity: 0.40; - cursor: not-allowed; - box-shadow: none; - pointer-events: none; } + border: none; + background-image: none; + opacity: 0.40; + cursor: not-allowed; + -webkit-box-shadow: none; + box-shadow: none; + pointer-events: none; +} .pure-button-hidden { - display: none; } + display: none; +} .pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { - background-color: #00509b; - color: #fff; } + background-color: rgb(0, 120, 231); + color: #fff; +} /* Button Groups */ .pure-button-group .pure-button { - margin: 0; - border-radius: 0; - border-right: 1px solid #111; - /* fallback color for rgba() for IE7/8 */ - border-right: 1px solid rgba(0, 0, 0, 0.2); } + margin: 0; + border-radius: 0; + border-right: 1px solid rgba(0, 0, 0, 0.2); -.pure-button-group .pure-button:first-child { - border-top-left-radius: 2px; - border-bottom-left-radius: 2px; } +} +.pure-button-group .pure-button:first-child { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} .pure-button-group .pure-button:last-child { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - border-right: none; } + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + border-right: none; +} /*csslint box-model:false*/ /* @@ -763,6 +768,7 @@ also have border and padding. This is done because some browsers don't render the padding. We explicitly set the box-model for select elements to border-box, so we can ignore the csslint warning. */ + .pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], @@ -779,30 +785,39 @@ so we can ignore the csslint warning. .pure-form input[type="color"], .pure-form select, .pure-form textarea { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - vertical-align: middle; - box-sizing: border-box; } + padding: 0.5em 0.6em; + display: inline-block; + border: 1px solid #ccc; + -webkit-box-shadow: inset 0 1px 3px #ddd; + box-shadow: inset 0 1px 3px #ddd; + border-radius: 4px; + vertical-align: middle; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]) { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - box-sizing: border-box; } + padding: 0.5em 0.6em; + display: inline-block; + border: 1px solid #ccc; + -webkit-box-shadow: inset 0 1px 3px #ddd; + box-shadow: inset 0 1px 3px #ddd; + border-radius: 4px; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ /* May be able to remove this tweak as color inputs become more standardized across browsers. */ .pure-form input[type="color"] { - padding: 0.2em 0.5em; } + padding: 0.2em 0.5em; +} + .pure-form input[type="text"]:focus, .pure-form input[type="password"]:focus, @@ -820,27 +835,30 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form input[type="color"]:focus, .pure-form select:focus, .pure-form textarea:focus { - outline: 0; - border-color: #129FEA; } + outline: 0; + border-color: #129FEA; +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]):focus { - outline: 0; - border-color: #129FEA; } + outline: 0; + border-color: #129FEA; +} .pure-form input[type="file"]:focus, .pure-form input[type="radio"]:focus, .pure-form input[type="checkbox"]:focus { - outline: thin solid #129FEA; - outline: 1px auto #129FEA; } - + outline: thin solid #129FEA; + 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[type="text"][disabled], .pure-form input[type="password"][disabled], @@ -858,63 +876,64 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form input[type="color"][disabled], .pure-form select[disabled], .pure-form textarea[disabled] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; } + cursor: not-allowed; + background-color: #eaeded; + color: #cad2d3; +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type])[disabled] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; } - + cursor: not-allowed; + background-color: #eaeded; + color: #cad2d3; +} .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { - background-color: #eee; - /* menu hover bg color */ - color: #777; - /* menu text color */ - border-color: #ccc; } + background-color: #eee; /* menu hover bg color */ + color: #777; /* menu text color */ + border-color: #ccc; +} .pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid { - color: #b94a48; - border-color: #e9322d; } - + color: #b94a48; + 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; } - + outline-color: #e9322d; +} .pure-form select { - /* Normalizes the height; padding is not sufficient. */ - height: 2.25em; - border: 1px solid #ccc; - background-color: white; } - + /* Normalizes the height; padding is not sufficient. */ + height: 2.25em; + border: 1px solid #ccc; + background-color: white; +} .pure-form select[multiple] { - height: auto; } - + height: auto; +} .pure-form label { - margin: 0.5em 0 0.2em; } - + margin: 0.5em 0 0.2em; +} .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; - color: #333; - border-bottom: 1px solid #e5e5e5; } + display: block; + width: 100%; + padding: 0.3em 0; + margin-bottom: 0.3em; + color: #333; + border-bottom: 1px solid #e5e5e5; +} .pure-form-stacked input[type="text"], .pure-form-stacked input[type="password"], @@ -934,365 +953,394 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form-stacked select, .pure-form-stacked label, .pure-form-stacked textarea { - display: block; - margin: 0.25em 0; } + display: block; + margin: 0.25em 0; +} /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form-stacked input:not([type]) { - display: block; - margin: 0.25em 0; } - + display: block; + margin: 0.25em 0; +} .pure-form-aligned input, .pure-form-aligned textarea, .pure-form-aligned select, -.pure-form-aligned .pure-help-inline, .pure-form-message-inline { - display: inline-block; - *display: inline; - *zoom: 1; - vertical-align: middle; } - + display: inline-block; + vertical-align: middle; +} .pure-form-aligned textarea { - vertical-align: top; } + vertical-align: top; +} /* 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 11em; } + margin: 1.5em 0 0 11em; +} /* Rounded Inputs */ .pure-form input.pure-input-rounded, .pure-form .pure-input-rounded { - border-radius: 2em; - padding: 0.5em 1em; } + border-radius: 2em; + padding: 0.5em 1em; +} /* Grouped Inputs */ .pure-form .pure-group fieldset { - margin-bottom: 10px; } - + margin-bottom: 10px; +} .pure-form .pure-group input, .pure-form .pure-group textarea { - display: block; - padding: 10px; - margin: 0 0 -1px; - border-radius: 0; - position: relative; - top: -1px; } - + display: block; + padding: 10px; + margin: 0 0 -1px; + border-radius: 0; + position: relative; + top: -1px; +} .pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus { - z-index: 3; } - + z-index: 3; +} .pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child { - top: 1px; - border-radius: 4px 4px 0 0; - margin: 0; } - + top: 1px; + border-radius: 4px 4px 0 0; + margin: 0; +} .pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child { - top: 1px; - border-radius: 4px; - margin: 0; } - + top: 1px; + border-radius: 4px; + margin: 0; +} .pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child { - top: -2px; - border-radius: 0 0 4px 4px; - margin: 0; } - + top: -2px; + border-radius: 0 0 4px 4px; + margin: 0; +} .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-3-4 { - width: 75%; } - + width: 75%; +} .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 */ -/* 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: 0.875em; } + display: inline-block; + padding-left: 0.3em; + color: #666; + vertical-align: middle; + font-size: 0.875em; +} /* Block help for forms */ .pure-form-message { - display: block; - color: #666; - font-size: 0.875em; } - -@media only screen and (max-width: 480px) { - .pure-form button[type="submit"] { - margin: 0.7em 0 0; } - - .pure-form input:not([type]), - .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 label { - margin-bottom: 0.3em; - display: block; } - - .pure-group input:not([type]), - .pure-group input[type="text"], - .pure-group input[type="password"], - .pure-group input[type="email"], - .pure-group input[type="url"], - .pure-group input[type="date"], - .pure-group input[type="month"], - .pure-group input[type="time"], - .pure-group input[type="datetime"], - .pure-group input[type="datetime-local"], - .pure-group input[type="week"], - .pure-group input[type="number"], - .pure-group input[type="search"], - .pure-group input[type="tel"], - .pure-group input[type="color"] { - margin-bottom: 0; } - - .pure-form-aligned .pure-control-group label { - margin-bottom: 0.3em; - text-align: left; display: block; - width: 100%; } - - .pure-form-aligned .pure-controls { - margin: 1.5em 0 0 0; } + color: #666; + font-size: 0.875em; +} + +@media only screen and (max-width : 480px) { + .pure-form button[type="submit"] { + margin: 0.7em 0 0; + } + + .pure-form input:not([type]), + .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 label { + margin-bottom: 0.3em; + display: block; + } + + .pure-group input:not([type]), + .pure-group input[type="text"], + .pure-group input[type="password"], + .pure-group input[type="email"], + .pure-group input[type="url"], + .pure-group input[type="date"], + .pure-group input[type="month"], + .pure-group input[type="time"], + .pure-group input[type="datetime"], + .pure-group input[type="datetime-local"], + .pure-group input[type="week"], + .pure-group input[type="number"], + .pure-group input[type="search"], + .pure-group input[type="tel"], + .pure-group input[type="color"] { + margin-bottom: 0; + } + + .pure-form-aligned .pure-control-group label { + margin-bottom: 0.3em; + text-align: left; + display: block; + width: 100%; + } + + .pure-form-aligned .pure-controls { + margin: 1.5em 0 0 0; + } + + .pure-form-message-inline, + .pure-form-message { + display: block; + font-size: 0.75em; + /* Increased bottom padding to make it group with its related input element. */ + padding: 0.2em 0 0.8em; + } +} - /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ - .pure-form .pure-help-inline, - .pure-form-message-inline, - .pure-form-message { - display: block; - font-size: 0.75em; - /* Increased bottom padding to make it group with its related input element. */ - padding: 0.2em 0 0.8em; } } /*csslint adjoining-classes: false, box-model:false*/ .pure-menu { - box-sizing: border-box; } + -webkit-box-sizing: border-box; + box-sizing: border-box; +} .pure-menu-fixed { - position: fixed; - left: 0; - top: 0; - z-index: 3; } + position: fixed; + left: 0; + top: 0; + z-index: 3; +} .pure-menu-list, .pure-menu-item { - position: relative; } + position: relative; +} .pure-menu-list { - list-style: none; - margin: 0; - padding: 0; } + list-style: none; + margin: 0; + padding: 0; +} .pure-menu-item { - padding: 0; - margin: 0; - height: 100%; } + padding: 0; + margin: 0; + height: 100%; +} .pure-menu-link, .pure-menu-heading { - display: block; - text-decoration: none; - white-space: nowrap; } + display: block; + text-decoration: none; + white-space: nowrap; +} /* HORIZONTAL MENU */ .pure-menu-horizontal { - width: 100%; - white-space: nowrap; } + width: 100%; + white-space: nowrap; +} .pure-menu-horizontal .pure-menu-list { - display: inline-block; } + display: inline-block; +} /* Initial menus should be inline-block so that they are horizontal */ .pure-menu-horizontal .pure-menu-item, .pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-separator { - display: inline-block; - *display: inline; - zoom: 1; - vertical-align: middle; } + display: inline-block; + vertical-align: middle; +} /* Submenus should still be display: block; */ .pure-menu-item .pure-menu-item { - display: block; } + display: block; +} .pure-menu-children { - display: none; - position: absolute; - left: 100%; - top: 0; - margin: 0; - padding: 0; - z-index: 3; } + display: none; + position: absolute; + left: 100%; + top: 0; + margin: 0; + padding: 0; + z-index: 3; +} .pure-menu-horizontal .pure-menu-children { - left: 0; - top: auto; - width: inherit; } + left: 0; + top: auto; + width: inherit; +} .pure-menu-allow-hover:hover > .pure-menu-children, .pure-menu-active > .pure-menu-children { - display: block; - position: absolute; } + display: block; + position: absolute; +} /* Vertical Menus - show the dropdown arrow */ .pure-menu-has-children > .pure-menu-link:after { - padding-left: 0.5em; - content: "\25B8"; - font-size: small; } + padding-left: 0.5em; + content: "\25B8"; + font-size: small; +} /* Horizontal Menus - show the dropdown arrow */ .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { - content: "\25BE"; } + content: "\25BE"; +} /* scrollable menus */ .pure-menu-scrollable { - overflow-y: scroll; - overflow-x: hidden; } + overflow-y: scroll; + overflow-x: hidden; +} .pure-menu-scrollable .pure-menu-list { - display: block; } + display: block; +} .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { - display: inline-block; } + display: inline-block; +} .pure-menu-horizontal.pure-menu-scrollable { - white-space: nowrap; - overflow-y: hidden; - overflow-x: auto; - -ms-overflow-style: none; - -webkit-overflow-scrolling: touch; - /* a little extra padding for this style to allow for scrollbars */ - padding: .5em 0; } - -.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { - display: none; } + white-space: nowrap; + overflow-y: hidden; + overflow-x: auto; + /* a little extra padding for this style to allow for scrollbars */ + padding: .5em 0; +} /* misc default styling */ + .pure-menu-separator, .pure-menu-horizontal .pure-menu-children .pure-menu-separator { - background-color: #ccc; - height: 1px; - margin: .3em 0; } + background-color: #ccc; + height: 1px; + margin: .3em 0; +} .pure-menu-horizontal .pure-menu-separator { - width: 1px; - height: 1.3em; - margin: 0 0.3em; } + width: 1px; + height: 1.3em; + margin: 0 .3em ; +} /* Need to reset the separator since submenu is vertical */ .pure-menu-horizontal .pure-menu-children .pure-menu-separator { - display: block; - width: auto; } + display: block; + width: auto; +} .pure-menu-heading { - text-transform: uppercase; - color: #565d64; } + text-transform: uppercase; + color: #565d64; +} .pure-menu-link { - color: #777; } + color: #777; +} .pure-menu-children { - background-color: #fff; } + background-color: #fff; +} .pure-menu-link, -.pure-menu-disabled, .pure-menu-heading { - padding: .5em 1em; } + padding: .5em 1em; +} .pure-menu-disabled { - opacity: .5; } + opacity: .5; +} .pure-menu-disabled .pure-menu-link:hover { - background-color: transparent; } + background-color: transparent; + cursor: default; +} .pure-menu-active > .pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus { - background-color: #eee; } + background-color: #eee; +} -.pure-menu-selected .pure-menu-link, -.pure-menu-selected .pure-menu-link:visited { - color: #000; } +.pure-menu-selected > .pure-menu-link, +.pure-menu-selected > .pure-menu-link:visited { + color: #000; +} .pure-table { - /* Remove spacing between table cells (from Normalize.css) */ - border-collapse: collapse; - border-spacing: 0; - empty-cells: show; - border: 1px solid #cbcbcb; } + /* Remove spacing between table cells (from Normalize.css) */ + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + border: 1px solid #cbcbcb; +} .pure-table caption { - color: #000; - font: italic 85%/1 arial, sans-serif; - padding: 1em 0; - text-align: center; } + color: #000; + font: italic 85%/1 arial, sans-serif; + padding: 1em 0; + text-align: center; +} .pure-table td, .pure-table th { - border-left: 1px solid #cbcbcb; - /* inner column border */ - border-width: 0 0 0 1px; - font-size: inherit; - margin: 0; - overflow: visible; - /*to make ths where the title is really long work*/ - padding: 0.5em 1em; - /* cell padding */ } - -/* Consider removing this next declaration block, as it causes problems when -there's a rowspan on the first cell. Case added to the tests. issue#432 */ -.pure-table td:first-child, -.pure-table th:first-child { - border-left-width: 0; } + border-left: 1px solid #cbcbcb;/* inner column border */ + border-width: 0 0 0 1px; + font-size: inherit; + margin: 0; + overflow: visible; /*to make ths where the title is really long work*/ + padding: 0.5em 1em; /* cell padding */ +} .pure-table thead { - background-color: #e0e0e0; - color: #000; - text-align: left; - vertical-align: bottom; } + background-color: #e0e0e0; + color: #000; + text-align: left; + vertical-align: bottom; +} /* striping: @@ -1300,29 +1348,33 @@ striping: odd - #f2f2f2 (light gray) */ .pure-table td { - background-color: transparent; } - + background-color: transparent; +} .pure-table-odd td { - background-color: #f2f2f2; } + background-color: #f2f2f2; +} /* nth-child selector for modern browsers */ .pure-table-striped tr:nth-child(2n-1) td { - background-color: #f2f2f2; } + 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 { - border-bottom-width: 0; } + border-bottom-width: 0; +} + /* HORIZONTAL BORDERED TABLES */ + .pure-table-horizontal td, .pure-table-horizontal th { - border-width: 0 0 1px 0; - border-bottom: 1px solid #cbcbcb; } - + border-width: 0 0 1px 0; + border-bottom: 1px solid #cbcbcb; +} .pure-table-horizontal tbody > tr:last-child > td { - border-bottom-width: 0; } - -/*# sourceMappingURL=pure.css.map */ + border-bottom-width: 0; +}
\ No newline at end of file |