buefy 1.0.0 → 1.0.2

package/src/scss/components/_datepicker.scss

@@ -0,0 +1,220 @@
+$datepicker-background-color: $dropdown-content-background-color !default;
+$datepicker-radius: $dropdown-content-radius !default;
+$datepicker-shadow: $dropdown-content-shadow !default;
+$datepicker-header-color: $grey !default;
+$datepicker-today-border: solid 1px rgba($primary, 0.5) !default;
+$datepicker-item-color: $grey-dark !default;
+$datepicker-item-disabled-color: $grey-light !default;
+$datepicker-item-hover-color: $scheme-invert !default;
+$datepicker-item-hover-background-color: $background !default;
+$datepicker-item-selected-color: $primary-invert !default;
+$datepicker-item-selected-background-color: $primary !default;
+
+.datepicker {
+    font-size: 0.875rem;
+    .dropdown,
+    .dropdown-trigger {
+        width: 100%;
+        .input[readonly] {
+            cursor: pointer;
+            box-shadow: $input-shadow;
+            &:focus,
+            &.is-focused,
+            &:active,
+            &.is-active {
+                box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color;
+            }
+        }
+    }
+    // unset opacity when dropdow is disabled
+    .dropdown {
+        &.is-disabled {
+            opacity: 1;
+        }
+    }
+    .dropdown-content {
+        background-color: $datepicker-background-color;
+        border-radius: $datepicker-radius;
+        box-shadow: $datepicker-shadow;
+    }
+    .dropdown-item {
+        font-size: inherit;
+    }
+    .datepicker-header {
+        padding-bottom: 0.875rem;
+        margin-bottom: 0.875rem;
+        border-bottom: 1px solid $grey-lighter;
+    }
+    .datepicker-footer {
+        margin-top: 0.875rem;
+        padding-top: 0.875rem;
+        border-top: 1px solid $grey-lighter;
+    }
+    .datepicker-table {
+        display: table;
+        margin: 0 auto 0 auto;
+        .datepicker-cell {
+            text-align: center;
+            vertical-align: middle;
+            display: table-cell;
+            border-radius: $radius;
+            padding: 0.5rem 0.75rem;
+        }
+        .datepicker-header {
+            display: table-header-group;
+            .datepicker-cell {
+                color: $datepicker-header-color;
+                font-weight: $weight-semibold;
+            }
+        }
+        .datepicker-body {
+            display: table-row-group;
+            .datepicker-row {
+                display: table-row;
+            }
+            .datepicker-months {
+                display: inline-flex;
+                flex-wrap: wrap;
+                flex-direction: row;
+                width: 17rem;
+                .datepicker-cell {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 33.33%;
+                    height: 2.5rem;
+                }
+            }
+            .datepicker-cell {
+                &.is-unselectable {
+                    color: $datepicker-item-disabled-color;
+                }
+                &.is-today {
+                    border: $datepicker-today-border;
+                }
+                &.is-selectable {
+                    color: $datepicker-item-color;
+                    &:hover:not(.is-selected),
+                    &:focus:not(.is-selected) {
+                        background-color: $datepicker-item-hover-background-color;
+                        color: $datepicker-item-hover-color;
+                        cursor: pointer;
+                    }
+                    &.is-within-hovered-range {
+                        &.is-first-hovered {
+                            background-color: $grey;
+                            color: $grey-lighter;
+                            border-bottom-right-radius: 0;
+                            border-top-right-radius: 0;
+                        }
+                        &.is-within-hovered {
+                            background-color: $datepicker-item-hover-background-color;
+                            color: $datepicker-item-hover-color;
+                            border-radius: 0;
+                        }
+                        &.is-last-hovered {
+                            background-color: $grey;
+                            color: $grey-lighter;
+                            border-bottom-left-radius: 0;
+                            border-top-left-radius: 0;
+                        }
+                    }
+                }
+                &.is-selected {
+                    background-color: $datepicker-item-selected-background-color;
+                    color: $datepicker-item-selected-color;
+                    &.is-first-selected {
+                        background-color: $datepicker-item-selected-background-color;
+                        color: $datepicker-item-selected-color;
+                        border-bottom-right-radius: 0;
+                        border-top-right-radius: 0;
+                    }
+                    &.is-within-selected {
+                        background-color: rgba($datepicker-item-selected-background-color, 0.5);
+                        border-radius: 0;
+                    }
+                    &.is-last-selected {
+                        background-color: $datepicker-item-selected-background-color;
+                        color: $datepicker-item-selected-color;
+                        border-bottom-left-radius: 0;
+                        border-top-left-radius: 0;
+                    }
+                }
+                &.is-nearby:not(.is-selected) {
+                    color: $grey-light;
+                }
+                &.is-week-number {
+                    cursor: default;
+                }
+            }
+            &.has-events {
+                .datepicker-cell {
+                    padding: 0.3rem 0.75rem 0.75rem;
+                    &.has-event {
+                        position: relative;
+                        .events {
+                            bottom: .425rem;
+                            display: flex;
+                            justify-content: center;
+                            left: 0;
+                            padding: 0 .35rem;
+                            position: absolute;
+                            width: 100%;
+                            .event {
+                                @each $name, $pair in $form-colors {
+                                    $color: nth($pair, 1);
+                                    &.is-#{$name} {
+                                        background-color: $color;
+                                    }
+                                }
+                            }
+                        }
+                        &.dots .event {
+                            border-radius: 50%;
+                            height: .35em;
+                            margin: 0 .1em;
+                            width: .35em;
+                        }
+                        &.bars .event {
+                            height: .25em;
+                            width: 100%;
+                        }
+                    }
+                    &.is-selected {
+                        overflow: hidden;
+                        .events .event {
+                            // Currently datepicker only uses primary coloring
+                            // Ensure indicator is visible when selected
+                            &.is-primary {
+                                background-color: lighten($primary, 15);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &.is-small {
+        @include control-small;
+    }
+    &.is-medium {
+        @include control-medium;
+    }
+    &.is-large {
+        @include control-large;
+    }
+    @media screen and (min-width: $desktop){
+        .footer-horizontal-timepicker {
+            border: none;
+            padding-left: 10px;
+            margin-left: 5px;
+            display: flex;
+        }
+        .dropdown-horizontal-timepicker {
+            display: flex;
+        }
+        .content-horizontal-timepicker {
+            border-right: 1px solid #dbdbdb;
+        }
+    }
+}

package/src/scss/components/_dialog.scss

@@ -0,0 +1,54 @@
+.dialog {
+    .modal-card {
+        max-width: 460px;
+        width: auto;
+        .modal-card-head {
+            font-size: $size-5;
+            font-weight: $weight-semibold;
+        }
+        .modal-card-body {
+            .field {
+                margin-top: 16px;
+            }
+            &.is-titleless {
+                border-top-left-radius: $card-radius;
+                border-top-right-radius: $card-radius;
+            }
+        }
+        .modal-card-foot {
+            justify-content: flex-end;
+            .button {
+                display: inline; // Fix Safari centering
+                min-width: 5em;
+                font-weight: $weight-semibold;
+            }
+        }
+        @include tablet {
+            min-width: 320px;
+        }
+    }
+    &.is-small {
+        .modal-card,
+        .input,
+        .button {
+            @include control-small;
+        }
+    }
+    &.is-medium {
+        .modal-card,
+        .input,
+        .button {
+            @include control-medium;
+        }
+    }
+    &.is-large {
+        .modal-card,
+        .input,
+        .button {
+            @include control-large;
+        }
+    }
+    &.has-custom-container {
+        position: absolute;
+    }
+}

package/src/scss/components/_dropdown.scss

@@ -0,0 +1,143 @@
+$dropdown-mobile-breakpoint: $desktop !default;
+$dropdown-background-color: rgba($scheme-invert, 0.86) !default;
+$dropdown-disabled-opacity: 0.5 !default;
+
+.dropdown {
+    & + .dropdown {
+        margin-left: 0.5em;
+    }
+    .background {
+        @include overlay;
+        position: fixed;
+        background-color: $dropdown-background-color;
+        z-index: 40;
+        cursor: pointer;
+        @media screen and (min-width: $dropdown-mobile-breakpoint) {
+            display: none;
+        }
+    }
+    &.dropdown-menu-animation {
+        .dropdown-menu {
+            display: block;
+        }
+    }
+    .dropdown-menu {
+        .dropdown-item {
+            &.is-disabled {
+                cursor: not-allowed;
+                &:hover {
+                    background: inherit;
+                    color: inherit;
+                }
+            }
+        }
+        .has-link a {
+            @extend .dropdown-item;
+            padding-right: 3rem;
+            white-space: nowrap;
+        }
+    }
+    &.is-hoverable:not(.is-active) {
+        .dropdown-menu {
+            display: none;
+        }
+    }
+    &.is-hoverable:not(.is-touch-enabled) {
+        &:hover {
+            .dropdown-menu {
+                display: inherit;
+            }
+        }
+    }
+    &.is-expanded {
+        width: 100%;
+        .dropdown-trigger {
+            width: 100%;
+        }
+        .dropdown-menu {
+            width: 100%;
+        }
+        &.is-mobile-modal {
+            .dropdown-menu {
+                max-width: 100%;
+            }
+        }
+    }
+    &:not(.is-disabled) {
+        .dropdown-menu {
+            .dropdown-item {
+                &.is-disabled {
+                    opacity: $dropdown-disabled-opacity;
+                }
+            }
+        }
+    }
+    .navbar-item {
+        height: 100%;
+    }
+    &.is-disabled {
+        opacity: $dropdown-disabled-opacity;
+        cursor: not-allowed;
+        .dropdown-trigger {
+            pointer-events: none;
+        }
+    }
+    &.is-inline {
+        .dropdown-menu {
+            position: static;
+            display: inline-block;
+            padding: 0;
+        }
+    }
+    &.is-top-right {
+        .dropdown-menu {
+            top: auto;
+            bottom: 100%;
+        }
+    }
+    &.is-top-left {
+        .dropdown-menu {
+            top: auto;
+            bottom: 100%;
+            right: 0;
+            left: auto;
+        }
+    }
+    &.is-bottom-left {
+        .dropdown-menu {
+            right: 0;
+            left: auto;
+        }
+    }
+    @media screen and (max-width: $dropdown-mobile-breakpoint - 1px) {
+        /* prevents modal on hover unless it is on touch devices */
+        &.is-mobile-modal:not(.is-hoverable),
+        &.is-mobile-modal.is-touch-enabled {
+            > .dropdown-menu {
+                position: fixed !important;
+                width: calc(100vw - 40px);
+                max-width: 460px;
+                max-height: calc(100vh - 120px);
+                top: 25% !important;
+                left: 50% !important;
+                bottom: auto !important;
+                right: auto !important;
+                transform: translate3d(-50%, -25%, 0);
+                white-space: normal;
+                overflow-y: auto;
+                z-index: 50 !important;
+                > .dropdown-content {
+                    > .dropdown-item, > .has-link a {
+                        padding: 1rem 1.5rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+html.is-clipped-touch {
+    @include touch {
+        overflow: hidden !important;
+    }
+}