From: Jeremy Thomas Date: Thu, 22 Sep 2016 22:14:18 +0000 (+0100) Subject: Add minireset, Fix color luminance X-Git-Tag: 0.2.0~9 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=18b34aa2c03e5654445af9f7fd3cf2c833872438;p=thirdparty%2Fbulma.git Add minireset, Fix color luminance --- diff --git a/bulma.sass b/bulma.sass index 8c6de81db..d6e1fbe57 100644 --- a/bulma.sass +++ b/bulma.sass @@ -1,6 +1,7 @@ @charset "utf-8" -@import "sass/base/base" -@import "sass/elements/elements" -@import "sass/components/components" -@import "sass/layout/layout" +@import "sass/base/base.sass" +@import "sass/elements/elements.sass" +@import "sass/components/components.sass" +@import "sass/layout/layout.sass" +@import "sass/utilities/mixins.sass" diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index e40cbb38d..465b56c40 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -68,18 +68,13 @@ {% if page.route == 'index' %} {% endif %} diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index c179b14fc..917b9c3fc 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -52,7 +52,6 @@ $carbon-space: 15px .carbon-text display: block color: $text-strong - margin-bottom: 5px margin-left: 130px + $carbon-space .carbon-poweredby font-size: $size-small @@ -235,7 +234,7 @@ $structure-invert: $danger-invert position: relative .copy, .expand - @extend %unselectable + +unselectable background: $white border: solid $border border-width: 0 0 1px 1px diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 5ccd2b956..515a23fc0 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,68 +1,75 @@ -html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { +/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */ +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { margin: 0; padding: 0; - border: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { font-size: 100%; font-weight: normal; - vertical-align: baseline; - background: transparent; } -article, aside, figure, footer, header, nav, section, details, summary { - display: block; +ul { + list-style: none; +} + +button, +input, +select, +textarea { + margin: 0; } html { box-sizing: border-box; } -*, -*:before, -*:after { +* { + box-sizing: inherit; +} + +*:before, *:after { box-sizing: inherit; } img, +embed, object, -embed { +audio, +video { + height: auto; max-width: 100%; } -html { - overflow-y: scroll; -} - -ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} - -a { - margin: 0; - padding: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} - -del { - text-decoration: line-through; -} - -abbr[title], dfn[title] { - border-bottom: 1px dotted #000; - cursor: help; +iframe { + border: 0; } table { @@ -70,99 +77,10 @@ table { border-spacing: 0; } +td, th { - font-weight: bold; - vertical-align: bottom; -} - -td { - font-weight: normal; - vertical-align: top; -} - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; padding: 0; -} - -input, select { - vertical-align: middle; -} - -pre { - white-space: pre; - white-space: pre-wrap; - white-space: pre-line; - word-wrap: break-word; -} - -input[type="radio"] { - vertical-align: text-bottom; -} - -input[type="checkbox"] { - vertical-align: bottom; -} - -select, input, textarea { - font: 99% sans-serif; -} - -table { - font-size: inherit; - font: 100%; -} - -small { - font-size: 85%; -} - -strong { - font-weight: bold; -} - -td, td img { - vertical-align: top; -} - -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -pre, code, kbd, samp { - font-family: monospace, sans-serif; -} - -label, -input[type=button], -input[type=submit], -input[type=file], -button { - cursor: pointer; -} - -button, input, select, textarea { - margin: 0; -} - -button, -input[type=button] { - width: auto; - overflow: visible; + text-align: left; } @keyframes spin-around { @@ -238,7 +156,10 @@ code { } hr { - border-top-color: #dbdbdb; + background-color: #dbdbdb; + border: none; + display: block; + height: 1px; margin: 40px 0; } @@ -294,6 +215,15 @@ table th { color: #242424; } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + .is-block { display: block; } @@ -620,798 +550,494 @@ table th { padding: 0 !important; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; -} - -.modal-close { - -moz-appearance: none; - -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - height: 24px; - position: relative; - vertical-align: top; - width: 24px; +.is-unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.modal-close:before, .modal-close:after { +.box { background-color: white; - content: ""; + border-radius: 5px; + box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px rgba(18, 18, 18, 0.1); display: block; - height: 2px; - left: 50%; - margin-left: -25%; - margin-top: -1px; - position: absolute; - top: 50%; - width: 50%; + padding: 20px; } -.modal-close:before { - transform: rotate(45deg); +.box:not(:last-child) { + margin-bottom: 20px; } -.modal-close:after { - transform: rotate(-45deg); +a.box:hover, a.box:focus { + box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px #11e4c4; } -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); +a.box:active { + box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.2), 0 0 0 1px #11e4c4; } -.is-small.modal-close { - height: 16px; - width: 16px; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } -.is-medium.modal-close { +.button { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + background-color: white; + border: 1px solid #dbdbdb; + border-radius: 3px; + color: #242424; + display: inline-flex; + font-size: 14px; height: 32px; - width: 32px; -} - -.is-large.modal-close { - height: 40px; - width: 40px; + justify-content: flex-start; + line-height: 24px; + padding-left: 8px; + padding-right: 8px; + position: relative; + vertical-align: top; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + justify-content: center; + padding-left: 10px; + padding-right: 10px; + text-align: center; + white-space: nowrap; } -.nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; +.button:hover { + border-color: #b5b5b5; } -.nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - transition: none 86ms ease-out; - transition-property: background, left, opacity, transform; - width: 15px; +.button:active, .button:focus, .button.is-active { + border-color: #11e4c4; + outline: none; } -.nav-toggle span:nth-child(1) { - margin-top: -6px; +.button[disabled], .button.is-disabled { + background-color: whitesmoke; + border-color: #dbdbdb; + cursor: not-allowed; + pointer-events: none; } -.nav-toggle span:nth-child(2) { - margin-top: -1px; +.button[disabled]::-moz-placeholder, .button.is-disabled::-moz-placeholder { + color: rgba(36, 36, 36, 0.3); } -.nav-toggle span:nth-child(3) { - margin-top: 4px; +.button[disabled]::-webkit-input-placeholder, .button.is-disabled::-webkit-input-placeholder { + color: rgba(36, 36, 36, 0.3); } -.nav-toggle:hover { - background-color: whitesmoke; +.button[disabled]:-moz-placeholder, .button.is-disabled:-moz-placeholder { + color: rgba(36, 36, 36, 0.3); } -.is-active.nav-toggle span { - background-color: #11e4c4; +.button[disabled]:-ms-input-placeholder, .button.is-disabled:-ms-input-placeholder { + color: rgba(36, 36, 36, 0.3); } -.is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; +.button strong { + color: inherit; } -.is-active.nav-toggle span:nth-child(2) { - opacity: 0; +.button small { + display: block; + font-size: 11px; + line-height: 1; + margin-top: 5px; } -.is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; +.button .icon:first-child, +.button .tag:first-child { + margin-left: -2px; + margin-right: 4px; } -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; +.button .icon:last-child, +.button .tag:last-child { + margin-left: 4px; + margin-right: -2px; } -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.button:hover, .button:focus, .button.is-active { + color: #242424; } -.box { +.button:active { + box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.2); +} + +.button.is-white { background-color: white; - border-radius: 5px; - box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px rgba(18, 18, 18, 0.1); - display: block; - padding: 20px; + border-color: transparent; + color: #121212; } -a.box:hover, a.box:focus { - box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px #11e4c4; +.button.is-white:hover, .button.is-white:focus, .button.is-white.is-active { + background-color: #f2f2f2; + border-color: transparent; + color: #121212; } -a.box:active { - box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.2), 0 0 0 1px #11e4c4; +.button.is-white:active { + border-color: transparent; } -.container { - position: relative; +.button.is-white.is-inverted { + background-color: #121212; + color: white; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.button.is-white.is-inverted:hover { + background-color: #050505; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.button.is-white.is-loading:after { + border-color: transparent transparent #121212 #121212 !important; } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.button.is-white.is-outlined { + background-color: transparent; + border-color: white; + color: white; } -.icon { - display: inline-block; - font-size: 21px; - height: 24px; - line-height: 24px; - text-align: center; - vertical-align: top; - width: 24px; +.button.is-white.is-outlined:hover, .button.is-white.is-outlined:focus { + background-color: white; + border-color: white; + color: #121212; } -.icon .fa { - font-size: inherit; - line-height: inherit; +.button.is-black { + background-color: #121212; + border-color: transparent; + color: white; } -.icon.is-small { - display: inline-block; - font-size: 14px; - height: 16px; - line-height: 16px; - text-align: center; - vertical-align: top; - width: 16px; +.button.is-black:hover, .button.is-black:focus, .button.is-black.is-active { + background-color: #050505; + border-color: transparent; + color: white; } -.icon.is-medium { - display: inline-block; - font-size: 28px; - height: 32px; - line-height: 32px; - text-align: center; - vertical-align: top; - width: 32px; +.button.is-black:active { + border-color: transparent; } -.icon.is-large { - display: inline-block; - font-size: 42px; - height: 48px; - line-height: 48px; - text-align: center; - vertical-align: top; - width: 48px; +.button.is-black.is-inverted { + background-color: white; + color: #121212; } -.heading { - display: block; - font-size: 11px; - letter-spacing: 1px; - margin-bottom: 5px; - text-transform: uppercase; +.button.is-black.is-inverted:hover { + background-color: #f2f2f2; } -.highlight { - font-size: 12px; - font-weight: normal; - max-width: 100%; - overflow: hidden; - padding: 0; +.button.is-black.is-loading:after { + border-color: transparent transparent white white !important; } -.highlight pre { - overflow: auto; - max-width: 100%; +.button.is-black.is-outlined { + background-color: transparent; + border-color: #121212; + color: #121212; } -.number { - background-color: whitesmoke; - border-radius: 290486px; - display: inline-block; - font-size: 18px; - vertical-align: top; +.button.is-black.is-outlined:hover, .button.is-black.is-outlined:focus { + background-color: #121212; + border-color: #121212; + color: white; } -.tag { - align-items: center; +.button.is-light { background-color: whitesmoke; - border-radius: 290486px; + border-color: transparent; color: #7a7a7a; - display: inline-flex; - font-size: 12px; - height: 24px; - justify-content: center; - line-height: 16px; - padding-left: 10px; - padding-right: 10px; - vertical-align: top; - white-space: nowrap; } -.tag .delete { - margin-left: 4px; - margin-right: -6px; +.button.is-light:hover, .button.is-light:focus, .button.is-light.is-active { + background-color: #e8e8e8; + border-color: transparent; + color: #7a7a7a; } -.tag.is-white { - background-color: white; - color: #121212; +.button.is-light:active { + border-color: transparent; } -.tag.is-black { - background-color: #121212; - color: white; +.button.is-light.is-inverted { + background-color: #7a7a7a; + color: whitesmoke; } -.tag.is-light { +.button.is-light.is-inverted:hover { + background-color: #6e6e6e; +} + +.button.is-light.is-loading:after { + border-color: transparent transparent #7a7a7a #7a7a7a !important; +} + +.button.is-light.is-outlined { + background-color: transparent; + border-color: whitesmoke; + color: whitesmoke; +} + +.button.is-light.is-outlined:hover, .button.is-light.is-outlined:focus { background-color: whitesmoke; + border-color: whitesmoke; color: #7a7a7a; } -.tag.is-dark { +.button.is-dark { background-color: #7a7a7a; + border-color: transparent; color: whitesmoke; } -.tag.is-primary { - background-color: #11e4c4; - color: white; +.button.is-dark:hover, .button.is-dark:focus, .button.is-dark.is-active { + background-color: #6e6e6e; + border-color: transparent; + color: whitesmoke; } -.tag.is-info { - background-color: #0f6bff; - color: white; +.button.is-dark:active { + border-color: transparent; } -.tag.is-success { - background-color: #20ee68; - color: white; +.button.is-dark.is-inverted { + background-color: whitesmoke; + color: #7a7a7a; } -.tag.is-warning { - background-color: #ffcf0f; - color: white; +.button.is-dark.is-inverted:hover { + background-color: #e8e8e8; } -.tag.is-danger { - background-color: #ff0f3f; - color: white; +.button.is-dark.is-loading:after { + border-color: transparent transparent whitesmoke whitesmoke !important; } -.tag.is-small { - font-size: 11px; - height: 20px; - padding-left: 8px; - padding-right: 8px; +.button.is-dark.is-outlined { + background-color: transparent; + border-color: #7a7a7a; + color: #7a7a7a; } -.tag.is-medium { - font-size: 14px; - height: 32px; - padding-left: 14px; - padding-right: 14px; -} - -.tag.is-large { - font-size: 18px; - height: 40px; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; -} - -.tag.is-large .delete { - margin-left: 4px; - margin-right: -8px; -} - -.button { - -moz-appearance: none; - -webkit-appearance: none; - align-items: center; - background-color: white; - border: 1px solid #dbdbdb; - border-radius: 3px; - color: #242424; - display: inline-flex; - font-size: 14px; - height: 32px; - justify-content: flex-start; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; - position: relative; - vertical-align: top; - justify-content: center; - padding-left: 10px; - padding-right: 10px; - text-align: center; - white-space: nowrap; -} - -.button:hover { - border-color: #b5b5b5; -} - -.button:active, .button:focus, .button.is-active { - border-color: #11e4c4; - outline: none; -} - -.button[disabled], .button.is-disabled { - background-color: whitesmoke; - border-color: #dbdbdb; - cursor: not-allowed; - pointer-events: none; -} - -.button[disabled]::-moz-placeholder, .button.is-disabled::-moz-placeholder { - color: rgba(36, 36, 36, 0.3); -} - -.button[disabled]::-webkit-input-placeholder, .button.is-disabled::-webkit-input-placeholder { - color: rgba(36, 36, 36, 0.3); +.button.is-dark.is-outlined:hover, .button.is-dark.is-outlined:focus { + background-color: #7a7a7a; + border-color: #7a7a7a; + color: whitesmoke; } -.button[disabled]:-moz-placeholder, .button.is-disabled:-moz-placeholder { - color: rgba(36, 36, 36, 0.3); +.button.is-primary { + background-color: #11e4c4; + border-color: transparent; + color: white; } -.button[disabled]:-ms-input-placeholder, .button.is-disabled:-ms-input-placeholder { - color: rgba(36, 36, 36, 0.3); +.button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active { + background-color: #0fccb0; + border-color: transparent; + color: white; } -.button strong { - color: inherit; +.button.is-primary:active { + border-color: transparent; } -.button small { - display: block; - font-size: 11px; - line-height: 1; - margin-top: 5px; +.button.is-primary.is-inverted { + background-color: white; + color: #11e4c4; } -.button .icon:first-child, -.button .tag:first-child { - margin-left: -2px; - margin-right: 4px; +.button.is-primary.is-inverted:hover { + background-color: #f2f2f2; } -.button .icon:last-child, -.button .tag:last-child { - margin-left: 4px; - margin-right: -2px; +.button.is-primary.is-loading:after { + border-color: transparent transparent white white !important; } -.button:hover, .button:focus, .button.is-active { - color: #242424; +.button.is-primary.is-outlined { + background-color: transparent; + border-color: #11e4c4; + color: #11e4c4; } -.button:active { - box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.2); +.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { + background-color: #11e4c4; + border-color: #11e4c4; + color: white; } -.button.is-white { - background-color: white; +.button.is-info { + background-color: #0f6bff; border-color: transparent; - color: #121212; + color: white; } -.button.is-white:hover, .button.is-white:focus, .button.is-white.is-active { - background-color: #f2f2f2; +.button.is-info:hover, .button.is-info:focus, .button.is-info.is-active { + background-color: #005ef5; border-color: transparent; - color: #121212; + color: white; } -.button.is-white:active { +.button.is-info:active { border-color: transparent; } -.button.is-white.is-inverted { - background-color: #121212; - color: white; +.button.is-info.is-inverted { + background-color: white; + color: #0f6bff; } -.button.is-white.is-inverted:hover { - background-color: #050505; +.button.is-info.is-inverted:hover { + background-color: #f2f2f2; } -.button.is-white.is-loading:after { - border-color: transparent transparent #121212 #121212 !important; +.button.is-info.is-loading:after { + border-color: transparent transparent white white !important; } -.button.is-white.is-outlined { +.button.is-info.is-outlined { background-color: transparent; - border-color: white; - color: white; + border-color: #0f6bff; + color: #0f6bff; } -.button.is-white.is-outlined:hover, .button.is-white.is-outlined:focus { - background-color: white; - border-color: white; - color: #121212; +.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { + background-color: #0f6bff; + border-color: #0f6bff; + color: white; } -.button.is-black { - background-color: #121212; +.button.is-success { + background-color: #20ee68; border-color: transparent; color: white; } -.button.is-black:hover, .button.is-black:focus, .button.is-black.is-active { - background-color: #050505; +.button.is-success:hover, .button.is-success:focus, .button.is-success.is-active { + background-color: #11e45b; border-color: transparent; color: white; } -.button.is-black:active { +.button.is-success:active { border-color: transparent; } -.button.is-black.is-inverted { +.button.is-success.is-inverted { background-color: white; - color: #121212; + color: #20ee68; } -.button.is-black.is-inverted:hover { +.button.is-success.is-inverted:hover { background-color: #f2f2f2; } -.button.is-black.is-loading:after { +.button.is-success.is-loading:after { border-color: transparent transparent white white !important; } -.button.is-black.is-outlined { +.button.is-success.is-outlined { background-color: transparent; - border-color: #121212; - color: #121212; + border-color: #20ee68; + color: #20ee68; } -.button.is-black.is-outlined:hover, .button.is-black.is-outlined:focus { - background-color: #121212; - border-color: #121212; +.button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { + background-color: #20ee68; + border-color: #20ee68; color: white; } -.button.is-light { - background-color: whitesmoke; +.button.is-warning { + background-color: #ffcf0f; border-color: transparent; - color: #7a7a7a; + color: rgba(0, 0, 0, 0.7); } -.button.is-light:hover, .button.is-light:focus, .button.is-light.is-active { - background-color: #e8e8e8; +.button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active { + background-color: #f5c400; border-color: transparent; - color: #7a7a7a; + color: rgba(0, 0, 0, 0.7); } -.button.is-light:active { +.button.is-warning:active { border-color: transparent; } -.button.is-light.is-inverted { - background-color: #7a7a7a; - color: whitesmoke; +.button.is-warning.is-inverted { + background-color: rgba(0, 0, 0, 0.7); + color: #ffcf0f; } -.button.is-light.is-inverted:hover { - background-color: #6e6e6e; +.button.is-warning.is-inverted:hover { + background-color: rgba(0, 0, 0, 0.7); } -.button.is-light.is-loading:after { - border-color: transparent transparent #7a7a7a #7a7a7a !important; +.button.is-warning.is-loading:after { + border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } -.button.is-light.is-outlined { +.button.is-warning.is-outlined { background-color: transparent; - border-color: whitesmoke; - color: whitesmoke; + border-color: #ffcf0f; + color: #ffcf0f; } -.button.is-light.is-outlined:hover, .button.is-light.is-outlined:focus { - background-color: whitesmoke; - border-color: whitesmoke; - color: #7a7a7a; +.button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus { + background-color: #ffcf0f; + border-color: #ffcf0f; + color: rgba(0, 0, 0, 0.7); } -.button.is-dark { - background-color: #7a7a7a; +.button.is-danger { + background-color: #ff0f3f; border-color: transparent; - color: whitesmoke; + color: white; } -.button.is-dark:hover, .button.is-dark:focus, .button.is-dark.is-active { - background-color: #6e6e6e; +.button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active { + background-color: #f50031; border-color: transparent; - color: whitesmoke; + color: white; } -.button.is-dark:active { +.button.is-danger:active { border-color: transparent; } -.button.is-dark.is-inverted { - background-color: whitesmoke; - color: #7a7a7a; +.button.is-danger.is-inverted { + background-color: white; + color: #ff0f3f; } -.button.is-dark.is-inverted:hover { - background-color: #e8e8e8; +.button.is-danger.is-inverted:hover { + background-color: #f2f2f2; } -.button.is-dark.is-loading:after { - border-color: transparent transparent whitesmoke whitesmoke !important; +.button.is-danger.is-loading:after { + border-color: transparent transparent white white !important; } -.button.is-dark.is-outlined { - background-color: transparent; - border-color: #7a7a7a; - color: #7a7a7a; -} - -.button.is-dark.is-outlined:hover, .button.is-dark.is-outlined:focus { - background-color: #7a7a7a; - border-color: #7a7a7a; - color: whitesmoke; -} - -.button.is-primary { - background-color: #11e4c4; - border-color: transparent; - color: white; -} - -.button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active { - background-color: #0fccb0; - border-color: transparent; - color: white; -} - -.button.is-primary:active { - border-color: transparent; -} - -.button.is-primary.is-inverted { - background-color: white; - color: #11e4c4; -} - -.button.is-primary.is-inverted:hover { - background-color: #f2f2f2; -} - -.button.is-primary.is-loading:after { - border-color: transparent transparent white white !important; -} - -.button.is-primary.is-outlined { - background-color: transparent; - border-color: #11e4c4; - color: #11e4c4; -} - -.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { - background-color: #11e4c4; - border-color: #11e4c4; - color: white; -} - -.button.is-info { - background-color: #0f6bff; - border-color: transparent; - color: white; -} - -.button.is-info:hover, .button.is-info:focus, .button.is-info.is-active { - background-color: #005ef5; - border-color: transparent; - color: white; -} - -.button.is-info:active { - border-color: transparent; -} - -.button.is-info.is-inverted { - background-color: white; - color: #0f6bff; -} - -.button.is-info.is-inverted:hover { - background-color: #f2f2f2; -} - -.button.is-info.is-loading:after { - border-color: transparent transparent white white !important; -} - -.button.is-info.is-outlined { - background-color: transparent; - border-color: #0f6bff; - color: #0f6bff; -} - -.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { - background-color: #0f6bff; - border-color: #0f6bff; - color: white; -} - -.button.is-success { - background-color: #20ee68; - border-color: transparent; - color: white; -} - -.button.is-success:hover, .button.is-success:focus, .button.is-success.is-active { - background-color: #11e45b; - border-color: transparent; - color: white; -} - -.button.is-success:active { - border-color: transparent; -} - -.button.is-success.is-inverted { - background-color: white; - color: #20ee68; -} - -.button.is-success.is-inverted:hover { - background-color: #f2f2f2; -} - -.button.is-success.is-loading:after { - border-color: transparent transparent white white !important; -} - -.button.is-success.is-outlined { - background-color: transparent; - border-color: #20ee68; - color: #20ee68; -} - -.button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { - background-color: #20ee68; - border-color: #20ee68; - color: white; -} - -.button.is-warning { - background-color: #ffcf0f; - border-color: transparent; - color: white; -} - -.button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active { - background-color: #f5c400; - border-color: transparent; - color: white; -} - -.button.is-warning:active { - border-color: transparent; -} - -.button.is-warning.is-inverted { - background-color: white; - color: #ffcf0f; -} - -.button.is-warning.is-inverted:hover { - background-color: #f2f2f2; -} - -.button.is-warning.is-loading:after { - border-color: transparent transparent white white !important; -} - -.button.is-warning.is-outlined { - background-color: transparent; - border-color: #ffcf0f; - color: #ffcf0f; -} - -.button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus { - background-color: #ffcf0f; - border-color: #ffcf0f; - color: white; -} - -.button.is-danger { - background-color: #ff0f3f; - border-color: transparent; - color: white; -} - -.button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active { - background-color: #f50031; - border-color: transparent; - color: white; -} - -.button.is-danger:active { - border-color: transparent; -} - -.button.is-danger.is-inverted { - background-color: white; - color: #ff0f3f; -} - -.button.is-danger.is-inverted:hover { - background-color: #f2f2f2; -} - -.button.is-danger.is-loading:after { - border-color: transparent transparent white white !important; -} - -.button.is-danger.is-outlined { +.button.is-danger.is-outlined { background-color: transparent; border-color: #ff0f3f; color: #ff0f3f; @@ -1473,6 +1099,16 @@ a.box:active { } .button.is-loading:after { + animation: spin-around 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 16px; + position: relative; + width: 16px; left: 50%; margin-left: -8px; margin-top: -8px; @@ -1481,161 +1117,28 @@ a.box:active { position: absolute !important; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; +.content { + color: #7a7a7a; } -.modal-close { - -moz-appearance: none; - -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - height: 24px; - position: relative; - vertical-align: top; - width: 24px; +.content:not(:last-child) { + margin-bottom: 20px; } -.modal-close:before, .modal-close:after { - background-color: white; - content: ""; - display: block; - height: 2px; - left: 50%; - margin-left: -25%; - margin-top: -1px; - position: absolute; - top: 50%; - width: 50%; +.content a:not(.button) { + border-bottom: 1px solid #dbdbdb; } -.modal-close:before { - transform: rotate(45deg); +.content a:not(.button):visited { + color: #b86bff; } -.modal-close:after { - transform: rotate(-45deg); +.content a:not(.button):hover { + border-bottom-color: #11e4c4; } -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.is-small.modal-close { - height: 16px; - width: 16px; -} - -.is-medium.modal-close { - height: 32px; - width: 32px; -} - -.is-large.modal-close { - height: 40px; - width: 40px; -} - -.nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - transition: none 86ms ease-out; - transition-property: background, left, opacity, transform; - width: 15px; -} - -.nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.nav-toggle:hover { - background-color: whitesmoke; -} - -.is-active.nav-toggle span { - background-color: #11e4c4; -} - -.is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; -} - -.is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; -} - -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; -} - -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.content { - color: #7a7a7a; -} - -.content a:not(.button) { - border-bottom: 1px solid #dbdbdb; -} - -.content a:not(.button):visited { - color: #b86bff; -} - -.content a:not(.button):hover { - border-bottom-color: #11e4c4; -} - -.content li + li { - margin-top: 0.25em; +.content li + li { + margin-top: 0.25em; } .content blockquote:not(:last-child), @@ -1732,277 +1235,101 @@ a.box:active { font-size: 18px; } -.container { - position: relative; -} - -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; +@keyframes spin-around { + from { + transform: rotate(0deg); } - .container.is-fluid { - margin: 0 20px; - max-width: none; + to { + transform: rotate(359deg); } } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); } } -.fa { - font-size: 21px; - text-align: center; +.input, +.textarea { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + background-color: white; + border: 1px solid #dbdbdb; + border-radius: 3px; + color: #242424; + display: inline-flex; + font-size: 14px; + height: 32px; + justify-content: flex-start; + line-height: 24px; + padding-left: 8px; + padding-right: 8px; + position: relative; vertical-align: top; + box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.1); + max-width: 100%; + width: 100%; } -.icon { - display: inline-block; - font-size: 21px; - height: 24px; - line-height: 24px; - text-align: center; - vertical-align: top; - width: 24px; +.input:hover, +.textarea:hover { + border-color: #b5b5b5; } -.icon .fa { - font-size: inherit; - line-height: inherit; +.input:active, .input:focus, .input.is-active, +.textarea:active, +.textarea:focus, +.textarea.is-active { + border-color: #11e4c4; + outline: none; } -.icon.is-small { - display: inline-block; - font-size: 14px; - height: 16px; - line-height: 16px; - text-align: center; - vertical-align: top; - width: 16px; +.input[disabled], .input.is-disabled, +.textarea[disabled], +.textarea.is-disabled { + background-color: whitesmoke; + border-color: #dbdbdb; + cursor: not-allowed; + pointer-events: none; } -.icon.is-medium { - display: inline-block; - font-size: 28px; - height: 32px; - line-height: 32px; - text-align: center; - vertical-align: top; - width: 32px; +.input[disabled]::-moz-placeholder, .input.is-disabled::-moz-placeholder, +.textarea[disabled]::-moz-placeholder, +.textarea.is-disabled::-moz-placeholder { + color: rgba(36, 36, 36, 0.3); } -.icon.is-large { - display: inline-block; - font-size: 42px; - height: 48px; - line-height: 48px; - text-align: center; - vertical-align: top; - width: 48px; +.input[disabled]::-webkit-input-placeholder, .input.is-disabled::-webkit-input-placeholder, +.textarea[disabled]::-webkit-input-placeholder, +.textarea.is-disabled::-webkit-input-placeholder { + color: rgba(36, 36, 36, 0.3); } -.heading { - display: block; - font-size: 11px; - letter-spacing: 1px; - margin-bottom: 5px; - text-transform: uppercase; +.input[disabled]:-moz-placeholder, .input.is-disabled:-moz-placeholder, +.textarea[disabled]:-moz-placeholder, +.textarea.is-disabled:-moz-placeholder { + color: rgba(36, 36, 36, 0.3); } -.highlight { - font-size: 12px; - font-weight: normal; - max-width: 100%; - overflow: hidden; - padding: 0; +.input[disabled]:-ms-input-placeholder, .input.is-disabled:-ms-input-placeholder, +.textarea[disabled]:-ms-input-placeholder, +.textarea.is-disabled:-ms-input-placeholder { + color: rgba(36, 36, 36, 0.3); } -.highlight pre { - overflow: auto; - max-width: 100%; +.input.is-white, +.textarea.is-white { + border-color: white; } -.number { - background-color: whitesmoke; - border-radius: 290486px; - display: inline-block; - font-size: 18px; - vertical-align: top; -} - -.tag { - align-items: center; - background-color: whitesmoke; - border-radius: 290486px; - color: #7a7a7a; - display: inline-flex; - font-size: 12px; - height: 24px; - justify-content: center; - line-height: 16px; - padding-left: 10px; - padding-right: 10px; - vertical-align: top; - white-space: nowrap; -} - -.tag .delete { - margin-left: 4px; - margin-right: -6px; -} - -.tag.is-white { - background-color: white; - color: #121212; -} - -.tag.is-black { - background-color: #121212; - color: white; -} - -.tag.is-light { - background-color: whitesmoke; - color: #7a7a7a; -} - -.tag.is-dark { - background-color: #7a7a7a; - color: whitesmoke; -} - -.tag.is-primary { - background-color: #11e4c4; - color: white; -} - -.tag.is-info { - background-color: #0f6bff; - color: white; -} - -.tag.is-success { - background-color: #20ee68; - color: white; -} - -.tag.is-warning { - background-color: #ffcf0f; - color: white; -} - -.tag.is-danger { - background-color: #ff0f3f; - color: white; -} - -.tag.is-small { - font-size: 11px; - height: 20px; - padding-left: 8px; - padding-right: 8px; -} - -.tag.is-medium { - font-size: 14px; - height: 32px; - padding-left: 14px; - padding-right: 14px; -} - -.tag.is-large { - font-size: 18px; - height: 40px; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; -} - -.tag.is-large .delete { - margin-left: 4px; - margin-right: -8px; -} - -.input, -.textarea { - -moz-appearance: none; - -webkit-appearance: none; - align-items: center; - background-color: white; - border: 1px solid #dbdbdb; - border-radius: 3px; - color: #242424; - display: inline-flex; - font-size: 14px; - height: 32px; - justify-content: flex-start; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; - position: relative; - vertical-align: top; - box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.1); - max-width: 100%; - width: 100%; -} - -.input:hover, -.textarea:hover { - border-color: #b5b5b5; -} - -.input:active, .input:focus, .input.is-active, -.textarea:active, -.textarea:focus, -.textarea.is-active { - border-color: #11e4c4; - outline: none; -} - -.input[disabled], .input.is-disabled, -.textarea[disabled], -.textarea.is-disabled { - background-color: whitesmoke; - border-color: #dbdbdb; - cursor: not-allowed; - pointer-events: none; -} - -.input[disabled]::-moz-placeholder, .input.is-disabled::-moz-placeholder, -.textarea[disabled]::-moz-placeholder, -.textarea.is-disabled::-moz-placeholder { - color: rgba(36, 36, 36, 0.3); -} - -.input[disabled]::-webkit-input-placeholder, .input.is-disabled::-webkit-input-placeholder, -.textarea[disabled]::-webkit-input-placeholder, -.textarea.is-disabled::-webkit-input-placeholder { - color: rgba(36, 36, 36, 0.3); -} - -.input[disabled]:-moz-placeholder, .input.is-disabled:-moz-placeholder, -.textarea[disabled]:-moz-placeholder, -.textarea.is-disabled:-moz-placeholder { - color: rgba(36, 36, 36, 0.3); -} - -.input[disabled]:-ms-input-placeholder, .input.is-disabled:-ms-input-placeholder, -.textarea[disabled]:-ms-input-placeholder, -.textarea.is-disabled:-ms-input-placeholder { - color: rgba(36, 36, 36, 0.3); -} - -.input.is-white, -.textarea.is-white { - border-color: white; -} - -.input.is-black, -.textarea.is-black { - border-color: #121212; +.input.is-black, +.textarea.is-black { + border-color: #121212; } .input.is-light, @@ -2096,7 +1423,8 @@ a.box:active { resize: vertical; } -.checkbox, .radio { +.checkbox, +.radio { cursor: pointer; display: inline-block; line-height: 16px; @@ -2104,20 +1432,24 @@ a.box:active { vertical-align: top; } -.checkbox input, .radio input { +.checkbox input, +.radio input { cursor: pointer; } -.checkbox:hover, .radio:hover { +.checkbox:hover, +.radio:hover { color: #242424; } -.is-disabled.checkbox, .is-disabled.radio { +.checkbox.is-disabled, +.radio.is-disabled { color: #b5b5b5; pointer-events: none; } -.is-disabled.checkbox input, .is-disabled.radio input { +.checkbox.is-disabled input, +.radio.is-disabled input { pointer-events: none; } @@ -2584,11 +1916,30 @@ a.box:active { } .control.is-loading:after { + animation: spin-around 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 16px; + position: relative; + width: 16px; position: absolute !important; right: 8px; top: 8px; } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + .image { display: block; position: relative; @@ -2665,185 +2016,62 @@ a.box:active { width: 128px; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } -.modal-close { - -moz-appearance: none; - -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - height: 24px; +.notification { + background-color: whitesmoke; + border-radius: 3px; + padding: 16px 20px; position: relative; - vertical-align: top; - width: 24px; } -.modal-close:before, .modal-close:after { - background-color: white; - content: ""; - display: block; - height: 2px; - left: 50%; - margin-left: -25%; - margin-top: -1px; - position: absolute; - top: 50%; - width: 50%; +.notification:not(:last-child) { + margin-bottom: 20px; } -.modal-close:before { - transform: rotate(45deg); +.notification:after { + clear: both; + content: " "; + display: table; } -.modal-close:after { - transform: rotate(-45deg); +.notification .delete { + border-radius: 0 3px; + float: right; + margin: -16px -20px 0 20px; } -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); +.notification .title, +.notification .subtitle, +.notification .content { + color: inherit; } -.is-small.modal-close { - height: 16px; - width: 16px; +.notification.is-white { + background-color: white; + color: #121212; } -.is-medium.modal-close { - height: 32px; - width: 32px; +.notification.is-black { + background-color: #121212; + color: white; } -.is-large.modal-close { - height: 40px; - width: 40px; +.notification.is-light { + background-color: whitesmoke; + color: #7a7a7a; } -.nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - transition: none 86ms ease-out; - transition-property: background, left, opacity, transform; - width: 15px; -} - -.nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.nav-toggle:hover { - background-color: whitesmoke; -} - -.is-active.nav-toggle span { - background-color: #11e4c4; -} - -.is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; -} - -.is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; -} - -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; -} - -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.notification { - background-color: whitesmoke; - border-radius: 3px; - padding: 16px 20px; - position: relative; -} - -.notification:after { - clear: both; - content: " "; - display: table; -} - -.notification .delete { - border-radius: 0 3px; - float: right; - margin: -16px -20px 0 20px; -} - -.notification .subtitle, -.notification .title { - color: inherit; -} - -.notification.is-white { - background-color: white; - color: #121212; -} - -.notification.is-black { - background-color: #121212; - color: white; -} - -.notification.is-light { - background-color: whitesmoke; - color: #7a7a7a; -} - -.notification.is-dark { - background-color: #7a7a7a; - color: whitesmoke; +.notification.is-dark { + background-color: #7a7a7a; + color: whitesmoke; } .notification.is-primary { @@ -2863,7 +2091,7 @@ a.box:active { .notification.is-warning { background-color: #ffcf0f; - color: white; + color: rgba(0, 0, 0, 0.7); } .notification.is-danger { @@ -2871,143 +2099,6 @@ a.box:active { color: white; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; -} - -.modal-close { - -moz-appearance: none; - -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - height: 24px; - position: relative; - vertical-align: top; - width: 24px; -} - -.modal-close:before, .modal-close:after { - background-color: white; - content: ""; - display: block; - height: 2px; - left: 50%; - margin-left: -25%; - margin-top: -1px; - position: absolute; - top: 50%; - width: 50%; -} - -.modal-close:before { - transform: rotate(45deg); -} - -.modal-close:after { - transform: rotate(-45deg); -} - -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.is-small.modal-close { - height: 16px; - width: 16px; -} - -.is-medium.modal-close { - height: 32px; - width: 32px; -} - -.is-large.modal-close { - height: 40px; - width: 40px; -} - -.nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - transition: none 86ms ease-out; - transition-property: background, left, opacity, transform; - width: 15px; -} - -.nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.nav-toggle:hover { - background-color: whitesmoke; -} - -.is-active.nav-toggle span { - background-color: #11e4c4; -} - -.is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; -} - -.is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; -} - -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; -} - -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - .progress { -moz-appearance: none; -webkit-appearance: none; @@ -3020,6 +2111,10 @@ a.box:active { width: 100%; } +.progress:not(:last-child) { + margin-bottom: 20px; +} + .progress::-webkit-progress-bar { background-color: #dbdbdb; } @@ -3116,6 +2211,15 @@ a.box:active { height: 20px; } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + .table { background-color: white; color: #242424; @@ -3262,141 +2366,13 @@ a.box:active { background-color: #f0f0f0; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; -} - -.modal-close { - -moz-appearance: none; - -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - height: 24px; - position: relative; - vertical-align: top; - width: 24px; -} - -.modal-close:before, .modal-close:after { - background-color: white; - content: ""; - display: block; - height: 2px; - left: 50%; - margin-left: -25%; - margin-top: -1px; - position: absolute; - top: 50%; - width: 50%; -} - -.modal-close:before { - transform: rotate(45deg); -} - -.modal-close:after { - transform: rotate(-45deg); -} - -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.is-small.modal-close { - height: 16px; - width: 16px; -} - -.is-medium.modal-close { - height: 32px; - width: 32px; -} - -.is-large.modal-close { - height: 40px; - width: 40px; -} - -.nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - transition: none 86ms ease-out; - transition-property: background, left, opacity, transform; - width: 15px; -} - -.nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.nav-toggle:hover { - background-color: whitesmoke; -} - -.is-active.nav-toggle span { - background-color: #11e4c4; -} - -.is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; -} - -.is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; -} - -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; -} - -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } .title, @@ -3405,6 +2381,11 @@ a.box:active { word-break: break-word; } +.title:not(:last-child), +.subtitle:not(:last-child) { + margin-bottom: 20px; +} + .title em, .title span, .subtitle em, @@ -3590,6 +2571,19 @@ a.box:active { font-weight: 700; } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + +.block:not(:last-child) { + margin-bottom: 20px; +} + .container { position: relative; } @@ -3611,12 +2605,128 @@ a.box:active { } } +.delete { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -moz-appearance: none; + -webkit-appearance: none; + background-color: rgba(18, 18, 18, 0.2); + border: none; + border-radius: 290486px; + cursor: pointer; + display: inline-block; + height: 24px; + position: relative; + vertical-align: top; + width: 24px; +} + +.delete:before, .delete:after { + background-color: white; + content: ""; + display: block; + height: 2px; + left: 50%; + margin-left: -25%; + margin-top: -1px; + position: absolute; + top: 50%; + width: 50%; +} + +.delete:before { + transform: rotate(45deg); +} + +.delete:after { + transform: rotate(-45deg); +} + +.delete:hover { + background-color: rgba(18, 18, 18, 0.5); +} + +.delete.is-small { + height: 16px; + width: 16px; +} + +.delete.is-medium { + height: 32px; + width: 32px; +} + +.delete.is-large { + height: 40px; + width: 40px; +} + .fa { font-size: 21px; text-align: center; vertical-align: top; } +.hamburger { + cursor: pointer; + display: block; + height: 50px; + position: relative; + width: 50px; +} + +.hamburger span { + background-color: #7a7a7a; + display: block; + height: 1px; + left: 50%; + margin-left: -7px; + position: absolute; + top: 50%; + transition: none 86ms ease-out; + transition-property: background, left, opacity, transform; + width: 15px; +} + +.hamburger span:nth-child(1) { + margin-top: -6px; +} + +.hamburger span:nth-child(2) { + margin-top: -1px; +} + +.hamburger span:nth-child(3) { + margin-top: 4px; +} + +.hamburger:hover { + background-color: whitesmoke; +} + +.hamburger.is-active span { + background-color: #11e4c4; +} + +.hamburger.is-active span:nth-child(1) { + margin-left: -5px; + transform: rotate(45deg); + transform-origin: left top; +} + +.hamburger.is-active span:nth-child(2) { + opacity: 0; +} + +.hamburger.is-active span:nth-child(3) { + margin-left: -5px; + transform: rotate(-45deg); + transform-origin: left bottom; +} + .icon { display: inline-block; font-size: 21px; @@ -3678,11 +2788,28 @@ a.box:active { padding: 0; } +.highlight:not(:last-child) { + margin-bottom: 20px; +} + .highlight pre { overflow: auto; max-width: 100%; } +.loader { + animation: spin-around 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 16px; + position: relative; + width: 16px; +} + .number { background-color: whitesmoke; border-radius: 290486px; @@ -3749,7 +2876,7 @@ a.box:active { .tag.is-warning { background-color: #ffcf0f; - color: white; + color: rgba(0, 0, 0, 0.7); } .tag.is-danger { @@ -3860,6 +2987,15 @@ a.box:active { border-radius: 5px; } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + .column { flex-basis: 0; flex-grow: 1; @@ -4937,141 +4073,13 @@ a.box:active { color: #2aa198; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; -} - -.modal-close { - -moz-appearance: none; - -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - height: 24px; - position: relative; - vertical-align: top; - width: 24px; -} - -.modal-close:before, .modal-close:after { - background-color: white; - content: ""; - display: block; - height: 2px; - left: 50%; - margin-left: -25%; - margin-top: -1px; - position: absolute; - top: 50%; - width: 50%; -} - -.modal-close:before { - transform: rotate(45deg); -} - -.modal-close:after { - transform: rotate(-45deg); -} - -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.is-small.modal-close { - height: 16px; - width: 16px; -} - -.is-medium.modal-close { - height: 32px; - width: 32px; -} - -.is-large.modal-close { - height: 40px; - width: 40px; -} - -.nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - transition: none 86ms ease-out; - transition-property: background, left, opacity, transform; - width: 15px; -} - -.nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.nav-toggle:hover { - background-color: whitesmoke; -} - -.is-active.nav-toggle span { - background-color: #11e4c4; -} - -.is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; -} - -.is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; -} - -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; -} - -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } .level-item .title, @@ -5121,6 +4129,10 @@ a.box:active { justify-content: space-between; } +.level:not(:last-child) { + margin-bottom: 20px; +} + .level code { border-radius: 3px; } @@ -5151,6 +4163,15 @@ a.box:active { } } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + .media-number { background-color: whitesmoke; border-radius: 290486px; @@ -5276,181 +4297,48 @@ a.box:active { margin-top: 20px; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; -} - -.modal-close { - -moz-appearance: none; - -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - height: 24px; - position: relative; - vertical-align: top; - width: 24px; -} - -.modal-close:before, .modal-close:after { - background-color: white; - content: ""; - display: block; - height: 2px; - left: 50%; - margin-left: -25%; - margin-top: -1px; - position: absolute; - top: 50%; - width: 50%; -} - -.modal-close:before { - transform: rotate(45deg); -} - -.modal-close:after { - transform: rotate(-45deg); -} - -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.is-small.modal-close { - height: 16px; - width: 16px; -} - -.is-medium.modal-close { - height: 32px; - width: 32px; -} - -.is-large.modal-close { - height: 40px; - width: 40px; +.message-body { + border: 1px solid #dbdbdb; + border-radius: 3px; + padding: 12px 15px; } -.nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; +.message-body strong { + color: inherit; } -.nav-toggle span { +.message-header { background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - transition: none 86ms ease-out; - transition-property: background, left, opacity, transform; - width: 15px; -} - -.nav-toggle span:nth-child(1) { - margin-top: -6px; + border-radius: 3px 3px 0 0; + color: white; + padding: 7px 10px; } -.nav-toggle span:nth-child(2) { - margin-top: -1px; +.message-header strong { + color: inherit; } -.nav-toggle span:nth-child(3) { - margin-top: 4px; +.message-header + .message-body { + border-radius: 0 0 3px 3px; + border-top: none; } -.nav-toggle:hover { +.message { background-color: whitesmoke; + border-radius: 3px; } -.is-active.nav-toggle span { - background-color: #11e4c4; -} - -.is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; +.message:not(:last-child) { + margin-bottom: 20px; } -.is-active.nav-toggle span:nth-child(2) { - opacity: 0; +.message.is-white { + background-color: white; } -.is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; -} - -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; -} - -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.message-body { - border: 1px solid #dbdbdb; - border-radius: 3px; - padding: 12px 15px; -} - -.message-body strong { - color: inherit; -} - -.message-header { - background-color: #7a7a7a; - border-radius: 3px 3px 0 0; - color: white; - padding: 7px 10px; -} - -.message-header strong { - color: inherit; -} - -.message-header + .message-body { - border-radius: 0 0 3px 3px; - border-top: none; -} - -.message { - background-color: whitesmoke; - border-radius: 3px; -} - -.message.is-white { - background-color: white; -} - -.message.is-white .message-header { - background-color: white; - color: #121212; +.message.is-white .message-header { + background-color: white; + color: #121212; } .message.is-white .message-body { @@ -5458,930 +4346,160 @@ a.box:active { color: #666666; } -.message.is-black { - background-color: whitesmoke; -} - -.message.is-black .message-header { - background-color: #121212; - color: white; -} - -.message.is-black .message-body { - border-color: #121212; - color: gray; -} - -.message.is-light { - background-color: whitesmoke; -} - -.message.is-light .message-header { - background-color: whitesmoke; - color: #7a7a7a; -} - -.message.is-light .message-body { - border-color: whitesmoke; - color: #666666; -} - -.message.is-dark { - background-color: whitesmoke; -} - -.message.is-dark .message-header { - background-color: #7a7a7a; - color: whitesmoke; -} - -.message.is-dark .message-body { - border-color: #7a7a7a; - color: gray; -} - -.message.is-primary { - background-color: #ecfefb; -} - -.message.is-primary .message-header { - background-color: #11e4c4; - color: white; -} - -.message.is-primary .message-body { - border-color: #11e4c4; - color: gray; -} - -.message.is-info { - background-color: #ebf2ff; -} - -.message.is-info .message-header { - background-color: #0f6bff; - color: white; -} - -.message.is-info .message-body { - border-color: #0f6bff; - color: gray; -} - -.message.is-success { - background-color: #ecfef2; -} - -.message.is-success .message-header { - background-color: #20ee68; - color: white; -} - -.message.is-success .message-body { - border-color: #20ee68; - color: gray; -} - -.message.is-warning { - background-color: #fffbeb; -} - -.message.is-warning .message-header { - background-color: #ffcf0f; - color: white; -} - -.message.is-warning .message-body { - border-color: #ffcf0f; - color: gray; -} - -.message.is-danger { - background-color: #ffebef; -} - -.message.is-danger .message-header { - background-color: #ff0f3f; - color: white; -} - -.message.is-danger .message-body { - border-color: #ff0f3f; - color: gray; -} - -.container { - position: relative; -} - -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } -} - -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } -} - -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; -} - -.icon { - display: inline-block; - font-size: 21px; - height: 24px; - line-height: 24px; - text-align: center; - vertical-align: top; - width: 24px; -} - -.icon .fa { - font-size: inherit; - line-height: inherit; -} - -.icon.is-small { - display: inline-block; - font-size: 14px; - height: 16px; - line-height: 16px; - text-align: center; - vertical-align: top; - width: 16px; -} - -.icon.is-medium { - display: inline-block; - font-size: 28px; - height: 32px; - line-height: 32px; - text-align: center; - vertical-align: top; - width: 32px; -} - -.icon.is-large { - display: inline-block; - font-size: 42px; - height: 48px; - line-height: 48px; - text-align: center; - vertical-align: top; - width: 48px; -} - -.heading { - display: block; - font-size: 11px; - letter-spacing: 1px; - margin-bottom: 5px; - text-transform: uppercase; -} - -.highlight { - font-size: 12px; - font-weight: normal; - max-width: 100%; - overflow: hidden; - padding: 0; -} - -.highlight pre { - overflow: auto; - max-width: 100%; -} - -.number { - background-color: whitesmoke; - border-radius: 290486px; - display: inline-block; - font-size: 18px; - vertical-align: top; -} - -.tag { - align-items: center; - background-color: whitesmoke; - border-radius: 290486px; - color: #7a7a7a; - display: inline-flex; - font-size: 12px; - height: 24px; - justify-content: center; - line-height: 16px; - padding-left: 10px; - padding-right: 10px; - vertical-align: top; - white-space: nowrap; -} - -.tag .delete { - margin-left: 4px; - margin-right: -6px; -} - -.tag.is-white { - background-color: white; - color: #121212; -} - -.tag.is-black { - background-color: #121212; - color: white; -} - -.tag.is-light { - background-color: whitesmoke; - color: #7a7a7a; -} - -.tag.is-dark { - background-color: #7a7a7a; - color: whitesmoke; -} - -.tag.is-primary { - background-color: #11e4c4; - color: white; -} - -.tag.is-info { - background-color: #0f6bff; - color: white; -} - -.tag.is-success { - background-color: #20ee68; - color: white; -} - -.tag.is-warning { - background-color: #ffcf0f; - color: white; -} - -.tag.is-danger { - background-color: #ff0f3f; - color: white; -} - -.tag.is-small { - font-size: 11px; - height: 20px; - padding-left: 8px; - padding-right: 8px; -} - -.tag.is-medium { - font-size: 14px; - height: 32px; - padding-left: 14px; - padding-right: 14px; -} - -.tag.is-large { - font-size: 18px; - height: 40px; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; -} - -.tag.is-large .delete { - margin-left: 4px; - margin-right: -8px; -} - -.modal-background { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - background-color: rgba(18, 18, 18, 0.86); -} - -.modal-content, -.modal-card { - margin: 0 20px; - max-height: calc(100vh - 160px); - overflow: auto; - position: relative; - width: 100%; -} - -@media screen and (min-width: 769px) { - .modal-content, - .modal-card { - margin: 0 auto; - max-height: calc(100vh - 40px); - width: 640px; - } -} - -.modal-close { - background: none; - height: 40px; - position: fixed; - right: 20px; - top: 20px; - width: 40px; -} - -.modal-card { - display: flex; - flex-direction: column; - max-height: calc(100vh - 40px); - overflow: hidden; -} - -.modal-card-head, -.modal-card-foot { - align-items: center; - background-color: whitesmoke; - display: flex; - flex-shrink: 0; - justify-content: flex-start; - padding: 20px; - position: relative; -} - -.modal-card-head { - border-bottom: 1px solid #dbdbdb; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} - -.modal-card-title { - color: #242424; - flex-grow: 1; - flex-shrink: 0; - font-size: 24px; - line-height: 1; -} - -.modal-card-foot { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - border-top: 1px solid #dbdbdb; -} - -.modal-card-foot .button:not(:last-child) { - margin-right: 10px; -} - -.modal-card-body { - background-color: white; - flex-grow: 1; - flex-shrink: 1; - overflow: auto; - padding: 20px; -} - -.modal { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - align-items: center; - display: none; - justify-content: center; - overflow: hidden; - position: fixed; - z-index: 1986; -} - -.modal.is-active { - display: flex; -} - -.container { - position: relative; -} - -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } -} - -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } -} - -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; -} - -.icon { - display: inline-block; - font-size: 21px; - height: 24px; - line-height: 24px; - text-align: center; - vertical-align: top; - width: 24px; -} - -.icon .fa { - font-size: inherit; - line-height: inherit; -} - -.icon.is-small { - display: inline-block; - font-size: 14px; - height: 16px; - line-height: 16px; - text-align: center; - vertical-align: top; - width: 16px; -} - -.icon.is-medium { - display: inline-block; - font-size: 28px; - height: 32px; - line-height: 32px; - text-align: center; - vertical-align: top; - width: 32px; -} - -.icon.is-large { - display: inline-block; - font-size: 42px; - height: 48px; - line-height: 48px; - text-align: center; - vertical-align: top; - width: 48px; -} - -.heading { - display: block; - font-size: 11px; - letter-spacing: 1px; - margin-bottom: 5px; - text-transform: uppercase; -} - -.highlight { - font-size: 12px; - font-weight: normal; - max-width: 100%; - overflow: hidden; - padding: 0; -} - -.highlight pre { - overflow: auto; - max-width: 100%; -} - -.number { - background-color: whitesmoke; - border-radius: 290486px; - display: inline-block; - font-size: 18px; - vertical-align: top; -} - -.tag { - align-items: center; - background-color: whitesmoke; - border-radius: 290486px; - color: #7a7a7a; - display: inline-flex; - font-size: 12px; - height: 24px; - justify-content: center; - line-height: 16px; - padding-left: 10px; - padding-right: 10px; - vertical-align: top; - white-space: nowrap; -} - -.tag .delete { - margin-left: 4px; - margin-right: -6px; -} - -.tag.is-white { - background-color: white; - color: #121212; -} - -.tag.is-black { - background-color: #121212; - color: white; -} - -.tag.is-light { - background-color: whitesmoke; - color: #7a7a7a; -} - -.tag.is-dark { - background-color: #7a7a7a; - color: whitesmoke; -} - -.tag.is-primary { - background-color: #11e4c4; - color: white; -} - -.tag.is-info { - background-color: #0f6bff; - color: white; -} - -.tag.is-success { - background-color: #20ee68; - color: white; -} - -.tag.is-warning { - background-color: #ffcf0f; - color: white; -} - -.tag.is-danger { - background-color: #ff0f3f; - color: white; -} - -.tag.is-small { - font-size: 11px; - height: 20px; - padding-left: 8px; - padding-right: 8px; -} - -.tag.is-medium { - font-size: 14px; - height: 32px; - padding-left: 14px; - padding-right: 14px; -} - -.tag.is-large { - font-size: 18px; - height: 40px; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; -} - -.tag.is-large .delete { - margin-left: 4px; - margin-right: -8px; -} - -@media screen and (min-width: 769px) { - .nav-toggle { - display: none; - } -} - -.nav-item { - align-items: center; - display: flex; - justify-content: center; - padding: 10px; -} - -.nav-item a { - flex-grow: 1; - flex-shrink: 0; -} - -.nav-item img { - max-height: 24px; -} - -.nav-item .button + .button { - margin-left: 10px; -} - -.nav-item .tag:first-child { - margin-right: 5px; -} - -.nav-item .tag:last-child { - margin-left: 5px; -} - -@media screen and (max-width: 768px) { - .nav-item { - justify-content: flex-start; - } -} - -.nav-item a, -a.nav-item { - color: #7a7a7a; -} - -.nav-item a:hover, -a.nav-item:hover { - color: #242424; -} - -.nav-item a.is-active, -a.nav-item.is-active { - color: #242424; -} - -.nav-item a.is-tab, -a.nav-item.is-tab { - border-bottom: 1px solid transparent; - border-top: 1px solid transparent; - padding-left: 12px; - padding-right: 12px; -} - -.nav-item a.is-tab:hover, -a.nav-item.is-tab:hover { - border-bottom: 1px solid #11e4c4; - border-top: 1px solid transparent; -} - -.nav-item a.is-tab.is-active, -a.nav-item.is-tab.is-active { - border-bottom: 3px solid #11e4c4; - border-top: 3px solid transparent; - color: #11e4c4; -} - -@media screen and (max-width: 768px) { - .nav-menu { - background-color: white; - box-shadow: 0 4px 7px rgba(18, 18, 18, 0.1); - left: 0; - display: none; - right: 0; - top: 100%; - position: absolute; - } - .nav-menu .nav-item { - border-top: 1px solid rgba(219, 219, 219, 0.5); - padding: 10px; - } - .nav-menu.is-active { - display: block; - } -} - -@media screen and (min-width: 769px) and (max-width: 979px) { - .nav-menu { - padding-right: 20px; - } -} - -.nav-left { - align-items: stretch; - display: flex; - flex-basis: 0; - flex-grow: 1; - flex-shrink: 0; - justify-content: flex-start; - overflow: hidden; - overflow-x: auto; - white-space: nowrap; -} - -.nav-center { - align-items: stretch; - display: flex; - justify-content: center; - margin-left: auto; - margin-right: auto; -} - -@media screen and (min-width: 769px) { - .nav-right { - align-items: stretch; - display: flex; - flex-basis: 0; - flex-grow: 1; - flex-shrink: 0; - justify-content: flex-end; - } -} - -.nav { - align-items: stretch; - background-color: white; - display: flex; - min-height: 50px; - position: relative; - text-align: center; - z-index: 2; -} - -.nav > .container { - align-items: stretch; - display: flex; - min-height: 50px; - width: 100%; -} - -.nav > .container > .nav-left > .nav-item:first-child:not(.is-tab) { - padding-left: 0; +.message.is-black { + background-color: whitesmoke; } -.nav > .container > .nav-right > .nav-item:last-child:not(.is-tab) { - padding-right: 0; +.message.is-black .message-header { + background-color: #121212; + color: white; } -.container > .nav > .nav-left > .nav-item:first-child:not(.is-tab) { - padding-left: 0; +.message.is-black .message-body { + border-color: #121212; + color: gray; } -.container > .nav > .nav-right > .nav-item:last-child:not(.is-tab) { - padding-right: 0; +.message.is-light { + background-color: whitesmoke; } -.nav.has-shadow { - box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1); +.message.is-light .message-header { + background-color: whitesmoke; + color: #7a7a7a; } -@media screen and (max-width: 979px) { - .nav > .container > .nav-left > .nav-item.is-brand:first-child, - .container > .nav > .nav-left > .nav-item.is-brand:first-child { - padding-left: 20px; - } +.message.is-light .message-body { + border-color: whitesmoke; + color: #666666; } -.pagination { - align-items: center; - display: flex; - justify-content: center; - text-align: center; +.message.is-dark { + background-color: whitesmoke; } -.pagination a { - display: block; - min-width: 32px; - padding: 3px 8px; +.message.is-dark .message-header { + background-color: #7a7a7a; + color: whitesmoke; } -.pagination span { - color: #b5b5b5; - display: block; - margin: 0 4px; +.message.is-dark .message-body { + border-color: #7a7a7a; + color: gray; } -.pagination li { - margin: 0 2px; +.message.is-primary { + background-color: #ecfefb; } -.pagination ul { - align-items: center; - display: flex; - flex-grow: 1; - flex-shrink: 0; - justify-content: center; +.message.is-primary .message-header { + background-color: #11e4c4; + color: white; } -@media screen and (max-width: 768px) { - .pagination { - flex-wrap: wrap; - } - .pagination > a { - width: calc(50% - 5px); - } - .pagination > a:not(:first-child) { - margin-left: 10px; - } - .pagination li { - flex-grow: 1; - flex-shrink: 0; - } - .pagination ul { - margin-top: 10px; - } +.message.is-primary .message-body { + border-color: #11e4c4; + color: gray; } -@media screen and (min-width: 769px) { - .pagination > a:not(:first-child) { - order: 1; - } +.message.is-info { + background-color: #ebf2ff; } -.panel-icon { - display: inline-block; - font-size: 14px; - height: 16px; - line-height: 16px; - text-align: center; - vertical-align: top; - width: 16px; - color: #b5b5b5; - float: left; - margin: 0 4px 0 -2px; +.message.is-info .message-header { + background-color: #0f6bff; + color: white; } -.panel-icon .fa { - font-size: inherit; - line-height: inherit; +.message.is-info .message-body { + border-color: #0f6bff; + color: gray; } -.panel-heading { - background-color: whitesmoke; - border-bottom: 1px solid #dbdbdb; - border-radius: 4px 4px 0 0; - color: #242424; - font-size: 18px; - font-weight: 300; - padding: 10px; +.message.is-success { + background-color: #ecfef2; } -.panel-list a { - color: #7a7a7a; +.message.is-success .message-header { + background-color: #20ee68; + color: white; } -.panel-list a:hover { - color: #11e4c4; +.message.is-success .message-body { + border-color: #20ee68; + color: gray; } -.panel-tabs { - display: flex; - font-size: 11px; - padding: 5px 10px 0; - justify-content: center; +.message.is-warning { + background-color: #fffbeb; } -.panel-tabs a { - border-bottom: 1px solid #dbdbdb; - margin-bottom: -1px; - padding: 5px; +.message.is-warning .message-header { + background-color: #ffcf0f; + color: rgba(0, 0, 0, 0.7); } -.panel-tabs a.is-active { - border-bottom-color: #242424; - color: #242424; +.message.is-warning .message-body { + border-color: #ffcf0f; + color: gray; } -.panel-tabs:not(:last-child) { - border-bottom: 1px solid #dbdbdb; +.message.is-danger { + background-color: #ffebef; } -.panel-block { - color: #242424; - display: block; - line-height: 16px; - padding: 10px; +.message.is-danger .message-header { + background-color: #ff0f3f; + color: white; } -.panel-block:not(:last-child) { - border-bottom: 1px solid #dbdbdb; +.message.is-danger .message-body { + border-color: #ff0f3f; + color: gray; } -a.panel-block:hover { - background-color: whitesmoke; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } -.panel { - border: 1px solid #dbdbdb; - border-radius: 5px; +.modal-background { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + background-color: rgba(18, 18, 18, 0.86); } -.panel:not(:last-child) { - margin-bottom: 20px; +.modal-content, +.modal-card { + margin: 0 20px; + max-height: calc(100vh - 160px); + overflow: auto; + position: relative; + width: 100%; } -.box:not(:last-child), .highlight:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) { - margin-bottom: 20px; +@media screen and (min-width: 769px) { + .modal-content, + .modal-card { + margin: 0 auto; + max-height: calc(100vh - 40px); + width: 640px; + } } .modal-close { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; -moz-appearance: none; -webkit-appearance: none; background-color: rgba(18, 18, 18, 0.2); @@ -6393,6 +4511,12 @@ a.panel-block:hover { position: relative; vertical-align: top; width: 24px; + background: none; + height: 40px; + position: fixed; + right: 20px; + top: 20px; + width: 40px; } .modal-close:before, .modal-close:after { @@ -6408,31 +4532,108 @@ a.panel-block:hover { width: 50%; } -.modal-close:before { - transform: rotate(45deg); +.modal-close:before { + transform: rotate(45deg); +} + +.modal-close:after { + transform: rotate(-45deg); +} + +.modal-close:hover { + background-color: rgba(18, 18, 18, 0.5); +} + +.modal-close.is-small { + height: 16px; + width: 16px; +} + +.modal-close.is-medium { + height: 32px; + width: 32px; +} + +.modal-close.is-large { + height: 40px; + width: 40px; +} + +.modal-card { + display: flex; + flex-direction: column; + max-height: calc(100vh - 40px); + overflow: hidden; +} + +.modal-card-head, +.modal-card-foot { + align-items: center; + background-color: whitesmoke; + display: flex; + flex-shrink: 0; + justify-content: flex-start; + padding: 20px; + position: relative; +} + +.modal-card-head { + border-bottom: 1px solid #dbdbdb; + border-top-left-radius: 5px; + border-top-right-radius: 5px; } -.modal-close:after { - transform: rotate(-45deg); +.modal-card-title { + color: #242424; + flex-grow: 1; + flex-shrink: 0; + font-size: 24px; + line-height: 1; } -.modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); +.modal-card-foot { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-top: 1px solid #dbdbdb; } -.is-small.modal-close { - height: 16px; - width: 16px; +.modal-card-foot .button:not(:last-child) { + margin-right: 10px; } -.is-medium.modal-close { - height: 32px; - width: 32px; +.modal-card-body { + background-color: white; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: 20px; } -.is-large.modal-close { - height: 40px; - width: 40px; +.modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + align-items: center; + display: none; + justify-content: center; + overflow: hidden; + position: fixed; + z-index: 1986; +} + +.modal.is-active { + display: flex; +} + +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } .nav-toggle { @@ -6472,242 +4673,373 @@ a.panel-block:hover { background-color: whitesmoke; } -.is-active.nav-toggle span { +.nav-toggle.is-active span { background-color: #11e4c4; } -.is-active.nav-toggle span:nth-child(1) { +.nav-toggle.is-active span:nth-child(1) { margin-left: -5px; transform: rotate(45deg); transform-origin: left top; } -.is-active.nav-toggle span:nth-child(2) { +.nav-toggle.is-active span:nth-child(2) { opacity: 0; } -.is-active.nav-toggle span:nth-child(3) { +.nav-toggle.is-active span:nth-child(3) { margin-left: -5px; transform: rotate(-45deg); transform-origin: left bottom; } -.button.is-loading:after, .control.is-loading:after { - animation: spin-around 500ms infinite linear; - border: 2px solid #dbdbdb; - border-radius: 290486px; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 16px; - position: relative; - width: 16px; +@media screen and (min-width: 769px) { + .nav-toggle { + display: none; + } } -.is-unselectable, .modal-close, .button, .tabs { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.nav-item { + align-items: center; + display: flex; + justify-content: center; + padding: 10px; } -.container { - position: relative; +.nav-item a { + flex-grow: 1; + flex-shrink: 0; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; +.nav-item img { + max-height: 24px; +} + +.nav-item .button + .button { + margin-left: 10px; +} + +.nav-item .tag:first-child { + margin-right: 5px; +} + +.nav-item .tag:last-child { + margin-left: 5px; +} + +@media screen and (max-width: 768px) { + .nav-item { + justify-content: flex-start; } - .container.is-fluid { - margin: 0 20px; - max-width: none; +} + +.nav-item a, +a.nav-item { + color: #7a7a7a; +} + +.nav-item a:hover, +a.nav-item:hover { + color: #242424; +} + +.nav-item a.is-active, +a.nav-item.is-active { + color: #242424; +} + +.nav-item a.is-tab, +a.nav-item.is-tab { + border-bottom: 1px solid transparent; + border-top: 1px solid transparent; + padding-left: 12px; + padding-right: 12px; +} + +.nav-item a.is-tab:hover, +a.nav-item.is-tab:hover { + border-bottom: 1px solid #11e4c4; + border-top: 1px solid transparent; +} + +.nav-item a.is-tab.is-active, +a.nav-item.is-tab.is-active { + border-bottom: 3px solid #11e4c4; + border-top: 3px solid transparent; + color: #11e4c4; +} + +@media screen and (max-width: 768px) { + .nav-menu { + background-color: white; + box-shadow: 0 4px 7px rgba(18, 18, 18, 0.1); + left: 0; + display: none; + right: 0; + top: 100%; + position: absolute; + } + .nav-menu .nav-item { + border-top: 1px solid rgba(219, 219, 219, 0.5); + padding: 10px; + } + .nav-menu.is-active { + display: block; } } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; +@media screen and (min-width: 769px) and (max-width: 979px) { + .nav-menu { + padding-right: 20px; + } +} + +.nav-left { + align-items: stretch; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; +} + +.nav-center { + align-items: stretch; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; +} + +@media screen and (min-width: 769px) { + .nav-right { + align-items: stretch; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-end; + } +} + +.nav { + align-items: stretch; + background-color: white; + display: flex; + min-height: 50px; + position: relative; + text-align: center; + z-index: 2; +} + +.nav > .container { + align-items: stretch; + display: flex; + min-height: 50px; + width: 100%; +} + +.nav > .container > .nav-left > .nav-item:first-child:not(.is-tab) { + padding-left: 0; +} + +.nav > .container > .nav-right > .nav-item:last-child:not(.is-tab) { + padding-right: 0; +} + +.container > .nav > .nav-left > .nav-item:first-child:not(.is-tab) { + padding-left: 0; +} + +.container > .nav > .nav-right > .nav-item:last-child:not(.is-tab) { + padding-right: 0; +} + +.nav.has-shadow { + box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1); +} + +@media screen and (max-width: 979px) { + .nav > .container > .nav-left > .nav-item.is-brand:first-child, + .container > .nav > .nav-left > .nav-item.is-brand:first-child { + padding-left: 20px; + } +} + +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); } } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; -} - -.icon { - display: inline-block; - font-size: 21px; - height: 24px; - line-height: 24px; +.pagination { + align-items: center; + display: flex; + justify-content: center; text-align: center; - vertical-align: top; - width: 24px; } -.icon .fa { - font-size: inherit; - line-height: inherit; +.pagination a { + display: block; + min-width: 32px; + padding: 3px 8px; } -.icon.is-small { - display: inline-block; - font-size: 14px; - height: 16px; - line-height: 16px; - text-align: center; - vertical-align: top; - width: 16px; +.pagination span { + color: #b5b5b5; + display: block; + margin: 0 4px; } -.icon.is-medium { - display: inline-block; - font-size: 28px; - height: 32px; - line-height: 32px; - text-align: center; - vertical-align: top; - width: 32px; +.pagination li { + margin: 0 2px; } -.icon.is-large { - display: inline-block; - font-size: 42px; - height: 48px; - line-height: 48px; - text-align: center; - vertical-align: top; - width: 48px; +.pagination ul { + align-items: center; + display: flex; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; } -.heading { - display: block; - font-size: 11px; - letter-spacing: 1px; - margin-bottom: 5px; - text-transform: uppercase; +@media screen and (max-width: 768px) { + .pagination { + flex-wrap: wrap; + } + .pagination > a { + width: calc(50% - 5px); + } + .pagination > a:not(:first-child) { + margin-left: 10px; + } + .pagination li { + flex-grow: 1; + flex-shrink: 0; + } + .pagination ul { + margin-top: 10px; + } } -.highlight { - font-size: 12px; - font-weight: normal; - max-width: 100%; - overflow: hidden; - padding: 0; +@media screen and (min-width: 769px) { + .pagination > a:not(:first-child) { + order: 1; + } } -.highlight pre { - overflow: auto; - max-width: 100%; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } -.number { - background-color: whitesmoke; - border-radius: 290486px; +.panel-icon { display: inline-block; - font-size: 18px; - vertical-align: top; -} - -.tag { - align-items: center; - background-color: whitesmoke; - border-radius: 290486px; - color: #7a7a7a; - display: inline-flex; - font-size: 12px; - height: 24px; - justify-content: center; + font-size: 14px; + height: 16px; line-height: 16px; - padding-left: 10px; - padding-right: 10px; + text-align: center; vertical-align: top; - white-space: nowrap; + width: 16px; + color: #b5b5b5; + float: left; + margin: 0 4px 0 -2px; } -.tag .delete { - margin-left: 4px; - margin-right: -6px; +.panel-icon .fa { + font-size: inherit; + line-height: inherit; } -.tag.is-white { - background-color: white; - color: #121212; +.panel-heading { + background-color: whitesmoke; + border-bottom: 1px solid #dbdbdb; + border-radius: 4px 4px 0 0; + color: #242424; + font-size: 18px; + font-weight: 300; + padding: 10px; } -.tag.is-black { - background-color: #121212; - color: white; +.panel-list a { + color: #7a7a7a; } -.tag.is-light { - background-color: whitesmoke; - color: #7a7a7a; +.panel-list a:hover { + color: #11e4c4; } -.tag.is-dark { - background-color: #7a7a7a; - color: whitesmoke; +.panel-tabs { + display: flex; + font-size: 11px; + padding: 5px 10px 0; + justify-content: center; } -.tag.is-primary { - background-color: #11e4c4; - color: white; +.panel-tabs a { + border-bottom: 1px solid #dbdbdb; + margin-bottom: -1px; + padding: 5px; } -.tag.is-info { - background-color: #0f6bff; - color: white; +.panel-tabs a.is-active { + border-bottom-color: #242424; + color: #242424; } -.tag.is-success { - background-color: #20ee68; - color: white; +.panel-tabs:not(:last-child) { + border-bottom: 1px solid #dbdbdb; } -.tag.is-warning { - background-color: #ffcf0f; - color: white; +.panel-block { + color: #242424; + display: block; + line-height: 16px; + padding: 10px; } -.tag.is-danger { - background-color: #ff0f3f; - color: white; +.panel-block:not(:last-child) { + border-bottom: 1px solid #dbdbdb; } -.tag.is-small { - font-size: 11px; - height: 20px; - padding-left: 8px; - padding-right: 8px; +a.panel-block:hover { + background-color: whitesmoke; } -.tag.is-medium { - font-size: 14px; - height: 32px; - padding-left: 14px; - padding-right: 14px; +.panel { + border: 1px solid #dbdbdb; + border-radius: 5px; } -.tag.is-large { - font-size: 18px; - height: 40px; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; +.panel:not(:last-child) { + margin-bottom: 20px; } -.tag.is-large .delete { - margin-left: 4px; - margin-right: -8px; +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } .tabs { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; align-items: stretch; display: flex; justify-content: space-between; @@ -6717,6 +5049,10 @@ a.panel-block:hover { white-space: nowrap; } +.tabs:not(:last-child) { + margin-bottom: 20px; +} + .tabs a { align-items: center; border-bottom: 1px solid #dbdbdb; @@ -6882,6 +5218,15 @@ a.panel-block:hover { padding-top: 13px; } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + .hero-video { bottom: 0; left: 0; @@ -7600,11 +5945,11 @@ a.panel-block:hover { .hero.is-warning { background-color: #ffcf0f; - color: white; + color: rgba(0, 0, 0, 0.7); } .hero.is-warning .title { - color: white; + color: rgba(0, 0, 0, 0.7); } .hero.is-warning .title a, @@ -7613,16 +5958,16 @@ a.panel-block:hover { } .hero.is-warning .subtitle { - color: rgba(255, 255, 255, 0.9); + color: rgba(0, 0, 0, 0.9); } .hero.is-warning .subtitle a, .hero.is-warning .subtitle strong { - color: white; + color: rgba(0, 0, 0, 0.7); } .hero.is-warning .nav { - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } @media screen and (max-width: 768px) { @@ -7633,17 +5978,17 @@ a.panel-block:hover { .hero.is-warning a.nav-item, .hero.is-warning .nav-item a:not(.button) { - color: rgba(255, 255, 255, 0.7); + color: rgba(0, 0, 0, 0.7); } .hero.is-warning a.nav-item:hover, .hero.is-warning a.nav-item.is-active, .hero.is-warning .nav-item a:not(.button):hover, .hero.is-warning .nav-item a:not(.button).is-active { - color: white; + color: rgba(0, 0, 0, 0.7); } .hero.is-warning .tabs a { - color: white; + color: rgba(0, 0, 0, 0.7); opacity: 0.9; } @@ -7656,7 +6001,7 @@ a.panel-block:hover { } .hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { - color: white; + color: rgba(0, 0, 0, 0.7); } .hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover { @@ -7664,8 +6009,8 @@ a.panel-block:hover { } .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { - background-color: white; - border-color: white; + background-color: rgba(0, 0, 0, 0.7); + border-color: rgba(0, 0, 0, 0.7); color: #ffcf0f; } @@ -7675,16 +6020,16 @@ a.panel-block:hover { @media screen and (max-width: 768px) { .hero.is-warning .nav-toggle span { - background-color: white; + background-color: rgba(0, 0, 0, 0.7); } .hero.is-warning .nav-toggle:hover { background-color: rgba(18, 18, 18, 0.1); } .hero.is-warning .nav-toggle.is-active span { - background-color: white; + background-color: rgba(0, 0, 0, 0.7); } .hero.is-warning .nav-menu .nav-item { - border-top-color: rgba(255, 255, 255, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); } } @@ -7806,6 +6151,15 @@ a.panel-block:hover { flex-shrink: 0; } +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + .section { background-color: white; padding: 40px 20px; @@ -7840,3 +6194,378 @@ a.panel-block:hover { .footer a:not(.icon):hover, .footer a:visited:not(.icon):hover { border-bottom-color: #11e4c4; } + +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + +@media screen and (min-width: 769px) { + .button small { + color: #7a7a7a; + left: 0; + margin-top: 10px; + position: absolute; + top: 100%; + width: 100%; + } +} + +body.page-grid .column > .notification { + padding-left: 0; + padding-right: 0; + text-align: center; +} + +@media screen and (min-width: 769px) { + .header-item .button + .button { + margin-left: 10px; + } +} + +#carbon { + max-width: 340px; + min-height: 130px; + min-width: 300px; + padding: 15px; +} + +@media screen and (min-width: 769px) { + #carbon { + margin-left: auto; + margin-right: auto; + width: 340px; + } +} + +#carbonads { + text-align: left; +} + +#carbonads a:hover { + text-decoration: underline; +} + +#carbonads span { + display: block; +} + +#carbonads .carbon-img { + float: left; + height: 100px; + width: 130px; +} + +#carbonads .carbon-img img { + display: block; +} + +#carbonads .carbon-text { + display: block; + color: #242424; + margin-left: 145px; +} + +#carbonads .carbon-poweredby { + font-size: 11px; + margin-left: 15px; +} + +#github { + color: #333333; + border-color: #333333; +} + +#github:hover { + background: #333333; + border-color: #333333; + color: white; +} + +#twitter { + color: #55acee; + border-color: #55acee; +} + +#twitter:hover { + background: #55acee; + border-color: #55acee; + color: white; +} + +#b { + border-radius: 20px; + box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2); + display: inline-block; + height: 240px; + margin-bottom: 40px; + vertical-align: top; + width: 240px; +} + +#b svg { + display: block; + height: 240px; + width: 240px; +} + +@media screen and (max-width: 768px) { + #b { + border-radius: 10px; + height: 120px; + width: 120px; + } +} + +#npm { + background: none; + margin: -10px 0 20px; +} + +#npm code { + border-radius: 3px; + color: #11e4c4; + display: inline-block; + font-size: 16px; + padding: 16px 32px; +} + +#grid .notification { + padding-left: 0; + padding-right: 0; +} + +#message { + display: none; +} + +#tweet { + background: white; + border-radius: 5px; + box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1), 0 0 0 1px rgba(18, 18, 18, 0.1); + padding: 20px; +} + +#mc_embed_signup .control { + margin-bottom: 0; +} + +#mc_embed_signup .notification { + margin-top: 10px; +} + +#social { + align-items: center; + display: flex; + height: 20px; + margin-bottom: 1em; + justify-content: center; +} + +#social a { + display: inline-block; + font-size: 11px; + height: 20px; + line-height: 20px; +} + +#social iframe:last-child { + margin-left: 10px; +} + +#images tr td:nth-child(2) { + width: 320px; +} + +.color { + display: inline-block; + float: left; + height: 18px; + margin-right: 5px; + width: 18px; +} + +.example, +.structure { + border: 1px solid #ffcf0f; + border-top-right-radius: 3px; + color: rgba(0, 0, 0, 0.7); + padding: 15px 20px; + position: relative; +} + +.example:not(:first-child), +.structure:not(:first-child) { + margin-top: 30px; +} + +.example:not(:last-child), +.structure:not(:last-child) { + margin-bottom: 20px; +} + +.example:before, +.structure:before { + background: #ffcf0f; + border-radius: 3px 3px 0 0; + bottom: 100%; + content: "Example"; + display: inline-block; + font-size: 7px; + font-weight: bold; + left: -1px; + letter-spacing: 1px; + padding: 3px 5px; + position: absolute; + text-transform: uppercase; + vertical-align: top; +} + +@media screen and (min-width: 769px) { + .example.is-fullwidth, + .structure.is-fullwidth { + border-left: none; + border-right: none; + padding: 0; + } +} + +.example + .highlight { + border: 1px solid #ffcf0f; + border-radius: 0 0 3px 3px; + border-top: none; + margin-top: -20px; +} + +.example + .highlight pre { + max-height: 600px; +} + +.example + .highlight:not(:last-child) { + margin-bottom: 40px; +} + +.structure { + border-color: #ff0f3f; + border-radius: 3px; + padding: 20px; +} + +.structure:before { + background: #ff0f3f; + color: white; + content: "Structure"; +} + +.structure-item { + position: relative; +} + +.structure-item:before { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + background: rgba(18, 18, 18, 0.7); + background: whitesmoke; + border: 1px solid #dbdbdb; + content: ""; + display: block; + z-index: 1; +} + +.structure-item:after { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + align-items: center; + content: attr(title); + display: flex; + font-family: "Inconsolata", "Consolas", "Monaco", monospace; + font-size: 11px; + justify-content: center; + padding: 3px 5px; + z-index: 2; +} + +.structure-item.is-structure-container { + padding: 20px 10px 10px; +} + +.structure-item.is-structure-container:after { + align-items: flex-start; + justify-content: flex-start; + padding: 5px 10px; +} + +.highlight { + position: relative; +} + +.highlight .copy, +.highlight .expand { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: white; + border: solid #dbdbdb; + border-width: 0 0 1px 1px; + color: #b5b5b5; + outline: none; + position: absolute; + right: 0; + top: 0; +} + +.highlight .copy:hover, +.highlight .expand:hover { + border-color: #ff0f3f; + color: #ff0f3f; +} + +.highlight .expand { + border-right-width: 1px; + right: 50px; +} + +@media screen and (min-width: 769px) { + .section:not(.is-fullwidth) > .example:not(.is-fullwidth) { + margin-left: 20px; + margin-right: 20px; + } + .section:not(.is-fullwidth) > .example:not(.is-fullwidth) + .highlight { + margin-left: 20px; + margin-right: 20px; + } +} + +.section.is-fullwidth { + padding: 0 !important; +} + +.section.is-fullwidth .example { + border-left: none; + border-radius: 0; + border-right: none; + padding: 0; +} + +.section.is-fullwidth .example + .highlight { + border-left: none; + border-radius: 0; + border-right: none; +} + +#newsletter .input { + border-color: white; + box-shadow: none; +} diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index cf0c53307..8335fc53b 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -102,6 +102,7 @@ doc-subtab: tag
{% highlight html %} +Small Medium Large {% endhighlight %} @@ -116,19 +117,19 @@ doc-subtab: tag

Foo - +

Bar - +

Hello - +

@@ -140,16 +141,20 @@ doc-subtab: tag

{% highlight html %} - + Foo - + - + Bar - + + + + Hello + - Foo bar + World {% endhighlight %} diff --git a/docs/index.html b/docs/index.html index 2f5a81c7f..a925260b5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -220,14 +220,12 @@ route: index
+

Tall tile

+

With even more content

-

Tall tile

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

+

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

@@ -568,9 +566,9 @@ route: index

- Tag - Two - Three + Tag + Two + Three

diff --git a/sass/base/base.sass b/sass/base/base.sass index 40bf3e348..b59b2fa10 100644 --- a/sass/base/base.sass +++ b/sass/base/base.sass @@ -1,4 +1,5 @@ @charset "utf-8" +@import "minireset" @import "generic" @import "helpers" diff --git a/sass/base/generic.sass b/sass/base/generic.sass index b365e0446..635601352 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -58,7 +58,10 @@ code padding: 1px 2px 2px hr - border-top-color: $border + background-color: $border + border: none + display: block + height: 1px margin: 40px 0 img diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass index 57be4a99e..7c029f2fc 100644 --- a/sass/base/helpers.sass +++ b/sass/base/helpers.sass @@ -1,4 +1,3 @@ -@import "./placeholders.sass" @import "../utilities/mixins.sass" // Display @@ -107,4 +106,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' padding: 0 !important .is-unselectable - @extend %unselectable + +unselectable diff --git a/sass/base/minireset.sass b/sass/base/minireset.sass new file mode 100644 index 000000000..fb4f8e071 --- /dev/null +++ b/sass/base/minireset.sass @@ -0,0 +1,81 @@ +/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */ +// Blocks +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 + margin: 0 + padding: 0 + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 + font-size: 100% + font-weight: normal + +// List +ul + list-style: none + +// Form +button, +input, +select, +textarea + margin: 0 + +// Box sizing +html + box-sizing: border-box + +* + box-sizing: inherit + &:before, + &:after + box-sizing: inherit + +// Media +img, +embed, +object, +audio, +video + height: auto + max-width: 100% + +// Iframe +iframe + border: 0 + +// Table +table + border-collapse: collapse + border-spacing: 0 + +td, +th + padding: 0 + text-align: left diff --git a/sass/base/placeholders.sass b/sass/base/placeholders.sass deleted file mode 100644 index 0b70241a7..000000000 --- a/sass/base/placeholders.sass +++ /dev/null @@ -1,107 +0,0 @@ -@import "../utilities/animations.sass" -@import "../utilities/variables.sass" - -%block - &:not(:last-child) - margin-bottom: 20px - -%delete - @extend %unselectable - -moz-appearance: none - -webkit-appearance: none - background-color: rgba($black, 0.2) - border: none - border-radius: 290486px - cursor: pointer - display: inline-block - height: 24px - position: relative - vertical-align: top - width: 24px - &:before, - &:after - background-color: $white - content: "" - display: block - height: 2px - left: 50% - margin-left: -25% - margin-top: -1px - position: absolute - top: 50% - width: 50% - &:before - transform: rotate(45deg) - &:after - transform: rotate(-45deg) - &:hover - background-color: rgba($black, 0.5) - // Sizes - &.is-small - height: 16px - width: 16px - &.is-medium - height: 32px - width: 32px - &.is-large - height: 40px - width: 40px - -%hamburger - cursor: pointer - display: block - height: $nav-height - position: relative - width: $nav-height - span - background-color: $text - display: block - height: 1px - left: 50% - margin-left: -7px - position: absolute - top: 50% - transition: none $speed $easing - transition-property: background, left, opacity, transform - width: 15px - &:nth-child(1) - margin-top: -6px - &:nth-child(2) - margin-top: -1px - &:nth-child(3) - margin-top: 4px - &:hover - background-color: $background - // Modifers - &.is-active - span - background-color: $link - &:nth-child(1) - margin-left: -5px - transform: rotate(45deg) - transform-origin: left top - &:nth-child(2) - opacity: 0 - &:nth-child(3) - margin-left: -5px - transform: rotate(-45deg) - transform-origin: left bottom - -%loader - animation: spin-around 500ms infinite linear - border: 2px solid $border - border-radius: 290486px - border-right-color: transparent - border-top-color: transparent - content: "" - display: block - height: 16px - position: relative - width: 16px - -%unselectable - -webkit-touch-callout: none - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none diff --git a/sass/components/level.sass b/sass/components/level.sass index b2b3cd236..47282617a 100644 --- a/sass/components/level.sass +++ b/sass/components/level.sass @@ -1,4 +1,3 @@ -@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" @@ -37,7 +36,7 @@ justify-content: flex-end .level - @extend %block + +block align-items: center justify-content: space-between code diff --git a/sass/components/message.sass b/sass/components/message.sass index fb7eda512..2f69997d7 100644 --- a/sass/components/message.sass +++ b/sass/components/message.sass @@ -1,4 +1,3 @@ -@import "../base/placeholders.sass" @import "../utilities/functions.sass" @import "../utilities/variables.sass" @@ -21,7 +20,7 @@ border-top: none .message - @extend %block + +block background-color: $background border-radius: $radius // Colors diff --git a/sass/components/modal.sass b/sass/components/modal.sass index c0c6ba83a..88fe26cb0 100644 --- a/sass/components/modal.sass +++ b/sass/components/modal.sass @@ -1,4 +1,3 @@ -@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" @@ -20,7 +19,7 @@ width: 640px .modal-close - @extend %delete + +delete background: none height: 40px position: fixed diff --git a/sass/components/nav.sass b/sass/components/nav.sass index 09366f8a2..932f85915 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -1,11 +1,10 @@ -@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" // Components .nav-toggle - @extend %hamburger + +hamburger // Responsiveness +tablet display: none diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index 4115b5a32..5e72f0e13 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -1,9 +1,9 @@ -@import "../base/placeholders.sass" +@import "../utilities/mixins.sass" @import "../utilities/variables.sass" .tabs - @extend %block - @extend %unselectable + +block + +unselectable align-items: stretch display: flex justify-content: space-between diff --git a/sass/elements/box.sass b/sass/elements/box.sass index da9c40d16..3bc0f97fb 100644 --- a/sass/elements/box.sass +++ b/sass/elements/box.sass @@ -1,8 +1,7 @@ -@import "../base/placeholders.sass" @import "../utilities/variables.sass" .box - @extend %block + +block background-color: $white border-radius: $radius-large box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 5acf4dac7..5bded0d25 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -1,4 +1,3 @@ -@import "../base/placeholders.sass" @import "../utilities/controls.sass" @import "../utilities/variables.sass" @@ -22,7 +21,8 @@ .button +control - @extend %unselectable + +unselectable + cursor: pointer justify-content: center padding-left: 10px padding-right: 10px @@ -109,6 +109,6 @@ color: transparent !important pointer-events: none &:after - @extend %loader + +loader +center(16px) position: absolute !important diff --git a/sass/elements/content.sass b/sass/elements/content.sass index aa2c78be2..e49621209 100644 --- a/sass/elements/content.sass +++ b/sass/elements/content.sass @@ -1,8 +1,7 @@ -@import "../base/placeholders.sass" @import "../utilities/variables.sass" .content - @extend %block + +block color: $text // Inline a:not(.button) diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 802d9f007..b0c3d7b08 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -1,4 +1,3 @@ -@import "../base/placeholders.sass" @import "../utilities/controls.sass" @import "../utilities/mixins.sass" @@ -42,7 +41,8 @@ padding: 10px resize: vertical -%control-with-element +.checkbox, +.radio cursor: pointer display: inline-block line-height: 16px @@ -58,11 +58,7 @@ input pointer-events: none -.checkbox - @extend %control-with-element - .radio - @extend %control-with-element & + .radio margin-left: 10px @@ -257,7 +253,7 @@ flex-shrink: 1 &.is-loading &:after - @extend %loader + +loader position: absolute !important right: 8px top: 8px diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass index bb4d8cfde..ef1816ba9 100644 --- a/sass/elements/notification.sass +++ b/sass/elements/notification.sass @@ -1,9 +1,8 @@ -@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" .notification - @extend %block + +block +clearfix background-color: $background border-radius: $radius @@ -13,8 +12,9 @@ border-radius: 0 $radius float: right margin: -16px -20px 0 20px + .title, .subtitle, - .title + .content color: inherit // Colors @each $name, $pair in $colors diff --git a/sass/elements/other.sass b/sass/elements/other.sass index 37a0712e2..d5f769f48 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -1,7 +1,9 @@ -@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" +.block + +block + .container position: relative +desktop @@ -14,11 +16,17 @@ +widescreen max-width: 1200px +.delete + +delete + .fa font-size: 21px text-align: center vertical-align: top +.hamburger + +hamburger + .icon +fa(21px, 24px) .fa @@ -40,7 +48,7 @@ text-transform: uppercase .highlight - @extend %block + +block font-size: 12px font-weight: normal max-width: 100% @@ -50,6 +58,9 @@ overflow: auto max-width: 100% +.loader + +loader + .number background-color: $background border-radius: 290486px diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass index abe79c04b..ecba68ac2 100644 --- a/sass/elements/progress.sass +++ b/sass/elements/progress.sass @@ -1,8 +1,7 @@ -@import "../base/placeholders.sass" @import "../utilities/variables.sass" .progress - @extend %block + +block -moz-appearance: none -webkit-appearance: none border: none diff --git a/sass/elements/title.sass b/sass/elements/title.sass index 880845b6f..b9878008c 100644 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -1,10 +1,9 @@ -@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" .title, .subtitle - @extend %block + +block font-weight: $weight-title-normal word-break: break-word em, diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass index 49a47b6b4..ab246c251 100644 --- a/sass/utilities/functions.sass +++ b/sass/utilities/functions.sass @@ -22,7 +22,7 @@ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) @function findColorInvert($color) - @if (colorLuminance($color) > 0.7) - @return rgba($black, 0.7) + @if (colorLuminance($color) > 0.67) + @return rgba(black, 0.7) @else @return white diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index b0f0ed86a..53a21d756 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -1,3 +1,6 @@ +@import "./animations.sass" +@import "./variables.sass" + =arrow($color) border: 1px solid $color border-right: 0 @@ -10,6 +13,10 @@ transform: rotate(-45deg) width: 7px +=block + &:not(:last-child) + margin-bottom: 20px + =clearfix &:after clear: both @@ -23,6 +30,48 @@ position: absolute top: 50% +=delete + +unselectable + -moz-appearance: none + -webkit-appearance: none + background-color: rgba($black, 0.2) + border: none + border-radius: 290486px + cursor: pointer + display: inline-block + height: 24px + position: relative + vertical-align: top + width: 24px + &:before, + &:after + background-color: $white + content: "" + display: block + height: 2px + left: 50% + margin-left: -25% + margin-top: -1px + position: absolute + top: 50% + width: 50% + &:before + transform: rotate(45deg) + &:after + transform: rotate(-45deg) + &:hover + background-color: rgba($black, 0.5) + // Sizes + &.is-small + height: 16px + width: 16px + &.is-medium + height: 32px + width: 32px + &.is-large + height: 40px + width: 40px + =fa($size, $dimensions) display: inline-block font-size: $size @@ -32,6 +81,58 @@ vertical-align: top width: $dimensions +=hamburger + cursor: pointer + display: block + height: $nav-height + position: relative + width: $nav-height + span + background-color: $text + display: block + height: 1px + left: 50% + margin-left: -7px + position: absolute + top: 50% + transition: none $speed $easing + transition-property: background, left, opacity, transform + width: 15px + &:nth-child(1) + margin-top: -6px + &:nth-child(2) + margin-top: -1px + &:nth-child(3) + margin-top: 4px + &:hover + background-color: $background + // Modifers + &.is-active + span + background-color: $link + &:nth-child(1) + margin-left: -5px + transform: rotate(45deg) + transform-origin: left top + &:nth-child(2) + opacity: 0 + &:nth-child(3) + margin-left: -5px + transform: rotate(-45deg) + transform-origin: left bottom + +=loader + animation: spin-around 500ms infinite linear + border: 2px solid $border + border-radius: 290486px + border-right-color: transparent + border-top-color: transparent + content: "" + display: block + height: 16px + position: relative + width: 16px + =overlay($offset: 0) bottom: $offset left: $offset @@ -57,6 +158,13 @@ text-indent: -290486px width: $width +=unselectable + -webkit-touch-callout: none + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + // Responsiveness $tablet: 769px !default diff --git a/sass/utilities/reset.sass b/sass/utilities/reset.sass deleted file mode 100644 index 26bf2864f..000000000 --- a/sass/utilities/reset.sass +++ /dev/null @@ -1,174 +0,0 @@ -// -// HTML5 Reset :: style.css -// ---------------------------------------------------------- -// We have learned much from/been inspired by/taken code where offered from: -// -// Eric Meyer :: http://meyerweb.com -// HTML5 Doctor :: http://html5doctor.com -// and the HTML5 Boilerplate :: http://html5boilerplate.com -// -//------------------------------------------------------------------------------- - -// Let's default this puppy out - -html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary - margin: 0 - padding: 0 - border: 0 - font-size: 100% - font-weight: normal - vertical-align: baseline - background: transparent - -article, aside, figure, footer, header, nav, section, details, summary - display: block - -// Handle box-sizing while better addressing child elements: -// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ -html - box-sizing: border-box - -*, -*:before, -*:after - box-sizing: inherit - -// consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 - -// Responsive images and other embedded objects -img, -object, -embed - max-width: 100% - -// -// Note: keeping IMG here will cause problems if you're using foreground images as sprites. -// In fact, it *will* cause problems with Google Maps' controls at small size. -// If this is the case for you, try uncommenting the following: -// -//#map img { -// max-width: none; -//} - -// force a vertical scrollbar to prevent a jumpy page -html - overflow-y: scroll - -// we use a lot of ULs that aren't bulleted. -// don't forget to restore the bullets within content. -ul - list-style: none - -blockquote, q - quotes: none - -blockquote:before, -blockquote:after, -q:before, -q:after - content: '' - content: none - -a - margin: 0 - padding: 0 - font-size: 100% - vertical-align: baseline - background: transparent - -del - text-decoration: line-through - -abbr[title], dfn[title] - border-bottom: 1px dotted #000 - cursor: help - -// tables still need cellspacing="0" in the markup -table - border-collapse: collapse - border-spacing: 0 - -th - font-weight: bold - vertical-align: bottom - -td - font-weight: normal - vertical-align: top - -hr - display: block - height: 1px - border: 0 - border-top: 1px solid #ccc - margin: 1em 0 - padding: 0 - -input, select - vertical-align: middle - -pre - white-space: pre - // CSS2 - white-space: pre-wrap - // CSS 2.1 - white-space: pre-line - // CSS 3 (and 2.1 as well, actually) - word-wrap: break-word - // IE - -input[type="radio"] - vertical-align: text-bottom - -input[type="checkbox"] - vertical-align: bottom - -select, input, textarea - font: 99% sans-serif - -table - font-size: inherit - font: 100% - -small - font-size: 85% - -strong - font-weight: bold - -td, td img - vertical-align: top - -// Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 -sub, sup - font-size: 75% - line-height: 0 - position: relative - -sup - top: -0.5em - -sub - bottom: -0.25em - -// standardize any monospaced elements -pre, code, kbd, samp - font-family: monospace, sans-serif - -// hand cursor on clickable elements -label, -input[type=button], -input[type=submit], -input[type=file], -button - cursor: pointer - -// Webkit browsers add a 2px margin outside the chrome of form elements -button, input, select, textarea - margin: 0 - -// make buttons play nice in IE -button, -input[type=button] - width: auto - overflow: visible