@spothero/ui 15.10.9 → 16.0.0-beta.1

package/styles/Checkbox/_Checkbox.scss

@@ -1,173 +0,0 @@
-.Checkbox {
-    position: relative;
-
-    %checkbox-common {
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        background-color: $color-white;
-    }
-
-    .FormElement-item {
-        @extend %checkbox-common;
-        top: 2px;
-        left: 1px;
-        overflow: hidden;
-        opacity: 0;
-        z-index: $z-index-mid;
-
-        &:checked {
-            ~ .Icon {
-                opacity: 1;
-            }
-
-            ~ .Label {
-                &::before {
-                    border-color: $color-shift;
-                    background-color: $color-shift;
-                }
-            }
-        }
-
-        &:disabled {
-            ~ .Label {
-                color: $color-dashboard;
-                cursor: not-allowed;
-
-                &::before {
-                    border-color: $color-dashboard;
-                }
-            }
-
-            &:checked {
-                ~ .Label {
-                    &::before {
-                        background-color: $color-dashboard;
-                    }
-                }
-            }
-        }
-    }
-
-    .Icon {
-        position: absolute;
-
-        // Chakra's implementation created some small issues
-        // with how elements were positioned, this updates the
-        // element to parody the original design
-        top: 5px;
-        left: 5px;
-        width: 10px;
-        color: $color-white;
-        z-index: $z-index-mid;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity $animation;
-    }
-
-    .Label {
-        position: relative;
-        padding-left: 28px;
-        font-weight: $font-weight-normal;
-        color: $color-black;
-
-        &::before {
-            @extend %checkbox-common;
-
-            // Chakra's implementation created some small issues
-            // with how elements were positioned, this updates the
-            // element to parody the original design
-            top: 0;
-            left: 0;
-            content: "";
-            border: 1px solid $color-dashboard;
-            border-radius: 4px;
-            transition: background-color $animation, border-color $animation;
-        }
-    }
-
-    &.FormElement-contains-error {
-        .Label {
-            color: $color-stop;
-
-            &::before {
-                border-color: $color-stop;
-            }
-        }
-    }
-
-    .FormElementError {
-        margin-top: 20px;
-    }
-}
-
-.Checkbox-toggle {
-    display: inline-block;
-
-    .FormElement-item {
-        width: 36px;
-        cursor: pointer;
-
-        &:checked {
-            ~ .Label {
-                background-color: $color-shift;
-
-                &::after {
-                    background-color: $color-white;
-                    box-shadow: 0 3px 8px 0 rgba($color-white, 0.3);
-                    transform: translateX(16px);
-                }
-            }
-        }
-
-        &:disabled {
-            cursor: not-allowed;
-
-            ~ .Label {
-                background-color: rgba($color-dashboard, 0.5);
-            }
-        }
-    }
-
-    .Icon {
-        display: none;
-    }
-
-    .Label {
-        display: block;
-        width: 36px;
-        height: 20px;
-        margin: 0;
-        padding-left: 0;
-        background: $color-dashboard;
-        border-radius: 10px;
-        cursor: pointer;
-        pointer-events: none;
-        user-select: none;
-        transition: background-color $animation;
-
-        &::before,
-        &::after {
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            display: block;
-            content: "";
-            width: 16px;
-            height: 16px;
-        }
-
-        &::before {
-            display: none;
-        }
-
-        &::after {
-            border-radius: 50%;
-            background-color: $color-white;
-            box-shadow: 0 3px 8px 0 rgba($color-dashboard, 0.3);
-            z-index: $z-index-mid;
-            transition: transform $animation, box-shadow $animation,
-                background-color $animation;
-        }
-    }
-}

package/styles/DateTime/_DatePicker.scss

