From 8508af010aed75e3e18ffefce16fc01b6f731064 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 6 Dec 2022 00:47:43 +0000 Subject: [PATCH] Fix components tests --- docs/css/bulma-docs.css | 1208 ++++++++++++++--------------- docs/css/bulma.css | 1250 +++++++++++++++++++++++-------- sass/base/generic.scss | 93 ++- sass/components/breadcrumb.scss | 41 +- sass/components/card.scss | 88 ++- sass/components/dropdown.scss | 72 +- sass/components/level.scss | 10 +- sass/components/media.scss | 47 +- sass/components/menu.scss | 84 ++- sass/components/message.scss | 82 +- sass/components/modal.scss | 94 ++- sass/components/navbar.scss | 230 +++--- sass/components/pagination.scss | 118 +-- sass/components/panel.scss | 118 +-- sass/components/tabs.scss | 173 +++-- sass/themes/default.scss | 6 + 16 files changed, 2353 insertions(+), 1361 deletions(-) diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index fcf5397f..43bf0ade 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -316,15 +316,42 @@ th:not([align]) { text-align: inherit; } +:root { + --bulma-body-background-color: var(--bulma-scheme-main); + --bulma-body-size: 16px; + --bulma-body-min-width: 300px; + --bulma-body-rendering: optimizeLegibility; + --bulma-body-family: var(--bulma-family-primary); + --bulma-body-overflow-x: hidden; + --bulma-body-overflow-y: scroll; + --bulma-body-color: var(--bulma-text); + --bulma-body-font-size: 1em; + --bulma-body-weight: var(--bulma-weight-normal); + --bulma-body-line-height: 1.5; + --bulma-code-family: var(--bulma-family-code); + --bulma-code-padding: 0.25em 0.5em 0.25em; + --bulma-code-weight: normal; + --bulma-code-size: 0.875em; + --bulma-small-font-size: 0.875em; + --bulma-hr-background-color: var(--bulma-background); + --bulma-hr-height: 2px; + --bulma-hr-margin: 1.5rem 0; + --bulma-strong-color: var(--bulma-text-strong); + --bulma-strong-weight: var(--bulma-weight-bold); + --bulma-pre-font-size: 0.875em; + --bulma-pre-padding: 1.25rem 1.5rem; + --bulma-pre-code-font-size: 1em; +} + html { - background-color: var(--bulma-scheme-main); - font-size: 16px; + background-color: var(--bulma-body-background-color); + font-size: var(--bulma-body-size); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - min-width: 300px; - overflow-x: hidden; - overflow-y: scroll; - text-rendering: optimizeLegibility; + min-width: var(--bulma-body-min-width); + overflow-x: var(--bulma-body-overflow-x); + overflow-y: var(--bulma-body-overflow-y); + text-rendering: var(--bulma-body-rendering); text-size-adjust: 100%; } @@ -344,25 +371,25 @@ input, optgroup, select, textarea { - font-family: var(--bulma-family-primary); + font-family: var(--bulma-body-family); } code, pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; - font-family: var(--bulma-family-code); + font-family: var(--bulma-code-family); } body { - color: var(--bulma-text); - font-size: 1em; - font-weight: var(--bulma-weight-normal); - line-height: 1.5; + color: var(--bulma-body-color); + font-size: var(--bulma-body-font-size); + font-weight: var(--bulma-body-weight); + line-height: var(--bulma-body-line-height); } a { - color: #485fc7; + color: var(--bulma-link); cursor: pointer; text-decoration: none; } @@ -372,23 +399,23 @@ a strong { } a:hover { - color: #363636; + color: var(--bulma-link-hover); } code { - background-color: whitesmoke; - color: #da1039; - font-size: 0.875em; - font-weight: normal; - padding: 0.25em 0.5em 0.25em; + background-color: var(--bulma-code-background); + color: var(--bulma-code); + font-size: var(--bulma-code-size); + font-weight: var(--bulma-code-weight); + padding: var(--bulma-code-padding); } hr { - background-color: var(--bulma-background); + background-color: var(--bulma-hr-background-color); border: none; display: block; - height: 2px; - margin: 1.5rem 0; + height: var(--bulma-hr-height); + margin: var(--bulma-hr-margin); } img { @@ -402,7 +429,7 @@ input[type="radio"] { } small { - font-size: 0.875em; + font-size: var(--bulma-small-font-size); } span { @@ -411,8 +438,8 @@ span { } strong { - color: var(--bulma-text-strong); - font-weight: var(--bulma-weight-bold); + color: var(--bulma-strong-color); + font-weight: var(--bulma-strong-weight); } fieldset { @@ -421,11 +448,11 @@ fieldset { pre { -webkit-overflow-scrolling: touch; - background-color: whitesmoke; - color: #4a4a4a; - font-size: 0.875em; + background-color: var(--bulma-pre-background); + color: var(--bulma-pre); + font-size: var(--bulma-pre-font-size); overflow-x: auto; - padding: 1.25rem 1.5rem; + padding: var(--bulma-pre-padding); white-space: pre; word-wrap: normal; } @@ -433,7 +460,7 @@ pre { pre code { background-color: transparent; color: currentColor; - font-size: 1em; + font-size: var(--bulma-pre-code-font-size); padding: 0; } @@ -448,7 +475,7 @@ table th:not([align]) { } table th { - color: #363636; + color: var(--bulma-text-strong); } @keyframes spinAround { @@ -7188,21 +7215,30 @@ fieldset[disabled] .select select:hover { } /* Bulma Components */ +:root { + --bulma-breadcrumb-item-color: var(--bulma-link); + --bulma-breadcrumb-item-hover-color: var(--bulma-link-hover); + --bulma-breadcrumb-item-active-color: var(--bulma-text-strong); + --bulma-breadcrumb-item-padding-vertical: 0; + --bulma-breadcrumb-item-padding-horizontal: 0.75em; + --bulma-breadcrumb-item-separator-color: var(--bulma-border-hover); +} + .breadcrumb { - font-size: 1rem; + font-size: var(--bulma-size-normal); white-space: nowrap; } .breadcrumb a { align-items: center; - color: #485fc7; + color: var(--bulma-breadcrumb-item-color); display: flex; justify-content: center; - padding: 0 0.75em; + padding: var(--bulma-breadcrumb-item-padding-vertical) var(--bulma-breadcrumb-item-padding-horizontal); } .breadcrumb a:hover { - color: #363636; + color: var(--bulma-breadcrumb-item-hover-color); } .breadcrumb li { @@ -7215,13 +7251,13 @@ fieldset[disabled] .select select:hover { } .breadcrumb li.is-active a { - color: #363636; + color: var(--bulma-breadcrumb-item-active-color); cursor: default; pointer-events: none; } .breadcrumb li + li::before { - color: #b5b5b5; + color: var(--bulma-breadcrumb-item-separator-color); content: "/"; } @@ -7252,15 +7288,15 @@ fieldset[disabled] .select select:hover { } .breadcrumb.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .breadcrumb.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .breadcrumb.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .breadcrumb.has-arrow-separator li + li::before { @@ -7280,38 +7316,38 @@ fieldset[disabled] .select select:hover { } .card { - background-color: white; - border-radius: 0.25rem; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); - color: #4a4a4a; + background-color: var(--bulma-card-background-color); + border-radius: var(--bulma-card-radius); + box-shadow: var(--bulma-card-shadow); + color: var(--bulma-card-color); max-width: 100%; position: relative; } .card-header:first-child, .card-content:first-child, .card-footer:first-child { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-top-left-radius: var(--bulma-card-radius); + border-top-right-radius: var(--bulma-card-radius); } .card-header:last-child, .card-content:last-child, .card-footer:last-child { - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: var(--bulma-card-radius); + border-bottom-right-radius: var(--bulma-card-radius); } .card-header { - background-color: transparent; + background-color: var(--bulma-card-header-background-color); align-items: stretch; - box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); + box-shadow: var(--bulma-card-header-shadow); display: flex; } .card-header-title { align-items: center; - color: #363636; + color: var(--bulma-card-header-color); display: flex; flex-grow: 1; - font-weight: 700; - padding: 0.75rem 1rem; + font-weight: var(--bulma-card-header-weight); + padding: var(--bulma-card-header-padding); } .card-header-title.is-centered { @@ -7333,7 +7369,7 @@ fieldset[disabled] .select select:hover { cursor: pointer; display: flex; justify-content: center; - padding: 0.75rem 1rem; + padding: var(--bulma-card-header-padding); } .card-image { @@ -7342,23 +7378,23 @@ fieldset[disabled] .select select:hover { } .card-image:first-child img { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-top-left-radius: var(--bulma-card-radius); + border-top-right-radius: var(--bulma-card-radius); } .card-image:last-child img { - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: var(--bulma-card-radius); + border-bottom-right-radius: var(--bulma-card-radius); } .card-content { - background-color: transparent; - padding: 1.5rem; + background-color: var(--bulma-card-content-background-color); + padding: var(--bulma-card-content-padding); } .card-footer { - background-color: transparent; - border-top: 1px solid #ededed; + background-color: var(--bulma-card-footer-background-color); + border-top: var(--bulma-card-footer-border-top); align-items: stretch; display: flex; } @@ -7370,15 +7406,15 @@ fieldset[disabled] .select select:hover { flex-grow: 1; flex-shrink: 0; justify-content: center; - padding: 0.75rem; + padding: var(--bulma-card-footer-padding); } .card-footer-item:not(:last-child) { - border-right: 1px solid #ededed; + border-right: var(--bulma-card-footer-border-top); } .card .media:not(:last-child) { - margin-bottom: 1.5rem; + margin-bottom: var(--bulma-card-media-margin); } .dropdown { @@ -7398,7 +7434,7 @@ fieldset[disabled] .select select:hover { .dropdown.is-up .dropdown-menu { bottom: 100%; - padding-bottom: 4px; + padding-bottom: var(--bulma-dropdown-content-offset); padding-top: initial; top: auto; } @@ -7406,23 +7442,23 @@ fieldset[disabled] .select select:hover { .dropdown-menu { display: none; left: 0; - min-width: 12rem; - padding-top: 4px; + min-width: var(--bulma-dropdown-menu-min-width); + padding-top: var(--bulma-dropdown-content-offset); position: absolute; top: 100%; - z-index: 20; + z-index: var(--bulma-dropdown-content-z); } .dropdown-content { - background-color: white; - border-radius: 0.375em; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); - padding-bottom: 0.5rem; - padding-top: 0.5rem; + background-color: var(--bulma-dropdown-content-background-color); + border-radius: var(--bulma-dropdown-content-radius); + box-shadow: var(--bulma-dropdown-content-shadow); + padding-bottom: var(--bulma-dropdown-content-padding-bottom); + padding-top: var(--bulma-dropdown-content-padding-top); } .dropdown-item { - color: #4a4a4a; + color: var(--bulma-dropdown-item-color); display: block; font-size: 0.875rem; line-height: 1.5; @@ -7440,18 +7476,18 @@ button.dropdown-item { a.dropdown-item:hover, button.dropdown-item:hover { - background-color: whitesmoke; - color: #0a0a0a; + background-color: var(--bulma-dropdown-item-hover-background-color); + color: var(--bulma-dropdown-item-hover-color); } a.dropdown-item.is-active, button.dropdown-item.is-active { - background-color: #485fc7; - color: #fff; + background-color: var(--bulma-dropdown-item-active-background-color); + color: var(--bulma-dropdown-item-active-color); } .dropdown-divider { - background-color: #ededed; + background-color: var(--bulma-dropdown-divider-background-color); border: none; display: block; height: 1px; @@ -7464,7 +7500,7 @@ button.dropdown-item.is-active { } .level code { - border-radius: 0.375em; + border-radius: var(--bulma-radius); } .level img { @@ -7487,7 +7523,7 @@ button.dropdown-item.is-active { .level.is-mobile .level-item:not(:last-child) { margin-bottom: 0; - margin-right: 0.75rem; + margin-right: var(--bulma-level-item-spacing); } .level.is-mobile .level-item:not(.is-narrow) { @@ -7519,7 +7555,7 @@ button.dropdown-item.is-active { @media screen and (max-width: 768px) { .level-item:not(:last-child) { - margin-bottom: 0.75rem; + margin-bottom: var(--bulma-level-item-spacing); } } @@ -7538,7 +7574,7 @@ button.dropdown-item.is-active { @media screen and (min-width: 769px), print { .level-left .level-item:not(:last-child), .level-right .level-item:not(:last-child) { - margin-right: 0.75rem; + margin-right: var(--bulma-level-item-spacing); } } @@ -7577,37 +7613,41 @@ button.dropdown-item.is-active { } .media .content:not(:last-child) { - margin-bottom: 0.75rem; + margin-bottom: var(--bulma-media-content-spacing); } .media .media { - border-top: 1px solid rgba(219, 219, 219, 0.5); + border-top-color: var(--bulma-media-border-color); + border-top-size: var(--bulma-media-border-size); + border-top-style: solid; display: flex; - padding-top: 0.75rem; + padding-top: var(--bulma-media-level-1-spacing); } .media .media .content:not(:last-child), .media .media .control:not(:last-child) { - margin-bottom: 0.5rem; + margin-bottom: var(--bulma-media-level-1-content-spacing); } .media .media .media { - padding-top: 0.5rem; + padding-top: var(--bulma-media-level-2-spacing); } .media .media .media + .media { - margin-top: 0.5rem; + margin-top: var(--bulma-media-level-2-spacing); } .media + .media { - border-top: 1px solid rgba(219, 219, 219, 0.5); - margin-top: 1rem; - padding-top: 1rem; + border-top-color: var(--bulma-media-border-color); + border-top-size: var(--bulma-media-border-size); + border-top-style: solid; + margin-top: var(--bulma-media-spacing); + padding-top: var(--bulma-media-spacing); } .media.is-large + .media { - margin-top: 1.5rem; - padding-top: 1.5rem; + margin-top: var(--bulma-media-spacing-large); + padding-top: var(--bulma-media-spacing-large); } .media-left, @@ -7618,11 +7658,11 @@ button.dropdown-item.is-active { } .media-left { - margin-right: 1rem; + margin-right: var(--bulma-media-spacing); } .media-right { - margin-left: 1rem; + margin-left: var(--bulma-media-spacing); } .media-content { @@ -7639,67 +7679,67 @@ button.dropdown-item.is-active { } .menu { - font-size: 1rem; + font-size: var(--bulma-size-normal); } .menu.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .menu.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .menu.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .menu-list { - line-height: 1.25; + line-height: var(--bulma-menu-list-line-height); } .menu-list a { - border-radius: 2px; - color: #4a4a4a; + border-radius: var(--bulma-menu-item-radius); + color: var(--bulma-menu-item-color); display: block; - padding: 0.5em 0.75em; + padding: var(--bulma-menu-list-link-padding); } .menu-list a:hover { - background-color: whitesmoke; - color: #363636; + background-color: var(--bulma-menu-item-hover-background-color); + color: var(--bulma-menu-item-hover-color); } .menu-list a.is-active { - background-color: #485fc7; - color: #fff; + background-color: var(--bulma-menu-item-active-background-color); + color: var(--bulma-menu-item-active-color); } .menu-list li ul { - border-left: 1px solid #dbdbdb; - margin: 0.75em; - padding-left: 0.75em; + border-left: var(--bulma-menu-list-border-left); + margin: var(--bulma-menu-nested-list-margin); + padding-left: var(--bulma-menu-nested-list-padding-left); } .menu-label { - color: #7a7a7a; - font-size: 0.75em; - letter-spacing: 0.1em; + color: var(--bulma-menu-label-color); + font-size: var(--bulma-menu-label-font-size); + letter-spacing: var(--bulma-menu-label-letter-spacing); text-transform: uppercase; } .menu-label:not(:first-child) { - margin-top: 1em; + margin-top: var(--bulma-menu-label-spacing); } .menu-label:not(:last-child) { - margin-bottom: 1em; + margin-bottom: var(--bulma-menu-label-spacing); } .message { - background-color: whitesmoke; - border-radius: 0.375em; - font-size: 1rem; + background-color: var(--bulma-message-background-color); + border-radius: var(--bulma-message-radius); + font-size: var(--bulma-size-normal); } .message strong { @@ -7712,15 +7752,15 @@ button.dropdown-item.is-active { } .message.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .message.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .message.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .message.is-white { @@ -8029,14 +8069,14 @@ button.dropdown-item.is-active { .message-header { align-items: center; - background-color: #4a4a4a; - border-radius: 0.375em 0.375em 0 0; - color: #fff; + background-color: var(--bulma-message-header-background-color); + border-radius: var(--bulma-message-header-radius) var(--bulma-message-header-radius) 0 0; + color: var(--bulma-message-header-color); display: flex; - font-weight: 700; + font-weight: var(--bulma-message-header-weight); justify-content: space-between; line-height: 1.25; - padding: 0.75em 1em; + padding: var(--bulma-message-header-padding); position: relative; } @@ -8047,27 +8087,27 @@ button.dropdown-item.is-active { } .message-header + .message-body { - border-width: 0; + border-width: var(--bulma-message-header-body-border-width); border-top-left-radius: 0; border-top-right-radius: 0; } .message-body { - border-color: #dbdbdb; - border-radius: 0.375em; + border-color: var(--bulma-message-body-border-color); + border-radius: var(--bulma-message-body-radius); border-style: solid; - border-width: 0 0 0 4px; - color: #4a4a4a; - padding: 1.25em 1.5em; + border-width: var(--bulma-message-body-border-width); + color: var(--bulma-message-body-color); + padding: var(--bulma-message-body-padding); } .message-body code, .message-body pre { - background-color: white; + background-color: var(--bulma-message-body-pre-background-color); } .message-body pre code { - background-color: transparent; + background-color: var(--bulma-message-body-pre-code-background-color); } .modal { @@ -8077,7 +8117,7 @@ button.dropdown-item.is-active { justify-content: center; overflow: hidden; position: fixed; - z-index: 40; + z-index: var(--bulma-modal-z); } .modal.is-active { @@ -8085,13 +8125,13 @@ button.dropdown-item.is-active { } .modal-background { - background-color: rgba(10, 10, 10, 0.86); + background-color: var(--bulma-modal-background-background-color); } .modal-content, .modal-card { - margin: 0 20px; - max-height: calc(100vh - 160px); + margin: 0 var(--bulma-modal-content-margin-mobile); + max-height: calc(100vh - var(--bulma-modal-content-spacing-mobile)); overflow: auto; position: relative; width: 100%; @@ -8101,24 +8141,24 @@ button.dropdown-item.is-active { .modal-content, .modal-card { margin: 0 auto; - max-height: calc(100vh - 40px); - width: 640px; + max-height: calc(100vh - var(--bulma-modal-content-spacing-tablet)); + width: var(--bulma-modal-content-width); } } .modal-close { background: none; - height: 40px; + height: var(--bulma-modal-close-dimensions); position: fixed; - right: 20px; - top: 20px; - width: 40px; + right: var(--bulma-modal-close-right); + top: var(--bulma-modal-close-top); + width: var(--bulma-modal-close-dimensions); } .modal-card { display: flex; flex-direction: column; - max-height: calc(100vh - 40px); + max-height: calc(100vh - var(--bulma-modal-card-spacing)); overflow: hidden; -ms-overflow-y: visible; } @@ -8126,32 +8166,32 @@ button.dropdown-item.is-active { .modal-card-head, .modal-card-foot { align-items: center; - background-color: whitesmoke; + background-color: var(--bulma-modal-card-head-background-color); display: flex; flex-shrink: 0; justify-content: flex-start; - padding: 20px; + padding: var(--bulma-modal-card-head-padding); position: relative; } .modal-card-head { - border-bottom: 1px solid #dbdbdb; - border-top-left-radius: 6px; - border-top-right-radius: 6px; + border-bottom: var(--bulma-modal-card-head-border-bottom); + border-top-left-radius: var(--bulma-modal-card-head-radius); + border-top-right-radius: var(--bulma-modal-card-head-radius); } .modal-card-title { - color: #363636; + color: var(--bulma-modal-card-title-color); flex-grow: 1; flex-shrink: 0; - font-size: 1.5rem; - line-height: 1; + font-size: var(--bulma-modal-card-title-size); + line-height: var(--bulma-modal-card-title-line-height); } .modal-card-foot { - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - border-top: 1px solid #dbdbdb; + border-bottom-left-radius: var(--bulma-modal-card-foot-radius); + border-bottom-right-radius: var(--bulma-modal-card-foot-radius); + border-top: var(--bulma-modal-card-foot-border-top); } .modal-card-foot .button:not(:last-child) { @@ -8160,28 +8200,28 @@ button.dropdown-item.is-active { .modal-card-body { -webkit-overflow-scrolling: touch; - background-color: white; + background-color: var(--bulma-modal-card-body-background-color); flex-grow: 1; flex-shrink: 1; overflow: auto; - padding: 20px; + padding: var(--bulma-modal-card-body-padding); } .navbar { - background-color: white; - min-height: 3.25rem; + background-color: var(--bulma-navbar-background-color); + min-height: var(--bulma-navbar-height); position: relative; - z-index: 30; + z-index: var(--bulma-navbar-z); } .navbar.is-white { - background-color: white; - color: #0a0a0a; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-white .navbar-brand > .navbar-item, .navbar.is-white .navbar-brand .navbar-link { - color: #0a0a0a; + color: var(--bulma-color-invert); } .navbar.is-white .navbar-brand > a.navbar-item:focus, .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active, @@ -8189,15 +8229,15 @@ button.dropdown-item.is-active { .navbar.is-white .navbar-brand .navbar-link:hover, .navbar.is-white .navbar-brand .navbar-link.is-active { background-color: #f2f2f2; - color: #0a0a0a; + color: var(--bulma-color-invert); } .navbar.is-white .navbar-brand .navbar-link::after { - border-color: #0a0a0a; + border-color: var(--bulma-color-invert); } .navbar.is-white .navbar-burger { - color: #0a0a0a; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8205,7 +8245,7 @@ button.dropdown-item.is-active { .navbar.is-white .navbar-start .navbar-link, .navbar.is-white .navbar-end > .navbar-item, .navbar.is-white .navbar-end .navbar-link { - color: #0a0a0a; + color: var(--bulma-color-invert); } .navbar.is-white .navbar-start > a.navbar-item:focus, .navbar.is-white .navbar-start > a.navbar-item:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active, .navbar.is-white .navbar-start .navbar-link:focus, @@ -8218,32 +8258,32 @@ button.dropdown-item.is-active { .navbar.is-white .navbar-end .navbar-link:hover, .navbar.is-white .navbar-end .navbar-link.is-active { background-color: #f2f2f2; - color: #0a0a0a; + color: var(--bulma-color-invert); } .navbar.is-white .navbar-start .navbar-link::after, .navbar.is-white .navbar-end .navbar-link::after { - border-color: #0a0a0a; + border-color: var(--bulma-color-invert); } .navbar.is-white .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-white .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link { background-color: #f2f2f2; - color: #0a0a0a; + color: var(--bulma-color-invert); } .navbar.is-white .navbar-dropdown a.navbar-item.is-active { - background-color: white; - color: #0a0a0a; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-black { - background-color: #0a0a0a; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-black .navbar-brand > .navbar-item, .navbar.is-black .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-black .navbar-brand > a.navbar-item:focus, .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active, @@ -8251,15 +8291,15 @@ button.dropdown-item.is-active { .navbar.is-black .navbar-brand .navbar-link:hover, .navbar.is-black .navbar-brand .navbar-link.is-active { background-color: black; - color: white; + color: var(--bulma-color-invert); } .navbar.is-black .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-black .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8267,7 +8307,7 @@ button.dropdown-item.is-active { .navbar.is-black .navbar-start .navbar-link, .navbar.is-black .navbar-end > .navbar-item, .navbar.is-black .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-black .navbar-start > a.navbar-item:focus, .navbar.is-black .navbar-start > a.navbar-item:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active, .navbar.is-black .navbar-start .navbar-link:focus, @@ -8280,32 +8320,32 @@ button.dropdown-item.is-active { .navbar.is-black .navbar-end .navbar-link:hover, .navbar.is-black .navbar-end .navbar-link.is-active { background-color: black; - color: white; + color: var(--bulma-color-invert); } .navbar.is-black .navbar-start .navbar-link::after, .navbar.is-black .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-black .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-black .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link { background-color: black; - color: white; + color: var(--bulma-color-invert); } .navbar.is-black .navbar-dropdown a.navbar-item.is-active { - background-color: #0a0a0a; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-light { - background-color: whitesmoke; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-light .navbar-brand > .navbar-item, .navbar.is-light .navbar-brand .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, @@ -8313,15 +8353,15 @@ button.dropdown-item.is-active { .navbar.is-light .navbar-brand .navbar-link:hover, .navbar.is-light .navbar-brand .navbar-link.is-active { background-color: #e8e8e8; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-light .navbar-brand .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-light .navbar-burger { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8329,7 +8369,7 @@ button.dropdown-item.is-active { .navbar.is-light .navbar-start .navbar-link, .navbar.is-light .navbar-end > .navbar-item, .navbar.is-light .navbar-end .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-light .navbar-start > a.navbar-item:focus, .navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active, .navbar.is-light .navbar-start .navbar-link:focus, @@ -8342,32 +8382,32 @@ button.dropdown-item.is-active { .navbar.is-light .navbar-end .navbar-link:hover, .navbar.is-light .navbar-end .navbar-link.is-active { background-color: #e8e8e8; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-light .navbar-start .navbar-link::after, .navbar.is-light .navbar-end .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-light .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link { background-color: #e8e8e8; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-light .navbar-dropdown a.navbar-item.is-active { - background-color: whitesmoke; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-dark { - background-color: #363636; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-dark .navbar-brand > .navbar-item, .navbar.is-dark .navbar-brand .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-dark .navbar-brand > a.navbar-item:focus, .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active, @@ -8375,15 +8415,15 @@ button.dropdown-item.is-active { .navbar.is-dark .navbar-brand .navbar-link:hover, .navbar.is-dark .navbar-brand .navbar-link.is-active { background-color: #292929; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-dark .navbar-brand .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-dark .navbar-burger { - color: #fff; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8391,7 +8431,7 @@ button.dropdown-item.is-active { .navbar.is-dark .navbar-start .navbar-link, .navbar.is-dark .navbar-end > .navbar-item, .navbar.is-dark .navbar-end .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-dark .navbar-start > a.navbar-item:focus, .navbar.is-dark .navbar-start > a.navbar-item:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active, .navbar.is-dark .navbar-start .navbar-link:focus, @@ -8404,32 +8444,32 @@ button.dropdown-item.is-active { .navbar.is-dark .navbar-end .navbar-link:hover, .navbar.is-dark .navbar-end .navbar-link.is-active { background-color: #292929; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-dark .navbar-start .navbar-link::after, .navbar.is-dark .navbar-end .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-dark .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link { background-color: #292929; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-dark .navbar-dropdown a.navbar-item.is-active { - background-color: #363636; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-primary { - background-color: #00d1b2; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-primary .navbar-brand > .navbar-item, .navbar.is-primary .navbar-brand .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, @@ -8437,15 +8477,15 @@ button.dropdown-item.is-active { .navbar.is-primary .navbar-brand .navbar-link:hover, .navbar.is-primary .navbar-brand .navbar-link.is-active { background-color: #00b89c; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-primary .navbar-brand .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-primary .navbar-burger { - color: #fff; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8453,7 +8493,7 @@ button.dropdown-item.is-active { .navbar.is-primary .navbar-start .navbar-link, .navbar.is-primary .navbar-end > .navbar-item, .navbar.is-primary .navbar-end .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-primary .navbar-start > a.navbar-item:focus, .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active, .navbar.is-primary .navbar-start .navbar-link:focus, @@ -8466,32 +8506,32 @@ button.dropdown-item.is-active { .navbar.is-primary .navbar-end .navbar-link:hover, .navbar.is-primary .navbar-end .navbar-link.is-active { background-color: #00b89c; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-primary .navbar-start .navbar-link::after, .navbar.is-primary .navbar-end .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link { background-color: #00b89c; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-primary .navbar-dropdown a.navbar-item.is-active { - background-color: #00d1b2; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-link { - background-color: #485fc7; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-link .navbar-brand > .navbar-item, .navbar.is-link .navbar-brand .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-link .navbar-brand > a.navbar-item:focus, .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active, @@ -8499,15 +8539,15 @@ button.dropdown-item.is-active { .navbar.is-link .navbar-brand .navbar-link:hover, .navbar.is-link .navbar-brand .navbar-link.is-active { background-color: #3a51bb; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-link .navbar-brand .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-link .navbar-burger { - color: #fff; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8515,7 +8555,7 @@ button.dropdown-item.is-active { .navbar.is-link .navbar-start .navbar-link, .navbar.is-link .navbar-end > .navbar-item, .navbar.is-link .navbar-end .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-link .navbar-start > a.navbar-item:focus, .navbar.is-link .navbar-start > a.navbar-item:hover, .navbar.is-link .navbar-start > a.navbar-item.is-active, .navbar.is-link .navbar-start .navbar-link:focus, @@ -8528,32 +8568,32 @@ button.dropdown-item.is-active { .navbar.is-link .navbar-end .navbar-link:hover, .navbar.is-link .navbar-end .navbar-link.is-active { background-color: #3a51bb; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-link .navbar-start .navbar-link::after, .navbar.is-link .navbar-end .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-link .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-link .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link { background-color: #3a51bb; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-link .navbar-dropdown a.navbar-item.is-active { - background-color: #485fc7; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-info { - background-color: #3e8ed0; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-info .navbar-brand > .navbar-item, .navbar.is-info .navbar-brand .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-info .navbar-brand > a.navbar-item:focus, .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active, @@ -8561,15 +8601,15 @@ button.dropdown-item.is-active { .navbar.is-info .navbar-brand .navbar-link:hover, .navbar.is-info .navbar-brand .navbar-link.is-active { background-color: #3082c5; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-info .navbar-brand .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-info .navbar-burger { - color: #fff; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8577,7 +8617,7 @@ button.dropdown-item.is-active { .navbar.is-info .navbar-start .navbar-link, .navbar.is-info .navbar-end > .navbar-item, .navbar.is-info .navbar-end .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-info .navbar-start > a.navbar-item:focus, .navbar.is-info .navbar-start > a.navbar-item:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active, .navbar.is-info .navbar-start .navbar-link:focus, @@ -8590,32 +8630,32 @@ button.dropdown-item.is-active { .navbar.is-info .navbar-end .navbar-link:hover, .navbar.is-info .navbar-end .navbar-link.is-active { background-color: #3082c5; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-info .navbar-start .navbar-link::after, .navbar.is-info .navbar-end .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-info .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link { background-color: #3082c5; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-info .navbar-dropdown a.navbar-item.is-active { - background-color: #3e8ed0; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-success { - background-color: #48c78e; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-success .navbar-brand > .navbar-item, .navbar.is-success .navbar-brand .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-success .navbar-brand > a.navbar-item:focus, .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active, @@ -8623,15 +8663,15 @@ button.dropdown-item.is-active { .navbar.is-success .navbar-brand .navbar-link:hover, .navbar.is-success .navbar-brand .navbar-link.is-active { background-color: #3abb81; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-success .navbar-brand .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-success .navbar-burger { - color: #fff; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8639,7 +8679,7 @@ button.dropdown-item.is-active { .navbar.is-success .navbar-start .navbar-link, .navbar.is-success .navbar-end > .navbar-item, .navbar.is-success .navbar-end .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-success .navbar-start > a.navbar-item:focus, .navbar.is-success .navbar-start > a.navbar-item:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active, .navbar.is-success .navbar-start .navbar-link:focus, @@ -8652,32 +8692,32 @@ button.dropdown-item.is-active { .navbar.is-success .navbar-end .navbar-link:hover, .navbar.is-success .navbar-end .navbar-link.is-active { background-color: #3abb81; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-success .navbar-start .navbar-link::after, .navbar.is-success .navbar-end .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-success .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-success .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link { background-color: #3abb81; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-success .navbar-dropdown a.navbar-item.is-active { - background-color: #48c78e; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-warning { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-warning .navbar-brand > .navbar-item, .navbar.is-warning .navbar-brand .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-warning .navbar-brand > a.navbar-item:focus, .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, @@ -8685,15 +8725,15 @@ button.dropdown-item.is-active { .navbar.is-warning .navbar-brand .navbar-link:hover, .navbar.is-warning .navbar-brand .navbar-link.is-active { background-color: #ffd970; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-warning .navbar-brand .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-warning .navbar-burger { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8701,7 +8741,7 @@ button.dropdown-item.is-active { .navbar.is-warning .navbar-start .navbar-link, .navbar.is-warning .navbar-end > .navbar-item, .navbar.is-warning .navbar-end .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-warning .navbar-start > a.navbar-item:focus, .navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active, .navbar.is-warning .navbar-start .navbar-link:focus, @@ -8714,32 +8754,32 @@ button.dropdown-item.is-active { .navbar.is-warning .navbar-end .navbar-link:hover, .navbar.is-warning .navbar-end .navbar-link.is-active { background-color: #ffd970; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-warning .navbar-start .navbar-link::after, .navbar.is-warning .navbar-end .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-warning .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link { background-color: #ffd970; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-warning .navbar-dropdown a.navbar-item.is-active { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-danger { - background-color: #f14668; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-danger .navbar-brand > .navbar-item, .navbar.is-danger .navbar-brand .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-danger .navbar-brand > a.navbar-item:focus, .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active, @@ -8747,15 +8787,15 @@ button.dropdown-item.is-active { .navbar.is-danger .navbar-brand .navbar-link:hover, .navbar.is-danger .navbar-brand .navbar-link.is-active { background-color: #ef2e55; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-danger .navbar-brand .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-danger .navbar-burger { - color: #fff; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8763,7 +8803,7 @@ button.dropdown-item.is-active { .navbar.is-danger .navbar-start .navbar-link, .navbar.is-danger .navbar-end > .navbar-item, .navbar.is-danger .navbar-end .navbar-link { - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-danger .navbar-start > a.navbar-item:focus, .navbar.is-danger .navbar-start > a.navbar-item:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active, .navbar.is-danger .navbar-start .navbar-link:focus, @@ -8776,32 +8816,32 @@ button.dropdown-item.is-active { .navbar.is-danger .navbar-end .navbar-link:hover, .navbar.is-danger .navbar-end .navbar-link.is-active { background-color: #ef2e55; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-danger .navbar-start .navbar-link::after, .navbar.is-danger .navbar-end .navbar-link::after { - border-color: #fff; + border-color: var(--bulma-color-invert); } .navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link { background-color: #ef2e55; - color: #fff; + color: var(--bulma-color-invert); } .navbar.is-danger .navbar-dropdown a.navbar-item.is-active { - background-color: #f14668; - color: #fff; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-expo { - background-color: #ffd257; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-expo .navbar-brand > .navbar-item, .navbar.is-expo .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-expo .navbar-brand > a.navbar-item:focus, .navbar.is-expo .navbar-brand > a.navbar-item:hover, .navbar.is-expo .navbar-brand > a.navbar-item.is-active, @@ -8809,15 +8849,15 @@ button.dropdown-item.is-active { .navbar.is-expo .navbar-brand .navbar-link:hover, .navbar.is-expo .navbar-brand .navbar-link.is-active { background-color: #ffcb3e; - color: white; + color: var(--bulma-color-invert); } .navbar.is-expo .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-expo .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8825,7 +8865,7 @@ button.dropdown-item.is-active { .navbar.is-expo .navbar-start .navbar-link, .navbar.is-expo .navbar-end > .navbar-item, .navbar.is-expo .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-expo .navbar-start > a.navbar-item:focus, .navbar.is-expo .navbar-start > a.navbar-item:hover, .navbar.is-expo .navbar-start > a.navbar-item.is-active, .navbar.is-expo .navbar-start .navbar-link:focus, @@ -8838,32 +8878,32 @@ button.dropdown-item.is-active { .navbar.is-expo .navbar-end .navbar-link:hover, .navbar.is-expo .navbar-end .navbar-link.is-active { background-color: #ffcb3e; - color: white; + color: var(--bulma-color-invert); } .navbar.is-expo .navbar-start .navbar-link::after, .navbar.is-expo .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-expo .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-expo .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-expo .navbar-item.has-dropdown.is-active .navbar-link { background-color: #ffcb3e; - color: white; + color: var(--bulma-color-invert); } .navbar.is-expo .navbar-dropdown a.navbar-item.is-active { - background-color: #ffd257; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-love { - background-color: #f14668; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-love .navbar-brand > .navbar-item, .navbar.is-love .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-love .navbar-brand > a.navbar-item:focus, .navbar.is-love .navbar-brand > a.navbar-item:hover, .navbar.is-love .navbar-brand > a.navbar-item.is-active, @@ -8871,15 +8911,15 @@ button.dropdown-item.is-active { .navbar.is-love .navbar-brand .navbar-link:hover, .navbar.is-love .navbar-brand .navbar-link.is-active { background-color: #ef2e55; - color: white; + color: var(--bulma-color-invert); } .navbar.is-love .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-love .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8887,7 +8927,7 @@ button.dropdown-item.is-active { .navbar.is-love .navbar-start .navbar-link, .navbar.is-love .navbar-end > .navbar-item, .navbar.is-love .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-love .navbar-start > a.navbar-item:focus, .navbar.is-love .navbar-start > a.navbar-item:hover, .navbar.is-love .navbar-start > a.navbar-item.is-active, .navbar.is-love .navbar-start .navbar-link:focus, @@ -8900,32 +8940,32 @@ button.dropdown-item.is-active { .navbar.is-love .navbar-end .navbar-link:hover, .navbar.is-love .navbar-end .navbar-link.is-active { background-color: #ef2e55; - color: white; + color: var(--bulma-color-invert); } .navbar.is-love .navbar-start .navbar-link::after, .navbar.is-love .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-love .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-love .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-love .navbar-item.has-dropdown.is-active .navbar-link { background-color: #ef2e55; - color: white; + color: var(--bulma-color-invert); } .navbar.is-love .navbar-dropdown a.navbar-item.is-active { - background-color: #f14668; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-patreon { - background-color: #f96854; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-brand > .navbar-item, .navbar.is-patreon .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-brand > a.navbar-item:focus, .navbar.is-patreon .navbar-brand > a.navbar-item:hover, .navbar.is-patreon .navbar-brand > a.navbar-item.is-active, @@ -8933,15 +8973,15 @@ button.dropdown-item.is-active { .navbar.is-patreon .navbar-brand .navbar-link:hover, .navbar.is-patreon .navbar-brand .navbar-link.is-active { background-color: #f8523b; - color: white; + color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -8949,7 +8989,7 @@ button.dropdown-item.is-active { .navbar.is-patreon .navbar-start .navbar-link, .navbar.is-patreon .navbar-end > .navbar-item, .navbar.is-patreon .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-start > a.navbar-item:focus, .navbar.is-patreon .navbar-start > a.navbar-item:hover, .navbar.is-patreon .navbar-start > a.navbar-item.is-active, .navbar.is-patreon .navbar-start .navbar-link:focus, @@ -8962,32 +9002,32 @@ button.dropdown-item.is-active { .navbar.is-patreon .navbar-end .navbar-link:hover, .navbar.is-patreon .navbar-end .navbar-link.is-active { background-color: #f8523b; - color: white; + color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-start .navbar-link::after, .navbar.is-patreon .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-patreon .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-patreon .navbar-item.has-dropdown.is-active .navbar-link { background-color: #f8523b; - color: white; + color: var(--bulma-color-invert); } .navbar.is-patreon .navbar-dropdown a.navbar-item.is-active { - background-color: #f96854; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-rss { - background-color: #f26522; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-rss .navbar-brand > .navbar-item, .navbar.is-rss .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-rss .navbar-brand > a.navbar-item:focus, .navbar.is-rss .navbar-brand > a.navbar-item:hover, .navbar.is-rss .navbar-brand > a.navbar-item.is-active, @@ -8995,15 +9035,15 @@ button.dropdown-item.is-active { .navbar.is-rss .navbar-brand .navbar-link:hover, .navbar.is-rss .navbar-brand .navbar-link.is-active { background-color: #ed560e; - color: white; + color: var(--bulma-color-invert); } .navbar.is-rss .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-rss .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9011,7 +9051,7 @@ button.dropdown-item.is-active { .navbar.is-rss .navbar-start .navbar-link, .navbar.is-rss .navbar-end > .navbar-item, .navbar.is-rss .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-rss .navbar-start > a.navbar-item:focus, .navbar.is-rss .navbar-start > a.navbar-item:hover, .navbar.is-rss .navbar-start > a.navbar-item.is-active, .navbar.is-rss .navbar-start .navbar-link:focus, @@ -9024,32 +9064,32 @@ button.dropdown-item.is-active { .navbar.is-rss .navbar-end .navbar-link:hover, .navbar.is-rss .navbar-end .navbar-link.is-active { background-color: #ed560e; - color: white; + color: var(--bulma-color-invert); } .navbar.is-rss .navbar-start .navbar-link::after, .navbar.is-rss .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-rss .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-rss .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-rss .navbar-item.has-dropdown.is-active .navbar-link { background-color: #ed560e; - color: white; + color: var(--bulma-color-invert); } .navbar.is-rss .navbar-dropdown a.navbar-item.is-active { - background-color: #f26522; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-bleeding { - background-color: #abf47c; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-brand > .navbar-item, .navbar.is-bleeding .navbar-brand .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-brand > a.navbar-item:focus, .navbar.is-bleeding .navbar-brand > a.navbar-item:hover, .navbar.is-bleeding .navbar-brand > a.navbar-item.is-active, @@ -9057,15 +9097,15 @@ button.dropdown-item.is-active { .navbar.is-bleeding .navbar-brand .navbar-link:hover, .navbar.is-bleeding .navbar-brand .navbar-link.is-active { background-color: #9cf264; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-brand .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-burger { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9073,7 +9113,7 @@ button.dropdown-item.is-active { .navbar.is-bleeding .navbar-start .navbar-link, .navbar.is-bleeding .navbar-end > .navbar-item, .navbar.is-bleeding .navbar-end .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-start > a.navbar-item:focus, .navbar.is-bleeding .navbar-start > a.navbar-item:hover, .navbar.is-bleeding .navbar-start > a.navbar-item.is-active, .navbar.is-bleeding .navbar-start .navbar-link:focus, @@ -9086,32 +9126,32 @@ button.dropdown-item.is-active { .navbar.is-bleeding .navbar-end .navbar-link:hover, .navbar.is-bleeding .navbar-end .navbar-link.is-active { background-color: #9cf264; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-start .navbar-link::after, .navbar.is-bleeding .navbar-end .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-bleeding .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-bleeding .navbar-item.has-dropdown.is-active .navbar-link { background-color: #9cf264; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-bleeding .navbar-dropdown a.navbar-item.is-active { - background-color: #abf47c; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-sass { - background-color: #bf4080; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-sass .navbar-brand > .navbar-item, .navbar.is-sass .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-sass .navbar-brand > a.navbar-item:focus, .navbar.is-sass .navbar-brand > a.navbar-item:hover, .navbar.is-sass .navbar-brand > a.navbar-item.is-active, @@ -9119,15 +9159,15 @@ button.dropdown-item.is-active { .navbar.is-sass .navbar-brand .navbar-link:hover, .navbar.is-sass .navbar-brand .navbar-link.is-active { background-color: #ac3a73; - color: white; + color: var(--bulma-color-invert); } .navbar.is-sass .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-sass .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9135,7 +9175,7 @@ button.dropdown-item.is-active { .navbar.is-sass .navbar-start .navbar-link, .navbar.is-sass .navbar-end > .navbar-item, .navbar.is-sass .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-sass .navbar-start > a.navbar-item:focus, .navbar.is-sass .navbar-start > a.navbar-item:hover, .navbar.is-sass .navbar-start > a.navbar-item.is-active, .navbar.is-sass .navbar-start .navbar-link:focus, @@ -9148,32 +9188,32 @@ button.dropdown-item.is-active { .navbar.is-sass .navbar-end .navbar-link:hover, .navbar.is-sass .navbar-end .navbar-link.is-active { background-color: #ac3a73; - color: white; + color: var(--bulma-color-invert); } .navbar.is-sass .navbar-start .navbar-link::after, .navbar.is-sass .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-sass .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-sass .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-sass .navbar-item.has-dropdown.is-active .navbar-link { background-color: #ac3a73; - color: white; + color: var(--bulma-color-invert); } .navbar.is-sass .navbar-dropdown a.navbar-item.is-active { - background-color: #bf4080; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-amazon { - background-color: #ffd863; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-brand > .navbar-item, .navbar.is-amazon .navbar-brand .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-brand > a.navbar-item:focus, .navbar.is-amazon .navbar-brand > a.navbar-item:hover, .navbar.is-amazon .navbar-brand > a.navbar-item.is-active, @@ -9181,15 +9221,15 @@ button.dropdown-item.is-active { .navbar.is-amazon .navbar-brand .navbar-link:hover, .navbar.is-amazon .navbar-brand .navbar-link.is-active { background-color: #ffd24a; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-brand .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-burger { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9197,7 +9237,7 @@ button.dropdown-item.is-active { .navbar.is-amazon .navbar-start .navbar-link, .navbar.is-amazon .navbar-end > .navbar-item, .navbar.is-amazon .navbar-end .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-start > a.navbar-item:focus, .navbar.is-amazon .navbar-start > a.navbar-item:hover, .navbar.is-amazon .navbar-start > a.navbar-item.is-active, .navbar.is-amazon .navbar-start .navbar-link:focus, @@ -9210,32 +9250,32 @@ button.dropdown-item.is-active { .navbar.is-amazon .navbar-end .navbar-link:hover, .navbar.is-amazon .navbar-end .navbar-link.is-active { background-color: #ffd24a; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-start .navbar-link::after, .navbar.is-amazon .navbar-end .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-amazon .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-amazon .navbar-item.has-dropdown.is-active .navbar-link { background-color: #ffd24a; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-color-invert); } .navbar.is-amazon .navbar-dropdown a.navbar-item.is-active { - background-color: #ffd863; - color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-sponsor { - background-color: #ea4aaa; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-brand > .navbar-item, .navbar.is-sponsor .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-brand > a.navbar-item:focus, .navbar.is-sponsor .navbar-brand > a.navbar-item:hover, .navbar.is-sponsor .navbar-brand > a.navbar-item.is-active, @@ -9243,15 +9283,15 @@ button.dropdown-item.is-active { .navbar.is-sponsor .navbar-brand .navbar-link:hover, .navbar.is-sponsor .navbar-brand .navbar-link.is-active { background-color: #e7339f; - color: white; + color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9259,7 +9299,7 @@ button.dropdown-item.is-active { .navbar.is-sponsor .navbar-start .navbar-link, .navbar.is-sponsor .navbar-end > .navbar-item, .navbar.is-sponsor .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-start > a.navbar-item:focus, .navbar.is-sponsor .navbar-start > a.navbar-item:hover, .navbar.is-sponsor .navbar-start > a.navbar-item.is-active, .navbar.is-sponsor .navbar-start .navbar-link:focus, @@ -9272,32 +9312,32 @@ button.dropdown-item.is-active { .navbar.is-sponsor .navbar-end .navbar-link:hover, .navbar.is-sponsor .navbar-end .navbar-link.is-active { background-color: #e7339f; - color: white; + color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-start .navbar-link::after, .navbar.is-sponsor .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-sponsor .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-sponsor .navbar-item.has-dropdown.is-active .navbar-link { background-color: #e7339f; - color: white; + color: var(--bulma-color-invert); } .navbar.is-sponsor .navbar-dropdown a.navbar-item.is-active { - background-color: #ea4aaa; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-twitter { - background-color: #55acee; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-brand > .navbar-item, .navbar.is-twitter .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-brand > a.navbar-item:focus, .navbar.is-twitter .navbar-brand > a.navbar-item:hover, .navbar.is-twitter .navbar-brand > a.navbar-item.is-active, @@ -9305,15 +9345,15 @@ button.dropdown-item.is-active { .navbar.is-twitter .navbar-brand .navbar-link:hover, .navbar.is-twitter .navbar-brand .navbar-link.is-active { background-color: #3ea1ec; - color: white; + color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9321,7 +9361,7 @@ button.dropdown-item.is-active { .navbar.is-twitter .navbar-start .navbar-link, .navbar.is-twitter .navbar-end > .navbar-item, .navbar.is-twitter .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-start > a.navbar-item:focus, .navbar.is-twitter .navbar-start > a.navbar-item:hover, .navbar.is-twitter .navbar-start > a.navbar-item.is-active, .navbar.is-twitter .navbar-start .navbar-link:focus, @@ -9334,32 +9374,32 @@ button.dropdown-item.is-active { .navbar.is-twitter .navbar-end .navbar-link:hover, .navbar.is-twitter .navbar-end .navbar-link.is-active { background-color: #3ea1ec; - color: white; + color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-start .navbar-link::after, .navbar.is-twitter .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-twitter .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-twitter .navbar-item.has-dropdown.is-active .navbar-link { background-color: #3ea1ec; - color: white; + color: var(--bulma-color-invert); } .navbar.is-twitter .navbar-dropdown a.navbar-item.is-active { - background-color: #55acee; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-videos { - background-color: #48c78e; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-videos .navbar-brand > .navbar-item, .navbar.is-videos .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-videos .navbar-brand > a.navbar-item:focus, .navbar.is-videos .navbar-brand > a.navbar-item:hover, .navbar.is-videos .navbar-brand > a.navbar-item.is-active, @@ -9367,15 +9407,15 @@ button.dropdown-item.is-active { .navbar.is-videos .navbar-brand .navbar-link:hover, .navbar.is-videos .navbar-brand .navbar-link.is-active { background-color: #3abb81; - color: white; + color: var(--bulma-color-invert); } .navbar.is-videos .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-videos .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9383,7 +9423,7 @@ button.dropdown-item.is-active { .navbar.is-videos .navbar-start .navbar-link, .navbar.is-videos .navbar-end > .navbar-item, .navbar.is-videos .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-videos .navbar-start > a.navbar-item:focus, .navbar.is-videos .navbar-start > a.navbar-item:hover, .navbar.is-videos .navbar-start > a.navbar-item.is-active, .navbar.is-videos .navbar-start .navbar-link:focus, @@ -9396,32 +9436,32 @@ button.dropdown-item.is-active { .navbar.is-videos .navbar-end .navbar-link:hover, .navbar.is-videos .navbar-end .navbar-link.is-active { background-color: #3abb81; - color: white; + color: var(--bulma-color-invert); } .navbar.is-videos .navbar-start .navbar-link::after, .navbar.is-videos .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-videos .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-videos .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-videos .navbar-item.has-dropdown.is-active .navbar-link { background-color: #3abb81; - color: white; + color: var(--bulma-color-invert); } .navbar.is-videos .navbar-dropdown a.navbar-item.is-active { - background-color: #48c78e; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-extensions { - background-color: #3e8ed0; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-brand > .navbar-item, .navbar.is-extensions .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-brand > a.navbar-item:focus, .navbar.is-extensions .navbar-brand > a.navbar-item:hover, .navbar.is-extensions .navbar-brand > a.navbar-item.is-active, @@ -9429,15 +9469,15 @@ button.dropdown-item.is-active { .navbar.is-extensions .navbar-brand .navbar-link:hover, .navbar.is-extensions .navbar-brand .navbar-link.is-active { background-color: #3082c5; - color: white; + color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9445,7 +9485,7 @@ button.dropdown-item.is-active { .navbar.is-extensions .navbar-start .navbar-link, .navbar.is-extensions .navbar-end > .navbar-item, .navbar.is-extensions .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-start > a.navbar-item:focus, .navbar.is-extensions .navbar-start > a.navbar-item:hover, .navbar.is-extensions .navbar-start > a.navbar-item.is-active, .navbar.is-extensions .navbar-start .navbar-link:focus, @@ -9458,32 +9498,32 @@ button.dropdown-item.is-active { .navbar.is-extensions .navbar-end .navbar-link:hover, .navbar.is-extensions .navbar-end .navbar-link.is-active { background-color: #3082c5; - color: white; + color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-start .navbar-link::after, .navbar.is-extensions .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-extensions .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-extensions .navbar-item.has-dropdown.is-active .navbar-link { background-color: #3082c5; - color: white; + color: var(--bulma-color-invert); } .navbar.is-extensions .navbar-dropdown a.navbar-item.is-active { - background-color: #3e8ed0; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar.is-bootstrap { - background-color: #6f5499; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-brand > .navbar-item, .navbar.is-bootstrap .navbar-brand .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-brand > a.navbar-item:focus, .navbar.is-bootstrap .navbar-brand > a.navbar-item:hover, .navbar.is-bootstrap .navbar-brand > a.navbar-item.is-active, @@ -9491,15 +9531,15 @@ button.dropdown-item.is-active { .navbar.is-bootstrap .navbar-brand .navbar-link:hover, .navbar.is-bootstrap .navbar-brand .navbar-link.is-active { background-color: #634b89; - color: white; + color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-brand .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-burger { - color: white; + color: var(--bulma-color-invert); } @media screen and (min-width: 769px) { @@ -9507,7 +9547,7 @@ button.dropdown-item.is-active { .navbar.is-bootstrap .navbar-start .navbar-link, .navbar.is-bootstrap .navbar-end > .navbar-item, .navbar.is-bootstrap .navbar-end .navbar-link { - color: white; + color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-start > a.navbar-item:focus, .navbar.is-bootstrap .navbar-start > a.navbar-item:hover, .navbar.is-bootstrap .navbar-start > a.navbar-item.is-active, .navbar.is-bootstrap .navbar-start .navbar-link:focus, @@ -9520,40 +9560,40 @@ button.dropdown-item.is-active { .navbar.is-bootstrap .navbar-end .navbar-link:hover, .navbar.is-bootstrap .navbar-end .navbar-link.is-active { background-color: #634b89; - color: white; + color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-start .navbar-link::after, .navbar.is-bootstrap .navbar-end .navbar-link::after { - border-color: white; + border-color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-bootstrap .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-bootstrap .navbar-item.has-dropdown.is-active .navbar-link { background-color: #634b89; - color: white; + color: var(--bulma-color-invert); } .navbar.is-bootstrap .navbar-dropdown a.navbar-item.is-active { - background-color: #6f5499; - color: white; + background-color: var(--bulma-color); + color: var(--bulma-color-invert); } } .navbar > .container { align-items: stretch; display: flex; - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); width: 100%; } .navbar.has-shadow { - box-shadow: 0 2px 0 0 whitesmoke; + box-shadow: var(--bulma-navbar-box-shadow-size) var(--bulma-navbar-box-shadow-color); } .navbar.is-fixed-bottom, .navbar.is-fixed-top { left: 0; position: fixed; right: 0; - z-index: 30; + z-index: var(--bulma-navbar-fixed-z); } .navbar.is-fixed-bottom { @@ -9561,7 +9601,7 @@ button.dropdown-item.is-active { } .navbar.is-fixed-bottom.has-shadow { - box-shadow: 0 -2px 0 0 whitesmoke; + box-shadow: var(--bulma-navbar-bottom-box-shadow-size) var(--bulma-navbar-box-shadow-color); } .navbar.is-fixed-top { @@ -9570,12 +9610,12 @@ button.dropdown-item.is-active { html.has-navbar-fixed-top, body.has-navbar-fixed-top { - padding-top: 3.25rem; + padding-top: var(--bulma-navbar-height); } html.has-navbar-fixed-bottom, body.has-navbar-fixed-bottom { - padding-bottom: 3.25rem; + padding-bottom: var(--bulma-navbar-height); } .navbar-brand, @@ -9583,7 +9623,7 @@ body.has-navbar-fixed-bottom { align-items: stretch; display: flex; flex-shrink: 0; - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); } .navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover { @@ -9598,7 +9638,7 @@ body.has-navbar-fixed-bottom { } .navbar-burger { - color: #4a4a4a; + color: var(--bulma-navbar-burger-color); -moz-appearance: none; -webkit-appearance: none; appearance: none; @@ -9606,9 +9646,9 @@ body.has-navbar-fixed-bottom { border: none; cursor: pointer; display: block; - height: 3.25rem; + height: var(--bulma-navbar-height); position: relative; - width: 3.25rem; + width: var(--bulma-navbar-height); margin-left: auto; } @@ -9659,7 +9699,7 @@ body.has-navbar-fixed-bottom { .navbar-item, .navbar-link { - color: #4a4a4a; + color: var(--bulma-navbar-item-color); display: block; line-height: 1.5; padding: 0.5rem 0.75rem; @@ -9682,8 +9722,8 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active { - background-color: #fafafa; - color: #485fc7; + background-color: var(--bulma-navbar-item-hover-background-color); + color: var(--bulma-navbar-item-hover-color); } .navbar-item { @@ -9692,7 +9732,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-item img { - max-height: 1.75rem; + max-height: var(--bulma-navbar-item-img-max-height); } .navbar-item.has-dropdown { @@ -9706,22 +9746,22 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .navbar-item.is-tab { border-bottom: 1px solid transparent; - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); padding-bottom: calc(0.5rem - 1px); } .navbar-item.is-tab:focus, .navbar-item.is-tab:hover { - background-color: transparent; - border-bottom-color: #485fc7; + background-color: var(--bulma-navbar-tab-hover-background-color); + border-bottom-color: var(--bulma-navbar-tab-hover-border-bottom-color); } .navbar-item.is-tab.is-active { - background-color: transparent; - border-bottom-color: #485fc7; - border-bottom-style: solid; - border-bottom-width: 3px; - color: #485fc7; - padding-bottom: calc(0.5rem - 3px); + background-color: var(--bulma-navbar-tab-active-background-color); + border-bottom-color: var(--bulma-navbar-tab-active-border-bottom-color); + border-bottom-style: var(--bulma-navbar-tab-active-border-bottom-style); + border-bottom-width: var(--bulma-navbar-tab-active-border-bottom-width); + color: var(--bulma-navbar-tab-active-color); + padding-bottom: calc( 0.5rem - var(--bulma-navbar-tab-active-border-bottom-width)); } .navbar-content { @@ -9734,7 +9774,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-link:not(.is-arrowless)::after { - border-color: #485fc7; + border-color: var(--bulma-navbar-dropdown-arrow); margin-top: -0.375em; right: 1.125em; } @@ -9751,14 +9791,14 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-divider { - background-color: whitesmoke; + background-color: var(--bulma-navbar-divider-background-color); border: none; display: none; - height: 2px; + height: var(--bulma-navbar-divider-height); margin: 0.5rem 0; } -@media screen and (max-width: 768px) { +@media screen and (max-width: var(--bulma-navbar-breakpoint) - 1px) { .navbar > .container { display: block; } @@ -9771,7 +9811,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i display: none; } .navbar-menu { - background-color: white; + background-color: var(--bulma-navbar-background-color); box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); padding: 0.5rem 0; } @@ -9782,7 +9822,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i left: 0; position: fixed; right: 0; - z-index: 30; + z-index: var(--bulma-navbar-fixed-z); } .navbar.is-fixed-bottom-touch { bottom: 0; @@ -9795,20 +9835,20 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu { -webkit-overflow-scrolling: touch; - max-height: calc(100vh - 3.25rem); + max-height: calc(100vh - var(--bulma-navbar-height)); overflow: auto; } html.has-navbar-fixed-top-touch, body.has-navbar-fixed-top-touch { - padding-top: 3.25rem; + padding-top: var(--bulma-navbar-height); } html.has-navbar-fixed-bottom-touch, body.has-navbar-fixed-bottom-touch { - padding-bottom: 3.25rem; + padding-bottom: var(--bulma-navbar-height); } } -@media screen and (min-width: 769px) { +@media screen and (min-width: var(--bulma-navbar-breakpoint)) { .navbar, .navbar-menu, .navbar-start, @@ -9817,10 +9857,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i display: flex; } .navbar { - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); } .navbar.is-spaced { - padding: 1rem 2rem; + padding: var(--bulma-navbar-padding-vertical) var(--bulma-navbar-padding-horizontal); } .navbar.is-spaced .navbar-start, .navbar.is-spaced .navbar-end { @@ -9828,7 +9868,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar.is-spaced a.navbar-item, .navbar.is-spaced .navbar-link { - border-radius: 0.375em; + border-radius: var(--bulma-radius); } .navbar.is-transparent a.navbar-item:focus, .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, .navbar.is-transparent .navbar-link:focus, @@ -9840,12 +9880,12 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i background-color: transparent !important; } .navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { - background-color: whitesmoke; - color: #0a0a0a; + background-color: var(--bulma-navbar-dropdown-item-hover-background-color); + color: var(--bulma-navbar-dropdown-item-hover-color); } .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { - background-color: whitesmoke; - color: #485fc7; + background-color: var(--bulma-navbar-dropdown-item-active-background-color); + color: var(--bulma-navbar-dropdown-item-active-color); } .navbar-burger { display: none; @@ -9862,8 +9902,8 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i transform: rotate(135deg) translate(0.25em, -0.25em); } .navbar-item.has-dropdown-up .navbar-dropdown { - border-bottom: 2px solid #dbdbdb; - border-radius: 6px 6px 0 0; + border-bottom: var(--bulma-navbar-dropdown-border-top); + border-radius: var(--bulma-navbar-dropdown-radius) var(--bulma-navbar-dropdown-radius) 0 0; border-top: none; bottom: 100%; box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); @@ -9890,10 +9930,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i margin-left: auto; } .navbar-dropdown { - background-color: white; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - border-top: 2px solid #dbdbdb; + background-color: var(--bulma-navbar-dropdown-background-color); + border-bottom-left-radius: var(--bulma-navbar-dropdown-radius); + border-bottom-right-radius: var(--bulma-navbar-dropdown-radius); + border-top: var(--bulma-navbar-dropdown-border-top); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); display: none; font-size: 0.875rem; @@ -9901,7 +9941,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i min-width: 100%; position: absolute; top: 100%; - z-index: 20; + z-index: var(--bulma-navbar-dropdown-z); } .navbar-dropdown .navbar-item { padding: 0.375rem 1rem; @@ -9911,23 +9951,23 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i padding-right: 3rem; } .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { - background-color: whitesmoke; - color: #0a0a0a; + background-color: var(--bulma-navbar-dropdown-item-hover-background-color); + color: var(--bulma-navbar-dropdown-item-hover-color); } .navbar-dropdown a.navbar-item.is-active { - background-color: whitesmoke; - color: #485fc7; + background-color: var(--bulma-navbar-dropdown-item-active-background-color); + color: var(--bulma-navbar-dropdown-item-active-color); } .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { - border-radius: 6px; + border-radius: var(--bulma-navbar-dropdown-boxed-radius); border-top: none; - box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: var(--bulma-navbar-dropdown-boxed-shadow); display: block; opacity: 0; pointer-events: none; - top: calc(100% + (-4px)); + top: calc(100% + (var(--bulma-navbar-dropdown-offset))); transform: translateY(-5px); - transition-duration: 86ms; + transition-duration: var(--bulma-speed); transition-property: opacity, transform; } .navbar-dropdown.is-right { @@ -9949,7 +9989,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i left: 0; position: fixed; right: 0; - z-index: 30; + z-index: var(--bulma-navbar-fixed-z); } .navbar.is-fixed-bottom-desktop { bottom: 0; @@ -9962,63 +10002,63 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } html.has-navbar-fixed-top-desktop, body.has-navbar-fixed-top-desktop { - padding-top: 3.25rem; + padding-top: var(--bulma-navbar-height); } html.has-navbar-fixed-bottom-desktop, body.has-navbar-fixed-bottom-desktop { - padding-bottom: 3.25rem; + padding-bottom: var(--bulma-navbar-height); } html.has-spaced-navbar-fixed-top, body.has-spaced-navbar-fixed-top { - padding-top: 5.25rem; + padding-top: calc( var(--bulma-navbar-height) + calc(var(--bulma-navbar-padding-vertical) * 2)); } html.has-spaced-navbar-fixed-bottom, body.has-spaced-navbar-fixed-bottom { - padding-bottom: 5.25rem; + padding-bottom: calc( var(--bulma-navbar-height) + calc(var(--bulma-navbar-padding-vertical) * 2)); } a.navbar-item.is-active, .navbar-link.is-active { - color: #0a0a0a; + color: var(--bulma-navbar-item-active-color); } a.navbar-item.is-active:not(:focus):not(:hover), .navbar-link.is-active:not(:focus):not(:hover) { - background-color: transparent; + background-color: var(--bulma-navbar-item-active-background-color); } .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #fafafa; + background-color: var(--bulma-navbar-item-hover-background-color); } } .hero.is-fullheight-with-navbar { - min-height: calc(100vh - 3.25rem); + min-height: calc(100vh - var(--bulma-navbar-height)); } .pagination { - font-size: 1rem; - margin: -0.25rem; + font-size: var(--bulma-size-normal); + margin: var(--bulma-pagination-margin); } .pagination.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .pagination.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .pagination.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .pagination.is-rounded .pagination-previous, .pagination.is-rounded .pagination-next { padding-left: 1em; padding-right: 1em; - border-radius: 9999px; + border-radius: var(--bulma-radius-rounded); } .pagination.is-rounded .pagination-link { - border-radius: 9999px; + border-radius: var(--bulma-radius-rounded); } .pagination, @@ -10033,39 +10073,39 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .pagination-next, .pagination-link, .pagination-ellipsis { - font-size: 1em; + font-size: var(--bulma-pagination-item-font-size); justify-content: center; - margin: 0.25rem; - padding-left: 0.5em; - padding-right: 0.5em; + margin: var(--bulma-pagination-item-margin); + padding-left: var(--bulma-pagination-item-padding-left); + padding-right: var(--bulma-pagination-item-padding-right); text-align: center; } .pagination-previous, .pagination-next, .pagination-link { - border-color: #dbdbdb; - color: #363636; - min-width: 2.5em; + border-color: var(--bulma-pagination-border-color); + color: var(--bulma-pagination-color); + min-width: var(--bulma-pagination-min-width); } .pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { - border-color: #b5b5b5; - color: #363636; + border-color: var(--bulma-pagination-hover-border-color); + color: var(--bulma-pagination-hover-color); } .pagination-previous:focus, .pagination-next:focus, .pagination-link:focus { - border-color: #485fc7; + border-color: var(--bulma-pagination-focus-border-color); } .pagination-previous:active, .pagination-next:active, .pagination-link:active { - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); + box-shadow: var(--bulma-pagination-shadow-inset); } .pagination-previous[disabled], .pagination-previous.is-disabled, @@ -10073,28 +10113,28 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .pagination-next.is-disabled, .pagination-link[disabled], .pagination-link.is-disabled { - background-color: #dbdbdb; - border-color: #dbdbdb; + background-color: var(--bulma-pagination-disabled-background-color); + border-color: var(--bulma-pagination-disabled-border-color); box-shadow: none; - color: #7a7a7a; + color: var(--bulma-pagination-disabled-color); opacity: 0.5; } .pagination-previous, .pagination-next { - padding-left: 0.75em; - padding-right: 0.75em; + padding-left: var(--bulma-pagination-nav-padding-left); + padding-right: var(--bulma-pagination-nav-padding-right); white-space: nowrap; } .pagination-link.is-current { - background-color: #485fc7; - border-color: #485fc7; - color: #fff; + background-color: var(--bulma-pagination-current-background-color); + border-color: var(--bulma-pagination-current-border-color); + color: var(--bulma-pagination-current-color); } .pagination-ellipsis { - color: #b5b5b5; + color: var(--bulma-pagination-ellipsis-color); pointer-events: none; } @@ -10169,13 +10209,13 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .panel { - border-radius: 6px; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); - font-size: 1rem; + border-radius: var(--bulma-panel-radius); + box-shadow: var(--bulma-panel-shadow); + font-size: var(--bulma-size-normal); } .panel:not(:last-child) { - margin-bottom: 1.5rem; + margin-bottom: var(--bulma-panel-margin); } .panel.is-white .panel-heading { @@ -10466,48 +10506,48 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .panel-tabs:not(:last-child), .panel-block:not(:last-child) { - border-bottom: 1px solid #ededed; + border-bottom: var(--bulma-panel-item-border); } .panel-heading { - background-color: #ededed; - border-radius: 6px 6px 0 0; - color: #363636; - font-size: 1.25em; - font-weight: 700; - line-height: 1.25; - padding: 0.75em 1em; + background-color: var(--bulma-panel-heading-background-color); + border-radius: var(--bulma-radius-large) var(--bulma-radius-large) 0 0; + color: var(--bulma-panel-heading-color); + font-size: var(--bulma-panel-heading-size); + font-weight: var(--bulma-panel-heading-weight); + line-height: var(--bulma-panel-heading-line-height); + padding: var(--bulma-panel-heading-padding); } .panel-tabs { align-items: flex-end; display: flex; - font-size: 0.875em; + font-size: var(--bulma-panel-tabs-font-size); justify-content: center; } .panel-tabs a { - border-bottom: 1px solid #dbdbdb; + border-bottom: var(--bulma-panel-tab-border-bottom); margin-bottom: -1px; padding: 0.5em; } .panel-tabs a.is-active { - border-bottom-color: #4a4a4a; - color: #363636; + border-bottom-color: var(--bulma-panel-tab-active-border-bottom-color); + color: var(--bulma-panel-tab-active-color); } .panel-list a { - color: #4a4a4a; + color: var(--bulma-panel-list-item-color); } .panel-list a:hover { - color: #485fc7; + color: var(--bulma-panel-list-item-hover-color); } .panel-block { align-items: center; - color: #363636; + color: var(--bulma-panel-block-color); display: flex; justify-content: flex-start; padding: 0.5em 0.75em; @@ -10528,17 +10568,17 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .panel-block.is-active { - border-left-color: #485fc7; - color: #363636; + border-left-color: var(--bulma-panel-block-active-border-left-color); + color: var(--bulma-panel-block-active-color); } .panel-block.is-active .panel-icon { - color: #485fc7; + color: var(--bulma-panel-block-active-icon-color); } .panel-block:last-child { - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; + border-bottom-left-radius: var(--bulma-panel-radius); + border-bottom-right-radius: var(--bulma-panel-radius); } a.panel-block, @@ -10548,7 +10588,7 @@ label.panel-block { a.panel-block:hover, label.panel-block:hover { - background-color: whitesmoke; + background-color: var(--bulma-panel-block-hover-background-color); } .panel-icon { @@ -10559,7 +10599,7 @@ label.panel-block:hover { text-align: center; vertical-align: top; width: 1em; - color: #7a7a7a; + color: var(--bulma-panel-icon-color); margin-right: 0.75em; } @@ -10572,7 +10612,7 @@ label.panel-block:hover { -webkit-overflow-scrolling: touch; align-items: stretch; display: flex; - font-size: 1rem; + font-size: var(--bulma-size-normal); justify-content: space-between; overflow: hidden; overflow-x: auto; @@ -10581,20 +10621,20 @@ label.panel-block:hover { .tabs a { align-items: center; - border-bottom-color: #dbdbdb; - border-bottom-style: solid; - border-bottom-width: 1px; - color: #4a4a4a; + border-bottom-color: var(--bulma-tabs-border-bottom-color); + border-bottom-style: var(--bulma-tabs-border-bottom-style); + border-bottom-width: var(--bulma-tabs-border-bottom-width); + color: var(--bulma-tabs-link-color); display: flex; justify-content: center; - margin-bottom: -1px; - padding: 0.5em 1em; + margin-bottom: calc(-1 * var(--bulma-tabs-border-bottom-width)); + padding: var(--bulma-tabs-link-padding); vertical-align: top; } .tabs a:hover { - border-bottom-color: #363636; - color: #363636; + border-bottom-color: var(--bulma-tabs-link-hover-border-bottom-color); + color: var(--bulma-tabs-link-hover-color); } .tabs li { @@ -10602,15 +10642,15 @@ label.panel-block:hover { } .tabs li.is-active a { - border-bottom-color: #485fc7; - color: #485fc7; + border-bottom-color: var(--bulma-tabs-link-active-border-bottom-color); + color: var(--bulma-tabs-link-active-color); } .tabs ul { align-items: center; - border-bottom-color: #dbdbdb; - border-bottom-style: solid; - border-bottom-width: 1px; + border-bottom-color: var(--bulma-tabs-border-bottom-color); + border-bottom-style: var(--bulma-tabs-border-bottom-style); + border-bottom-width: var(--bulma-tabs-border-bottom-width); display: flex; flex-grow: 1; flex-shrink: 0; @@ -10651,18 +10691,18 @@ label.panel-block:hover { .tabs.is-boxed a { border: 1px solid transparent; - border-radius: 0.375em 0.375em 0 0; + border-radius: var(--bulma-tabs-boxed-link-radius) var(--bulma-tabs-boxed-link-radius) 0 0; } .tabs.is-boxed a:hover { - background-color: whitesmoke; - border-bottom-color: #dbdbdb; + background-color: var(--bulma-tabs-boxed-link-hover-background-color); + border-bottom-color: var(--bulma-tabs-boxed-link-hover-border-bottom-color); } .tabs.is-boxed li.is-active a { - background-color: white; - border-color: #dbdbdb; - border-bottom-color: transparent !important; + background-color: var(--bulma-tabs-boxed-link-active-background-color); + border-color: var(--bulma-tabs-boxed-link-active-border-color); + border-bottom-color: var(--bulma-tabs-boxed-link-active-border-bottom-color) !important; } .tabs.is-fullwidth li { @@ -10671,37 +10711,37 @@ label.panel-block:hover { } .tabs.is-toggle a { - border-color: #dbdbdb; - border-style: solid; - border-width: 1px; + border-color: var(--bulma-tabs-toggle-link-border-color); + border-style: var(--bulma-tabs-toggle-link-border-style); + border-width: var(--bulma-tabs-toggle-link-border-width); margin-bottom: 0; position: relative; } .tabs.is-toggle a:hover { - background-color: whitesmoke; - border-color: #b5b5b5; + background-color: var(--bulma-tabs-toggle-link-hover-background-color); + border-color: var(--bulma-tabs-toggle-link-hover-border-color); z-index: 2; } .tabs.is-toggle li + li { - margin-left: -1px; + margin-left: calc(-1 * var(--bulma-tabs-toggle-link-border-width)); } .tabs.is-toggle li:first-child a { - border-top-left-radius: 0.375em; - border-bottom-left-radius: 0.375em; + border-top-left-radius: var(--bulma-tabs-toggle-link-radius); + border-bottom-left-radius: var(--bulma-tabs-toggle-link-radius); } .tabs.is-toggle li:last-child a { - border-top-right-radius: 0.375em; - border-bottom-right-radius: 0.375em; + border-top-right-radius: var(--bulma-tabs-toggle-link-radius); + border-bottom-right-radius: var(--bulma-tabs-toggle-link-radius); } .tabs.is-toggle li.is-active a { - background-color: #485fc7; - border-color: #485fc7; - color: #fff; + background-color: var(--bulma-tabs-toggle-link-active-background-color); + border-color: var(--bulma-tabs-toggle-link-active-border-color); + color: var(--bulma-tabs-toggle-link-active-color); z-index: 1; } @@ -10710,27 +10750,27 @@ label.panel-block:hover { } .tabs.is-toggle.is-toggle-rounded li:first-child a { - border-bottom-left-radius: 9999px; - border-top-left-radius: 9999px; + border-bottom-left-radius: var(--bulma-radius-rounded); + border-top-left-radius: var(--bulma-radius-rounded); padding-left: 1.25em; } .tabs.is-toggle.is-toggle-rounded li:last-child a { - border-bottom-right-radius: 9999px; - border-top-right-radius: 9999px; + border-bottom-right-radius: var(--bulma-radius-rounded); + border-top-right-radius: var(--bulma-radius-rounded); padding-right: 1.25em; } .tabs.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .tabs.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .tabs.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } /* Bulma Grid */ diff --git a/docs/css/bulma.css b/docs/css/bulma.css index 547a0bdc..132d6554 100644 --- a/docs/css/bulma.css +++ b/docs/css/bulma.css @@ -314,15 +314,42 @@ th:not([align]) { text-align: inherit; } +:root { + --bulma-body-background-color: var(--bulma-scheme-main); + --bulma-body-size: 16px; + --bulma-body-min-width: 300px; + --bulma-body-rendering: optimizeLegibility; + --bulma-body-family: var(--bulma-family-primary); + --bulma-body-overflow-x: hidden; + --bulma-body-overflow-y: scroll; + --bulma-body-color: var(--bulma-text); + --bulma-body-font-size: 1em; + --bulma-body-weight: var(--bulma-weight-normal); + --bulma-body-line-height: 1.5; + --bulma-code-family: var(--bulma-family-code); + --bulma-code-padding: 0.25em 0.5em 0.25em; + --bulma-code-weight: normal; + --bulma-code-size: 0.875em; + --bulma-small-font-size: 0.875em; + --bulma-hr-background-color: var(--bulma-background); + --bulma-hr-height: 2px; + --bulma-hr-margin: 1.5rem 0; + --bulma-strong-color: var(--bulma-text-strong); + --bulma-strong-weight: var(--bulma-weight-bold); + --bulma-pre-font-size: 0.875em; + --bulma-pre-padding: 1.25rem 1.5rem; + --bulma-pre-code-font-size: 1em; +} + html { - background-color: white; - font-size: 16px; + background-color: var(--bulma-body-background-color); + font-size: var(--bulma-body-size); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - min-width: 300px; - overflow-x: hidden; - overflow-y: scroll; - text-rendering: optimizeLegibility; + min-width: var(--bulma-body-min-width); + overflow-x: var(--bulma-body-overflow-x); + overflow-y: var(--bulma-body-overflow-y); + text-rendering: var(--bulma-body-rendering); text-size-adjust: 100%; } @@ -342,25 +369,25 @@ input, optgroup, select, textarea { - font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-family: var(--bulma-body-family); } code, pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; - font-family: monospace; + font-family: var(--bulma-code-family); } body { - color: #4a4a4a; - font-size: 1em; - font-weight: 400; - line-height: 1.5; + color: var(--bulma-body-color); + font-size: var(--bulma-body-font-size); + font-weight: var(--bulma-body-weight); + line-height: var(--bulma-body-line-height); } a { - color: #485fc7; + color: var(--bulma-link); cursor: pointer; text-decoration: none; } @@ -370,23 +397,23 @@ a strong { } a:hover { - color: #363636; + color: var(--bulma-link-hover); } code { - background-color: whitesmoke; - color: #da1039; - font-size: 0.875em; - font-weight: normal; - padding: 0.25em 0.5em 0.25em; + background-color: var(--bulma-code-background); + color: var(--bulma-code); + font-size: var(--bulma-code-size); + font-weight: var(--bulma-code-weight); + padding: var(--bulma-code-padding); } hr { - background-color: whitesmoke; + background-color: var(--bulma-hr-background-color); border: none; display: block; - height: 2px; - margin: 1.5rem 0; + height: var(--bulma-hr-height); + margin: var(--bulma-hr-margin); } img { @@ -400,7 +427,7 @@ input[type="radio"] { } small { - font-size: 0.875em; + font-size: var(--bulma-small-font-size); } span { @@ -409,8 +436,8 @@ span { } strong { - color: #363636; - font-weight: 700; + color: var(--bulma-strong-color); + font-weight: var(--bulma-strong-weight); } fieldset { @@ -419,11 +446,11 @@ fieldset { pre { -webkit-overflow-scrolling: touch; - background-color: whitesmoke; - color: #4a4a4a; - font-size: 0.875em; + background-color: var(--bulma-pre-background); + color: var(--bulma-pre); + font-size: var(--bulma-pre-font-size); overflow-x: auto; - padding: 1.25rem 1.5rem; + padding: var(--bulma-pre-padding); white-space: pre; word-wrap: normal; } @@ -431,7 +458,7 @@ pre { pre code { background-color: transparent; color: currentColor; - font-size: 1em; + font-size: var(--bulma-pre-code-font-size); padding: 0; } @@ -446,7 +473,7 @@ table th:not([align]) { } table th { - color: #363636; + color: var(--bulma-text-strong); } @keyframes spinAround { @@ -4570,21 +4597,30 @@ fieldset[disabled] .select select:hover { } /* Bulma Components */ +:root { + --bulma-breadcrumb-item-color: var(--bulma-link); + --bulma-breadcrumb-item-hover-color: var(--bulma-link-hover); + --bulma-breadcrumb-item-active-color: var(--bulma-text-strong); + --bulma-breadcrumb-item-padding-vertical: 0; + --bulma-breadcrumb-item-padding-horizontal: 0.75em; + --bulma-breadcrumb-item-separator-color: var(--bulma-border-hover); +} + .breadcrumb { - font-size: 1rem; + font-size: var(--bulma-size-normal); white-space: nowrap; } .breadcrumb a { align-items: center; - color: #485fc7; + color: var(--bulma-breadcrumb-item-color); display: flex; justify-content: center; - padding: 0 0.75em; + padding: var(--bulma-breadcrumb-item-padding-vertical) var(--bulma-breadcrumb-item-padding-horizontal); } .breadcrumb a:hover { - color: #363636; + color: var(--bulma-breadcrumb-item-hover-color); } .breadcrumb li { @@ -4597,13 +4633,13 @@ fieldset[disabled] .select select:hover { } .breadcrumb li.is-active a { - color: #363636; + color: var(--bulma-breadcrumb-item-active-color); cursor: default; pointer-events: none; } .breadcrumb li + li::before { - color: #b5b5b5; + color: var(--bulma-breadcrumb-item-separator-color); content: "/"; } @@ -4634,15 +4670,15 @@ fieldset[disabled] .select select:hover { } .breadcrumb.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .breadcrumb.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .breadcrumb.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .breadcrumb.has-arrow-separator li + li::before { @@ -4661,39 +4697,57 @@ fieldset[disabled] .select select:hover { content: "≻"; } +:root { + --bulma-card-color: var(--bulma-text); + --bulma-card-background-color: var(--bulma-scheme-main); + --bulma-card-shadow: var(--bulma-shadow); + --bulma-card-radius: 0.25rem; + --bulma-card-header-background-color: transparent; + --bulma-card-header-color: var(--bulma-text-strong); + --bulma-card-header-padding: 0.75rem 1rem; + --bulma-card-header-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); + --bulma-card-header-weight: var(--bulma-weight-bold); + --bulma-card-content-background-color: transparent; + --bulma-card-content-padding: 1.5rem; + --bulma-card-footer-background-color: transparent; + --bulma-card-footer-border-top: 1px solid var(--bulma-border-light); + --bulma-card-footer-padding: 0.75rem; + --bulma-card-media-margin: var(--bulma-block-spacing); +} + .card { - background-color: white; - border-radius: 0.25rem; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); - color: #4a4a4a; + background-color: var(--bulma-card-background-color); + border-radius: var(--bulma-card-radius); + box-shadow: var(--bulma-card-shadow); + color: var(--bulma-card-color); max-width: 100%; position: relative; } .card-header:first-child, .card-content:first-child, .card-footer:first-child { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-top-left-radius: var(--bulma-card-radius); + border-top-right-radius: var(--bulma-card-radius); } .card-header:last-child, .card-content:last-child, .card-footer:last-child { - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: var(--bulma-card-radius); + border-bottom-right-radius: var(--bulma-card-radius); } .card-header { - background-color: transparent; + background-color: var(--bulma-card-header-background-color); align-items: stretch; - box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); + box-shadow: var(--bulma-card-header-shadow); display: flex; } .card-header-title { align-items: center; - color: #363636; + color: var(--bulma-card-header-color); display: flex; flex-grow: 1; - font-weight: 700; - padding: 0.75rem 1rem; + font-weight: var(--bulma-card-header-weight); + padding: var(--bulma-card-header-padding); } .card-header-title.is-centered { @@ -4715,7 +4769,7 @@ fieldset[disabled] .select select:hover { cursor: pointer; display: flex; justify-content: center; - padding: 0.75rem 1rem; + padding: var(--bulma-card-header-padding); } .card-image { @@ -4724,23 +4778,23 @@ fieldset[disabled] .select select:hover { } .card-image:first-child img { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; + border-top-left-radius: var(--bulma-card-radius); + border-top-right-radius: var(--bulma-card-radius); } .card-image:last-child img { - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: var(--bulma-card-radius); + border-bottom-right-radius: var(--bulma-card-radius); } .card-content { - background-color: transparent; - padding: 1.5rem; + background-color: var(--bulma-card-content-background-color); + padding: var(--bulma-card-content-padding); } .card-footer { - background-color: transparent; - border-top: 1px solid #ededed; + background-color: var(--bulma-card-footer-background-color); + border-top: var(--bulma-card-footer-border-top); align-items: stretch; display: flex; } @@ -4752,15 +4806,33 @@ fieldset[disabled] .select select:hover { flex-grow: 1; flex-shrink: 0; justify-content: center; - padding: 0.75rem; + padding: var(--bulma-card-footer-padding); } .card-footer-item:not(:last-child) { - border-right: 1px solid #ededed; + border-right: var(--bulma-card-footer-border-top); } .card .media:not(:last-child) { - margin-bottom: 1.5rem; + margin-bottom: var(--bulma-card-media-margin); +} + +:root { + --bulma-dropdown-menu-min-width: 12rem; + --bulma-dropdown-content-background-color: var(--bulma-scheme-main); + --bulma-dropdown-content-arrow: var(--bulma-link); + --bulma-dropdown-content-offset: 4px; + --bulma-dropdown-content-padding-bottom: 0.5rem; + --bulma-dropdown-content-padding-top: 0.5rem; + --bulma-dropdown-content-radius: var(--bulma-radius); + --bulma-dropdown-content-shadow: var(--bulma-shadow); + --bulma-dropdown-content-z: 20; + --bulma-dropdown-item-color: var(--bulma-text); + --bulma-dropdown-item-hover-color: var(--bulma-scheme-invert); + --bulma-dropdown-item-hover-background-color: var(--bulma-background); + --bulma-dropdown-item-active-color: var(--bulma-link-invert); + --bulma-dropdown-item-active-background-color: var(--bulma-link); + --bulma-dropdown-divider-background-color: var(--bulma-border-light); } .dropdown { @@ -4780,7 +4852,7 @@ fieldset[disabled] .select select:hover { .dropdown.is-up .dropdown-menu { bottom: 100%; - padding-bottom: 4px; + padding-bottom: var(--bulma-dropdown-content-offset); padding-top: initial; top: auto; } @@ -4788,23 +4860,23 @@ fieldset[disabled] .select select:hover { .dropdown-menu { display: none; left: 0; - min-width: 12rem; - padding-top: 4px; + min-width: var(--bulma-dropdown-menu-min-width); + padding-top: var(--bulma-dropdown-content-offset); position: absolute; top: 100%; - z-index: 20; + z-index: var(--bulma-dropdown-content-z); } .dropdown-content { - background-color: white; - border-radius: 4px; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); - padding-bottom: 0.5rem; - padding-top: 0.5rem; + background-color: var(--bulma-dropdown-content-background-color); + border-radius: var(--bulma-dropdown-content-radius); + box-shadow: var(--bulma-dropdown-content-shadow); + padding-bottom: var(--bulma-dropdown-content-padding-bottom); + padding-top: var(--bulma-dropdown-content-padding-top); } .dropdown-item { - color: #4a4a4a; + color: var(--bulma-dropdown-item-color); display: block; font-size: 0.875rem; line-height: 1.5; @@ -4822,18 +4894,18 @@ button.dropdown-item { a.dropdown-item:hover, button.dropdown-item:hover { - background-color: whitesmoke; - color: #0a0a0a; + background-color: var(--bulma-dropdown-item-hover-background-color); + color: var(--bulma-dropdown-item-hover-color); } a.dropdown-item.is-active, button.dropdown-item.is-active { - background-color: #485fc7; - color: #fff; + background-color: var(--bulma-dropdown-item-active-background-color); + color: var(--bulma-dropdown-item-active-color); } .dropdown-divider { - background-color: #ededed; + background-color: var(--bulma-dropdown-divider-background-color); border: none; display: block; height: 1px; @@ -4846,7 +4918,7 @@ button.dropdown-item.is-active { } .level code { - border-radius: 4px; + border-radius: var(--bulma-radius); } .level img { @@ -4869,7 +4941,7 @@ button.dropdown-item.is-active { .level.is-mobile .level-item:not(:last-child) { margin-bottom: 0; - margin-right: 0.75rem; + margin-right: var(--bulma-level-item-spacing); } .level.is-mobile .level-item:not(.is-narrow) { @@ -4901,7 +4973,7 @@ button.dropdown-item.is-active { @media screen and (max-width: 768px) { .level-item:not(:last-child) { - margin-bottom: 0.75rem; + margin-bottom: var(--bulma-level-item-spacing); } } @@ -4920,7 +4992,7 @@ button.dropdown-item.is-active { @media screen and (min-width: 769px), print { .level-left .level-item:not(:last-child), .level-right .level-item:not(:last-child) { - margin-right: 0.75rem; + margin-right: var(--bulma-level-item-spacing); } } @@ -4952,6 +5024,17 @@ button.dropdown-item.is-active { } } +:root { + --bulma-media-border-color: rgba(219, 219, 219, 0.5); + --bulma-media-border-size: 1px; + --bulma-media-spacing: 1rem; + --bulma-media-spacing-large: 1.5rem; + --bulma-media-content-spacing: 0.75rem; + --bulma-media-level-1-spacing: 0.75rem; + --bulma-media-level-1-content-spacing: 0.5rem; + --bulma-media-level-2-spacing: 0.5rem; +} + .media { align-items: flex-start; display: flex; @@ -4959,37 +5042,41 @@ button.dropdown-item.is-active { } .media .content:not(:last-child) { - margin-bottom: 0.75rem; + margin-bottom: var(--bulma-media-content-spacing); } .media .media { - border-top: 1px solid rgba(219, 219, 219, 0.5); + border-top-color: var(--bulma-media-border-color); + border-top-style: solid; + border-top-width: var(--bulma-media-border-size); display: flex; - padding-top: 0.75rem; + padding-top: var(--bulma-media-level-1-spacing); } .media .media .content:not(:last-child), .media .media .control:not(:last-child) { - margin-bottom: 0.5rem; + margin-bottom: var(--bulma-media-level-1-content-spacing); } .media .media .media { - padding-top: 0.5rem; + padding-top: var(--bulma-media-level-2-spacing); } .media .media .media + .media { - margin-top: 0.5rem; + margin-top: var(--bulma-media-level-2-spacing); } .media + .media { - border-top: 1px solid rgba(219, 219, 219, 0.5); - margin-top: 1rem; - padding-top: 1rem; + border-top-color: var(--bulma-media-border-color); + border-top-style: solid; + border-top-width: var(--bulma-media-border-size); + margin-top: var(--bulma-media-spacing); + padding-top: var(--bulma-media-spacing); } .media.is-large + .media { - margin-top: 1.5rem; - padding-top: 1.5rem; + margin-top: var(--bulma-media-spacing-large); + padding-top: var(--bulma-media-spacing-large); } .media-left, @@ -5000,11 +5087,11 @@ button.dropdown-item.is-active { } .media-left { - margin-right: 1rem; + margin-right: var(--bulma-media-spacing); } .media-right { - margin-left: 1rem; + margin-left: var(--bulma-media-spacing); } .media-content { @@ -5020,68 +5107,104 @@ button.dropdown-item.is-active { } } +:root { + --bulma-menu-item-color: var(--bulma-text); + --bulma-menu-item-radius: var(--bulma-radius-small); + --bulma-menu-item-hover-color: var(--bulma-text-strong); + --bulma-menu-item-hover-background-color: var(--bulma-background); + --bulma-menu-item-active-color: var(--bulma-link-invert); + --bulma-menu-item-active-background-color: var(--bulma-link); + --bulma-menu-list-border-left: 1px solid var(--bulma-border); + --bulma-menu-list-line-height: 1.25; + --bulma-menu-list-link-padding: 0.5em 0.75em; + --bulma-menu-nested-list-margin: 0.75em; + --bulma-menu-nested-list-padding-left: 0.75em; + --bulma-menu-label-color: var(--bulma-text-light); + --bulma-menu-label-font-size: 0.75em; + --bulma-menu-label-letter-spacing: 0.1em; + --bulma-menu-label-spacing: 1em; +} + .menu { - font-size: 1rem; + font-size: var(--bulma-size-normal); } .menu.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .menu.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .menu.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .menu-list { - line-height: 1.25; + line-height: var(--bulma-menu-list-line-height); } .menu-list a { - border-radius: 2px; - color: #4a4a4a; + border-radius: var(--bulma-menu-item-radius); + color: var(--bulma-menu-item-color); display: block; - padding: 0.5em 0.75em; + padding: var(--bulma-menu-list-link-padding); } .menu-list a:hover { - background-color: whitesmoke; - color: #363636; + background-color: var(--bulma-menu-item-hover-background-color); + color: var(--bulma-menu-item-hover-color); } .menu-list a.is-active { - background-color: #485fc7; - color: #fff; + background-color: var(--bulma-menu-item-active-background-color); + color: var(--bulma-menu-item-active-color); } .menu-list li ul { - border-left: 1px solid #dbdbdb; - margin: 0.75em; - padding-left: 0.75em; + border-left: var(--bulma-menu-list-border-left); + margin: var(--bulma-menu-nested-list-margin); + padding-left: var(--bulma-menu-nested-list-padding-left); } .menu-label { - color: #7a7a7a; - font-size: 0.75em; - letter-spacing: 0.1em; + color: var(--bulma-menu-label-color); + font-size: var(--bulma-menu-label-font-size); + letter-spacing: var(--bulma-menu-label-letter-spacing); text-transform: uppercase; } .menu-label:not(:first-child) { - margin-top: 1em; + margin-top: var(--bulma-menu-label-spacing); } .menu-label:not(:last-child) { - margin-bottom: 1em; + margin-bottom: var(--bulma-menu-label-spacing); +} + +:root { + --bulma-message-background-color: var(--bulma-background); + --bulma-message-radius: var(--bulma-radius); + --bulma-message-header-background-color: var(--bulma-text); + --bulma-message-header-color: var(--bulma-text-invert); + --bulma-message-header-weight: var(--bulma-weight-bold); + --bulma-message-header-padding: 0.75em 1em; + --bulma-message-header-radius: var(--bulma-radius); + --bulma-message-body-border-color: var(--bulma-border); + --bulma-message-body-border-width: 0 0 0 4px; + --bulma-message-body-color: var(--bulma-text); + --bulma-message-body-padding: 1.25em 1.5em; + --bulma-message-body-radius: var(--bulma-radius); + --bulma-message-body-pre-background-color: var(--bulma-scheme-main); + --bulma-message-body-pre-code-background-color: transparent; + --bulma-message-header-body-border-width: 0; } .message { - background-color: whitesmoke; - border-radius: 4px; - font-size: 1rem; + background-color: var(--bulma-message-background-color); + border-radius: var(--bulma-message-radius); + font-size: var(--bulma-size-normal); } .message strong { @@ -5094,15 +5217,15 @@ button.dropdown-item.is-active { } .message.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .message.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .message.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .message.is-white { @@ -5243,14 +5366,14 @@ button.dropdown-item.is-active { .message-header { align-items: center; - background-color: #4a4a4a; - border-radius: 4px 4px 0 0; - color: #fff; + background-color: var(--bulma-message-header-background-color); + border-radius: var(--bulma-message-header-radius) var(--bulma-message-header-radius) 0 0; + color: var(--bulma-message-header-color); display: flex; - font-weight: 700; + font-weight: var(--bulma-message-header-weight); justify-content: space-between; line-height: 1.25; - padding: 0.75em 1em; + padding: var(--bulma-message-header-padding); position: relative; } @@ -5261,27 +5384,51 @@ button.dropdown-item.is-active { } .message-header + .message-body { - border-width: 0; + border-width: var(--bulma-message-header-body-border-width); border-top-left-radius: 0; border-top-right-radius: 0; } .message-body { - border-color: #dbdbdb; - border-radius: 4px; + border-color: var(--bulma-message-body-border-color); + border-radius: var(--bulma-message-body-radius); border-style: solid; - border-width: 0 0 0 4px; - color: #4a4a4a; - padding: 1.25em 1.5em; + border-width: var(--bulma-message-body-border-width); + color: var(--bulma-message-body-color); + padding: var(--bulma-message-body-padding); } .message-body code, .message-body pre { - background-color: white; + background-color: var(--bulma-message-body-pre-background-color); } .message-body pre code { - background-color: transparent; + background-color: var(--bulma-message-body-pre-code-background-color); +} + +:root { + --bulma-modal-z: 40; + --bulma-modal-background-background-color: rgba(10, 10, 10, 0.86); + --bulma-modal-content-width: 640px; + --bulma-modal-content-margin-mobile: 20px; + --bulma-modal-content-spacing-mobile: 160px; + --bulma-modal-content-spacing-tablet: 40px; + --bulma-modal-close-dimensions: 40px; + --bulma-modal-close-right: 20px; + --bulma-modal-close-top: 20px; + --bulma-modal-card-spacing: 40px; + --bulma-modal-card-head-background-color: var(--bulma-background); + --bulma-modal-card-head-border-bottom: 1px solid var(--bulma-border); + --bulma-modal-card-head-padding: 20px; + --bulma-modal-card-head-radius: var(--bulma-radius-large); + --bulma-modal-card-title-color: var(--bulma-text-strong); + --bulma-modal-card-title-line-height: 1; + --bulma-modal-card-title-size: var(--bulma-size-4); + --bulma-modal-card-foot-radius: var(--bulma-radius-large); + --bulma-modal-card-foot-border-top: 1px solid var(--bulma-border); + --bulma-modal-card-body-background-color: var(--bulma-scheme-main); + --bulma-modal-card-body-padding: 20px; } .modal { @@ -5291,7 +5438,7 @@ button.dropdown-item.is-active { justify-content: center; overflow: hidden; position: fixed; - z-index: 40; + z-index: var(--bulma-modal-z); } .modal.is-active { @@ -5299,13 +5446,13 @@ button.dropdown-item.is-active { } .modal-background { - background-color: rgba(10, 10, 10, 0.86); + background-color: var(--bulma-modal-background-background-color); } .modal-content, .modal-card { - margin: 0 20px; - max-height: calc(100vh - 160px); + margin: 0 var(--bulma-modal-content-margin-mobile); + max-height: calc(100vh - var(--bulma-modal-content-spacing-mobile)); overflow: auto; position: relative; width: 100%; @@ -5315,24 +5462,24 @@ button.dropdown-item.is-active { .modal-content, .modal-card { margin: 0 auto; - max-height: calc(100vh - 40px); - width: 640px; + max-height: calc(100vh - var(--bulma-modal-content-spacing-tablet)); + width: var(--bulma-modal-content-width); } } .modal-close { background: none; - height: 40px; + height: var(--bulma-modal-close-dimensions); position: fixed; - right: 20px; - top: 20px; - width: 40px; + right: var(--bulma-modal-close-right); + top: var(--bulma-modal-close-top); + width: var(--bulma-modal-close-dimensions); } .modal-card { display: flex; flex-direction: column; - max-height: calc(100vh - 40px); + max-height: calc(100vh - var(--bulma-modal-card-spacing)); overflow: hidden; -ms-overflow-y: visible; } @@ -5340,32 +5487,32 @@ button.dropdown-item.is-active { .modal-card-head, .modal-card-foot { align-items: center; - background-color: whitesmoke; + background-color: var(--bulma-modal-card-head-background-color); display: flex; flex-shrink: 0; justify-content: flex-start; - padding: 20px; + padding: var(--bulma-modal-card-head-padding); position: relative; } .modal-card-head { - border-bottom: 1px solid #dbdbdb; - border-top-left-radius: 6px; - border-top-right-radius: 6px; + border-bottom: var(--bulma-modal-card-head-border-bottom); + border-top-left-radius: var(--bulma-modal-card-head-radius); + border-top-right-radius: var(--bulma-modal-card-head-radius); } .modal-card-title { - color: #363636; + color: var(--bulma-modal-card-title-color); flex-grow: 1; flex-shrink: 0; - font-size: 1.5rem; - line-height: 1; + font-size: var(--bulma-modal-card-title-size); + line-height: var(--bulma-modal-card-title-line-height); } .modal-card-foot { - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - border-top: 1px solid #dbdbdb; + border-bottom-left-radius: var(--bulma-modal-card-foot-radius); + border-bottom-right-radius: var(--bulma-modal-card-foot-radius); + border-top: var(--bulma-modal-card-foot-border-top); } .modal-card-foot .button:not(:last-child) { @@ -5374,18 +5521,58 @@ button.dropdown-item.is-active { .modal-card-body { -webkit-overflow-scrolling: touch; - background-color: white; + background-color: var(--bulma-modal-card-body-background-color); flex-grow: 1; flex-shrink: 1; overflow: auto; - padding: 20px; + padding: var(--bulma-modal-card-body-padding); +} + +:root { + --bulma-navbar-background-color: var(--bulma-scheme-main); + --bulma-navbar-box-shadow-size: 0 2px 0 0; + --bulma-navbar-box-shadow-color: var(--bulma-background); + --bulma-navbar-height: 3.25rem; + --bulma-navbar-padding-vertical: 1rem; + --bulma-navbar-padding-horizontal: 2rem; + --bulma-navbar-z: 30; + --bulma-navbar-fixed-z: 30; + --bulma-navbar-item-color: var(--bulma-text); + --bulma-navbar-item-hover-color: var(--bulma-link); + --bulma-navbar-item-hover-background-color: var(--bulma-scheme-main-bis); + --bulma-navbar-item-active-color: var(--bulma-scheme-invert); + --bulma-navbar-item-active-background-color: transparent; + --bulma-navbar-item-img-max-height: 1.75rem; + --bulma-navbar-burger-color: var(--bulma-navbar-item-color); + --bulma-navbar-tab-hover-background-color: transparent; + --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link); + --bulma-navbar-tab-active-color: var(--bulma-link); + --bulma-navbar-tab-active-background-color: transparent; + --bulma-navbar-tab-active-border-bottom-color: var(--bulma-link); + --bulma-navbar-tab-active-border-bottom-style: solid; + --bulma-navbar-tab-active-border-bottom-width: 3px; + --bulma-navbar-dropdown-background-color: var(--bulma-scheme-main); + --bulma-navbar-dropdown-border-top: 2px solid var(--bulma-border); + --bulma-navbar-dropdown-offset: -4px; + --bulma-navbar-dropdown-arrow: var(--bulma-link); + --bulma-navbar-dropdown-radius: var(--bulma-radius-large); + --bulma-navbar-dropdown-z: 20; + --bulma-navbar-dropdown-boxed-radius: var(--bulma-radius-large); + --bulma-navbar-dropdown-boxed-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + --bulma-navbar-dropdown-item-hover-color: var(--bulma-scheme-invert); + --bulma-navbar-dropdown-item-hover-background-color: var(--bulma-background); + --bulma-navbar-dropdown-item-active-color: var(--bulma-link); + --bulma-navbar-dropdown-item-active-background-color: var(--bulma-background); + --bulma-navbar-divider-background-color: var(--bulma-background); + --bulma-navbar-divider-height: 2px; + --bulma-navbar-bottom-box-shadow-size: 0 -2px 0 0; } .navbar { - background-color: white; - min-height: 3.25rem; + background-color: var(--bulma-navbar-background-color); + min-height: var(--bulma-navbar-height); position: relative; - z-index: 30; + z-index: var(--bulma-navbar-z); } .navbar.is-white { @@ -6011,19 +6198,19 @@ button.dropdown-item.is-active { .navbar > .container { align-items: stretch; display: flex; - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); width: 100%; } .navbar.has-shadow { - box-shadow: 0 2px 0 0 whitesmoke; + box-shadow: var(--bulma-navbar-box-shadow-size) var(--bulma-navbar-box-shadow-color); } .navbar.is-fixed-bottom, .navbar.is-fixed-top { left: 0; position: fixed; right: 0; - z-index: 30; + z-index: var(--bulma-navbar-fixed-z); } .navbar.is-fixed-bottom { @@ -6031,7 +6218,7 @@ button.dropdown-item.is-active { } .navbar.is-fixed-bottom.has-shadow { - box-shadow: 0 -2px 0 0 whitesmoke; + box-shadow: var(--bulma-navbar-bottom-box-shadow-size) var(--bulma-navbar-box-shadow-color); } .navbar.is-fixed-top { @@ -6040,12 +6227,12 @@ button.dropdown-item.is-active { html.has-navbar-fixed-top, body.has-navbar-fixed-top { - padding-top: 3.25rem; + padding-top: var(--bulma-navbar-height); } html.has-navbar-fixed-bottom, body.has-navbar-fixed-bottom { - padding-bottom: 3.25rem; + padding-bottom: var(--bulma-navbar-height); } .navbar-brand, @@ -6053,7 +6240,7 @@ body.has-navbar-fixed-bottom { align-items: stretch; display: flex; flex-shrink: 0; - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); } .navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover { @@ -6068,7 +6255,7 @@ body.has-navbar-fixed-bottom { } .navbar-burger { - color: #4a4a4a; + color: var(--bulma-navbar-burger-color); -moz-appearance: none; -webkit-appearance: none; appearance: none; @@ -6076,9 +6263,9 @@ body.has-navbar-fixed-bottom { border: none; cursor: pointer; display: block; - height: 3.25rem; + height: var(--bulma-navbar-height); position: relative; - width: 3.25rem; + width: var(--bulma-navbar-height); margin-left: auto; } @@ -6129,7 +6316,7 @@ body.has-navbar-fixed-bottom { .navbar-item, .navbar-link { - color: #4a4a4a; + color: var(--bulma-navbar-item-color); display: block; line-height: 1.5; padding: 0.5rem 0.75rem; @@ -6152,8 +6339,8 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active { - background-color: #fafafa; - color: #485fc7; + background-color: var(--bulma-navbar-item-hover-background-color); + color: var(--bulma-navbar-item-hover-color); } .navbar-item { @@ -6162,7 +6349,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-item img { - max-height: 1.75rem; + max-height: var(--bulma-navbar-item-img-max-height); } .navbar-item.has-dropdown { @@ -6176,22 +6363,22 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .navbar-item.is-tab { border-bottom: 1px solid transparent; - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); padding-bottom: calc(0.5rem - 1px); } .navbar-item.is-tab:focus, .navbar-item.is-tab:hover { - background-color: transparent; - border-bottom-color: #485fc7; + background-color: var(--bulma-navbar-tab-hover-background-color); + border-bottom-color: var(--bulma-navbar-tab-hover-border-bottom-color); } .navbar-item.is-tab.is-active { - background-color: transparent; - border-bottom-color: #485fc7; - border-bottom-style: solid; - border-bottom-width: 3px; - color: #485fc7; - padding-bottom: calc(0.5rem - 3px); + background-color: var(--bulma-navbar-tab-active-background-color); + border-bottom-color: var(--bulma-navbar-tab-active-border-bottom-color); + border-bottom-style: var(--bulma-navbar-tab-active-border-bottom-style); + border-bottom-width: var(--bulma-navbar-tab-active-border-bottom-width); + color: var(--bulma-navbar-tab-active-color); + padding-bottom: calc( 0.5rem - var(--bulma-navbar-tab-active-border-bottom-width)); } .navbar-content { @@ -6204,7 +6391,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-link:not(.is-arrowless)::after { - border-color: #485fc7; + border-color: var(--bulma-navbar-dropdown-arrow); margin-top: -0.375em; right: 1.125em; } @@ -6221,10 +6408,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-divider { - background-color: whitesmoke; + background-color: var(--bulma-navbar-divider-background-color); border: none; display: none; - height: 2px; + height: var(--bulma-navbar-divider-height); margin: 0.5rem 0; } @@ -6241,7 +6428,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i display: none; } .navbar-menu { - background-color: white; + background-color: var(--bulma-navbar-background-color); box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); padding: 0.5rem 0; } @@ -6252,7 +6439,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i left: 0; position: fixed; right: 0; - z-index: 30; + z-index: var(--bulma-navbar-fixed-z); } .navbar.is-fixed-bottom-touch { bottom: 0; @@ -6265,16 +6452,16 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu { -webkit-overflow-scrolling: touch; - max-height: calc(100vh - 3.25rem); + max-height: calc(100vh - var(--bulma-navbar-height)); overflow: auto; } html.has-navbar-fixed-top-touch, body.has-navbar-fixed-top-touch { - padding-top: 3.25rem; + padding-top: var(--bulma-navbar-height); } html.has-navbar-fixed-bottom-touch, body.has-navbar-fixed-bottom-touch { - padding-bottom: 3.25rem; + padding-bottom: var(--bulma-navbar-height); } } @@ -6287,10 +6474,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i display: flex; } .navbar { - min-height: 3.25rem; + min-height: var(--bulma-navbar-height); } .navbar.is-spaced { - padding: 1rem 2rem; + padding: var(--bulma-navbar-padding-vertical) var(--bulma-navbar-padding-horizontal); } .navbar.is-spaced .navbar-start, .navbar.is-spaced .navbar-end { @@ -6298,7 +6485,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar.is-spaced a.navbar-item, .navbar.is-spaced .navbar-link { - border-radius: 4px; + border-radius: var(--bulma-radius); } .navbar.is-transparent a.navbar-item:focus, .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, .navbar.is-transparent .navbar-link:focus, @@ -6310,12 +6497,12 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i background-color: transparent !important; } .navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { - background-color: whitesmoke; - color: #0a0a0a; + background-color: var(--bulma-navbar-dropdown-item-hover-background-color); + color: var(--bulma-navbar-dropdown-item-hover-color); } .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { - background-color: whitesmoke; - color: #485fc7; + background-color: var(--bulma-navbar-dropdown-item-active-background-color); + color: var(--bulma-navbar-dropdown-item-active-color); } .navbar-burger { display: none; @@ -6332,8 +6519,8 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i transform: rotate(135deg) translate(0.25em, -0.25em); } .navbar-item.has-dropdown-up .navbar-dropdown { - border-bottom: 2px solid #dbdbdb; - border-radius: 6px 6px 0 0; + border-bottom: var(--bulma-navbar-dropdown-border-top); + border-radius: var(--bulma-navbar-dropdown-radius) var(--bulma-navbar-dropdown-radius) 0 0; border-top: none; bottom: 100%; box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); @@ -6360,10 +6547,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i margin-left: auto; } .navbar-dropdown { - background-color: white; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - border-top: 2px solid #dbdbdb; + background-color: var(--bulma-navbar-dropdown-background-color); + border-bottom-left-radius: var(--bulma-navbar-dropdown-radius); + border-bottom-right-radius: var(--bulma-navbar-dropdown-radius); + border-top: var(--bulma-navbar-dropdown-border-top); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); display: none; font-size: 0.875rem; @@ -6371,7 +6558,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i min-width: 100%; position: absolute; top: 100%; - z-index: 20; + z-index: var(--bulma-navbar-dropdown-z); } .navbar-dropdown .navbar-item { padding: 0.375rem 1rem; @@ -6381,23 +6568,23 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i padding-right: 3rem; } .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { - background-color: whitesmoke; - color: #0a0a0a; + background-color: var(--bulma-navbar-dropdown-item-hover-background-color); + color: var(--bulma-navbar-dropdown-item-hover-color); } .navbar-dropdown a.navbar-item.is-active { - background-color: whitesmoke; - color: #485fc7; + background-color: var(--bulma-navbar-dropdown-item-active-background-color); + color: var(--bulma-navbar-dropdown-item-active-color); } .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { - border-radius: 6px; + border-radius: var(--bulma-navbar-dropdown-boxed-radius); border-top: none; - box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: var(--bulma-navbar-dropdown-boxed-shadow); display: block; opacity: 0; pointer-events: none; - top: calc(100% + (-4px)); + top: calc(100% + (var(--bulma-navbar-dropdown-offset))); transform: translateY(-5px); - transition-duration: 86ms; + transition-duration: var(--bulma-speed); transition-property: opacity, transform; } .navbar-dropdown.is-right { @@ -6419,7 +6606,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i left: 0; position: fixed; right: 0; - z-index: 30; + z-index: var(--bulma-navbar-fixed-z); } .navbar.is-fixed-bottom-desktop { bottom: 0; @@ -6432,63 +6619,90 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } html.has-navbar-fixed-top-desktop, body.has-navbar-fixed-top-desktop { - padding-top: 3.25rem; + padding-top: var(--bulma-navbar-height); } html.has-navbar-fixed-bottom-desktop, body.has-navbar-fixed-bottom-desktop { - padding-bottom: 3.25rem; + padding-bottom: var(--bulma-navbar-height); } html.has-spaced-navbar-fixed-top, body.has-spaced-navbar-fixed-top { - padding-top: 5.25rem; + padding-top: calc( var(--bulma-navbar-height) + calc(var(--bulma-navbar-padding-vertical) * 2)); } html.has-spaced-navbar-fixed-bottom, body.has-spaced-navbar-fixed-bottom { - padding-bottom: 5.25rem; + padding-bottom: calc( var(--bulma-navbar-height) + calc(var(--bulma-navbar-padding-vertical) * 2)); } a.navbar-item.is-active, .navbar-link.is-active { - color: #0a0a0a; + color: var(--bulma-navbar-item-active-color); } a.navbar-item.is-active:not(:focus):not(:hover), .navbar-link.is-active:not(:focus):not(:hover) { - background-color: transparent; + background-color: var(--bulma-navbar-item-active-background-color); } .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #fafafa; + background-color: var(--bulma-navbar-item-hover-background-color); } } .hero.is-fullheight-with-navbar { - min-height: calc(100vh - 3.25rem); + min-height: calc(100vh - var(--bulma-navbar-height)); +} + +:root { + --bulma-pagination-color: var(--bulma-text-strong); + --bulma-pagination-border-color: var(--bulma-border); + --bulma-pagination-margin: -0.25rem; + --bulma-pagination-min-width: 2.5em; + --bulma-pagination-item-font-size: 1em; + --bulma-pagination-item-margin: 0.25rem; + --bulma-pagination-item-padding-left: 0.5em; + --bulma-pagination-item-padding-right: 0.5em; + --bulma-pagination-nav-padding-left: 0.75em; + --bulma-pagination-nav-padding-right: 0.75em; + --bulma-pagination-hover-color: var(--bulma-link-hover); + --bulma-pagination-hover-border-color: var(--bulma-link-hover-border); + --bulma-pagination-focus-color: var(--bulma-link-focus); + --bulma-pagination-focus-border-color: var(--bulma-link-focus-border); + --bulma-pagination-active-color: var(--bulma-link-active); + --bulma-pagination-active-border-color: var(--bulma-link-active-border); + --bulma-pagination-disabled-color: var(--bulma-text-light); + --bulma-pagination-disabled-background-color: var(--bulma-border); + --bulma-pagination-disabled-border-color: var(--bulma-border); + --bulma-pagination-current-color: var(--bulma-link-invert); + --bulma-pagination-current-background-color: var(--bulma-link); + --bulma-pagination-current-border-color: var(--bulma-link); + --bulma-pagination-ellipsis-color: var(--bulma-grey-light); + --bulma-pagination-shadow-inset: inset 0 1px 2px rgba(10, 10, 10, 0.2); } .pagination { - font-size: 1rem; - margin: -0.25rem; + font-size: var(--bulma-size-normal); + margin: var(--bulma-pagination-margin); } .pagination.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .pagination.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .pagination.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } .pagination.is-rounded .pagination-previous, .pagination.is-rounded .pagination-next { padding-left: 1em; padding-right: 1em; - border-radius: 9999px; + border-radius: var(--bulma-radius-rounded); } .pagination.is-rounded .pagination-link { - border-radius: 9999px; + border-radius: var(--bulma-radius-rounded); } .pagination, @@ -6503,39 +6717,39 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .pagination-next, .pagination-link, .pagination-ellipsis { - font-size: 1em; + font-size: var(--bulma-pagination-item-font-size); justify-content: center; - margin: 0.25rem; - padding-left: 0.5em; - padding-right: 0.5em; + margin: var(--bulma-pagination-item-margin); + padding-left: var(--bulma-pagination-item-padding-left); + padding-right: var(--bulma-pagination-item-padding-right); text-align: center; } .pagination-previous, .pagination-next, .pagination-link { - border-color: #dbdbdb; - color: #363636; - min-width: 2.5em; + border-color: var(--bulma-pagination-border-color); + color: var(--bulma-pagination-color); + min-width: var(--bulma-pagination-min-width); } .pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { - border-color: #b5b5b5; - color: #363636; + border-color: var(--bulma-pagination-hover-border-color); + color: var(--bulma-pagination-hover-color); } .pagination-previous:focus, .pagination-next:focus, .pagination-link:focus { - border-color: #485fc7; + border-color: var(--bulma-pagination-focus-border-color); } .pagination-previous:active, .pagination-next:active, .pagination-link:active { - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); + box-shadow: var(--bulma-pagination-shadow-inset); } .pagination-previous[disabled], .pagination-previous.is-disabled, @@ -6543,28 +6757,28 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .pagination-next.is-disabled, .pagination-link[disabled], .pagination-link.is-disabled { - background-color: #dbdbdb; - border-color: #dbdbdb; + background-color: var(--bulma-pagination-disabled-background-color); + border-color: var(--bulma-pagination-disabled-border-color); box-shadow: none; - color: #7a7a7a; + color: var(--bulma-pagination-disabled-color); opacity: 0.5; } .pagination-previous, .pagination-next { - padding-left: 0.75em; - padding-right: 0.75em; + padding-left: var(--bulma-pagination-nav-padding-left); + padding-right: var(--bulma-pagination-nav-padding-right); white-space: nowrap; } .pagination-link.is-current { - background-color: #485fc7; - border-color: #485fc7; - color: #fff; + background-color: var(--bulma-pagination-current-background-color); + border-color: var(--bulma-pagination-current-border-color); + color: var(--bulma-pagination-current-color); } .pagination-ellipsis { - color: #b5b5b5; + color: var(--bulma-pagination-ellipsis-color); pointer-events: none; } @@ -6638,14 +6852,40 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } } +:root { + --bulma-panel-margin: var(--bulma-block-spacing); + --bulma-panel-item-border: 1px solid var(--bulma-border-light); + --bulma-panel-radius: var(--bulma-radius-large); + --bulma-panel-shadow: var(--bulma-shadow); + --bulma-panel-heading-background-color: var(--bulma-border-light); + --bulma-panel-heading-color: var(--bulma-text-strong); + --bulma-panel-heading-line-height: 1.25; + --bulma-panel-heading-padding: 0.75em 1em; + --bulma-panel-heading-radius: var(--bulma-radius); + --bulma-panel-heading-size: 1.25em; + --bulma-panel-heading-weight: var(--bulma-weight-bold); + --bulma-panel-tabs-font-size: 0.875em; + --bulma-panel-tab-border-bottom: 1px solid var(--bulma-border); + --bulma-panel-tab-active-border-bottom-color: var(--bulma-link-active-border); + --bulma-panel-tab-active-color: var(--bulma-link-active); + --bulma-panel-list-item-color: var(--bulma-text); + --bulma-panel-list-item-hover-color: var(--bulma-link); + --bulma-panel-block-color: var(--bulma-text-strong); + --bulma-panel-block-hover-background-color: var(--bulma-background); + --bulma-panel-block-active-border-left-color: var(--bulma-link); + --bulma-panel-block-active-color: var(--bulma-link-active); + --bulma-panel-block-active-icon-color: var(--bulma-link); + --bulma-panel-icon-color: var(--bulma-text-light); +} + .panel { - border-radius: 6px; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); - font-size: 1rem; + border-radius: var(--bulma-panel-radius); + box-shadow: var(--bulma-panel-shadow); + font-size: var(--bulma-size-normal); } .panel:not(:last-child) { - margin-bottom: 1.5rem; + margin-bottom: var(--bulma-panel-margin); } .panel.is-white .panel-heading { @@ -6780,48 +7020,48 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .panel-tabs:not(:last-child), .panel-block:not(:last-child) { - border-bottom: 1px solid #ededed; + border-bottom: var(--bulma-panel-item-border); } .panel-heading { - background-color: #ededed; - border-radius: 6px 6px 0 0; - color: #363636; - font-size: 1.25em; - font-weight: 700; - line-height: 1.25; - padding: 0.75em 1em; + background-color: var(--bulma-panel-heading-background-color); + border-radius: var(--bulma-radius-large) var(--bulma-radius-large) 0 0; + color: var(--bulma-panel-heading-color); + font-size: var(--bulma-panel-heading-size); + font-weight: var(--bulma-panel-heading-weight); + line-height: var(--bulma-panel-heading-line-height); + padding: var(--bulma-panel-heading-padding); } .panel-tabs { align-items: flex-end; display: flex; - font-size: 0.875em; + font-size: var(--bulma-panel-tabs-font-size); justify-content: center; } .panel-tabs a { - border-bottom: 1px solid #dbdbdb; + border-bottom: var(--bulma-panel-tab-border-bottom); margin-bottom: -1px; padding: 0.5em; } .panel-tabs a.is-active { - border-bottom-color: #4a4a4a; - color: #363636; + border-bottom-color: var(--bulma-panel-tab-active-border-bottom-color); + color: var(--bulma-panel-tab-active-color); } .panel-list a { - color: #4a4a4a; + color: var(--bulma-panel-list-item-color); } .panel-list a:hover { - color: #485fc7; + color: var(--bulma-panel-list-item-hover-color); } .panel-block { align-items: center; - color: #363636; + color: var(--bulma-panel-block-color); display: flex; justify-content: flex-start; padding: 0.5em 0.75em; @@ -6842,17 +7082,17 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .panel-block.is-active { - border-left-color: #485fc7; - color: #363636; + border-left-color: var(--bulma-panel-block-active-border-left-color); + color: var(--bulma-panel-block-active-color); } .panel-block.is-active .panel-icon { - color: #485fc7; + color: var(--bulma-panel-block-active-icon-color); } .panel-block:last-child { - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; + border-bottom-left-radius: var(--bulma-panel-radius); + border-bottom-right-radius: var(--bulma-panel-radius); } a.panel-block, @@ -6862,7 +7102,7 @@ label.panel-block { a.panel-block:hover, label.panel-block:hover { - background-color: whitesmoke; + background-color: var(--bulma-panel-block-hover-background-color); } .panel-icon { @@ -6873,7 +7113,7 @@ label.panel-block:hover { text-align: center; vertical-align: top; width: 1em; - color: #7a7a7a; + color: var(--bulma-panel-icon-color); margin-right: 0.75em; } @@ -6882,11 +7122,38 @@ label.panel-block:hover { line-height: inherit; } +:root { + --bulma-tabs-border-bottom-color: var(--bulma-border); + --bulma-tabs-border-bottom-style: solid; + --bulma-tabs-border-bottom-width: 1px; + --bulma-tabs-link-color: var(--bulma-text); + --bulma-tabs-link-hover-border-bottom-color: var(--bulma-text-strong); + --bulma-tabs-link-hover-color: var(--bulma-text-strong); + --bulma-tabs-link-active-border-bottom-color: var(--bulma-link); + --bulma-tabs-link-active-color: var(--bulma-link); + --bulma-tabs-link-padding: 0.5em 1em; + --bulma-tabs-boxed-link-radius: var(--bulma-radius); + --bulma-tabs-boxed-link-hover-background-color: var(--bulma-background); + --bulma-tabs-boxed-link-hover-border-bottom-color: var(--bulma-border); + --bulma-tabs-boxed-link-active-background-color: var(--bulma-scheme-main); + --bulma-tabs-boxed-link-active-border-color: var(--bulma-border); + --bulma-tabs-boxed-link-active-border-bottom-color: transparent; + --bulma-tabs-toggle-link-border-color: var(--bulma-border); + --bulma-tabs-toggle-link-border-style: solid; + --bulma-tabs-toggle-link-border-width: 1px; + --bulma-tabs-toggle-link-hover-background-color: var(--bulma-background); + --bulma-tabs-toggle-link-hover-border-color: var(--bulma-border-hover); + --bulma-tabs-toggle-link-radius: var(--bulma-radius); + --bulma-tabs-toggle-link-active-background-color: var(--bulma-link); + --bulma-tabs-toggle-link-active-border-color: var(--bulma-link); + --bulma-tabs-toggle-link-active-color: var(--bulma-link-invert); +} + .tabs { -webkit-overflow-scrolling: touch; align-items: stretch; display: flex; - font-size: 1rem; + font-size: var(--bulma-size-normal); justify-content: space-between; overflow: hidden; overflow-x: auto; @@ -6895,20 +7162,20 @@ label.panel-block:hover { .tabs a { align-items: center; - border-bottom-color: #dbdbdb; - border-bottom-style: solid; - border-bottom-width: 1px; - color: #4a4a4a; + border-bottom-color: var(--bulma-tabs-border-bottom-color); + border-bottom-style: var(--bulma-tabs-border-bottom-style); + border-bottom-width: var(--bulma-tabs-border-bottom-width); + color: var(--bulma-tabs-link-color); display: flex; justify-content: center; - margin-bottom: -1px; - padding: 0.5em 1em; + margin-bottom: calc(-1 * var(--bulma-tabs-border-bottom-width)); + padding: var(--bulma-tabs-link-padding); vertical-align: top; } .tabs a:hover { - border-bottom-color: #363636; - color: #363636; + border-bottom-color: var(--bulma-tabs-link-hover-border-bottom-color); + color: var(--bulma-tabs-link-hover-color); } .tabs li { @@ -6916,15 +7183,15 @@ label.panel-block:hover { } .tabs li.is-active a { - border-bottom-color: #485fc7; - color: #485fc7; + border-bottom-color: var(--bulma-tabs-link-active-border-bottom-color); + color: var(--bulma-tabs-link-active-color); } .tabs ul { align-items: center; - border-bottom-color: #dbdbdb; - border-bottom-style: solid; - border-bottom-width: 1px; + border-bottom-color: var(--bulma-tabs-border-bottom-color); + border-bottom-style: var(--bulma-tabs-border-bottom-style); + border-bottom-width: var(--bulma-tabs-border-bottom-width); display: flex; flex-grow: 1; flex-shrink: 0; @@ -6965,18 +7232,18 @@ label.panel-block:hover { .tabs.is-boxed a { border: 1px solid transparent; - border-radius: 4px 4px 0 0; + border-radius: var(--bulma-tabs-boxed-link-radius) var(--bulma-tabs-boxed-link-radius) 0 0; } .tabs.is-boxed a:hover { - background-color: whitesmoke; - border-bottom-color: #dbdbdb; + background-color: var(--bulma-tabs-boxed-link-hover-background-color); + border-bottom-color: var(--bulma-tabs-boxed-link-hover-border-bottom-color); } .tabs.is-boxed li.is-active a { - background-color: white; - border-color: #dbdbdb; - border-bottom-color: transparent !important; + background-color: var(--bulma-tabs-boxed-link-active-background-color); + border-color: var(--bulma-tabs-boxed-link-active-border-color); + border-bottom-color: var(--bulma-tabs-boxed-link-active-border-bottom-color) !important; } .tabs.is-fullwidth li { @@ -6985,37 +7252,37 @@ label.panel-block:hover { } .tabs.is-toggle a { - border-color: #dbdbdb; - border-style: solid; - border-width: 1px; + border-color: var(--bulma-tabs-toggle-link-border-color); + border-style: var(--bulma-tabs-toggle-link-border-style); + border-width: var(--bulma-tabs-toggle-link-border-width); margin-bottom: 0; position: relative; } .tabs.is-toggle a:hover { - background-color: whitesmoke; - border-color: #b5b5b5; + background-color: var(--bulma-tabs-toggle-link-hover-background-color); + border-color: var(--bulma-tabs-toggle-link-hover-border-color); z-index: 2; } .tabs.is-toggle li + li { - margin-left: -1px; + margin-left: calc(-1 * var(--bulma-tabs-toggle-link-border-width)); } .tabs.is-toggle li:first-child a { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-top-left-radius: var(--bulma-tabs-toggle-link-radius); + border-bottom-left-radius: var(--bulma-tabs-toggle-link-radius); } .tabs.is-toggle li:last-child a { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: var(--bulma-tabs-toggle-link-radius); + border-bottom-right-radius: var(--bulma-tabs-toggle-link-radius); } .tabs.is-toggle li.is-active a { - background-color: #485fc7; - border-color: #485fc7; - color: #fff; + background-color: var(--bulma-tabs-toggle-link-active-background-color); + border-color: var(--bulma-tabs-toggle-link-active-border-color); + color: var(--bulma-tabs-toggle-link-active-color); z-index: 1; } @@ -7024,27 +7291,27 @@ label.panel-block:hover { } .tabs.is-toggle.is-toggle-rounded li:first-child a { - border-bottom-left-radius: 9999px; - border-top-left-radius: 9999px; + border-bottom-left-radius: var(--bulma-radius-rounded); + border-top-left-radius: var(--bulma-radius-rounded); padding-left: 1.25em; } .tabs.is-toggle.is-toggle-rounded li:last-child a { - border-bottom-right-radius: 9999px; - border-top-right-radius: 9999px; + border-bottom-right-radius: var(--bulma-radius-rounded); + border-top-right-radius: var(--bulma-radius-rounded); padding-right: 1.25em; } .tabs.is-small { - font-size: 0.75rem; + font-size: var(--bulma-size-small); } .tabs.is-medium { - font-size: 1.25rem; + font-size: var(--bulma-size-medium); } .tabs.is-large { - font-size: 1.5rem; + font-size: var(--bulma-size-large); } /* Bulma Grid */ @@ -11822,3 +12089,350 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { background-color: #fafafa; padding: 3rem 1.5rem 6rem; } + +:root { + --bulma-family-sans-serif: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-monospace: monospace; + --bulma-size-1: 3rem; + --bulma-size-2: 2.5rem; + --bulma-size-3: 2rem; + --bulma-size-4: 1.5rem; + --bulma-size-5: 1.25rem; + --bulma-size-6: 1rem; + --bulma-size-7: 0.75rem; + --bulma-weight-light: 300; + --bulma-weight-normal: 400; + --bulma-weight-medium: 500; + --bulma-weight-semibold: 600; + --bulma-weight-bold: 700; + --bulma-block-spacing: 1.5rem; + --bulma-easing: ease-out; + --bulma-radius-small: 2px; + --bulma-radius: 4px; + --bulma-radius-large: 6px; + --bulma-radius-rounded: 9999px; + --bulma-speed: 86ms; + --bulma-scheme-main: white; + --bulma-scheme-main-bis: #fafafa; + --bulma-scheme-main-ter: whitesmoke; + --bulma-scheme-invert: #0a0a0a; + --bulma-scheme-invert-bis: #121212; + --bulma-scheme-invert-ter: #242424; + --bulma-background: whitesmoke; + --bulma-border: #dbdbdb; + --bulma-border-hover: #b5b5b5; + --bulma-border-light: #ededed; + --bulma-border-light-hover: #b5b5b5; + --bulma-text: #4a4a4a; + --bulma-text-invert: #fff; + --bulma-text-light: #7a7a7a; + --bulma-text-strong: #363636; + --bulma-code: #da1039; + --bulma-code-background: whitesmoke; + --bulma-pre: #4a4a4a; + --bulma-pre-background: whitesmoke; + --bulma-link-light: #eff1fa; + --bulma-link-dark: #3850b7; + --bulma-link-visited: #b86bff; + --bulma-link-hover: #363636; + --bulma-link-hover-border: #b5b5b5; + --bulma-link-focus: #363636; + --bulma-link-focus-border: #485fc7; + --bulma-link-active: #363636; + --bulma-link-active-border: #4a4a4a; + --bulma-family-primary: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-secondary: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-code: monospace; + --bulma-size-small: 0.75rem; + --bulma-size-normal: 1rem; + --bulma-size-medium: 1.25rem; + --bulma-size-large: 1.5rem; + --bulma-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); + --bulma-white-rgb: 255, 255, 255; + --bulma-white-h: 0deg; + --bulma-white-s: 0%; + --bulma-white-l: 100%; + --bulma-white: white; + --bulma-white-base: white; + --bulma-white-00: hsl(var(--bulma-white-h), var(--bulma-white-s), 0%); + --bulma-white-05: hsl(var(--bulma-white-h), var(--bulma-white-s), 5%); + --bulma-white-10: hsl(var(--bulma-white-h), var(--bulma-white-s), 10%); + --bulma-white-15: hsl(var(--bulma-white-h), var(--bulma-white-s), 15%); + --bulma-white-20: hsl(var(--bulma-white-h), var(--bulma-white-s), 20%); + --bulma-white-25: hsl(var(--bulma-white-h), var(--bulma-white-s), 25%); + --bulma-white-30: hsl(var(--bulma-white-h), var(--bulma-white-s), 30%); + --bulma-white-35: hsl(var(--bulma-white-h), var(--bulma-white-s), 35%); + --bulma-white-40: hsl(var(--bulma-white-h), var(--bulma-white-s), 40%); + --bulma-white-45: hsl(var(--bulma-white-h), var(--bulma-white-s), 45%); + --bulma-white-50: hsl(var(--bulma-white-h), var(--bulma-white-s), 50%); + --bulma-white-55: hsl(var(--bulma-white-h), var(--bulma-white-s), 55%); + --bulma-white-60: hsl(var(--bulma-white-h), var(--bulma-white-s), 60%); + --bulma-white-65: hsl(var(--bulma-white-h), var(--bulma-white-s), 65%); + --bulma-white-70: hsl(var(--bulma-white-h), var(--bulma-white-s), 70%); + --bulma-white-75: hsl(var(--bulma-white-h), var(--bulma-white-s), 75%); + --bulma-white-80: hsl(var(--bulma-white-h), var(--bulma-white-s), 80%); + --bulma-white-85: hsl(var(--bulma-white-h), var(--bulma-white-s), 85%); + --bulma-white-90: hsl(var(--bulma-white-h), var(--bulma-white-s), 90%); + --bulma-white-95: hsl(var(--bulma-white-h), var(--bulma-white-s), 95%); + --bulma-white-95: hsl(var(--bulma-white-h), var(--bulma-white-s), 95%); + --bulma-white-invert: #0a0a0a; + --bulma-black-rgb: 10.2, 10.2, 10.2; + --bulma-black-h: 0deg; + --bulma-black-s: 0%; + --bulma-black-l: 4%; + --bulma-black: #0a0a0a; + --bulma-black-base: #0a0a0a; + --bulma-black-00: hsl(var(--bulma-black-h), var(--bulma-black-s), 4%); + --bulma-black-05: hsl(var(--bulma-black-h), var(--bulma-black-s), 9%); + --bulma-black-10: hsl(var(--bulma-black-h), var(--bulma-black-s), 14%); + --bulma-black-15: hsl(var(--bulma-black-h), var(--bulma-black-s), 19%); + --bulma-black-20: hsl(var(--bulma-black-h), var(--bulma-black-s), 24%); + --bulma-black-25: hsl(var(--bulma-black-h), var(--bulma-black-s), 29%); + --bulma-black-30: hsl(var(--bulma-black-h), var(--bulma-black-s), 34%); + --bulma-black-35: hsl(var(--bulma-black-h), var(--bulma-black-s), 39%); + --bulma-black-40: hsl(var(--bulma-black-h), var(--bulma-black-s), 44%); + --bulma-black-45: hsl(var(--bulma-black-h), var(--bulma-black-s), 49%); + --bulma-black-50: hsl(var(--bulma-black-h), var(--bulma-black-s), 54%); + --bulma-black-55: hsl(var(--bulma-black-h), var(--bulma-black-s), 59%); + --bulma-black-60: hsl(var(--bulma-black-h), var(--bulma-black-s), 64%); + --bulma-black-65: hsl(var(--bulma-black-h), var(--bulma-black-s), 69%); + --bulma-black-70: hsl(var(--bulma-black-h), var(--bulma-black-s), 74%); + --bulma-black-75: hsl(var(--bulma-black-h), var(--bulma-black-s), 79%); + --bulma-black-80: hsl(var(--bulma-black-h), var(--bulma-black-s), 84%); + --bulma-black-85: hsl(var(--bulma-black-h), var(--bulma-black-s), 89%); + --bulma-black-90: hsl(var(--bulma-black-h), var(--bulma-black-s), 94%); + --bulma-black-95: hsl(var(--bulma-black-h), var(--bulma-black-s), 99%); + --bulma-black-95: hsl(var(--bulma-black-h), var(--bulma-black-s), 99%); + --bulma-black-invert: white; + --bulma-light-rgb: 244.8, 244.8, 244.8; + --bulma-light-h: 0deg; + --bulma-light-s: 0%; + --bulma-light-l: 96%; + --bulma-light: whitesmoke; + --bulma-light-base: whitesmoke; + --bulma-light-00: hsl(var(--bulma-light-h), var(--bulma-light-s), 1%); + --bulma-light-05: hsl(var(--bulma-light-h), var(--bulma-light-s), 6%); + --bulma-light-10: hsl(var(--bulma-light-h), var(--bulma-light-s), 11%); + --bulma-light-15: hsl(var(--bulma-light-h), var(--bulma-light-s), 16%); + --bulma-light-20: hsl(var(--bulma-light-h), var(--bulma-light-s), 21%); + --bulma-light-25: hsl(var(--bulma-light-h), var(--bulma-light-s), 26%); + --bulma-light-30: hsl(var(--bulma-light-h), var(--bulma-light-s), 31%); + --bulma-light-35: hsl(var(--bulma-light-h), var(--bulma-light-s), 36%); + --bulma-light-40: hsl(var(--bulma-light-h), var(--bulma-light-s), 41%); + --bulma-light-45: hsl(var(--bulma-light-h), var(--bulma-light-s), 46%); + --bulma-light-50: hsl(var(--bulma-light-h), var(--bulma-light-s), 51%); + --bulma-light-55: hsl(var(--bulma-light-h), var(--bulma-light-s), 56%); + --bulma-light-60: hsl(var(--bulma-light-h), var(--bulma-light-s), 61%); + --bulma-light-65: hsl(var(--bulma-light-h), var(--bulma-light-s), 66%); + --bulma-light-70: hsl(var(--bulma-light-h), var(--bulma-light-s), 71%); + --bulma-light-75: hsl(var(--bulma-light-h), var(--bulma-light-s), 76%); + --bulma-light-80: hsl(var(--bulma-light-h), var(--bulma-light-s), 81%); + --bulma-light-85: hsl(var(--bulma-light-h), var(--bulma-light-s), 86%); + --bulma-light-90: hsl(var(--bulma-light-h), var(--bulma-light-s), 91%); + --bulma-light-95: hsl(var(--bulma-light-h), var(--bulma-light-s), 96%); + --bulma-light-invert: rgba(0, 0, 0, 0.7); + --bulma-dark-rgb: 53.55, 53.55, 53.55; + --bulma-dark-h: 0deg; + --bulma-dark-s: 0%; + --bulma-dark-l: 21%; + --bulma-dark: #363636; + --bulma-dark-base: #363636; + --bulma-dark-00: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 1%); + --bulma-dark-05: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 6%); + --bulma-dark-10: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 11%); + --bulma-dark-15: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 16%); + --bulma-dark-20: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 21%); + --bulma-dark-25: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 26%); + --bulma-dark-30: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 31%); + --bulma-dark-35: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 36%); + --bulma-dark-40: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 41%); + --bulma-dark-45: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 46%); + --bulma-dark-50: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 51%); + --bulma-dark-55: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 56%); + --bulma-dark-60: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 61%); + --bulma-dark-65: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 66%); + --bulma-dark-70: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 71%); + --bulma-dark-75: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 76%); + --bulma-dark-80: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 81%); + --bulma-dark-85: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 86%); + --bulma-dark-90: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 91%); + --bulma-dark-95: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 96%); + --bulma-dark-95: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 96%); + --bulma-dark-invert: #fff; + --bulma-primary-rgb: 0, 209.1, 177.735; + --bulma-primary-h: 171deg; + --bulma-primary-s: 100%; + --bulma-primary-l: 41%; + --bulma-primary: #00d1b2; + --bulma-primary-base: #00d1b2; + --bulma-primary-00: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 1%); + --bulma-primary-05: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 6%); + --bulma-primary-10: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 11%); + --bulma-primary-15: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 16%); + --bulma-primary-20: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 21%); + --bulma-primary-25: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 26%); + --bulma-primary-30: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 31%); + --bulma-primary-35: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 36%); + --bulma-primary-40: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 41%); + --bulma-primary-45: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 46%); + --bulma-primary-50: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 51%); + --bulma-primary-55: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 56%); + --bulma-primary-60: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 61%); + --bulma-primary-65: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 66%); + --bulma-primary-70: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 71%); + --bulma-primary-75: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 76%); + --bulma-primary-80: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 81%); + --bulma-primary-85: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 86%); + --bulma-primary-90: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 91%); + --bulma-primary-95: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 96%); + --bulma-primary-95: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 96%); + --bulma-primary-invert: #fff; + --bulma-link-rgb: 71.6295, 94.92035, 198.6705; + --bulma-link-h: 229deg; + --bulma-link-s: 53%; + --bulma-link-l: 53%; + --bulma-link: #485fc7; + --bulma-link-base: #485fc7; + --bulma-link-00: hsl(var(--bulma-link-h), var(--bulma-link-s), 3%); + --bulma-link-05: hsl(var(--bulma-link-h), var(--bulma-link-s), 8%); + --bulma-link-10: hsl(var(--bulma-link-h), var(--bulma-link-s), 13%); + --bulma-link-15: hsl(var(--bulma-link-h), var(--bulma-link-s), 18%); + --bulma-link-20: hsl(var(--bulma-link-h), var(--bulma-link-s), 23%); + --bulma-link-25: hsl(var(--bulma-link-h), var(--bulma-link-s), 28%); + --bulma-link-30: hsl(var(--bulma-link-h), var(--bulma-link-s), 33%); + --bulma-link-35: hsl(var(--bulma-link-h), var(--bulma-link-s), 38%); + --bulma-link-40: hsl(var(--bulma-link-h), var(--bulma-link-s), 43%); + --bulma-link-45: hsl(var(--bulma-link-h), var(--bulma-link-s), 48%); + --bulma-link-50: hsl(var(--bulma-link-h), var(--bulma-link-s), 53%); + --bulma-link-55: hsl(var(--bulma-link-h), var(--bulma-link-s), 58%); + --bulma-link-60: hsl(var(--bulma-link-h), var(--bulma-link-s), 63%); + --bulma-link-65: hsl(var(--bulma-link-h), var(--bulma-link-s), 68%); + --bulma-link-70: hsl(var(--bulma-link-h), var(--bulma-link-s), 73%); + --bulma-link-75: hsl(var(--bulma-link-h), var(--bulma-link-s), 78%); + --bulma-link-80: hsl(var(--bulma-link-h), var(--bulma-link-s), 83%); + --bulma-link-85: hsl(var(--bulma-link-h), var(--bulma-link-s), 88%); + --bulma-link-90: hsl(var(--bulma-link-h), var(--bulma-link-s), 93%); + --bulma-link-95: hsl(var(--bulma-link-h), var(--bulma-link-s), 98%); + --bulma-link-95: hsl(var(--bulma-link-h), var(--bulma-link-s), 98%); + --bulma-link-invert: #fff; + --bulma-info-rgb: 62.0415, 142.46085, 208.2585; + --bulma-info-h: 207deg; + --bulma-info-s: 61%; + --bulma-info-l: 53%; + --bulma-info: #3e8ed0; + --bulma-info-base: #3e8ed0; + --bulma-info-00: hsl(var(--bulma-info-h), var(--bulma-info-s), 3%); + --bulma-info-05: hsl(var(--bulma-info-h), var(--bulma-info-s), 8%); + --bulma-info-10: hsl(var(--bulma-info-h), var(--bulma-info-s), 13%); + --bulma-info-15: hsl(var(--bulma-info-h), var(--bulma-info-s), 18%); + --bulma-info-20: hsl(var(--bulma-info-h), var(--bulma-info-s), 23%); + --bulma-info-25: hsl(var(--bulma-info-h), var(--bulma-info-s), 28%); + --bulma-info-30: hsl(var(--bulma-info-h), var(--bulma-info-s), 33%); + --bulma-info-35: hsl(var(--bulma-info-h), var(--bulma-info-s), 38%); + --bulma-info-40: hsl(var(--bulma-info-h), var(--bulma-info-s), 43%); + --bulma-info-45: hsl(var(--bulma-info-h), var(--bulma-info-s), 48%); + --bulma-info-50: hsl(var(--bulma-info-h), var(--bulma-info-s), 53%); + --bulma-info-55: hsl(var(--bulma-info-h), var(--bulma-info-s), 58%); + --bulma-info-60: hsl(var(--bulma-info-h), var(--bulma-info-s), 63%); + --bulma-info-65: hsl(var(--bulma-info-h), var(--bulma-info-s), 68%); + --bulma-info-70: hsl(var(--bulma-info-h), var(--bulma-info-s), 73%); + --bulma-info-75: hsl(var(--bulma-info-h), var(--bulma-info-s), 78%); + --bulma-info-80: hsl(var(--bulma-info-h), var(--bulma-info-s), 83%); + --bulma-info-85: hsl(var(--bulma-info-h), var(--bulma-info-s), 88%); + --bulma-info-90: hsl(var(--bulma-info-h), var(--bulma-info-s), 93%); + --bulma-info-95: hsl(var(--bulma-info-h), var(--bulma-info-s), 98%); + --bulma-info-95: hsl(var(--bulma-info-h), var(--bulma-info-s), 98%); + --bulma-info-invert: #fff; + --bulma-success-rgb: 71.6295, 198.6705, 141.50205; + --bulma-success-h: 153deg; + --bulma-success-s: 53%; + --bulma-success-l: 53%; + --bulma-success: #48c78e; + --bulma-success-base: #48c78e; + --bulma-success-00: hsl(var(--bulma-success-h), var(--bulma-success-s), 3%); + --bulma-success-05: hsl(var(--bulma-success-h), var(--bulma-success-s), 8%); + --bulma-success-10: hsl(var(--bulma-success-h), var(--bulma-success-s), 13%); + --bulma-success-15: hsl(var(--bulma-success-h), var(--bulma-success-s), 18%); + --bulma-success-20: hsl(var(--bulma-success-h), var(--bulma-success-s), 23%); + --bulma-success-25: hsl(var(--bulma-success-h), var(--bulma-success-s), 28%); + --bulma-success-30: hsl(var(--bulma-success-h), var(--bulma-success-s), 33%); + --bulma-success-35: hsl(var(--bulma-success-h), var(--bulma-success-s), 38%); + --bulma-success-40: hsl(var(--bulma-success-h), var(--bulma-success-s), 43%); + --bulma-success-45: hsl(var(--bulma-success-h), var(--bulma-success-s), 48%); + --bulma-success-50: hsl(var(--bulma-success-h), var(--bulma-success-s), 53%); + --bulma-success-55: hsl(var(--bulma-success-h), var(--bulma-success-s), 58%); + --bulma-success-60: hsl(var(--bulma-success-h), var(--bulma-success-s), 63%); + --bulma-success-65: hsl(var(--bulma-success-h), var(--bulma-success-s), 68%); + --bulma-success-70: hsl(var(--bulma-success-h), var(--bulma-success-s), 73%); + --bulma-success-75: hsl(var(--bulma-success-h), var(--bulma-success-s), 78%); + --bulma-success-80: hsl(var(--bulma-success-h), var(--bulma-success-s), 83%); + --bulma-success-85: hsl(var(--bulma-success-h), var(--bulma-success-s), 88%); + --bulma-success-90: hsl(var(--bulma-success-h), var(--bulma-success-s), 93%); + --bulma-success-95: hsl(var(--bulma-success-h), var(--bulma-success-s), 98%); + --bulma-success-95: hsl(var(--bulma-success-h), var(--bulma-success-s), 98%); + --bulma-success-invert: #fff; + --bulma-warning-rgb: 255, 223.72, 137.7; + --bulma-warning-h: 44deg; + --bulma-warning-s: 100%; + --bulma-warning-l: 77%; + --bulma-warning: #ffe08a; + --bulma-warning-base: #ffe08a; + --bulma-warning-00: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 2%); + --bulma-warning-05: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 7%); + --bulma-warning-10: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 12%); + --bulma-warning-15: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 17%); + --bulma-warning-20: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 22%); + --bulma-warning-25: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 27%); + --bulma-warning-30: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 32%); + --bulma-warning-35: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 37%); + --bulma-warning-40: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 42%); + --bulma-warning-45: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 47%); + --bulma-warning-50: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 52%); + --bulma-warning-55: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 57%); + --bulma-warning-60: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 62%); + --bulma-warning-65: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 67%); + --bulma-warning-70: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 72%); + --bulma-warning-75: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 77%); + --bulma-warning-80: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 82%); + --bulma-warning-85: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 87%); + --bulma-warning-90: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 92%); + --bulma-warning-95: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 97%); + --bulma-warning-invert: rgba(0, 0, 0, 0.7); + --bulma-danger-rgb: 241.077, 70.023, 104.2338; + --bulma-danger-h: 348deg; + --bulma-danger-s: 86%; + --bulma-danger-l: 61%; + --bulma-danger: #f14668; + --bulma-danger-base: #f14668; + --bulma-danger-00: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 1%); + --bulma-danger-05: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 6%); + --bulma-danger-10: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 11%); + --bulma-danger-15: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 16%); + --bulma-danger-20: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 21%); + --bulma-danger-25: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 26%); + --bulma-danger-30: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 31%); + --bulma-danger-35: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 36%); + --bulma-danger-40: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 41%); + --bulma-danger-45: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 46%); + --bulma-danger-50: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 51%); + --bulma-danger-55: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 56%); + --bulma-danger-60: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 61%); + --bulma-danger-65: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 66%); + --bulma-danger-70: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 71%); + --bulma-danger-75: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 76%); + --bulma-danger-80: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 81%); + --bulma-danger-85: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 86%); + --bulma-danger-90: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 91%); + --bulma-danger-95: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 96%); + --bulma-danger-95: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 96%); + --bulma-danger-invert: #fff; + --bulma-black-bis: #121212; + --bulma-black-ter: #242424; + --bulma-grey-darker: #363636; + --bulma-grey-dark: #4a4a4a; + --bulma-grey: #7a7a7a; + --bulma-grey-light: #b5b5b5; + --bulma-grey-lighter: #dbdbdb; + --bulma-white-ter: whitesmoke; + --bulma-white-bis: #fafafa; +} diff --git a/sass/base/generic.scss b/sass/base/generic.scss index e4d35120..1a720b01 100644 --- a/sass/base/generic.scss +++ b/sass/base/generic.scss @@ -31,15 +31,46 @@ $pre-font-size: 0.875em !default; $pre-padding: 1.25rem 1.5rem !default; $pre-code-font-size: 1em !default; +:root { + @include register-vars( + ( + body-background-color: #{$body-background-color}, + body-size: #{$body-size}, + body-min-width: #{$body-min-width}, + body-rendering: #{$body-rendering}, + body-family: #{$body-family}, + body-overflow-x: #{$body-overflow-x}, + body-overflow-y: #{$body-overflow-y}, + body-color: #{$body-color}, + body-font-size: #{$body-font-size}, + body-weight: #{$body-weight}, + body-line-height: #{$body-line-height}, + code-family: #{$code-family}, + code-padding: #{$code-padding}, + code-weight: #{$code-weight}, + code-size: #{$code-size}, + small-font-size: #{$small-font-size}, + hr-background-color: #{$hr-background-color}, + hr-height: #{$hr-height}, + hr-margin: #{$hr-margin}, + strong-color: #{$strong-color}, + strong-weight: #{$strong-weight}, + pre-font-size: #{$pre-font-size}, + pre-padding: #{$pre-padding}, + pre-code-font-size: #{$pre-code-font-size}, + ) + ); +} + html { - background-color: $body-background-color; - font-size: $body-size; + background-color: getVar("body-background-color"); + font-size: getVar("body-size"); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - min-width: $body-min-width; - overflow-x: $body-overflow-x; - overflow-y: $body-overflow-y; - text-rendering: $body-rendering; + min-width: getVar("body-min-width"); + overflow-x: getVar("body-overflow-x"); + overflow-y: getVar("body-overflow-y"); + text-rendering: getVar("body-rendering"); text-size-adjust: 100%; } @@ -59,27 +90,27 @@ input, optgroup, select, textarea { - font-family: $body-family; + font-family: getVar("body-family"); } code, pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; - font-family: $code-family; + font-family: getVar("code-family"); } body { - color: $body-color; - font-size: $body-font-size; - font-weight: $body-weight; - line-height: $body-line-height; + color: getVar("body-color"); + font-size: getVar("body-font-size"); + font-weight: getVar("body-weight"); + line-height: getVar("body-line-height"); } // Inline a { - color: $link; + color: getVar("link"); cursor: pointer; text-decoration: none; @@ -88,24 +119,24 @@ a { } &:hover { - color: $link-hover; + color: getVar("link-hover"); } } code { - background-color: $code-background; - color: $code; - font-size: $code-size; - font-weight: $code-weight; - padding: $code-padding; + background-color: getVar("code-background"); + color: getVar("code"); + font-size: getVar("code-size"); + font-weight: getVar("code-weight"); + padding: getVar("code-padding"); } hr { - background-color: $hr-background-color; + background-color: getVar("hr-background-color"); border: none; display: block; - height: $hr-height; - margin: $hr-margin; + height: getVar("hr-height"); + margin: getVar("hr-margin"); } img { @@ -119,7 +150,7 @@ input[type="radio"] { } small { - font-size: $small-font-size; + font-size: getVar("small-font-size"); } span { @@ -128,8 +159,8 @@ span { } strong { - color: $strong-color; - font-weight: $strong-weight; + color: getVar("strong-color"); + font-weight: getVar("strong-weight"); } // Block @@ -141,18 +172,18 @@ fieldset { pre { @include overflow-touch; - background-color: $pre-background; - color: $pre; - font-size: $pre-font-size; + background-color: getVar("pre-background"); + color: getVar("pre"); + font-size: getVar("pre-font-size"); overflow-x: auto; - padding: $pre-padding; + padding: getVar("pre-padding"); white-space: pre; word-wrap: normal; code { background-color: transparent; color: currentColor; - font-size: $pre-code-font-size; + font-size: getVar("pre-code-font-size"); padding: 0; } } @@ -168,6 +199,6 @@ table { } th { - color: $text-strong; + color: getVar("text-strong"); } } diff --git a/sass/components/breadcrumb.scss b/sass/components/breadcrumb.scss index c0599df6..314035cc 100644 --- a/sass/components/breadcrumb.scss +++ b/sass/components/breadcrumb.scss @@ -1,31 +1,44 @@ @import "../utilities/mixins"; -$breadcrumb-item-color: $link !default; -$breadcrumb-item-hover-color: $link-hover !default; -$breadcrumb-item-active-color: $text-strong !default; +$breadcrumb-item-color: getVar("link") !default; +$breadcrumb-item-hover-color: getVar("link-hover") !default; +$breadcrumb-item-active-color: getVar("text-strong") !default; $breadcrumb-item-padding-vertical: 0 !default; $breadcrumb-item-padding-horizontal: 0.75em !default; -$breadcrumb-item-separator-color: $border-hover !default; +$breadcrumb-item-separator-color: getVar("border-hover") !default; + +:root { + @include register-vars( + ( + breadcrumb-item-color: #{$breadcrumb-item-color}, + breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color}, + breadcrumb-item-active-color: #{$breadcrumb-item-active-color}, + breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}, + breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}, + breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}, + ) + ); +} .#{$class-prefix}breadcrumb { @extend %block; @extend %unselectable; - font-size: $size-normal; + font-size: getVar("size-normal"); white-space: nowrap; a { align-items: center; - color: $breadcrumb-item-color; + color: getVar("breadcrumb-item-color"); display: flex; justify-content: center; - padding: $breadcrumb-item-padding-vertical - $breadcrumb-item-padding-horizontal; + padding: getVar("breadcrumb-item-padding-vertical") + getVar("breadcrumb-item-padding-horizontal"); &:hover { - color: $breadcrumb-item-hover-color; + color: getVar("breadcrumb-item-hover-color"); } } @@ -39,14 +52,14 @@ $breadcrumb-item-separator-color: $border-hover !default; &.is-active { a { - color: $breadcrumb-item-active-color; + color: getVar("breadcrumb-item-active-color"); cursor: default; pointer-events: none; } } & + li::before { - color: $breadcrumb-item-separator-color; + color: getVar("breadcrumb-item-separator-color"); content: "/"; } } @@ -86,15 +99,15 @@ $breadcrumb-item-separator-color: $border-hover !default; // Sizes &.is-small { - font-size: $size-small; + font-size: getVar("size-small"); } &.is-medium { - font-size: $size-medium; + font-size: getVar("size-medium"); } &.is-large { - font-size: $size-large; + font-size: getVar("size-large"); } // Styles diff --git a/sass/components/card.scss b/sass/components/card.scss index 602ae390..85788fee 100644 --- a/sass/components/card.scss +++ b/sass/components/card.scss @@ -1,62 +1,84 @@ @import "../utilities/mixins"; -$card-color: $text !default; -$card-background-color: $scheme-main !default; -$card-shadow: $shadow !default; +$card-color: getVar("text") !default; +$card-background-color: getVar("scheme-main") !default; +$card-shadow: getVar("shadow") !default; $card-radius: 0.25rem !default; $card-header-background-color: transparent !default; -$card-header-color: $text-strong !default; +$card-header-color: getVar("text-strong") !default; $card-header-padding: 0.75rem 1rem !default; -$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; -$card-header-weight: $weight-bold !default; +$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; // TODO +$card-header-weight: getVar("weight-bold") !default; $card-content-background-color: transparent !default; $card-content-padding: 1.5rem !default; $card-footer-background-color: transparent !default; -$card-footer-border-top: 1px solid $border-light !default; +$card-footer-border-top: 1px solid getVar("border-light") !default; $card-footer-padding: 0.75rem !default; -$card-media-margin: $block-spacing !default; +$card-media-margin: getVar("block-spacing") !default; + +:root { + @include register-vars( + ( + card-color: #{$card-color}, + card-background-color: #{$card-background-color}, + card-shadow: #{$card-shadow}, + card-radius: #{$card-radius}, + card-header-background-color: #{$card-header-background-color}, + card-header-color: #{$card-header-color}, + card-header-padding: #{$card-header-padding}, + card-header-shadow: #{$card-header-shadow}, + card-header-weight: #{$card-header-weight}, + card-content-background-color: #{$card-content-background-color}, + card-content-padding: #{$card-content-padding}, + card-footer-background-color: #{$card-footer-background-color}, + card-footer-border-top: #{$card-footer-border-top}, + card-footer-padding: #{$card-footer-padding}, + card-media-margin: #{$card-media-margin}, + ) + ); +} .#{$class-prefix}card { - background-color: $card-background-color; - border-radius: $card-radius; - box-shadow: $card-shadow; - color: $card-color; + background-color: getVar("card-background-color"); + border-radius: getVar("card-radius"); + box-shadow: getVar("card-shadow"); + color: getVar("card-color"); max-width: 100%; position: relative; } %card-item { &:first-child { - border-top-left-radius: $card-radius; - border-top-right-radius: $card-radius; + border-top-left-radius: getVar("card-radius"); + border-top-right-radius: getVar("card-radius"); } &:last-child { - border-bottom-left-radius: $card-radius; - border-bottom-right-radius: $card-radius; + border-bottom-left-radius: getVar("card-radius"); + border-bottom-right-radius: getVar("card-radius"); } } .#{$class-prefix}card-header { @extend %card-item; - background-color: $card-header-background-color; + background-color: getVar("card-header-background-color"); align-items: stretch; - box-shadow: $card-header-shadow; + box-shadow: getVar("card-header-shadow"); display: flex; } .#{$class-prefix}card-header-title { align-items: center; - color: $card-header-color; + color: getVar("card-header-color"); display: flex; flex-grow: 1; - font-weight: $card-header-weight; - padding: $card-header-padding; + font-weight: getVar("card-header-weight"); + padding: getVar("card-header-padding"); &.is-centered { justify-content: center; @@ -70,7 +92,7 @@ $card-media-margin: $block-spacing !default; cursor: pointer; display: flex; justify-content: center; - padding: $card-header-padding; + padding: getVar("card-header-padding"); } .#{$class-prefix}card-image { @@ -79,15 +101,15 @@ $card-media-margin: $block-spacing !default; &:first-child { img { - border-top-left-radius: $card-radius; - border-top-right-radius: $card-radius; + border-top-left-radius: getVar("card-radius"); + border-top-right-radius: getVar("card-radius"); } } &:last-child { img { - border-bottom-left-radius: $card-radius; - border-bottom-right-radius: $card-radius; + border-bottom-left-radius: getVar("card-radius"); + border-bottom-right-radius: getVar("card-radius"); } } } @@ -95,15 +117,15 @@ $card-media-margin: $block-spacing !default; .#{$class-prefix}card-content { @extend %card-item; - background-color: $card-content-background-color; - padding: $card-content-padding; + background-color: getVar("card-content-background-color"); + padding: getVar("card-content-padding"); } .#{$class-prefix}card-footer { @extend %card-item; - background-color: $card-footer-background-color; - border-top: $card-footer-border-top; + background-color: getVar("card-footer-background-color"); + border-top: getVar("card-footer-border-top"); align-items: stretch; display: flex; } @@ -115,10 +137,10 @@ $card-media-margin: $block-spacing !default; flex-grow: 1; flex-shrink: 0; justify-content: center; - padding: $card-footer-padding; + padding: getVar("card-footer-padding"); &:not(:last-child) { - @include ltr-property("border", $card-footer-border-top); + @include ltr-property("border", getVar("card-footer-border-top")); } } @@ -126,6 +148,6 @@ $card-media-margin: $block-spacing !default; .#{$class-prefix}card { .#{$class-prefix}media:not(:last-child) { - margin-bottom: $card-media-margin; + margin-bottom: getVar("card-media-margin"); } } diff --git a/sass/components/dropdown.scss b/sass/components/dropdown.scss index e82f26ab..4f001bf8 100644 --- a/sass/components/dropdown.scss +++ b/sass/components/dropdown.scss @@ -2,22 +2,44 @@ $dropdown-menu-min-width: 12rem !default; -$dropdown-content-background-color: $scheme-main !default; -$dropdown-content-arrow: $link !default; +$dropdown-content-background-color: getVar("scheme-main") !default; +$dropdown-content-arrow: getVar("link") !default; $dropdown-content-offset: 4px !default; $dropdown-content-padding-bottom: 0.5rem !default; $dropdown-content-padding-top: 0.5rem !default; -$dropdown-content-radius: $radius !default; -$dropdown-content-shadow: $shadow !default; +$dropdown-content-radius: getVar("radius") !default; +$dropdown-content-shadow: getVar("shadow") !default; $dropdown-content-z: 20 !default; -$dropdown-item-color: $text !default; -$dropdown-item-hover-color: $scheme-invert !default; -$dropdown-item-hover-background-color: $background !default; -$dropdown-item-active-color: $link-invert !default; -$dropdown-item-active-background-color: $link !default; +$dropdown-item-color: getVar("text") !default; +$dropdown-item-hover-color: getVar("scheme-invert") !default; +$dropdown-item-hover-background-color: getVar("background") !default; +$dropdown-item-active-color: getVar("link-invert") !default; +$dropdown-item-active-background-color: getVar("link") !default; -$dropdown-divider-background-color: $border-light !default; +$dropdown-divider-background-color: getVar("border-light") !default; + +:root { + @include register-vars( + ( + dropdown-menu-min-width: #{$dropdown-menu-min-width}, + dropdown-content-background-color: #{$dropdown-content-background-color}, + dropdown-content-arrow: #{$dropdown-content-arrow}, + dropdown-content-offset: #{$dropdown-content-offset}, + dropdown-content-padding-bottom: #{$dropdown-content-padding-bottom}, + dropdown-content-padding-top: #{$dropdown-content-padding-top}, + dropdown-content-radius: #{$dropdown-content-radius}, + dropdown-content-shadow: #{$dropdown-content-shadow}, + dropdown-content-z: #{$dropdown-content-z}, + dropdown-item-color: #{$dropdown-item-color}, + dropdown-item-hover-color: #{$dropdown-item-hover-color}, + dropdown-item-hover-background-color: #{$dropdown-item-hover-background-color}, + dropdown-item-active-color: #{$dropdown-item-active-color}, + dropdown-item-active-background-color: #{$dropdown-item-active-background-color}, + dropdown-divider-background-color: #{$dropdown-divider-background-color}, + ) + ); +} .#{$class-prefix}dropdown { display: inline-flex; @@ -41,7 +63,7 @@ $dropdown-divider-background-color: $border-light !default; &.is-up { .#{$class-prefix}dropdown-menu { bottom: 100%; - padding-bottom: $dropdown-content-offset; + padding-bottom: getVar("dropdown-content-offset"); padding-top: initial; top: auto; } @@ -53,23 +75,23 @@ $dropdown-divider-background-color: $border-light !default; @include ltr-position(0, false); - min-width: $dropdown-menu-min-width; - padding-top: $dropdown-content-offset; + min-width: getVar("dropdown-menu-min-width"); + padding-top: getVar("dropdown-content-offset"); position: absolute; top: 100%; - z-index: $dropdown-content-z; + z-index: getVar("dropdown-content-z"); } .#{$class-prefix}dropdown-content { - background-color: $dropdown-content-background-color; - border-radius: $dropdown-content-radius; - box-shadow: $dropdown-content-shadow; - padding-bottom: $dropdown-content-padding-bottom; - padding-top: $dropdown-content-padding-top; + background-color: getVar("dropdown-content-background-color"); + border-radius: getVar("dropdown-content-radius"); + box-shadow: getVar("dropdown-content-shadow"); + padding-bottom: getVar("dropdown-content-padding-bottom"); + padding-top: getVar("dropdown-content-padding-top"); } .#{$class-prefix}dropdown-item { - color: $dropdown-item-color; + color: getVar("dropdown-item-color"); display: block; font-size: 0.875rem; line-height: 1.5; @@ -86,18 +108,18 @@ button.#{$class-prefix}dropdown-item { width: 100%; &:hover { - background-color: $dropdown-item-hover-background-color; - color: $dropdown-item-hover-color; + background-color: getVar("dropdown-item-hover-background-color"); + color: getVar("dropdown-item-hover-color"); } &.is-active { - background-color: $dropdown-item-active-background-color; - color: $dropdown-item-active-color; + background-color: getVar("dropdown-item-active-background-color"); + color: getVar("dropdown-item-active-color"); } } .#{$class-prefix}dropdown-divider { - background-color: $dropdown-divider-background-color; + background-color: getVar("dropdown-divider-background-color"); border: none; display: block; height: 1px; diff --git a/sass/components/level.scss b/sass/components/level.scss index 4eefd088..9b3b2479 100644 --- a/sass/components/level.scss +++ b/sass/components/level.scss @@ -1,7 +1,5 @@ @import "../utilities/mixins"; -$level-item-spacing: $block-spacing * 0.5 !default; - .#{$class-prefix}level { @extend %block; @@ -9,7 +7,7 @@ $level-item-spacing: $block-spacing * 0.5 !default; justify-content: space-between; code { - border-radius: $radius; + border-radius: getVar("radius"); } img { @@ -34,7 +32,7 @@ $level-item-spacing: $block-spacing * 0.5 !default; &:not(:last-child) { margin-bottom: 0; - @include ltr-property("margin", $level-item-spacing); + @include ltr-property("margin", getVar("level-item-spacing")); } &:not(.is-narrow) { @@ -71,7 +69,7 @@ $level-item-spacing: $block-spacing * 0.5 !default; // Responsiveness @include mobile { &:not(:last-child) { - margin-bottom: $level-item-spacing; + margin-bottom: getVar("level-item-spacing"); } } } @@ -91,7 +89,7 @@ $level-item-spacing: $block-spacing * 0.5 !default; // Responsiveness @include tablet { &:not(:last-child) { - @include ltr-property("margin", $level-item-spacing); + @include ltr-property("margin", getVar("level-item-spacing")); } } } diff --git a/sass/components/media.scss b/sass/components/media.scss index 632f0e97..14436704 100644 --- a/sass/components/media.scss +++ b/sass/components/media.scss @@ -1,6 +1,6 @@ @import "../utilities/mixins"; -$media-border-color: bulmaRgba($border, 0.5) !default; +$media-border-color: bulmaRgba($border, 0.5) !default; // TODO $media-border-size: 1px !default; $media-spacing: 1rem !default; $media-spacing-large: 1.5rem !default; @@ -9,45 +9,64 @@ $media-level-1-spacing: 0.75rem !default; $media-level-1-content-spacing: 0.5rem !default; $media-level-2-spacing: 0.5rem !default; +:root { + @include register-vars( + ( + media-border-color: #{$media-border-color}, + media-border-size: #{$media-border-size}, + media-spacing: #{$media-spacing}, + media-spacing-large: #{$media-spacing-large}, + media-content-spacing: #{$media-content-spacing}, + media-level-1-spacing: #{$media-level-1-spacing}, + media-level-1-content-spacing: #{$media-level-1-content-spacing}, + media-level-2-spacing: #{$media-level-2-spacing}, + ) + ); +} + .#{$class-prefix}media { align-items: flex-start; display: flex; text-align: inherit; .#{$class-prefix}content:not(:last-child) { - margin-bottom: $media-content-spacing; + margin-bottom: getVar("media-content-spacing"); } .#{$class-prefix}media { - border-top: $media-border-size solid $media-border-color; + border-top-color: getVar("media-border-color"); + border-top-style: solid; + border-top-width: getVar("media-border-size"); display: flex; - padding-top: $media-level-1-spacing; + padding-top: getVar("media-level-1-spacing"); .#{$class-prefix}content:not(:last-child), .#{$class-prefix}control:not(:last-child) { - margin-bottom: $media-level-1-content-spacing; + margin-bottom: getVar("media-level-1-content-spacing"); } .#{$class-prefix}media { - padding-top: $media-level-2-spacing; + padding-top: getVar("media-level-2-spacing"); & + .#{$class-prefix}media { - margin-top: $media-level-2-spacing; + margin-top: getVar("media-level-2-spacing"); } } } & + .#{$class-prefix}media { - border-top: $media-border-size solid $media-border-color; - margin-top: $media-spacing; - padding-top: $media-spacing; + border-top-color: getVar("media-border-color"); + border-top-style: solid; + border-top-width: getVar("media-border-size"); + margin-top: getVar("media-spacing"); + padding-top: getVar("media-spacing"); } // Sizes &.is-large { & + .#{$class-prefix}media { - margin-top: $media-spacing-large; - padding-top: $media-spacing-large; + margin-top: getVar("media-spacing-large"); + padding-top: getVar("media-spacing-large"); } } } @@ -60,11 +79,11 @@ $media-level-2-spacing: 0.5rem !default; } .#{$class-prefix}media-left { - @include ltr-property("margin", $media-spacing); + @include ltr-property("margin", getVar("media-spacing")); } .#{$class-prefix}media-right { - @include ltr-property("margin", $media-spacing, false); + @include ltr-property("margin", getVar("media-spacing"), false); } .#{$class-prefix}media-content { diff --git a/sass/components/menu.scss b/sass/components/menu.scss index cc8efb71..71562f9c 100644 --- a/sass/components/menu.scss +++ b/sass/components/menu.scss @@ -1,83 +1,107 @@ @import "../utilities/mixins"; -$menu-item-color: $text !default; -$menu-item-radius: $radius-small !default; -$menu-item-hover-color: $text-strong !default; -$menu-item-hover-background-color: $background !default; -$menu-item-active-color: $link-invert !default; -$menu-item-active-background-color: $link !default; +$menu-item-color: getVar("text") !default; +$menu-item-radius: getVar("radius-small") !default; +$menu-item-hover-color: getVar("text-strong") !default; +$menu-item-hover-background-color: getVar("background") !default; +$menu-item-active-color: getVar("link-invert") !default; +$menu-item-active-background-color: getVar("link") !default; -$menu-list-border-left: 1px solid $border !default; +$menu-list-border-left: 1px solid getVar("border") !default; $menu-list-line-height: 1.25 !default; $menu-list-link-padding: 0.5em 0.75em !default; $menu-nested-list-margin: 0.75em !default; $menu-nested-list-padding-left: 0.75em !default; -$menu-label-color: $text-light !default; +$menu-label-color: getVar("text-light") !default; $menu-label-font-size: 0.75em !default; $menu-label-letter-spacing: 0.1em !default; $menu-label-spacing: 1em !default; +:root { + @include register-vars( + ( + menu-item-color: #{$menu-item-color}, + menu-item-radius: #{$menu-item-radius}, + menu-item-hover-color: #{$menu-item-hover-color}, + menu-item-hover-background-color: #{$menu-item-hover-background-color}, + menu-item-active-color: #{$menu-item-active-color}, + menu-item-active-background-color: #{$menu-item-active-background-color}, + menu-list-border-left: #{$menu-list-border-left}, + menu-list-line-height: #{$menu-list-line-height}, + menu-list-link-padding: #{$menu-list-link-padding}, + menu-nested-list-margin: #{$menu-nested-list-margin}, + menu-nested-list-padding-left: #{$menu-nested-list-padding-left}, + menu-label-color: #{$menu-label-color}, + menu-label-font-size: #{$menu-label-font-size}, + menu-label-letter-spacing: #{$menu-label-letter-spacing}, + menu-label-spacing: #{$menu-label-spacing}, + ) + ); +} + .#{$class-prefix}menu { - font-size: $size-normal; + font-size: getVar("size-normal"); // Sizes &.is-small { - font-size: $size-small; + font-size: getVar("size-small"); } &.is-medium { - font-size: $size-medium; + font-size: getVar("size-medium"); } &.is-large { - font-size: $size-large; + font-size: getVar("size-large"); } } .#{$class-prefix}menu-list { - line-height: $menu-list-line-height; + line-height: getVar("menu-list-line-height"); a { - border-radius: $menu-item-radius; - color: $menu-item-color; + border-radius: getVar("menu-item-radius"); + color: getVar("menu-item-color"); display: block; - padding: $menu-list-link-padding; + padding: getVar("menu-list-link-padding"); &:hover { - background-color: $menu-item-hover-background-color; - color: $menu-item-hover-color; + background-color: getVar("menu-item-hover-background-color"); + color: getVar("menu-item-hover-color"); } // Modifiers &.is-active { - background-color: $menu-item-active-background-color; - color: $menu-item-active-color; + background-color: getVar("menu-item-active-background-color"); + color: getVar("menu-item-active-color"); } } li { ul { - @include ltr-property("border", $menu-list-border-left, false); - - margin: $menu-nested-list-margin; - - @include ltr-property("padding", $menu-nested-list-padding-left, false); + @include ltr-property("border", getVar("menu-list-border-left"), false); + margin: getVar("menu-nested-list-margin"); + @include ltr-property( + "padding", + getVar("menu-nested-list-padding-left"), + false + ); } } } .#{$class-prefix}menu-label { - color: $menu-label-color; - font-size: $menu-label-font-size; - letter-spacing: $menu-label-letter-spacing; + color: getVar("menu-label-color"); + font-size: getVar("menu-label-font-size"); + letter-spacing: getVar("menu-label-letter-spacing"); text-transform: uppercase; &:not(:first-child) { - margin-top: $menu-label-spacing; + margin-top: getVar("menu-label-spacing"); } &:not(:last-child) { - margin-bottom: $menu-label-spacing; + margin-bottom: getVar("menu-label-spacing"); } } diff --git a/sass/components/message.scss b/sass/components/message.scss index 63bb05f9..968d2cb9 100644 --- a/sass/components/message.scss +++ b/sass/components/message.scss @@ -1,32 +1,54 @@ @import "../utilities/mixins"; -$message-background-color: $background !default; -$message-radius: $radius !default; +$message-background-color: getVar("background") !default; +$message-radius: getVar("radius") !default; -$message-header-background-color: $text !default; -$message-header-color: $text-invert !default; -$message-header-weight: $weight-bold !default; +$message-header-background-color: getVar("text") !default; +$message-header-color: getVar("text-invert") !default; +$message-header-weight: getVar("weight-bold") !default; $message-header-padding: 0.75em 1em !default; -$message-header-radius: $radius !default; +$message-header-radius: getVar("radius") !default; -$message-body-border-color: $border !default; +$message-body-border-color: getVar("border") !default; $message-body-border-width: 0 0 0 4px !default; -$message-body-color: $text !default; +$message-body-color: getVar("text") !default; $message-body-padding: 1.25em 1.5em !default; -$message-body-radius: $radius !default; +$message-body-radius: getVar("radius") !default; -$message-body-pre-background-color: $scheme-main !default; +$message-body-pre-background-color: getVar("scheme-main") !default; $message-body-pre-code-background-color: transparent !default; $message-header-body-border-width: 0 !default; $message-colors: $colors !default; +:root { + @include register-vars( + ( + message-background-color: #{$message-background-color}, + message-radius: #{$message-radius}, + message-header-background-color: #{$message-header-background-color}, + message-header-color: #{$message-header-color}, + message-header-weight: #{$message-header-weight}, + message-header-padding: #{$message-header-padding}, + message-header-radius: #{$message-header-radius}, + message-body-border-color: #{$message-body-border-color}, + message-body-border-width: #{$message-body-border-width}, + message-body-color: #{$message-body-color}, + message-body-padding: #{$message-body-padding}, + message-body-radius: #{$message-body-radius}, + message-body-pre-background-color: #{$message-body-pre-background-color}, + message-body-pre-code-background-color: #{$message-body-pre-code-background-color}, + message-header-body-border-width: #{$message-header-body-border-width}, + ) + ); +} + .#{$class-prefix}message { @extend %block; - background-color: $message-background-color; - border-radius: $message-radius; - font-size: $size-normal; + background-color: getVar("message-background-color"); + border-radius: getVar("message-radius"); + font-size: getVar("size-normal"); strong { color: currentColor; @@ -39,18 +61,19 @@ $message-colors: $colors !default; // Sizes &.is-small { - font-size: $size-small; + font-size: getVar("size-small"); } &.is-medium { - font-size: $size-medium; + font-size: getVar("size-medium"); } &.is-large { - font-size: $size-large; + font-size: getVar("size-large"); } // Colors + // TODO @each $name, $components in $message-colors { $color: nth($components, 1); $color-invert: nth($components, 2); @@ -94,14 +117,15 @@ $message-colors: $colors !default; .#{$class-prefix}message-header { align-items: center; - background-color: $message-header-background-color; - border-radius: $message-header-radius $message-header-radius 0 0; - color: $message-header-color; + background-color: getVar("message-header-background-color"); + border-radius: getVar("message-header-radius") getVar("message-header-radius") + 0 0; + color: getVar("message-header-color"); display: flex; - font-weight: $message-header-weight; + font-weight: getVar("message-header-weight"); justify-content: space-between; line-height: 1.25; - padding: $message-header-padding; + padding: getVar("message-header-padding"); position: relative; .#{$class-prefix}delete { @@ -112,26 +136,26 @@ $message-colors: $colors !default; } & + .#{$class-prefix}message-body { - border-width: $message-header-body-border-width; + border-width: getVar("message-header-body-border-width"); border-top-left-radius: 0; border-top-right-radius: 0; } } .#{$class-prefix}message-body { - border-color: $message-body-border-color; - border-radius: $message-body-radius; + border-color: getVar("message-body-border-color"); + border-radius: getVar("message-body-radius"); border-style: solid; - border-width: $message-body-border-width; - color: $message-body-color; - padding: $message-body-padding; + border-width: getVar("message-body-border-width"); + color: getVar("message-body-color"); + padding: getVar("message-body-padding"); code, pre { - background-color: $message-body-pre-background-color; + background-color: getVar("message-body-pre-background-color"); } pre code { - background-color: $message-body-pre-code-background-color; + background-color: getVar("message-body-pre-code-background-color"); } } diff --git a/sass/components/modal.scss b/sass/components/modal.scss index 9cd692a1..5a976411 100644 --- a/sass/components/modal.scss +++ b/sass/components/modal.scss @@ -15,23 +15,51 @@ $modal-close-top: 20px !default; $modal-card-spacing: 40px !default; -$modal-card-head-background-color: $background !default; -$modal-card-head-border-bottom: 1px solid $border !default; +$modal-card-head-background-color: getVar("background") !default; +$modal-card-head-border-bottom: 1px solid getVar("border") !default; $modal-card-head-padding: 20px !default; -$modal-card-head-radius: $radius-large !default; +$modal-card-head-radius: getVar("radius-large") !default; -$modal-card-title-color: $text-strong !default; +$modal-card-title-color: getVar("text-strong") !default; $modal-card-title-line-height: 1 !default; -$modal-card-title-size: $size-4 !default; +$modal-card-title-size: getVar("size-4") !default; -$modal-card-foot-radius: $radius-large !default; -$modal-card-foot-border-top: 1px solid $border !default; +$modal-card-foot-radius: getVar("radius-large") !default; +$modal-card-foot-border-top: 1px solid getVar("border") !default; -$modal-card-body-background-color: $scheme-main !default; +$modal-card-body-background-color: getVar("scheme-main") !default; $modal-card-body-padding: 20px !default; $modal-breakpoint: $tablet !default; +:root { + @include register-vars( + ( + modal-z: #{$modal-z}, + modal-background-background-color: #{$modal-background-background-color}, + modal-content-width: #{$modal-content-width}, + modal-content-margin-mobile: #{$modal-content-margin-mobile}, + modal-content-spacing-mobile: #{$modal-content-spacing-mobile}, + modal-content-spacing-tablet: #{$modal-content-spacing-tablet}, + modal-close-dimensions: #{$modal-close-dimensions}, + modal-close-right: #{$modal-close-right}, + modal-close-top: #{$modal-close-top}, + modal-card-spacing: #{$modal-card-spacing}, + modal-card-head-background-color: #{$modal-card-head-background-color}, + modal-card-head-border-bottom: #{$modal-card-head-border-bottom}, + modal-card-head-padding: #{$modal-card-head-padding}, + modal-card-head-radius: #{$modal-card-head-radius}, + modal-card-title-color: #{$modal-card-title-color}, + modal-card-title-line-height: #{$modal-card-title-line-height}, + modal-card-title-size: #{$modal-card-title-size}, + modal-card-foot-radius: #{$modal-card-foot-radius}, + modal-card-foot-border-top: #{$modal-card-foot-border-top}, + modal-card-body-background-color: #{$modal-card-body-background-color}, + modal-card-body-padding: #{$modal-card-body-padding}, + ) + ); +} + .#{$class-prefix}modal { @extend %overlay; @@ -41,7 +69,7 @@ $modal-breakpoint: $tablet !default; justify-content: center; overflow: hidden; position: fixed; - z-index: $modal-z; + z-index: getVar("modal-z"); // Modifiers &.is-active { @@ -52,13 +80,13 @@ $modal-breakpoint: $tablet !default; .#{$class-prefix}modal-background { @extend %overlay; - background-color: $modal-background-background-color; + background-color: getVar("modal-background-background-color"); } .#{$class-prefix}modal-content, .#{$class-prefix}modal-card { - margin: 0 $modal-content-margin-mobile; - max-height: calc(100vh - #{$modal-content-spacing-mobile}); + margin: 0 getVar("modal-content-margin-mobile"); + max-height: calc(100vh - #{getVar("modal-content-spacing-mobile")}); overflow: auto; position: relative; width: 100%; @@ -66,8 +94,8 @@ $modal-breakpoint: $tablet !default; // Responsiveness @include from($modal-breakpoint) { margin: 0 auto; - max-height: calc(100vh - #{$modal-content-spacing-tablet}); - width: $modal-content-width; + max-height: calc(100vh - #{getVar("modal-content-spacing-tablet")}); + width: getVar("modal-content-width"); } } @@ -75,19 +103,17 @@ $modal-breakpoint: $tablet !default; @extend %delete; background: none; - height: $modal-close-dimensions; + height: getVar("modal-close-dimensions"); position: fixed; - - @include ltr-position($modal-close-right); - - top: $modal-close-top; - width: $modal-close-dimensions; + @include ltr-position(getVar("modal-close-right")); + top: getVar("modal-close-top"); + width: getVar("modal-close-dimensions"); } .#{$class-prefix}modal-card { display: flex; flex-direction: column; - max-height: calc(100vh - #{$modal-card-spacing}); + max-height: calc(100vh - #{getVar("modal-card-spacing")}); overflow: hidden; -ms-overflow-y: visible; } @@ -95,32 +121,32 @@ $modal-breakpoint: $tablet !default; .#{$class-prefix}modal-card-head, .#{$class-prefix}modal-card-foot { align-items: center; - background-color: $modal-card-head-background-color; + background-color: getVar("modal-card-head-background-color"); display: flex; flex-shrink: 0; justify-content: flex-start; - padding: $modal-card-head-padding; + padding: getVar("modal-card-head-padding"); position: relative; } .#{$class-prefix}modal-card-head { - border-bottom: $modal-card-head-border-bottom; - border-top-left-radius: $modal-card-head-radius; - border-top-right-radius: $modal-card-head-radius; + border-bottom: getVar("modal-card-head-border-bottom"); + border-top-left-radius: getVar("modal-card-head-radius"); + border-top-right-radius: getVar("modal-card-head-radius"); } .#{$class-prefix}modal-card-title { - color: $modal-card-title-color; + color: getVar("modal-card-title-color"); flex-grow: 1; flex-shrink: 0; - font-size: $modal-card-title-size; - line-height: $modal-card-title-line-height; + font-size: getVar("modal-card-title-size"); + line-height: getVar("modal-card-title-line-height"); } .#{$class-prefix}modal-card-foot { - border-bottom-left-radius: $modal-card-foot-radius; - border-bottom-right-radius: $modal-card-foot-radius; - border-top: $modal-card-foot-border-top; + border-bottom-left-radius: getVar("modal-card-foot-radius"); + border-bottom-right-radius: getVar("modal-card-foot-radius"); + border-top: getVar("modal-card-foot-border-top"); .#{$class-prefix}button { &:not(:last-child) { @@ -132,9 +158,9 @@ $modal-breakpoint: $tablet !default; .#{$class-prefix}modal-card-body { @include overflow-touch; - background-color: $modal-card-body-background-color; + background-color: getVar("modal-card-body-background-color"); flex-grow: 1; flex-shrink: 1; overflow: auto; - padding: $modal-card-body-padding; + padding: getVar("modal-card-body-padding"); } diff --git a/sass/components/navbar.scss b/sass/components/navbar.scss index 14b642c1..0c68624f 100644 --- a/sass/components/navbar.scss +++ b/sass/components/navbar.scss @@ -1,48 +1,48 @@ @import "../utilities/mixins"; -$navbar-background-color: $scheme-main !default; +$navbar-background-color: getVar("scheme-main") !default; $navbar-box-shadow-size: 0 2px 0 0 !default; -$navbar-box-shadow-color: $background !default; +$navbar-box-shadow-color: getVar("background") !default; $navbar-height: 3.25rem !default; $navbar-padding-vertical: 1rem !default; $navbar-padding-horizontal: 2rem !default; $navbar-z: 30 !default; $navbar-fixed-z: 30 !default; -$navbar-item-color: $text !default; -$navbar-item-hover-color: $link !default; -$navbar-item-hover-background-color: $scheme-main-bis !default; -$navbar-item-active-color: $scheme-invert !default; +$navbar-item-color: getVar("text") !default; +$navbar-item-hover-color: getVar("link") !default; +$navbar-item-hover-background-color: getVar("scheme-main-bis") !default; +$navbar-item-active-color: getVar("scheme-invert") !default; $navbar-item-active-background-color: transparent !default; $navbar-item-img-max-height: 1.75rem !default; -$navbar-burger-color: $navbar-item-color !default; +$navbar-burger-color: getVar("navbar-item-color") !default; $navbar-tab-hover-background-color: transparent !default; -$navbar-tab-hover-border-bottom-color: $link !default; -$navbar-tab-active-color: $link !default; +$navbar-tab-hover-border-bottom-color: getVar("link") !default; +$navbar-tab-active-color: getVar("link") !default; $navbar-tab-active-background-color: transparent !default; -$navbar-tab-active-border-bottom-color: $link !default; +$navbar-tab-active-border-bottom-color: getVar("link") !default; $navbar-tab-active-border-bottom-style: solid !default; $navbar-tab-active-border-bottom-width: 3px !default; -$navbar-dropdown-background-color: $scheme-main !default; -$navbar-dropdown-border-top: 2px solid $border !default; +$navbar-dropdown-background-color: getVar("scheme-main") !default; +$navbar-dropdown-border-top: 2px solid getVar("border") !default; $navbar-dropdown-offset: -4px !default; -$navbar-dropdown-arrow: $link !default; -$navbar-dropdown-radius: $radius-large !default; +$navbar-dropdown-arrow: getVar("link") !default; +$navbar-dropdown-radius: getVar("radius-large") !default; $navbar-dropdown-z: 20 !default; -$navbar-dropdown-boxed-radius: $radius-large !default; +$navbar-dropdown-boxed-radius: getVar("radius-large") !default; $navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default; -$navbar-dropdown-item-hover-color: $scheme-invert !default; -$navbar-dropdown-item-hover-background-color: $background !default; -$navbar-dropdown-item-active-color: $link !default; -$navbar-dropdown-item-active-background-color: $background !default; +$navbar-dropdown-item-hover-color: getVar("scheme-invert") !default; +$navbar-dropdown-item-hover-background-color: getVar("background") !default; +$navbar-dropdown-item-active-color: getVar("link") !default; +$navbar-dropdown-item-active-background-color: getVar("background") !default; -$navbar-divider-background-color: $background !default; +$navbar-divider-background-color: getVar("background") !default; $navbar-divider-height: 2px !default; $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default; @@ -51,18 +51,62 @@ $navbar-breakpoint: $desktop !default; $navbar-colors: $colors !default; +:root { + @include register-vars( + ( + navbar-background-color: #{$navbar-background-color}, + navbar-box-shadow-size: #{$navbar-box-shadow-size}, + navbar-box-shadow-color: #{$navbar-box-shadow-color}, + navbar-height: #{$navbar-height}, + navbar-padding-vertical: #{$navbar-padding-vertical}, + navbar-padding-horizontal: #{$navbar-padding-horizontal}, + navbar-z: #{$navbar-z}, + navbar-fixed-z: #{$navbar-fixed-z}, + navbar-item-color: #{$navbar-item-color}, + navbar-item-hover-color: #{$navbar-item-hover-color}, + navbar-item-hover-background-color: #{$navbar-item-hover-background-color}, + navbar-item-active-color: #{$navbar-item-active-color}, + navbar-item-active-background-color: #{$navbar-item-active-background-color}, + navbar-item-img-max-height: #{$navbar-item-img-max-height}, + navbar-burger-color: #{$navbar-burger-color}, + navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color}, + navbar-tab-hover-border-bottom-color: #{$navbar-tab-hover-border-bottom-color}, + navbar-tab-active-color: #{$navbar-tab-active-color}, + navbar-tab-active-background-color: #{$navbar-tab-active-background-color}, + navbar-tab-active-border-bottom-color: #{$navbar-tab-active-border-bottom-color}, + navbar-tab-active-border-bottom-style: #{$navbar-tab-active-border-bottom-style}, + navbar-tab-active-border-bottom-width: #{$navbar-tab-active-border-bottom-width}, + navbar-dropdown-background-color: #{$navbar-dropdown-background-color}, + navbar-dropdown-border-top: #{$navbar-dropdown-border-top}, + navbar-dropdown-offset: #{$navbar-dropdown-offset}, + navbar-dropdown-arrow: #{$navbar-dropdown-arrow}, + navbar-dropdown-radius: #{$navbar-dropdown-radius}, + navbar-dropdown-z: #{$navbar-dropdown-z}, + navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}, + navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}, + navbar-dropdown-item-hover-color: #{$navbar-dropdown-item-hover-color}, + navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color}, + navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color}, + navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color}, + navbar-divider-background-color: #{$navbar-divider-background-color}, + navbar-divider-height: #{$navbar-divider-height}, + navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size}, + ) + ); +} + @mixin navbar-fixed { left: 0; position: fixed; right: 0; - z-index: $navbar-fixed-z; + z-index: getVar("navbar-fixed-z"); } .#{$class-prefix}navbar { - background-color: $navbar-background-color; - min-height: $navbar-height; + background-color: getVar("navbar-background-color"); + min-height: getVar("navbar-height"); position: relative; - z-index: $navbar-z; + z-index: getVar("navbar-z"); @each $name, $pair in $navbar-colors { $color: nth($pair, 1); @@ -149,12 +193,13 @@ $navbar-colors: $colors !default; & > .#{$class-prefix}container { align-items: stretch; display: flex; - min-height: $navbar-height; + min-height: getVar("navbar-height"); width: 100%; } &.has-shadow { - box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color; + box-shadow: getVar("navbar-box-shadow-size") + getVar("navbar-box-shadow-color"); } &.is-fixed-bottom, @@ -166,7 +211,8 @@ $navbar-colors: $colors !default; bottom: 0; &.has-shadow { - box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color; + box-shadow: getVar("navbar-bottom-box-shadow-size") + getVar("navbar-box-shadow-color"); } } @@ -178,11 +224,11 @@ $navbar-colors: $colors !default; html, body { &.has-navbar-fixed-top { - padding-top: $navbar-height; + padding-top: getVar("navbar-height"); } &.has-navbar-fixed-bottom { - padding-bottom: $navbar-height; + padding-bottom: getVar("navbar-height"); } } @@ -191,7 +237,7 @@ body { align-items: stretch; display: flex; flex-shrink: 0; - min-height: $navbar-height; + min-height: getVar("navbar-height"); } .#{$class-prefix}navbar-brand { @@ -214,9 +260,9 @@ body { .#{$class-prefix}navbar-burger { @extend %reset; - color: $navbar-burger-color; + color: getVar("navbar-burger-color"); - @include hamburger($navbar-height); + @include hamburger(getVar("navbar-height")); @include ltr-property("margin", auto, false); } @@ -226,7 +272,7 @@ body { .#{$class-prefix}navbar-item, .#{$class-prefix}navbar-link { - color: $navbar-item-color; + color: getVar("navbar-item-color"); display: block; line-height: 1.5; padding: 0.5rem 0.75rem; @@ -248,8 +294,8 @@ a.#{$class-prefix}navbar-item, &:focus-within, &:hover, &.is-active { - background-color: $navbar-item-hover-background-color; - color: $navbar-item-hover-color; + background-color: getVar("navbar-item-hover-background-color"); + color: getVar("navbar-item-hover-color"); } } @@ -258,7 +304,7 @@ a.#{$class-prefix}navbar-item, flex-shrink: 0; img { - max-height: $navbar-item-img-max-height; + max-height: getVar("navbar-item-img-max-height"); } &.has-dropdown { @@ -272,22 +318,24 @@ a.#{$class-prefix}navbar-item, &.is-tab { border-bottom: 1px solid transparent; - min-height: $navbar-height; + min-height: getVar("navbar-height"); padding-bottom: calc(0.5rem - 1px); &:focus, &:hover { - background-color: $navbar-tab-hover-background-color; - border-bottom-color: $navbar-tab-hover-border-bottom-color; + background-color: getVar("navbar-tab-hover-background-color"); + border-bottom-color: getVar("navbar-tab-hover-border-bottom-color"); } &.is-active { - background-color: $navbar-tab-active-background-color; - border-bottom-color: $navbar-tab-active-border-bottom-color; - border-bottom-style: $navbar-tab-active-border-bottom-style; - border-bottom-width: $navbar-tab-active-border-bottom-width; - color: $navbar-tab-active-color; - padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}); + background-color: getVar("navbar-tab-active-background-color"); + border-bottom-color: getVar("navbar-tab-active-border-bottom-color"); + border-bottom-style: getVar("navbar-tab-active-border-bottom-style"); + border-bottom-width: getVar("navbar-tab-active-border-bottom-width"); + color: getVar("navbar-tab-active-color"); + padding-bottom: calc( + 0.5rem - #{getVar("navbar-tab-active-border-bottom-width")} + ); } } } @@ -302,10 +350,8 @@ a.#{$class-prefix}navbar-item, &::after { @extend %arrow; - - border-color: $navbar-dropdown-arrow; + border-color: getVar("navbar-dropdown-arrow"); margin-top: -0.375em; - @include ltr-position(1.125em); } } @@ -322,10 +368,10 @@ a.#{$class-prefix}navbar-item, } .#{$class-prefix}navbar-divider { - background-color: $navbar-divider-background-color; + background-color: getVar("navbar-divider-background-color"); border: none; display: none; - height: $navbar-divider-height; + height: getVar("navbar-divider-height"); margin: 0.5rem 0; } @@ -349,7 +395,7 @@ a.#{$class-prefix}navbar-item, } .#{$class-prefix}navbar-menu { - background-color: $navbar-background-color; + background-color: getVar("navbar-background-color"); box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1); padding: 0.5rem 0; @@ -382,7 +428,7 @@ a.#{$class-prefix}navbar-item, .#{$class-prefix}navbar-menu { @include overflow-touch; - max-height: calc(100vh - #{$navbar-height}); + max-height: calc(100vh - #{getVar("navbar-height")}); overflow: auto; } } @@ -391,11 +437,11 @@ a.#{$class-prefix}navbar-item, html, body { &.has-navbar-fixed-top-touch { - padding-top: $navbar-height; + padding-top: getVar("navbar-height"); } &.has-navbar-fixed-bottom-touch { - padding-bottom: $navbar-height; + padding-bottom: getVar("navbar-height"); } } } @@ -410,10 +456,11 @@ a.#{$class-prefix}navbar-item, } .#{$class-prefix}navbar { - min-height: $navbar-height; + min-height: getVar("navbar-height"); &.is-spaced { - padding: $navbar-padding-vertical $navbar-padding-horizontal; + padding: getVar("navbar-padding-vertical") + getVar("navbar-padding-horizontal"); .#{$class-prefix}navbar-start, .#{$class-prefix}navbar-end { @@ -422,7 +469,7 @@ a.#{$class-prefix}navbar-item, a.#{$class-prefix}navbar-item, .#{$class-prefix}navbar-link { - border-radius: $radius; + border-radius: getVar("radius"); } } @@ -451,13 +498,17 @@ a.#{$class-prefix}navbar-item, a.#{$class-prefix}navbar-item { &:focus, &:hover { - background-color: $navbar-dropdown-item-hover-background-color; - color: $navbar-dropdown-item-hover-color; + background-color: getVar( + "navbar-dropdown-item-hover-background-color" + ); + color: getVar("navbar-dropdown-item-hover-color"); } &.is-active { - background-color: $navbar-dropdown-item-active-background-color; - color: $navbar-dropdown-item-active-color; + background-color: getVar( + "navbar-dropdown-item-active-background-color" + ); + color: getVar("navbar-dropdown-item-active-color"); } } } @@ -485,8 +536,9 @@ a.#{$class-prefix}navbar-item, } .#{$class-prefix}navbar-dropdown { - border-bottom: $navbar-dropdown-border-top; - border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0; + border-bottom: getVar("navbar-dropdown-border-top"); + border-radius: getVar("navbar-dropdown-radius") + getVar("navbar-dropdown-radius") 0 0; border-top: none; bottom: 100%; box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1); @@ -529,20 +581,18 @@ a.#{$class-prefix}navbar-item, } .#{$class-prefix}navbar-dropdown { - background-color: $navbar-dropdown-background-color; - border-bottom-left-radius: $navbar-dropdown-radius; - border-bottom-right-radius: $navbar-dropdown-radius; - border-top: $navbar-dropdown-border-top; + background-color: getVar("navbar-dropdown-background-color"); + border-bottom-left-radius: getVar("navbar-dropdown-radius"); + border-bottom-right-radius: getVar("navbar-dropdown-radius"); + border-top: getVar("navbar-dropdown-border-top"); box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1); display: none; font-size: 0.875rem; - @include ltr-position(0, false); - min-width: 100%; position: absolute; top: 100%; - z-index: $navbar-dropdown-z; + z-index: getVar("navbar-dropdown-z"); .#{$class-prefix}navbar-item { padding: 0.375rem 1rem; @@ -554,27 +604,29 @@ a.#{$class-prefix}navbar-item, &:focus, &:hover { - background-color: $navbar-dropdown-item-hover-background-color; - color: $navbar-dropdown-item-hover-color; + background-color: getVar("navbar-dropdown-item-hover-background-color"); + color: getVar("navbar-dropdown-item-hover-color"); } &.is-active { - background-color: $navbar-dropdown-item-active-background-color; - color: $navbar-dropdown-item-active-color; + background-color: getVar( + "navbar-dropdown-item-active-background-color" + ); + color: getVar("navbar-dropdown-item-active-color"); } } .#{$class-prefix}navbar.is-spaced &, &.is-boxed { - border-radius: $navbar-dropdown-boxed-radius; + border-radius: getVar("navbar-dropdown-boxed-radius"); border-top: none; - box-shadow: $navbar-dropdown-boxed-shadow; + box-shadow: getVar("navbar-dropdown-boxed-shadow"); display: block; opacity: 0; pointer-events: none; - top: calc(100% + (#{$navbar-dropdown-offset})); + top: calc(100% + (#{getVar("navbar-dropdown-offset")})); transform: translateY(-5px); - transition-duration: $speed; + transition-duration: getVar("speed"); transition-property: opacity, transform; } @@ -622,19 +674,25 @@ a.#{$class-prefix}navbar-item, html, body { &.has-navbar-fixed-top-desktop { - padding-top: $navbar-height; + padding-top: getVar("navbar-height"); } &.has-navbar-fixed-bottom-desktop { - padding-bottom: $navbar-height; + padding-bottom: getVar("navbar-height"); } &.has-spaced-navbar-fixed-top { - padding-top: $navbar-height + $navbar-padding-vertical * 2; + padding-top: calc( + #{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} * + 2) + ); } &.has-spaced-navbar-fixed-bottom { - padding-bottom: $navbar-height + $navbar-padding-vertical * 2; + padding-bottom: calc( + #{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} * + 2) + ); } } @@ -642,11 +700,11 @@ a.#{$class-prefix}navbar-item, a.#{$class-prefix}navbar-item, .#{$class-prefix}navbar-link { &.is-active { - color: $navbar-item-active-color; + color: getVar("navbar-item-active-color"); } &.is-active:not(:focus):not(:hover) { - background-color: $navbar-item-active-background-color; + background-color: getVar("navbar-item-active-background-color"); } } @@ -655,7 +713,7 @@ a.#{$class-prefix}navbar-item, &:hover, &.is-active { .#{$class-prefix}navbar-link { - background-color: $navbar-item-hover-background-color; + background-color: getVar("navbar-item-hover-background-color"); } } } @@ -665,6 +723,6 @@ a.#{$class-prefix}navbar-item, .#{$class-prefix}hero { &.is-fullheight-with-navbar { - min-height: calc(100vh - #{$navbar-height}); + min-height: calc(100vh - #{getVar("navbar-height")}); } } diff --git a/sass/components/pagination.scss b/sass/components/pagination.scss index 6f641683..543183c3 100644 --- a/sass/components/pagination.scss +++ b/sass/components/pagination.scss @@ -1,10 +1,10 @@ @import "../utilities/controls"; @import "../utilities/mixins"; -$pagination-color: $text-strong !default; -$pagination-border-color: $border !default; +$pagination-color: getVar("text-strong") !default; +$pagination-border-color: getVar("border") !default; $pagination-margin: -0.25rem !default; -$pagination-min-width: $control-height !default; +$pagination-min-width: $control-height !default; // TODO $pagination-item-font-size: 1em !default; $pagination-item-margin: 0.25rem !default; @@ -14,44 +14,75 @@ $pagination-item-padding-right: 0.5em !default; $pagination-nav-padding-left: 0.75em !default; $pagination-nav-padding-right: 0.75em !default; -$pagination-hover-color: $link-hover !default; -$pagination-hover-border-color: $link-hover-border !default; +$pagination-hover-color: getVar("link-hover") !default; +$pagination-hover-border-color: getVar("link-hover-border") !default; -$pagination-focus-color: $link-focus !default; -$pagination-focus-border-color: $link-focus-border !default; +$pagination-focus-color: getVar("link-focus") !default; +$pagination-focus-border-color: getVar("link-focus-border") !default; -$pagination-active-color: $link-active !default; -$pagination-active-border-color: $link-active-border !default; +$pagination-active-color: getVar("link-active") !default; +$pagination-active-border-color: getVar("link-active-border") !default; -$pagination-disabled-color: $text-light !default; -$pagination-disabled-background-color: $border !default; -$pagination-disabled-border-color: $border !default; +$pagination-disabled-color: getVar("text-light") !default; +$pagination-disabled-background-color: getVar("border") !default; +$pagination-disabled-border-color: getVar("border") !default; -$pagination-current-color: $link-invert !default; -$pagination-current-background-color: $link !default; -$pagination-current-border-color: $link !default; +$pagination-current-color: getVar("link-invert") !default; +$pagination-current-background-color: getVar("link") !default; +$pagination-current-border-color: getVar("link") !default; -$pagination-ellipsis-color: $grey-light !default; +$pagination-ellipsis-color: getVar("grey-light") !default; $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; +:root { + @include register-vars( + ( + pagination-color: #{$pagination-color}, + pagination-border-color: #{$pagination-border-color}, + pagination-margin: #{$pagination-margin}, + pagination-min-width: #{$pagination-min-width}, + pagination-item-font-size: #{$pagination-item-font-size}, + pagination-item-margin: #{$pagination-item-margin}, + pagination-item-padding-left: #{$pagination-item-padding-left}, + pagination-item-padding-right: #{$pagination-item-padding-right}, + pagination-nav-padding-left: #{$pagination-nav-padding-left}, + pagination-nav-padding-right: #{$pagination-nav-padding-right}, + pagination-hover-color: #{$pagination-hover-color}, + pagination-hover-border-color: #{$pagination-hover-border-color}, + pagination-focus-color: #{$pagination-focus-color}, + pagination-focus-border-color: #{$pagination-focus-border-color}, + pagination-active-color: #{$pagination-active-color}, + pagination-active-border-color: #{$pagination-active-border-color}, + pagination-disabled-color: #{$pagination-disabled-color}, + pagination-disabled-background-color: #{$pagination-disabled-background-color}, + pagination-disabled-border-color: #{$pagination-disabled-border-color}, + pagination-current-color: #{$pagination-current-color}, + pagination-current-background-color: #{$pagination-current-background-color}, + pagination-current-border-color: #{$pagination-current-border-color}, + pagination-ellipsis-color: #{$pagination-ellipsis-color}, + pagination-shadow-inset: #{$pagination-shadow-inset}, + ) + ); +} + .#{$class-prefix}pagination { @extend %block; - font-size: $size-normal; - margin: $pagination-margin; + font-size: getVar("size-normal"); + margin: getVar("pagination-margin"); // Sizes &.is-small { - font-size: $size-small; + font-size: getVar("size-small"); } &.is-medium { - font-size: $size-medium; + font-size: getVar("size-medium"); } &.is-large { - font-size: $size-large; + font-size: getVar("size-large"); } &.is-rounded { @@ -59,11 +90,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; .#{$class-prefix}pagination-next { padding-left: 1em; padding-right: 1em; - border-radius: $radius-rounded; + border-radius: getVar("radius-rounded"); } .#{$class-prefix}pagination-link { - border-radius: $radius-rounded; + border-radius: getVar("radius-rounded"); } } } @@ -81,64 +112,63 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; .#{$class-prefix}pagination-link, .#{$class-prefix}pagination-ellipsis { @extend %control; - @extend %unselectable; - font-size: $pagination-item-font-size; + font-size: getVar("pagination-item-font-size"); justify-content: center; - margin: $pagination-item-margin; - padding-left: $pagination-item-padding-left; - padding-right: $pagination-item-padding-right; + margin: getVar("pagination-item-margin"); + padding-left: getVar("pagination-item-padding-left"); + padding-right: getVar("pagination-item-padding-right"); text-align: center; } .#{$class-prefix}pagination-previous, .#{$class-prefix}pagination-next, .#{$class-prefix}pagination-link { - border-color: $pagination-border-color; - color: $pagination-color; - min-width: $pagination-min-width; + border-color: getVar("pagination-border-color"); + color: getVar("pagination-color"); + min-width: getVar("pagination-min-width"); &:hover { - border-color: $pagination-hover-border-color; - color: $pagination-hover-color; + border-color: getVar("pagination-hover-border-color"); + color: getVar("pagination-hover-color"); } &:focus { - border-color: $pagination-focus-border-color; + border-color: getVar("pagination-focus-border-color"); } &:active { - box-shadow: $pagination-shadow-inset; + box-shadow: getVar("pagination-shadow-inset"); } &[disabled], &.is-disabled { - background-color: $pagination-disabled-background-color; - border-color: $pagination-disabled-border-color; + background-color: getVar("pagination-disabled-background-color"); + border-color: getVar("pagination-disabled-border-color"); box-shadow: none; - color: $pagination-disabled-color; + color: getVar("pagination-disabled-color"); opacity: 0.5; } } .#{$class-prefix}pagination-previous, .#{$class-prefix}pagination-next { - padding-left: $pagination-nav-padding-left; - padding-right: $pagination-nav-padding-right; + padding-left: getVar("pagination-nav-padding-left"); + padding-right: getVar("pagination-nav-padding-right"); white-space: nowrap; } .#{$class-prefix}pagination-link { &.is-current { - background-color: $pagination-current-background-color; - border-color: $pagination-current-border-color; - color: $pagination-current-color; + background-color: getVar("pagination-current-background-color"); + border-color: getVar("pagination-current-border-color"); + color: getVar("pagination-current-color"); } } .#{$class-prefix}pagination-ellipsis { - color: $pagination-ellipsis-color; + color: getVar("pagination-ellipsis-color"); pointer-events: none; } diff --git a/sass/components/panel.scss b/sass/components/panel.scss index 651d55ef..b84e0c54 100644 --- a/sass/components/panel.scss +++ b/sass/components/panel.scss @@ -1,42 +1,72 @@ @import "../utilities/mixins"; -$panel-margin: $block-spacing !default; -$panel-item-border: 1px solid $border-light !default; -$panel-radius: $radius-large !default; -$panel-shadow: $shadow !default; +$panel-margin: getVar("block-spacing") !default; +$panel-item-border: 1px solid getVar("border-light") !default; +$panel-radius: getVar("radius-large") !default; +$panel-shadow: getVar("shadow") !default; -$panel-heading-background-color: $border-light !default; -$panel-heading-color: $text-strong !default; +$panel-heading-background-color: getVar("border-light") !default; +$panel-heading-color: getVar("text-strong") !default; $panel-heading-line-height: 1.25 !default; $panel-heading-padding: 0.75em 1em !default; -$panel-heading-radius: $radius !default; +$panel-heading-radius: getVar("radius") !default; $panel-heading-size: 1.25em !default; -$panel-heading-weight: $weight-bold !default; +$panel-heading-weight: getVar("weight-bold") !default; $panel-tabs-font-size: 0.875em !default; -$panel-tab-border-bottom: 1px solid $border !default; -$panel-tab-active-border-bottom-color: $link-active-border !default; -$panel-tab-active-color: $link-active !default; +$panel-tab-border-bottom: 1px solid getVar("border") !default; +$panel-tab-active-border-bottom-color: getVar("link-active-border") !default; +$panel-tab-active-color: getVar("link-active") !default; -$panel-list-item-color: $text !default; -$panel-list-item-hover-color: $link !default; +$panel-list-item-color: getVar("text") !default; +$panel-list-item-hover-color: getVar("link") !default; -$panel-block-color: $text-strong !default; -$panel-block-hover-background-color: $background !default; -$panel-block-active-border-left-color: $link !default; -$panel-block-active-color: $link-active !default; -$panel-block-active-icon-color: $link !default; +$panel-block-color: getVar("text-strong") !default; +$panel-block-hover-background-color: getVar("background") !default; +$panel-block-active-border-left-color: getVar("link") !default; +$panel-block-active-color: getVar("link-active") !default; +$panel-block-active-icon-color: getVar("link") !default; -$panel-icon-color: $text-light !default; +$panel-icon-color: getVar("text-light") !default; $panel-colors: $colors !default; +:root { + @include register-vars( + ( + panel-margin: #{$panel-margin}, + panel-item-border: #{$panel-item-border}, + panel-radius: #{$panel-radius}, + panel-shadow: #{$panel-shadow}, + panel-heading-background-color: #{$panel-heading-background-color}, + panel-heading-color: #{$panel-heading-color}, + panel-heading-line-height: #{$panel-heading-line-height}, + panel-heading-padding: #{$panel-heading-padding}, + panel-heading-radius: #{$panel-heading-radius}, + panel-heading-size: #{$panel-heading-size}, + panel-heading-weight: #{$panel-heading-weight}, + panel-tabs-font-size: #{$panel-tabs-font-size}, + panel-tab-border-bottom: #{$panel-tab-border-bottom}, + panel-tab-active-border-bottom-color: #{$panel-tab-active-border-bottom-color}, + panel-tab-active-color: #{$panel-tab-active-color}, + panel-list-item-color: #{$panel-list-item-color}, + panel-list-item-hover-color: #{$panel-list-item-hover-color}, + panel-block-color: #{$panel-block-color}, + panel-block-hover-background-color: #{$panel-block-hover-background-color}, + panel-block-active-border-left-color: #{$panel-block-active-border-left-color}, + panel-block-active-color: #{$panel-block-active-color}, + panel-block-active-icon-color: #{$panel-block-active-icon-color}, + panel-icon-color: #{$panel-icon-color}, + ) + ); +} + .#{$class-prefix}panel { - border-radius: $panel-radius; - box-shadow: $panel-shadow; - font-size: $size-normal; + border-radius: getVar("panel-radius"); + box-shadow: getVar("panel-shadow"); + font-size: getVar("size-normal"); &:not(:last-child) { - margin-bottom: $panel-margin; + margin-bottom: getVar("panel-margin"); } // Colors @@ -64,52 +94,52 @@ $panel-colors: $colors !default; .#{$class-prefix}panel-tabs, .#{$class-prefix}panel-block { &:not(:last-child) { - border-bottom: $panel-item-border; + border-bottom: getVar("panel-item-border"); } } .#{$class-prefix}panel-heading { - background-color: $panel-heading-background-color; + background-color: getVar("panel-heading-background-color"); border-radius: $panel-radius $panel-radius 0 0; - color: $panel-heading-color; - font-size: $panel-heading-size; - font-weight: $panel-heading-weight; - line-height: $panel-heading-line-height; - padding: $panel-heading-padding; + color: getVar("panel-heading-color"); + font-size: getVar("panel-heading-size"); + font-weight: getVar("panel-heading-weight"); + line-height: getVar("panel-heading-line-height"); + padding: getVar("panel-heading-padding"); } .#{$class-prefix}panel-tabs { align-items: flex-end; display: flex; - font-size: $panel-tabs-font-size; + font-size: getVar("panel-tabs-font-size"); justify-content: center; a { - border-bottom: $panel-tab-border-bottom; + border-bottom: getVar("panel-tab-border-bottom"); margin-bottom: -1px; padding: 0.5em; // Modifiers &.is-active { - border-bottom-color: $panel-tab-active-border-bottom-color; - color: $panel-tab-active-color; + border-bottom-color: getVar("panel-tab-active-border-bottom-color"); + color: getVar("panel-tab-active-color"); } } } .#{$class-prefix}panel-list { a { - color: $panel-list-item-color; + color: getVar("panel-list-item-color"); &:hover { - color: $panel-list-item-hover-color; + color: getVar("panel-list-item-hover-color"); } } } .#{$class-prefix}panel-block { align-items: center; - color: $panel-block-color; + color: getVar("panel-block-color"); display: flex; justify-content: flex-start; padding: 0.5em 0.75em; @@ -129,17 +159,17 @@ $panel-colors: $colors !default; } &.is-active { - border-left-color: $panel-block-active-border-left-color; - color: $panel-block-active-color; + border-left-color: getVar("panel-block-active-border-left-color"); + color: getVar("panel-block-active-color"); .#{$class-prefix}panel-icon { - color: $panel-block-active-icon-color; + color: getVar("panel-block-active-icon-color"); } } &:last-child { - border-bottom-left-radius: $panel-radius; - border-bottom-right-radius: $panel-radius; + border-bottom-left-radius: getVar("panel-radius"); + border-bottom-right-radius: getVar("panel-radius"); } } @@ -148,14 +178,14 @@ label.#{$class-prefix}panel-block { cursor: pointer; &:hover { - background-color: $panel-block-hover-background-color; + background-color: getVar("panel-block-hover-background-color"); } } .#{$class-prefix}panel-icon { @include fa(14px, 1em); - color: $panel-icon-color; + color: getVar("panel-icon-color"); @include ltr-property("margin", 0.75em); diff --git a/sass/components/tabs.scss b/sass/components/tabs.scss index 8cdbacb8..1fea2f0e 100644 --- a/sass/components/tabs.scss +++ b/sass/components/tabs.scss @@ -1,43 +1,72 @@ @import "../utilities/mixins"; -$tabs-border-bottom-color: $border !default; +$tabs-border-bottom-color: getVar("border") !default; $tabs-border-bottom-style: solid !default; $tabs-border-bottom-width: 1px !default; -$tabs-link-color: $text !default; -$tabs-link-hover-border-bottom-color: $text-strong !default; -$tabs-link-hover-color: $text-strong !default; -$tabs-link-active-border-bottom-color: $link !default; -$tabs-link-active-color: $link !default; +$tabs-link-color: getVar("text") !default; +$tabs-link-hover-border-bottom-color: getVar("text-strong") !default; +$tabs-link-hover-color: getVar("text-strong") !default; +$tabs-link-active-border-bottom-color: getVar("link") !default; +$tabs-link-active-color: getVar("link") !default; $tabs-link-padding: 0.5em 1em !default; -$tabs-boxed-link-radius: $radius !default; -$tabs-boxed-link-hover-background-color: $background !default; -$tabs-boxed-link-hover-border-bottom-color: $border !default; +$tabs-boxed-link-radius: getVar("radius") !default; +$tabs-boxed-link-hover-background-color: getVar("background") !default; +$tabs-boxed-link-hover-border-bottom-color: getVar("border") !default; -$tabs-boxed-link-active-background-color: $scheme-main !default; -$tabs-boxed-link-active-border-color: $border !default; +$tabs-boxed-link-active-background-color: getVar("scheme-main") !default; +$tabs-boxed-link-active-border-color: getVar("border") !default; $tabs-boxed-link-active-border-bottom-color: transparent !default; -$tabs-toggle-link-border-color: $border !default; +$tabs-toggle-link-border-color: getVar("border") !default; $tabs-toggle-link-border-style: solid !default; $tabs-toggle-link-border-width: 1px !default; -$tabs-toggle-link-hover-background-color: $background !default; -$tabs-toggle-link-hover-border-color: $border-hover !default; -$tabs-toggle-link-radius: $radius !default; -$tabs-toggle-link-active-background-color: $link !default; -$tabs-toggle-link-active-border-color: $link !default; -$tabs-toggle-link-active-color: $link-invert !default; +$tabs-toggle-link-hover-background-color: getVar("background") !default; +$tabs-toggle-link-hover-border-color: getVar("border-hover") !default; +$tabs-toggle-link-radius: getVar("radius") !default; +$tabs-toggle-link-active-background-color: getVar("link") !default; +$tabs-toggle-link-active-border-color: getVar("link") !default; +$tabs-toggle-link-active-color: getVar("link-invert") !default; + +:root { + @include register-vars( + ( + tabs-border-bottom-color: #{$tabs-border-bottom-color}, + tabs-border-bottom-style: #{$tabs-border-bottom-style}, + tabs-border-bottom-width: #{$tabs-border-bottom-width}, + tabs-link-color: #{$tabs-link-color}, + tabs-link-hover-border-bottom-color: #{$tabs-link-hover-border-bottom-color}, + tabs-link-hover-color: #{$tabs-link-hover-color}, + tabs-link-active-border-bottom-color: #{$tabs-link-active-border-bottom-color}, + tabs-link-active-color: #{$tabs-link-active-color}, + tabs-link-padding: #{$tabs-link-padding}, + tabs-boxed-link-radius: #{$tabs-boxed-link-radius}, + tabs-boxed-link-hover-background-color: #{$tabs-boxed-link-hover-background-color}, + tabs-boxed-link-hover-border-bottom-color: #{$tabs-boxed-link-hover-border-bottom-color}, + tabs-boxed-link-active-background-color: #{$tabs-boxed-link-active-background-color}, + tabs-boxed-link-active-border-color: #{$tabs-boxed-link-active-border-color}, + tabs-boxed-link-active-border-bottom-color: #{$tabs-boxed-link-active-border-bottom-color}, + tabs-toggle-link-border-color: #{$tabs-toggle-link-border-color}, + tabs-toggle-link-border-style: #{$tabs-toggle-link-border-style}, + tabs-toggle-link-border-width: #{$tabs-toggle-link-border-width}, + tabs-toggle-link-hover-background-color: #{$tabs-toggle-link-hover-background-color}, + tabs-toggle-link-hover-border-color: #{$tabs-toggle-link-hover-border-color}, + tabs-toggle-link-radius: #{$tabs-toggle-link-radius}, + tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color}, + tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color}, + tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color}, + ) + ); +} .#{$class-prefix}tabs { @extend %block; - @include overflow-touch; - @extend %unselectable; align-items: stretch; display: flex; - font-size: $size-normal; + font-size: getVar("size-normal"); justify-content: space-between; overflow: hidden; overflow-x: auto; @@ -45,19 +74,19 @@ $tabs-toggle-link-active-color: $link-invert !default; a { align-items: center; - border-bottom-color: $tabs-border-bottom-color; - border-bottom-style: $tabs-border-bottom-style; - border-bottom-width: $tabs-border-bottom-width; - color: $tabs-link-color; + border-bottom-color: getVar("tabs-border-bottom-color"); + border-bottom-style: getVar("tabs-border-bottom-style"); + border-bottom-width: getVar("tabs-border-bottom-width"); + color: getVar("tabs-link-color"); display: flex; justify-content: center; - margin-bottom: -#{$tabs-border-bottom-width}; - padding: $tabs-link-padding; + margin-bottom: calc(-1 * #{getVar("tabs-border-bottom-width")}); + padding: getVar("tabs-link-padding"); vertical-align: top; &:hover { - border-bottom-color: $tabs-link-hover-border-bottom-color; - color: $tabs-link-hover-color; + border-bottom-color: getVar("tabs-link-hover-border-bottom-color"); + color: getVar("tabs-link-hover-color"); } } @@ -66,17 +95,17 @@ $tabs-toggle-link-active-color: $link-invert !default; &.is-active { a { - border-bottom-color: $tabs-link-active-border-bottom-color; - color: $tabs-link-active-color; + border-bottom-color: getVar("tabs-link-active-border-bottom-color"); + color: getVar("tabs-link-active-color"); } } } ul { align-items: center; - border-bottom-color: $tabs-border-bottom-color; - border-bottom-style: $tabs-border-bottom-style; - border-bottom-width: $tabs-border-bottom-width; + border-bottom-color: getVar("tabs-border-bottom-color"); + border-bottom-style: getVar("tabs-border-bottom-style"); + border-bottom-width: getVar("tabs-border-bottom-width"); display: flex; flex-grow: 1; flex-shrink: 0; @@ -128,25 +157,31 @@ $tabs-toggle-link-active-color: $link-invert !default; border: 1px solid transparent; @include ltr { - border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0; + border-radius: getVar("tabs-boxed-link-radius") + getVar("tabs-boxed-link-radius") 0 0; } @include rtl { - border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius; + border-radius: 0 0 getVar("tabs-boxed-link-radius") + getVar("tabs-boxed-link-radius"); } &:hover { - background-color: $tabs-boxed-link-hover-background-color; - border-bottom-color: $tabs-boxed-link-hover-border-bottom-color; + background-color: getVar("tabs-boxed-link-hover-background-color"); + border-bottom-color: getVar( + "tabs-boxed-link-hover-border-bottom-color" + ); } } li { &.is-active { a { - background-color: $tabs-boxed-link-active-background-color; - border-color: $tabs-boxed-link-active-border-color; - border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important; + background-color: getVar("tabs-boxed-link-active-background-color"); + border-color: getVar("tabs-boxed-link-active-border-color"); + border-bottom-color: getVar( + "tabs-boxed-link-active-border-bottom-color" + ) !important; } } } @@ -161,15 +196,15 @@ $tabs-toggle-link-active-color: $link-invert !default; &.is-toggle { a { - border-color: $tabs-toggle-link-border-color; - border-style: $tabs-toggle-link-border-style; - border-width: $tabs-toggle-link-border-width; + border-color: getVar("tabs-toggle-link-border-color"); + border-style: getVar("tabs-toggle-link-border-style"); + border-width: getVar("tabs-toggle-link-border-width"); margin-bottom: 0; position: relative; &:hover { - background-color: $tabs-toggle-link-hover-background-color; - border-color: $tabs-toggle-link-hover-border-color; + background-color: getVar("tabs-toggle-link-hover-background-color"); + border-color: getVar("tabs-toggle-link-hover-border-color"); z-index: 2; } } @@ -178,40 +213,40 @@ $tabs-toggle-link-active-color: $link-invert !default; & + li { @include ltr-property( "margin", - -#{$tabs-toggle-link-border-width}, + calc(-1 * #{getVar("tabs-toggle-link-border-width")}), false ); } &:first-child a { @include ltr { - border-top-left-radius: $tabs-toggle-link-radius; - border-bottom-left-radius: $tabs-toggle-link-radius; + border-top-left-radius: getVar("tabs-toggle-link-radius"); + border-bottom-left-radius: getVar("tabs-toggle-link-radius"); } @include rtl { - border-top-right-radius: $tabs-toggle-link-radius; - border-bottom-right-radius: $tabs-toggle-link-radius; + border-top-right-radius: getVar("tabs-toggle-link-radius"); + border-bottom-right-radius: getVar("tabs-toggle-link-radius"); } } &:last-child a { @include ltr { - border-top-right-radius: $tabs-toggle-link-radius; - border-bottom-right-radius: $tabs-toggle-link-radius; + border-top-right-radius: getVar("tabs-toggle-link-radius"); + border-bottom-right-radius: getVar("tabs-toggle-link-radius"); } @include rtl { - border-top-left-radius: $tabs-toggle-link-radius; - border-bottom-left-radius: $tabs-toggle-link-radius; + border-top-left-radius: getVar("tabs-toggle-link-radius"); + border-bottom-left-radius: getVar("tabs-toggle-link-radius"); } } &.is-active { a { - background-color: $tabs-toggle-link-active-background-color; - border-color: $tabs-toggle-link-active-border-color; - color: $tabs-toggle-link-active-color; + background-color: getVar("tabs-toggle-link-active-background-color"); + border-color: getVar("tabs-toggle-link-active-border-color"); + color: getVar("tabs-toggle-link-active-color"); z-index: 1; } } @@ -225,28 +260,28 @@ $tabs-toggle-link-active-color: $link-invert !default; li { &:first-child a { @include ltr { - border-bottom-left-radius: $radius-rounded; - border-top-left-radius: $radius-rounded; + border-bottom-left-radius: getVar("radius-rounded"); + border-top-left-radius: getVar("radius-rounded"); padding-left: 1.25em; } @include rtl { - border-bottom-right-radius: $radius-rounded; - border-top-right-radius: $radius-rounded; + border-bottom-right-radius: getVar("radius-rounded"); + border-top-right-radius: getVar("radius-rounded"); padding-right: 1.25em; } } &:last-child a { @include ltr { - border-bottom-right-radius: $radius-rounded; - border-top-right-radius: $radius-rounded; + border-bottom-right-radius: getVar("radius-rounded"); + border-top-right-radius: getVar("radius-rounded"); padding-right: 1.25em; } @include rtl { - border-bottom-left-radius: $radius-rounded; - border-top-left-radius: $radius-rounded; + border-bottom-left-radius: getVar("radius-rounded"); + border-top-left-radius: getVar("radius-rounded"); padding-left: 1.25em; } } @@ -256,14 +291,14 @@ $tabs-toggle-link-active-color: $link-invert !default; // Sizes &.is-small { - font-size: $size-small; + font-size: getVar("size-small"); } &.is-medium { - font-size: $size-medium; + font-size: getVar("size-medium"); } &.is-large { - font-size: $size-large; + font-size: getVar("size-large"); } } diff --git a/sass/themes/default.scss b/sass/themes/default.scss index 975e6f74..699c4635 100644 --- a/sass/themes/default.scss +++ b/sass/themes/default.scss @@ -16,6 +16,12 @@ weight-semibold: #{$weight-semibold}, weight-bold: #{$weight-bold}, block-spacing: #{$block-spacing}, + easing: #{$easing}, + radius-small: #{$radius-small}, + radius: #{$radius}, + radius-large: #{$radius-large}, + radius-rounded: #{$radius-rounded}, + speed: #{$speed}, scheme-main: #{$white}, scheme-main-bis: #{$white-bis},