@spothero/ui 15.10.8 → 16.0.0-beta.0

package/styles/AutoSuggestInput/_AutoSuggestInput.scss

@@ -1,116 +0,0 @@
-.AutoSuggestInput {
-    position: relative;
-
-    .FormElement-item {
-        padding-right: 35px;
-    }
-}
-
-.AutoSuggestInput-suggestions-active {
-    .FormElement-item {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-}
-
-.AutoSuggestInput-no-suggestions {
-    .FormElement-item {
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-
-        @include breakpoint($breakpoint-md) {
-            border-bottom-left-radius: 3px;
-            border-bottom-right-radius: 3px;
-        }
-    }
-}
-
-.AutoSuggestInput-suggestions {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    max-height: 224px;
-    padding: 0;
-    margin-top: -1px;
-    background: $color-white;
-    border: 1px solid $color-dashboard;
-    overflow-x: hidden;
-    overflow-y: auto;
-    list-style: none;
-    text-align: left;
-    z-index: $z-index-layer1;
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-    transition: max-height 0.2s, border 0.2s;
-
-    .AutoSuggestInput-no-suggestions & {
-        display: none;
-    }
-
-    @include breakpoint($breakpoint-md) {
-        max-height: 25em;
-        border-color: $color-black;
-    }
-}
-
-.AutoSuggestInput-suggestions-hidden {
-    max-height: 0;
-    overflow: hidden;
-    border-width: 0;
-}
-
-.AutoSuggestInput-item {
-    @include ellipsis;
-    font-size: 14px;
-    cursor: pointer;
-    padding: 7px 10px 7px 16px;
-
-    &:hover,
-    &:focus {
-        background: $color-pavement;
-    }
-
-    @include breakpoint($breakpoint-md) {
-        font-size: 13px;
-        padding: 5px 10px 5px 18px;
-    }
-}
-
-%active-suggestions {
-    background: $color-shift;
-    color: $color-white;
-}
-
-.AutoSuggestInput-item-active {
-    @extend %active-suggestions;
-
-    &:hover,
-    &:focus {
-        background: $color-shift-hover;
-    }
-}
-
-.AutoSuggestInput-clear {
-    @include center(false, true);
-    left: auto;
-    right: 10px;
-    margin: auto;
-    height: 18px;
-    padding: 0;
-    color: $color-shift;
-
-    &:hover {
-        color: $color-shift-hover;
-    }
-
-    .Icon {
-        width: 18px;
-        height: 18px;
-
-        // Updated to account for small positioning changes
-        // due to the Chakra implementation. Allowed the icon
-        // to inherit 'display: inline-block;', and the margin
-        // from the v1 Button css.
-    }
-}

package/styles/Badge/_Badge.scss

@@ -1,33 +0,0 @@
-.Badge {
-    font-size: 10px;
-    display: inline-block;
-    min-width: 16px;
-    min-height: 16px;
-    border: 1px solid $color-white;
-    border-radius: 8px;
-    padding: 0.1em 0.5em;
-    color: $color-white;
-    font-weight: $font-weight-bold;
-    text-align: center;
-}
-
-.Badge-default {
-    background-color: $color-shift;
-}
-
-.Badge-danger {
-    background-color: $color-stop;
-}
-
-.Badge-warning {
-    background-color: $color-caution;
-}
-
-.Badge-success {
-    background-color: $color-go;
-}
-
-.Badge-info {
-    border: 1px solid $color-dashboard;
-    color: $color-cement;
-}

package/styles/Chart/_Chart.scss

@@ -1,105 +0,0 @@
-@use "sass:list";
-@import "chartist";
-
-.ct-area,
-.ct-line {
-    pointer-events: none;
-}
-
-.ct-circle {
-    fill: $color-white;
-    stroke-width: 2;
-    stroke: $color-go;
-}
-
-.ct-series {
-    @for $i from 0 to length($ct-series-colors) {
-        .ct-circle-#{$i} {
-            stroke: list.nth($ct-series-colors, $i + 1);
-        }
-    }
-}
-
-.ct-label {
-    &.ct-horizontal {
-        transform: translateX(-50%);
-        white-space: nowrap;
-    }
-}
-
-.ct-legend {
-    position: relative;
-    color: $color-fuel;
-
-    li {
-        position: relative;
-        list-style: none;
-        padding-left: 20px;
-        margin-bottom: 5px;
-
-        &::before {
-            position: absolute;
-            left: 0;
-            top: 3px;
-            width: $ct-point-size;
-            height: $ct-point-size;
-            content: "";
-            border: $ct-line-width solid transparent;
-            border-radius: 50%;
-        }
-
-        &.inactive {
-            &::before {
-                background: transparent;
-            }
-        }
-    }
-
-    &.ct-legend-inside {
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-
-    @for $i from 0 to length($ct-series-colors) {
-        /* stylelint-disable */
-        .ct-series-#{$i}::before {
-            background-color: list.nth($ct-series-colors, $i + 1);
-            border-color: list.nth($ct-series-colors, $i + 1);
-        }
-        /* stylelint-enable */
-    }
-}
-
-.chartist-tooltip {
-    position: absolute;
-    display: inline-block;
-    padding: 10px;
-    background-color: $color-white;
-    color: $color-fuel;
-    border-top: 4px solid $color-go;
-    border-radius: 4px;
-    box-shadow: 0 0 24px 0 rgba($color-fuel, 0.15);
-    opacity: 0;
-    pointer-events: none;
-    z-index: $z-index-mid;
-    transition: opacity $animation;
-
-    &::before {
-        content: "";
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-        border-width: 10px 5px 0;
-        border-top-color: $color-white;
-    }
-
-    &.tooltip-show {
-        opacity: 1;
-    }
-}

