N°4628 - Upgrade bulma lib to v0.9.4 to avoid hack from N°4481

This commit is contained in:
Molkobain
2022-05-11 11:40:25 +02:00
parent 891dd31290
commit bb2c9dedeb
70 changed files with 742 additions and 385 deletions

4
node_modules/bulma-scss/LICENSE generated vendored
View File

@@ -1,7 +1,7 @@
The MIT License (MIT)
Copyright (c) 2020 Jeremy Thomas
Copyright (c) 2020 Jim Campbell
Copyright (c) 2021 Jeremy Thomas
Copyright (c) 2021 Jim Campbell
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

2
node_modules/bulma-scss/README.md generated vendored
View File

@@ -3,7 +3,7 @@
This is a port of the [Bulma](https://bulma.io/) project SASS files to the
SCSS syntax.
Currently, these files are based on Bulma version 0.9.0, and will be updated
Currently, these files are based on Bulma version 0.9.4, and will be updated
with later releases. The files are converted to SCSS with
[this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164).

View File

@@ -1,2 +1,4 @@
/* Bulma Base */
@import "minireset";
@import "generic";
@import "animations";

9
node_modules/bulma-scss/base/_animations.scss generated vendored Normal file
View File

@@ -0,0 +1,9 @@
@keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$body-background-color: $scheme-main !default;
$body-size: 16px !default;
$body-min-width: 300px !default;
@@ -54,6 +56,7 @@ section {
body,
button,
input,
optgroup,
select,
textarea {
font-family: $body-family;

2
node_modules/bulma-scss/bulma.scss generated vendored
View File

@@ -1,4 +1,4 @@
/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
@import "utilities/_all";
@import "base/_all";
@import "elements/_all";

View File

@@ -1,3 +1,4 @@
/* Bulma Components */
@import "breadcrumb";
@import "card";
@import "dropdown";

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$breadcrumb-item-color: $link !default;
$breadcrumb-item-hover-color: $link-hover !default;
$breadcrumb-item-active-color: $text-strong !default;

View File

@@ -1,6 +1,9 @@
@import "../utilities/mixins";
$card-color: $text !default;
$card-background-color: $scheme-main !default;
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
$card-shadow: $shadow !default;
$card-radius: 0.25rem !default;
$card-header-background-color: transparent !default;
$card-header-color: $text-strong !default;
@@ -19,13 +22,28 @@ $card-media-margin: $block-spacing !default;
.card {
background-color: $card-background-color;
border-radius: $card-radius;
box-shadow: $card-shadow;
color: $card-color;
max-width: 100%;
position: relative;
}
%card-item {
&:first-child {
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
}
&:last-child {
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
}
}
.card-header {
@extend %card-item;
background-color: $card-header-background-color;
align-items: stretch;
box-shadow: $card-header-shadow;
@@ -46,6 +64,8 @@ $card-media-margin: $block-spacing !default;
}
.card-header-icon {
@include reset;
align-items: center;
cursor: pointer;
display: flex;
@@ -56,14 +76,32 @@ $card-media-margin: $block-spacing !default;
.card-image {
display: block;
position: relative;
&:first-child {
img {
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
}
}
&:last-child {
img {
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
}
}
}
.card-content {
@extend %card-item;
background-color: $card-content-background-color;
padding: $card-content-padding;
}
.card-footer {
@extend %card-item;
background-color: $card-footer-background-color;
border-top: $card-footer-border-top;
align-items: stretch;

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$dropdown-menu-min-width: 12rem !default;
$dropdown-content-background-color: $scheme-main !default;
@@ -6,7 +8,7 @@ $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: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
$dropdown-content-shadow: $shadow !default;
$dropdown-content-z: 20 !default;
$dropdown-item-color: $text !default;

View File

@@ -1,4 +1,6 @@
$level-item-spacing: $block-spacing / 2 !default;
@import "../utilities/mixins";
$level-item-spacing: $block-spacing * 0.5 !default;
.level {
@extend %block;

View File

@@ -1,54 +0,0 @@
$list-background-color: $scheme-main !default;
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default;
$list-radius: $radius !default;
$list-item-border: 1px solid $border !default;
$list-item-color: $text !default;
$list-item-active-background-color: $link !default;
$list-item-active-color: $link-invert !default;
$list-item-hover-background-color: $background !default;
.list {
@extend %block;
background-color: $list-background-color;
border-radius: $list-radius;
box-shadow: $list-shadow;
// &.is-hoverable > .list-item:hover:not(.is-active)
// background-color: $list-item-hover-background-color
// cursor: pointer
}
.list-item {
display: block;
padding: 0.5em 1em;
&:not(a) {
color: $list-item-color;
}
&:first-child {
border-top-left-radius: $list-radius;
border-top-right-radius: $list-radius;
}
&:last-child {
border-bottom-left-radius: $list-radius;
border-bottom-right-radius: $list-radius;
}
&:not(:last-child) {
border-bottom: $list-item-border;
}
&.is-active {
background-color: $list-item-active-background-color;
color: $list-item-active-color;
}
}
a.list-item {
background-color: $list-item-hover-background-color;
cursor: pointer;
}

View File

@@ -1,6 +1,13 @@
@import "../utilities/mixins";
$media-border-color: bulmaRgba($border, 0.5) !default;
$media-spacing: 1rem;
$media-spacing-large: 1.5rem;
$media-border-size: 1px !default;
$media-spacing: 1rem !default;
$media-spacing-large: 1.5rem !default;
$media-content-spacing: 0.75rem !default;
$media-level-1-spacing: 0.75rem !default;
$media-level-1-content-spacing: 0.5rem !default;
$media-level-2-spacing: 0.5rem !default;
.media {
align-items: flex-start;
@@ -8,30 +15,30 @@ $media-spacing-large: 1.5rem;
text-align: inherit;
.content:not(:last-child) {
margin-bottom: 0.75rem;
margin-bottom: $media-content-spacing;
}
.media {
border-top: 1px solid $media-border-color;
border-top: $media-border-size solid $media-border-color;
display: flex;
padding-top: 0.75rem;
padding-top: $media-level-1-spacing;
.content:not(:last-child),
.control:not(:last-child) {
margin-bottom: 0.5rem;
margin-bottom: $media-level-1-content-spacing;
}
.media {
padding-top: 0.5rem;
padding-top: $media-level-2-spacing;
& + .media {
margin-top: 0.5rem;
margin-top: $media-level-2-spacing;
}
}
}
& + .media {
border-top: 1px solid $media-border-color;
border-top: $media-border-size solid $media-border-color;
margin-top: $media-spacing;
padding-top: $media-spacing;
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$menu-item-color: $text !default;
$menu-item-radius: $radius-small !default;
$menu-item-hover-color: $text-strong !default;

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$message-background-color: $background !default;
$message-radius: $radius !default;

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$modal-z: 40 !default;
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default;
@@ -28,6 +30,8 @@ $modal-card-foot-border-top: 1px solid $border !default;
$modal-card-body-background-color: $scheme-main !default;
$modal-card-body-padding: 20px !default;
$modal-breakpoint: $tablet !default;
.modal {
@extend %overlay;
@@ -60,7 +64,7 @@ $modal-card-body-padding: 20px !default;
width: 100%;
// Responsiveness
@include tablet {
@include from($modal-breakpoint) {
margin: 0 auto;
max-height: calc(100vh - #{$modal-content-spacing-tablet});
width: $modal-content-width;

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$navbar-background-color: $scheme-main !default;
$navbar-box-shadow-size: 0 2px 0 0 !default;
$navbar-box-shadow-color: $background !default;
@@ -46,6 +48,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
$navbar-breakpoint: $desktop !default;
$navbar-colors: $colors !default;
@mixin navbar-fixed {
left: 0;
position: fixed;
@@ -59,7 +63,7 @@ $navbar-breakpoint: $desktop !default;
position: relative;
z-index: $navbar-z;
@each $name, $pair in $colors {
@each $name, $pair in $navbar-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
@@ -204,6 +208,8 @@ body {
}
.navbar-burger {
@extend %reset;
color: $navbar-burger-color;
@include hamburger($navbar-height);

View File

@@ -1,3 +1,6 @@
@import "../utilities/controls";
@import "../utilities/mixins";
$pagination-color: $text-strong !default;
$pagination-border-color: $border !default;
$pagination-margin: -0.25rem !default;
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default;
$pagination-item-padding-left: 0.5em !default;
$pagination-item-padding-right: 0.5em !default;
$pagination-nav-padding-left: 0.75em !default;
$pagination-nav-padding-right: 0.75em !default;
$pagination-hover-color: $link-hover !default;
$pagination-hover-border-color: $link-hover-border !default;
@@ -27,7 +33,7 @@ $pagination-current-border-color: $link !default;
$pagination-ellipsis-color: $grey-light !default;
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
.pagination {
@extend %block;
@@ -106,7 +112,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
box-shadow: $pagination-shadow-inset;
}
&[disabled] {
&[disabled],
&.is-disabled {
background-color: $pagination-disabled-background-color;
border-color: $pagination-disabled-border-color;
box-shadow: none;
@@ -117,8 +124,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
.pagination-previous,
.pagination-next {
padding-left: 0.75em;
padding-right: 0.75em;
padding-left: $pagination-nav-padding-left;
padding-right: $pagination-nav-padding-right;
white-space: nowrap;
}
@@ -137,6 +144,10 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
.pagination-list {
flex-wrap: wrap;
li {
list-style: none;
}
}
@include mobile {
@@ -167,6 +178,14 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
order: 1;
}
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis {
margin-bottom: 0;
margin-top: 0;
}
.pagination-previous {
order: 2;
}
@@ -177,6 +196,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
.pagination {
justify-content: space-between;
margin-bottom: 0;
margin-top: 0;
&.is-centered {
.pagination-previous {

View File

@@ -1,7 +1,9 @@
@import "../utilities/mixins";
$panel-margin: $block-spacing !default;
$panel-item-border: 1px solid $border-light !default;
$panel-radius: $radius-large !default;
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
$panel-shadow: $shadow !default;
$panel-heading-background-color: $border-light !default;
$panel-heading-color: $text-strong !default;

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$tabs-border-bottom-color: $border !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 1px !default;

View File

@@ -1,3 +1,4 @@
/* Bulma Elements */
@import "box";
@import "button";
@import "container";

View File

@@ -1,7 +1,9 @@
@import "../utilities/mixins";
$box-color: $text !default;
$box-background-color: $scheme-main !default;
$box-radius: $radius-large !default;
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
$box-shadow: $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;

View File

@@ -1,3 +1,6 @@
@import "../utilities/controls";
@import "../utilities/mixins";
$button-color: $text-strong !default;
$button-background-color: $scheme-main !default;
$button-family: false !default;
@@ -24,6 +27,13 @@ $button-text-decoration: underline !default;
$button-text-hover-background-color: $background !default;
$button-text-hover-color: $text-strong !default;
$button-ghost-background: none !default;
$button-ghost-border-color: transparent !default;
$button-ghost-color: $link !default;
$button-ghost-decoration: none !default;
$button-ghost-hover-color: $link !default;
$button-ghost-hover-decoration: underline !default;
$button-disabled-background-color: $scheme-main !default;
$button-disabled-border-color: $border !default;
$button-disabled-shadow: none !default;
@@ -33,9 +43,15 @@ $button-static-color: $text-light !default;
$button-static-background-color: $scheme-main-ter !default;
$button-static-border-color: $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), "tablet-only": ("small": $size-small * 0.875, "normal": $size-small, "medium": $size-normal, "large": $size-medium)) !default;
// The button sizes use mixins so they can be used at different breakpoints
@mixin button-small {
border-radius: $radius-small;
&:not(.is-rounded) {
border-radius: $radius-small;
}
font-size: $size-small;
}
@@ -88,18 +104,18 @@ $button-static-border-color: $border !default;
}
&:first-child:not(:last-child) {
@include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false);
@include ltr-property("margin", $button-padding-horizontal / 4);
@include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false);
@include ltr-property("margin", $button-padding-horizontal * 0.25);
}
&:last-child:not(:first-child) {
@include ltr-property("margin", $button-padding-horizontal / 4, false);
@include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}));
@include ltr-property("margin", $button-padding-horizontal * 0.25, false);
@include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}));
}
&:first-child:last-child {
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width});
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width});
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width});
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width});
}
}
@@ -155,7 +171,20 @@ $button-static-border-color: $border !default;
}
}
@each $name, $pair in $colors {
&.is-ghost {
background: $button-ghost-background;
border-color: $button-ghost-border-color;
color: $button-ghost-color;
text-decoration: $button-ghost-decoration;
&:hover,
&.is-hovered {
color: $button-ghost-hover-color;
text-decoration: $button-ghost-hover-decoration;
}
}
@each $name, $pair in $button-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
@@ -191,7 +220,7 @@ $button-static-border-color: $border !default;
&[disabled],
fieldset[disabled] & {
background-color: $color;
border-color: transparent;
border-color: $color;
box-shadow: none;
}
@@ -481,3 +510,21 @@ $button-static-border-color: $border !default;
}
}
}
@each $bp-name, $bp-sizes in $button-responsive-sizes {
@include breakpoint($bp-name) {
@each $size, $value in $bp-sizes {
@if $size != "normal" {
.button.is-responsive.is-#{$size} {
font-size: $value;
}
}
@else {
.button.is-responsive,
.button.is-responsive.is-normal {
font-size: $value;
}
}
}
}
}

