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%;
}
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;
}
}
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 {
}
small {
- font-size: 0.875em;
+ font-size: var(--bulma-small-font-size);
}
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 {
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;
}
pre code {
background-color: transparent;
color: currentColor;
- font-size: 1em;
+ font-size: var(--bulma-pre-code-font-size);
padding: 0;
}
}
table th {
- color: #363636;
+ color: var(--bulma-text-strong);
}
@keyframes spinAround {
}
/* 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 {
}
.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: "/";
}
}
.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 {
}
.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 {
cursor: pointer;
display: flex;
justify-content: center;
- padding: 0.75rem 1rem;
+ padding: var(--bulma-card-header-padding);
}
.card-image {
}
.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;
}
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 {
.dropdown.is-up .dropdown-menu {
bottom: 100%;
- padding-bottom: 4px;
+ padding-bottom: var(--bulma-dropdown-content-offset);
padding-top: initial;
top: auto;
}
.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;
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;
}
.level code {
- border-radius: 0.375em;
+ border-radius: var(--bulma-radius);
}
.level img {
.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) {
@media screen and (max-width: 768px) {
.level-item:not(:last-child) {
- margin-bottom: 0.75rem;
+ margin-bottom: var(--bulma-level-item-spacing);
}
}
@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);
}
}
}
.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,
}
.media-left {
- margin-right: 1rem;
+ margin-right: var(--bulma-media-spacing);
}
.media-right {
- margin-left: 1rem;
+ margin-left: var(--bulma-media-spacing);
}
.media-content {
}
.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 {
}
.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 {
.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;
}
}
.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 {
justify-content: center;
overflow: hidden;
position: fixed;
- z-index: 40;
+ z-index: var(--bulma-modal-z);
}
.modal.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%;
.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;
}
.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) {
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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,
.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) {
.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,
.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 {
}
.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 {
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,
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 {
}
.navbar-burger {
- color: #4a4a4a;
+ color: var(--bulma-navbar-burger-color);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
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;
}
.navbar-item,
.navbar-link {
- color: #4a4a4a;
+ color: var(--bulma-navbar-item-color);
display: block;
line-height: 1.5;
padding: 0.5rem 0.75rem;
.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 {
}
.navbar-item img {
- max-height: 1.75rem;
+ max-height: var(--bulma-navbar-item-img-max-height);
}
.navbar-item.has-dropdown {
.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 {
}
.navbar-link:not(.is-arrowless)::after {
- border-color: #485fc7;
+ border-color: var(--bulma-navbar-dropdown-arrow);
margin-top: -0.375em;
right: 1.125em;
}
}
.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;
}
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;
}
left: 0;
position: fixed;
right: 0;
- z-index: 30;
+ z-index: var(--bulma-navbar-fixed-z);
}
.navbar.is-fixed-bottom-touch {
bottom: 0;
}
.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,
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 {
}
.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,
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;
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);
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;
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;
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 {
left: 0;
position: fixed;
right: 0;
- z-index: 30;
+ z-index: var(--bulma-navbar-fixed-z);
}
.navbar.is-fixed-bottom-desktop {
bottom: 0;
}
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,
.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,
.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;
}
}
.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 {
.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;
}
.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,
a.panel-block:hover,
label.panel-block:hover {
- background-color: whitesmoke;
+ background-color: var(--bulma-panel-block-hover-background-color);
}
.panel-icon {
text-align: center;
vertical-align: top;
width: 1em;
- color: #7a7a7a;
+ color: var(--bulma-panel-icon-color);
margin-right: 0.75em;
}
-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;
.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 {
}
.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;
.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 {
}
.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;
}
}
.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 */
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%;
}
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;
}
}
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 {
}
small {
- font-size: 0.875em;
+ font-size: var(--bulma-small-font-size);
}
span {
}
strong {
- color: #363636;
- font-weight: 700;
+ color: var(--bulma-strong-color);
+ font-weight: var(--bulma-strong-weight);
}
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;
}
pre code {
background-color: transparent;
color: currentColor;
- font-size: 1em;
+ font-size: var(--bulma-pre-code-font-size);
padding: 0;
}
}
table th {
- color: #363636;
+ color: var(--bulma-text-strong);
}
@keyframes spinAround {
}
/* 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 {
}
.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: "/";
}
}
.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 {
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 {
cursor: pointer;
display: flex;
justify-content: center;
- padding: 0.75rem 1rem;
+ padding: var(--bulma-card-header-padding);
}
.card-image {
}
.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;
}
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 {
.dropdown.is-up .dropdown-menu {
bottom: 100%;
- padding-bottom: 4px;
+ padding-bottom: var(--bulma-dropdown-content-offset);
padding-top: initial;
top: auto;
}
.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;
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;
}
.level code {
- border-radius: 4px;
+ border-radius: var(--bulma-radius);
}
.level img {
.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) {
@media screen and (max-width: 768px) {
.level-item:not(:last-child) {
- margin-bottom: 0.75rem;
+ margin-bottom: var(--bulma-level-item-spacing);
}
}
@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);
}
}
}
}
+: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;
}
.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,
}
.media-left {
- margin-right: 1rem;
+ margin-right: var(--bulma-media-spacing);
}
.media-right {
- margin-left: 1rem;
+ margin-left: var(--bulma-media-spacing);
}
.media-content {
}
}
+: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 {
}
.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 {
.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;
}
}
.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 {
justify-content: center;
overflow: hidden;
position: fixed;
- z-index: 40;
+ z-index: var(--bulma-modal-z);
}
.modal.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%;
.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;
}
.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) {
.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 {
.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 {
}
.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 {
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,
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 {
}
.navbar-burger {
- color: #4a4a4a;
+ color: var(--bulma-navbar-burger-color);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
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;
}
.navbar-item,
.navbar-link {
- color: #4a4a4a;
+ color: var(--bulma-navbar-item-color);
display: block;
line-height: 1.5;
padding: 0.5rem 0.75rem;
.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 {
}
.navbar-item img {
- max-height: 1.75rem;
+ max-height: var(--bulma-navbar-item-img-max-height);
}
.navbar-item.has-dropdown {
.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 {
}
.navbar-link:not(.is-arrowless)::after {
- border-color: #485fc7;
+ border-color: var(--bulma-navbar-dropdown-arrow);
margin-top: -0.375em;
right: 1.125em;
}
}
.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;
}
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;
}
left: 0;
position: fixed;
right: 0;
- z-index: 30;
+ z-index: var(--bulma-navbar-fixed-z);
}
.navbar.is-fixed-bottom-touch {
bottom: 0;
}
.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);
}
}
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 {
}
.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,
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;
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);
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;
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;
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 {
left: 0;
position: fixed;
right: 0;
- z-index: 30;
+ z-index: var(--bulma-navbar-fixed-z);
}
.navbar.is-fixed-bottom-desktop {
bottom: 0;
}
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,
.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,
.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;
}
}
}
+: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 {
.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;
}
.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,
a.panel-block:hover,
label.panel-block:hover {
- background-color: whitesmoke;
+ background-color: var(--bulma-panel-block-hover-background-color);
}
.panel-icon {
text-align: center;
vertical-align: top;
width: 1em;
- color: #7a7a7a;
+ color: var(--bulma-panel-icon-color);
margin-right: 0.75em;
}
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;
.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 {
}
.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;
.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 {
}
.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;
}
}
.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 */
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;
+}
$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%;
}
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;
}
&: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 {
}
small {
- font-size: $small-font-size;
+ font-size: getVar("small-font-size");
}
span {
}
strong {
- color: $strong-color;
- font-weight: $strong-weight;
+ color: getVar("strong-color");
+ font-weight: getVar("strong-weight");
}
// Block
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;
}
}
}
th {
- color: $text-strong;
+ color: getVar("text-strong");
}
}
@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");
}
}
&.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: "/";
}
}
// 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
@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;
cursor: pointer;
display: flex;
justify-content: center;
- padding: $card-header-padding;
+ padding: getVar("card-header-padding");
}
.#{$class-prefix}card-image {
&: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");
}
}
}
.#{$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;
}
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"));
}
}
.#{$class-prefix}card {
.#{$class-prefix}media:not(:last-child) {
- margin-bottom: $card-media-margin;
+ margin-bottom: getVar("card-media-margin");
}
}
$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-divider-background-color: $border-light !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: 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;
&.is-up {
.#{$class-prefix}dropdown-menu {
bottom: 100%;
- padding-bottom: $dropdown-content-offset;
+ padding-bottom: getVar("dropdown-content-offset");
padding-top: initial;
top: auto;
}
@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;
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;
@import "../utilities/mixins";
-$level-item-spacing: $block-spacing * 0.5 !default;
-
.#{$class-prefix}level {
@extend %block;
justify-content: space-between;
code {
- border-radius: $radius;
+ border-radius: getVar("radius");
}
img {
&:not(:last-child) {
margin-bottom: 0;
- @include ltr-property("margin", $level-item-spacing);
+ @include ltr-property("margin", getVar("level-item-spacing"));
}
&:not(.is-narrow) {
// Responsiveness
@include mobile {
&:not(:last-child) {
- margin-bottom: $level-item-spacing;
+ margin-bottom: getVar("level-item-spacing");
}
}
}
// Responsiveness
@include tablet {
&:not(:last-child) {
- @include ltr-property("margin", $level-item-spacing);
+ @include ltr-property("margin", getVar("level-item-spacing"));
}
}
}
@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;
$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");
}
}
}
}
.#{$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 {
@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-list-border-left: 1px solid $border !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 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");
}
}
@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;
// 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);
.#{$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 {
}
& + .#{$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");
}
}
$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;
justify-content: center;
overflow: hidden;
position: fixed;
- z-index: $modal-z;
+ z-index: getVar("modal-z");
// Modifiers
&.is-active {
.#{$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%;
// 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");
}
}
@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;
}
.#{$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) {
.#{$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");
}
@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;
$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);
& > .#{$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,
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");
}
}
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");
}
}
align-items: stretch;
display: flex;
flex-shrink: 0;
- min-height: $navbar-height;
+ min-height: getVar("navbar-height");
}
.#{$class-prefix}navbar-brand {
.#{$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);
}
.#{$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;
&: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");
}
}
flex-shrink: 0;
img {
- max-height: $navbar-item-img-max-height;
+ max-height: getVar("navbar-item-img-max-height");
}
&.has-dropdown {
&.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")}
+ );
}
}
}
&::after {
@extend %arrow;
-
- border-color: $navbar-dropdown-arrow;
+ border-color: getVar("navbar-dropdown-arrow");
margin-top: -0.375em;
-
@include ltr-position(1.125em);
}
}
}
.#{$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;
}
}
.#{$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;
.#{$class-prefix}navbar-menu {
@include overflow-touch;
- max-height: calc(100vh - #{$navbar-height});
+ max-height: calc(100vh - #{getVar("navbar-height")});
overflow: auto;
}
}
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");
}
}
}
}
.#{$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 {
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
- border-radius: $radius;
+ border-radius: getVar("radius");
}
}
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-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);
}
.#{$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;
&: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;
}
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)
+ );
}
}
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");
}
}
&:hover,
&.is-active {
.#{$class-prefix}navbar-link {
- background-color: $navbar-item-hover-background-color;
+ background-color: getVar("navbar-item-hover-background-color");
}
}
}
.#{$class-prefix}hero {
&.is-fullheight-with-navbar {
- min-height: calc(100vh - #{$navbar-height});
+ min-height: calc(100vh - #{getVar("navbar-height")});
}
}
@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;
$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 {
.#{$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");
}
}
}
.#{$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;
}
@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
.#{$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;
}
&.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");
}
}
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);
@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;
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");
}
}
&.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;
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;
}
}
}
&.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;
}
}
& + 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;
}
}
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;
}
}
// 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");
}
}
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},
projects / thirdparty / bulma.git / commitdiff