package/styles/Chart/_chartist-settings.scss

@@ -1,131 +0,0 @@
-// stylelint-disable
-
-/*
-
-    THIS FILE HAS BEEN MODIFIED FROM THE ORIGINAL CHARTIST SOURCE. DO NOT BLINDLY OVERWRITE!!!
-
- */
-
-// Scales for responsive SVG containers
-$ct-scales: (
-    (1),
-    (15/16),
-    (8/9),
-    (5/6),
-    (4/5),
-    (3/4),
-    (2/3),
-    (5/8),
-    (1/1.618),
-    (3/5),
-    (9/16),
-    (8/15),
-    (1/2),
-    (2/5),
-    (3/8),
-    (1/3),
-    (1/4)
-) !default;
-$ct-scales-names: (
-    ct-square,
-    ct-minor-second,
-    ct-major-second,
-    ct-minor-third,
-    ct-major-third,
-    ct-perfect-fourth,
-    ct-perfect-fifth,
-    ct-minor-sixth,
-    ct-golden-section,
-    ct-major-sixth,
-    ct-minor-seventh,
-    ct-major-seventh,
-    ct-octave,
-    ct-major-tenth,
-    ct-major-eleventh,
-    ct-major-twelfth,
-    ct-double-octave
-) !default;
-
-// Class names to be used when generating CSS
-$ct-class-chart: ct-chart !default;
-$ct-class-chart-line: ct-chart-line !default;
-$ct-class-chart-bar: ct-chart-bar !default;
-$ct-class-horizontal-bars: ct-horizontal-bars !default;
-$ct-class-chart-pie: ct-chart-pie !default;
-$ct-class-chart-donut: ct-chart-donut !default;
-$ct-class-label: ct-label !default;
-$ct-class-series: ct-series !default;
-$ct-class-line: ct-line !default;
-$ct-class-point: ct-point !default;
-$ct-class-area: ct-area !default;
-$ct-class-bar: ct-bar !default;
-$ct-class-slice-pie: ct-slice-pie !default;
-$ct-class-slice-donut: ct-slice-donut !default;
-$ct-class-grid: ct-grid !default;
-$ct-class-grid-background: ct-grid-background !default;
-$ct-class-vertical: ct-vertical !default;
-$ct-class-horizontal: ct-horizontal !default;
-$ct-class-start: ct-start !default;
-$ct-class-end: ct-end !default;
-
-// Container ratio
-$ct-container-ratio: (1/1.618) !default;
-
-// Text styles for labels
-$ct-text-color: $color-cement !default;
-$ct-text-size: 14px !default;
-$ct-text-align: flex-start !default;
-$ct-text-justify: flex-start !default;
-$ct-text-line-height: 1;
-
-// Grid styles
-$ct-grid-color: $color-dashboard !default;
-$ct-grid-dasharray: false !default;
-$ct-grid-width: 1px !default;
-$ct-grid-background-fill: none !default;
-
-// Line chart properties
-$ct-line-width: 2px !default;
-$ct-line-dasharray: false !default;
-$ct-point-size: 10px !default;
-// Line chart point, can be either round or square
-$ct-point-shape: round !default;
-// Area fill transparency between 0 and 1
-$ct-area-opacity: 0.1 !default;
-
-// Bar chart bar width
-$ct-bar-width: 10px !default;
-
-// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
-$ct-donut-width: 60px !default;
-
-// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
-// should set this property to false
-$ct-include-classes: true !default;
-
-// If this is set to true the CSS will contain colored series. You can extend or change the color with the
-// properties below
-$ct-include-colored-series: $ct-include-classes !default;
-
-// If set to true this will include all responsive container variations using the scales defined at the top of the script
-$ct-include-alternative-responsive-containers: $ct-include-classes !default;
-
-// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
-$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
-$ct-series-colors: (
-    $color-go,
-    $color-caution,
-    $color-shift,
-    $color-fuel,
-    $color-stop,
-    #59922b,
-    #0544d3,
-    #6b0392,
-    #f05b4f,
-    #dda458,
-    #eacf7d,
-    #86797d,
-    #b2c326,
-    #6188e2,
-    #a748ca
-) !default;