View File

@@ -1,4 +1,7 @@
@import "../utilities/mixins";
$container-offset: 2 * $gap !default;
$container-max-width: $fullhd !default;
.container {
flex-grow: 1;
@@ -7,7 +10,7 @@ $container-offset: 2 * $gap !default;
width: auto;
&.is-fluid {
max-width: none;
max-width: none !important;
padding-left: $gap;
padding-right: $gap;
width: 100%;
@@ -19,25 +22,29 @@ $container-offset: 2 * $gap !default;
@include until-widescreen {
&.is-widescreen {
max-width: $widescreen - $container-offset;
&.is-widescreen:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset;
}
}
@include until-fullhd {
&.is-fullhd {
max-width: $fullhd - $container-offset;
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset;
}
}
@include widescreen {
max-width: $widescreen - $container-offset;
&:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset;
}
}
@include fullhd {
max-width: $fullhd - $container-offset;
&:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset;
}
}
}

View File

@@ -1,7 +1,11 @@
@import "../utilities/mixins";
$content-heading-color: $text-strong !default;
$content-heading-weight: $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-padding: 1.25em 1.5em !default;
@@ -14,6 +18,7 @@ $content-table-cell-padding: 0.5em 0.75em !default;
$content-table-cell-heading-color: $text-strong !default;
$content-table-head-cell-border-width: 0 0 2px !default;
$content-table-head-cell-color: $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;
@@ -34,7 +39,7 @@ $content-table-foot-cell-color: $text-strong !default;
pre,
table {
&:not(:last-child) {
margin-bottom: 1em;
margin-bottom: $content-block-margin-bottom;
}
}
@@ -224,7 +229,7 @@ $content-table-foot-cell-color: $text-strong !default;
&:last-child {
td,
th {
border-bottom-width: 0;
border-bottom-width: $content-table-body-last-row-cell-border-bottom-width;
}
}
}
@@ -242,6 +247,10 @@ $content-table-foot-cell-color: $text-strong !default;
font-size: $size-small;
}
&.is-normal {
font-size: $size-normal;
}
&.is-medium {
font-size: $size-medium;
}

