superset-frontend/packages/superset-frontend/src/dashboard/stylesheets/filter-scope-selector.less

/**
 * 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 '../../../stylesheets/less/variables.less';

.filter-scope-container {
  display: flex;
  flex-direction: column;
  height: 80%;
  margin-right: -24px;
  font-size: @font-size-m;

  .nav.nav-tabs {
    border: none;
  }

  .filter-scope-body {
    flex: 1;
    max-height: calc(100% - 128px);

    .filter-field-pane,
    .filter-scope-pane {
      overflow-y: scroll;
    }
  }

  .warning-message {
    padding: 24px;
  }
}

.filter-scope-header {
  height: 64px;
  border-bottom: 1px solid @gray-light;
  padding-left: 24px;
  margin-left: -24px;

  h4 {
    margin-top: 0;
  }

  .selected-fields {
    margin: 12px 0 16px;
    visibility: hidden;

    &.multi-edit-mode {
      visibility: visible;
    }

    .selected-scopes {
      padding-left: 5px;
    }
  }
}

.filters-scope-selector {
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;

  a,
  a:active,
  a:hover {
    color: @almost-black;
    text-decoration: none;
  }

  .react-checkbox-tree .rct-icon.rct-icon-expand-all,
  .react-checkbox-tree .rct-icon.rct-icon-collapse-all {
    font-size: @font-size-m;
    font-family: @font-family-sans-serif;
    color: @brand-primary;

    &::before {
      content: '';
    }

    &:hover {
      text-decoration: underline;
    }

    &:focus {
      outline: none;
    }
  }

  .filter-field-pane {
    position: relative;
    width: 40%;
    padding: 16px 16px 16px 0;
    border-right: 1px solid @gray-light;

    .filter-container {
      label {
        font-weight: @font-weight-normal;
        margin: 0 0 0 16px;
        word-break: break-all;
      }
    }

    .filter-field-item {
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      margin-left: -24px;

      &.is-selected {
        border: 1px solid @gray-heading;
        border-radius: @border-radius-large;
        background-color: @gray-bg;
        margin-left: -25px;
      }
    }

    .react-checkbox-tree {
      .rct-title .root {
        font-weight: @font-weight-bold;
      }

      .rct-text {
        height: 40px;
      }
    }
  }

  .filter-scope-pane {
    position: relative;
    flex: 1;
    padding: 16px 24px 16px 16px;
  }

  .react-checkbox-tree {
    flex-direction: column;
    color: @almost-black;
    font-size: @font-size-m;

    .filter-scope-type {
      padding: 8px 0;
      display: block;

      .type-indicator {
        position: relative;
        top: 3px;
        margin-right: 8px;
      }

      &.chart {
        font-weight: @font-weight-normal;
      }

      &.selected-filter {
        padding-left: 28px;
        position: relative;
        color: @gray-heading;

        &::before {
          content: ' ';
          position: absolute;
          left: 0;
          top: 50%;
          width: 18px;
          height: 18px;
          border-radius: @border-radius-normal;
          margin-top: -9px;
          box-shadow: inset 0 0 0 2px @gray-light;
          background: #f2f2f2;
        }
      }

      &.root {
        font-weight: @font-weight-bold;
      }
    }

    .rct-checkbox {
      svg {
        position: relative;
        top: 3px;
        width: 18px;
      }
    }

    .rct-node-leaf {
      .rct-bare-label {
        &::before {
          padding-left: 5px;
        }
      }
    }

    .rct-options {
      text-align: left;
      margin-left: 0;
      margin-bottom: 8px;
    }

    .rct-text {
      margin: 0;
      display: flex;
    }

    .rct-title {
      display: block;
    }

    // disable style from react-checkbox-trees.css
    .rct-node-clickable:hover,
    .rct-node-clickable:focus,
    label:hover,
    label:active {
      background: none !important;
    }
  }

  .multi-edit-mode {
    &.filter-scope-pane {
      .rct-node.rct-node-leaf .filter-scope-type.filter_box {
        display: none;
      }
    }

    .filter-field-item {
      padding: 0 16px 0 50px;
      margin-left: -50px;

      &.is-selected {
        margin-left: -51px;
      }
    }
  }

  .scope-search {
    position: absolute;
    right: 16px;
    top: 16px;
    border-radius: @border-radius-large;
    border: 1px solid @gray-light;
    padding: 4px 8px 4px 8px;
    font-size: @font-size-m;
    outline: none;

    &:focus {
      border: 1px solid @brand-primary;
    }
  }
}