@@ -1,61 +0,0 @@
-html {
-    &.DatePicker-tether-shim-open {
-        @extend %disable-scrolling;
-    }
-}
-
-.DatePicker {
-    &.FormElement-contains-error {
-        @extend %form-element-error;
-    }
-}
-
-.DatePicker-input-container {
-    > span {
-        display: inline-block;
-    }
-
-    .FormElement-item {
-        cursor: pointer;
-    }
-}
-
-.DatePicker-input-container-with-icon {
-    .TextInput {
-        .Icon-calendar {
-            fill: $color-shift;
-            pointer-events: none;
-
-            .DatePicker-disabled & {
-                fill: $color-cement;
-            }
-        }
-    }
-}
-
-.DatePicker-tether {
-    z-index: $z-index-modal;
-}
-
-// !important is necessary here to override JS settings for this particular instance
-.DatePicker-tether-centered-with-shim {
-    /* stylelint-disable declaration-no-important  */
-    position: fixed !important;
-    top: 50% !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) !important;
-    /* stylelint-enable declaration-no-important */
-}
-
-.DatePicker-calendar-shim {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    margin: auto;
-    background-color: rgba($color-fuel, 0.9);
-    z-index: $z-index-modal-shim;
-}

package/styles/DateTime/_DatePickerCalendar.scss

@@ -1,159 +0,0 @@
-.DayPicker {
-    font-size: 14px;
-    position: relative;
-    width: 280px;
-    background-color: $color-white;
-    border: 1px solid $color-dashboard;
-    box-shadow: 0 6px 18px 1px rgba($color-black, 0.12);
-    border-radius: 0 0 4px 4px;
-    cursor: default;
-    outline: none;
-}
-
-.DayPicker-NavBar {
-    position: absolute;
-    left: 0;
-    right: 0;
-}
-
-.DayPicker-NavButton {
-    position: absolute;
-    padding: 3px 10px;
-    top: 8px;
-    cursor: pointer;
-
-    .Icon {
-        margin: 0;
-        fill: $color-cement;
-    }
-}
-
-.DayPicker-NavButton--prev {
-    left: 40px;
-}
-
-.DayPicker-NavButton--next {
-    right: 40px;
-}
-
-.DayPicker-Caption {
-    font-size: 16px;
-    width: 100%;
-    height: 41px;
-    line-height: 41px;
-    text-align: center;
-    font-weight: $font-weight-semi-bold;
-    background-color: $color-white;
-}
-
-.DayPicker-Weekdays {
-    margin: 0 6px;
-    padding: 10px 0;
-    border-bottom: 1px solid $color-dashboard;
-}
-
-.DayPicker-Weekday {
-    display: inline-block;
-    width: 38px;
-    text-align: center;
-    font-weight: $font-weight-semi-bold;
-
-    abbr {
-        border-bottom: none;
-        text-decoration: none;
-    }
-}
-
-.DayPicker-Body {
-    padding: 5px;
-}
-
-.DayPicker-Day {
-    display: table-cell;
-    width: 38px;
-    height: 38px;
-    vertical-align: middle;
-    background-color: $color-white;
-    text-align: center;
-    cursor: pointer;
-    outline: none;
-    border-radius: 19px;
-
-    /* stylelint-disable */
-    &:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected) {
-        &:hover {
-            border: 1px solid $color-go;
-            border-radius: 100%;
-        }
-    }
-    /* stylelint-enable */
-}
-
-.DayPicker--interactionDisabled {
-    .DayPicker-Day {
-        cursor: default;
-    }
-}
-
-.DayPicker-Day--today {
-    color: $color-go;
-}
-
-.DayPicker-Day--disabled {
-    color: $color-cement;
-    cursor: default;
-}
-/* stylelint-disable */
-.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-    color: $color-white;
-    background-color: $color-go;
-}
-/* stylelint-enable */
-
-.DatePicker-calendar-with-range {
-    .DayPicker-Day {
-        border-radius: 0;
-
-        &.DayPicker-Day--outside {
-            &:hover {
-                border: none;
-            }
-        }
-    }
-
-    /* stylelint-disable */
-    .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-        color: $color-white;
-        background-color: rgba($color-go, 0.33);
-
-        &.DayPicker-Day--start-without-end {
-            background-color: transparent;
-        }
-    }
-    /* stylelint-enable */
-
-    .DayPicker-Day--start,
-    .DayPicker-Day--end {
-        color: $color-white;
-
-        .DatePicker-Day--wrapper {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            width: 100%;
-            border-radius: 100%;
-            background-color: $color-go;
-        }
-    }
-
-    .DayPicker-Day--start {
-        border-top-left-radius: 50%;
-        border-bottom-left-radius: 50%;
-    }
-
-    .DayPicker-Day--end {
-        border-top-right-radius: 50%;
-        border-bottom-right-radius: 50%;
-    }
-}