View File

@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default;
$icon-dimensions-small: 1rem !default;
$icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default;
$icon-text-spacing: 0.25em !default;
.icon {
align-items: center;
@@ -26,3 +27,43 @@ $icon-dimensions-large: 3rem !default;
width: $icon-dimensions-large;
}
}
.icon-text {
align-items: flex-start;
color: inherit;
display: inline-flex;
flex-wrap: wrap;
line-height: $icon-dimensions;
vertical-align: top;
.icon {
flex-grow: 0;
flex-shrink: 0;
&:not(:last-child) {
@include ltr {
margin-right: $icon-text-spacing;
}
@include rtl {
margin-left: $icon-text-spacing;
}
}
&:not(:first-child) {
@include ltr {
margin-left: $icon-text-spacing;
}
@include rtl {
margin-right: $icon-text-spacing;
}
}
}
}
div.icon-text {
display: flex;
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$dimensions: 16 24 32 48 64 96 128 !default;
.image {

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$notification-background-color: $background !default;
$notification-code-background-color: $scheme-main !default;
$notification-radius: $radius !default;
@@ -5,6 +7,8 @@ $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;
.notification {
@extend %block;
@@ -54,7 +58,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
}
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $notification-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
.block {
@extend %block;
}
@@ -14,20 +16,6 @@
text-transform: uppercase;
}
.highlight {
@extend %block;
font-weight: $weight-normal;
max-width: 100%;
overflow: hidden;
padding: 0;
pre {
overflow: auto;
max-width: 100%;
}
}
.loader {
@extend %loader;
}

View File

@@ -1,9 +1,13 @@
@import "../utilities/mixins";
$progress-bar-background-color: $border-light !default;
$progress-value-background-color: $text !default;
$progress-border-radius: $radius-rounded !default;
$progress-indeterminate-duration: 1.5s !default;
$progress-colors: $colors !default;
.progress {
@extend %block;
@@ -35,7 +39,7 @@ $progress-indeterminate-duration: 1.5s !default;
}
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $progress-colors {
$color: nth($pair, 1);
&.is-#{$name} {
@@ -75,6 +79,10 @@ $progress-indeterminate-duration: 1.5s !default;
&::-moz-progress-bar {
background-color: transparent;
}
&::-ms-fill {
animation-name: none;
}
}
// Sizes

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$table-color: $text-strong !default;
$table-background-color: $scheme-main !default;
@@ -5,6 +7,7 @@ $table-cell-border: 1px solid $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-text-align: left !default;
$table-head-cell-border-width: 0 0 2px !default;
$table-head-cell-color: $text-strong !default;
@@ -23,6 +26,8 @@ $table-row-active-color: $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-colors: $colors !default;
.table {
@extend %block;
@@ -37,7 +42,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
vertical-align: top;
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $table-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
@@ -73,7 +78,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
color: $table-cell-heading-color;
&:not([align]) {
text-align: inherit;
text-align: $table-cell-text-align;
}
}

View File

@@ -1,8 +1,12 @@
@import "../utilities/mixins";
$tag-background-color: $background !default;
$tag-color: $text !default;
$tag-radius: $radius !default;
$tag-delete-margin: 1px !default;
$tag-colors: $colors !default;
.tags {
align-items: center;
display: flex;
@@ -115,7 +119,7 @@ $tag-delete-margin: 1px !default;
}
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $tag-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$title-color: $text-strong !default;
$title-family: false !default;
$title-size: $size-3 !default;
@@ -57,10 +59,6 @@ $subtitle-negative-margin: -1.25rem !default;
font-weight: $title-strong-weight;
}
& + .highlight {
margin-top: -0.75rem;
}
&:not(.is-spaced) + .subtitle {
margin-top: $subtitle-negative-margin;
}

View File

@@ -1,3 +1,4 @@
/* Bulma Form */
@import "shared";
@import "input-textarea";
@import "checkbox-radio";

View File

