scout.form.fields.tabbox.TabBox.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of org.eclipse.scout.rt.ui.html Show documentation
There is a newer version: 25.1.0-beta.0
Show newest version
/*******************************************************************************
 * Copyright (c) 2014-2015 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
 ******************************************************************************/
@tabbox-padding-x: 20px;
@tabbox-focus-arrow-width: 15px;
@tabbox-border-width: 3px;

.tab-box {
  & > .status {
    margin-bottom: @tabbox-border-width;
  }
}

.tab-area {
  margin-top: @group-margin-top;
  margin-left: @mandatory-indicator-width;
  white-space: nowrap;
  position: relative;

  &::after {
    width: 100%;
    height: @tabbox-border-width;
    margin-top: -@tabbox-border-width;
    background-color: @palette-gray-5;
    content: '';
    display: block;
  }

  & > .menubar {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    padding-left: 12px;
    width: auto;
    height: 100%;
    border: none;
    z-index: 1;
    #scout.menubar-background-color-inherit();
    padding-bottom: @tabbox-border-width;

    & > .menubox {

      & > .menu-item {
        height: 18px;
      }

      & > .menu-item:not(.last),
      & > .menu-separator {
        margin-right: 10px;
      }
    }
  }

  & > .status {
    position: absolute;
    margin-left: @field-status-margin-left;
    #scout.status();
    border-bottom: @tabbox-border-width solid transparent;
  }

  .tab-box.has-tooltip > & > .status {
    #scout.tooltip-status();
  }

  .tab-box.has-info > & > .status {
    #scout.info-status();
  }

  .tab-box.has-warning > & > .status {
    #scout.warning-status();
  }

  .tab-box.has-error > & > .status {
    #scout.error-status();
  }
}

.tab-item {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  #scout.font-text-normal(@font-weight-bold);
  color: @title-color;
  border: none;
  background-color: transparent;
  padding: 0 @tabbox-padding-x;
  border-bottom: solid @tabbox-border-width transparent;
  cursor: pointer;

  &.selected {
    color: @active-color;
    border-bottom-color: @active-color;
  }

  &.marked:not(.selected) {
    border-bottom-color: @palette-gray-6;
  }

  &:hover {
    color: @hover-color;
  }

  &:active {
    color: @active-color;
  }

  &:focus {
    outline: none;
  }

  &:focus::before {
    #scout.font-icon();
    content: @icon-angle-right;
    color: @active-color;
    position: absolute;
    top: @group-title-padding-y;
    left: @tabbox-padding-x - @tabbox-focus-arrow-width;
    width: @tabbox-focus-arrow-width;
    text-align: center;
  }

  & > .label {
    padding: @group-title-padding-y 0;
    display: inline-block;
    vertical-align: middle;
  }

  & > .status {
    margin-left: @field-status-margin-left;
    padding: 4px 0;
    display: inline-block;
    vertical-align: middle;
    #scout.status();
  }

  &.has-tooltip,
  &.has-info,
  &.has-warning,
  &.has-error {
    padding-right: @field-status-margin-left;
  }

  &.has-tooltip > .status {
    #scout.tooltip-status();
  }

  &.has-info > .status {
    #scout.info-status();
  }

  &.has-warning > .status {
    #scout.warning-status();
  }

  &.has-error > .status {
    #scout.error-status();
  }
}

.overflow-tab-item {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  padding: 0px 0px;

  &::before {
    #scout.font-icon();
    position: relative;
    font-size: 17px;
    color: @icon-color;
    content: @icon-ellipsis-v;
  }
}