eclipse-scout-core/src/group/Group.less

/*
 * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 */
.group {
  position: relative;
}

.group-header {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &.disabled {
    cursor: default;
  }

  &.loading {
    & > .loading-indicator {
      #scout.loading-indicator(16px);
      left: inherit;
      right: 0;
    }
  }
}

.group-title {
  font-size: @font-size-plus;
  font-weight: @font-weight-bold;
  #scout.overflow-ellipsis-nowrap();

  .group-header:focus > & {
    color: @active-color;
    text-decoration: underline;
  }
}

.group-title-suffix {
  margin-left: 8px;
  font-size: @font-size-plus;
}

.group-icon.with-title {
  margin-right: 8px;
}

.group-collapse-icon {
  /* Set to same height as before element to prevent header from getting larger */
  height: @font-size-large;
  transition: transform 0.3s;
  margin-right: 8px;
  margin-top: @group-collapse-icon-margin-top; /* since icon height is reduced it needs to be moved up a little to center it again */

  &::before {
    #scout.font-icon();
    content: @icon-angle-down;
    font-size: @font-size-large;
  }

  &.collapsed {
    #scout.transform(rotate(-90deg));
  }
}

.group-header.collapse-right {
  & > .group-title {
    flex-grow: 1;
  }

  & > .group-title-suffix {
    text-align: right;
  }

  & > .group-collapse-icon {
    transition: transform 0s;
    margin-right: 0;
    margin-left: 8px;
    margin-top: 0;

    &::before {
      content: @icon-angle-down;
    }

    &.collapsed {
      #scout.transform(rotatex(180deg));
    }
  }
}

.group.collapse-bottom {
  & > .group-header.custom-header-widget {
    cursor: default;
  }

  & > .group-body {
    margin-bottom: 0;
  }

  & > .group-footer {
    display: flex;

    .collapsible& {
      cursor: pointer;
    }

    & > .group-collapse-border {
      flex-grow: 1;
      margin-top: 8px;
      margin-bottom: 8px;
      border-style: solid;
      border-width: 0 0 1px 0;
      border-color: @border-color;
    }

    & > .group-collapse-icon {
      transition: transform 0s;
      margin: 0;

      &::before {
        content: @icon-angle-up;
        padding: 0 4px;
      }

      &.collapsed {
        #scout.transform(rotatex(180deg));
      }
    }

    &:hover > .group-collapse-icon::before {
      color: @highlight-color;
    }
  }
}