buefy 1.0.0 → 1.0.2

package/src/scss/components/_form.scss

@@ -0,0 +1,309 @@
+$floating-in-height: 3.25em !default;
+
+.field {
+    &.is-grouped {
+        .field {
+            flex-shrink: 0;
+            &:not(:last-child) {
+                margin-right: 0.75rem;
+            }
+            &.is-expanded {
+                flex-grow: 1;
+                flex-shrink: 1;
+            }
+        }
+    }
+    // Nested control addons (for Autocomplete and Datepicker)
+    &.has-addons .control {
+        &:first-child .control {
+            .button,
+            .input,
+            .select select {
+                border-bottom-left-radius: $input-radius;
+                border-top-left-radius: $input-radius;
+            }
+        }
+        &:last-child .control {
+            .button,
+            .input,
+            .select select {
+                border-bottom-right-radius: $input-radius;
+                border-top-right-radius: $input-radius;
+            }
+        }
+        .control {
+            .button,
+            .input,
+            .select select {
+                border-radius: 0
+            }
+        }
+    }
+    // Fix for number input with addons
+    &.has-addons {
+        .b-numberinput {
+            &:not(:first-child) {
+                .control:first-child {
+                    .button,
+                    .input,
+                    .select select {
+                        border-bottom-left-radius: 0;
+                        border-top-left-radius: 0;
+                    }
+                }
+            }
+            &:not(:last-child) {
+                .control:last-child {
+                    .button,
+                    .input,
+                    .select select {
+                        border-bottom-right-radius: 0;
+                        border-top-right-radius: 0;
+                    }
+                }
+            }
+        }
+        &.b-numberinput {
+            .control {
+                margin-right: unset;
+            }
+        }
+    }
+}
+
+.field {
+    &.is-floating-label,
+    &.is-floating-in-label {
+        position: relative;
+
+        .label {
+            position: absolute;
+            left: 1em;
+            font-size: calc(#{$size-normal} * 0.75);
+            background-color: transparent;
+            z-index: 5;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: calc(100% - 2em);
+            overflow: hidden;
+
+            &.is-small {
+                font-size: calc(#{$size-small} * 0.75);
+            }
+            &.is-medium {
+                font-size: calc(#{$size-medium} * 0.75);
+            }
+            &.is-large {
+                font-size: calc(#{$size-large} * 0.75);
+            }
+        }
+        .taginput .counter {
+            float: none;
+            text-align: right;
+        }
+
+        &.has-addons {
+            > .label {
+                + .control {
+                    .button,
+                    .input,
+                    .select select {
+                        border-bottom-left-radius: $input-radius;
+                        border-top-left-radius: $input-radius;
+                    }
+                }
+            }
+        }
+    }
+
+    &.is-floating-label {
+        .label {
+            top: -0.775em;
+            padding-left: 0.125em;
+            padding-right: 0.125em;
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                top: 0.775em;
+                left: 0;
+                right: 0;
+                height: 0.375em;
+                background-color: $input-background-color;
+                z-index: -1;
+            }
+        }
+        .input,
+        .textarea,
+        .select
+        select {
+            &:focus {
+                box-shadow: none;
+            }
+        }
+        .taginput .taginput-container {
+            padding-top: 0.475em;
+            &.is-focused {
+                box-shadow: none;
+            }
+        }
+    }
+    &.is-floating-in-label {
+        > .label {
+            top: 0.25em;
+
+            + .control {
+                &.datepicker, &.timepicker {
+                    .input {
+                        padding-top: calc(#{$floating-in-height} * 0.5 - (#{$size-large} * 0.75) * 0.5);
+                        padding-bottom: 1px;
+                        height: $floating-in-height;
+                    }
+                }
+                &:not(.datepicker):not(.timepicker):not(.taginput) {
+                    .input,
+                    .textarea,
+                    select {
+                        padding-top: calc(#{$floating-in-height} * 0.5 - (#{$size-large} * 0.75) * 0.5);
+                        padding-bottom: 1px;
+                        height: $floating-in-height;
+                    }
+                    .select:not(multiple) {
+                        height: $floating-in-height;
+                        &.is-loading {
+                            &::after {
+                                margin-top: calc(#{$floating-in-height} * 0.5 - (#{$size-large} * 0.75) * 0.5);
+                            }
+                        }
+                        &::after {
+                            margin-top: 1px;
+                        }
+                    }
+                }
+                &.taginput {
+                    .taginput-container {
+                        // 0.275em - 1px _taginput.scss
+                        padding-top: calc(#{$floating-in-height} * 0.5 - (#{$size-large} * 0.75) * 0.5 + (0.275em - 1px));
+                    }
+                }
+                &:not(.taginput) {
+                    .is-left.icon,
+                    .is-right.icon {
+                        height: $floating-in-height;
+                    }
+                    .is-left.icon {
+                        padding-top: calc(#{$floating-in-height} * 0.5 - (#{$size-large} * 0.75) * 0.5);
+                    }
+                }
+                &.is-loading::after {
+                    margin-top: calc(#{$floating-in-height} * 0.5 - (#{$size-large} * 0.75) * 0.5);
+                }
+            }
+
+            // With addons or grouped
+            + .field-body {
+                > .is-grouped, > .has-addons {
+                    .control {
+                        .input,
+                        .textarea,
+                        select {
+                            padding-top: calc(#{$floating-in-height} * 0.5 - (#{$size-large} * 0.75) * 0.5);
+                            padding-bottom: 1px;
+                        }
+                        .input,
+                        .textarea,
+                        select,
+                        .button {
+                            height: $floating-in-height;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.has-numberinput {
+            .b-numberinput {
+                .control {
+                    .input,
+                    .button {
+                        height: $floating-in-height;
+                    }
+                }
+            }
+        }
+    }
+    &.is-floating-label, &.is-floating-in-label {
+        &.has-numberinput {
+            .label {
+                margin-left: calc(#{$size-normal} * 3);
+            }
+            &.has-numberinput-is-small {
+                .label {
+                    margin-left: calc(#{$size-small} * 3);
+                }
+            }
+            &.has-numberinput-is-medium {
+                .label {
+                    margin-left: calc(#{$size-medium} * 3);
+                }
+            }
+            &.has-numberinput-is-large {
+                .label {
+                    margin-left: calc(#{$size-large} * 3);
+                }
+            }
+        }
+        &.has-numberinput-compact {
+            .label {
+                margin-left: calc(#{$size-normal} * 2.25);
+            }
+            &.has-numberinput-is-small {
+                .label {
+                    margin-left: calc(#{$size-small} * 2.25);
+                }
+            }
+            &.has-numberinput-is-medium {
+                .label {
+                    margin-left: calc(#{$size-medium} * 2.25);
+                }
+            }
+            &.has-numberinput-is-large {
+                .label {
+                    margin-left: calc(#{$size-large} * 2.25);
+                }
+            }
+        }
+    }
+    &.is-grouped-right, &.has-addons-right {
+        &.is-floating-in-label {
+            .label {
+                position: relative;
+                left: calc(3.25em + 2em);
+            }
+        }
+        &.is-floating-label {
+            .label {
+                position: relative;
+                left: calc(3.25em + 2em);
+            }
+        }
+    }
+}
+
+.control {
+    .help.counter {
+        float: right;
+        margin-left: 0.5em;
+    }
+    .icon {
+        &.is-clickable {
+            pointer-events: auto;
+            cursor: pointer;
+        }
+    }
+    // fix Bulma 0.8.2
+    &.is-loading::after {
+        top: calc(50% - (1em * 0.5));
+        right: calc((2.5em * 0.5) - .5em);
+    }
+}

package/src/scss/components/_icon.scss

@@ -0,0 +1,16 @@
+$icon-svg-width: 100% !default;
+$icon-svg-height: 100% !default;
+
+.icon {
+    @include unselectable;
+    cursor: inherit;
+    svg {
+        background-color: transparent;
+        fill: currentColor;
+        stroke-width: 0;
+        stroke: currentColor;
+        pointer-events: none;
+        width: $icon-svg-width;
+        height: $icon-svg-height;
+    }
+}

package/src/scss/components/_image.scss

@@ -0,0 +1,20 @@
+$image-placeholder-blur-enabled: true !default;
+$image-placeholder-blur: 10px !default;
+
+.b-image-wrapper {
+    > img {
+        object-fit: cover;
+
+        &.has-ratio,
+        &.placeholder {
+            @extend %overlay;
+            height: 100%;
+            width: 100%;
+        }
+        @if $image-placeholder-blur-enabled {
+            &.placeholder {
+                filter: blur($image-placeholder-blur);
+            }
+        }
+    }
+}

package/src/scss/components/_loading.scss

@@ -0,0 +1,45 @@
+$loading-background-legacy: #7f7f7f !default;
+$loading-background: rgba(255,255,255,0.5) !default;
+$loading-icon-size: 3em !default;
+$loading-full-page-icon-size: 5em !default;
+
+.loading-overlay {
+    @include overlay;
+    align-items: center;
+    display: none;
+    justify-content: center;
+    overflow: hidden;
+    z-index: 29;
+    &.is-active {
+        display: flex
+    }
+    &.is-full-page {
+        position: fixed;
+        z-index: 999;
+        .loading-icon {
+            &:after {
+                top: calc(50% - #{$loading-full-page-icon-size * 0.5});
+                left: calc(50% - #{$loading-full-page-icon-size * 0.5});
+                width: $loading-full-page-icon-size;
+                height: $loading-full-page-icon-size;
+            }
+        }
+    }
+    .loading-background {
+        @include overlay;
+        background:$loading-background-legacy;
+        background:$loading-background;
+    }
+    .loading-icon {
+        position: relative;
+        &:after {
+            @include loader;
+            position: absolute;
+            top: calc(50% - #{$loading-icon-size * 0.5});
+            left: calc(50% - #{$loading-icon-size * 0.5});
+            width: $loading-icon-size;
+            height: $loading-icon-size;
+            border-width: 0.25em;
+        }
+    }
+}

package/src/scss/components/_menu.scss

@@ -0,0 +1,11 @@
+.menu {
+    .menu-list {
+        li > a {
+            &.is-disabled {
+                pointer-events: none;
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
+        }
+    }
+}

package/src/scss/components/_message.scss

@@ -0,0 +1,16 @@
+.message,
+.notification {
+    .media {
+        padding-top: 0;
+        border: 0;
+    }
+    .auto-close-progress {
+        progress {
+            border-top-left-radius: 0!important;
+            border-top-right-radius: 0!important;
+            border-bottom-left-radius: 0!important;
+            border-bottom-right-radius: 0!important;
+            height: 10px!important;
+        }
+    }
+}

package/src/scss/components/_modal.scss

@@ -0,0 +1,37 @@
+.modal {
+    &.is-full-screen {
+        > .animation-content,
+        > .animation-content > .modal-card {
+            width: 100%;
+            height: 100%;
+            max-height: 100vh;
+            margin: 0;
+            background-color: $background;
+        }
+    }
+    .animation-content {
+        margin: 0 20px;
+        .modal-card {
+            margin: 0;
+        }
+        @include mobile {
+            width: 100%;
+        }
+    }
+    .modal-content {
+        width: 100%;
+    }
+    .modal-close {
+        @include until($modal-breakpoint) {
+            /* keep modal-close visible when the contents fill the screen */
+            background-color: color-mix(in hsl, $modal-background-background-color 10%, transparent);
+            &:hover,
+            :focus {
+                background-color: color-mix(in hsl, $modal-background-background-color 20%, transparent);
+            }
+            &:active {
+                background-color: color-mix(in hsl, $modal-background-background-color 30%, transparent);
+            }
+        }
+    }
+}

package/src/scss/components/_navbar.scss

@@ -0,0 +1,22 @@
+.navbar {
+    &.has-navbar-centered {
+        .navbar-start {
+            justify-content: center;
+            margin-left: auto;
+        }
+
+        .navbar-end {
+            margin-left: 0;
+        }
+    }
+
+    .navbar-dropdown.is-boxed {
+        visibility: hidden;
+        transition-property: opacity, visibility, transform;
+    }
+
+    .navbar-item.has-dropdown.is-active .is-boxed,
+    .navbar-item.has-dropdown.is-hoverable:hover .is-boxed {
+        visibility: visible;
+    }
+}

package/src/scss/components/_notices.scss

@@ -0,0 +1,144 @@
+$notices-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
+
+$toast-border-radius: 2em !default;
+$toast-opacity: 0.92 !default;
+$toast-box-shadow: $notices-box-shadow !default;
+
+$snackbar-background-color: $dark !default;
+$snackbar-color: $dark-invert !default;
+$snackbar-border-radius: $radius !default;
+$snackbar-button-text-transform: uppercase !default;
+$snackbar-box-shadow: $notices-box-shadow !default;
+
+.notices {
+    position: fixed;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 2em;
+    overflow: hidden;
+    z-index: 1000;
+    pointer-events: none;
+    .toast {
+        display: inline-flex;
+        animation-duration: $speed-slow;
+        margin: 0.5em 0;
+        text-align: center;
+        box-shadow: $toast-box-shadow;
+        border-radius: $toast-border-radius;
+        padding: 0.75em 1.5em;
+        pointer-events: auto;
+        opacity: $toast-opacity;
+        @each $name, $pair in $notification-colors {
+            $color: nth($pair, 1);
+            $color-invert: nth($pair, 2);
+            &.is-#{$name} {
+                color: $color-invert;
+                background: $color;
+            }
+        }
+    }
+    .snackbar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-around;
+        animation-duration: $speed-slow;
+        margin: 0.5em 0;
+        box-shadow: $snackbar-box-shadow;
+        border-radius: $snackbar-border-radius;
+        pointer-events: auto;
+        background: $snackbar-background-color;
+        color: $snackbar-color;
+        min-height: 3em;
+        .text {
+            padding: 0.5em 1em;
+        }
+        .action {
+            margin-left: auto;
+            padding: 0.5em;
+            padding-left: 0;
+            .button {
+                font-weight: $weight-semibold;
+                text-transform: $snackbar-button-text-transform;
+                background: $snackbar-background-color;
+                border: transparent;
+            }
+            .button:hover {
+                background: darken($snackbar-background-color, 5%);
+            }
+            .button:active {
+                background: darken($snackbar-background-color, 5%);
+            }
+            @each $name, $pair in $notification-colors {
+                $color: nth($pair, 1);
+                &.is-#{$name} {
+                    .button {
+                        color: $color;
+                    }
+                }
+            }
+        }
+        .action.is-cancel {
+            padding-right: 0;
+        }
+        @include mobile {
+            width: 100%;
+            margin: 0;
+            border-radius: 0;
+        }
+        @include tablet {
+            min-width: 350px;
+            max-width: 600px;
+            overflow: hidden;
+        }
+    }
+    .notification {
+        pointer-events: auto;
+        max-width: 600px;
+    }
+
+    .toast,
+    .snackbar,
+    .notification {
+        // Modifiers
+        &.is-top, &.is-bottom {
+            align-self: center;
+        }
+        &.is-top-right, &.is-bottom-right {
+            align-self: flex-end;
+        }
+        &.is-top-left, &.is-bottom-left {
+            align-self: flex-start;
+        }
+        &.is-toast {
+            opacity: $toast-opacity;
+        }
+    }
+
+    // Modifiers
+    &.is-top {
+        flex-direction: column;
+    }
+    &.is-bottom {
+        flex-direction: column-reverse;
+
+        // Since the columns are reversed, we need to reverse the margin logic from
+        // :not(:last-child) to :not(:first-child)
+        .notification {
+            margin-bottom: 0;
+            &:not(:first-child) {
+                margin-bottom: 1.5rem;
+            }
+        }
+    }
+    &.has-custom-container {
+        position: absolute;
+    }
+
+    @include mobile {
+        padding: 0;
+        position: fixed !important;
+    }
+}

package/src/scss/components/_notification.scss

@@ -0,0 +1,8 @@
+.notification {
+	.auto-close-progress.progress-wrapper {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+	}
+}

package/src/scss/components/_numberinput.scss

@@ -0,0 +1,33 @@
+.b-numberinput {
+    &.field {
+        margin-bottom: 0;
+        &.is-grouped {
+            div.control {
+                flex-grow: 1;
+                flex-shrink: 1;
+            }
+        }
+        &.has-addons {
+            &.is-expanded {
+                flex-grow: 1;
+                flex-shrink: 1;
+            }
+        }
+    }
+    input[type=number]::-webkit-inner-spin-button,
+    input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+    }
+    input[type=number] {
+        -moz-appearance:textfield;
+    }
+    input[type=number] {
+        text-align: center;
+    }
+    .button {
+        &.is-rounded {
+            padding-left: 1em;
+            padding-right: 1em;
+        }
+    }
+}