From: Jeremy Thomas Date: Thu, 22 Sep 2016 21:03:22 +0000 (+0100) Subject: Add placeholders X-Git-Tag: 0.2.0~10 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7634faba6a97d4ee208e7bd88d5297d361400c9c;p=thirdparty%2Fbulma.git Add placeholders --- diff --git a/bulma.sass b/bulma.sass index 2b1854256..8c6de81db 100644 --- a/bulma.sass +++ b/bulma.sass @@ -1,6 +1,5 @@ @charset "utf-8" -@import "sass/utilities/utilities" @import "sass/base/base" @import "sass/elements/elements" @import "sass/components/components" diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 4bffec0cd..c179b14fc 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -235,7 +235,7 @@ $structure-invert: $danger-invert position: relative .copy, .expand - @extend .unselectable + @extend %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 978fde5d4..5ccd2b956 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -165,25 +165,12 @@ input[type=button] { overflow: visible; } -@-webkit-keyframes spin-around { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - @keyframes spin-around { from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + transform: rotate(0deg); } to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); + transform: rotate(359deg); } } @@ -235,7 +222,6 @@ a { color: #11e4c4; cursor: pointer; text-decoration: none; - -webkit-transition: none 86ms ease-out; transition: none 86ms ease-out; } @@ -276,417 +262,36 @@ span { strong { color: #242424; - font-weight: 700; -} - -pre { - background-color: whitesmoke; - color: #7a7a7a; - white-space: pre; - word-wrap: normal; -} - -pre code { - background-color: whitesmoke; - color: #7a7a7a; - display: block; - overflow-x: auto; - padding: 16px 20px; -} - -table { - width: 100%; -} - -table td, -table th { - text-align: left; - vertical-align: top; -} - -table th { - color: #242424; -} - -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - -.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; -} - -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - -.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; -} - -.delete, .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; -} - -.delete:before, .modal-close:before, .delete:after, .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%; -} - -.delete:before, .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.delete:after, .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.delete:hover, .modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.delete.is-small, .is-small.modal-close { - height: 16px; - width: 16px; -} - -.delete.is-medium, .is-medium.modal-close { - height: 32px; - width: 32px; -} - -.delete.is-large, .is-large.modal-close { - height: 40px; - width: 40px; -} - -.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; -} - -.hamburger, .nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.hamburger span, .nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - 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; -} - -.hamburger span:nth-child(1), .nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.hamburger span:nth-child(2), .nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.hamburger span:nth-child(3), .nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.hamburger:hover, .nav-toggle:hover { - background-color: whitesmoke; -} - -.hamburger.is-active span, .is-active.nav-toggle span { - background-color: #11e4c4; -} - -.hamburger.is-active span:nth-child(1), .is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: left top; - transform-origin: left top; -} - -.hamburger.is-active span:nth-child(2), .is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.hamburger.is-active span:nth-child(3), .is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -} - -.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%; -} - -.loader, .button.is-loading:after, .control.is-loading:after { - -webkit-animation: spin-around 500ms infinite linear; - 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; - display: inline-block; - font-size: 18px; - vertical-align: top; -} - -.tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: whitesmoke; - border-radius: 290486px; - color: #7a7a7a; - 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; - line-height: 16px; - padding-left: 10px; - padding-right: 10px; - vertical-align: top; - white-space: nowrap; -} - -.tag .delete, .tag .modal-close { - 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; + font-weight: 700; } -.tag.is-small { - font-size: 11px; - height: 20px; - padding-left: 8px; - padding-right: 8px; +pre { + background-color: whitesmoke; + color: #7a7a7a; + white-space: pre; + word-wrap: normal; } -.tag.is-medium { - font-size: 14px; - height: 32px; - padding-left: 14px; - padding-right: 14px; +pre code { + background-color: whitesmoke; + color: #7a7a7a; + display: block; + overflow-x: auto; + padding: 16px 20px; } -.tag.is-large { - font-size: 18px; - height: 40px; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; +table { + width: 100%; } -.tag.is-large .delete, .tag.is-large .modal-close { - margin-left: 4px; - margin-right: -8px; +table td, +table th { + text-align: left; + vertical-align: top; } -.unselectable, .delete, .modal-close, .is-unselectable, .button, .tabs, .highlight .copy, -.highlight .expand { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +table th { + color: #242424; } .is-block { @@ -736,63 +341,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; } } @@ -890,63 +479,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; } } @@ -1047,36 +620,141 @@ table th { padding: 0 !important; } -.block:not(:last-child), .highlight:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), +.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; } -.container { +.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; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.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%; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.modal-close:before { + transform: rotate(45deg); } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.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; } .box { @@ -1095,11 +773,6 @@ a.box:active { box-shadow: inset 0 1px 2px rgba(18, 18, 18, 0.2), 0 0 0 1px #11e4c4; } -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - .container { position: relative; } @@ -1127,62 +800,6 @@ a.box:active { vertical-align: top; } -.delete, .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; -} - -.delete:before, .modal-close:before, .delete:after, .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%; -} - -.delete:before, .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.delete:after, .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.delete:hover, .modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.delete.is-small, .is-small.modal-close { - height: 16px; - width: 16px; -} - -.delete.is-medium, .is-medium.modal-close { - height: 32px; - width: 32px; -} - -.delete.is-large, .is-large.modal-close { - height: 40px; - width: 40px; -} - .icon { display: inline-block; font-size: 21px; @@ -1219,78 +836,13 @@ a.box:active { } .icon.is-large { - display: inline-block; - font-size: 42px; - height: 48px; - line-height: 48px; - text-align: center; - vertical-align: top; - width: 48px; -} - -.hamburger, .nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.hamburger span, .nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - 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; -} - -.hamburger span:nth-child(1), .nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.hamburger span:nth-child(2), .nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.hamburger span:nth-child(3), .nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.hamburger:hover, .nav-toggle:hover { - background-color: whitesmoke; -} - -.hamburger.is-active span, .is-active.nav-toggle span { - background-color: #11e4c4; -} - -.hamburger.is-active span:nth-child(1), .is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: left top; - transform-origin: left top; -} - -.hamburger.is-active span:nth-child(2), .is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.hamburger.is-active span:nth-child(3), .is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; + display: inline-block; + font-size: 42px; + height: 48px; + line-height: 48px; + text-align: center; + vertical-align: top; + width: 48px; } .heading { @@ -1314,20 +866,6 @@ a.box:active { max-width: 100%; } -.loader, .button.is-loading:after, .control.is-loading:after { - -webkit-animation: spin-around 500ms infinite linear; - 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; @@ -1337,20 +875,14 @@ a.box:active { } .tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; color: #7a7a7a; - 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; @@ -1358,7 +890,7 @@ a.box:active { white-space: nowrap; } -.tag .delete, .tag .modal-close { +.tag .delete { margin-left: 4px; margin-right: -6px; } @@ -1430,46 +962,29 @@ a.box:active { padding-right: 18px; } -.tag.is-large .delete, .tag.is-large .modal-close { +.tag.is-large .delete { margin-left: 4px; margin-right: -8px; } -.unselectable, .delete, .modal-close, .is-unselectable, .button, .tabs, .highlight .copy, -.highlight .expand { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - .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; color: #242424; - 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; + justify-content: flex-start; line-height: 24px; padding-left: 8px; padding-right: 8px; position: relative; vertical-align: top; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding-left: 10px; padding-right: 10px; text-align: center; @@ -1948,8 +1463,6 @@ a.box:active { } .button.is-fullwidth { - display: -webkit-box; - display: -ms-flexbox; display: flex; width: 100%; } @@ -1968,36 +1481,141 @@ a.box:active { position: absolute !important; } -.block:not(:last-child), .highlight:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), +.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; } -.container { +.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; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.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%; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.modal-close:before { + transform: rotate(45deg); } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.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; } .content { @@ -2114,11 +1732,6 @@ a.box:active { font-size: 18px; } -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - .container { position: relative; } @@ -2146,170 +1759,49 @@ a.box:active { vertical-align: top; } -.delete, .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; -} - -.delete:before, .modal-close:before, .delete:after, .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%; -} - -.delete:before, .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.delete:after, .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.delete:hover, .modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.delete.is-small, .is-small.modal-close { - height: 16px; - width: 16px; -} - -.delete.is-medium, .is-medium.modal-close { - height: 32px; - width: 32px; -} - -.delete.is-large, .is-large.modal-close { - height: 40px; - width: 40px; -} - .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; -} - -.hamburger, .nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.hamburger span, .nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - 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; -} - -.hamburger span:nth-child(1), .nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.hamburger span:nth-child(2), .nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.hamburger span:nth-child(3), .nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.hamburger:hover, .nav-toggle:hover { - background-color: whitesmoke; + vertical-align: top; + width: 24px; } -.hamburger.is-active span, .is-active.nav-toggle span { - background-color: #11e4c4; +.icon .fa { + font-size: inherit; + line-height: inherit; } -.hamburger.is-active span:nth-child(1), .is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: left top; - transform-origin: left top; +.icon.is-small { + display: inline-block; + font-size: 14px; + height: 16px; + line-height: 16px; + text-align: center; + vertical-align: top; + width: 16px; } -.hamburger.is-active span:nth-child(2), .is-active.nav-toggle span:nth-child(2) { - opacity: 0; +.icon.is-medium { + display: inline-block; + font-size: 28px; + height: 32px; + line-height: 32px; + text-align: center; + vertical-align: top; + width: 32px; } -.hamburger.is-active span:nth-child(3), .is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; +.icon.is-large { + display: inline-block; + font-size: 42px; + height: 48px; + line-height: 48px; + text-align: center; + vertical-align: top; + width: 48px; } .heading { @@ -2333,20 +1825,6 @@ a.box:active { max-width: 100%; } -.loader, .button.is-loading:after, .control.is-loading:after { - -webkit-animation: spin-around 500ms infinite linear; - 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; @@ -2356,20 +1834,14 @@ a.box:active { } .tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; color: #7a7a7a; - 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; @@ -2377,7 +1849,7 @@ a.box:active { white-space: nowrap; } -.tag .delete, .tag .modal-close { +.tag .delete { margin-left: 4px; margin-right: -6px; } @@ -2449,38 +1921,24 @@ a.box:active { padding-right: 18px; } -.tag.is-large .delete, .tag.is-large .modal-close { +.tag.is-large .delete { margin-left: 4px; margin-right: -8px; } -.unselectable, .delete, .modal-close, .is-unselectable, .button, .tabs, .highlight .copy, -.highlight .expand { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.input, .textarea { +.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; color: #242424; - 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; + justify-content: flex-start; line-height: 24px; padding-left: 8px; padding-right: 8px; @@ -2491,79 +1949,104 @@ a.box:active { width: 100%; } -.input:hover, .textarea:hover { +.input:hover, +.textarea:hover { border-color: #b5b5b5; } -.input:active, .textarea:active, .input:focus, .textarea:focus, .input.is-active, .is-active.textarea { +.input:active, .input:focus, .input.is-active, +.textarea:active, +.textarea:focus, +.textarea.is-active { border-color: #11e4c4; outline: none; } -.input[disabled], [disabled].textarea, .input.is-disabled, .is-disabled.textarea { +.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, [disabled].textarea::-moz-placeholder, .input.is-disabled::-moz-placeholder, .is-disabled.textarea::-moz-placeholder { +.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, [disabled].textarea::-webkit-input-placeholder, .input.is-disabled::-webkit-input-placeholder, .is-disabled.textarea::-webkit-input-placeholder { +.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, [disabled].textarea:-moz-placeholder, .input.is-disabled:-moz-placeholder, .is-disabled.textarea:-moz-placeholder { +.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, [disabled].textarea:-ms-input-placeholder, .input.is-disabled:-ms-input-placeholder, .is-disabled.textarea:-ms-input-placeholder { +.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, .is-white.textarea { +.input.is-white, +.textarea.is-white { border-color: white; } -.input.is-black, .is-black.textarea { +.input.is-black, +.textarea.is-black { border-color: #121212; } -.input.is-light, .is-light.textarea { +.input.is-light, +.textarea.is-light { border-color: whitesmoke; } -.input.is-dark, .is-dark.textarea { +.input.is-dark, +.textarea.is-dark { border-color: #7a7a7a; } -.input.is-primary, .is-primary.textarea { +.input.is-primary, +.textarea.is-primary { border-color: #11e4c4; } -.input.is-info, .is-info.textarea { +.input.is-info, +.textarea.is-info { border-color: #0f6bff; } -.input.is-success, .is-success.textarea { +.input.is-success, +.textarea.is-success { border-color: #20ee68; } -.input.is-warning, .is-warning.textarea { +.input.is-warning, +.textarea.is-warning { border-color: #ffcf0f; } -.input.is-danger, .is-danger.textarea { +.input.is-danger, +.textarea.is-danger { border-color: #ff0f3f; } -.input[type="search"], [type="search"].textarea { +.input[type="search"], +.textarea[type="search"] { border-radius: 290486px; } -.input.is-small, .is-small.textarea { +.input.is-small, +.textarea.is-small { border-radius: 2px; font-size: 11px; height: 24px; @@ -2572,7 +2055,8 @@ a.box:active { padding-right: 6px; } -.input.is-medium, .is-medium.textarea { +.input.is-medium, +.textarea.is-medium { font-size: 18px; height: 40px; line-height: 32px; @@ -2580,7 +2064,8 @@ a.box:active { padding-right: 10px; } -.input.is-large, .is-large.textarea { +.input.is-large, +.textarea.is-large { font-size: 24px; height: 48px; line-height: 40px; @@ -2588,12 +2073,14 @@ a.box:active { padding-right: 12px; } -.input.is-fullwidth, .is-fullwidth.textarea { +.input.is-fullwidth, +.textarea.is-fullwidth { display: block; width: 100%; } -.input.is-inline, .is-inline.textarea { +.input.is-inline, +.textarea.is-inline { display: inline; width: auto; } @@ -2648,21 +2135,15 @@ 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; color: #242424; - 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; + justify-content: flex-start; line-height: 24px; padding-left: 8px; padding-right: 8px; @@ -2767,8 +2248,7 @@ 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; right: 16px; @@ -2879,13 +2359,9 @@ a.box:active { @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; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; margin-right: 20px; padding-top: 7px; text-align: right; @@ -2902,17 +2378,12 @@ 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, .control.has-addons .input, -.control.has-addons .textarea, .control.has-addons .select { border-radius: 0; margin-right: -1px; @@ -2921,16 +2392,13 @@ a.box:active { .control.has-addons .button:hover, .control.has-addons .input:hover, -.control.has-addons .textarea:hover, .control.has-addons .select:hover { z-index: 2; } .control.has-addons .button:active, .control.has-addons .button:focus, .control.has-addons .input:active, -.control.has-addons .textarea:active, .control.has-addons .input:focus, -.control.has-addons .textarea:focus, .control.has-addons .select:active, .control.has-addons .select:focus { z-index: 3; @@ -2938,64 +2406,48 @@ a.box:active { .control.has-addons .button:first-child, .control.has-addons .input:first-child, -.control.has-addons .textarea:first-child, .control.has-addons .select:first-child { border-radius: 3px 0 0 3px; } .control.has-addons .button:first-child select, .control.has-addons .input:first-child select, -.control.has-addons .textarea:first-child select, .control.has-addons .select:first-child select { border-radius: 3px 0 0 3px; } .control.has-addons .button:last-child, .control.has-addons .input:last-child, -.control.has-addons .textarea:last-child, .control.has-addons .select:last-child { border-radius: 0 3px 3px 0; } .control.has-addons .button:last-child select, .control.has-addons .input:last-child select, -.control.has-addons .textarea:last-child select, .control.has-addons .select:last-child select { border-radius: 0 3px 3px 0; } .control.has-addons .button.is-expanded, .control.has-addons .input.is-expanded, -.control.has-addons .is-expanded.textarea, .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 .textarea, .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 { @@ -3013,21 +2465,21 @@ a.box:active { z-index: 4; } -.control.has-icon .input:focus + .fa, .control.has-icon .textarea:focus + .fa { +.control.has-icon .input:focus + .fa { color: #242424; } -.control.has-icon .input.is-small + .fa, .control.has-icon .is-small.textarea + .fa { +.control.has-icon .input.is-small + .fa { font-size: 10.5px; top: 0; } -.control.has-icon .input.is-medium + .fa, .control.has-icon .is-medium.textarea + .fa { +.control.has-icon .input.is-medium + .fa { font-size: 21px; top: 8px; } -.control.has-icon .input.is-large + .fa, .control.has-icon .is-large.textarea + .fa { +.control.has-icon .input.is-large + .fa { font-size: 21px; top: 12px; } @@ -3036,31 +2488,31 @@ a.box:active { left: 4px; } -.control.has-icon:not(.has-icon-right) .input, .control.has-icon:not(.has-icon-right) .textarea { +.control.has-icon:not(.has-icon-right) .input { padding-left: 32px; } -.control.has-icon:not(.has-icon-right) .input.is-small, .control.has-icon:not(.has-icon-right) .is-small.textarea { +.control.has-icon:not(.has-icon-right) .input.is-small { padding-left: 24px; } -.control.has-icon:not(.has-icon-right) .input.is-small + .fa, .control.has-icon:not(.has-icon-right) .is-small.textarea + .fa { +.control.has-icon:not(.has-icon-right) .input.is-small + .fa { left: 0; } -.control.has-icon:not(.has-icon-right) .input.is-medium, .control.has-icon:not(.has-icon-right) .is-medium.textarea { +.control.has-icon:not(.has-icon-right) .input.is-medium { padding-left: 40px; } -.control.has-icon:not(.has-icon-right) .input.is-medium + .fa, .control.has-icon:not(.has-icon-right) .is-medium.textarea + .fa { +.control.has-icon:not(.has-icon-right) .input.is-medium + .fa { left: 8px; } -.control.has-icon:not(.has-icon-right) .input.is-large, .control.has-icon:not(.has-icon-right) .is-large.textarea { +.control.has-icon:not(.has-icon-right) .input.is-large { padding-left: 48px; } -.control.has-icon:not(.has-icon-right) .input.is-large + .fa, .control.has-icon:not(.has-icon-right) .is-large.textarea + .fa { +.control.has-icon:not(.has-icon-right) .input.is-large + .fa { left: 12px; } @@ -3068,41 +2520,37 @@ a.box:active { right: 4px; } -.control.has-icon.has-icon-right .input, .control.has-icon.has-icon-right .textarea { +.control.has-icon.has-icon-right .input { padding-right: 32px; } -.control.has-icon.has-icon-right .input.is-small, .control.has-icon.has-icon-right .is-small.textarea { +.control.has-icon.has-icon-right .input.is-small { padding-right: 24px; } -.control.has-icon.has-icon-right .input.is-small + .fa, .control.has-icon.has-icon-right .is-small.textarea + .fa { +.control.has-icon.has-icon-right .input.is-small + .fa { right: 0; } -.control.has-icon.has-icon-right .input.is-medium, .control.has-icon.has-icon-right .is-medium.textarea { +.control.has-icon.has-icon-right .input.is-medium { padding-right: 40px; } -.control.has-icon.has-icon-right .input.is-medium + .fa, .control.has-icon.has-icon-right .is-medium.textarea + .fa { +.control.has-icon.has-icon-right .input.is-medium + .fa { right: 8px; } -.control.has-icon.has-icon-right .input.is-large, .control.has-icon.has-icon-right .is-large.textarea { +.control.has-icon.has-icon-right .input.is-large { padding-right: 48px; } -.control.has-icon.has-icon-right .input.is-large + .fa, .control.has-icon.has-icon-right .is-large.textarea + .fa { +.control.has-icon.has-icon-right .input.is-large + .fa { right: 12px; } .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) { @@ -3111,42 +2559,27 @@ a.box:active { } .control.is-grouped > .control.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.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; } } @@ -3232,36 +2665,141 @@ a.box:active { width: 128px; } -.block:not(:last-child), .highlight:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), +.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; } -.container { +.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; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.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%; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.modal-close:before { + transform: rotate(45deg); } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.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; } .notification { @@ -3277,7 +2815,7 @@ a.box:active { display: table; } -.notification .delete, .notification .modal-close { +.notification .delete { border-radius: 0 3px; float: right; margin: -16px -20px 0 20px; @@ -3333,36 +2871,141 @@ a.box:active { color: white; } -.block:not(:last-child), .highlight:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), +.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; } -.container { +.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; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.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; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.is-active.nav-toggle span:nth-child(3) { + margin-left: -5px; + transform: rotate(-45deg); + transform-origin: left bottom; } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.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 { @@ -3619,36 +3262,141 @@ a.box:active { background-color: #f0f0f0; } -.block:not(:last-child), .highlight:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), +.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; } -.container { +.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; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.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%; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.modal-close:before { + transform: rotate(45deg); } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.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; } .title, @@ -3842,11 +3590,6 @@ a.box:active { font-weight: 700; } -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - .container { position: relative; } @@ -3874,62 +3617,6 @@ a.box:active { vertical-align: top; } -.delete, .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; -} - -.delete:before, .modal-close:before, .delete:after, .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%; -} - -.delete:before, .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.delete:after, .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.delete:hover, .modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.delete.is-small, .is-small.modal-close { - height: 16px; - width: 16px; -} - -.delete.is-medium, .is-medium.modal-close { - height: 32px; - width: 32px; -} - -.delete.is-large, .is-large.modal-close { - height: 40px; - width: 40px; -} - .icon { display: inline-block; font-size: 21px; @@ -3937,107 +3624,42 @@ a.box:active { 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; -} - -.hamburger, .nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.hamburger span, .nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - 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; -} - -.hamburger span:nth-child(1), .nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.hamburger span:nth-child(2), .nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.hamburger span:nth-child(3), .nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.hamburger:hover, .nav-toggle:hover { - background-color: whitesmoke; + width: 24px; } -.hamburger.is-active span, .is-active.nav-toggle span { - background-color: #11e4c4; +.icon .fa { + font-size: inherit; + line-height: inherit; } -.hamburger.is-active span:nth-child(1), .is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: left top; - transform-origin: left top; +.icon.is-small { + display: inline-block; + font-size: 14px; + height: 16px; + line-height: 16px; + text-align: center; + vertical-align: top; + width: 16px; } -.hamburger.is-active span:nth-child(2), .is-active.nav-toggle span:nth-child(2) { - opacity: 0; +.icon.is-medium { + display: inline-block; + font-size: 28px; + height: 32px; + line-height: 32px; + text-align: center; + vertical-align: top; + width: 32px; } -.hamburger.is-active span:nth-child(3), .is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; +.icon.is-large { + display: inline-block; + font-size: 42px; + height: 48px; + line-height: 48px; + text-align: center; + vertical-align: top; + width: 48px; } .heading { @@ -4061,20 +3683,6 @@ a.box:active { max-width: 100%; } -.loader, .button.is-loading:after, .control.is-loading:after { - -webkit-animation: spin-around 500ms infinite linear; - 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; @@ -4084,20 +3692,14 @@ a.box:active { } .tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; color: #7a7a7a; - 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; @@ -4105,7 +3707,7 @@ a.box:active { white-space: nowrap; } -.tag .delete, .tag .modal-close { +.tag .delete { margin-left: 4px; margin-right: -6px; } @@ -4177,57 +3779,32 @@ a.box:active { padding-right: 18px; } -.tag.is-large .delete, .tag.is-large .modal-close { +.tag.is-large .delete { margin-left: 4px; margin-right: -8px; } -.unselectable, .delete, .modal-close, .is-unselectable, .button, .tabs, .highlight .copy, -.highlight .expand { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - .card-header { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; box-shadow: 0 1px 2px rgba(18, 18, 18, 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: #242424; - 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; } @@ -4246,27 +3823,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; } @@ -4296,61 +3861,43 @@ a.box:active { } .column { - -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%; } @@ -4375,9 +3922,7 @@ a.box:active { } .columns.is-mobile > .column.is-1 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } @@ -4386,9 +3931,7 @@ a.box:active { } .columns.is-mobile > .column.is-2 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } @@ -4397,9 +3940,7 @@ a.box:active { } .columns.is-mobile > .column.is-3 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } @@ -4408,9 +3949,7 @@ a.box:active { } .columns.is-mobile > .column.is-4 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } @@ -4419,9 +3958,7 @@ a.box:active { } .columns.is-mobile > .column.is-5 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } @@ -4430,9 +3967,7 @@ a.box:active { } .columns.is-mobile > .column.is-6 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } @@ -4441,9 +3976,7 @@ a.box:active { } .columns.is-mobile > .column.is-7 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } @@ -4452,9 +3985,7 @@ a.box:active { } .columns.is-mobile > .column.is-8 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } @@ -4463,9 +3994,7 @@ a.box:active { } .columns.is-mobile > .column.is-9 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } @@ -4474,9 +4003,7 @@ a.box:active { } .columns.is-mobile > .column.is-10 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } @@ -4485,9 +4012,7 @@ a.box:active { } .columns.is-mobile > .column.is-11 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } @@ -4496,9 +4021,7 @@ a.box:active { } .columns.is-mobile > .column.is-12 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } @@ -4508,44 +4031,30 @@ a.box:active { @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 { @@ -4564,108 +4073,84 @@ a.box:active { 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 { @@ -4675,44 +4160,30 @@ a.box:active { @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 { @@ -4731,108 +4202,84 @@ a.box:active { 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 { @@ -4842,44 +4289,30 @@ a.box:active { @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 { @@ -4898,108 +4331,84 @@ a.box:active { 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 { @@ -5009,44 +4418,30 @@ a.box:active { @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 { @@ -5065,108 +4460,84 @@ a.box:active { 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 { @@ -5189,9 +4560,7 @@ a.box:active { } .columns.is-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .columns.is-gapless { @@ -5215,8 +4584,7 @@ a.box:active { @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%; @@ -5229,53 +4597,34 @@ a.box:active { } .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; - -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; + align-items: stretch; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; min-height: min-content; } @@ -5302,10 +4651,7 @@ a.box:active { } .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) { @@ -5314,80 +4660,54 @@ a.box:active { @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%; } } @@ -5617,36 +4937,141 @@ a.box:active { color: #2aa198; } -.block:not(:last-child), .highlight:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), +.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; } -.container { +.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; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.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%; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.modal-close:before { + transform: rotate(45deg); } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.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; } .level-item .title, @@ -5667,9 +5092,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) { @@ -5680,37 +5103,22 @@ 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 code { @@ -5723,8 +5131,6 @@ a.box:active { } .level.is-mobile { - display: -webkit-box; - display: -ms-flexbox; display: flex; } @@ -5733,21 +5139,15 @@ 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; } } @@ -5785,20 +5185,13 @@ a.box:active { } .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; } @@ -5809,8 +5202,6 @@ a.box:active { .media .media { border-top: 1px solid rgba(219, 219, 219, 0.5); - display: -webkit-box; - display: -ms-flexbox; display: flex; padding-top: 10px; } @@ -5834,87 +5225,192 @@ a.box:active { padding-top: 10px; } -.media.is-large + .media { - margin-top: 20px; - padding-top: 20px; +.media.is-large + .media { + margin-top: 20px; + padding-top: 20px; +} + +@media screen and (min-width: 769px) { + .media.is-large .media-number { + margin-right: 20px; + } +} + +.menu-nav a { + display: block; + padding: 5px 10px; +} + +.menu-list a { + border-radius: 2px; + color: #7a7a7a; + display: block; + padding: 5px 10px; +} + +.menu-list a:hover { + background-color: whitesmoke; + color: #11e4c4; +} + +.menu-list a.is-active { + background-color: #11e4c4; + color: white; +} + +.menu-list li ul { + border-left: 1px solid #dbdbdb; + margin: 10px; + padding-left: 10px; +} + +.menu-label { + color: #b5b5b5; + font-size: 11px; + letter-spacing: 1px; + margin-bottom: 5px; + text-transform: uppercase; +} + +.menu-label:not(:first-child) { + 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; } -@media screen and (min-width: 769px) { - .media.is-large .media-number { - margin-right: 20px; - } +.is-large.modal-close { + height: 40px; + width: 40px; } -.menu-nav a { +.nav-toggle { + cursor: pointer; display: block; - padding: 5px 10px; + height: 50px; + position: relative; + width: 50px; } -.menu-list a { - border-radius: 2px; - color: #7a7a7a; +.nav-toggle span { + background-color: #7a7a7a; display: block; - padding: 5px 10px; + height: 1px; + left: 50%; + margin-left: -7px; + position: absolute; + top: 50%; + transition: none 86ms ease-out; + transition-property: background, left, opacity, transform; + width: 15px; } -.menu-list a:hover { - background-color: whitesmoke; - color: #11e4c4; +.nav-toggle span:nth-child(1) { + margin-top: -6px; } -.menu-list a.is-active { - background-color: #11e4c4; - color: white; +.nav-toggle span:nth-child(2) { + margin-top: -1px; } -.menu-list li ul { - border-left: 1px solid #dbdbdb; - margin: 10px; - padding-left: 10px; +.nav-toggle span:nth-child(3) { + margin-top: 4px; } -.menu-label { - color: #b5b5b5; - font-size: 11px; - letter-spacing: 1px; - margin-bottom: 5px; - text-transform: uppercase; +.nav-toggle:hover { + background-color: whitesmoke; } -.menu-label:not(:first-child) { - margin-top: 20px; +.is-active.nav-toggle span { + background-color: #11e4c4; } -.block:not(:last-child), .highlight:not(:last-child), .box: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; +.is-active.nav-toggle span:nth-child(1) { + margin-left: -5px; + transform: rotate(45deg); + transform-origin: left top; } -.container { - position: relative; +.is-active.nav-toggle span:nth-child(2) { + opacity: 0; } -@media screen and (min-width: 980px) { - .container { - margin: 0 auto; - max-width: 960px; - } - .container.is-fluid { - margin: 0 20px; - max-width: none; - } +.is-active.nav-toggle span:nth-child(3) { + margin-left: -5px; + transform: rotate(-45deg); + transform-origin: left bottom; } -@media screen and (min-width: 1180px) { - .container { - max-width: 1200px; - } +.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; } -.fa { - font-size: 21px; - text-align: center; - vertical-align: top; +.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 { @@ -6074,11 +5570,6 @@ a.box:active { color: gray; } -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - .container { position: relative; } @@ -6106,62 +5597,6 @@ a.box:active { vertical-align: top; } -.delete, .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; -} - -.delete:before, .modal-close:before, .delete:after, .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%; -} - -.delete:before, .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.delete:after, .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.delete:hover, .modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.delete.is-small, .is-small.modal-close { - height: 16px; - width: 16px; -} - -.delete.is-medium, .is-medium.modal-close { - height: 32px; - width: 32px; -} - -.delete.is-large, .is-large.modal-close { - height: 40px; - width: 40px; -} - .icon { display: inline-block; font-size: 21px; @@ -6207,71 +5642,6 @@ a.box:active { width: 48px; } -.hamburger, .nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.hamburger span, .nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - 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; -} - -.hamburger span:nth-child(1), .nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.hamburger span:nth-child(2), .nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.hamburger span:nth-child(3), .nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.hamburger:hover, .nav-toggle:hover { - background-color: whitesmoke; -} - -.hamburger.is-active span, .is-active.nav-toggle span { - background-color: #11e4c4; -} - -.hamburger.is-active span:nth-child(1), .is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: left top; - transform-origin: left top; -} - -.hamburger.is-active span:nth-child(2), .is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.hamburger.is-active span:nth-child(3), .is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -} - .heading { display: block; font-size: 11px; @@ -6293,20 +5663,6 @@ a.box:active { max-width: 100%; } -.loader, .button.is-loading:after, .control.is-loading:after { - -webkit-animation: spin-around 500ms infinite linear; - 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; @@ -6316,20 +5672,14 @@ a.box:active { } .tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; color: #7a7a7a; - 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; @@ -6337,7 +5687,7 @@ a.box:active { white-space: nowrap; } -.tag .delete, .tag .modal-close { +.tag .delete { margin-left: 4px; margin-right: -6px; } @@ -6409,20 +5759,11 @@ a.box:active { padding-right: 18px; } -.tag.is-large .delete, .tag.is-large .modal-close { +.tag.is-large .delete { margin-left: 4px; margin-right: -8px; } -.unselectable, .delete, .modal-close, .is-unselectable, .button, .tabs, .highlight .copy, -.highlight .expand { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - .modal-background { bottom: 0; left: 0; @@ -6432,7 +5773,8 @@ a.box:active { background-color: rgba(18, 18, 18, 0.86); } -.modal-content, .modal-card { +.modal-content, +.modal-card { margin: 0 20px; max-height: calc(100vh - 160px); overflow: auto; @@ -6441,7 +5783,8 @@ a.box:active { } @media screen and (min-width: 769px) { - .modal-content, .modal-card { + .modal-content, + .modal-card { margin: 0 auto; max-height: calc(100vh - 40px); width: 640px; @@ -6458,31 +5801,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; } @@ -6495,11 +5826,8 @@ a.box:active { .modal-card-title { color: #242424; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; font-size: 24px; line-height: 1; } @@ -6516,11 +5844,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; } @@ -6531,30 +5856,18 @@ 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; } -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - .container { position: relative; } @@ -6566,76 +5879,20 @@ a.box:active { } .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; -} - -.delete, .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; -} - -.delete:before, .modal-close:before, .delete:after, .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%; -} - -.delete:before, .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.delete:after, .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.delete:hover, .modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); -} - -.delete.is-small, .is-small.modal-close { - height: 16px; - width: 16px; + max-width: none; + } } -.delete.is-medium, .is-medium.modal-close { - height: 32px; - width: 32px; +@media screen and (min-width: 1180px) { + .container { + max-width: 1200px; + } } -.delete.is-large, .is-large.modal-close { - height: 40px; - width: 40px; +.fa { + font-size: 21px; + text-align: center; + vertical-align: top; } .icon { @@ -6683,71 +5940,6 @@ a.box:active { width: 48px; } -.hamburger, .nav-toggle { - cursor: pointer; - display: block; - height: 50px; - position: relative; - width: 50px; -} - -.hamburger span, .nav-toggle span { - background-color: #7a7a7a; - display: block; - height: 1px; - left: 50%; - 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; -} - -.hamburger span:nth-child(1), .nav-toggle span:nth-child(1) { - margin-top: -6px; -} - -.hamburger span:nth-child(2), .nav-toggle span:nth-child(2) { - margin-top: -1px; -} - -.hamburger span:nth-child(3), .nav-toggle span:nth-child(3) { - margin-top: 4px; -} - -.hamburger:hover, .nav-toggle:hover { - background-color: whitesmoke; -} - -.hamburger.is-active span, .is-active.nav-toggle span { - background-color: #11e4c4; -} - -.hamburger.is-active span:nth-child(1), .is-active.nav-toggle span:nth-child(1) { - margin-left: -5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: left top; - transform-origin: left top; -} - -.hamburger.is-active span:nth-child(2), .is-active.nav-toggle span:nth-child(2) { - opacity: 0; -} - -.hamburger.is-active span:nth-child(3), .is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; -} - .heading { display: block; font-size: 11px; @@ -6769,20 +5961,6 @@ a.box:active { max-width: 100%; } -.loader, .button.is-loading:after, .control.is-loading:after { - -webkit-animation: spin-around 500ms infinite linear; - 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; @@ -6792,20 +5970,14 @@ a.box:active { } .tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; color: #7a7a7a; - 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; @@ -6813,7 +5985,7 @@ a.box:active { white-space: nowrap; } -.tag .delete, .tag .modal-close { +.tag .delete { margin-left: 4px; margin-right: -6px; } @@ -6885,20 +6057,11 @@ a.box:active { padding-right: 18px; } -.tag.is-large .delete, .tag.is-large .modal-close { +.tag.is-large .delete { margin-left: 4px; margin-right: -8px; } -.unselectable, .delete, .modal-close, .is-unselectable, .button, .tabs, .highlight .copy, -.highlight .expand { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - @media screen and (min-width: 769px) { .nav-toggle { display: none; @@ -6906,24 +6069,15 @@ 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-pack: center; - -ms-flex-pack: center; - justify-content: center; + 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 { @@ -6944,9 +6098,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; } } @@ -7012,69 +6164,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; @@ -7083,11 +6205,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%; @@ -7121,15 +6239,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; } @@ -7150,26 +6262,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); @@ -7178,11 +6280,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; @@ -7191,9 +6290,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; } } @@ -7234,14 +6331,10 @@ a.nav-item.is-tab.is-active { } .panel-tabs { - display: -webkit-box; - display: -ms-flexbox; display: flex; font-size: 11px; padding: 5px 10px 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .panel-tabs a { @@ -7283,71 +6376,12 @@ a.panel-block:hover { margin-bottom: 20px; } -.block:not(:last-child), .highlight:not(:last-child), .box: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; -} - -.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; -} - -.block:not(:last-child), .highlight:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .title:not(:last-child), +.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; } -.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; -} - -.delete, .modal-close { +.modal-close { -moz-appearance: none; -webkit-appearance: none; background-color: rgba(18, 18, 18, 0.2); @@ -7361,7 +6395,7 @@ a.panel-block:hover { width: 24px; } -.delete:before, .modal-close:before, .delete:after, .modal-close:after { +.modal-close:before, .modal-close:after { background-color: white; content: ""; display: block; @@ -7374,81 +6408,34 @@ a.panel-block:hover { width: 50%; } -.delete:before, .modal-close:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); +.modal-close:before { + transform: rotate(45deg); } -.delete:after, .modal-close:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); +.modal-close:after { + transform: rotate(-45deg); } -.delete:hover, .modal-close:hover { +.modal-close:hover { background-color: rgba(18, 18, 18, 0.5); } -.delete.is-small, .is-small.modal-close { +.is-small.modal-close { height: 16px; width: 16px; } -.delete.is-medium, .is-medium.modal-close { +.is-medium.modal-close { height: 32px; width: 32px; } -.delete.is-large, .is-large.modal-close { +.is-large.modal-close { height: 40px; width: 40px; } -.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; -} - -.hamburger, .nav-toggle { +.nav-toggle { cursor: pointer; display: block; height: 50px; @@ -7456,7 +6443,7 @@ a.panel-block:hover { width: 50px; } -.hamburger span, .nav-toggle span { +.nav-toggle span { background-color: #7a7a7a; display: block; height: 1px; @@ -7464,53 +6451,138 @@ a.panel-block:hover { 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; } -.hamburger span:nth-child(1), .nav-toggle span:nth-child(1) { +.nav-toggle span:nth-child(1) { margin-top: -6px; } -.hamburger span:nth-child(2), .nav-toggle span:nth-child(2) { +.nav-toggle span:nth-child(2) { margin-top: -1px; } -.hamburger span:nth-child(3), .nav-toggle span:nth-child(3) { +.nav-toggle span:nth-child(3) { margin-top: 4px; } -.hamburger:hover, .nav-toggle:hover { +.nav-toggle:hover { background-color: whitesmoke; } -.hamburger.is-active span, .is-active.nav-toggle span { +.is-active.nav-toggle span { background-color: #11e4c4; } -.hamburger.is-active span:nth-child(1), .is-active.nav-toggle span:nth-child(1) { +.is-active.nav-toggle 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; } -.hamburger.is-active span:nth-child(2), .is-active.nav-toggle span:nth-child(2) { +.is-active.nav-toggle span:nth-child(2) { opacity: 0; } -.hamburger.is-active span:nth-child(3), .is-active.nav-toggle span:nth-child(3) { - margin-left: -5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: left bottom; - transform-origin: left bottom; +.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; +} + +.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 { @@ -7534,20 +6606,6 @@ a.panel-block:hover { max-width: 100%; } -.loader, .button.is-loading:after, .control.is-loading:after { - -webkit-animation: spin-around 500ms infinite linear; - 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; @@ -7557,20 +6615,14 @@ a.panel-block:hover { } .tag { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; color: #7a7a7a; - 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; @@ -7578,7 +6630,7 @@ a.panel-block:hover { white-space: nowrap; } -.tag .delete, .tag .modal-close { +.tag .delete { margin-left: 4px; margin-right: -6px; } @@ -7650,30 +6702,15 @@ a.panel-block:hover { padding-right: 18px; } -.tag.is-large .delete, .tag.is-large .modal-close { +.tag.is-large .delete { margin-left: 4px; margin-right: -8px; } -.unselectable, .delete, .modal-close, .is-unselectable, .button, .tabs, .highlight .copy, -.highlight .expand { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - .tabs { - -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; @@ -7681,17 +6718,11 @@ a.panel-block:hover { } .tabs a { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; border-bottom: 1px solid #dbdbdb; color: #7a7a7a; - 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; @@ -7712,21 +6743,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 { @@ -7734,20 +6756,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; } @@ -7760,15 +6776,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 { @@ -7790,11 +6802,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 { @@ -7888,8 +6897,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 { @@ -7908,8 +6916,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) { @@ -7919,12 +6925,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; @@ -7933,16 +6935,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; } @@ -7954,20 +6952,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 { @@ -8051,7 +7040,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%); } @@ -8142,7 +7130,6 @@ a.panel-block:hover { } .hero.is-black.is-bold { - background-image: -webkit-linear-gradient(309deg, black 0%, #121212 71%, #201d1d 100%); background-image: linear-gradient(141deg, black 0%, #121212 71%, #201d1d 100%); } @@ -8233,7 +7220,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%); } @@ -8324,7 +7310,6 @@ a.panel-block:hover { } .hero.is-dark.is-bold { - background-image: -webkit-linear-gradient(309deg, #6b5757 0%, #7a7a7a 71%, #8d8181 100%); background-image: linear-gradient(141deg, #6b5757 0%, #7a7a7a 71%, #8d8181 100%); } @@ -8415,7 +7400,6 @@ a.panel-block:hover { } .hero.is-primary.is-bold { - background-image: -webkit-linear-gradient(309deg, #04be83 0%, #11e4c4 71%, #1af1f4 100%); background-image: linear-gradient(141deg, #04be83 0%, #11e4c4 71%, #1af1f4 100%); } @@ -8506,7 +7490,6 @@ a.panel-block:hover { } .hero.is-info.is-bold { - background-image: -webkit-linear-gradient(309deg, #0079db 0%, #0f6bff 71%, #2957ff 100%); background-image: linear-gradient(141deg, #0079db 0%, #0f6bff 71%, #2957ff 100%); } @@ -8597,7 +7580,6 @@ a.panel-block:hover { } .hero.is-success.is-bold { - background-image: -webkit-linear-gradient(309deg, #04d72b 0%, #20ee68 71%, #32f597 100%); background-image: linear-gradient(141deg, #04d72b 0%, #20ee68 71%, #32f597 100%); } @@ -8688,7 +7670,6 @@ a.panel-block:hover { } .hero.is-warning.is-bold { - background-image: -webkit-linear-gradient(309deg, #db8b00 0%, #ffcf0f 71%, #fff829 100%); background-image: linear-gradient(141deg, #db8b00 0%, #ffcf0f 71%, #fff829 100%); } @@ -8779,7 +7760,6 @@ a.panel-block:hover { } .hero.is-danger.is-bold { - background-image: -webkit-linear-gradient(309deg, #db0050 0%, #ff0f3f 71%, #ff2930 100%); background-image: linear-gradient(141deg, #db0050 0%, #ff0f3f 71%, #ff2930 100%); } @@ -8817,20 +7797,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: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .section { @@ -8867,382 +7840,3 @@ a.panel-block:hover { .footer a:not(.icon):hover, .footer a:visited:not(.icon):hover { border-bottom-color: #11e4c4; } - -@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-bottom: 5px; - 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 { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 20px; - margin-bottom: 1em; - -webkit-box-pack: center; - -ms-flex-pack: center; - 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: white; - 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; - -webkit-box-align: center; - -ms-flex-align: 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; - padding: 3px 5px; - z-index: 2; -} - -.structure-item.is-structure-container { - padding: 20px 10px 10px; -} - -.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; - padding: 5px 10px; -} - -.highlight { - position: relative; -} - -.highlight .copy, -.highlight .expand { - 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, #newsletter .textarea { - border-color: white; - box-shadow: none; -} diff --git a/sass/base/base.sass b/sass/base/base.sass index 8e0f5a55f..40bf3e348 100644 --- a/sass/base/base.sass +++ b/sass/base/base.sass @@ -1,5 +1,4 @@ @charset "utf-8" @import "generic" -@import "classes" @import "helpers" diff --git a/sass/base/classes.sass b/sass/base/classes.sass deleted file mode 100644 index 0fc1b4faf..000000000 --- a/sass/base/classes.sass +++ /dev/null @@ -1,22 +0,0 @@ -@import "../utilities/mixins.sass" - -.block - &:not(:last-child) - margin-bottom: 20px - -.container - position: relative - +desktop - margin: 0 auto - max-width: 960px - // Modifiers - &.is-fluid - margin: 0 20px - max-width: none - +widescreen - max-width: 1200px - -.fa - font-size: 21px - text-align: center - vertical-align: top diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass index 6735bd59d..57be4a99e 100644 --- a/sass/base/helpers.sass +++ b/sass/base/helpers.sass @@ -1,4 +1,4 @@ -@import "../elements/other.sass" +@import "./placeholders.sass" @import "../utilities/mixins.sass" // Display @@ -107,4 +107,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' padding: 0 !important .is-unselectable - @extend .unselectable + @extend %unselectable diff --git a/sass/base/placeholders.sass b/sass/base/placeholders.sass new file mode 100644 index 000000000..0b70241a7 --- /dev/null +++ b/sass/base/placeholders.sass @@ -0,0 +1,107 @@ +@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 9cea3e192..b2b3cd236 100644 --- a/sass/components/level.sass +++ b/sass/components/level.sass @@ -1,4 +1,4 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" @@ -37,7 +37,7 @@ justify-content: flex-end .level - @extend .block + @extend %block align-items: center justify-content: space-between code diff --git a/sass/components/message.sass b/sass/components/message.sass index f4e2cf684..fb7eda512 100644 --- a/sass/components/message.sass +++ b/sass/components/message.sass @@ -1,4 +1,4 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/functions.sass" @import "../utilities/variables.sass" @@ -21,7 +21,7 @@ border-top: none .message - @extend .block + @extend %block background-color: $background border-radius: $radius // Colors diff --git a/sass/components/modal.sass b/sass/components/modal.sass index e8c82cef9..c0c6ba83a 100644 --- a/sass/components/modal.sass +++ b/sass/components/modal.sass @@ -1,4 +1,4 @@ -@import "../elements/other.sass" +@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" @@ -6,7 +6,8 @@ +overlay background-color: rgba($black, 0.86) -.modal-content +.modal-content, +.modal-card margin: 0 20px max-height: calc(100vh - 160px) overflow: auto @@ -19,7 +20,7 @@ width: 640px .modal-close - @extend .delete + @extend %delete background: none height: 40px position: fixed @@ -28,7 +29,6 @@ width: 40px .modal-card - @extend .modal-content display: flex flex-direction: column max-height: calc(100vh - 40px) diff --git a/sass/components/nav.sass b/sass/components/nav.sass index 1d3a58b4c..09366f8a2 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -1,11 +1,11 @@ -@import "../elements/other.sass" +@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" // Components .nav-toggle - @extend .hamburger + @extend %hamburger // Responsiveness +tablet display: none diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index 751dada92..4115b5a32 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -1,10 +1,9 @@ -@import "../base/classes.sass" -@import "../elements/other.sass" +@import "../base/placeholders.sass" @import "../utilities/variables.sass" .tabs - @extend .block - @extend .unselectable + @extend %block + @extend %unselectable align-items: stretch display: flex justify-content: space-between diff --git a/sass/elements/box.sass b/sass/elements/box.sass index d6e96a630..da9c40d16 100644 --- a/sass/elements/box.sass +++ b/sass/elements/box.sass @@ -1,8 +1,8 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/variables.sass" .box - @extend .block + @extend %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 28bc7ac6e..5acf4dac7 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -1,4 +1,4 @@ -@import "../elements/other.sass" +@import "../base/placeholders.sass" @import "../utilities/controls.sass" @import "../utilities/variables.sass" @@ -22,7 +22,7 @@ .button +control - @extend .unselectable + @extend %unselectable justify-content: center padding-left: 10px padding-right: 10px @@ -109,6 +109,6 @@ color: transparent !important pointer-events: none &:after - @extend .loader + @extend %loader +center(16px) position: absolute !important diff --git a/sass/elements/content.sass b/sass/elements/content.sass index 77eff0986..aa2c78be2 100644 --- a/sass/elements/content.sass +++ b/sass/elements/content.sass @@ -1,8 +1,8 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/variables.sass" .content - @extend .block + @extend %block color: $text // Inline a:not(.button) diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 67664fd08..802d9f007 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -1,4 +1,4 @@ -@import "../elements/other.sass" +@import "../base/placeholders.sass" @import "../utilities/controls.sass" @import "../utilities/mixins.sass" @@ -9,7 +9,8 @@ &.is-#{$name} border-color: $color -.input +.input, +.textarea +form-control box-shadow: inset 0 1px 2px rgba($black, 0.1) max-width: 100% @@ -32,7 +33,6 @@ width: auto .textarea - @extend .input display: block line-height: 1.2 max-height: 600px @@ -257,7 +257,7 @@ flex-shrink: 1 &.is-loading &:after - @extend .loader + @extend %loader position: absolute !important right: 8px top: 8px diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass index 66851189e..bb4d8cfde 100644 --- a/sass/elements/notification.sass +++ b/sass/elements/notification.sass @@ -1,9 +1,9 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" .notification - @extend .block + @extend %block +clearfix background-color: $background border-radius: $radius diff --git a/sass/elements/other.sass b/sass/elements/other.sass index b98bae341..37a0712e2 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -1,48 +1,23 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" -.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 +.container position: relative + +desktop + margin: 0 auto + max-width: 960px + // Modifiers + &.is-fluid + margin: 0 20px + max-width: none + +widescreen + max-width: 1200px + +.fa + font-size: 21px + text-align: center 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 .icon +fa(21px, 24px) @@ -57,46 +32,6 @@ &.is-large +fa(42px, 48px) -.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 - .heading display: block font-size: 11px @@ -105,7 +40,7 @@ text-transform: uppercase .highlight - @extend .block + @extend %block font-size: 12px font-weight: normal max-width: 100% @@ -115,18 +50,6 @@ overflow: auto max-width: 100% -.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 - .number background-color: $background border-radius: 290486px @@ -178,11 +101,3 @@ .delete margin-left: 4px margin-right: -8px - -.unselectable - -webkit-touch-callout: none - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass index c889f30cd..abe79c04b 100644 --- a/sass/elements/progress.sass +++ b/sass/elements/progress.sass @@ -1,8 +1,8 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/variables.sass" .progress - @extend .block + @extend %block -moz-appearance: none -webkit-appearance: none border: none diff --git a/sass/elements/title.sass b/sass/elements/title.sass index c78870a4f..880845b6f 100644 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -1,10 +1,10 @@ -@import "../base/classes.sass" +@import "../base/placeholders.sass" @import "../utilities/mixins.sass" @import "../utilities/variables.sass" .title, .subtitle - @extend .block + @extend %block font-weight: $weight-title-normal word-break: break-word em, diff --git a/sass/utilities/utilities.sass b/sass/utilities/utilities.sass deleted file mode 100644 index 75cda48d6..000000000 --- a/sass/utilities/utilities.sass +++ /dev/null @@ -1,8 +0,0 @@ -@charset "utf-8" - -@import "reset" -@import "functions" -@import "mixins" -@import "animations" -@import "controls" -@import "variables"