}
/* Bulma Elements */
+:root {
+ --bulma-box-color: var(--bulma-text);
+ --bulma-box-background-color: var(--bulma-scheme-main);
+ --bulma-box-radius: var(--bulma-radius-large);
+ --bulma-box-shadow: var(--bulma-shadow);
+ --bulma-box-padding: 1.25rem;
+ --bulma-box-link-hover-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px var(--bulma-link);
+ --bulma-box-link-active-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px var(--bulma-link);
+}
+
.box {
- background-color: white;
- 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);
- color: #4a4a4a;
+ background-color: var(--bulma-box-background-color);
+ border-radius: var(--bulma-box-radius);
+ box-shadow: var(--bulma-box-shadow);
+ color: var(--bulma-box-color);
display: block;
- padding: 1.25rem;
+ padding: var(--bulma-box-padding);
}
a.box:hover, a.box:focus {
- box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #485fc7;
+ box-shadow: var(--bulma-box-link-hover-shadow);
}
a.box:active {
- box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #485fc7;
+ box-shadow: var(--bulma-box-link-active-shadow);
+}
+
+:root {
+ --bulma-button-color: var(--bulma-text-strong);
+ --bulma-button-background-color: var(--bulma-scheme-main);
+ --bulma-button-family: false;
+ --bulma-button-border-color: var(--bulma-border);
+ --bulma-button-border-width: 1px;
+ --bulma-button-padding-vertical: calc( 0.5em - var(--bulma-button-border-width));
+ --bulma-button-padding-horizontal: 1em;
+ --bulma-button-hover-color: var(--bulma-link-hover);
+ --bulma-button-hover-border-color: var(--bulma-link-hover-border);
+ --bulma-button-focus-color: var(--bulma-link-focus);
+ --bulma-button-focus-border-color: var(--bulma-link-focus-border);
+ --bulma-button-focus-box-shadow-size: 0 0 0 0.125em;
+ --bulma-button-focus-box-shadow-color: rgba(72, 95, 199, 0.25);
+ --bulma-button-active-color: var(--bulma-link-active);
+ --bulma-button-active-border-color: var(--bulma-link-active-border);
+ --bulma-button-text-color: var(--bulma-text);
+ --bulma-button-text-decoration: underline;
+ --bulma-button-text-hover-background-color: var(--bulma-background);
+ --bulma-button-text-hover-color: var(--bulma-text-strong);
+ --bulma-button-ghost-background: none;
+ --bulma-button-ghost-border-color: transparent;
+ --bulma-button-ghost-color: var(--bulma-link);
+ --bulma-button-ghost-decoration: none;
+ --bulma-button-ghost-hover-color: var(--bulma-link);
+ --bulma-button-ghost-hover-decoration: underline;
+ --bulma-button-disabled-background-color: var(--bulma-scheme-main);
+ --bulma-button-disabled-border-color: var(--bulma-border);
+ --bulma-button-disabled-shadow: none;
+ --bulma-button-disabled-opacity: 0.5;
+ --bulma-button-static-color: var(--bulma-text-light);
+ --bulma-button-static-background-color: var(--bulma-scheme-main-ter);
+ --bulma-button-static-border-color: var(--bulma-border);
}
.button {
- background-color: white;
- border-color: #dbdbdb;
- border-width: 1px;
- color: #363636;
+ background-color: var(--bulma-button-background-color);
+ border-color: var(--bulma-button-border-color);
+ border-width: var(--bulma-button-border-width);
+ color: var(--bulma-button-color);
cursor: pointer;
justify-content: center;
- padding-bottom: calc(0.5em - 1px);
- padding-left: 1em;
- padding-right: 1em;
- padding-top: calc(0.5em - 1px);
+ padding-bottom: var(--bulma-button-padding-vertical);
+ padding-left: var(--bulma-button-padding-horizontal);
+ padding-right: var(--bulma-button-padding-horizontal);
+ padding-top: var(--bulma-button-padding-vertical);
text-align: center;
white-space: nowrap;
}
}
.button .icon:first-child:not(:last-child) {
- margin-left: calc(-0.5em - 1px);
- margin-right: 0.25em;
+ margin-left: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
+ margin-right: calc(var(--bulma-button-padding-horizontal) * 0.25);
}
.button .icon:last-child:not(:first-child) {
- margin-left: 0.25em;
- margin-right: calc(-0.5em - 1px);
+ margin-left: calc(var(--bulma-button-padding-horizontal) * 0.25);
+ margin-right: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
}
.button .icon:first-child:last-child {
- margin-left: calc( -0.5em - 1px);
- margin-right: calc( -0.5em - 1px);
+ margin-left: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
+ margin-right: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
}
.button:hover, .button.is-hovered {
- border-color: #b5b5b5;
- color: #363636;
+ border-color: var(--bulma-button-hover-border-color);
+ color: var(--bulma-button-hover-color);
}
.button:focus, .button.is-focused {
- border-color: #485fc7;
- color: #363636;
+ border-color: var(--bulma-button-focus-border-color);
+ color: var(--bulma-button-focus-color);
}
.button:focus:not(:active), .button.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) var(--bulma-button-focus-box-shadow-color);
}
.button:active, .button.is-active {
- border-color: #4a4a4a;
- color: #363636;
+ border-color: var(--bulma-button-active-border-color);
+ color: var(--bulma-button-active-color);
}
.button.is-text {
background-color: transparent;
border-color: transparent;
- color: #4a4a4a;
- text-decoration: underline;
+ color: var(--bulma-button-text-color);
+ text-decoration: var(--bulma-button-text-decoration);
}
.button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
- background-color: whitesmoke;
- color: #363636;
+ background-color: var(--bulma-button-text-hover-background-color);
+ color: var(--bulma-button-text-hover-color);
}
.button.is-text:active, .button.is-text.is-active {
- background-color: #e8e8e8;
- color: #363636;
+ color: var(--bulma-button-text-hover-color);
}
.button.is-text[disabled],
}
.button.is-ghost {
- background: none;
- border-color: transparent;
- color: #485fc7;
- text-decoration: none;
+ background: var(--bulma-button-ghost-background);
+ border-color: var(--bulma-button-ghost-border-color);
+ color: var(--bulma-button-ghost-color);
+ text-decoration: var(--bulma-button-ghost-decoration);
}
.button.is-ghost:hover, .button.is-ghost.is-hovered {
- color: #485fc7;
- text-decoration: underline;
+ color: var(--bulma-button-ghost-hover-color);
+ text-decoration: var(--bulma-button-ghost-hover-decoration);
}
.button.is-white {
}
.button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(255, 255, 255, 0.25);
}
.button.is-white:active, .button.is-white.is-active {
}
.button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(10, 10, 10, 0.25);
}
.button.is-black:active, .button.is-black.is-active {
}
.button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(245, 245, 245, 0.25);
}
.button.is-light:active, .button.is-light.is-active {
}
.button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(54, 54, 54, 0.25);
}
.button.is-dark:active, .button.is-dark.is-active {
}
.button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(0, 209, 178, 0.25);
}
.button.is-primary:active, .button.is-primary.is-active {
}
.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(72, 95, 199, 0.25);
}
.button.is-link:active, .button.is-link.is-active {
}
.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(62, 142, 208, 0.25);
}
.button.is-info:active, .button.is-info.is-active {
}
.button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(72, 199, 142, 0.25);
}
.button.is-success:active, .button.is-success.is-active {
}
.button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(255, 224, 138, 0.25);
}
.button.is-warning:active, .button.is-warning.is-active {
}
.button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
+ box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(241, 70, 104, 0.25);
}
.button.is-danger:active, .button.is-danger.is-active {
}
.button.is-small {
- font-size: 0.75rem;
+ font-size: var(--bulma-size-small);
}
.button.is-small:not(.is-rounded) {
- border-radius: 2px;
+ border-radius: var(--bulma-radius-small);
}
.button.is-normal {
- font-size: 1rem;
+ font-size: var(--bulma-size-normal);
}
.button.is-medium {
- font-size: 1.25rem;
+ font-size: var(--bulma-size-medium);
}
.button.is-large {
- font-size: 1.5rem;
+ font-size: var(--bulma-size-large);
}
.button[disabled],
fieldset[disabled] .button {
- background-color: white;
- border-color: #dbdbdb;
- box-shadow: none;
- opacity: 0.5;
+ background-color: var(--bulma-button-disabled-background-color);
+ border-color: var(--bulma-button-disabled-border-color);
+ box-shadow: var(--bulma-button-disabled-shadow);
+ opacity: var(--bulma-button-disabled-opacity);
}
.button.is-fullwidth {
}
.button.is-static {
- background-color: whitesmoke;
- border-color: #dbdbdb;
- color: #7a7a7a;
+ background-color: var(--bulma-button-static-background-color);
+ border-color: var(--bulma-button-static-border-color);
+ color: var(--bulma-button-static-color);
box-shadow: none;
pointer-events: none;
}
.button.is-rounded {
- border-radius: 9999px;
- padding-left: calc(1em + 0.25em);
- padding-right: calc(1em + 0.25em);
+ border-radius: var(--bulma-radius-rounded);
+ padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em);
+ padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em);
}
.buttons {
}
.buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) {
- font-size: 0.75rem;
+ font-size: var(--bulma-size-small);
}
.buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large):not(.is-rounded) {
- border-radius: 2px;
+ border-radius: var(--bulma-radius-small);
}
.buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) {
- font-size: 1.25rem;
+ font-size: var(--bulma-size-medium);
}
.buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) {
- font-size: 1.5rem;
+ font-size: var(--bulma-size-large);
}
.buttons.has-addons .button:not(:first-child) {
@media screen and (max-width: 768px) {
.button.is-responsive.is-small {
- font-size: 0.5625rem;
+ font-size: var(--bulma-value);
}
.button.is-responsive,
.button.is-responsive.is-normal {
- font-size: 0.65625rem;
+ font-size: var(--bulma-value);
}
.button.is-responsive.is-medium {
- font-size: 0.75rem;
+ font-size: var(--bulma-value);
}
.button.is-responsive.is-large {
- font-size: 1rem;
+ font-size: var(--bulma-value);
}
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
.button.is-responsive.is-small {
- font-size: 0.65625rem;
+ font-size: var(--bulma-value);
}
.button.is-responsive,
.button.is-responsive.is-normal {
- font-size: 0.75rem;
+ font-size: var(--bulma-value);
}
.button.is-responsive.is-medium {
- font-size: 1rem;
+ font-size: var(--bulma-value);
}
.button.is-responsive.is-large {
- font-size: 1.25rem;
+ font-size: var(--bulma-value);
}
}
+:root {
+ --bulma-container-offset: calc(2 * var(--bulma-gap));
+}
+
.container {
flex-grow: 1;
margin: 0 auto;
.container.is-fluid {
max-width: none !important;
- padding-left: 32px;
- padding-right: 32px;
+ padding-left: var(--bulma-gap);
+ padding-right: var(--bulma-gap);
width: 100%;
}
@media screen and (min-width: 1024px) {
.container {
- max-width: 960px;
+ max-width: calc(1024px - var(--bulma-container-offset));
}
}
@media screen and (max-width: 1215px) {
.container.is-widescreen:not(.is-max-desktop) {
- max-width: 1152px;
+ max-width: calc( 1216px - var(--bulma-container-offset));
}
}
@media screen and (max-width: 1407px) {
.container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
- max-width: 1344px;
+ max-width: calc( 1408px - var(--bulma-container-offset));
}
}
@media screen and (min-width: 1216px) {
.container:not(.is-max-desktop) {
- max-width: 1152px;
+ max-width: calc( 1216px - var(--bulma-container-offset));
}
}
@media screen and (min-width: 1408px) {
.container:not(.is-max-desktop):not(.is-max-widescreen) {
- max-width: 1344px;
+ max-width: calc( 1408px - var(--bulma-container-offset));
}
}
+:root {
+ --bulma-content-heading-color: var(--bulma-text-strong);
+ --bulma-content-heading-weight: var(--bulma-weight-semibold);
+ --bulma-content-heading-line-height: 1.125;
+ --bulma-content-block-margin-bottom: 1em;
+ --bulma-content-blockquote-background-color: var(--bulma-background);
+ --bulma-content-blockquote-border-left: 5px solid var(--bulma-border);
+ --bulma-content-blockquote-padding: 1.25em 1.5em;
+ --bulma-content-pre-padding: 1.25em 1.5em;
+ --bulma-content-table-cell-border: 1px solid var(--bulma-border);
+ --bulma-content-table-cell-border-width: 0 0 1px;
+ --bulma-content-table-cell-padding: 0.5em 0.75em;
+ --bulma-content-table-cell-heading-color: var(--bulma-text-strong);
+ --bulma-content-table-head-cell-border-width: 0 0 2px;
+ --bulma-content-table-head-cell-color: var(--bulma-text-strong);
+ --bulma-content-table-body-last-row-cell-border-bottom-width: 0;
+ --bulma-content-table-foot-cell-border-width: 2px 0 0;
+ --bulma-content-table-foot-cell-color: var(--bulma-text-strong);
+}
+
.content li + li {
margin-top: 0.25em;
}
.content blockquote:not(:last-child),
.content pre:not(:last-child),
.content table:not(:last-child) {
- margin-bottom: 1em;
+ margin-bottom: var(--bulma-content-block-margin-bottom);
}
.content h1,
.content h4,
.content h5,
.content h6 {
- color: #363636;
- font-weight: 600;
- line-height: 1.125;
+ color: var(--bulma-content-heading-color);
+ font-weight: var(--bulma-content-heading-weight);
+ line-height: var(--bulma-content-heading-line-height);
}
.content h1 {
}
.content blockquote {
- background-color: whitesmoke;
- border-left: 5px solid #dbdbdb;
- padding: 1.25em 1.5em;
+ background-color: var(--bulma-content-blockquote-background-color);
+ border-left: var(--bulma-content-blockquote-border-left);
+ padding: var(--bulma-content-blockquote-padding);
}
.content ol {
.content pre {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
- padding: 1.25em 1.5em;
+ padding: var(--bulma-content-pre-padding);
white-space: pre;
word-wrap: normal;
}
.content table td,
.content table th {
- border: 1px solid #dbdbdb;
- border-width: 0 0 1px;
- padding: 0.5em 0.75em;
+ border: var(--bulma-content-table-cell-border);
+ border-width: var(--bulma-content-table-cell-border-width);
+ padding: var(--bulma-content-table-cell-padding);
vertical-align: top;
}
.content table th {
- color: #363636;
+ color: var(--bulma-content-table-cell-heading-color);
}
.content table th:not([align]) {
.content table thead td,
.content table thead th {
- border-width: 0 0 2px;
- color: #363636;
+ border-width: var(--bulma-content-table-head-cell-border-width);
+ color: var(--bulma-content-table-head-cell-color);
}
.content table tfoot td,
.content table tfoot th {
- border-width: 2px 0 0;
- color: #363636;
+ border-width: var(--bulma-content-table-foot-cell-border-width);
+ color: var(--bulma-content-table-foot-cell-color);
}
.content table tbody tr:last-child td,
.content table tbody tr:last-child th {
- border-bottom-width: 0;
+ border-bottom-width: var(--bulma-content-table-body-last-row-cell-border-bottom-width);
}
.content .tabs li + li {
}
.content.is-small {
- font-size: 0.75rem;
+ font-size: var(--bulma-size-small);
}
.content.is-normal {
- font-size: 1rem;
+ font-size: var(--bulma-size-normal);
}
.content.is-medium {
- font-size: 1.25rem;
+ font-size: var(--bulma-size-medium);
}
.content.is-large {
- font-size: 1.5rem;
+ font-size: var(--bulma-size-large);
+}
+
+:root {
+ --bulma-icon-dimensions: 1.5rem;
+ --bulma-icon-dimensions-small: 1rem;
+ --bulma-icon-dimensions-medium: 2rem;
+ --bulma-icon-dimensions-large: 3rem;
+ --bulma-icon-text-spacing: 0.25em;
}
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
- height: 1.5rem;
- width: 1.5rem;
+ height: var(--bulma-icon-dimensions);
+ width: var(--bulma-icon-dimensions);
}
.icon.is-small {
- height: 1rem;
- width: 1rem;
+ height: var(--bulma-icon-dimensions-small);
+ width: var(--bulma-icon-dimensions-small);
}
.icon.is-medium {
- height: 2rem;
- width: 2rem;
+ height: var(--bulma-icon-dimensions-medium);
+ width: var(--bulma-icon-dimensions-medium);
}
.icon.is-large {
- height: 3rem;
- width: 3rem;
+ height: var(--bulma-icon-dimensions-large);
+ width: var(--bulma-icon-dimensions-large);
}
.icon-text {
color: inherit;
display: inline-flex;
flex-wrap: wrap;
- line-height: 1.5rem;
+ line-height: var(--bulma-icon-dimensions);
vertical-align: top;
}
}
.icon-text .icon:not(:last-child) {
- margin-right: 0.25em;
+ margin-right: var(--bulma-icon-text-spacing);
}
.icon-text .icon:not(:first-child) {
- margin-left: 0.25em;
+ margin-left: var(--bulma-icon-text-spacing);
}
div.icon-text {
}
.image img.is-rounded {
- border-radius: 9999px;
+ border-radius: var(--bulma-radius-rounded);
}
.image.is-fullwidth {
width: 128px;
}
+:root {
+ --bulma-notification-background-color: var(--bulma-background);
+ --bulma-notification-code-background-color: var(--bulma-scheme-main);
+ --bulma-notification-radius: var(--bulma-radius);
+ --bulma-notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+ --bulma-notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem;
+ --bulma-notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem;
+}
+
.notification {
- background-color: whitesmoke;
- border-radius: 4px;
+ background-color: var(--bulma-notification-background-color);
+ border-radius: var(--bulma-notification-radius);
position: relative;
- padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+ padding: var(--bulma-notification-padding-ltr);
}
.notification a:not(.button):not(.dropdown-item) {
.notification code,
.notification pre {
- background: white;
+ background: var(--bulma-notification-code-background-color);
}
.notification pre code {
color: #cc0f35;
}
+:root {
+ --bulma-progress-bar-background-color: var(--bulma-border-light);
+ --bulma-progress-value-background-color: var(--bulma-text);
+ --bulma-progress-border-radius: var(--bulma-radius-rounded);
+ --bulma-progress-indeterminate-duration: 1.5s;
+}
+
.progress {
-moz-appearance: none;
-webkit-appearance: none;
border: none;
- border-radius: 9999px;
+ border-radius: var(--bulma-progress-border-radius);
display: block;
- height: 1rem;
+ height: var(--bulma-size-normal);
overflow: hidden;
padding: 0;
width: 100%;
}
.progress::-webkit-progress-bar {
- background-color: #ededed;
+ background-color: var(--bulma-progress-bar-background-color);
}
.progress::-webkit-progress-value {
- background-color: #4a4a4a;
+ background-color: var(--bulma-progress-value-background-color);
}
.progress::-moz-progress-bar {
- background-color: #4a4a4a;
+ background-color: var(--bulma-progress-value-background-color);
}
.progress::-ms-fill {
- background-color: #4a4a4a;
+ background-color: var(--bulma-progress-value-background-color);
border: none;
}
}
.progress.is-white:indeterminate {
- background-image: linear-gradient(to right, white 30%, #ededed 30%);
+ background-image: linear-gradient(to right, white 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-black::-webkit-progress-value {
}
.progress.is-black:indeterminate {
- background-image: linear-gradient(to right, #0a0a0a 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #0a0a0a 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-light::-webkit-progress-value {
}
.progress.is-light:indeterminate {
- background-image: linear-gradient(to right, whitesmoke 30%, #ededed 30%);
+ background-image: linear-gradient(to right, whitesmoke 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-dark::-webkit-progress-value {
}
.progress.is-dark:indeterminate {
- background-image: linear-gradient(to right, #363636 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #363636 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-primary::-webkit-progress-value {
}
.progress.is-primary:indeterminate {
- background-image: linear-gradient(to right, #00d1b2 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #00d1b2 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-link::-webkit-progress-value {
}
.progress.is-link:indeterminate {
- background-image: linear-gradient(to right, #485fc7 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #485fc7 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-info::-webkit-progress-value {
}
.progress.is-info:indeterminate {
- background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #3e8ed0 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-success::-webkit-progress-value {
}
.progress.is-success:indeterminate {
- background-image: linear-gradient(to right, #48c78e 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #48c78e 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-warning::-webkit-progress-value {
}
.progress.is-warning:indeterminate {
- background-image: linear-gradient(to right, #ffe08a 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #ffe08a 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress.is-danger::-webkit-progress-value {
}
.progress.is-danger:indeterminate {
- background-image: linear-gradient(to right, #f14668 30%, #ededed 30%);
+ background-image: linear-gradient(to right, #f14668 30%, var(--bulma-progress-bar-background-color) 30%);
}
.progress:indeterminate {
- animation-duration: 1.5s;
+ animation-duration: var(--bulma-progress-indeterminate-duration);
animation-iteration-count: infinite;
animation-name: moveIndeterminate;
animation-timing-function: linear;
- background-color: #ededed;
- background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
+ background-color: var(--bulma-progress-bar-background-color);
+ background-image: linear-gradient(to right, var(--bulma-text) 30%, var(--bulma-progress-bar-background-color) 30%);
background-position: top left;
background-repeat: no-repeat;
background-size: 150% 150%;
}
.progress.is-small {
- height: 0.75rem;
+ height: var(--bulma-size-small);
}
.progress.is-medium {
- height: 1.25rem;
+ height: var(--bulma-size-medium);
}
.progress.is-large {
- height: 1.5rem;
+ height: var(--bulma-size-large);
}
@keyframes moveIndeterminate {
}
}
+:root {
+ --bulma-table-color: var(--bulma-text-strong);
+ --bulma-table-background-color: var(--bulma-scheme-main);
+ --bulma-table-cell-border: 1px solid var(--bulma-border);
+ --bulma-table-cell-border-width: 0 0 1px;
+ --bulma-table-cell-padding: 0.5em 0.75em;
+ --bulma-table-cell-heading-color: var(--bulma-text-strong);
+ --bulma-table-cell-text-align: left;
+ --bulma-table-head-cell-border-width: 0 0 2px;
+ --bulma-table-head-cell-color: var(--bulma-text-strong);
+ --bulma-table-foot-cell-border-width: 2px 0 0;
+ --bulma-table-foot-cell-color: var(--bulma-text-strong);
+ --bulma-table-head-background-color: transparent;
+ --bulma-table-body-background-color: transparent;
+ --bulma-table-foot-background-color: transparent;
+ --bulma-table-row-hover-background-color: var(--bulma-scheme-main-bis);
+ --bulma-table-row-active-background-color: var(--bulma-primary);
+ --bulma-table-row-active-color: var(--bulma-primary-invert);
+ --bulma-table-striped-row-even-background-color: var(--bulma-scheme-main-bis);
+ --bulma-table-striped-row-even-hover-background-color: var(--bulma-scheme-main-ter);
+}
+
.table {
- background-color: white;
- color: #363636;
+ background-color: var(--bulma-table-background-color);
+ color: var(--bulma-table-color);
}
.table td,
.table th {
- border: 1px solid #dbdbdb;
- border-width: 0 0 1px;
- padding: 0.5em 0.75em;
+ border: var(--bulma-table-cell-border);
+ border-width: var(--bulma-table-cell-border-width);
+ padding: var(--bulma-table-cell-padding);
vertical-align: top;
}
.table td.is-selected,
.table th.is-selected {
- background-color: #00d1b2;
- color: #fff;
+ background-color: var(--bulma-table-row-active-background-color);
+ color: var(--bulma-table-row-active-color);
}
.table td.is-selected a,
}
.table th {
- color: #363636;
+ color: var(--bulma-table-cell-heading-color);
}
.table th:not([align]) {
- text-align: left;
+ text-align: var(--bulma-table-cell-text-align);
}
.table tr.is-selected {
- background-color: #00d1b2;
- color: #fff;
+ background-color: var(--bulma-table-row-active-background-color);
+ color: var(--bulma-table-row-active-color);
}
.table tr.is-selected a,
.table tr.is-selected td,
.table tr.is-selected th {
- border-color: #fff;
+ border-color: var(--bulma-table-row-active-color);
color: currentColor;
}
.table thead {
- background-color: transparent;
+ background-color: var(--bulma-table-head-background-color);
}
.table thead td,
.table thead th {
- border-width: 0 0 2px;
- color: #363636;
+ border-width: var(--bulma-table-head-cell-border-width);
+ color: var(--bulma-table-head-cell-color);
}
.table tfoot {
- background-color: transparent;
+ background-color: var(--bulma-table-foot-background-color);
}
.table tfoot td,
.table tfoot th {
- border-width: 2px 0 0;
- color: #363636;
+ border-width: var(--bulma-table-foot-cell-border-width);
+ color: var(--bulma-table-foot-cell-color);
}
.table tbody {
- background-color: transparent;
+ background-color: var(--bulma-table-body-background-color);
}
.table tbody tr:last-child td,
}
.table.is-hoverable tbody tr:not(.is-selected):hover {
- background-color: #fafafa;
+ background-color: var(--bulma-table-row-hover-background-color);
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
- background-color: #fafafa;
+ background-color: var(--bulma-table-row-hover-background-color);
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
- background-color: whitesmoke;
+ background-color: var(--bulma-table-striped-row-even-hover-background-color);
}
.table.is-narrow td,
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
- background-color: #fafafa;
+ background-color: var(--bulma-table-striped-row-even-background-color);
}
.table-container {
max-width: 100%;
}
+:root {
+ --bulma-tag-background-color: var(--bulma-background);
+ --bulma-tag-color: var(--bulma-text);
+ --bulma-tag-radius: var(--bulma-radius);
+ --bulma-tag-delete-margin: 1px;
+}
+
.tags {
align-items: center;
display: flex;
}
.tags.are-medium .tag:not(.is-normal):not(.is-large) {
- font-size: 1rem;
+ font-size: var(--bulma-size-normal);
}
.tags.are-large .tag:not(.is-normal):not(.is-medium) {
- font-size: 1.25rem;
+ font-size: var(--bulma-size-medium);
}
.tags.is-centered {
.tag:not(body) {
align-items: center;
- background-color: whitesmoke;
- border-radius: 4px;
- color: #4a4a4a;
+ background-color: var(--bulma-tag-background-color);
+ border-radius: var(--bulma-tag-radius);
+ color: var(--bulma-tag-color);
display: inline-flex;
- font-size: 0.75rem;
+ font-size: var(--bulma-size-small);
height: 2em;
justify-content: center;
line-height: 1.5;
}
.tag:not(body).is-normal {
- font-size: 0.75rem;
+ font-size: var(--bulma-size-small);
}
.tag:not(body).is-medium {
- font-size: 1rem;
+ font-size: var(--bulma-size-normal);
}
.tag:not(body).is-large {
- font-size: 1.25rem;
+ font-size: var(--bulma-size-medium);
}
.tag:not(body) .icon:first-child:not(:last-child) {
}
.tag:not(body).is-delete {
- margin-left: 1px;
+ margin-left: var(--bulma-tag-delete-margin);
padding: 0;
position: relative;
width: 2em;
width: 1px;
}
-.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
- background-color: #e8e8e8;
-}
-
-.tag:not(body).is-delete:active {
- background-color: #dbdbdb;
-}
-
.tag:not(body).is-rounded {
- border-radius: 9999px;
+ border-radius: var(--bulma-radius-rounded);
}
a.tag:hover {
text-decoration: underline;
}
+:root {
+ --bulma-title-color: var(--bulma-text-strong);
+ --bulma-title-family: false;
+ --bulma-title-size: var(--bulma-size-3);
+ --bulma-title-weight: var(--bulma-weight-semibold);
+ --bulma-title-line-height: 1.125;
+ --bulma-title-strong-color: inherit;
+ --bulma-title-strong-weight: inherit;
+ --bulma-title-sub-size: 0.75em;
+ --bulma-title-sup-size: 0.75em;
+ --bulma-subtitle-color: var(--bulma-text);
+ --bulma-subtitle-family: false;
+ --bulma-subtitle-size: var(--bulma-size-5);
+ --bulma-subtitle-weight: var(--bulma-weight-normal);
+ --bulma-subtitle-line-height: 1.25;
+ --bulma-subtitle-strong-color: var(--bulma-text-strong);
+ --bulma-subtitle-strong-weight: var(--bulma-weight-semibold);
+ --bulma-subtitle-negative-margin: -1.25rem;
+}
+
.title,
.subtitle {
word-break: break-word;
.title sub,
.subtitle sub {
- font-size: 0.75em;
+ font-size: var(--bulma-title-sub-size);
}
.title sup,
.subtitle sup {
- font-size: 0.75em;
+ font-size: var(--bulma-title-sup-size);
}
.title .tag,
}
.title {
- color: #363636;
- font-size: 2rem;
- font-weight: 600;
- line-height: 1.125;
+ color: var(--bulma-title-color);
+ font-size: var(--bulma-title-size);
+ font-weight: var(--bulma-title-weight);
+ line-height: var(--bulma-title-line-height);
}
.title strong {
- color: inherit;
- font-weight: inherit;
+ color: var(--bulma-title-strong-color);
+ font-weight: var(--bulma-title-strong-weight);
}
.title:not(.is-spaced) + .subtitle {
- margin-top: -1.25rem;
+ margin-top: var(--bulma-subtitle-negative-margin);
}
.title.is-1 {
- font-size: 3rem;
+ font-size: var(--bulma-size-1);
}
.title.is-2 {
- font-size: 2.5rem;
+ font-size: var(--bulma-size-2);
}
.title.is-3 {
- font-size: 2rem;
+ font-size: var(--bulma-size-3);
}
.title.is-4 {
- font-size: 1.5rem;
+ font-size: var(--bulma-size-4);
}
.title.is-5 {
- font-size: 1.25rem;
+ font-size: var(--bulma-size-5);
}
.title.is-6 {
- font-size: 1rem;
+ font-size: var(--bulma-size-6);
}
.title.is-7 {
- font-size: 0.75rem;
+ font-size: var(--bulma-size-7);
}
.subtitle {
- color: #4a4a4a;
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.25;
+ color: var(--bulma-subtitle-color);
+ font-size: var(--bulma-subtitle-size);
+ font-weight: var(--bulma-subtitle-weight);
+ line-height: var(--bulma-subtitle-line-height);
}
.subtitle strong {
- color: #363636;
- font-weight: 600;
+ color: var(--bulma-subtitle-strong-color);
+ font-weight: var(--bulma-subtitle-strong-weight);
}
.subtitle:not(.is-spaced) + .title {
- margin-top: -1.25rem;
+ margin-top: var(--bulma-subtitle-negative-margin);
}
.subtitle.is-1 {
- font-size: 3rem;
+ font-size: var(--bulma-size-1);
}
.subtitle.is-2 {
- font-size: 2.5rem;
+ font-size: var(--bulma-size-2);
}
.subtitle.is-3 {
- font-size: 2rem;
+ font-size: var(--bulma-size-3);
}
.subtitle.is-4 {
- font-size: 1.5rem;
+ font-size: var(--bulma-size-4);
}
.subtitle.is-5 {
- font-size: 1.25rem;
+ font-size: var(--bulma-size-5);
}
.subtitle.is-6 {
- font-size: 1rem;
+ font-size: var(--bulma-size-6);
}
.subtitle.is-7 {
- font-size: 0.75rem;
+ font-size: var(--bulma-size-7);
}
.heading {
.number {
align-items: center;
- background-color: whitesmoke;
- border-radius: 9999px;
+ background-color: var(--bulma-background);
+ border-radius: var(--bulma-radius-rounded);
display: inline-flex;
- font-size: 1.25rem;
+ font-size: var(--bulma-size-medium);
height: 2em;
justify-content: center;
margin-right: 1.5rem;
--bulma-weight-semibold: 600;
--bulma-weight-bold: 700;
--bulma-block-spacing: 1.5rem;
+ --bulma-gap: 32px;
--bulma-easing: ease-out;
--bulma-radius-small: 2px;
--bulma-radius: 4px;
</div>
<div class="block">
- <progress id="progress-small" class="progress is-small" value="15" max="100">15%</progress>
- <progress id="progress-normal" class="progress" value="15" max="100">30%</progress>
- <progress id="progress-medium" class="progress is-medium" value="15" max="100">45%</progress>
- <progress id="progress-large" class="progress is-large" value="15" max="100">60%</progress>
+ <progress id="progress-small" class="progress is-small" value="15" max="100">
+ 15%
+ </progress>
+ <progress id="progress-normal" class="progress" value="15" max="100">
+ 30%
+ </progress>
+ <progress
+ id="progress-medium"
+ class="progress is-medium"
+ value="15"
+ max="100"
+ >
+ 45%
+ </progress>
+ <progress id="progress-large" class="progress is-large" value="15" max="100">
+ 60%
+ </progress>
+</div>
+
+<div class="block">
+ {% for color in site.data.colors.justColors %}
+ <progress
+ id="progress-{{ color }}"
+ class="progress is-{{ color }}"
+ value="15"
+ max="100"
+ >
+ 15%
+ </progress>
+ <progress
+ id="progress-{{ color }}-indeterminate"
+ class="progress is-{{ color }}"
+ max="100"
+ >
+ 15%
+ </progress>
+ {% endfor %}
</div>
@import "../utilities/mixins";
-$box-color: $text !default;
-$box-background-color: $scheme-main !default;
-$box-radius: $radius-large !default;
-$box-shadow: $shadow !default;
+$box-color: getVar("text") !default;
+$box-background-color: getVar("scheme-main") !default;
+$box-radius: getVar("radius-large") !default;
+$box-shadow: getVar("shadow") !default;
$box-padding: 1.25rem !default;
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
- 0 0 0 1px $link !default;
+ 0 0 0 1px getVar("link") !default;
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2),
- 0 0 0 1px $link !default;
+ 0 0 0 1px getVar("link") !default;
+
+:root {
+ @include register-vars(
+ (
+ box-color: #{$box-color},
+ box-background-color: #{$box-background-color},
+ box-radius: #{$box-radius},
+ box-shadow: #{$box-shadow},
+ box-padding: #{$box-padding},
+ box-link-hover-shadow: #{$box-link-hover-shadow},
+ box-link-active-shadow: #{$box-link-active-shadow},
+ )
+ );
+}
.#{$class-prefix}box {
@extend %block;
- background-color: $box-background-color;
- border-radius: $box-radius;
- box-shadow: $box-shadow;
- color: $box-color;
+ background-color: getVar("box-background-color");
+ border-radius: getVar("box-radius");
+ box-shadow: getVar("box-shadow");
+ color: getVar("box-color");
display: block;
- padding: $box-padding;
+ padding: getVar("box-padding");
}
a.#{$class-prefix}box {
&:hover,
&:focus {
- box-shadow: $box-link-hover-shadow;
+ box-shadow: getVar("box-link-hover-shadow");
}
&:active {
- box-shadow: $box-link-active-shadow;
+ box-shadow: getVar("box-link-active-shadow");
}
}
@import "../utilities/controls";
@import "../utilities/mixins";
-$button-color: $text-strong !default;
-$button-background-color: $scheme-main !default;
+$button-color: getVar("text-strong") !default;
+$button-background-color: getVar("scheme-main") !default;
$button-family: false !default;
-$button-border-color: $border !default;
-$button-border-width: $control-border-width !default;
+$button-border-color: getVar("border") !default;
+$button-border-width: $control-border-width !default; // TODO
-$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default;
+$button-padding-vertical: calc(
+ 0.5em - #{getVar("button-border-width")}
+) !default;
$button-padding-horizontal: 1em !default;
-$button-hover-color: $link-hover !default;
-$button-hover-border-color: $link-hover-border !default;
+$button-hover-color: getVar("link-hover") !default;
+$button-hover-border-color: getVar("link-hover-border") !default;
-$button-focus-color: $link-focus !default;
-$button-focus-border-color: $link-focus-border !default;
+$button-focus-color: getVar("link-focus") !default;
+$button-focus-border-color: getVar("link-focus-border") !default;
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
-$button-active-color: $link-active !default;
-$button-active-border-color: $link-active-border !default;
+$button-active-color: getVar("link-active") !default;
+$button-active-border-color: getVar("link-active-border") !default;
-$button-text-color: $text !default;
+$button-text-color: getVar("text") !default;
$button-text-decoration: underline !default;
-$button-text-hover-background-color: $background !default;
-$button-text-hover-color: $text-strong !default;
+$button-text-hover-background-color: getVar("background") !default;
+$button-text-hover-color: getVar("text-strong") !default;
$button-ghost-background: none !default;
$button-ghost-border-color: transparent !default;
-$button-ghost-color: $link !default;
+$button-ghost-color: getVar("link") !default;
$button-ghost-decoration: none !default;
-$button-ghost-hover-color: $link !default;
+$button-ghost-hover-color: getVar("link") !default;
$button-ghost-hover-decoration: underline !default;
-$button-disabled-background-color: $scheme-main !default;
-$button-disabled-border-color: $border !default;
+$button-disabled-background-color: getVar("scheme-main") !default;
+$button-disabled-border-color: getVar("border") !default;
$button-disabled-shadow: none !default;
$button-disabled-opacity: 0.5 !default;
-$button-static-color: $text-light !default;
-$button-static-background-color: $scheme-main-ter !default;
-$button-static-border-color: $border !default;
+$button-static-color: getVar("text-light") !default;
+$button-static-background-color: getVar("scheme-main-ter") !default;
+$button-static-border-color: getVar("border") !default;
$button-colors: $colors !default;
$button-responsive-sizes: (
"mobile": (
- "small": $size-small * 0.75,
- "normal": $size-small * 0.875,
- "medium": $size-small,
- "large": $size-normal,
+ "small": calc(#{getVar("size-small")} * 0.75),
+ "normal": calc(#{getVar("size-small")} * 0.875),
+ "medium": getVar("size-small"),
+ "large": getVar("size-normal"),
),
"tablet-only": (
- "small": $size-small * 0.875,
- "normal": $size-small,
- "medium": $size-normal,
- "large": $size-medium,
+ "small": calc(#{getVar("size-small")} * 0.875),
+ "normal": getVar("size-small"),
+ "medium": getVar("size-normal"),
+ "large": getVar("size-medium"),
),
) !default;
// The button sizes use mixins so they can be used at different breakpoints
@mixin button-small {
&:not(.is-rounded) {
- border-radius: $radius-small;
+ border-radius: getVar("radius-small");
}
- font-size: $size-small;
+ font-size: getVar("size-small");
}
@mixin button-normal {
- font-size: $size-normal;
+ font-size: getVar("size-normal");
}
@mixin button-medium {
- font-size: $size-medium;
+ font-size: getVar("size-medium");
}
@mixin button-large {
- font-size: $size-large;
+ font-size: getVar("size-large");
+}
+
+:root {
+ @include register-vars(
+ (
+ button-color: #{$button-color},
+ button-background-color: #{$button-background-color},
+ button-family: #{$button-family},
+ button-border-color: #{$button-border-color},
+ button-border-width: #{$button-border-width},
+ button-padding-vertical: #{$button-padding-vertical},
+ button-padding-horizontal: #{$button-padding-horizontal},
+ button-hover-color: #{$button-hover-color},
+ button-hover-border-color: #{$button-hover-border-color},
+ button-focus-color: #{$button-focus-color},
+ button-focus-border-color: #{$button-focus-border-color},
+ button-focus-box-shadow-size: #{$button-focus-box-shadow-size},
+ button-focus-box-shadow-color: #{$button-focus-box-shadow-color},
+ button-active-color: #{$button-active-color},
+ button-active-border-color: #{$button-active-border-color},
+ button-text-color: #{$button-text-color},
+ button-text-decoration: #{$button-text-decoration},
+ button-text-hover-background-color: #{$button-text-hover-background-color},
+ button-text-hover-color: #{$button-text-hover-color},
+ button-ghost-background: #{$button-ghost-background},
+ button-ghost-border-color: #{$button-ghost-border-color},
+ button-ghost-color: #{$button-ghost-color},
+ button-ghost-decoration: #{$button-ghost-decoration},
+ button-ghost-hover-color: #{$button-ghost-hover-color},
+ button-ghost-hover-decoration: #{$button-ghost-hover-decoration},
+ button-disabled-background-color: #{$button-disabled-background-color},
+ button-disabled-border-color: #{$button-disabled-border-color},
+ button-disabled-shadow: #{$button-disabled-shadow},
+ button-disabled-opacity: #{$button-disabled-opacity},
+ button-static-color: #{$button-static-color},
+ button-static-background-color: #{$button-static-background-color},
+ button-static-border-color: #{$button-static-border-color},
+ )
+ );
}
.#{$class-prefix}button {
@extend %control;
-
@extend %unselectable;
- background-color: $button-background-color;
- border-color: $button-border-color;
- border-width: $button-border-width;
- color: $button-color;
+ background-color: getVar("button-background-color");
+ border-color: getVar("button-border-color");
+ border-width: getVar("button-border-width");
+ color: getVar("button-color");
cursor: pointer;
@if $button-family {
- font-family: $button-family;
+ font-family: getVar("button-family");
}
justify-content: center;
- padding-bottom: $button-padding-vertical;
- padding-left: $button-padding-horizontal;
- padding-right: $button-padding-horizontal;
- padding-top: $button-padding-vertical;
+ padding-bottom: getVar("button-padding-vertical");
+ padding-left: getVar("button-padding-horizontal");
+ padding-right: getVar("button-padding-horizontal");
+ padding-top: getVar("button-padding-vertical");
text-align: center;
white-space: nowrap;
&:first-child:not(:last-child) {
@include ltr-property(
"margin",
- calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}),
+ calc(
+ calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+ "button-border-width"
+ )}
+ ),
false
);
- @include ltr-property("margin", $button-padding-horizontal * 0.25);
+ @include ltr-property(
+ "margin",
+ calc(#{getVar("button-padding-horizontal")} * 0.25)
+ );
}
&:last-child:not(:first-child) {
- @include ltr-property("margin", $button-padding-horizontal * 0.25, false);
@include ltr-property(
"margin",
- calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
+ calc(#{getVar("button-padding-horizontal")} * 0.25),
+ false
+ );
+ @include ltr-property(
+ "margin",
+ calc(
+ calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+ "button-border-width"
+ )}
+ )
);
}
&:first-child:last-child {
margin-left: calc(
- #{-0.5 * $button-padding-horizontal} - #{$button-border-width}
+ calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+ "button-border-width"
+ )}
);
margin-right: calc(
- #{-0.5 * $button-padding-horizontal} - #{$button-border-width}
+ calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+ "button-border-width"
+ )}
);
}
}
// States
&:hover,
&.is-hovered {
- border-color: $button-hover-border-color;
- color: $button-hover-color;
+ border-color: getVar("button-hover-border-color");
+ color: getVar("button-hover-color");
}
&:focus,
&.is-focused {
- border-color: $button-focus-border-color;
- color: $button-focus-color;
+ border-color: getVar("button-focus-border-color");
+ color: getVar("button-focus-color");
&:not(:active) {
- box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+ box-shadow: getVar("button-focus-box-shadow-size")
+ getVar("button-focus-box-shadow-color");
}
}
&:active,
&.is-active {
- border-color: $button-active-border-color;
- color: $button-active-color;
+ border-color: getVar("button-active-border-color");
+ color: getVar("button-active-color");
}
// Colors
&.is-text {
background-color: transparent;
border-color: transparent;
- color: $button-text-color;
- text-decoration: $button-text-decoration;
+ color: getVar("button-text-color");
+ text-decoration: getVar("button-text-decoration");
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
- background-color: $button-text-hover-background-color;
- color: $button-text-hover-color;
+ background-color: getVar("button-text-hover-background-color");
+ color: getVar("button-text-hover-color");
}
&:active,
&.is-active {
- background-color: bulmaDarken($button-text-hover-background-color, 5%);
- color: $button-text-hover-color;
+ // background-color: bulmaDarken($button-text-hover-background-color, 5%); // TODO
+ color: getVar("button-text-hover-color");
}
&[disabled],
}
&.is-ghost {
- background: $button-ghost-background;
- border-color: $button-ghost-border-color;
- color: $button-ghost-color;
- text-decoration: $button-ghost-decoration;
+ background: getVar("button-ghost-background");
+ border-color: getVar("button-ghost-border-color");
+ color: getVar("button-ghost-color");
+ text-decoration: getVar("button-ghost-decoration");
&:hover,
&.is-hovered {
- color: $button-ghost-hover-color;
- text-decoration: $button-ghost-hover-decoration;
+ color: getVar("button-ghost-hover-color");
+ text-decoration: getVar("button-ghost-hover-decoration");
}
}
color: $color-invert;
&:not(:active) {
- box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25);
+ box-shadow: getVar("button-focus-box-shadow-size")
+ bulmaRgba($color, 0.25);
}
}
// Modifiers
&[disabled],
fieldset[disabled] & {
- background-color: $button-disabled-background-color;
- border-color: $button-disabled-border-color;
- box-shadow: $button-disabled-shadow;
- opacity: $button-disabled-opacity;
+ background-color: getVar("button-disabled-background-color");
+ border-color: getVar("button-disabled-border-color");
+ box-shadow: getVar("button-disabled-shadow");
+ opacity: getVar("button-disabled-opacity");
}
&.is-fullwidth {
&::after {
@extend %loader;
-
@include center(1em);
-
position: absolute !important;
}
}
&.is-static {
- background-color: $button-static-background-color;
- border-color: $button-static-border-color;
- color: $button-static-color;
+ background-color: getVar("button-static-background-color");
+ border-color: getVar("button-static-border-color");
+ color: getVar("button-static-color");
box-shadow: none;
pointer-events: none;
}
&.is-rounded {
- border-radius: $radius-rounded;
- padding-left: calc(#{$button-padding-horizontal} + 0.25em);
- padding-right: calc(#{$button-padding-horizontal} + 0.25em);
+ border-radius: getVar("radius-rounded");
+ padding-left: calc(#{getVar("button-padding-horizontal")} + 0.25em);
+ padding-right: calc(#{getVar("button-padding-horizontal")} + 0.25em);
}
}
@each $size, $value in $bp-sizes {
@if $size != "normal" {
.#{$class-prefix}button.is-responsive.is-#{$size} {
- font-size: $value;
+ font-size: getVar("value");
}
} @else {
.#{$class-prefix}button.is-responsive,
.#{$class-prefix}button.is-responsive.is-normal {
- font-size: $value;
+ font-size: getVar("value");
}
}
}
@import "../utilities/mixins";
-$container-offset: 2 * $gap !default;
+$container-offset: calc(2 * #{getVar("gap")}) !default;
$container-max-width: $fullhd !default;
+:root {
+ @include register-vars(
+ (
+ container-offset: #{$container-offset},
+ )
+ );
+}
+
.#{$class-prefix}container {
flex-grow: 1;
margin: 0 auto;
&.is-fluid {
max-width: none !important;
- padding-left: $gap;
- padding-right: $gap;
+ padding-left: getVar("gap");
+ padding-right: getVar("gap");
width: 100%;
}
@include desktop {
- max-width: $desktop - $container-offset;
+ max-width: calc(#{$desktop} - #{getVar("container-offset")});
}
@include until-widescreen {
&.is-widescreen:not(.is-max-desktop) {
- max-width: min($widescreen, $container-max-width) - $container-offset;
+ max-width: calc(
+ #{min($widescreen, $container-max-width)} - #{getVar(
+ "container-offset"
+ )}
+ );
}
}
@include until-fullhd {
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
- max-width: min($fullhd, $container-max-width) - $container-offset;
+ max-width: calc(
+ #{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
+ );
}
}
@include widescreen {
&:not(.is-max-desktop) {
- max-width: min($widescreen, $container-max-width) - $container-offset;
+ max-width: calc(
+ #{min($widescreen, $container-max-width)} - #{getVar(
+ "container-offset"
+ )}
+ );
}
}
@include fullhd {
&:not(.is-max-desktop):not(.is-max-widescreen) {
- max-width: min($fullhd, $container-max-width) - $container-offset;
+ max-width: calc(
+ #{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
+ );
}
}
}
@import "../utilities/mixins";
-$content-heading-color: $text-strong !default;
-$content-heading-weight: $weight-semibold !default;
+$content-heading-color: getVar("text-strong") !default;
+$content-heading-weight: getVar("weight-semibold") !default;
$content-heading-line-height: 1.125 !default;
$content-block-margin-bottom: 1em !default;
-$content-blockquote-background-color: $background !default;
-$content-blockquote-border-left: 5px solid $border !default;
+$content-blockquote-background-color: getVar("background") !default;
+$content-blockquote-border-left: 5px solid getVar("border") !default;
$content-blockquote-padding: 1.25em 1.5em !default;
$content-pre-padding: 1.25em 1.5em !default;
-$content-table-cell-border: 1px solid $border !default;
+$content-table-cell-border: 1px solid getVar("border") !default;
$content-table-cell-border-width: 0 0 1px !default;
$content-table-cell-padding: 0.5em 0.75em !default;
-$content-table-cell-heading-color: $text-strong !default;
+$content-table-cell-heading-color: getVar("text-strong") !default;
$content-table-head-cell-border-width: 0 0 2px !default;
-$content-table-head-cell-color: $text-strong !default;
+$content-table-head-cell-color: getVar("text-strong") !default;
$content-table-body-last-row-cell-border-bottom-width: 0 !default;
$content-table-foot-cell-border-width: 2px 0 0 !default;
-$content-table-foot-cell-color: $text-strong !default;
+$content-table-foot-cell-color: getVar("text-strong") !default;
+
+:root {
+ @include register-vars(
+ (
+ content-heading-color: #{$content-heading-color},
+ content-heading-weight: #{$content-heading-weight},
+ content-heading-line-height: #{$content-heading-line-height},
+ content-block-margin-bottom: #{$content-block-margin-bottom},
+ content-blockquote-background-color: #{$content-blockquote-background-color},
+ content-blockquote-border-left: #{$content-blockquote-border-left},
+ content-blockquote-padding: #{$content-blockquote-padding},
+ content-pre-padding: #{$content-pre-padding},
+ content-table-cell-border: #{$content-table-cell-border},
+ content-table-cell-border-width: #{$content-table-cell-border-width},
+ content-table-cell-padding: #{$content-table-cell-padding},
+ content-table-cell-heading-color: #{$content-table-cell-heading-color},
+ content-table-head-cell-border-width: #{$content-table-head-cell-border-width},
+ content-table-head-cell-color: #{$content-table-head-cell-color},
+ content-table-body-last-row-cell-border-bottom-width: #{$content-table-body-last-row-cell-border-bottom-width},
+ content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width},
+ content-table-foot-cell-color: #{$content-table-foot-cell-color},
+ )
+ );
+}
.#{$class-prefix}content {
@extend %block;
pre,
table {
&:not(:last-child) {
- margin-bottom: $content-block-margin-bottom;
+ margin-bottom: getVar("content-block-margin-bottom");
}
}
h4,
h5,
h6 {
- color: $content-heading-color;
- font-weight: $content-heading-weight;
- line-height: $content-heading-line-height;
+ color: getVar("content-heading-color");
+ font-weight: getVar("content-heading-weight");
+ line-height: getVar("content-heading-line-height");
}
h1 {
}
blockquote {
- background-color: $content-blockquote-background-color;
-
- @include ltr-property("border", $content-blockquote-border-left, false);
-
- padding: $content-blockquote-padding;
+ background-color: getVar("content-blockquote-background-color");
+ @include ltr-property(
+ "border",
+ getVar("content-blockquote-border-left"),
+ false
+ );
+ padding: getVar("content-blockquote-padding");
}
ol {
list-style-position: outside;
-
@include ltr-property("margin", 2em, false);
-
margin-top: 1em;
&:not([type]) {
ul {
list-style: disc outside;
-
@include ltr-property("margin", 2em, false);
-
margin-top: 1em;
ul {
pre {
@include overflow-touch;
-
overflow-x: auto;
- padding: $content-pre-padding;
+ padding: getVar("content-pre-padding");
white-space: pre;
word-wrap: normal;
}
td,
th {
- border: $content-table-cell-border;
- border-width: $content-table-cell-border-width;
- padding: $content-table-cell-padding;
+ border: getVar("content-table-cell-border");
+ border-width: getVar("content-table-cell-border-width");
+ padding: getVar("content-table-cell-padding");
vertical-align: top;
}
th {
- color: $content-table-cell-heading-color;
+ color: getVar("content-table-cell-heading-color");
&:not([align]) {
text-align: inherit;
thead {
td,
th {
- border-width: $content-table-head-cell-border-width;
- color: $content-table-head-cell-color;
+ border-width: getVar("content-table-head-cell-border-width");
+ color: getVar("content-table-head-cell-color");
}
}
tfoot {
td,
th {
- border-width: $content-table-foot-cell-border-width;
- color: $content-table-foot-cell-color;
+ border-width: getVar("content-table-foot-cell-border-width");
+ color: getVar("content-table-foot-cell-color");
}
}
&:last-child {
td,
th {
- border-bottom-width: $content-table-body-last-row-cell-border-bottom-width;
+ border-bottom-width: getVar(
+ "content-table-body-last-row-cell-border-bottom-width"
+ );
}
}
}
// Sizes
&.is-small {
- font-size: $size-small;
+ font-size: getVar("size-small");
}
&.is-normal {
- font-size: $size-normal;
+ font-size: getVar("size-normal");
}
&.is-medium {
- font-size: $size-medium;
+ font-size: getVar("size-medium");
}
&.is-large {
- font-size: $size-large;
+ font-size: getVar("size-large");
}
}
$icon-dimensions-large: 3rem !default;
$icon-text-spacing: 0.25em !default;
+:root {
+ @include register-vars(
+ (
+ icon-dimensions: #{$icon-dimensions},
+ icon-dimensions-small: #{$icon-dimensions-small},
+ icon-dimensions-medium: #{$icon-dimensions-medium},
+ icon-dimensions-large: #{$icon-dimensions-large},
+ icon-text-spacing: #{$icon-text-spacing},
+ )
+ );
+}
+
.#{$class-prefix}icon {
align-items: center;
display: inline-flex;
justify-content: center;
- height: $icon-dimensions;
- width: $icon-dimensions;
+ height: getVar("icon-dimensions");
+ width: getVar("icon-dimensions");
// Sizes
&.is-small {
- height: $icon-dimensions-small;
- width: $icon-dimensions-small;
+ height: getVar("icon-dimensions-small");
+ width: getVar("icon-dimensions-small");
}
&.is-medium {
- height: $icon-dimensions-medium;
- width: $icon-dimensions-medium;
+ height: getVar("icon-dimensions-medium");
+ width: getVar("icon-dimensions-medium");
}
&.is-large {
- height: $icon-dimensions-large;
- width: $icon-dimensions-large;
+ height: getVar("icon-dimensions-large");
+ width: getVar("icon-dimensions-large");
}
}
color: inherit;
display: inline-flex;
flex-wrap: wrap;
- line-height: $icon-dimensions;
+ line-height: getVar("icon-dimensions");
vertical-align: top;
.#{$class-prefix}icon {
&:not(:last-child) {
@include ltr {
- margin-right: $icon-text-spacing;
+ margin-right: getVar("icon-text-spacing");
}
@include rtl {
- margin-left: $icon-text-spacing;
+ margin-left: getVar("icon-text-spacing");
}
}
&:not(:first-child) {
@include ltr {
- margin-left: $icon-text-spacing;
+ margin-left: getVar("icon-text-spacing");
}
@include rtl {
- margin-right: $icon-text-spacing;
+ margin-right: getVar("icon-text-spacing");
}
}
}
width: 100%;
&.is-rounded {
- border-radius: $radius-rounded;
+ border-radius: getVar("radius-rounded");
}
}
@import "../utilities/mixins";
-$notification-background-color: $background !default;
-$notification-code-background-color: $scheme-main !default;
-$notification-radius: $radius !default;
+$notification-background-color: getVar("background") !default;
+$notification-code-background-color: getVar("scheme-main") !default;
+$notification-radius: getVar("radius") !default;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default;
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
$notification-colors: $colors !default;
+:root {
+ @include register-vars(
+ (
+ notification-background-color: #{$notification-background-color},
+ notification-code-background-color: #{$notification-code-background-color},
+ notification-radius: #{$notification-radius},
+ notification-padding: #{$notification-padding},
+ notification-padding-ltr: #{$notification-padding-ltr},
+ notification-padding-rtl: #{$notification-padding-rtl},
+ )
+ );
+}
+
.#{$class-prefix}notification {
@extend %block;
- background-color: $notification-background-color;
- border-radius: $notification-radius;
+ background-color: getVar("notification-background-color");
+ border-radius: getVar("notification-radius");
position: relative;
@include ltr {
- padding: $notification-padding-ltr;
+ padding: getVar("notification-padding-ltr");
}
@include rtl {
- padding: $notification-padding-rtl;
+ padding: getVar("notification-padding-rtl");
}
a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) {
code,
pre {
- background: $notification-code-background-color;
+ background: getVar("notification-code-background-color");
}
pre code {
& > .#{$class-prefix}delete {
@include ltr-position(0.5rem);
-
position: absolute;
top: 0.5rem;
}
.#{$class-prefix}number {
align-items: center;
- background-color: $background;
- border-radius: $radius-rounded;
+ background-color: getVar("background");
+ border-radius: getVar("radius-rounded");
display: inline-flex;
- font-size: $size-medium;
+ font-size: getVar("size-medium");
height: 2em;
justify-content: center;
margin-right: 1.5rem;
@import "../utilities/mixins";
-$progress-bar-background-color: $border-light !default;
-$progress-value-background-color: $text !default;
-$progress-border-radius: $radius-rounded !default;
+$progress-bar-background-color: getVar("border-light") !default;
+$progress-value-background-color: getVar("text") !default;
+$progress-border-radius: getVar("radius-rounded") !default;
$progress-indeterminate-duration: 1.5s !default;
$progress-colors: $colors !default;
+:root {
+ @include register-vars(
+ (
+ progress-bar-background-color: #{$progress-bar-background-color},
+ progress-value-background-color: #{$progress-value-background-color},
+ progress-border-radius: #{$progress-border-radius},
+ progress-indeterminate-duration: #{$progress-indeterminate-duration},
+ )
+ );
+}
+
.#{$class-prefix}progress {
@extend %block;
-moz-appearance: none;
-webkit-appearance: none;
border: none;
- border-radius: $progress-border-radius;
+ border-radius: getVar("progress-border-radius");
display: block;
- height: $size-normal;
+ height: getVar("size-normal");
overflow: hidden;
padding: 0;
width: 100%;
&::-webkit-progress-bar {
- background-color: $progress-bar-background-color;
+ background-color: getVar("progress-bar-background-color");
}
&::-webkit-progress-value {
- background-color: $progress-value-background-color;
+ background-color: getVar("progress-value-background-color");
}
&::-moz-progress-bar {
- background-color: $progress-value-background-color;
+ background-color: getVar("progress-value-background-color");
}
&::-ms-fill {
- background-color: $progress-value-background-color;
+ background-color: getVar("progress-value-background-color");
border: none;
}
background-image: linear-gradient(
to right,
$color 30%,
- $progress-bar-background-color 30%
+ #{getVar("progress-bar-background-color")} 30%
);
}
}
}
&:indeterminate {
- animation-duration: $progress-indeterminate-duration;
+ animation-duration: getVar("progress-indeterminate-duration");
animation-iteration-count: infinite;
animation-name: moveIndeterminate;
animation-timing-function: linear;
- background-color: $progress-bar-background-color;
+ background-color: getVar("progress-bar-background-color");
background-image: linear-gradient(
to right,
- $text 30%,
- $progress-bar-background-color 30%
+ #{getVar("text")} 30%,
+ #{getVar("progress-bar-background-color")} 30%
);
background-position: top left;
background-repeat: no-repeat;
// Sizes
&.is-small {
- height: $size-small;
+ height: getVar("size-small");
}
&.is-medium {
- height: $size-medium;
+ height: getVar("size-medium");
}
&.is-large {
- height: $size-large;
+ height: getVar("size-large");
}
}
@import "../utilities/mixins";
-$table-color: $text-strong !default;
-$table-background-color: $scheme-main !default;
+$table-color: getVar("text-strong") !default;
+$table-background-color: getVar("scheme-main") !default;
-$table-cell-border: 1px solid $border !default;
+$table-cell-border: 1px solid getVar("border") !default;
$table-cell-border-width: 0 0 1px !default;
$table-cell-padding: 0.5em 0.75em !default;
-$table-cell-heading-color: $text-strong !default;
+$table-cell-heading-color: getVar("text-strong") !default;
$table-cell-text-align: left !default;
$table-head-cell-border-width: 0 0 2px !default;
-$table-head-cell-color: $text-strong !default;
+$table-head-cell-color: getVar("text-strong") !default;
$table-foot-cell-border-width: 2px 0 0 !default;
-$table-foot-cell-color: $text-strong !default;
+$table-foot-cell-color: getVar("text-strong") !default;
$table-head-background-color: transparent !default;
$table-body-background-color: transparent !default;
$table-foot-background-color: transparent !default;
-$table-row-hover-background-color: $scheme-main-bis !default;
+$table-row-hover-background-color: getVar("scheme-main-bis") !default;
-$table-row-active-background-color: $primary !default;
-$table-row-active-color: $primary-invert !default;
+$table-row-active-background-color: getVar("primary") !default;
+$table-row-active-color: getVar("primary-invert") !default;
-$table-striped-row-even-background-color: $scheme-main-bis !default;
-$table-striped-row-even-hover-background-color: $scheme-main-ter !default;
+$table-striped-row-even-background-color: getVar("scheme-main-bis") !default;
+$table-striped-row-even-hover-background-color: getVar(
+ "scheme-main-ter"
+) !default;
$table-colors: $colors !default;
+:root {
+ @include register-vars(
+ (
+ table-color: #{$table-color},
+ table-background-color: #{$table-background-color},
+ table-cell-border: #{$table-cell-border},
+ table-cell-border-width: #{$table-cell-border-width},
+ table-cell-padding: #{$table-cell-padding},
+ table-cell-heading-color: #{$table-cell-heading-color},
+ table-cell-text-align: #{$table-cell-text-align},
+ table-head-cell-border-width: #{$table-head-cell-border-width},
+ table-head-cell-color: #{$table-head-cell-color},
+ table-foot-cell-border-width: #{$table-foot-cell-border-width},
+ table-foot-cell-color: #{$table-foot-cell-color},
+ table-head-background-color: #{$table-head-background-color},
+ table-body-background-color: #{$table-body-background-color},
+ table-foot-background-color: #{$table-foot-background-color},
+ table-row-hover-background-color: #{$table-row-hover-background-color},
+ table-row-active-background-color: #{$table-row-active-background-color},
+ table-row-active-color: #{$table-row-active-color},
+ table-striped-row-even-background-color: #{$table-striped-row-even-background-color},
+ table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color},
+ )
+ );
+}
+
.#{$class-prefix}table {
@extend %block;
- background-color: $table-background-color;
- color: $table-color;
+ background-color: getVar("table-background-color");
+ color: getVar("table-color");
td,
th {
- border: $table-cell-border;
- border-width: $table-cell-border-width;
- padding: $table-cell-padding;
+ border: getVar("table-cell-border");
+ border-width: getVar("table-cell-border-width");
+ padding: getVar("table-cell-padding");
vertical-align: top;
// Colors
}
&.is-selected {
- background-color: $table-row-active-background-color;
- color: $table-row-active-color;
+ background-color: getVar("table-row-active-background-color");
+ color: getVar("table-row-active-color");
a,
strong {
}
th {
- color: $table-cell-heading-color;
+ color: getVar("table-cell-heading-color");
&:not([align]) {
- text-align: $table-cell-text-align;
+ text-align: getVar("table-cell-text-align");
}
}
tr {
&.is-selected {
- background-color: $table-row-active-background-color;
- color: $table-row-active-color;
+ background-color: getVar("table-row-active-background-color");
+ color: getVar("table-row-active-color");
a,
strong {
td,
th {
- border-color: $table-row-active-color;
+ border-color: getVar("table-row-active-color");
color: currentColor;
}
}
}
thead {
- background-color: $table-head-background-color;
+ background-color: getVar("table-head-background-color");
td,
th {
- border-width: $table-head-cell-border-width;
- color: $table-head-cell-color;
+ border-width: getVar("table-head-cell-border-width");
+ color: getVar("table-head-cell-color");
}
}
tfoot {
- background-color: $table-foot-background-color;
+ background-color: getVar("table-foot-background-color");
td,
th {
- border-width: $table-foot-cell-border-width;
- color: $table-foot-cell-color;
+ border-width: getVar("table-foot-cell-border-width");
+ color: getVar("table-foot-cell-color");
}
}
tbody {
- background-color: $table-body-background-color;
+ background-color: getVar("table-body-background-color");
tr {
&:last-child {
tbody {
tr:not(.is-selected) {
&:hover {
- background-color: $table-row-hover-background-color;
+ background-color: getVar("table-row-hover-background-color");
}
}
}
tbody {
tr:not(.is-selected) {
&:hover {
- background-color: $table-row-hover-background-color;
+ background-color: getVar("table-row-hover-background-color");
&:nth-child(even) {
- background-color: $table-striped-row-even-hover-background-color;
+ background-color: getVar(
+ "table-striped-row-even-hover-background-color"
+ );
}
}
}
tbody {
tr:not(.is-selected) {
&:nth-child(even) {
- background-color: $table-striped-row-even-background-color;
+ background-color: getVar("table-striped-row-even-background-color");
}
}
}
.#{$class-prefix}table-container {
@extend %block;
-
@include overflow-touch;
-
overflow: auto;
overflow-y: hidden;
max-width: 100%;
@import "../utilities/mixins";
-$tag-background-color: $background !default;
-$tag-color: $text !default;
-$tag-radius: $radius !default;
+$tag-background-color: getVar("background") !default;
+$tag-color: getVar("text") !default;
+$tag-radius: getVar("radius") !default;
$tag-delete-margin: 1px !default;
$tag-colors: $colors !default;
+:root {
+ @include register-vars(
+ (
+ tag-background-color: #{$tag-background-color},
+ tag-color: #{$tag-color},
+ tag-radius: #{$tag-radius},
+ tag-delete-margin: #{$tag-delete-margin},
+ )
+ );
+}
+
.#{$class-prefix}tags {
align-items: center;
display: flex;
// Sizes
&.are-medium {
.#{$class-prefix}tag:not(.is-normal):not(.is-large) {
- font-size: $size-normal;
+ font-size: getVar("size-normal");
}
}
&.are-large {
.#{$class-prefix}tag:not(.is-normal):not(.is-medium) {
- font-size: $size-medium;
+ font-size: getVar("size-medium");
}
}
.#{$class-prefix}tag:not(body) {
align-items: center;
- background-color: $tag-background-color;
- border-radius: $tag-radius;
- color: $tag-color;
+ background-color: getVar("tag-background-color");
+ border-radius: getVar("tag-radius");
+ color: getVar("tag-color");
display: inline-flex;
- font-size: $size-small;
+ font-size: getVar("size-small");
height: 2em;
justify-content: center;
line-height: 1.5;
// Sizes
&.is-normal {
- font-size: $size-small;
+ font-size: getVar("size-small");
}
&.is-medium {
- font-size: $size-normal;
+ font-size: getVar("size-normal");
}
&.is-large {
- font-size: $size-medium;
+ font-size: getVar("size-medium");
}
.#{$class-prefix}icon {
// Modifiers
&.is-delete {
- @include ltr-property("margin", $tag-delete-margin, false);
-
+ @include ltr-property("margin", getVar("tag-delete-margin"), false);
padding: 0;
position: relative;
width: 2em;
&:hover,
&:focus {
- background-color: darken($tag-background-color, 5%);
+ // background-color: darken($tag-background-color, 5%); // TODO
}
&:active {
- background-color: darken($tag-background-color, 10%);
+ // background-color: darken($tag-background-color, 10%); // TODO
}
}
&.is-rounded {
- border-radius: $radius-rounded;
+ border-radius: getVar("radius-rounded");
}
}
@import "../utilities/mixins";
-$title-color: $text-strong !default;
+$title-color: getVar("text-strong") !default;
$title-family: false !default;
-$title-size: $size-3 !default;
-$title-weight: $weight-semibold !default;
+$title-size: getVar("size-3") !default;
+$title-weight: getVar("weight-semibold") !default;
$title-line-height: 1.125 !default;
$title-strong-color: inherit !default;
$title-strong-weight: inherit !default;
$title-sub-size: 0.75em !default;
$title-sup-size: 0.75em !default;
-$subtitle-color: $text !default;
+$subtitle-color: getVar("text") !default;
$subtitle-family: false !default;
-$subtitle-size: $size-5 !default;
-$subtitle-weight: $weight-normal !default;
+$subtitle-size: getVar("size-5") !default;
+$subtitle-weight: getVar("weight-normal") !default;
$subtitle-line-height: 1.25 !default;
-$subtitle-strong-color: $text-strong !default;
-$subtitle-strong-weight: $weight-semibold !default;
+$subtitle-strong-color: getVar("text-strong") !default;
+$subtitle-strong-weight: getVar("weight-semibold") !default;
$subtitle-negative-margin: -1.25rem !default;
+:root {
+ @include register-vars(
+ (
+ title-color: #{$title-color},
+ title-family: #{$title-family},
+ title-size: #{$title-size},
+ title-weight: #{$title-weight},
+ title-line-height: #{$title-line-height},
+ title-strong-color: #{$title-strong-color},
+ title-strong-weight: #{$title-strong-weight},
+ title-sub-size: #{$title-sub-size},
+ title-sup-size: #{$title-sup-size},
+ subtitle-color: #{$subtitle-color},
+ subtitle-family: #{$subtitle-family},
+ subtitle-size: #{$subtitle-size},
+ subtitle-weight: #{$subtitle-weight},
+ subtitle-line-height: #{$subtitle-line-height},
+ subtitle-strong-color: #{$subtitle-strong-color},
+ subtitle-strong-weight: #{$subtitle-strong-weight},
+ subtitle-negative-margin: #{$subtitle-negative-margin},
+ )
+ );
+}
+
.#{$class-prefix}title,
.#{$class-prefix}subtitle {
@extend %block;
}
sub {
- font-size: $title-sub-size;
+ font-size: getVar("title-sub-size");
}
sup {
- font-size: $title-sup-size;
+ font-size: getVar("title-sup-size");
}
.#{$class-prefix}tag {
}
.#{$class-prefix}title {
- color: $title-color;
+ color: getVar("title-color");
@if $title-family {
- font-family: $title-family;
+ font-family: getVar("title-family");
}
- font-size: $title-size;
- font-weight: $title-weight;
- line-height: $title-line-height;
+ font-size: getVar("title-size");
+ font-weight: getVar("title-weight");
+ line-height: getVar("title-line-height");
strong {
- color: $title-strong-color;
- font-weight: $title-strong-weight;
+ color: getVar("title-strong-color");
+ font-weight: getVar("title-strong-weight");
}
&:not(.is-spaced) + .#{$class-prefix}subtitle {
- margin-top: $subtitle-negative-margin;
+ margin-top: getVar("subtitle-negative-margin");
}
// Sizes
$i: index($sizes, $size);
&.is-#{$i} {
- font-size: $size;
+ font-size: getVar("size-", "", $i);
}
}
}
.#{$class-prefix}subtitle {
- color: $subtitle-color;
+ color: getVar("subtitle-color");
@if $subtitle-family {
- font-family: $subtitle-family;
+ font-family: getVar("subtitle-family");
}
- font-size: $subtitle-size;
- font-weight: $subtitle-weight;
- line-height: $subtitle-line-height;
+ font-size: getVar("subtitle-size");
+ font-weight: getVar("subtitle-weight");
+ line-height: getVar("subtitle-line-height");
strong {
- color: $subtitle-strong-color;
- font-weight: $subtitle-strong-weight;
+ color: getVar("subtitle-strong-color");
+ font-weight: getVar("subtitle-strong-weight");
}
&:not(.is-spaced) + .#{$class-prefix}title {
- margin-top: $subtitle-negative-margin;
+ margin-top: getVar("subtitle-negative-margin");
}
// Sizes
$i: index($sizes, $size);
&.is-#{$i} {
- font-size: $size;
+ font-size: getVar("size-", "", $i);
}
}
}
weight-semibold: #{$weight-semibold},
weight-bold: #{$weight-bold},
block-spacing: #{$block-spacing},
+ gap: #{$gap},
easing: #{$easing},
radius-small: #{$radius-small},
radius: #{$radius},
projects / thirdparty / bulma.git / commitdiff
