assets/stylesheets/common/create/listing/imports_options.scss
@import '../../../variables/colors';
@import '../../../variables/sizes';
// Imports styles
$w: $sLayout-width;
.ImportOptions {
position: relative;
width: $w;
margin: 8px auto 20px;
&__category-title {
margin-top: 24px;
}
&__row {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
width: 640px;
}
&__input {
&--long {
box-sizing: border-box !important;
width: 540px;
}
}
&__label {
max-width: 100px;
padding-top: 12px;
}
&__form-error {
position: relative;
width: 465px;
padding-left: 20px;
color: $cHighlight-negative;
font-size: 12px;
line-height: 16px;
&::before {
content: '🚫';
position: absolute;
left: 0;
line-height: 18px;
}
}
&__input-error {
margin-top: -4px;
padding: 10px 12px;
border: 1px solid $cHighlight-negative;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background: #FFF4F4;
color: $cHighlight-negative;
font-size: 12px;
line-height: 16px;
}
&__CodeMirror {
position: relative;
width: 540px;
.CodeMirror {
position: relative;
height: 150px;
margin-top: 0;
margin-bottom: 0;
padding: 10px 0;
border-radius: 4px;
background-color: rgb(43, 60, 67);
line-height: 13px;
// Hack so users know they need to scroll down
@media screen and (min-height: 700px) and (max-height: 800px) {
height: 200px;
}
pre {
padding-left: 14px;
&.CodeMirror-placeholder {
color: rgba(255, 255, 255, 0.24);
}
}
}
.CodeMirror-code {
& > div {
margin-bottom: 3px;
}
}
}
&__hint {
width: 540px;
}
&__feedback {
padding-top: 60px;
text-align: center;
}
}
div[class^="gtm-connectors"] {
display: block;
position: absolute;
z-index: 2;
top: 0;
width: 100%;
height: 100%;
}
.ImportOptions-navigationButton {
position: absolute;
top: 28px;
padding: 0;
line-height: 40px !important;
}
.ImportOptions-navigationButton--prev {
left: -80px;
}
.ImportOptions-navigationButton--next {
right: -80px;
}
.ImportOptions-navigationButton.is-disabled:hover {
border-color: $cForms-border;
color: $cForms-border;
}
.ImportOptions-tabs {
display: block;
width: $w;
padding: 28px 0;
overflow-x: hidden;
}
.ImportOptions-tabsList {
display: flex;
flex-wrap: nowrap;
transition: margin 150ms;
}
.ImportOptions-tab {
min-width: 140px;
margin: 0 $sMargin-formRow 0 0;
text-align: center;
}
$import-button-width: 174px;
.ImportButton {
position: relative;
min-width: $import-button-width;
height: 102px;
margin: 16px 16px 0 0;
border: 1px solid $cStructure-mainLine;
border-radius: 4px;
background-color: $cStructure-mainBkg;
color: $cTypography-helpSecondary;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
line-height: 16px;
&:hover {
border-color: $cLocationBlue;
}
&.is-disabled {
background-color: transparent;
}
&:not(.is-enterprise) .ImportButton__tag--beta,
&:not(.is-enterprise) .ImportButton__tag--soon,
&:not(.is-enterprise) .ImportButton__tag--new {
@extend .ImportButton__tag:first-of-type;
}
&__overlay {
display: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: calc(100% - 32px);
height: calc(100% - 24px);
padding: 12px 16px;
border-radius: 4px;
background: #FFF;
text-align: left;
}
&__link {
box-sizing: border-box !important;
text-align: center;
&:hover,
&:focus {
text-decoration: none;
}
}
&__spinner {
&.Spinner {
width: 28px;
height: 28px;
}
}
&__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
&__taglist {
position: absolute;
top: 0;
left: 0;
}
&__tag {
display: none;
position: relative;
top: 0;
left: 0;
height: 16px;
margin-right: 2px;
padding: 1px 6px 2px;
border: 1px solid $cStructure-mainLine;
border-top: 0;
border-radius: 0 0 4px 4px;
background: #F0F0F0;
font-size: 12px;
font-weight: 600;
line-height: 17px;
&--enterprise::before {
content: '';
display: inline-block;
width: 8px;
height: 11px;
margin-right: 6px;
background-image: url($assetsDir + '/images/layout/connectors/locked.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
&:first-of-type {
border-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 0;
}
}
&__step {
display: none;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.is-active {
display: block;
}
}
.title--success {
color: $cHighlight-positive;
}
.title--error {
color: $cHighlight-negative;
}
}
.is-disabled {
.ImportButton__icon,
.ImportButton__name {
opacity: 0.4;
}
}
.is-highlighted {
background-color: $cNavyBlue;
color: $cStructure-grayBkg;
border-color: transparent;
.ImportButton__tag {
background-color: rgba(255, 255, 255, 0.16);
border-color: transparent;
}
}
.is-beta .ImportButton__tag--beta,
.is-soon .ImportButton__tag--soon,
.is-new .ImportButton__tag--new,
.is-enterprise .ImportButton__tag--enterprise {
display: inline-block;
}
.is-disabled:hover .ImportButton__overlay,
.is-disabled:focus .ImportButton__overlay,
.is-disabled .ImportButton__overlay.is-active {
display: block;
}
@mixin importIcon($name, $extension: 'svg') {
.ImportButton .is-#{$name}, .ConnectorInfo .is-#{$name}{
display: block;
width: 65px;
height: 30px;
margin-bottom: 8px;
background-image: url($assetsDir + '/images/layout/connectors/#{$name}.#{$extension}');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
}
@include importIcon(box);
@include importIcon(dropbox);
@include importIcon(gdrive);
@include importIcon(bigquery);
@include importIcon(hive);
@include importIcon(sqlserver);
@include importIcon(mysql);
@include importIcon(postgresql);
@include importIcon(arcgis, png);
@include importIcon(twitter);
@include importIcon(dataobservatory);
@include importIcon(snowflake);
@include importIcon(redshift);
@include importIcon('url');
@include importIcon('file-carto');
@include importIcon('file-csv');
@include importIcon('file-excel');
@include importIcon('file-geojson');
@include importIcon('file-gpkg');
@include importIcon('file-gpx');
@include importIcon('file-kml');
@include importIcon('file-ods');
@include importIcon('file-osm');
@include importIcon('file-shapefile');
@include importIcon('file-mapinfo');
@include importIcon('file-geodatabase');
.SelectedImport {
&__header {
display: flex;
position: relative;
align-items: center;
justify-content: center;
max-width: 940px;
margin: 10px auto 0;
padding-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid $cStructure-mainLine;
}
&__icon {
margin-right: 8px;
}
&__back {
position: absolute;
left: 0;
}
&__desc {
margin-top: 20px;
margin-bottom: 32px;
}
&__tag {
display: inline-block;
align-self: center;
margin-left: 26px;
padding: 0 4px;
border: 1px solid $cTypography-linkSecondary;
border-radius: 2px;
color: $cTypography-helpSecondary;
}
}
.ImportOther {
margin: 12px 16px 0 0;
}
.ImportOther__step1,
.ImportOther__step2,
.ImportOther__step3,
.ImportOther__step4 {
display: none;
&.is-active {
display: flex;
position: relative;
align-items: center;
justify-content: center;
border-radius: 4px;
background-color: $cStructure-mainBkg;
color: $cTypography-helpSecondary;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
line-height: 16px;
}
}
.ImportOther__step1.is-active {
color: $cLocationBlue;
}
.ImportOther__step4.is-active {
align-items: flex-start;
}
.ImportOther__step2,
.ImportOther__step3,
.ImportOther__step4 {
flex-direction: column;
width: $import-button-width;
height: 104px;
border: 1px solid $cLocationBlue;
}
.ImportOther__step1 {
flex-direction: row;
width: $import-button-width;
height: 102px;
border: 1px solid $cStructure-mainLine;
&:hover {
border-color: $cLocationBlue;
}
.icon {
width: 16px;
height: 16px;
margin-right: 8px;
background-image: url($assetsDir + '/images/layout/connectors/add.svg');
background-repeat: no-repeat;
background-position: left center;
}
}
.ImportOther__step2 {
.ImportOther__input {
position: relative;
z-index: 2;
width: 90px;
height: 32px;
margin-top: 12px;
padding: 0 48px 0 12px;
border: 1px solid $cForms-border;
border-radius: 4px;
outline: none;
color: #666;
&:focus {
border-color: #999;
}
}
.ImportOther__inputSubmit {
position: absolute;
z-index: 2;
top: 50%;
right: 24px;
height: 54px;
margin-top: -14px;
padding: 0;
opacity: 1;
background: none;
&.is-disabled {
opacity: 0.4;
cursor: default;
}
}
}
.ImportOther__step3 {
.ImportOther__spinner {
margin-top: 12px;
}
}
.ImportOther__step4 {
box-sizing: border-box;
width: calc(#{$import-button-width} - 32px);
height: 80px;
padding: 12px 16px;
.ImportOther_requestTitle {
margin-bottom: 4px;
color: $cHighlight-positive;
font-weight: 600;
}
.ImportOther__requestButton {
width: 100px;
margin-top: 12px;
}
&.hasError {
.ImportOther_requestTitle {
color: $cHighlight-negative;
}
}
}
.success-icon {
&::before {
content: '';
display: inline-block;
width: 12px;
height: 16px;
margin-right: 6px;
background-image: url($assetsDir + '/images/layout/connectors/request-success.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: 12px;
vertical-align: bottom;
}
}