package/styles/Chart/_chartist.scss

@@ -1,295 +0,0 @@
-// stylelint-disable
-
-/*
-
-    THIS FILE HAS BEEN MODIFIED FROM THE ORIGINAL CHARTIST SOURCE. DO NOT BLINDLY OVERWRITE!!!
-
- */
-
-@import "chartist-settings";
-
-@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
-    display: block;
-    position: relative;
-    width: $width;
-
-    &:before {
-        display: block;
-        float: left;
-        content: "";
-        width: 0;
-        height: 0;
-        padding-bottom: $ratio * 100%;
-    }
-
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-
-    > svg {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-}
-
-@mixin ct-align-justify(
-    $ct-text-align: $ct-text-align,
-    $ct-text-justify: $ct-text-justify
-) {
-    -webkit-box-align: $ct-text-align;
-    -webkit-align-items: $ct-text-align;
-    -ms-flex-align: $ct-text-align;
-    align-items: $ct-text-align;
-    -webkit-box-pack: $ct-text-justify;
-    -webkit-justify-content: $ct-text-justify;
-    -ms-flex-pack: $ct-text-justify;
-    justify-content: $ct-text-justify;
-    // Fallback to text-align for non-flex browsers
-    @if ($ct-text-justify == "flex-start") {
-        text-align: left;
-    } @else if ($ct-text-justify == "flex-end") {
-        text-align: right;
-    } @else {
-        text-align: center;
-    }
-}
-
-@mixin ct-flex() {
-    // Fallback to block
-    display: block;
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-}
-
-@mixin ct-chart-label(
-    $ct-text-color: $ct-text-color,
-    $ct-text-size: $ct-text-size,
-    $ct-text-line-height: $ct-text-line-height
-) {
-    fill: $ct-text-color;
-    color: $ct-text-color;
-    font-size: $ct-text-size;
-    line-height: $ct-text-line-height;
-}
-
-@mixin ct-chart-grid(
-    $ct-grid-color: $ct-grid-color,
-    $ct-grid-width: $ct-grid-width,
-    $ct-grid-dasharray: $ct-grid-dasharray
-) {
-    stroke: $ct-grid-color;
-    stroke-width: $ct-grid-width;
-
-    @if ($ct-grid-dasharray) {
-        stroke-dasharray: $ct-grid-dasharray;
-    }
-}
-
-@mixin ct-chart-point(
-    $ct-point-size: $ct-point-size,
-    $ct-point-shape: $ct-point-shape
-) {
-    stroke-width: $ct-point-size;
-    stroke-linecap: $ct-point-shape;
-}
-
-@mixin ct-chart-line(
-    $ct-line-width: $ct-line-width,
-    $ct-line-dasharray: $ct-line-dasharray
-) {
-    fill: none;
-    stroke-width: $ct-line-width;
-
-    @if ($ct-line-dasharray) {
-        stroke-dasharray: $ct-line-dasharray;
-    }
-}
-
-@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
-    stroke: none;
-    fill-opacity: $ct-area-opacity;
-}
-
-@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
-    fill: none;
-    stroke-width: $ct-bar-width;
-}
-
-@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
-    fill: none;
-    stroke-width: $ct-donut-width;
-}
-
-@mixin ct-chart-series-color($color) {
-    .#{$ct-class-point},
-    .#{$ct-class-line},
-    .#{$ct-class-bar},
-    .#{$ct-class-slice-donut} {
-        stroke: $color;
-    }
-
-    .#{$ct-class-slice-pie},
-    .#{$ct-class-area} {
-        fill: $color;
-    }
-}
-
-@mixin ct-chart(
-    $ct-container-ratio: $ct-container-ratio,
-    $ct-text-color: $ct-text-color,
-    $ct-text-size: $ct-text-size,
-    $ct-grid-color: $ct-grid-color,
-    $ct-grid-width: $ct-grid-width,
-    $ct-grid-dasharray: $ct-grid-dasharray,
-    $ct-point-size: $ct-point-size,
-    $ct-point-shape: $ct-point-shape,
-    $ct-line-width: $ct-line-width,
-    $ct-bar-width: $ct-bar-width,
-    $ct-donut-width: $ct-donut-width,
-    $ct-series-names: $ct-series-names,
-    $ct-series-colors: $ct-series-colors
-) {
-    .#{$ct-class-label} {
-        @include ct-chart-label($ct-text-color, $ct-text-size);
-    }
-
-    .#{$ct-class-chart-line} .#{$ct-class-label},
-    .#{$ct-class-chart-bar} .#{$ct-class-label} {
-        @include ct-flex();
-    }
-
-    .#{$ct-class-chart-pie} .#{$ct-class-label},
-    .#{$ct-class-chart-donut} .#{$ct-class-label} {
-        dominant-baseline: central;
-    }
-
-    .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
-        @include ct-align-justify(flex-end, flex-start);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: start;
-    }
-
-    .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
-        @include ct-align-justify(center, center);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: start;
-    }
-
-    .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
-        @include ct-align-justify(flex-end, flex-end);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: end;
-    }
-
-    .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
-        @include ct-align-justify(flex-end, flex-start);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: start;
-    }
-
-    .#{$ct-class-chart-bar}
-        .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
-        @include ct-align-justify(flex-end, center);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: start;
-    }
-
-    .#{$ct-class-chart-bar}
-        .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
-        @include ct-align-justify(flex-start, center);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: start;
-    }
-
-    .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
-        .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
-        @include ct-align-justify(flex-end, flex-start);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: start;
-    }
-
-    .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
-        .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
-        @include ct-align-justify(flex-start, flex-start);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: start;
-    }
-
-    .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
-        .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
-        //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
-        @include ct-align-justify(center, flex-end);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: end;
-    }
-
-    .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars}
-        .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
-        @include ct-align-justify(center, flex-start);
-        // Fallback for browsers that don't support foreignObjects
-        text-anchor: end;
-    }
-
-    .#{$ct-class-grid} {
-        @include ct-chart-grid(
-            $ct-grid-color,
-            $ct-grid-width,
-            $ct-grid-dasharray
-        );
-    }
-
-    .#{$ct-class-grid-background} {
-        fill: $ct-grid-background-fill;
-    }
-
-    .#{$ct-class-point} {
-        @include ct-chart-point($ct-point-size, $ct-point-shape);
-    }
-
-    .#{$ct-class-line} {
-        @include ct-chart-line($ct-line-width);
-    }
-
-    .#{$ct-class-area} {
-        @include ct-chart-area();
-    }
-
-    .#{$ct-class-bar} {
-        @include ct-chart-bar($ct-bar-width);
-    }
-
-    .#{$ct-class-slice-donut} {
-        @include ct-chart-donut($ct-donut-width);
-    }
-
-    @if $ct-include-colored-series {
-        @for $i from 0 to length($ct-series-names) {
-            .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
-                $color: nth($ct-series-colors, $i + 1);
-
-                @include ct-chart-series-color($color);
-            }
-        }
-    }
-}
-
-@if $ct-include-classes {
-    @include ct-chart();
-
-    @if $ct-include-alternative-responsive-containers {
-        @for $i from 0 to length($ct-scales-names) {
-            .#{nth($ct-scales-names, $i + 1)} {
-                @include ct-responsive-svg-container(
-                    $ratio: nth($ct-scales, $i + 1)
-                );
-            }
-        }
-    }
-}