node_modules updated, buefy add to lib folder
This commit is contained in:
+4
@@ -0,0 +1,4 @@
|
||||
@import "~bulma/sass/utilities/initial-variables";
|
||||
@import "utils/_all";
|
||||
@import "~bulma/bulma";
|
||||
@import "buefy";
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@import "utils/_all";
|
||||
|
||||
@import "components/_autocomplete";
|
||||
@import "components/_checkbox";
|
||||
@import "components/_clockpicker";
|
||||
@import "components/_collapse";
|
||||
@import "components/_datepicker";
|
||||
@import "components/_dialog";
|
||||
@import "components/_dropdown";
|
||||
@import "components/_form";
|
||||
@import "components/_icon";
|
||||
@import "components/_loading";
|
||||
@import "components/_message";
|
||||
@import "components/_modal";
|
||||
@import "components/_notices";
|
||||
@import "components/_numberinput";
|
||||
@import "components/_pagination";
|
||||
@import "components/_radio";
|
||||
@import "components/_select";
|
||||
@import "components/_switch";
|
||||
@import "components/_table";
|
||||
@import "components/_tabs";
|
||||
@import "components/_tag";
|
||||
@import "components/_taginput";
|
||||
@import "components/_timepicker";
|
||||
@import "components/_tooltip";
|
||||
@import "components/_upload";
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
&.is-opened-top {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
.dropdown-content {
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
.dropdown-item {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.is-hovered {
|
||||
background: $dropdown-item-hover-background-color;
|
||||
color: $dropdown-item-hover-color;
|
||||
}
|
||||
&.is-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
&.is-medium{
|
||||
@include control-medium;
|
||||
}
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
$checkbox-active-background-color: $primary !default;
|
||||
$checkbox-checkmark-color: $primary-invert !default;
|
||||
|
||||
.b-checkbox {
|
||||
&.checkbox {
|
||||
outline: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@include unselectable;
|
||||
& + .checkbox {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
+ .check {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
flex-shrink: 0;
|
||||
border-radius: $radius;
|
||||
border: 2px solid $grey;
|
||||
transition: background $speed-slow $easing;
|
||||
}
|
||||
&:checked + .check {
|
||||
background: $checkbox-active-background-color url(checkmark($checkbox-checkmark-color)) no-repeat center center;
|
||||
border-color: $checkbox-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
&.is-#{$name} {
|
||||
background: $color url(checkmark($color-invert)) no-repeat center center;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:indeterminate + .check {
|
||||
background: $checkbox-active-background-color url(indeterminate($checkbox-checkmark-color)) no-repeat center center;
|
||||
border-color: $checkbox-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
&.is-#{$name} {
|
||||
background: $color url(indeterminate($color-invert)) no-repeat center center;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
+ .check {
|
||||
box-shadow: 0 0 0.5em rgba($grey, 0.8);
|
||||
}
|
||||
&:checked + .check {
|
||||
box-shadow: 0 0 0.5em rgba($checkbox-active-background-color, 0.8);
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.control-label {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:hover {
|
||||
input[type=checkbox] + .check {
|
||||
border-color: $checkbox-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
&.is-medium{
|
||||
@include control-medium;
|
||||
}
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
+265
@@ -0,0 +1,265 @@
|
||||
|
||||
.b-clockpicker {
|
||||
// Clockpicker variables defined here as exact numbers
|
||||
// must be known for use in the Vue component for calculations
|
||||
// to determine number and hand positioning/size.
|
||||
$transition-swing: cubic-bezier(.25,.8,.50,1);
|
||||
|
||||
$time-font-size: 60px;
|
||||
$period-font-size: 16px;
|
||||
$number-font-size: 18px;
|
||||
|
||||
$indicator-size: 40px;
|
||||
$hand-endpoint-size: 12px;
|
||||
|
||||
$padding-outer: 12px;
|
||||
$padding-inner: 5px;
|
||||
|
||||
// mixins for supporting all $colors defined in Bulma/custom
|
||||
@mixin b-clockpicker-colors($name, $pair) {
|
||||
&.is-#{$name} {
|
||||
@include b-clockpicker-colors-set(nth($pair, 1), nth($pair, 2))
|
||||
}
|
||||
}
|
||||
|
||||
@mixin b-clockpicker-colors-set($color, $inverse) {
|
||||
.card-header {
|
||||
background-color: $color;
|
||||
color: $inverse;
|
||||
}
|
||||
.b-clockpicker-face {
|
||||
&:after {
|
||||
background-color: $color;
|
||||
}
|
||||
&-hand {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
&-number.active {
|
||||
background-color: $color;
|
||||
color: $inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b-clockpicker-colors-set($primary, $primary-invert);
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
@include b-clockpicker-colors($name, $pair)
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 0;
|
||||
}
|
||||
.dropdown,
|
||||
.dropdown-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown-item {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
.dropdown-content {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: $padding-outer;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-period {
|
||||
.b-clockpicker-btn {
|
||||
font-size: $period-font-size;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&-time {
|
||||
span {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
line-height: 1;
|
||||
justify-content: flex-end;
|
||||
color: inherit;
|
||||
|
||||
// time display in the title for inline display
|
||||
.b-clockpicker-time {
|
||||
white-space: nowrap;
|
||||
span {
|
||||
height: $time-font-size;
|
||||
font-size: $time-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
// am/pm in the title for inline display
|
||||
.b-clockpicker-period {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 8px 0 6px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
transition: 0.9s $transition-swing;
|
||||
|
||||
.b-clockpicker-btn {
|
||||
padding: 0 8px;
|
||||
border-radius: $radius-rounded;
|
||||
margin-bottom: 2px;
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.b-clockpicker-period {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.b-clockpicker-time {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
font-size: $period-font-size;
|
||||
|
||||
}
|
||||
|
||||
.b-clockpicker-face {
|
||||
// Outer border circle of clock
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background-color: $grey-lighter;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&:after {
|
||||
// Dot in center
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: $hand-endpoint-size;
|
||||
height: $hand-endpoint-size;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&-outer-ring {
|
||||
user-select: none;
|
||||
height: calc(100% - #{$indicator-size + ($padding-inner * 2)});
|
||||
width: calc(100% - #{$indicator-size + ($padding-inner * 2)});
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Clock face number indicators
|
||||
&-number {
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
font-size: $number-font-size;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: $indicator-size;
|
||||
height: $indicator-size;
|
||||
left: calc(50% - #{$indicator-size} / 2);
|
||||
top: calc(50% - #{$indicator-size} / 2);
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
height: $indicator-size;
|
||||
width: $indicator-size;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: .25;
|
||||
}
|
||||
}
|
||||
|
||||
&-hand {
|
||||
height: calc(50% - #{$hand-endpoint-size / 2});
|
||||
width: 2px;
|
||||
bottom: 50%;
|
||||
left: calc(50% - 1px);
|
||||
|
||||
transform-origin: center bottom;
|
||||
position: absolute;
|
||||
will-change: transform;
|
||||
z-index: 1;
|
||||
// transition: .3s $transition-swing;
|
||||
|
||||
&:before {
|
||||
background: transparent;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-radius: 100%;
|
||||
width: $hand-endpoint-size;
|
||||
height: $hand-endpoint-size;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -($hand-endpoint-size) / 2;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
display: block;
|
||||
padding: $padding-outer;
|
||||
}
|
||||
// Sizes
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
&.is-medium {
|
||||
@include control-medium;
|
||||
}
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
.collapse {
|
||||
.collapse-trigger {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
}
|
||||
.collapse-content {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
.datepicker {
|
||||
font-size: 0.875rem;
|
||||
.dropdown,
|
||||
.dropdown-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown-item {
|
||||
font-size: inherit;
|
||||
}
|
||||
.datepicker-header {
|
||||
padding-bottom: 0.875rem;
|
||||
margin-bottom: 0.875rem;
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
}
|
||||
.datepicker-content {
|
||||
height: 16.25rem;
|
||||
}
|
||||
.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: $grey;
|
||||
font-weight: $weight-semibold;
|
||||
}
|
||||
}
|
||||
.datepicker-body {
|
||||
display: table-row-group;
|
||||
.datepicker-row {
|
||||
display: table-row;
|
||||
.datepicker-cell {
|
||||
&.is-unselectable {
|
||||
color: $grey-light;
|
||||
}
|
||||
&.is-today {
|
||||
border: solid 1px rgba($primary, 0.5);
|
||||
}
|
||||
&.is-selectable {
|
||||
color: $grey-dark;
|
||||
&:hover:not(.is-selected),
|
||||
&:focus:not(.is-selected) {
|
||||
background-color: $background;
|
||||
color: $black;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.is-selected {
|
||||
background-color: $primary;
|
||||
color: $primary-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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 $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;
|
||||
}
|
||||
@include tablet-only {
|
||||
.datepicker-content {
|
||||
height: 19.75rem;
|
||||
}
|
||||
.datepicker-table {
|
||||
.datepicker-cell {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mobile {
|
||||
.datepicker-content {
|
||||
height: 12.75rem;
|
||||
}
|
||||
.datepicker-table {
|
||||
.datepicker-cell {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
.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: $radius-large;
|
||||
border-top-right-radius: $radius-large;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
.dropdown {
|
||||
& + .dropdown {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.background {
|
||||
@include overlay;
|
||||
position: fixed;
|
||||
background-color: rgba($black, 0.86);
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-disabled) {
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
&.is-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-item {
|
||||
height: 100%;
|
||||
}
|
||||
&.is-disabled {
|
||||
opacity: 0.5;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@include touch {
|
||||
&.is-mobile-modal {
|
||||
.dropdown-menu {
|
||||
position: fixed;
|
||||
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;
|
||||
.dropdown-item {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
.label {
|
||||
font-weight: $weight-semibold
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
.help.counter {
|
||||
float: right;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.icon {
|
||||
&.is-clickable {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
.icon {
|
||||
@include unselectable;
|
||||
cursor: inherit;
|
||||
svg {
|
||||
background-color: transparent;
|
||||
fill: currentColor;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
pointer-events: none;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
|
||||
.loading-overlay {
|
||||
@include overlay;
|
||||
align-items: center;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
&.is-active {
|
||||
display: flex
|
||||
}
|
||||
&.is-full-page {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
.loading-icon {
|
||||
&:after {
|
||||
top: calc(50% - 2.5em);
|
||||
left: calc(50% - 2.5em);
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.loading-background {
|
||||
@include overlay;
|
||||
background:#7f7f7f;
|
||||
background:rgba(255,255,255,0.5);
|
||||
}
|
||||
.loading-icon {
|
||||
position: relative;
|
||||
&:after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 1.5em);
|
||||
left: calc(50% - 1.5em);
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
.message,
|
||||
.notification {
|
||||
.media {
|
||||
padding-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for Bulma 0.6.1
|
||||
.notification > .delete {
|
||||
right: 0.5rem !important;
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
.modal {
|
||||
.animation-content {
|
||||
margin: 0 20px;
|
||||
.modal-card {
|
||||
margin: 0;
|
||||
}
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
$snackbar-background-color: $dark !default;
|
||||
$snackbar-color: $dark-invert !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: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 2em;
|
||||
padding: 0.75em 1.5em;
|
||||
pointer-events: auto;
|
||||
opacity: 0.92;
|
||||
@each $name, $pair in $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: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
border-radius: $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: uppercase;
|
||||
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 $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
.button {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
@include tablet {
|
||||
min-width: 350px;
|
||||
max-width: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.notification {
|
||||
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: 0.92;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.is-top {
|
||||
flex-direction: column;
|
||||
}
|
||||
&.is-bottom {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
&.has-custom-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 0;
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
.b-numberinput {
|
||||
&.field {
|
||||
margin-bottom: 0;
|
||||
&.is-grouped {
|
||||
@include mobile {
|
||||
div.control {
|
||||
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: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
.pagination {
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
&.is-simple {
|
||||
justify-content: normal;
|
||||
&.is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
&.is-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.is-current {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
$radio-active-background-color: $primary !default;
|
||||
|
||||
.b-radio {
|
||||
&.radio {
|
||||
outline: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@include unselectable;
|
||||
& + .radio {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
input[type=radio] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
+ .check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border: 2px solid $grey;
|
||||
border-radius: 50%;
|
||||
transition: background $speed-slow $easing;
|
||||
&:before {
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
width: 0.625em;
|
||||
height: 0.625em;
|
||||
background: $radio-active-background-color;
|
||||
transform: scale(0);
|
||||
transition: transform $speed-slow $easing;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name}:before {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + .check {
|
||||
border-color: $radio-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.control-label {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:hover {
|
||||
input[type=radio] + .check {
|
||||
border-color: $radio-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
input[type=radio] + .check {
|
||||
box-shadow: 0 0 0.5em rgba($grey, 0.8);
|
||||
}
|
||||
input[type=radio]:checked + .check {
|
||||
box-shadow: 0 0 0.5em rgba($radio-active-background-color, 0.8);
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
&.is-medium{
|
||||
@include control-medium;
|
||||
}
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
.select {
|
||||
select {
|
||||
padding-right: 2.5em;
|
||||
option {
|
||||
color: $grey-dark;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
option:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
optgroup {
|
||||
color: $grey-light;
|
||||
font-weight: $weight-normal;
|
||||
font-style: normal;
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
}
|
||||
&.is-empty select {
|
||||
color: rgba($grey, 0.7);
|
||||
}
|
||||
|
||||
}
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
$switch-width-number: 2.75;
|
||||
$switch-width: $switch-width-number * 1em;
|
||||
$switch-padding: 0.2em;
|
||||
|
||||
$switch-active-background-color: $primary !default;
|
||||
|
||||
.switch {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@include unselectable;
|
||||
& + .switch {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
+ .check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
width: $switch-width;
|
||||
height: #{$switch-width / 2 + $switch-padding};
|
||||
padding: $switch-padding;
|
||||
background: $grey-light;
|
||||
border-radius: 1em;
|
||||
transition: background $speed-slow $easing;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-radius: 1em;
|
||||
width: #{($switch-width - $switch-padding * 2) / 2};
|
||||
height: #{($switch-width - $switch-padding * 2) / 2};
|
||||
background: $background;
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
|
||||
transition: transform $speed-slow $easing, width $speed-slow $easing;
|
||||
will-change: transform;
|
||||
}
|
||||
&.is-elastic:before {
|
||||
width: 1.75em;
|
||||
}
|
||||
}
|
||||
&:checked + .check {
|
||||
background: $switch-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
&.is-elastic:before {
|
||||
// Might be a little offset if base font is not 16px
|
||||
transform: translate3d(percentage(16 / ($switch-width-number * 16)), 0, 0);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
+ .check {
|
||||
box-shadow: 0 0 0.5em rgba($grey, 0.6);
|
||||
}
|
||||
&:checked + .check {
|
||||
box-shadow: 0 0 0.5em rgba($switch-active-background-color, 0.8);
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.control-label {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
&:hover {
|
||||
input[type=checkbox] + .check {
|
||||
background: rgba($grey-light, 0.9);
|
||||
}
|
||||
input[type=checkbox]:checked + .check {
|
||||
background: rgba($switch-active-background-color, 0.9);
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
background: rgba($color, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
&.is-medium{
|
||||
@include control-medium;
|
||||
}
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
.table-wrapper {
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@include touch {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.b-table {
|
||||
transition: opacity $speed $easing;
|
||||
|
||||
.table-mobile-sort {
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: transform $speed-slow $easing, opacity $speed $easing;
|
||||
&.is-desc {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.is-expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $radius;
|
||||
border-collapse: separate;
|
||||
th {
|
||||
font-weight: $weight-semibold;
|
||||
.th-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
&.is-numeric {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
.icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
&.is-centered {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.is-current-sort {
|
||||
border-color: $grey;
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
&.is-sortable:hover {
|
||||
border-color: $grey;
|
||||
}
|
||||
&.is-sortable,
|
||||
&.is-sortable .th-wrap {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
&.is-selected {
|
||||
.checkbox input {
|
||||
&:checked + .check {
|
||||
background: $table-row-active-color url(checkmark($table-row-active-background-color)) no-repeat center center;
|
||||
}
|
||||
+ .check {
|
||||
border-color: $table-row-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-empty:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.chevron-cell {
|
||||
vertical-align:middle
|
||||
}
|
||||
.checkbox-cell {
|
||||
width: 40px;
|
||||
.checkbox {
|
||||
vertical-align: middle;
|
||||
.check {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
tr.detail {
|
||||
box-shadow: inset 0 1px 3px $grey-lighter;
|
||||
background: $white-bis;
|
||||
.detail-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
border-color: $link;
|
||||
box-shadow: 0 0 0 0.125em rgba($link, 0.25);
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.is-bordered {
|
||||
th.is-current-sort,
|
||||
th.is-sortable:hover {
|
||||
border-color: $grey-lighter;
|
||||
background: $background;
|
||||
}
|
||||
}
|
||||
&.has-mobile-cards {
|
||||
@include mobile {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
tfoot {
|
||||
th {
|
||||
border: 0; // Disable is-bordered
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
// Card style — Cannot extend inside media query
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1);
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
td {
|
||||
border: 0; // Disable is-bordered
|
||||
display: inherit;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
// Disables is-*
|
||||
&:not([class*="is-"]) {
|
||||
background: inherit;
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
&.detail {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
tr:not(.detail):not(.is-empty):not(.table-footer) {
|
||||
td {
|
||||
display: flex;
|
||||
width: auto;
|
||||
justify-content: space-between;
|
||||
text-align: right;
|
||||
border-bottom: 1px solid $background;
|
||||
&:before {
|
||||
content: attr(data-label);
|
||||
font-weight: $weight-semibold;
|
||||
padding-right: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.level {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
&:after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
left: calc(50% - 2.5em);
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
.b-tabs {
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.is-disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.tab-content {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
.tab-item {
|
||||
flex-shrink: 0;
|
||||
flex-basis: auto;
|
||||
}
|
||||
&.is-transitioning {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
&.is-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
.tag {
|
||||
.has-ellipsis {
|
||||
max-width: 10em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
$taginput-height: 1.7em;
|
||||
|
||||
.taginput {
|
||||
.taginput-container {
|
||||
&.is-focusable {
|
||||
@extend .input;
|
||||
padding-bottom: 0;
|
||||
padding-top: calc(0.275em - 1px);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
height: auto;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
> .tag,
|
||||
> .tags {
|
||||
margin-bottom: calc(0.275em - 1px);
|
||||
font-size: 0.9em;
|
||||
height: $taginput-height;
|
||||
.tag {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9em;
|
||||
height: $taginput-height;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.275rem;
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
flex: 1;
|
||||
input {
|
||||
height: $taginput-height;
|
||||
margin-bottom: calc(0.275em - 1px);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
min-width: 8em;
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
height: $taginput-height;
|
||||
}
|
||||
> .control.is-loading::after {
|
||||
top: 0.375em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
.timepicker {
|
||||
.dropdown-menu {
|
||||
min-width: 0;
|
||||
}
|
||||
.dropdown,
|
||||
.dropdown-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown-item {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
.timepicker-footer {
|
||||
padding: 0 0.5rem 0 0.5rem;
|
||||
}
|
||||
.dropdown-content {
|
||||
.control {
|
||||
font-size: 1.25em;
|
||||
margin-right: 0 !important;
|
||||
.select {
|
||||
select {
|
||||
font-weight: $weight-semibold;
|
||||
padding-right: $control-padding-horizontal;
|
||||
border: 0;
|
||||
option {
|
||||
&:disabled {
|
||||
color: rgba($grey, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.is-colon {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Sizes
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
&.is-medium {
|
||||
@include control-medium;
|
||||
}
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
$tooltip-arrow-size: 5px;
|
||||
$tooltip-arrow-margin: 2px;
|
||||
|
||||
$tooltip-multiline-sizes: (
|
||||
small: 180px,
|
||||
medium: 240px,
|
||||
large: 300px
|
||||
);
|
||||
|
||||
@mixin tooltip-arrow($direction, $color) {
|
||||
@if ($direction == "is-top") {
|
||||
border-top: $tooltip-arrow-size solid $color;
|
||||
border-right: $tooltip-arrow-size solid transparent;
|
||||
border-left: $tooltip-arrow-size solid transparent;
|
||||
bottom: calc(100% + #{$tooltip-arrow-margin});
|
||||
} @else if ($direction == "is-bottom") {
|
||||
border-right: $tooltip-arrow-size solid transparent;
|
||||
border-bottom: $tooltip-arrow-size solid $color;
|
||||
border-left: $tooltip-arrow-size solid transparent;
|
||||
top: calc(100% + #{$tooltip-arrow-margin});
|
||||
} @else if ($direction == "is-right") {
|
||||
border-top: $tooltip-arrow-size solid transparent;
|
||||
border-right: $tooltip-arrow-size solid $color;
|
||||
border-bottom: $tooltip-arrow-size solid transparent;
|
||||
left: calc(100% + #{$tooltip-arrow-margin});
|
||||
} @else if ($direction == "is-left") {
|
||||
border-top: $tooltip-arrow-size solid transparent;
|
||||
border-bottom: $tooltip-arrow-size solid transparent;
|
||||
border-left: $tooltip-arrow-size solid $color;
|
||||
right: calc(100% + #{$tooltip-arrow-margin});
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tooltip($direction) {
|
||||
&.#{$direction} {
|
||||
&:before,
|
||||
&:after {
|
||||
@if ($direction == "is-top") {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
} @else if ($direction == "is-bottom") {
|
||||
top: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
} @else if ($direction == "is-right") {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
|
||||
transform: translateY(-50%);
|
||||
} @else if ($direction == "is-left") {
|
||||
top: 50%;
|
||||
right: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name}:before {
|
||||
@include tooltip-arrow($direction, $color)
|
||||
}
|
||||
}
|
||||
&.is-multiline {
|
||||
@each $name, $size in $tooltip-multiline-sizes {
|
||||
&.is-#{$name}:after {
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Base
|
||||
.b-tooltip {
|
||||
@include tooltip("is-top");
|
||||
@include tooltip("is-right");
|
||||
@include tooltip("is-bottom");
|
||||
@include tooltip("is-left");
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:before {
|
||||
z-index: 889;
|
||||
}
|
||||
&:after {
|
||||
content: attr(data-label);
|
||||
width: auto;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: $radius-large;
|
||||
font-size: 0.85rem;
|
||||
font-weight: $weight-normal;
|
||||
box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2);
|
||||
z-index: 888;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:not([data-label=""]):hover:before,
|
||||
&:not([data-label=""]):hover:after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
// Modifiers
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
&.is-#{$name}:after {
|
||||
background: $color;
|
||||
color: $color-invert;
|
||||
}
|
||||
}
|
||||
&:not([data-label=""]).is-always {
|
||||
&:before,
|
||||
&:after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
&.is-multiline {
|
||||
&:after {
|
||||
display: flex-block;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
&.is-dashed {
|
||||
border-bottom: 1px dashed $grey-light;
|
||||
cursor: default;
|
||||
}
|
||||
&.is-square {
|
||||
&:after {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
&.is-animated {
|
||||
&:before,
|
||||
&:after {
|
||||
transition: opacity $speed $easing, visibility $speed $easing;
|
||||
}
|
||||
}
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
.upload {
|
||||
position: relative;
|
||||
input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
&.file-draggable {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.upload-draggable {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 0.25em;
|
||||
border: 1px dashed $grey-light;
|
||||
border-radius: $radius-large;
|
||||
&.is-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
&:after {
|
||||
@include loader;
|
||||
top: 0;
|
||||
left: calc(50% - 1.5em);
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
border-color: $color;
|
||||
background: rgba($color, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
@import "_functions.scss";
|
||||
@import "_variables.scss";
|
||||
@import "_helpers.scss";
|
||||
@import "_animations.scss";
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
// Some of the animations are from animate.css (https://daneden.github.io/animate.css)
|
||||
|
||||
// Fade out
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
@keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
.fadeOutDown {
|
||||
animation-name: fadeOutDown;
|
||||
}
|
||||
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
.fadeOutUp {
|
||||
animation-name: fadeOutUp;
|
||||
}
|
||||
|
||||
// Fade In
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.fadeInDown {
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.fadeInUp {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
/**
|
||||
* Vue Transitions
|
||||
*/
|
||||
|
||||
// Fade
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity $speed-slow $easing;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Zoom In
|
||||
.zoom-in-enter-active,
|
||||
.zoom-in-leave-active {
|
||||
transition: opacity $speed-slow $easing;
|
||||
.animation-content,
|
||||
.animation-content {
|
||||
transition: transform $speed-slow $easing;
|
||||
}
|
||||
}
|
||||
.zoom-in-enter,
|
||||
.zoom-in-leave-active {
|
||||
opacity: 0;
|
||||
.animation-content,
|
||||
.animation-content {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Zoom Out
|
||||
.zoom-out-enter-active,
|
||||
.zoom-out-leave-active {
|
||||
transition: opacity $speed-slow $easing;
|
||||
.animation-content,
|
||||
.animation-content {
|
||||
transition: transform $speed-slow $easing;
|
||||
}
|
||||
}
|
||||
.zoom-out-enter,
|
||||
.zoom-out-leave-active {
|
||||
opacity: 0;
|
||||
.animation-content,
|
||||
.animation-content {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Slide
|
||||
.slide-next-enter-active,
|
||||
.slide-next-leave-active,
|
||||
.slide-prev-enter-active,
|
||||
.slide-prev-leave-active {
|
||||
transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
}
|
||||
.slide-prev-leave-to, .slide-next-enter {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.slide-prev-enter, .slide-next-leave-to {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
// Helper function to replace characters in a string
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
@return if($index,
|
||||
str-slice($string, 1, $index - 1) + $replace +
|
||||
str-replace(str-slice($string, $index +
|
||||
str-length($search)), $search, $replace),
|
||||
$string);
|
||||
}
|
||||
|
||||
// Encode svg function by http://codepen.io/jakob-e/pen/doMoML
|
||||
@function svg-encode($svg){
|
||||
// Chunk up string in order to avoid "stack level too deep" error
|
||||
$encoded:'';
|
||||
$slice: 2000;
|
||||
$index: 0;
|
||||
$loops: ceil(str-length($svg)/$slice);
|
||||
@for $i from 1 through $loops {
|
||||
$chunk: str-slice($svg, $index, $index + $slice - 1);
|
||||
// Encode
|
||||
$chunk: str-replace($chunk, '"', '\'');
|
||||
$chunk: str-replace($chunk, '%', '%25');
|
||||
$chunk: str-replace($chunk, '#', '%23');
|
||||
$chunk: str-replace($chunk, '{', '%7B');
|
||||
$chunk: str-replace($chunk, '}', '%7D');
|
||||
$chunk: str-replace($chunk, '<', '%3C');
|
||||
$chunk: str-replace($chunk, '>', '%3E');
|
||||
|
||||
$encoded: #{$encoded}#{$chunk};
|
||||
$index: $index + $slice;
|
||||
}
|
||||
@return "data:image/svg+xml,#{$encoded}";
|
||||
}
|
||||
|
||||
@function checkmark($color) {
|
||||
$start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">';
|
||||
$content: '<path style="fill:#{$color}" d="M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z"></path>';
|
||||
$end: '</svg>';
|
||||
|
||||
@return svg-encode("#{$start}#{$content}#{$end}");
|
||||
}
|
||||
|
||||
@function indeterminate($color) {
|
||||
$start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">';
|
||||
$content: '<rect style="fill:#{$color}" width="0.7" height="0.2" x=".15" y=".4"></rect>';
|
||||
$end: '</svg>';
|
||||
|
||||
@return svg-encode("#{$start}#{$content}#{$end}");
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
.is-noscroll {
|
||||
position: fixed;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
$speed-slow: 150ms !default;
|
||||
$speed-slower: 250ms !default;
|
||||
|
||||
$primary: #7957d5 !default;
|
||||
$primary-invert: $white !default;
|
||||
|
||||
$info: #167df0 !default;
|
||||
|
||||
$link: $primary !default;
|
||||
$link-invert: $primary-invert !default;
|
||||
$link-visited: $grey !default;
|
||||
$link-focus-border: $primary !default;
|
||||
|
||||
Reference in New Issue
Block a user