@@ -13,7 +13,8 @@
}
&[disabled],
fieldset[disabled] & {
fieldset[disabled] &,
input[disabled] {
color: $input-disabled-color;
cursor: not-allowed;
}

View File

@@ -11,6 +11,8 @@ $file-name-border-style: solid !default;
$file-name-border-width: 1px 1px 1px 0 !default;
$file-name-max-width: 16em !default;
$file-colors: $form-colors !default;
.file {
@extend %unselectable;
@@ -20,7 +22,7 @@ $file-name-max-width: 16em !default;
position: relative;
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $file-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
@@ -65,6 +67,10 @@ $file-name-max-width: 16em !default;
font-size: $size-small;
}
&.is-normal {
font-size: $size-normal;
}
&.is-medium {
font-size: $size-medium;

View File

@@ -2,6 +2,8 @@ $textarea-padding: $control-padding-horizontal !default;
$textarea-max-height: 40em !default;
$textarea-min-height: 8em !default;
$textarea-colors: $form-colors !default;
%input-textarea {
@extend %input;
@@ -14,7 +16,7 @@ $textarea-min-height: 8em !default;
}
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $textarea-colors {
$color: nth($pair, 1);
&.is-#{$name} {

View File

@@ -1,3 +1,5 @@
$select-colors: $form-colors !default;
.select {
display: inline-block;
max-width: 100%;
@@ -68,7 +70,7 @@
}
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $select-colors {
$color: nth($pair, 1);
&.is-#{$name} {
@@ -110,7 +112,8 @@
// Modifiers
&.is-disabled {
&::after {
border-color: $input-disabled-color;
border-color: $input-disabled-color !important;
opacity: 0.5;
}
}

View File

@@ -1,3 +1,8 @@
@import "../utilities/controls";
@import "../utilities/mixins";
$form-colors: $colors !default;
$input-color: $text-strong !default;
$input-background-color: $scheme-main !default;
$input-border-color: $border !default;

View File

@@ -3,6 +3,8 @@ $label-weight: $weight-bold !default;
$help-size: $size-small !default;
$label-colors: $form-colors !default;
.label {
color: $label-color;
display: block;
@@ -32,7 +34,7 @@ $help-size: $size-small !default;
font-size: $help-size;
margin-top: 0.25rem;
@each $name, $pair in $colors {
@each $name, $pair in $label-colors {
$color: nth($pair, 1);
&.is-#{$name} {

View File

@@ -1,2 +1,3 @@
/* Bulma Grid */
@import "columns";
@import "tiles";

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$column-gap: 0.75rem !default;
.column {
@@ -9,6 +11,7 @@ $column-gap: 0.75rem !default;
.columns.is-mobile > &.is-narrow {
flex: none;
width: unset;
}
.columns.is-mobile > &.is-full {
@@ -62,55 +65,56 @@ $column-gap: 0.75rem !default;
}
.columns.is-mobile > &.is-offset-three-quarters {
margin-left: 75%;
@include ltr-property("margin", 75%, false);
}
.columns.is-mobile > &.is-offset-two-thirds {
margin-left: 66.6666%;
@include ltr-property("margin", 66.6666%, false);
}
.columns.is-mobile > &.is-offset-half {
margin-left: 50%;
@include ltr-property("margin", 50%, false);
}
.columns.is-mobile > &.is-offset-one-third {
margin-left: 33.3333%;
@include ltr-property("margin", 33.3333%, false);
}
.columns.is-mobile > &.is-offset-one-quarter {
margin-left: 25%;
@include ltr-property("margin", 25%, false);
}
.columns.is-mobile > &.is-offset-one-fifth {
margin-left: 20%;
@include ltr-property("margin", 20%, false);
}
.columns.is-mobile > &.is-offset-two-fifths {
margin-left: 40%;
@include ltr-property("margin", 40%, false);
}
.columns.is-mobile > &.is-offset-three-fifths {
margin-left: 60%;
@include ltr-property("margin", 60%, false);
}
.columns.is-mobile > &.is-offset-four-fifths {
margin-left: 80%;
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
.columns.is-mobile > &.is-#{$i} {
flex: none;
width: percentage($i / 12);
width: percentage(divide($i, 12));
}
.columns.is-mobile > &.is-offset-#{$i} {
margin-left: percentage($i / 12);
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
@include mobile {
&.is-narrow-mobile {
flex: none;
width: unset;
}
&.is-full-mobile {
@@ -164,49 +168,49 @@ $column-gap: 0.75rem !default;
}
&.is-offset-three-quarters-mobile {
margin-left: 75%;
@include ltr-property("margin", 75%, false);
}
&.is-offset-two-thirds-mobile {
margin-left: 66.6666%;
@include ltr-property("margin", 66.6666%, false);
}
&.is-offset-half-mobile {
margin-left: 50%;
@include ltr-property("margin", 50%, false);
}
&.is-offset-one-third-mobile {
margin-left: 33.3333%;
@include ltr-property("margin", 33.3333%, false);
}
&.is-offset-one-quarter-mobile {
margin-left: 25%;
@include ltr-property("margin", 25%, false);
}
&.is-offset-one-fifth-mobile {
margin-left: 20%;
@include ltr-property("margin", 20%, false);
}
&.is-offset-two-fifths-mobile {
margin-left: 40%;
@include ltr-property("margin", 40%, false);
}
&.is-offset-three-fifths-mobile {
margin-left: 60%;
@include ltr-property("margin", 60%, false);
}
&.is-offset-four-fifths-mobile {
margin-left: 80%;
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
&.is-#{$i}-mobile {
flex: none;
width: percentage($i / 12);
width: percentage(divide($i, 12));
}
&.is-offset-#{$i}-mobile {
margin-left: percentage($i / 12);
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
}
@@ -216,6 +220,7 @@ $column-gap: 0.75rem !default;
&.is-narrow,
&.is-narrow-tablet {
flex: none;
width: unset;
}
&.is-full,
@@ -280,59 +285,59 @@ $column-gap: 0.75rem !default;
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet {
margin-left: 75%;
@include ltr-property("margin", 75%, false);
}
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet {
margin-left: 66.6666%;
@include ltr-property("margin", 66.6666%, false);
}
&.is-offset-half,
&.is-offset-half-tablet {
margin-left: 50%;
@include ltr-property("margin", 50%, false);
}
&.is-offset-one-third,
&.is-offset-one-third-tablet {
margin-left: 33.3333%;
@include ltr-property("margin", 33.3333%, false);
}
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet {
margin-left: 25%;
@include ltr-property("margin", 25%, false);
}
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet {
margin-left: 20%;
@include ltr-property("margin", 20%, false);
}
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet {
margin-left: 40%;
@include ltr-property("margin", 40%, false);
}
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet {
margin-left: 60%;
@include ltr-property("margin", 60%, false);
}
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet {
margin-left: 80%;
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
&.is-#{$i},
&.is-#{$i}-tablet {
flex: none;
width: percentage($i / 12);
width: percentage(divide($i, 12));
}
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet {
margin-left: percentage($i / 12);
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
}
@@ -341,6 +346,7 @@ $column-gap: 0.75rem !default;
@include touch {
&.is-narrow-touch {
flex: none;
width: unset;
}
&.is-full-touch {
@@ -394,49 +400,49 @@ $column-gap: 0.75rem !default;
}
&.is-offset-three-quarters-touch {
margin-left: 75%;
@include ltr-property("margin", 75%, false);
}
&.is-offset-two-thirds-touch {
margin-left: 66.6666%;
@include ltr-property("margin", 66.6666%, false);
}
&.is-offset-half-touch {
margin-left: 50%;
@include ltr-property("margin", 50%, false);
}
&.is-offset-one-third-touch {
margin-left: 33.3333%;
@include ltr-property("margin", 33.3333%, false);
}
&.is-offset-one-quarter-touch {
margin-left: 25%;
@include ltr-property("margin", 25%, false);
}
&.is-offset-one-fifth-touch {
margin-left: 20%;
@include ltr-property("margin", 20%, false);
}
&.is-offset-two-fifths-touch {
margin-left: 40%;
@include ltr-property("margin", 40%, false);
}
&.is-offset-three-fifths-touch {
margin-left: 60%;
@include ltr-property("margin", 60%, false);
}
&.is-offset-four-fifths-touch {
margin-left: 80%;
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
&.is-#{$i}-touch {
flex: none;
width: percentage($i / 12);
width: percentage(divide($i, 12));
}
&.is-offset-#{$i}-touch {
margin-left: percentage($i / 12);
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
}
@@ -445,6 +451,7 @@ $column-gap: 0.75rem !default;
@include desktop {
&.is-narrow-desktop {
flex: none;
width: unset;
}
&.is-full-desktop {
@@ -498,49 +505,49 @@ $column-gap: 0.75rem !default;
}
&.is-offset-three-quarters-desktop {
margin-left: 75%;
@include ltr-property("margin", 75%, false);
}
&.is-offset-two-thirds-desktop {
margin-left: 66.6666%;
@include ltr-property("margin", 66.6666%, false);
}
&.is-offset-half-desktop {
margin-left: 50%;
@include ltr-property("margin", 50%, false);
}
&.is-offset-one-third-desktop {
margin-left: 33.3333%;
@include ltr-property("margin", 33.3333%, false);
}
&.is-offset-one-quarter-desktop {
margin-left: 25%;
@include ltr-property("margin", 25%, false);
}
&.is-offset-one-fifth-desktop {
margin-left: 20%;
@include ltr-property("margin", 20%, false);
}
&.is-offset-two-fifths-desktop {
margin-left: 40%;
@include ltr-property("margin", 40%, false);
}
&.is-offset-three-fifths-desktop {
margin-left: 60%;
@include ltr-property("margin", 60%, false);
}
&.is-offset-four-fifths-desktop {
margin-left: 80%;
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
&.is-#{$i}-desktop {
flex: none;
width: percentage($i / 12);
width: percentage(divide($i, 12));
}
&.is-offset-#{$i}-desktop {
margin-left: percentage($i / 12);
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
}
@@ -549,6 +556,7 @@ $column-gap: 0.75rem !default;
@include widescreen {
&.is-narrow-widescreen {
flex: none;
width: unset;
}
&.is-full-widescreen {
@@ -602,49 +610,49 @@ $column-gap: 0.75rem !default;
}
&.is-offset-three-quarters-widescreen {
margin-left: 75%;
@include ltr-property("margin", 75%, false);
}
&.is-offset-two-thirds-widescreen {
margin-left: 66.6666%;
@include ltr-property("margin", 66.6666%, false);
}
&.is-offset-half-widescreen {
margin-left: 50%;
@include ltr-property("margin", 50%, false);
}
&.is-offset-one-third-widescreen {
margin-left: 33.3333%;
@include ltr-property("margin", 33.3333%, false);
}
&.is-offset-one-quarter-widescreen {
margin-left: 25%;
@include ltr-property("margin", 25%, false);
}
&.is-offset-one-fifth-widescreen {
margin-left: 20%;
@include ltr-property("margin", 20%, false);
}
&.is-offset-two-fifths-widescreen {
margin-left: 40%;
@include ltr-property("margin", 40%, false);
}
&.is-offset-three-fifths-widescreen {
margin-left: 60%;
@include ltr-property("margin", 60%, false);
}
&.is-offset-four-fifths-widescreen {
margin-left: 80%;
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
&.is-#{$i}-widescreen {
flex: none;
width: percentage($i / 12);
width: percentage(divide($i, 12));
}
&.is-offset-#{$i}-widescreen {
margin-left: percentage($i / 12);
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
}
@@ -653,6 +661,7 @@ $column-gap: 0.75rem !default;
@include fullhd {
&.is-narrow-fullhd {
flex: none;
width: unset;
}
&.is-full-fullhd {
@@ -706,57 +715,58 @@ $column-gap: 0.75rem !default;
}
&.is-offset-three-quarters-fullhd {
margin-left: 75%;
@include ltr-property("margin", 75%, false);
}
&.is-offset-two-thirds-fullhd {
margin-left: 66.6666%;
@include ltr-property("margin", 66.6666%, false);
}
&.is-offset-half-fullhd {
margin-left: 50%;
@include ltr-property("margin", 50%, false);
}
&.is-offset-one-third-fullhd {
margin-left: 33.3333%;
@include ltr-property("margin", 33.3333%, false);
}
&.is-offset-one-quarter-fullhd {
margin-left: 25%;
@include ltr-property("margin", 25%, false);
}
&.is-offset-one-fifth-fullhd {
margin-left: 20%;
@include ltr-property("margin", 20%, false);
}
&.is-offset-two-fifths-fullhd {
margin-left: 40%;
@include ltr-property("margin", 40%, false);
}
&.is-offset-three-fifths-fullhd {
margin-left: 60%;
@include ltr-property("margin", 60%, false);
}
&.is-offset-four-fifths-fullhd {
margin-left: 80%;
@include ltr-property("margin", 80%, false);
}
@for $i from 0 through 12 {
&.is-#{$i}-fullhd {
flex: none;
width: percentage($i / 12);
width: percentage(divide($i, 12));
}
&.is-offset-#{$i}-fullhd {
margin-left: percentage($i / 12);
@include ltr-property("margin", percentage(divide($i, 12)), false);
}
}
}
}
.columns {
margin-left: -$column-gap;
margin-right: -$column-gap;
@include ltr-property("margin", -$column-gap, false);
@include ltr-property("margin", -$column-gap);
margin-top: -$column-gap;
&:last-child {
@@ -773,8 +783,9 @@ $column-gap: 0.75rem !default;
}
&.is-gapless {
margin-left: 0;
margin-right: 0;
@include ltr-property("margin", 0, false);
@include ltr-property("margin", 0);
margin-top: 0;
& > .column {
@@ -822,10 +833,11 @@ $column-gap: 0.75rem !default;
@if $variable-columns {
.columns.is-variable {
--columnGap: 0.75rem;
margin-left: calc(-1 * var(--columnGap));
margin-right: calc(-1 * var(--columnGap));
.column {
@include ltr-property("margin", calc(-1 * var(--columnGap)), false);
@include ltr-property("margin", calc(-1 * var(--columnGap)));
> .column {
padding-left: var(--columnGap);
padding-right: var(--columnGap);
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$tile-spacing: 0.75rem !default;
.tile {
@@ -48,7 +50,7 @@ $tile-spacing: 0.75rem !default;
@for $i from 1 through 12 {
&.is-#{$i} {
flex: none;
width: $i / 12 * 100%;
width: divide($i, 12) * 100%;
}
}
}

View File

@@ -1,4 +1,6 @@
/* Bulma Helpers */
@import "color";
@import "flexbox";
@import "float";
@import "other";
@import "overflow";

View File

@@ -1,3 +1,5 @@
@import "../utilities/derived-variables";
@each $name, $pair in $colors {
$color: nth($pair, 1);

57
node_modules/bulma-scss/helpers/_flexbox.scss generated vendored Normal file
View File

@@ -0,0 +1,57 @@
$flex-direction-values: row, row-reverse, column, column-reverse;
@each $value in $flex-direction-values {
.is-flex-direction-#{$value} {
flex-direction: $value !important;
}
}
$flex-wrap-values: nowrap, wrap, wrap-reverse;
@each $value in $flex-wrap-values {
.is-flex-wrap-#{$value} {
flex-wrap: $value !important;
}
}
$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right;
@each $value in $justify-content-values {
.is-justify-content-#{$value} {
justify-content: $value !important;
}
}
$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline;
@each $value in $align-content-values {
.is-align-content-#{$value} {
align-content: $value !important;
}
}
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end;
@each $value in $align-items-values {
.is-align-items-#{$value} {
align-items: $value !important;
}
}
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
@each $value in $align-self-values {
.is-align-self-#{$value} {
align-self: $value !important;
}
}
$flex-operators: grow, shrink;
@each $operator in $flex-operators {
@for $i from 0 through 5 {
.is-flex-#{$operator}-#{$i} {
flex-#{$operator}: $i !important;
}
}
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
.is-clearfix {
@include clearfix;
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
.is-radiusless {
border-radius: 0 !important;
}
@@ -6,6 +8,11 @@
box-shadow: none !important;
}
.is-clickable {
cursor: pointer !important;
pointer-events: all !important;
}
.is-unselectable {
@extend %unselectable;
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
.is-overlay {
@extend %overlay;
}

View File

@@ -10,10 +10,15 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default;
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
$spacing-horizontal: "x" !default;
$spacing-vertical: "y" !default;
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default;
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
@each $property, $shortcut in $spacing-shortcuts {
@each $name, $value in $spacing-values {
// All directions
.#{$shortcut}-#{$name} {
#{$property}: $value !important;
}
// Cardinal directions
@each $direction, $suffix in $spacing-directions {
.#{$shortcut}#{$suffix}-#{$name} {

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
@mixin typography-size($target: "") {
@each $size in $sizes {
$i: index($sizes, $size);
@@ -128,6 +130,10 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
font-style: italic !important;
}
.is-underlined {
text-decoration: underline !important;
}
.has-text-weight-light {
font-weight: $weight-light !important;
}

View File

@@ -1,3 +1,5 @@
@import "../utilities/mixins";
$displays: "block" "flex" "inline" "inline-block" "inline-flex";
@each $display in $displays {

View File

@@ -1,3 +1,4 @@
/* Bulma Layout */
@import "hero";
@import "section";
@import "footer";

View File

@@ -1,3 +1,5 @@
@import "../utilities/derived-variables";
$footer-background-color: $scheme-main-bis !default;
$footer-color: false !default;
$footer-padding: 3rem 1.5rem 6rem !default;

View File

@@ -1,7 +1,12 @@
@import "../utilities/mixins";
$hero-body-padding: 3rem 1.5rem !default;
$hero-body-padding-tablet: 3rem 3rem !default;
$hero-body-padding-small: 1.5rem !default;
$hero-body-padding-medium: 9rem 1.5rem !default;
$hero-body-padding-large: 18rem 1.5rem !default;
$hero-body-padding-medium: 9rem 4.5rem !default;
$hero-body-padding-large: 18rem 6rem !default;
$hero-colors: $colors !default;
// Main container
.hero {
@@ -21,7 +26,7 @@ $hero-body-padding-large: 18rem 1.5rem !default;
}
// Colors
@each $name, $pair in $colors {
@each $name, $pair in $hero-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
@@ -79,6 +84,7 @@ $hero-body-padding-large: 18rem 1.5rem !default;
li {
&.is-active a {
color: $color !important;
opacity: 1;
}
}
@@ -232,4 +238,8 @@ $hero-body-padding-large: 18rem 1.5rem !default;
flex-grow: 1;
flex-shrink: 0;
padding: $hero-body-padding;
@include tablet {
padding: $hero-body-padding-tablet;
}
}

View File

@@ -1,12 +1,17 @@
@import "../utilities/mixins";
$section-padding: 3rem 1.5rem !default;
$section-padding-medium: 9rem 1.5rem !default;
$section-padding-large: 18rem 1.5rem !default;
$section-padding-desktop: 3rem 3rem !default;
$section-padding-medium: 9rem 4.5rem !default;
$section-padding-large: 18rem 6rem !default;
.section {
padding: $section-padding;
// Responsiveness
@include desktop {
padding: $section-padding-desktop;
// Sizes
&.is-medium {
padding: $section-padding-medium;

View File

@@ -1,6 +1,6 @@
{
"name": "bulma-scss",
"version": "0.9.0-1",
"version": "0.9.4",
"description": "The Bulma CSS Framework files converted to SCSS syntax",
"main": "bulma.scss",
"scripts": {

View File

@@ -1,6 +1,7 @@
/* Bulma Utilities */
@import "initial-variables";
@import "functions";
@import "derived-variables.scss";
@import "animations";
@import "derived-variables";
@import "mixins";
@import "controls";
@import "extends";

View File

@@ -1,9 +1 @@
@keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead.";

View File

@@ -1,3 +1,5 @@
@import "derived-variables";
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;
@@ -42,10 +44,6 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
}
}
%control {
@include control;
}
// The controls sizes use mixins so they can be used at different breakpoints
@mixin control-small {
border-radius: $control-radius-small;

View File

@@ -1,132 +1,114 @@
@import "initial-variables";
@import "functions";
$primary: $turquoise !default;
$info : $cyan !default;
$info: $cyan !default;
$success: $green !default;
$warning: $yellow !default;
$danger : $red !default;
$danger: $red !default;
$light : $white-ter !default;
$dark : $grey-darker !default;
$light: $white-ter !default;
$dark: $grey-darker !default;
// Invert colors
$orange-invert : findColorInvert($orange) !default;
$yellow-invert : findColorInvert($yellow) !default;
$green-invert : findColorInvert($green) !default;
$orange-invert: findColorInvert($orange) !default;
$yellow-invert: findColorInvert($yellow) !default;
$green-invert: findColorInvert($green) !default;
$turquoise-invert: findColorInvert($turquoise) !default;
$cyan-invert : findColorInvert($cyan) !default;
$blue-invert : findColorInvert($blue) !default;
$purple-invert : findColorInvert($purple) !default;
$red-invert : findColorInvert($red) !default;
$cyan-invert: findColorInvert($cyan) !default;
$blue-invert: findColorInvert($blue) !default;
$purple-invert: findColorInvert($purple) !default;
$red-invert: findColorInvert($red) !default;
$primary-invert : findColorInvert($primary) !default;
$primary-light : findLightColor($primary) !default;
$primary-dark : findDarkColor($primary) !default;
$info-invert : findColorInvert($info) !default;
$info-light : findLightColor($info) !default;
$info-dark : findDarkColor($info) !default;
$success-invert : findColorInvert($success) !default;
$success-light : findLightColor($success) !default;
$success-dark : findDarkColor($success) !default;
$warning-invert : findColorInvert($warning) !default;
$warning-light : findLightColor($warning) !default;
$warning-dark : findDarkColor($warning) !default;
$danger-invert : findColorInvert($danger) !default;
$danger-light : findLightColor($danger) !default;
$danger-dark : findDarkColor($danger) !default;
$light-invert : findColorInvert($light) !default;
$dark-invert : findColorInvert($dark) !default;
$primary-invert: findColorInvert($primary) !default;
$primary-light: findLightColor($primary) !default;
$primary-dark: findDarkColor($primary) !default;
$info-invert: findColorInvert($info) !default;
$info-light: findLightColor($info) !default;
$info-dark: findDarkColor($info) !default;
$success-invert: findColorInvert($success) !default;
$success-light: findLightColor($success) !default;
$success-dark: findDarkColor($success) !default;
$warning-invert: findColorInvert($warning) !default;
$warning-light: findLightColor($warning) !default;
$warning-dark: findDarkColor($warning) !default;
$danger-invert: findColorInvert($danger) !default;
$danger-light: findLightColor($danger) !default;
$danger-dark: findDarkColor($danger) !default;
$light-invert: findColorInvert($light) !default;
$dark-invert: findColorInvert($dark) !default;
// General colors
$scheme-main : $white !default;
$scheme-main-bis : $white-bis !default;
$scheme-main-ter : $white-ter !default;
$scheme-invert : $black !default;
$scheme-invert-bis : $black-bis !default;
$scheme-invert-ter : $black-ter !default;
$scheme-main: $white !default;
$scheme-main-bis: $white-bis !default;
$scheme-main-ter: $white-ter !default;
$scheme-invert: $black !default;
$scheme-invert-bis: $black-bis !default;
$scheme-invert-ter: $black-ter !default;
$background : $white-ter !default;
$background: $white-ter !default;
$border : $grey-lighter !default;
$border-hover : $grey-light !default;
$border-light : $grey-lightest !default;
$border: $grey-lighter !default;
$border-hover: $grey-light !default;
$border-light: $grey-lightest !default;
$border-light-hover: $grey-light !default;
// Text colors
$text : $grey-dark !default;
$text: $grey-dark !default;
$text-invert: findColorInvert($text) !default;
$text-light : $grey !default;
$text-light: $grey !default;
$text-strong: $grey-darker !default;
// Code colors
$code : $red !default;
$code: darken($red, 15%) !default;
$code-background: $background !default;
$pre : $text !default;
$pre-background : $background !default;
$pre: $text !default;
$pre-background: $background !default;
// Link colors
$link : $blue !default;
$link-invert : findColorInvert($link) !default;
$link-light : findLightColor($link) !default;
$link-dark : findDarkColor($link) !default;
$link-visited : $purple !default;
$link: $blue !default;
$link-invert: findColorInvert($link) !default;
$link-light: findLightColor($link) !default;
$link-dark: findDarkColor($link) !default;
$link-visited: $purple !default;
$link-hover : $grey-darker !default;
$link-hover-border : $grey-light !default;
$link-hover: $grey-darker !default;
$link-hover-border: $grey-light !default;
$link-focus : $grey-darker !default;
$link-focus-border : $blue !default;
$link-focus: $grey-darker !default;
$link-focus-border: $blue !default;
$link-active : $grey-darker !default;
$link-active: $grey-darker !default;
$link-active-border: $grey-dark !default;
// Typography
$family-primary : $family-sans-serif !default;
$family-primary: $family-sans-serif !default;
$family-secondary: $family-sans-serif !default;
$family-code : $family-monospace !default;
$family-code: $family-monospace !default;
$size-small : $size-7 !default;
$size-small: $size-7 !default;
$size-normal: $size-6 !default;
$size-medium: $size-5 !default;
$size-large : $size-4 !default;
$size-large: $size-4 !default;
// Effects
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;
$colors: mergeColorMaps(
(
"white" : ($white, $black),
"black" : ($black, $white),
"light" : ($light, $light-invert),
"dark" : ($dark, $dark-invert),
"primary": ($primary, $primary-invert, $primary-light, $primary-dark),
"link" : ($link, $link-invert, $link-light, $link-dark),
"info" : ($info, $info-invert, $info-light, $info-dark),
"success": ($success, $success-invert, $success-light, $success-dark),
"warning": ($warning, $warning-invert, $warning-light, $warning-dark),
"danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
$custom-colors
) !default;
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default;
$shades: mergeColorMaps(
(
"black-bis" : $black-bis,
"black-ter" : $black-ter,
"grey-darker" : $grey-darker,
"grey-dark" : $grey-dark,
"grey" : $grey,
"grey-light" : $grey-light,
"grey-lighter": $grey-lighter,
"white-ter" : $white-ter,
"white-bis" : $white-bis),
$custom-shades
) !default;
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

33
node_modules/bulma-scss/utilities/_extends.scss generated vendored Normal file
View File

@@ -0,0 +1,33 @@
@import "mixins";
%control {
@include control;
}
%unselectable {
@include unselectable;
}
%arrow {
@include arrow;
}
%block {
@include block;
}
%delete {
@include delete;
}
%loader {
@include loader;
}
%overlay {
@include overlay;
}
%reset {
@include reset;
}

View File

@@ -74,7 +74,7 @@
}
@else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
$value: divide($value, $number);
}
}
@@ -90,13 +90,13 @@
@each $name, $value in $color-rgb {
$adjusted: 0;
$value: $value / 255;
$value: divide($value, 255);
@if $value < 0.03928 {
$value: $value / 12.92;
$value: divide($value, 12.92);
}
@else {
$value: ($value + 0.055) / 1.055;
$value: divide($value + 0.055, 1.055);
$value: powerNumber($value, 2);
}
@@ -115,7 +115,7 @@
}
}
@function findLightColor($color) {
@function findLightColor($color, $l: 96%) {
@if type-of($color) == "color" {
$l: 96%;
@@ -129,9 +129,8 @@
@return $background;
}
@function findDarkColor($color) {
@function findDarkColor($color, $base-l: 29%) {
@if type-of($color) == "color" {
$base-l: 29%;
$luminance: colorLuminance($color);
$luminance-delta: 0.53 - $luminance;
$target-l: round($base-l + $luminance-delta * 53);
@@ -165,3 +164,36 @@
@return lighten($color, $amount);
}
// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
// Replaces old slash division deprecated in Dart Sass
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
$quotient: 0;
$remainder: $dividend;
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
@if $divisor == 1 {
@return $dividend;
}
@while $remainder >= $divisor {
$quotient: $quotient + 1;
$remainder: $remainder - $divisor;
}
@if $remainder > 0 and $precision > 0 {
$remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
}
@return ($quotient + $remainder) * $sign;
}

View File

@@ -16,11 +16,11 @@ $white-bis: hsl(0, 0%, 98%) !default;
$white: hsl(0, 0%, 100%) !default;
$orange: hsl(14, 100%, 53%) !default;
$yellow: hsl(48, 100%, 67%) !default;
$green: hsl(141, 53%, 53%) !default;
$yellow: hsl(44, 100%, 77%) !default;
$green: hsl(153, 53%, 53%) !default;
$turquoise: hsl(171, 100%, 41%) !default;
$cyan: hsl(204, 71%, 53%) !default;
$blue: hsl(217, 71%, 53%) !default;
$cyan: hsl(207, 61%, 53%) !default;
$blue: hsl(229, 53%, 53%) !default;
$purple: hsl(271, 100%, 71%) !default;
$red: hsl(348, 86%, 61%) !default;
@@ -66,6 +66,7 @@ $widescreen-enabled: true !default;
// 1344px container + 4rem
$fullhd: 1344px + 2 * $gap !default;
$fullhd-enabled: true !default;
$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default;
// Miscellaneous
@@ -73,7 +74,7 @@ $easing: ease-out !default;
$radius-small: 2px !default;
$radius: 4px !default;
$radius-large: 6px !default;
$radius-rounded: 290486px !default;
$radius-rounded: 9999px !default;
$speed: 86ms !default;
// Flags

View File

@@ -1,4 +1,4 @@
@import "initial-variables";
@import "derived-variables";
@mixin clearfix {
&::after {
@@ -12,12 +12,12 @@
position: absolute;
@if $height != 0 {
left: calc(50% - (#{$width} / 2));
top: calc(50% - (#{$height} / 2));
left: calc(50% - (#{$width} * 0.5));
top: calc(50% - (#{$height} * 0.5));
}
@else {
left: calc(50% - (#{$width} / 2));
top: calc(50% - (#{$width} / 2));
left: calc(50% - (#{$width} * 0.5));
top: calc(50% - (#{$width} * 0.5));
}
}
@@ -32,6 +32,11 @@
}
@mixin hamburger($dimensions) {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
cursor: pointer;
display: block;
height: $dimensions;
@@ -99,6 +104,19 @@
}
}
@mixin reset {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
color: currentColor;
font-family: inherit;
font-size: 1em;
margin: 0;
padding: 0;
}
// Responsiveness
@mixin from($device) {
@@ -113,6 +131,12 @@
}
}
@mixin between($from, $until) {
@media screen and (min-width: $from) and (max-width: $until - 1px) {
@content;
}
}
@mixin mobile {
@media screen and (max-width: $tablet - 1px) {
@content;
@@ -191,6 +215,31 @@
}
}
@mixin breakpoint($name) {
$breakpoint: map-get($breakpoints, $name);
@if $breakpoint {
$from: map-get($breakpoint, "from");
$until: map-get($breakpoint, "until");
@if $from and $until {
@include between($from, $until) {
@content;
}
}
@else if $from {
@include from($from) {
@content;
}
}
@else if $until {
@include until($until) {
@content;
}
}
}
}
@mixin ltr {
@if not $rtl {
@content;
@@ -237,10 +286,6 @@
user-select: none;
}
%unselectable {
@include unselectable;
}
@mixin arrow($color: transparent) {
border: 3px solid $color;
border-radius: 2px;
@@ -258,22 +303,14 @@
width: 0.625em;
}
%arrow {
@include arrow;
}
@mixin block($spacing: $block-spacing) {
&:not(:last-child) {
margin-bottom: $spacing;
}
}
%block {
@include block;
}
@mixin delete {
@extend %unselectable;
@include unselectable;
-moz-appearance: none;
-webkit-appearance: none;
@@ -356,10 +393,6 @@
}
}
%delete {
@include delete;
}
@mixin loader {
animation: spinAround 500ms infinite linear;
border: 2px solid $grey-lighter;
@@ -373,10 +406,6 @@
width: 1em;
}
%loader {
@include loader;
}
@mixin overlay($offset: 0) {
bottom: $offset;
left: $offset;
@@ -384,7 +413,3 @@
right: $offset;
top: $offset;
}
%overlay {
@include overlay;
}