@spothero/ui 15.10.9 → 16.0.0-beta.0

package/styles/Notification/_Notification.scss

@@ -1,113 +0,0 @@
-.NotificationContainer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: $z-index-notification;
-}
-
-.Notification {
-    display: table;
-    position: relative;
-    width: 100%;
-    min-height: 64px;
-    padding: 16px 0;
-    color: $color-fuel;
-    background-color: $color-white;
-    font-weight: $font-weight-semi-bold;
-    transform: translateY(100%);
-    transition: transform $animation, opacity $animation;
-
-    p {
-        margin: 0;
-    }
-
-    .Icon-cancel {
-        width: 12px;
-        fill: $color-fuel;
-    }
-}
-
-.Notification-content-container {
-    &.container {
-        display: table-cell;
-        vertical-align: middle;
-        padding: 0 50px;
-
-        @include breakpoint($breakpoint-md) {
-            padding: 0 60px;
-        }
-
-        @include breakpoint($breakpoint-lg) {
-            padding: 0 70px;
-        }
-    }
-
-    > .Icon {
-        @include center(false, true);
-        left: 16px;
-        width: 20px;
-        height: 20px;
-
-        @include breakpoint($breakpoint-md) {
-            left: 24px;
-        }
-
-        @include breakpoint($breakpoint-lg) {
-            left: 32px;
-        }
-    }
-}
-
-.Notification-hide {
-    @include center(false, true);
-    left: auto;
-    right: 16px;
-    padding: 0;
-
-    @include breakpoint($breakpoint-md) {
-        right: 24px;
-    }
-
-    @include breakpoint($breakpoint-lg) {
-        right: 32px;
-    }
-}
-
-.Notification-showing {
-    transform: translateY(0);
-}
-
-.Notification-info {
-    border-top: 4px solid $color-fuel;
-}
-
-.Notification-success {
-    border-top: 4px solid $color-go;
-
-    .Notification-content-container {
-        > .Icon {
-            fill: $color-go;
-        }
-    }
-}
-
-.Notification-warning {
-    border-top: 4px solid $color-caution;
-
-    .Notification-content-container {
-        > .Icon {
-            fill: $color-caution;
-        }
-    }
-}
-
-.Notification-error {
-    border-top: 4px solid $color-stop;
-
-    .Notification-content-container {
-        > .Icon {
-            fill: $color-stop;
-        }
-    }
-}

package/styles/PasswordControl/_PasswordControl.scss

@@ -1,86 +0,0 @@
-.PasswordControl {
-    &.FormElement-contains-error {
-        @extend %form-element-error;
-    }
-
-    .FormElement-help-text {
-        font-size: 12px;
-        margin-top: 8px;
-        color: $color-cement;
-    }
-}
-
-.PasswordControl-input {
-    position: relative;
-    height: 38px;
-
-    .FormElement-item {
-        padding-right: 66px;
-    }
-
-    @include breakpoint($breakpoint-md) {
-        .FormElement-item {
-            padding-right: 110px;
-        }
-    }
-}
-
-.PasswordControl-show {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 56px;
-    height: 100%;
-    padding: 11px 0 0;
-
-    .Checkbox {
-        display: none;
-
-        // Chakra's implementation created some small issues
-        // with how elements were positioned, this updates the
-        // element to parody the original design
-        bottom: 2px;
-
-        .Label {
-            color: $color-cement;
-
-            &::before {
-                background-color: $color-white;
-            }
-        }
-    }
-
-    .TextButton {
-        font-weight: $font-weight-normal;
-        color: $color-cement;
-        text-transform: uppercase;
-
-        &:not([disabled]) {
-            &:hover {
-                color: $color-cement;
-            }
-        }
-    }
-
-    @include breakpoint($breakpoint-md) {
-        width: 100px;
-        height: calc(100% - 2px);
-        margin: 1px 1px 0 0;
-        padding: 10px 0 0 10px;
-        background-color: $color-pavement;
-        border-left: 1px solid $color-dashboard;
-        border-radius: 0 4px 4px 0;
-
-        .Checkbox {
-            display: block;
-        }
-
-        .TextButton {
-            display: none;
-        }
-    }
-}
-
-.PasswordControl-forgot {
-    margin: 1em 0 0;
-}

