diff --git a/docs/_includes/carbon.html b/docs/_includes/carbon.html index e11acc06..04364d76 100644 --- a/docs/_includes/carbon.html +++ b/docs/_includes/carbon.html @@ -1,3 +1,4 @@ -
+ diff --git a/docs/_includes/head.html b/docs/_includes/head.html index 108030af..ef14384e 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -6,7 +6,7 @@ {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - + diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 95d10425..2466c0c8 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,22 +1,10 @@ /*! bulma.io v0.2.3 | MIT License | github.com/jgthms/bulma */ -@-webkit-keyframes spinAround { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} @keyframes spinAround { from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + transform: rotate(0deg); } to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); + transform: rotate(359deg); } } @@ -107,7 +95,7 @@ th { html { background-color: whitesmoke; - font-size: 14px; + font-size: 16px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; @@ -139,21 +127,19 @@ pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: "Inconsolata", "Consolas", "Monaco", monospace; - line-height: 1.25; } body { color: #4a4a4a; font-size: 1rem; font-weight: 400; - line-height: 1.428571428571429; + line-height: 1.5; } a { color: #00d1b2; cursor: pointer; text-decoration: none; - -webkit-transition: none 86ms ease-out; transition: none 86ms ease-out; } @@ -164,9 +150,9 @@ a:hover { code { background-color: whitesmoke; color: #ff3860; - font-size: 12px; + font-size: 0.75em; font-weight: normal; - padding: 1px 2px 2px; + padding: 0.25em 0.5em 0.25em; } hr { @@ -174,7 +160,7 @@ hr { border: none; display: block; height: 1px; - margin: 20px 0; + margin: 1.5rem 0; } img { @@ -187,7 +173,7 @@ input[type="radio"] { } small { - font-size: 11px; + font-size: 0.875rem; } span { @@ -203,6 +189,7 @@ strong { pre { background-color: whitesmoke; color: #4a4a4a; + font-size: 0.8em; white-space: pre; word-wrap: normal; } @@ -211,8 +198,9 @@ pre code { background-color: whitesmoke; color: #4a4a4a; display: block; + font-size: 1em; overflow-x: auto; - padding: 16px 20px; + padding: 1.25rem 1.5rem; } table { @@ -276,63 +264,47 @@ table th { } .is-flex { - display: -webkit-box; - display: -ms-flexbox; display: flex; } @media screen and (max-width: 768px) { .is-flex-mobile { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 769px) { .is-flex-tablet { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 769px) and (max-width: 979px) { .is-flex-tablet-only { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (max-width: 979px) { .is-flex-touch { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 980px) { .is-flex-desktop { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 980px) and (max-width: 1179px) { .is-flex-desktop-only { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 1180px) { .is-flex-widescreen { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @@ -430,63 +402,47 @@ table th { } .is-inline-flex { - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; } @media screen and (max-width: 768px) { .is-inline-flex-mobile { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 769px) { .is-inline-flex-tablet { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 769px) and (max-width: 979px) { .is-inline-flex-tablet-only { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (max-width: 979px) { .is-inline-flex-touch { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 980px) { .is-inline-flex-desktop { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 980px) and (max-width: 1179px) { .is-inline-flex-desktop-only { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 1180px) { .is-inline-flex-widescreen { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @@ -600,11 +556,11 @@ table th { border-radius: 5px; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); display: block; - padding: 20px; + padding: 1.25rem; } .box:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } a.box:hover, a.box:focus { @@ -618,24 +574,19 @@ a.box:active { .button { -moz-appearance: none; -webkit-appearance: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: white; border: 1px solid #dbdbdb; border-radius: 3px; + box-shadow: none; color: #363636; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; - font-size: 14px; - height: 32px; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; + font-size: 16px; + height: 2.5em; + justify-content: flex-start; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; position: relative; vertical-align: top; -webkit-touch-callout: none; @@ -644,11 +595,9 @@ a.box:active { -ms-user-select: none; user-select: none; cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - padding-left: 10px; - padding-right: 10px; + justify-content: center; + padding-left: 1em; + padding-right: 1em; text-align: center; white-space: nowrap; } @@ -689,13 +638,6 @@ a.box:active { color: inherit; } -.button small { - display: block; - font-size: 11px; - line-height: 1; - margin-top: 5px; -} - .button .icon:first-child, .button .tag:first-child { margin-left: -2px; @@ -1072,25 +1014,15 @@ a.box:active { .button.is-small { border-radius: 2px; - font-size: 11px; - height: 24px; - line-height: 16px; - padding-left: 6px; - padding-right: 6px; + font-size: 0.875rem; } .button.is-medium { - font-size: 18px; - height: 40px; - padding-left: 14px; - padding-right: 14px; + font-size: 1.25rem; } .button.is-large { - font-size: 22px; - height: 48px; - padding-left: 20px; - padding-right: 20px; + font-size: 1.5rem; } .button[disabled], .button.is-disabled { @@ -1098,8 +1030,6 @@ a.box:active { } .button.is-fullwidth { - display: -webkit-box; - display: -ms-flexbox; display: flex; width: 100%; } @@ -1110,8 +1040,7 @@ a.box:active { } .button.is-loading:after { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -1134,7 +1063,7 @@ a.box:active { } .content:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .content a:not(.button) { @@ -1169,43 +1098,54 @@ a.box:active { color: #363636; font-weight: 300; line-height: 1.125; - margin-bottom: 20px; } -.content h1:not(:first-child), -.content h2:not(:first-child), +.content h1 { + font-size: 2em; + margin-bottom: 0.5em; +} + +.content h1:not(:first-child) { + margin-top: 1em; +} + +.content h2 { + font-size: 1.75em; + margin-bottom: 0.5714em; +} + +.content h2:not(:first-child) { + margin-top: 1.1428em; +} + +.content h3 { + font-size: 1.5em; + margin-bottom: 0.6666em; +} + .content h3:not(:first-child) { - margin-top: 40px; + margin-top: 1.3333em; +} + +.content h4 { + font-size: 1.25em; + margin-bottom: 0.8em; +} + +.content h5 { + font-size: 1.125em; + margin-bottom: 0.8888em; +} + +.content h6 { + font-size: 1em; + margin-bottom: 1em; } .content blockquote { background-color: whitesmoke; border-left: 5px solid #dbdbdb; - padding: 1.5em; -} - -.content h1 { - font-size: 2em; -} - -.content h2 { - font-size: 1.75em; -} - -.content h3 { - font-size: 1.5em; -} - -.content h4 { - font-size: 1.25em; -} - -.content h5 { - font-size: 1.125em; -} - -.content h6 { - font-size: 1em; + padding: 1.25em 1.5em; } .content ol { @@ -1231,44 +1171,35 @@ a.box:active { list-style-type: square; } -.content.is-medium { - font-size: 18px; +.content.is-small { + font-size: 0.875rem; } -.content.is-medium code { - font-size: 14px; +.content.is-medium { + font-size: 1.25rem; } .content.is-large { - font-size: 24px; -} - -.content.is-large code { - font-size: 18px; + font-size: 1.5rem; } .input, .textarea { -moz-appearance: none; -webkit-appearance: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: white; border: 1px solid #dbdbdb; border-radius: 3px; + box-shadow: none; color: #363636; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; - font-size: 14px; - height: 32px; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; + font-size: 16px; + height: 2.5em; + justify-content: flex-start; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; position: relative; vertical-align: top; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); @@ -1375,29 +1306,17 @@ a.box:active { .input.is-small, .textarea.is-small { border-radius: 2px; - font-size: 11px; - height: 24px; - line-height: 16px; - padding-left: 6px; - padding-right: 6px; + font-size: 0.875rem; } .input.is-medium, .textarea.is-medium { - font-size: 18px; - height: 40px; - line-height: 32px; - padding-left: 10px; - padding-right: 10px; + font-size: 1.25rem; } .input.is-large, .textarea.is-large { - font-size: 24px; - height: 48px; - line-height: 40px; - padding-left: 12px; - padding-right: 12px; + font-size: 1.5rem; } .input.is-fullwidth, @@ -1427,7 +1346,7 @@ a.box:active { .radio { cursor: pointer; display: inline-block; - line-height: 16px; + line-height: 1em; position: relative; vertical-align: top; } @@ -1454,12 +1373,12 @@ a.box:active { } .radio + .radio { - margin-left: 10px; + margin-left: 0.5em; } .select { display: inline-block; - height: 32px; + height: 2.5em; position: relative; vertical-align: top; } @@ -1467,30 +1386,25 @@ a.box:active { .select select { -moz-appearance: none; -webkit-appearance: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: white; border: 1px solid #dbdbdb; border-radius: 3px; + box-shadow: none; color: #363636; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; - font-size: 14px; - height: 32px; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - line-height: 24px; - padding-left: 8px; - padding-right: 8px; + font-size: 16px; + height: 2.5em; + justify-content: flex-start; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; position: relative; vertical-align: top; cursor: pointer; display: block; outline: none; - padding-right: 36px; + padding-right: 2.5em; } .select select:hover { @@ -1586,10 +1500,9 @@ a.box:active { height: 7px; pointer-events: none; position: absolute; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); + transform: rotate(-45deg); width: 7px; - margin-top: -6px; + margin-top: -4px; right: 16px; top: 50%; } @@ -1598,46 +1511,6 @@ a.box:active { border-color: #363636; } -.select.is-small { - height: 24px; -} - -.select.is-small select { - border-radius: 2px; - font-size: 11px; - height: 24px; - line-height: 16px; - padding-left: 6px; - padding-right: 6px; - padding-right: 28px; -} - -.select.is-medium { - height: 40px; -} - -.select.is-medium select { - font-size: 18px; - height: 40px; - line-height: 32px; - padding-left: 10px; - padding-right: 10px; - padding-right: 44px; -} - -.select.is-large { - height: 48px; -} - -.select.is-large select { - font-size: 24px; - height: 48px; - line-height: 40px; - padding-left: 12px; - padding-right: 12px; - padding-right: 52px; -} - .label { color: #363636; display: block; @@ -1645,12 +1518,12 @@ a.box:active { } .label:not(:last-child) { - margin-bottom: 5px; + margin-bottom: 0.5em; } .help { display: block; - font-size: 11px; + font-size: 0.875rem; margin-top: 5px; } @@ -1692,21 +1565,17 @@ a.box:active { @media screen and (max-width: 768px) { .control-label { - margin-bottom: 5px; + margin-bottom: 0.5em; } } @media screen and (min-width: 769px) { .control-label { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-right: 20px; - padding-top: 7px; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + margin-right: 1.5em; + padding-top: 0.5em; text-align: right; } } @@ -1721,12 +1590,8 @@ a.box:active { } .control.has-addons { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; } .control.has-addons .button, @@ -1778,33 +1643,23 @@ a.box:active { .control.has-addons .button.is-expanded, .control.has-addons .input.is-expanded, .control.has-addons .select.is-expanded { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .control.has-addons.has-addons-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .control.has-addons.has-addons-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .control.has-addons.has-addons-fullwidth .button, .control.has-addons.has-addons-fullwidth .input, .control.has-addons.has-addons-fullwidth .select { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .control.has-icon > .fa { @@ -1906,12 +1761,8 @@ a.box:active { } .control.is-grouped { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; } .control.is-grouped > .control:not(:last-child) { @@ -1920,48 +1771,32 @@ a.box:active { } .control.is-grouped > .control.is-expanded { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .control.is-grouped.is-grouped-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .control.is-grouped.is-grouped-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } @media screen and (min-width: 769px) { .control.is-horizontal { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .control.is-horizontal > .control { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 5; - -ms-flex-positive: 5; - flex-grow: 5; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; } } .control.is-loading:after { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -2060,7 +1895,7 @@ a.box:active { } .notification:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .notification:after { @@ -2139,7 +1974,7 @@ a.box:active { } .progress:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .progress::-webkit-progress-bar { @@ -2387,7 +2222,7 @@ a.box:active { .title:not(:last-child), .subtitle:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .title em, @@ -2414,13 +2249,8 @@ a.box:active { .title { color: #363636; - font-size: 28px; - line-height: 1; -} - -.title code { - display: inline-block; - font-size: 28px; + font-size: 1.5rem; + line-height: 1.125; } .title strong { @@ -2428,59 +2258,35 @@ a.box:active { } .title + .highlight { - margin-top: -10px; + margin-top: -0.75rem; } .title + .subtitle { - margin-top: -10px; + margin-top: -1.25rem; } .title.is-1 { - font-size: 48px; -} - -.title.is-1 code { - font-size: 40px; + font-size: 3.5rem; } .title.is-2 { - font-size: 40px; -} - -.title.is-2 code { - font-size: 28px; + font-size: 2.5rem; } .title.is-3 { - font-size: 28px; -} - -.title.is-3 code { - font-size: 24px; + font-size: 1.75rem; } .title.is-4 { - font-size: 24px; -} - -.title.is-4 code { - font-size: 18px; + font-size: 1.5rem; } .title.is-5 { - font-size: 18px; -} - -.title.is-5 code { - font-size: 14px; + font-size: 1.25rem; } .title.is-6 { - font-size: 14px; -} - -.title.is-6 code { - font-size: 14px; + font-size: 16px; } .title.is-normal { @@ -2491,24 +2297,10 @@ a.box:active { font-weight: 700; } -@media screen and (min-width: 769px) { - .title + .subtitle { - margin-top: -15px; - } -} - .subtitle { color: #4a4a4a; - font-size: 18px; - line-height: 1.125; -} - -.subtitle code { - border-radius: 3px; - display: inline-block; - font-size: 14px; - padding: 2px 3px; - vertical-align: top; + font-size: 1.25rem; + line-height: 1.25; } .subtitle strong { @@ -2516,55 +2308,31 @@ a.box:active { } .subtitle + .title { - margin-top: -20px; + margin-top: -1.4rem; } .subtitle.is-1 { - font-size: 48px; -} - -.subtitle.is-1 code { - font-size: 40px; + font-size: 3.5rem; } .subtitle.is-2 { - font-size: 40px; -} - -.subtitle.is-2 code { - font-size: 28px; + font-size: 2.5rem; } .subtitle.is-3 { - font-size: 28px; -} - -.subtitle.is-3 code { - font-size: 24px; + font-size: 1.75rem; } .subtitle.is-4 { - font-size: 24px; -} - -.subtitle.is-4 code { - font-size: 18px; + font-size: 1.5rem; } .subtitle.is-5 { - font-size: 18px; -} - -.subtitle.is-5 code { - font-size: 14px; + font-size: 1.25rem; } .subtitle.is-6 { - font-size: 14px; -} - -.subtitle.is-6 code { - font-size: 14px; + font-size: 16px; } .subtitle.is-normal { @@ -2576,7 +2344,7 @@ a.box:active { } .block:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .container { @@ -2634,13 +2402,11 @@ a.box:active { } .delete:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); + transform: rotate(45deg); } .delete:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); + transform: rotate(-45deg); } .delete:hover { @@ -2722,15 +2488,14 @@ a.box:active { } .highlight { - font-size: 12px; - font-weight: normal; + font-weight: 400; max-width: 100%; overflow: hidden; padding: 0; } .highlight:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .highlight pre { @@ -2739,8 +2504,7 @@ a.box:active { } .loader { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -2756,25 +2520,19 @@ a.box:active { background-color: whitesmoke; border-radius: 290486px; display: inline-block; - font-size: 18px; + font-size: 1.25rem; vertical-align: top; } .tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; color: #4a4a4a; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; font-size: 12px; height: 24px; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; line-height: 16px; padding-left: 10px; padding-right: 10px; @@ -2833,21 +2591,21 @@ a.box:active { } .tag.is-small { - font-size: 11px; + font-size: 0.875rem; height: 20px; padding-left: 8px; padding-right: 8px; } .tag.is-medium { - font-size: 14px; + font-size: 16px; height: 32px; padding-left: 14px; padding-right: 14px; } .tag.is-large { - font-size: 18px; + font-size: 1.25rem; height: 40px; line-height: 24px; padding-left: 18px; @@ -2860,42 +2618,26 @@ a.box:active { } .card-header { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); - display: -webkit-box; - display: -ms-flexbox; display: flex; min-height: 40px; } .card-header-title { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; + align-items: flex-start; color: #363636; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; font-weight: bold; padding: 10px; } .card-header-icon { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; cursor: pointer; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; width: 40px; } @@ -2914,27 +2656,15 @@ a.box:active { .card-footer { border-top: 1px solid #dbdbdb; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; } .card-footer-item { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex-grow: 1; + justify-content: center; padding: 10px; } @@ -3206,9 +2936,7 @@ a.box:active { .level-left .level-item.is-flexible, .level-right .level-item.is-flexible { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } @media screen and (max-width: 768px) { @@ -3219,41 +2947,26 @@ a.box:active { @media screen and (min-width: 769px) { .level-left { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } } @media screen and (min-width: 769px) { .level-right { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } } .level { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + align-items: center; + justify-content: space-between; } .level:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .level code { @@ -3266,8 +2979,6 @@ a.box:active { } .level.is-mobile { - display: -webkit-box; - display: -ms-flexbox; display: flex; } @@ -3276,42 +2987,33 @@ a.box:active { } .level.is-mobile > .level-item:not(.is-narrow) { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } @media screen and (min-width: 769px) { .level { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .level > .level-item:not(.is-narrow) { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } } .media-number, .media-left, .media-right { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 0; + flex-shrink: 0; } .media-number { background-color: whitesmoke; border-radius: 290486px; display: inline-block; - font-size: 18px; + font-size: 1.25rem; height: 32px; line-height: 24px; - margin-right: 10px; + margin-right: 1rem; min-width: 32px; padding: 4px 8px; text-align: center; @@ -3319,71 +3021,62 @@ a.box:active { } .media-left { - margin-right: 10px; + margin-right: 1rem; } .media-right { - margin-left: 10px; + margin-left: 1rem; } .media-content { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; text-align: left; } .media { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - display: -webkit-box; - display: -ms-flexbox; + align-items: flex-start; display: flex; text-align: left; } .media .content:not(:last-child) { - margin-bottom: 10px; + margin-bottom: 1rem; } .media .media { border-top: 1px solid rgba(219, 219, 219, 0.5); - display: -webkit-box; - display: -ms-flexbox; display: flex; padding-top: 10px; } .media .media .content:not(:last-child), .media .media .control:not(:last-child) { - margin-bottom: 5px; + margin-bottom: 0.5rem; } .media .media .media { - padding-top: 5px; + padding-top: 0.5rem; } .media .media .media + .media { - margin-top: 5px; + margin-top: 0.5rem; } .media + .media { border-top: 1px solid rgba(219, 219, 219, 0.5); - margin-top: 10px; - padding-top: 10px; + margin-top: 1rem; + padding-top: 1rem; } .media.is-large + .media { - margin-top: 20px; - padding-top: 20px; + margin-top: 1.4rem; + padding-top: 1.4rem; } @media screen and (min-width: 769px) { .media.is-large .media-number { - margin-right: 20px; + margin-right: 1.4rem; } } @@ -3417,7 +3110,7 @@ a.box:active { .menu-label { color: #7a7a7a; - font-size: 11px; + font-size: 0.875rem; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; @@ -3430,7 +3123,7 @@ a.box:active { .message-body { border: 1px solid #dbdbdb; border-radius: 3px; - padding: 12px 15px; + padding: 0.8rem 1rem; } .message-body strong { @@ -3441,7 +3134,7 @@ a.box:active { background-color: #4a4a4a; border-radius: 3px 3px 0 0; color: white; - padding: 7px 10px; + padding: 0.4rem 0.8rem; } .message-header strong { @@ -3459,7 +3152,7 @@ a.box:active { } .message:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .message.is-white { @@ -3655,13 +3348,11 @@ a.box:active { } .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); + transform: rotate(45deg); } .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); + transform: rotate(-45deg); } .modal-close:hover { @@ -3684,31 +3375,19 @@ a.box:active { } .modal-card { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; } .modal-card-head, .modal-card-foot { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-shrink: 0; + justify-content: flex-start; padding: 20px; position: relative; } @@ -3721,12 +3400,9 @@ a.box:active { .modal-card-title { color: #363636; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - font-size: 24px; + flex-grow: 1; + flex-shrink: 0; + font-size: 1.5rem; line-height: 1; } @@ -3742,11 +3418,8 @@ a.box:active { .modal-card-body { background-color: white; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; overflow: auto; padding: 20px; } @@ -3757,22 +3430,15 @@ a.box:active { position: absolute; right: 0; top: 0; - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; + align-items: center; display: none; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; overflow: hidden; position: fixed; z-index: 1986; } .modal.is-active { - display: -webkit-box; - display: -ms-flexbox; display: flex; } @@ -3792,12 +3458,8 @@ a.box:active { margin-left: -7px; position: absolute; top: 50%; - -webkit-transition: none 86ms ease-out; transition: none 86ms ease-out; - -webkit-transition-property: background, left, opacity, -webkit-transform; - transition-property: background, left, opacity, -webkit-transform; transition-property: background, left, opacity, transform; - transition-property: background, left, opacity, transform, -webkit-transform; width: 15px; } @@ -3823,10 +3485,8 @@ a.box:active { .nav-toggle.is-active span:nth-child(1) { margin-left: -5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: left top; - transform-origin: left top; + transform: rotate(45deg); + transform-origin: left top; } .nav-toggle.is-active span:nth-child(2) { @@ -3835,10 +3495,8 @@ a.box:active { .nav-toggle.is-active span:nth-child(3) { margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; + transform: rotate(-45deg); + transform-origin: left bottom; } @media screen and (min-width: 769px) { @@ -3848,29 +3506,17 @@ a.box:active { } .nav-item { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; padding: 10px; } .nav-item a { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .nav-item img { @@ -3891,9 +3537,7 @@ a.box:active { @media screen and (max-width: 768px) { .nav-item { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; } } @@ -3959,69 +3603,39 @@ a.nav-item.is-tab.is-active { } .nav-left { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; overflow: hidden; overflow-x: auto; white-space: nowrap; } .nav-center { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-left: auto; margin-right: auto; } @media screen and (min-width: 769px) { .nav-right { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-end; } } .nav { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; background-color: white; - display: -webkit-box; - display: -ms-flexbox; display: flex; min-height: 50px; position: relative; @@ -4030,11 +3644,7 @@ a.nav-item.is-tab.is-active { } .nav > .container { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; min-height: 50px; width: 100%; @@ -4068,15 +3678,9 @@ a.nav-item.is-tab.is-active { } .pagination { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; text-align: center; } @@ -4097,26 +3701,16 @@ a.nav-item.is-tab.is-active { } .pagination ul { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; } @media screen and (max-width: 768px) { .pagination { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .pagination > a { width: calc(50% - 5px); @@ -4125,11 +3719,8 @@ a.nav-item.is-tab.is-active { margin-left: 10px; } .pagination li { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .pagination ul { margin-top: 10px; @@ -4138,9 +3729,7 @@ a.nav-item.is-tab.is-active { @media screen and (min-width: 769px) { .pagination > a:not(:first-child) { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; + order: 1; } } @@ -4167,7 +3756,7 @@ a.nav-item.is-tab.is-active { border-bottom: 1px solid #dbdbdb; border-radius: 4px 4px 0 0; color: #363636; - font-size: 18px; + font-size: 1.25rem; font-weight: 300; padding: 10px; } @@ -4181,14 +3770,10 @@ a.nav-item.is-tab.is-active { } .panel-tabs { - display: -webkit-box; - display: -ms-flexbox; display: flex; - font-size: 11px; + font-size: 0.875rem; padding: 5px 10px 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .panel-tabs a { @@ -4236,15 +3821,9 @@ a.panel-block:hover { -moz-user-select: none; -ms-user-select: none; user-select: none; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + justify-content: space-between; line-height: 24px; overflow: hidden; overflow-x: auto; @@ -4252,21 +3831,15 @@ a.panel-block:hover { } .tabs:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .tabs a { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; border-bottom: 1px solid #dbdbdb; color: #4a4a4a; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-bottom: -1px; padding: 6px 12px; vertical-align: top; @@ -4287,21 +3860,12 @@ a.panel-block:hover { } .tabs ul { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; border-bottom: 1px solid #dbdbdb; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; } .tabs ul.is-left { @@ -4309,20 +3873,14 @@ a.panel-block:hover { } .tabs ul.is-center { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex: none; + justify-content: center; padding-left: 10px; padding-right: 10px; } .tabs ul.is-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; padding-left: 10px; } @@ -4335,15 +3893,11 @@ a.panel-block:hover { } .tabs.is-centered ul { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .tabs.is-right ul { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .tabs.is-boxed a { @@ -4365,11 +3919,8 @@ a.panel-block:hover { } .tabs.is-fullwidth li { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .tabs.is-toggle a { @@ -4410,7 +3961,7 @@ a.panel-block:hover { } .tabs.is-small { - font-size: 11px; + font-size: 0.875rem; } .tabs.is-small a { @@ -4423,7 +3974,7 @@ a.panel-block:hover { } .tabs.is-medium { - font-size: 18px; + font-size: 1.25rem; } .tabs.is-medium a { @@ -4436,7 +3987,7 @@ a.panel-block:hover { } .tabs.is-large { - font-size: 28px; + font-size: 1.5rem; } .tabs.is-large a { @@ -4450,61 +4001,43 @@ a.panel-block:hover { .column { display: block; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; padding: 10px; } .columns.is-mobile > .column.is-narrow { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .columns.is-mobile > .column.is-full { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .columns.is-mobile > .column.is-three-quarters { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .columns.is-mobile > .column.is-two-thirds { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .columns.is-mobile > .column.is-half { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .columns.is-mobile > .column.is-one-third { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .columns.is-mobile > .column.is-one-quarter { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } @@ -4529,9 +4062,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-1 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } @@ -4540,9 +4071,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-2 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } @@ -4551,9 +4080,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-3 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } @@ -4562,9 +4089,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-4 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } @@ -4573,9 +4098,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-5 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } @@ -4584,9 +4107,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-6 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } @@ -4595,9 +4116,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-7 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } @@ -4606,9 +4125,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-8 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } @@ -4617,9 +4134,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-9 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } @@ -4628,9 +4143,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-10 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } @@ -4639,9 +4152,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-11 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } @@ -4650,9 +4161,7 @@ a.panel-block:hover { } .columns.is-mobile > .column.is-12 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } @@ -4662,44 +4171,30 @@ a.panel-block:hover { @media screen and (max-width: 768px) { .column.is-narrow-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-three-quarters-mobile { @@ -4718,108 +4213,84 @@ a.panel-block:hover { margin-left: 25%; } .column.is-1-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-mobile { margin-left: 8.33333%; } .column.is-2-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-mobile { margin-left: 16.66667%; } .column.is-3-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-mobile { margin-left: 25%; } .column.is-4-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-mobile { margin-left: 33.33333%; } .column.is-5-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-mobile { margin-left: 41.66667%; } .column.is-6-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-mobile { margin-left: 50%; } .column.is-7-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-mobile { margin-left: 58.33333%; } .column.is-8-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-mobile { margin-left: 66.66667%; } .column.is-9-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-mobile { margin-left: 75%; } .column.is-10-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-mobile { margin-left: 83.33333%; } .column.is-11-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-mobile { margin-left: 91.66667%; } .column.is-12-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-mobile { @@ -4829,44 +4300,30 @@ a.panel-block:hover { @media screen and (min-width: 769px) { .column.is-narrow, .column.is-narrow-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full, .column.is-full-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters, .column.is-three-quarters-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds, .column.is-two-thirds-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half, .column.is-half-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third, .column.is-one-third-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter, .column.is-one-quarter-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { @@ -4885,108 +4342,84 @@ a.panel-block:hover { margin-left: 25%; } .column.is-1, .column.is-1-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1, .column.is-offset-1-tablet { margin-left: 8.33333%; } .column.is-2, .column.is-2-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2, .column.is-offset-2-tablet { margin-left: 16.66667%; } .column.is-3, .column.is-3-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3, .column.is-offset-3-tablet { margin-left: 25%; } .column.is-4, .column.is-4-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4, .column.is-offset-4-tablet { margin-left: 33.33333%; } .column.is-5, .column.is-5-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5, .column.is-offset-5-tablet { margin-left: 41.66667%; } .column.is-6, .column.is-6-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6, .column.is-offset-6-tablet { margin-left: 50%; } .column.is-7, .column.is-7-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7, .column.is-offset-7-tablet { margin-left: 58.33333%; } .column.is-8, .column.is-8-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8, .column.is-offset-8-tablet { margin-left: 66.66667%; } .column.is-9, .column.is-9-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9, .column.is-offset-9-tablet { margin-left: 75%; } .column.is-10, .column.is-10-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10, .column.is-offset-10-tablet { margin-left: 83.33333%; } .column.is-11, .column.is-11-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11, .column.is-offset-11-tablet { margin-left: 91.66667%; } .column.is-12, .column.is-12-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12, .column.is-offset-12-tablet { @@ -4996,44 +4429,30 @@ a.panel-block:hover { @media screen and (min-width: 980px) { .column.is-narrow-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-three-quarters-desktop { @@ -5052,108 +4471,84 @@ a.panel-block:hover { margin-left: 25%; } .column.is-1-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-desktop { margin-left: 8.33333%; } .column.is-2-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-desktop { margin-left: 16.66667%; } .column.is-3-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-desktop { margin-left: 25%; } .column.is-4-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-desktop { margin-left: 33.33333%; } .column.is-5-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-desktop { margin-left: 41.66667%; } .column.is-6-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-desktop { margin-left: 50%; } .column.is-7-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-desktop { margin-left: 58.33333%; } .column.is-8-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-desktop { margin-left: 66.66667%; } .column.is-9-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-desktop { margin-left: 75%; } .column.is-10-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-desktop { margin-left: 83.33333%; } .column.is-11-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-desktop { margin-left: 91.66667%; } .column.is-12-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-desktop { @@ -5163,44 +4558,30 @@ a.panel-block:hover { @media screen and (min-width: 1180px) { .column.is-narrow-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-three-quarters-widescreen { @@ -5219,108 +4600,84 @@ a.panel-block:hover { margin-left: 25%; } .column.is-1-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-widescreen { margin-left: 8.33333%; } .column.is-2-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-widescreen { margin-left: 16.66667%; } .column.is-3-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-widescreen { margin-left: 25%; } .column.is-4-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-widescreen { margin-left: 33.33333%; } .column.is-5-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-widescreen { margin-left: 41.66667%; } .column.is-6-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-widescreen { margin-left: 50%; } .column.is-7-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-widescreen { margin-left: 58.33333%; } .column.is-8-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-widescreen { margin-left: 66.66667%; } .column.is-9-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-widescreen { margin-left: 75%; } .column.is-10-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-widescreen { margin-left: 83.33333%; } .column.is-11-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-widescreen { margin-left: 91.66667%; } .column.is-12-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-widescreen { @@ -5343,9 +4700,7 @@ a.panel-block:hover { } .columns.is-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .columns.is-gapless { @@ -5369,8 +4724,7 @@ a.panel-block:hover { @media screen and (min-width: 769px) { .columns.is-grid { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .columns.is-grid > .column { max-width: 33.3333%; @@ -5383,54 +4737,35 @@ a.panel-block:hover { } .columns.is-mobile { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .columns.is-multiline { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .columns.is-vcentered { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; + align-items: center; } @media screen and (min-width: 769px) { .columns:not(.is-desktop) { - display: -webkit-box; - display: -ms-flexbox; display: flex; } } @media screen and (min-width: 980px) { .columns.is-desktop { - display: -webkit-box; - display: -ms-flexbox; display: flex; } } .tile { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - -ms-grid-row-align: stretch; - align-items: stretch; + align-items: stretch; display: block; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; - min-height: -webkit-min-content; - min-height: -moz-min-content; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; min-height: min-content; } @@ -5457,10 +4792,7 @@ a.panel-block:hover { } .tile.is-vertical { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; } .tile.is-vertical > .tile.is-child:not(:last-child) { @@ -5469,80 +4801,54 @@ a.panel-block:hover { @media screen and (min-width: 769px) { .tile:not(.is-child) { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .tile.is-1 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .tile.is-2 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .tile.is-3 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .tile.is-4 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .tile.is-5 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .tile.is-6 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .tile.is-7 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .tile.is-8 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .tile.is-9 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .tile.is-10 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .tile.is-11 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .tile.is-12 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } } @@ -5562,8 +4868,7 @@ a.panel-block:hover { min-width: 100%; position: absolute; top: 50%; - -webkit-transform: translate3d(-50%, -50%, 0); - transform: translate3d(-50%, -50%, 0); + transform: translate3d(-50%, -50%, 0); } .hero-video.is-transparent { @@ -5582,8 +4887,6 @@ a.panel-block:hover { @media screen and (max-width: 768px) { .hero-buttons .button { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .hero-buttons .button:not(:last-child) { @@ -5593,12 +4896,8 @@ a.panel-block:hover { @media screen and (min-width: 769px) { .hero-buttons { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .hero-buttons .button:not(:last-child) { margin-right: 20px; @@ -5607,16 +4906,12 @@ a.panel-block:hover { .hero-head, .hero-foot { - -ms-flex-negative: 0; - flex-shrink: 0; + flex-shrink: 0; } .hero-body { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; padding: 40px 20px; } @@ -5628,20 +4923,11 @@ a.panel-block:hover { } .hero { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; background-color: white; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + flex-direction: column; + justify-content: space-between; } .hero .nav { @@ -5725,7 +5011,6 @@ a.panel-block:hover { } .hero.is-white.is-bold { - background-image: -webkit-linear-gradient(309deg, #e6e6e6 0%, white 71%, white 100%); background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%); } @@ -5816,7 +5101,6 @@ a.panel-block:hover { } .hero.is-black.is-bold { - background-image: -webkit-linear-gradient(309deg, black 0%, #0a0a0a 71%, #181616 100%); background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); } @@ -5907,7 +5191,6 @@ a.panel-block:hover { } .hero.is-light.is-bold { - background-image: -webkit-linear-gradient(309deg, #dfd8d8 0%, whitesmoke 71%, white 100%); background-image: linear-gradient(141deg, #dfd8d8 0%, whitesmoke 71%, white 100%); } @@ -5998,7 +5281,6 @@ a.panel-block:hover { } .hero.is-dark.is-bold { - background-image: -webkit-linear-gradient(309deg, #1f1919 0%, #363636 71%, #463f3f 100%); background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%); } @@ -6089,7 +5371,6 @@ a.panel-block:hover { } .hero.is-primary.is-bold { - background-image: -webkit-linear-gradient(309deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%); background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%); } @@ -6180,7 +5461,6 @@ a.panel-block:hover { } .hero.is-info.is-bold { - background-image: -webkit-linear-gradient(309deg, #1577c6 0%, #3273dc 71%, #4366e5 100%); background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%); } @@ -6271,7 +5551,6 @@ a.panel-block:hover { } .hero.is-success.is-bold { - background-image: -webkit-linear-gradient(309deg, #12af2f 0%, #23d160 71%, #2ce28a 100%); background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%); } @@ -6362,7 +5641,6 @@ a.panel-block:hover { } .hero.is-warning.is-bold { - background-image: -webkit-linear-gradient(309deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); } @@ -6453,7 +5731,6 @@ a.panel-block:hover { } .hero.is-danger.is-bold { - background-image: -webkit-linear-gradient(309deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); } @@ -6491,20 +5768,13 @@ a.panel-block:hover { } .hero.is-fullheight .hero-body { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } .hero.is-fullheight .hero-body > .container { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .section { @@ -6613,7 +5883,7 @@ svg { } #carbonads .carbon-poweredby { - font-size: 11px; + font-size: 0.875rem; margin-left: 15px; } @@ -6639,48 +5909,18 @@ svg { color: white; } -@-webkit-keyframes floatUp { - 0% { - box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0); - -webkit-transform: scale(0.86); - transform: scale(0.86); - } - 67% { - box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); - -webkit-transform: scale(1); - transform: scale(1); - } -} - @keyframes floatUp { 0% { box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0); - -webkit-transform: scale(0.86); - transform: scale(0.86); + transform: scale(0.86); } 67% { box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); - -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } 100% { box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@-webkit-keyframes strokePath { - from { - stroke-dashoffset: 880; - } - to { - stroke-dashoffset: 0; + transform: scale(1); } } @@ -6693,131 +5933,60 @@ svg { } } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - -webkit-transform: scale(0.86); - transform: scale(0.86); - } - to { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - @keyframes fadeIn { from { opacity: 0; - -webkit-transform: scale(0.86); - transform: scale(0.86); + transform: scale(0.86); } to { opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@-webkit-keyframes fadeOut { - 0% { - opacity: 1; - -webkit-transform: scale(0.86); - transform: scale(0.86); - } - 67% { - opacity: 1; - -webkit-transform: scale(0.86); - transform: scale(0.86); - } - 100% { - opacity: 0; - -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } } @keyframes fadeOut { 0% { opacity: 1; - -webkit-transform: scale(0.86); - transform: scale(0.86); + transform: scale(0.86); } 67% { opacity: 1; - -webkit-transform: scale(0.86); - transform: scale(0.86); + transform: scale(0.86); } 100% { opacity: 0; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@-webkit-keyframes slideDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-10px); - transform: translateY(-10px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); + transform: scale(1); } } @keyframes slideDown { 0% { opacity: 0; - -webkit-transform: translateY(-10px); - transform: translateY(-10px); + transform: translateY(-10px); } 100% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -@-webkit-keyframes slideUp { - 0% { - opacity: 0; - -webkit-transform: translateY(10px); - transform: translateY(10px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); + transform: translateY(0); } } @keyframes slideUp { 0% { opacity: 0; - -webkit-transform: translateY(10px); - transform: translateY(10px); + transform: translateY(10px); } 100% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); + transform: translateY(0); } } #b { - -webkit-animation-delay: 1s; - animation-delay: 1s; - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: floatUp; - animation-name: floatUp; - -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); - animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + animation-delay: 1s; + animation-duration: 1.5s; + animation-fill-mode: both; + animation-name: floatUp; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); border-radius: 24px; display: inline-block; height: 240px; @@ -6839,25 +6008,17 @@ svg { } #b svg:first-child { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: fadeOut; - animation-name: fadeOut; - -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); - animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + animation-duration: 1.5s; + animation-fill-mode: both; + animation-name: fadeOut; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); } #b svg:first-child g { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: strokePath; - animation-name: strokePath; - -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); - animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + animation-duration: 1s; + animation-fill-mode: both; + animation-name: strokePath; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); fill: none; stroke: #00d1b2; stroke-dasharray: 880; @@ -6865,16 +6026,11 @@ svg { } #b svg:last-child { - -webkit-animation-delay: 1s; - animation-delay: 1s; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: fadeIn; - animation-name: fadeIn; - -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); - animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + animation-delay: 1s; + animation-duration: 1s; + animation-fill-mode: both; + animation-name: fadeIn; + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); } #b svg:last-child g { @@ -6890,24 +6046,18 @@ svg { } #bulma { - -webkit-animation: slideDown 500ms both; - animation: slideDown 500ms both; - -webkit-animation-delay: 1s; - animation-delay: 1s; + animation: slideDown 500ms both; + animation-delay: 1s; } #modern-framework { - -webkit-animation: slideUp 500ms both; - animation: slideUp 500ms both; - -webkit-animation-delay: 1.2s; - animation-delay: 1.2s; + animation: slideUp 500ms both; + animation-delay: 1.2s; } #npm { - -webkit-animation: fadeIn 500ms both; - animation: fadeIn 500ms both; - -webkit-animation-delay: 1.4s; - animation-delay: 1.4s; + animation: fadeIn 500ms both; + animation-delay: 1.4s; background: none; margin: -10px 0 20px; } @@ -6921,24 +6071,18 @@ svg { } #ghbtns { - -webkit-animation: slideDown 500ms both; - animation: slideDown 500ms both; - -webkit-animation-delay: 1.6s; - animation-delay: 1.6s; + animation: slideDown 500ms both; + animation-delay: 1.6s; } html.route-index #carbon { - -webkit-animation: slideUp 500ms both; - animation: slideUp 500ms both; - -webkit-animation-delay: 1.8s; - animation-delay: 1.8s; + animation: slideUp 500ms both; + animation-delay: 1.8s; } #download { - -webkit-animation: fadeIn 500ms both; - animation: fadeIn 500ms both; - -webkit-animation-delay: 2s; - animation-delay: 2s; + animation: fadeIn 500ms both; + animation-delay: 2s; } #grid .notification { @@ -6966,18 +6110,11 @@ html.route-index #carbon { } #social { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; margin-bottom: 1em; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } #social a { @@ -7100,18 +6237,12 @@ html.route-index #carbon { position: absolute; right: 0; top: 0; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; content: attr(title); - display: -webkit-box; - display: -ms-flexbox; display: flex; font-family: "Inconsolata", "Consolas", "Monaco", monospace; font-size: 11px; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding: 3px 5px; z-index: 2; } @@ -7121,13 +6252,8 @@ html.route-index #carbon { } .structure-item.is-structure-container:after { - -webkit-box-align: start; - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + align-items: flex-start; + justify-content: flex-start; padding: 5px 10px; } diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 73bebe8b..fea681cf 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -458,10 +458,6 @@ doc-subtab: variables $size-large $size-3 - - $size-huge - $size-1 - 4. Lists and maps diff --git a/sass/base/generic.sass b/sass/base/generic.sass index 52ac6f25..34264e0f 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -31,13 +31,12 @@ pre -moz-osx-font-smoothing: auto -webkit-font-smoothing: auto font-family: $family-code - line-height: 1.25 body color: $text font-size: 1rem font-weight: $weight-normal - line-height: 1.428571428571429 + line-height: 1.5 // Inline @@ -52,16 +51,16 @@ a code background-color: $code-background color: $code - font-size: 12px + font-size: 0.75em font-weight: normal - padding: 1px 2px 2px + padding: 0.25em 0.5em 0.25em hr background-color: $border border: none display: block height: 1px - margin: 20px 0 + margin: 1.5rem 0 img max-width: 100% @@ -86,14 +85,16 @@ strong pre background-color: $pre-background color: $pre + font-size: 0.8em white-space: pre word-wrap: normal code background-color: $pre-background color: $pre display: block + font-size: 1em overflow-x: auto - padding: 16px 20px + padding: 1.25rem 1.5rem table width: 100% diff --git a/sass/components/media.sass b/sass/components/media.sass index db48068f..a62b3986 100644 --- a/sass/components/media.sass +++ b/sass/components/media.sass @@ -11,17 +11,17 @@ font-size: $size-medium height: 32px line-height: 24px - margin-right: 10px + margin-right: 1rem min-width: 32px padding: 4px 8px text-align: center vertical-align: top .media-left - margin-right: 10px + margin-right: 1rem .media-right - margin-left: 10px + margin-left: 1rem .media-content flex-grow: 1 @@ -33,29 +33,29 @@ display: flex text-align: left .content:not(:last-child) - margin-bottom: 10px + margin-bottom: 1rem .media border-top: 1px solid rgba($border, 0.5) display: flex padding-top: 10px .content:not(:last-child), .control:not(:last-child) - margin-bottom: 5px + margin-bottom: 0.5rem .media - padding-top: 5px + padding-top: 0.5rem & + .media - margin-top: 5px + margin-top: 0.5rem & + .media border-top: 1px solid rgba($border, 0.5) - margin-top: 10px - padding-top: 10px + margin-top: 1rem + padding-top: 1rem // Sizes &.is-large & + .media - margin-top: 20px - padding-top: 20px + margin-top: 1.4rem + padding-top: 1.4rem // Responsiveness +tablet &.is-large .media-number - margin-right: 20px + margin-right: 1.4rem diff --git a/sass/components/message.sass b/sass/components/message.sass index 743eaf25..1de82daf 100644 --- a/sass/components/message.sass +++ b/sass/components/message.sass @@ -1,7 +1,7 @@ .message-body border: 1px solid $border border-radius: $radius - padding: 12px 15px + padding: 0.8rem 1rem strong color: inherit @@ -9,7 +9,7 @@ background-color: $text border-radius: $radius $radius 0 0 color: $text-invert - padding: 7px 10px + padding: 0.4rem 0.8rem strong color: inherit & + .message-body diff --git a/sass/elements/box.sass b/sass/elements/box.sass index 276ad408..8c528fec 100644 --- a/sass/elements/box.sass +++ b/sass/elements/box.sass @@ -4,7 +4,7 @@ border-radius: $radius-large box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) display: block - padding: 20px + padding: 1.25rem a.box &:hover, diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 88ad8113..3926c961 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -1,37 +1,22 @@ =button-small border-radius: $radius-small - font-size: 11px - height: 24px - line-height: 16px - padding-left: 6px - padding-right: 6px + font-size: $size-small =button-medium - font-size: 18px - height: 40px - padding-left: 14px - padding-right: 14px + font-size: $size-medium =button-large - font-size: 22px - height: 48px - padding-left: 20px - padding-right: 20px + font-size: $size-large .button +control +unselectable cursor: pointer justify-content: center - padding-left: 10px - padding-right: 10px + padding-left: 1em + padding-right: 1em text-align: center white-space: nowrap strong color: inherit - small - display: block - font-size: $size-small - line-height: 1 - margin-top: 5px .icon, .tag &:first-child diff --git a/sass/elements/content.sass b/sass/elements/content.sass index 1973c89a..c0bf9972 100644 --- a/sass/elements/content.sass +++ b/sass/elements/content.sass @@ -24,30 +24,36 @@ h5, h6 color: $text-strong - font-weight: 300 + font-weight: $weight-title-normal line-height: 1.125 - margin-bottom: 20px - h1, - h2, - h3 + h1 + font-size: 2em + margin-bottom: 0.5em &:not(:first-child) - margin-top: 40px + margin-top: 1em + h2 + font-size: 1.75em + margin-bottom: 0.5714em + &:not(:first-child) + margin-top: 1.1428em + h3 + font-size: 1.5em + margin-bottom: 0.6666em + &:not(:first-child) + margin-top: 1.3333em + h4 + font-size: 1.25em + margin-bottom: 0.8em + h5 + font-size: 1.125em + margin-bottom: 0.8888em + h6 + font-size: 1em + margin-bottom: 1em blockquote background-color: $background border-left: 5px solid $border - padding: 1.5em - h1 - font-size: 2em - h2 - font-size: 1.75em - h3 - font-size: 1.5em - h4 - font-size: 1.25em - h5 - font-size: 1.125em - h6 - font-size: 1em + padding: 1.25em 1.5em ol list-style: decimal outside margin-left: 2em @@ -64,11 +70,9 @@ ul list-style-type: square // Sizes + &.is-small + font-size: $size-small &.is-medium - font-size: $size-5 - code - font-size: $size-6 + font-size: $size-medium &.is-large - font-size: $size-4 - code - font-size: $size-5 + font-size: $size-large diff --git a/sass/elements/form.sass b/sass/elements/form.sass index a480178f..a2ad0e0e 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -42,7 +42,7 @@ .radio cursor: pointer display: inline-block - line-height: 16px + line-height: 1em position: relative vertical-align: top input @@ -57,11 +57,11 @@ .radio & + .radio - margin-left: 10px + margin-left: 0.5em .select display: inline-block - height: 32px + height: 2.5em position: relative vertical-align: top select @@ -69,7 +69,7 @@ cursor: pointer display: block outline: none - padding-right: 36px + padding-right: 2.5em &:hover border-color: $control-hover-border &::ms-expand @@ -80,34 +80,19 @@ width: 100% &:after +arrow($control-active) - margin-top: -6px + margin-top: -4px right: 16px top: 50% &:hover &:after border-color: $control-hover - &.is-small - height: 24px - select - +control-small - padding-right: 28px - &.is-medium - height: 40px - select - +control-medium - padding-right: 44px - &.is-large - height: 48px - select - +control-large - padding-right: 52px .label color: $control display: block font-weight: bold &:not(:last-child) - margin-bottom: 5px + margin-bottom: 0.5em .help display: block @@ -122,13 +107,13 @@ .control-label +mobile - margin-bottom: 5px + margin-bottom: 0.5em +tablet flex-basis: 0 flex-grow: 1 flex-shrink: 0 - margin-right: 20px - padding-top: 7px + margin-right: 1.5em + padding-top: 0.5em text-align: right .control diff --git a/sass/elements/other.sass b/sass/elements/other.sass index 952b79b7..91fe93c7 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -43,8 +43,7 @@ .highlight +block - font-size: 12px - font-weight: normal + font-weight: $weight-normal max-width: 100% overflow: hidden padding: 0 diff --git a/sass/elements/title.sass b/sass/elements/title.sass index 9e615ebc..dae80ab0 100644 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -17,56 +17,39 @@ .title color: $text-strong font-size: $size-large - line-height: 1 - code - display: inline-block - font-size: $size-large + line-height: 1.125 strong color: inherit & + .highlight - margin-top: -10px + margin-top: -0.75rem & + .subtitle - margin-top: -10px + margin-top: -1.25rem // Colors @each $size in $sizes $i: index($sizes, $size) &.is-#{$i} font-size: $size - code - font-size: nth($sizes, min($i + 1, 6)) // Modifiers &.is-normal - font-weight: 400 + font-weight: $weight-normal strong - font-weight: 700 - // Responsiveness - +tablet - & + .subtitle - margin-top: -15px + font-weight: $weight-bold .subtitle color: $text font-size: $size-medium - line-height: 1.125 - code - border-radius: $radius - display: inline-block - font-size: $size-normal - padding: 2px 3px - vertical-align: top + line-height: 1.25 strong color: $text-strong & + .title - margin-top: -20px + margin-top: -1.4rem // Colors @each $size in $sizes $i: index($sizes, $size) &.is-#{$i} font-size: $size - code - font-size: nth($sizes, min($i + 1, 6)) // Modifiers &.is-normal - font-weight: 400 + font-weight: $weight-normal strong - font-weight: 700 + font-weight: $weight-bold diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass index 02cf8dea..528233b4 100644 --- a/sass/utilities/controls.sass +++ b/sass/utilities/controls.sass @@ -28,14 +28,15 @@ $control-icon-active: $grey-light !default background-color: $control-background border: 1px solid $control-border border-radius: $control-radius + box-shadow: none color: $control display: inline-flex font-size: $control-size - height: 32px + height: 2.5em justify-content: flex-start - line-height: 24px - padding-left: 8px - padding-right: 8px + line-height: 1.5 + padding-left: 0.75em + padding-right: 0.75em position: relative vertical-align: top &:hover @@ -56,20 +57,8 @@ $control-icon-active: $grey-light !default =control-small border-radius: $control-radius-small - font-size: 11px - height: 24px - line-height: 16px - padding-left: 6px - padding-right: 6px + font-size: $size-small =control-medium - font-size: 18px - height: 40px - line-height: 32px - padding-left: 10px - padding-right: 10px + font-size: $size-medium =control-large - font-size: 24px - height: 48px - line-height: 40px - padding-left: 12px - padding-right: 12px + font-size: $size-large diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index feca388a..d9737990 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -12,7 +12,7 @@ =block &:not(:last-child) - margin-bottom: 20px + margin-bottom: 1.5rem =clearfix &:after diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass index 3d5b4374..59aafef4 100644 --- a/sass/utilities/variables.sass +++ b/sass/utilities/variables.sass @@ -29,14 +29,14 @@ $red: hsl(348, 100%, 61%) !default $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default -$size-1: 48px !default -$size-2: 40px !default -$size-3: 28px !default -$size-4: 24px !default -$size-5: 18px !default -$size-6: 14px !default +$size-1: 3.5rem !default +$size-2: 2.5rem !default +$size-3: 1.75rem !default +$size-4: 1.5rem !default +$size-5: 1.25rem !default +$size-6: 16px !default -$size-7: 11px !default +$size-7: 0.875rem !default $weight-normal: 400 !default $weight-bold: 700 !default @@ -70,12 +70,10 @@ $dark: $grey-darker !default // Invert colors $primary-invert: findColorInvert($primary) !default - $info-invert: findColorInvert($info) !default $success-invert: findColorInvert($success) !default $warning-invert: findColorInvert($warning) !default $danger-invert: findColorInvert($danger) !default - $light-invert: $dark !default $dark-invert: $light !default @@ -119,8 +117,7 @@ $family-code: $family-monospace !default $size-small: $size-7 !default $size-normal: $size-6 !default $size-medium: $size-5 !default -$size-large: $size-3 !default -$size-huge: $size-1 !default +$size-large: $size-4 !default //////////////////////////////////////////////// ////////////////////////////////////////////////