ui-modules/blueprint-composer/app/components/catalog-selector/catalog-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.
 */
catalog-selector {
  @duration: 0.3s;
  @duration-item: 0.1s;
  
  display: block;
  margin-top: 15px;
  //height: 100%; //makes it too big
  
  .grid {
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .pagination {
    margin-top: 0;
    margin-bottom: 0;
  }

  .catalog-palette {
    padding-left: 10px;
    padding-right: 10px;
  }
  .catalog-palette-item {
    padding-left: 5px;
    padding-right: 5px;
    height: 96px;
    &.item-compact {
        height: 75px;
    }

    &.item-compact-list,
    &.item-full-width {
        .item {
            display: flex;
            flex-direction: horizontal;
            .item-logo {
                flex: 0 0 auto;
                width: auto;
                img {
                    margin: 0;
                    width: auto;
                }
            }
            .item-content {
                flex: 1 1 auto;
                display: flex;
                align-items: center;
                h3 {
                    text-align: left;
                    font-size: 1em;
                    margin-left: 8px;
                }
            }
        }
    }
    &.item-compact-list{
      height: 30px;
      .item {
        .item-logo {
          height: 20px;
          min-width: 20px;
        }
      }
    }
    &.item-full-width{
      .item {
        .item-logo {
          height: 78px;
          min-width: 90px;
        }
      }
    }
  }
  .catalog-palette-footer {
    padding-bottom: 5px;
  }
  
  .item {
    margin-top: 9px;
    padding: 3px;
    cursor: copy;
    transition: all @duration-item ease;
    position: relative;
    background: white; //useful when dragging
    border: 1px solid #ccc;  // same colour as input controls, works well with rgb(0,0,0,N) used for shadow  
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
    &:hover {
      border: none;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 4px 1px rgba(0, 0, 0, 0.6);
      margin: -2px;
      padding: 5px;
      
      margin-top: 7px;
      margin-bottom: -2px;
      padding-top: 3px;
      padding-bottom: 7px;

      .fa-info-circle {
        opacity: 1;
      }
    }
    .drag-frame {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        border: 3px solid @brand-primary;
        width: 100%;
        height: 100%;
    }

    .fa-info-circle {
      position: absolute;
      top: 2px;
      right: 2px;
      padding: 3px 3px 3px 4px;  // this seems to center it better than 3px all around
      opacity: 0;
      transition: opacity @duration ease, color @duration ease;
      cursor: pointer;
      color: mix(@gray-light, @gray-lighter, 50%);
      background-color: rgba(255, 255, 255, 0.75);
      border-radius: 10px;
      &:hover {
        color: @gray;
      }
    }

    .item-logo {
      position: relative;
      width: 100%;
      height: 60px;
      overflow: hidden;

      & > img {
        -webkit-user-drag: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }

    .item-content {
      &.deprecated {
        color: @gray-light;
      }
      padding-left: 2px;
      padding-right: 2px;
      padding-top: 2px;
      padding-bottom: 4px;
      overflow: hidden;

      h3 {
        font-size: 0.75em;
        text-align: center;
        margin: 0;
        .text-overflow();
      }
    }
  }
  .form-group {
      margin-top: 3px;
      margin-bottom: 3px;
  }
  
  .spinner-area {
    height: 300px;
    position: relative;

    .spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);

      .svg-container {
        width: 50px;
        height: 50px;
        transform-origin: 50% 50%;
        animation: interstitial-spinner-animation 1.0s infinite linear;

        circle {
          fill: none;
          stroke-width: 7;
          &.foreground {
            stroke: @brand-primary;
            stroke-dasharray: 105 360;
          }
          &.background {
            stroke: rgba(0, 0, 0, 0.05);
          }
        }

        @keyframes interstitial-spinner-animation {
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
  .catalog-palette-footer {
    .palette-footer-message {
        .btn {
          font-size: inherit;
          padding: 3px 8px;
          margin-left: 1em;
          font-style: normal;
        }
        text-align: right;
        // useful if it wraps, e.g. because pagination buttons show:
        line-height: 2;
        margin-top: -2px;
        .palette-footer-explanation {
          line-height: 1.5em;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
    }
    div[uib-pagination] {
      margin-left: 1em;
    }
    .no-match {
      text-align: center;
      font-size: 120%;
    }
    .no-match.icon {
      font-size: 8em;
      margin-top: 24px;
      margin-bottom: 6px;
      color: @gray-lighter;
    }
  }
}

.catalog-selector-popover {
  // these numbers are extremely brittle, for instance -5px or -8px causes it to shift up 100px or so
  // old discussion in history
  margin-top: -6px;
  max-width: 400px;
    
  .palette-item-quick-info {
    word-wrap: break-word;
    word-break: break-word;
    .quick-info-metadata {
      .text-muted();
      .text-overflow();
      white-space: normal;
      word-break: break-all;
      p {
        margin-bottom: 0;
        margin-left: 1.5em;
        font-size: 90%;
        .type-symbolic-name {
            font-weight: bold;
        }
        i { height: 100%; }
      }
      .mini-icon {
        width: 1.5em;
        overflow-x: visible;
        margin-left: -1.75em;
        text-align: center;
      }
      .label {
        line-height: 2.2;
      }
      .closer .br-icon-close-bar {
        stroke: @brand-primary;
      }
    }
    .deprecated-marker {
      float: right;
      color: @brand-warning;
    }
    .quick-info-description {
        border-top: 1px solid @popover-border-color;
        border-bottom: 1px solid @popover-border-color;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .palette-item-tag {
        margin-right: 4px;
    }
    .quick-info-title {
        background-color: @gray-lightest;
        border-bottom: 1px solid @popover-border-color;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -10px;
        margin-bottom: 12px;
        padding: 8px 16px 6px 16px;
        border-radius: 5px 5px 0 0;
        .closer {
            margin-top: 6px;
        }
    }
    .closer {
        width: 10px;
        > svg { width: 10px; } 
        cursor: pointer;
        margin-left: 6px;
    }
    .quick-info-buttons {
        border-top: 1px solid @popover-border-color;
        margin-top: 10px;
        padding-top: 10px;
        display: flex;
        div.spacer {
            flex: 1 1 auto;
        }
        button {
            padding: 6px 9px;
            line-height: 1;
            margin-left: 12px;
        }
        .select-item-button {
            flex: 0 1 auto;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
  }

  p:last-child {
    margin-bottom: 0;
  }

}