package/styles/DateTime/_DateTime.scss

@@ -1,4 +0,0 @@
-@import "DatePickerCalendar";
-@import "DatePicker";
-@import "TimePicker";
-@import "DateTimePicker";

package/styles/DateTime/_DateTimePicker.scss

@@ -1,46 +0,0 @@
-@use "sass:color";
-
-@keyframes HIGHLIGHT {
-    5% {
-        background-color: color.adjust($color-highlight, $lightness: 40%);
-    }
-}
-
-.DateTimePicker {
-    .DatePicker {
-        display: inline-block;
-        margin-right: 20px;
-        vertical-align: top;
-    }
-
-    .TimePicker {
-        display: inline-block;
-        vertical-align: top;
-    }
-}
-
-.DateTimePicker-highlight {
-    .FormElement-item {
-        animation: HIGHLIGHT 3s;
-    }
-}
-
-.DateTimePicker-error {
-    @extend %form-element-error;
-
-    .DatePicker-input-container-with-icon {
-        .Icon {
-            fill: $color-stop;
-        }
-    }
-
-    .TimePicker-with-icon {
-        .FormElement {
-            .Select-icon {
-                .Icon {
-                    fill: $color-stop;
-                }
-            }
-        }
-    }
-}

package/styles/DateTime/_TimePicker.scss

@@ -1,30 +0,0 @@
-.TimePicker {
-    position: relative;
-
-    &.FormElement-contains-error {
-        @extend %form-element-error;
-    }
-}
-
-.TimePicker-with-icon {
-    .FormElement {
-        .FormElement-item {
-            padding-right: 40px;
-            cursor: pointer;
-        }
-
-        .Icon-chevron-down {
-            display: none;
-        }
-
-        &.FormElement-with-icon {
-            .Select-icon {
-                pointer-events: none;
-
-                .Icon {
-                    fill: $color-shift;
-                }
-            }
-        }
-    }
-}

package/styles/ErrorBoundary/_ErrorBoundary.scss

@@ -1,18 +0,0 @@
-.ErrorBoundary {
-    width: 100%;
-    height: 100%;
-    color: $color-fuel;
-}
-
-.ErrorBoundary-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-
-.ErrorBoundary-info {
-    font-size: 20px;
-    padding-bottom: 8px;
-}

package/styles/Flyout/_Flyout.scss

@@ -1,73 +0,0 @@
-html {
-    &.Flyout-no-scroll {
-        @extend %disable-scrolling;
-    }
-}
-
-.Flyout-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: $z-index-modal;
-}
-
-.Flyout-wrapper {
-    position: absolute;
-    top: 2px;
-    left: 100%;
-    width: 320px;
-    height: calc(100% - 2px);
-    background-color: $color-white;
-    border-radius: 4px 0 0 4px;
-    box-shadow: -8px 0 16px 0 rgba($color-black, 0.1);
-    transform: translateX(100%);
-    transition: transform $animation;
-}
-
-.Flyout-active {
-    transform: translateX(-100%);
-    transition: transform $animation;
-}
-
-.Flyout-shim {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    height: 100%;
-    width: 100%;
-}
-
-.Flyout-heading {
-    position: relative;
-    width: 100%;
-    height: 64px;
-    border-bottom: 1px solid $color-dashboard;
-
-    h1 {
-        @include center(false, true);
-        left: 24px;
-    }
-}
-
-.Flyout-close {
-    @include center(false, true);
-    left: auto;
-    right: 16px;
-    padding: 8px;
-
-    .Icon {
-        fill: $color-cement;
-    }
-}
-
-.Flyout-content {
-    height: calc(100% - 64px);
-    padding: 24px;
-    overflow: auto;
-}

