diff options
1 files changed, 184 insertions, 96 deletions
| -rw-r--r-- | dist/spectre.css | 280 |
diff --git a/dist/spectre.css b/dist/spectre.css index 1674bbe..170be5d 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -1,9 +1,12 @@ -/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. - * 3. Prevent adjustments of font size after orientation changes in IE and iOS. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ +/* Document + ========================================================================== */ html { font-family: sans-serif; /* 1 */ @@ -14,65 +17,74 @@ html { -ms-text-size-adjust: 100%; /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { - /* 1 */ +section { display: block; } /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: .67em 0; +} +/* Grouping content + ========================================================================== */ +/** * Add the correct display in IE 9-. + * 1. Add the correct display in IE. */ -audio, -canvas, -progress, -video { - display: inline-block; +figcaption, +figure, +main { + /* 1 */ + display: block; } /** - * Add the correct display in iOS 4-7. + * Add the correct margin in IE 8. */ -audio:not([controls]) { - display: none; - height: 0; +figure { + margin: 1em 40px; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -progress { - vertical-align: baseline; +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -template, -[hidden] { - display: none; +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } -/* Links +/* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. @@ -92,8 +104,6 @@ a:active, a:hover { outline-width: 0; } -/* Text-level semantics - ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. @@ -121,18 +131,22 @@ strong { font-weight: bolder; } /** - * Add the correct font style in Android 4.3-. + * 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; +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. + * Add the correct font style in Android 4.3-. */ -h1 { - font-size: 2em; - margin: .67em 0; +dfn { + font-style: italic; } /** * Add the correct background and color in IE 9-. @@ -167,54 +181,35 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE 10-. - */ -img { - border-style: none; -} -/** - * Hide the overflow in IE. + * Add the correct display in IE 9-. */ -svg:not(:root) { - overflow: hidden; +audio, +video { + display: inline-block; } -/* Grouping content - ========================================================================== */ /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. + * Add the correct display in iOS 4-7. */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1em 40px; +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -222,18 +217,16 @@ input, optgroup, select, textarea { - font: inherit; + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** - * Restore the font weight unset by the previous rule. - */ -optgroup { - font-weight: bold; -} -/** * Show the overflow in IE. * 1. Show the overflow in Edge. */ @@ -311,6 +304,16 @@ legend { /* 1 */ } /** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ +} +/** * Remove the default vertical scrollbar in IE. */ textarea { @@ -345,20 +348,13 @@ textarea { /* 2 */ } /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: .54; -} -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -368,6 +364,44 @@ textarea { font: inherit; /* 2 */ } +/* Interactive + ========================================================================== */ +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; +} +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; +} +/** + * Add the correct display in IE. + */ +template { + display: none; +} +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; +} *, *::before, *::after { @@ -408,6 +442,16 @@ a:hover { margin-right: .2rem; vertical-align: -20%; } +.icon-caret { + border-left: .4rem solid transparent; + border-right: .4rem solid transparent; + border-top: .4rem solid currentColor; + display: inline-block; + height: 0; + margin: 0 .2rem; + vertical-align: middle; + width: 0; +} h1, h2, h3, @@ -672,15 +716,15 @@ pre code { -ms-flex: 1 0 auto; flex: 1 0 auto; } -.btn-group .btn:first-child:not(:last-child) { +.btn-group .btn:first-of-type:not(:last-of-type) { border-bottom-right-radius: 0; border-top-right-radius: 0; } -.btn-group .btn:not(:first-child):not(:last-child) { +.btn-group .btn:not(:first-of-type):not(:last-of-type) { border-radius: 0; margin-left: -.1rem; } -.btn-group .btn:last-child:not(:first-child) { +.btn-group .btn:last-of-type:not(:first-of-type) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.1rem; @@ -701,6 +745,8 @@ pre code { } .form-input { -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background: #fff; background-image: none; border: .1rem solid #c5c5c5; @@ -752,6 +798,9 @@ textarea.form-input { .form-input.is-danger { border-color: #e85600; } +.form-input[type=file] { + height: auto; +} .form-input-hint { color: #888; margin-top: .4rem; @@ -777,10 +826,14 @@ textarea.form-input { border-radius: .3rem; font-size: 1.4rem; line-height: 1.6rem; + min-width: 18rem; outline: 0; padding: .5rem .8rem; vertical-align: middle; } +.form-select[multiple] option { + padding: .2rem .4rem; +} .form-select:not([multiple]) { background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem; height: 3.2rem; @@ -1025,8 +1078,16 @@ textarea.form-input { white-space: nowrap; } .label.label-primary { - background: rgba(87, 100, 198, .9); - border-color: #5764c6; + background: #5764c6; + color: #fff; +} +.label.label-success { + background: #32b643; + color: #fff; +} +.label.label-danger { + background: #e85600; + color: #fff; } .img-responsive { display: block; @@ -1059,6 +1120,13 @@ textarea.form-input { padding-bottom: 75%; /* 4:3 */ } +.figure { + margin: 0 0 1rem 0; +} +.figure .figure-caption { + color: #888; + margin-top: 1rem; +} .container { margin-left: auto; margin-right: auto; @@ -1912,6 +1980,26 @@ textarea.form-input { transform: translateY(-1rem); width: 100%; } +.dropdown { + position: relative; +} +.dropdown .menu { + -webkit-animation: slide-down .216s; + animation: slide-down .216s; + display: none; + left: 0; + min-width: 18rem; + position: absolute; + top: 100%; + -webkit-transform: translateY(.5rem); + -ms-transform: translateY(.5rem); + transform: translateY(.5rem); +} +.dropdown.active .menu, +.dropdown .dropdown-toggle:focus + .menu, +.dropdown .menu:hover { + display: block; +} .breadcrumb, .tab, .pagination { |