web-console/src/views/sql-data-loader-view/schema-step/schema-step.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../../variables';

$loader-controls-height: 30px;
$rollup-analysis-height: 160px;
$controls-width: 305px;
$gap: 15px;

.schema-step {
  .destination-button .#{$bp-ns}-button-text {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 150%;
  }

  .schema-container {
    .loader-controls {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: $loader-controls-height;

      .control-line {
        white-space: nowrap;

        & > * {
          display: inline-block;
          vertical-align: top;
        }
      }

      .left {
        position: absolute;
        bottom: 0;
        left: 0;

        & > * {
          margin-right: 10px;
        }
      }

      .right {
        position: absolute;
        bottom: 0;
        right: $controls-width + $gap;

        & > * {
          margin-left: 10px;
        }

        .column-filter-control {
          width: 250px;
        }
      }

      .time-column-warning {
        margin-left: 10px;
      }
    }

    .preview {
      position: absolute;
      top: $loader-controls-height + $gap;
      bottom: 0;
      left: 0;
      right: $controls-width + $gap;

      .preview-table,
      .column-list,
      .flexible-query-input,
      .preview-error {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }

    .controls {
      position: absolute;
      top: $loader-controls-height + $gap;
      bottom: 0;
      right: 0;
      width: $controls-width;
      display: flex;
      flex-direction: column;
      gap: 10px;

      .time-column-warning {
        .#{$bp-ns}-heading {
          margin-bottom: 15px;
        }
      }

      .top-controls {
        flex: 1;
        overflow: auto;
      }

      .bottom-controls {
        .prev-next-bar {
          position: relative;
          padding-top: 15px;

          .next {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    .rollup-analysis-pane {
      position: absolute;
      top: $loader-controls-height + $gap;
      height: $rollup-analysis-height;
      left: 0;
      right: $controls-width + $gap;
      width: auto;
    }

    &.with-analysis {
      .preview {
        top: $loader-controls-height + $gap + $rollup-analysis-height + $gap;
      }
    }
  }
}