package/styles/Form/_Form.scss

@@ -1,53 +0,0 @@
-.FormElement-inline {
-    display: table-cell;
-    vertical-align: middle;
-
-    .Label {
-        display: inline-block;
-        margin-right: 10px;
-    }
-
-    .FormElement-control {
-        display: inline-block;
-    }
-}
-
-.FormElementError {
-    font-size: 12px;
-    display: block;
-    margin: 8px 0 0;
-    padding: 0;
-    color: $color-stop;
-}
-
-.FormGroup-inline {
-    > .FormElement {
-        display: inline-block;
-        vertical-align: top;
-
-        &:not(:last-child) {
-            margin-right: 24px;
-        }
-    }
-}
-
-.FormGroupError {
-    position: relative;
-    margin: 24px 0;
-    padding: 0;
-    font-weight: $font-weight-semi-bold;
-    color: $color-stop;
-    border: 2px solid $color-stop;
-    border-radius: 4px;
-
-    > .Icon {
-        @include center(false, true);
-        left: 24px;
-        width: 20px;
-        height: 20px;
-    }
-}
-
-.FormGroupError-content {
-    padding: 24px 32px 24px 60px;
-}

package/styles/GooglePlacesSearchInput/_GooglePlacesSearchInput.scss

@@ -1,3 +0,0 @@
-.GooglePlacesSearchInput {
-    text-align: left;
-}

package/styles/GooglePlacesSearchInput/_PoweredByGoogle.scss

@@ -1,21 +0,0 @@
-.PoweredByGoogle {
-    position: relative;
-    height: 28px;
-    background: $color-pavement;
-    padding: 7px 10px 7px 16px;
-
-    &:hover {
-        cursor: pointer;
-        background: $color-pavement;
-    }
-
-    @include breakpoint($breakpoint-md) {
-        padding: 5px 10px 5px 18px;
-    }
-}
-
-.PoweredByGoogleImage {
-    position: absolute;
-    top: auto;
-    right: 10px;
-}

package/styles/HorizontalRule/_HorizontalRule.scss

@@ -1,48 +0,0 @@
-.HorizontalRule {
-    font-size: 16px;
-    border: none;
-    border-bottom: 1px dotted $color-dashboard;
-    margin: 1.6em 0 1.8em;
-    height: 10px;
-    width: 100%;
-    color: $color-dashboard;
-    display: block;
-    position: relative;
-    text-align: center;
-    background: none;
-
-    > span {
-        display: inline-block;
-        background: $color-white;
-        padding: 0 15px;
-        text-transform: uppercase;
-    }
-}
-
-.HorizontalRule-dotted {
-    border-bottom-style: dotted;
-}
-
-.HorizontalRule-dashed {
-    border-bottom-style: dashed;
-}
-
-.HorizontalRule-solid {
-    border-bottom-style: solid;
-}
-
-.HorizontalRule-left {
-    text-align: left;
-
-    > span {
-        margin-left: 60px;
-    }
-}
-
-.HorizontalRule-right {
-    text-align: right;
-
-    > span {
-        margin-right: 60px;
-    }
-}

package/styles/Label/_Label.scss

@@ -1,6 +0,0 @@
-.Label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: $font-weight-semi-bold;
-    color: $color-cement;
-}