package/styles/PulseLoader/_PulseLoader.scss

@@ -1,60 +0,0 @@
-@keyframes pulse {
-    0% {
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-    40% {
-        width: 100%;
-        height: 100%;
-        opacity: 0.8;
-    }
-    50% {
-        width: 100%;
-        height: 100%;
-        opacity: 1;
-    }
-    60% {
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-    100% {
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-}
-
-.PulseLoader-pulse {
-    position: relative;
-}
-
-.PulseLoader-pulse-outer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.PulseLoader-pulse-inner {
-    position: absolute;
-    width: calc(100% - 21px);
-    height: calc(100% - 21px);
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.PulseLoader-pulse-ring {
-    position: relative;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border: 7px solid $color-shift;
-    opacity: 1;
-    border-radius: 50%;
-    animation: pulse 2s ease-out infinite;
-}

package/styles/Radio/_Radio.scss

@@ -1,93 +0,0 @@
-.Radio {
-    position: relative;
-
-    %radio-common {
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        background-color: $color-white;
-    }
-
-    .FormElement-item {
-        @extend %radio-common;
-        top: 2px;
-        left: 1px;
-        overflow: hidden;
-        opacity: 0;
-        z-index: $z-index-mid;
-
-        &:checked {
-            ~ .Icon {
-                opacity: 1;
-            }
-
-            ~ .Label {
-                &::before {
-                    border-color: $color-shift;
-                    border: 5px solid $color-shift;
-                    background-color: $color-white;
-                }
-            }
-        }
-
-        &:disabled {
-            ~ .Label {
-                color: $color-dashboard;
-                cursor: not-allowed;
-
-                &::before {
-                    border-color: $color-dashboard;
-                }
-            }
-
-            &:checked {
-                ~ .Label {
-                    &::before {
-                        border: 5px solid $color-dashboard;
-                        background-color: $color-pavement;
-                    }
-                }
-            }
-        }
-    }
-
-    .Label {
-        position: relative;
-        padding-left: 28px;
-        margin-bottom: 16px;
-        font-weight: $font-weight-normal;
-        color: $color-black;
-
-        &::before {
-            @extend %radio-common;
-
-            // Chakra's implementation created some small issues
-            // with how elements were positioned, this updates the
-            // element to parody the original design
-            top: 1px;
-            left: 0;
-            content: "";
-            border: 1px solid $color-dashboard;
-            border-radius: 50%;
-            transition: background-color $animation, border-color $animation;
-        }
-    }
-}
-
-.RadioGroup {
-    &.FormElement-contains-error {
-        .FormElement-control-container {
-            > .Label {
-                color: $color-stop;
-            }
-        }
-
-        .Radio {
-            .Label {
-                &::before {
-                    border-color: $color-stop;
-                }
-            }
-        }
-    }
-}

package/styles/Select/_Select.scss

@@ -1,94 +0,0 @@
-.Select {
-    @extend %form-element;
-
-    option {
-        color: $color-black;
-        font-weight: $font-weight-normal;
-
-        &:disabled {
-            color: $color-cement;
-        }
-    }
-
-    .Select-icon {
-        @include center;
-        line-height: 1;
-
-        .Icon {
-            width: 16px;
-            fill: $color-cement;
-        }
-    }
-
-    .Select-dropdown-icon {
-        @include center(false, true);
-        left: auto;
-        right: 16px;
-        width: 10px;
-        height: 10px;
-        fill: $color-shift;
-        pointer-events: none;
-    }
-
-    .Loader {
-        @include center(false, true);
-        left: auto;
-        right: 16px;
-        pointer-events: none;
-    }
-
-    &.FormElement-with-icon-left {
-        .FormElement-item {
-            padding-left: 40px;
-        }
-
-        .Select-icon {
-            left: 20px;
-        }
-    }
-
-    &.FormElement-with-icon-right {
-        .FormElement-item {
-            padding-right: 40px;
-        }
-
-        .Select-icon {
-            left: auto;
-            right: 4px;
-        }
-
-        .Select-dropdown-icon {
-            display: none;
-        }
-    }
-
-    &.FormElement-contains-error {
-        .Select-dropdown-icon {
-            fill: $color-stop;
-        }
-    }
-
-    .FormElement-item {
-        padding-right: 36px;
-
-        &:focus {
-            + .Select-dropdown-icon {
-                fill: $color-go;
-            }
-        }
-
-        &:disabled {
-            + .Select-dropdown-icon {
-                fill: $color-cement;
-            }
-        }
-
-        &::-ms-expand {
-            display: none;
-        }
-
-        &.FormElement-item-placeholder {
-            color: $color-dashboard;
-        }
-    }
-}

package/styles/Tabs/_Tabs.scss

@@ -1,57 +0,0 @@
-.Tabs {
-    width: 100%;
-}
-
-.TabNavigation {
-    padding: 16px;
-
-    @include breakpoint($breakpoint-md) {
-        padding: 0 30px;
-        border-bottom: 1px solid $color-dashboard;
-    }
-}
-
-.TabNavigation-links {
-    display: none;
-
-    @include breakpoint($breakpoint-md) {
-        display: block;
-    }
-}
-
-.TabNavigation-select {
-    @include breakpoint($breakpoint-md) {
-        display: none;
-    }
-}
-
-.Tab {
-    font-size: 14px;
-    display: inline-block;
-    padding: 0 20px 16px;
-    font-weight: $font-weight-semi-bold;
-    color: $color-cement;
-    border-bottom: 4px solid transparent;
-    border-radius: 0;
-}
-
-.Tab-active {
-    color: $color-fuel;
-    border-bottom: 4px solid $color-go;
-}
-
-.TabContent {
-    padding: 16px;
-
-    @include breakpoint($breakpoint-md) {
-        padding: 30px;
-    }
-}
-
-.TabPanel {
-    display: none;
-}
-
-.TabPanel-active {
-    display: block;
-}

package/styles/TextArea/_TextArea.scss

@@ -1,26 +0,0 @@
-.TextArea {
-    @extend %form-element;
-
-    .FormElement-control {
-        position: relative;
-    }
-
-    .FormElement-item {
-        min-height: 100px;
-        resize: none;
-    }
-
-    .Icon {
-        position: absolute;
-        top: 11px;
-        left: 8px;
-        width: 16px;
-        fill: $color-cement;
-    }
-}
-
-.TextArea-with-icon {
-    .FormElement-item {
-        padding-left: 32px;
-    }
-}

package/styles/TextInput/_TextInput.scss

@@ -1,43 +0,0 @@
-.TextInput {
-    @extend %form-element;
-
-    .Icon {
-        @include center;
-        width: 16px;
-        fill: $color-cement;
-    }
-
-    .Loader {
-        @include center(false, true);
-        left: auto;
-        right: 16px;
-        pointer-events: none;
-    }
-
-    &.FormElement-with-icon-left {
-        .FormElement-item {
-            padding-left: 40px;
-        }
-
-        .Icon {
-            left: 20px;
-        }
-    }
-
-    &.FormElement-with-icon-right {
-        .FormElement-item {
-            padding-right: 40px;
-        }
-
-        .Icon {
-            left: auto;
-            right: 4px;
-        }
-    }
-
-    &.FormElement-loading {
-        .FormElement-item {
-            padding-right: 40px;
-        }
-    }
-}

package/styles/Tooltip/_Tooltip.scss

@@ -1,108 +0,0 @@
-$tooltip-color: rgba($color-black, 0.9) !default;
-
-.Tooltip {
-    position: absolute;
-    z-index: $z-index-modal;
-    display: block;
-    visibility: visible;
-    line-height: 1.4;
-    transition: opacity 0.25s ease;
-    opacity: 0;
-}
-
-.Tooltip-showing {
-    opacity: 1;
-}
-
-.Tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-}
-
-.Tooltip-top {
-    margin-top: -3px;
-    padding: 5px 0;
-
-    .Tooltip-arrow {
-        bottom: -3px;
-        left: 50%;
-        margin-left: -8px;
-        border-width: 8px 8px 0;
-        border-top-color: $tooltip-color;
-    }
-}
-
-.Tooltip-right {
-    margin-left: 3px;
-    padding: 0 5px;
-
-    .Tooltip-arrow {
-        top: 50%;
-        left: -3px;
-        margin-top: -8px;
-        border-width: 8px 8px 8px 0;
-        border-right-color: $tooltip-color;
-    }
-}
-
-.Tooltip-bottom {
-    margin-top: 3px;
-    padding: 5px 0;
-
-    .Tooltip-arrow {
-        top: -3px;
-        left: 50%;
-        margin-left: -8px;
-        border-width: 0 8px 8px;
-        border-bottom-color: $tooltip-color;
-    }
-}
-
-.Tooltip-left {
-    margin-left: -3px;
-    padding: 0 5px;
-
-    .Tooltip-arrow {
-        top: 50%;
-        right: -3px;
-        margin-top: -8px;
-        border-width: 8px 0 8px 8px;
-        border-left-color: $tooltip-color;
-    }
-}
-
-.Tooltip-content {
-    max-width: 250px;
-    padding: 10px 32px 10px 12px;
-    color: $color-white;
-    text-align: left;
-    text-decoration: none;
-    background-color: $tooltip-color;
-    border-radius: 4px;
-
-    .Tooltip-no-close & {
-        padding-right: 12px;
-    }
-}
-
-.Tooltip-close {
-    position: absolute;
-    right: 8px;
-    top: 0;
-    bottom: 0;
-    margin: 0;
-    padding: 0;
-
-    .Icon {
-        width: 12px;
-        fill: $color-white;
-    }
-
-    .Tooltip-left &,
-    .Tooltip-right & {
-        right: 12px;
-    }
-}

package/styles/_index.scss

@@ -1,34 +0,0 @@
-@import "common/sass/control-sizing";
-@import "common/sass/disable-scrolling";
-@import "common/sass/forms";
-@import "Alert/Alert";
-@import "Badge/Badge";
-@import "v1/components/Button/Button";
-@import "Chart/Chart";
-@import "Checkbox/Checkbox";
-@import "DateTime/DateTime";
-@import "ErrorBoundary/ErrorBoundary";
-@import "Flyout/Flyout";
-@import "Form/Form";
-@import "HorizontalRule/HorizontalRule";
-@import "v1/components/Image/Image";
-@import "Label/Label";
-@import "v1/components/Loader/Loader";
-@import "v1/components/Modal/Modal";
-@import "Notification/Notification";
-@import "v1/components/Panel/Panel";
-@import "PulseLoader/PulseLoader";
-@import "Radio/Radio";
-@import "Select/Select";
-@import "v1/components/Table/Table";
-@import "Tabs/Tabs";
-@import "TextArea/TextArea";
-@import "v1/components/TextButton/TextButton";
-@import "TextInput/TextInput";
-@import "Tooltip/Tooltip";
-
-// the following imports are going at the end as they use and build on styles from above
-@import "AutoSuggestInput/AutoSuggestInput";
-@import "GooglePlacesSearchInput/GooglePlacesSearchInput";
-@import "GooglePlacesSearchInput/PoweredByGoogle";
-@import "PasswordControl/PasswordControl";

package/styles/common/sass/_control-sizing.scss

@@ -1,5 +0,0 @@
-%control-size {
-    font-size: 14px;
-    padding: 0 10px;
-    border-radius: 4px;
-}