Update Node_modules
This commit is contained in:
+1
@@ -17,6 +17,7 @@
|
||||
@import "components/_pagination";
|
||||
@import "components/_radio";
|
||||
@import "components/_select";
|
||||
@import "components/_steps";
|
||||
@import "components/_switch";
|
||||
@import "components/_table";
|
||||
@import "components/_tabs";
|
||||
|
||||
+1
-1
@@ -70,7 +70,7 @@ $checkbox-checkmark-color: $primary-invert !default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:hover {
|
||||
input[type=checkbox] + .check {
|
||||
input[type=checkbox]:not(:disabled) + .check {
|
||||
border-color: $checkbox-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
+9
@@ -64,6 +64,15 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: $padding-outer;
|
||||
}
|
||||
|
||||
+35
-19
@@ -13,7 +13,7 @@
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
}
|
||||
.datepicker-content {
|
||||
height: 16.25rem;
|
||||
height: 16.25rem;
|
||||
}
|
||||
.datepicker-footer {
|
||||
margin-top: 0.875rem;
|
||||
@@ -41,27 +41,43 @@
|
||||
display: table-row-group;
|
||||
.datepicker-row {
|
||||
display: table-row;
|
||||
}
|
||||
.datepicker-months {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
width: 17rem;
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 33.33%;
|
||||
height: 2.5rem;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
&.is-nearby:not(.is-selected) {
|
||||
color: $grey-light;
|
||||
}
|
||||
}
|
||||
&.has-events {
|
||||
.datepicker-cell {
|
||||
|
||||
+2
-1
@@ -6,7 +6,7 @@
|
||||
@include overlay;
|
||||
position: fixed;
|
||||
background-color: rgba($black, 0.86);
|
||||
z-index: 10;
|
||||
z-index: 40;
|
||||
cursor: pointer;
|
||||
@include desktop {
|
||||
display: none;
|
||||
@@ -89,6 +89,7 @@
|
||||
transform: translate3d(-50%, -25%, 0);
|
||||
white-space: normal;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
.dropdown-item {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
+114
-3
@@ -1,6 +1,4 @@
|
||||
.label {
|
||||
font-weight: $weight-semibold
|
||||
}
|
||||
$floating-in-height: 3.25em;
|
||||
|
||||
.field {
|
||||
&.is-grouped {
|
||||
@@ -43,6 +41,119 @@
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&.is-floating-label {
|
||||
position: relative;
|
||||
.label {
|
||||
position: absolute;
|
||||
top: -0.775em;
|
||||
left: 1em;
|
||||
font-size: calc(#{$size-normal} * 3 / 4);
|
||||
background-color: transparent;
|
||||
padding-left: 0.125em;
|
||||
padding-right: 0.125em;
|
||||
z-index: 5;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.775em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0.375em;
|
||||
background-color: #fff;
|
||||
z-index: -1;
|
||||
}
|
||||
&.is-small {
|
||||
font-size: calc(#{$size-small} * 3 / 4);
|
||||
}
|
||||
&.is-medium {
|
||||
font-size: calc(#{$size-medium} * 3 / 4);
|
||||
}
|
||||
&.is-large {
|
||||
font-size: calc(#{$size-large} * 3 / 4);
|
||||
}
|
||||
}
|
||||
.input,
|
||||
.textarea,
|
||||
.select
|
||||
select {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.taginput .taginput-container.is-focusable {
|
||||
padding-top: 0.475em;
|
||||
&.is-focused {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-floating-in-label {
|
||||
position: relative;
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
left: 1em;
|
||||
font-size: calc(#{$size-normal} * 3 / 4);
|
||||
background-color: transparent;
|
||||
z-index: 5;
|
||||
&.is-small {
|
||||
font-size: calc(#{$size-small} * 3 / 4);
|
||||
}
|
||||
&.is-medium {
|
||||
font-size: calc(#{$size-medium} * 3 / 4);
|
||||
}
|
||||
&.is-large {
|
||||
font-size: calc(#{$size-large} * 3 / 4);
|
||||
}
|
||||
}
|
||||
> .datepicker, > .timepicker {
|
||||
.input {
|
||||
padding-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2);
|
||||
padding-bottom: 1px;
|
||||
height: $floating-in-height;
|
||||
}
|
||||
}
|
||||
> :not(.datepicker):not(.timepicker):not(.taginput) {
|
||||
.input,
|
||||
.textarea,
|
||||
select {
|
||||
padding-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2);
|
||||
padding-bottom: 1px;
|
||||
height: $floating-in-height;
|
||||
}
|
||||
.select:not(multiple) {
|
||||
height: $floating-in-height;
|
||||
&.is-loading {
|
||||
&::after {
|
||||
margin-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> :not(.taginput) {
|
||||
.is-left.icon,
|
||||
.is-right.icon {
|
||||
height: $floating-in-height;
|
||||
}
|
||||
.is-left.icon {
|
||||
padding-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2);
|
||||
}
|
||||
}
|
||||
.control.is-loading::after {
|
||||
margin-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2);
|
||||
}
|
||||
.taginput .taginput-container.is-focusable {
|
||||
// 0.275em - 1px _taginput.scss
|
||||
padding-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2 + (0.275em - 1px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
.help.counter {
|
||||
float: right;
|
||||
|
||||
+10
@@ -1,4 +1,14 @@
|
||||
.modal {
|
||||
&.is-full-screen {
|
||||
.animation-content,
|
||||
.modal-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.animation-content {
|
||||
margin: 0 20px;
|
||||
.modal-card {
|
||||
|
||||
+4
-6
@@ -2,11 +2,9 @@
|
||||
&.field {
|
||||
margin-bottom: 0;
|
||||
&.is-grouped {
|
||||
@include mobile {
|
||||
div.control {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
div.control {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -26,4 +24,4 @@
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+21
-14
@@ -1,4 +1,5 @@
|
||||
$radio-active-background-color: $primary !default;
|
||||
$radio-size: 1.25em !default;
|
||||
|
||||
.b-radio {
|
||||
&.radio {
|
||||
@@ -16,23 +17,29 @@ $radio-active-background-color: $primary !default;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
+ .check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border: 2px solid $grey;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: $radio-size;
|
||||
height: $radio-size;
|
||||
transition: background $speed-slow $easing;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $grey;
|
||||
&:before {
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
width: 0.625em;
|
||||
height: 0.625em;
|
||||
background: $radio-active-background-color;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: calc(-#{$radio-size}/2);
|
||||
bottom: 50%;
|
||||
margin-bottom: calc(-#{$radio-size}/2);
|
||||
width: $radio-size;
|
||||
height: $radio-size;
|
||||
transition: transform $speed-slow $easing;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
transition: transform $speed-slow $easing;
|
||||
background-color: $radio-active-background-color;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
@@ -50,7 +57,7 @@ $radio-active-background-color: $primary !default;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
transform: scale(1);
|
||||
transform: scale(.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -61,7 +68,7 @@ $radio-active-background-color: $primary !default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:hover {
|
||||
input[type=radio] + .check {
|
||||
input[type=radio]:not(:disabled) + .check {
|
||||
border-color: $radio-active-background-color;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
+241
@@ -0,0 +1,241 @@
|
||||
/*
|
||||
This project is based on
|
||||
"bulma-steps" (https://github.com/Wikiki/bulma-steps) by
|
||||
Wikiki (https://github.com/Wikiki) licensed under
|
||||
MIT (https://github.com/Wikiki/bulma-steps/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
$steps-maker-default-color: $grey-light !default;
|
||||
$steps-marker-default-border: .2em solid #fff !default;
|
||||
$steps-default-color: $grey-lighter !default;
|
||||
$steps-completed-color: $primary !default;
|
||||
$steps-active-color: $primary !default;
|
||||
$steps-divider-height: .2em !default;
|
||||
|
||||
@mixin steps-size($size) {
|
||||
font-size: $size;
|
||||
min-height: $size * 2;
|
||||
|
||||
.step-items {
|
||||
.step-item {
|
||||
.step-marker {
|
||||
height: $size * 2;
|
||||
width: $size * 2;
|
||||
position: absolute;
|
||||
left: calc(50% - #{$size});
|
||||
|
||||
.icon {
|
||||
*, *:before {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-details {
|
||||
margin-top: $size * 2;
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
padding-top: .2em;
|
||||
|
||||
.step-title {
|
||||
font-size: $size * 1.2;
|
||||
font-weight: $weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
height: $steps-divider-height;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: -50%;
|
||||
top: #{$size};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-steps {
|
||||
.steps {
|
||||
.step-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.step-item {
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
|
||||
.step-link {
|
||||
color: $body-color;
|
||||
|
||||
&:not(.is-clickable) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.step-marker {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
font-weight: $weight-bold;
|
||||
justify-content: center;
|
||||
background: $steps-maker-default-color;
|
||||
color: $white;
|
||||
border: $steps-marker-default-border;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Override marker color per step
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&::before {
|
||||
background: linear-gradient(to left, $steps-default-color 50%, $color 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
}
|
||||
&.is-active {
|
||||
.step-marker {
|
||||
background-color: $white;
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-position: left bottom;
|
||||
}
|
||||
}
|
||||
&.is-completed {
|
||||
.step-marker {
|
||||
color: $color-invert;
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-position: left bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-marker{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.step-details {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
flex-basis: 1em;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
&::before {
|
||||
// This will contain the divider
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(to left, $steps-default-color 50%, $steps-active-color 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: right bottom;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.step-link {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.step-marker {
|
||||
background-color: $white;
|
||||
border-color: $steps-active-color;
|
||||
color: $steps-active-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-position: left bottom;
|
||||
}
|
||||
}
|
||||
&.is-completed {
|
||||
.step-marker {
|
||||
color: $white;
|
||||
background-color: $steps-completed-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-position: left bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .step-content {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
.step-item {
|
||||
flex-shrink: 0;
|
||||
flex-basis: auto;
|
||||
}
|
||||
&.is-transitioning {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@include steps-size($size-normal);
|
||||
&.is-small {
|
||||
@include steps-size($size-small);
|
||||
}
|
||||
&.is-medium {
|
||||
@include steps-size($size-medium);
|
||||
}
|
||||
&.is-large {
|
||||
@include steps-size($size-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.b-tabs {
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
li {
|
||||
&.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%;
|
||||
}
|
||||
}*/
|
||||
+7
-5
@@ -2,11 +2,13 @@
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.is-disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
li {
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
position: relative;
|
||||
|
||||
+2
-1
@@ -6,6 +6,7 @@ $taginput-height: 1.7em;
|
||||
@extend .input;
|
||||
padding-bottom: 0;
|
||||
padding-top: calc(0.275em - 1px);
|
||||
padding-left: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -25,7 +26,7 @@ $taginput-height: 1.7em;
|
||||
height: $taginput-height;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.275rem;
|
||||
margin-left: 0.275rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+1
@@ -11,3 +11,4 @@ $link-invert: $primary-invert !default;
|
||||
$link-visited: $grey !default;
|
||||
$link-focus-border: $primary !default;
|
||||
|
||||
$label-weight: $weight-semibold !default;
|
||||
|
||||
Reference in New Issue
Block a user