iTop/css/backoffice/layout/tab-container/_tab-container.scss

/*
 * @copyright   Copyright (C) 2010-2021 Combodo SARL
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

/* SCSS variables */
$ibo-tab-container--tabs-list--height: 36px !default;
$ibo-tab-container--tabs-list--padding-x: 24px !default;
$ibo-tab-container--tabs-list--background-color: $ibo-color-grey-100 !default;

$ibo-tab-container--tab-header--max-width: 110px !default;
$ibo-tab-container--tab-header--text-color: $ibo-color-grey-800 !default;
$ibo-tab-container--tab-header--text-color--is-active: $ibo-color-blue-800 !default;
$ibo-tab-container--tab-header--text-color--on-hover: $ibo-color-blue-800 !default;
$ibo-tab-container--tab-header--background-color--on-hover: $ibo-color-grey-200 !default;

$ibo-tab-container--tab-toggler--padding-x: 24px !default;

$ibo-tab-container--tab-container--padding-x: 32px !default;
$ibo-tab-container--tab-container--padding-y: 32px !default;

$ibo-tab-container--extra-tabs-container--background-color: $ibo-tab-container--tabs-list--background-color !default;

$ibo-tab-container--extra-tabs-list-toggler--padding-x: 12px !default;

$ibo-tab-container--extra-tabs-list--max-height: 300px !default;
$ibo-tab-container--extra-tabs-list--border-radius: $ibo-border-radius-300;
$ibo-tab-container--extra-tabs-list--background-color: $ibo-tab-container--tabs-list--background-color !default;

$ibo-tab-container--extra-tab-toggler--padding: 8px 16px !default;
$ibo-tab-container--extra-tab-toggler--max-width: 220px !default;
$ibo-tab-container--extra-tab-toggler--text-color: $ibo-color-grey-700 !default;
$ibo-tab-container--extra-tab-toggler--text-color--on-hover: $ibo-color-blue-800 !default;
$ibo-tab-container--extra-tab-toggler--background-color--on-hover: $ibo-color-grey-200 !default;

$ibo-tab-container--tab-container--label--text-color: $ibo-color-grey-600 !default;
$ibo-tab-container--tab-container--label--spacing: 20px !default;
$ibo-tab-container--tab-container--label--margin-bottom: 20px !default;
$ibo-tab-container--tab-container--label--span--margin-left: 40px !default;
$ibo-tab-container--tab-container--label--separator-height: 2px !default;

$ibo-tab--temporary-remote-content--ratio: 5.4 !default;
$ibo-tab--temporary-remote-content--max-height: 300px !default;
$ibo-tab--temporary-remote-content--max-width: calc(#{$ibo-tab--temporary-remote-content--max-height} * #{$ibo-tab--temporary-remote-content--ratio}) !default; // Skeleton ratio is 540/100 for now, so we have to ensure that ratio, otherwise skeletons look bad on very wide screens

$ibo-tab--temporary-remote-content--button--color: $ibo-color-grey-800 !default;

$ibo-tab--temporary-remote-content--button--hover--opacity: 0.5 !default;
$ibo-tab--temporary-remote-content--button--hover--background-color: $ibo-color-grey-900 !default;
$ibo-tab--temporary-remote-content--button--hover--color: $ibo-color-grey-200 !default;

$ibo-tab-container--tab-container--min-height: auto !default;
$ibo-tab-container--tab-container--last--min-height: 60vh !default;

/* Rules */
.ibo-tab-container--tabs-list {
  position: relative;
  @extend %ibo-full-height-content;
  height: $ibo-tab-container--tabs-list--height;

  background-color: $ibo-tab-container--tabs-list--background-color;
  @extend %ibo-font-size-150;
}

.ibo-tab-container--tab-header {
  @extend %ibo-full-height-content;

  color: $ibo-tab-container--tab-header--text-color;

  &:hover:not(.ui-state-disabled) {
    color: $ibo-tab-container--tab-header--text-color--on-hover;
    background-color: $ibo-tab-container--tab-header--background-color--on-hover;
  }

  &.ui-tabs-active {
    @extend %ibo-font-weight-700;
    color: $ibo-tab-container--tab-header--text-color--is-active;
  }
}

.ibo-tab-container--tab-toggler {
  @extend %ibo-fully-centered-content;
  padding-left: $ibo-tab-container--tab-toggler--padding-x;
  padding-right: $ibo-tab-container--tab-toggler--padding-x;

  @extend %ibo-text-truncated-with-ellipsis;
  @extend %ibo-hyperlink-inherited-colors
}

.ibo-tab-container--tab-toggler-label {
  @extend %ibo-text-truncated-with-ellipsis;
}

.ibo-tab-container--extra-tabs-container {
  @extend .ibo-tab-container--tab-header;

  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;

  background-color: $ibo-tab-container--extra-tabs-container--background-color;
}

.ibo-tab-container--extra-tabs-list-toggler {
  @extend .ibo-tab-container--tab-toggler;

  padding-left: $ibo-tab-container--extra-tabs-list-toggler--padding-x;
  padding-right: $ibo-tab-container--extra-tabs-list-toggler--padding-x;
}

.ibo-tab-container--extra-tabs-list {
  position: absolute;
  z-index: 1;
  top: calc(100% + 6px);
  right: 12px;
  max-height: $ibo-tab-container--extra-tabs-list--max-height;
  display: flex;
  flex-direction: column;

  background-color: $ibo-tab-container--extra-tabs-list--background-color;
  border-radius: $ibo-tab-container--extra-tabs-list--border-radius;
  @extend %ibo-elevation-100;
}

.ibo-tab-container--extra-tab-toggler {
  padding: $ibo-tab-container--extra-tab-toggler--padding;
  max-width: $ibo-tab-container--extra-tab-toggler--max-width;

  color: $ibo-tab-container--extra-tab-toggler--text-color;
  @extend %ibo-text-truncated-with-ellipsis;

  &:hover,
  &:active {
    color: $ibo-tab-container--extra-tab-toggler--text-color--on-hover;
    background-color: $ibo-tab-container--extra-tab-toggler--background-color--on-hover;
  }
}

.ibo-tab-container--tab-container {
  padding: $ibo-tab-container--tab-container--padding-y $ibo-tab-container--tab-container--padding-x;
  overflow-x: auto;
}

.ibo-tab-container--tab-container-list.ibo-is-scrollable {
  .ibo-tab-container--tab-container--label {
    display: block;
  }
  .ibo-tab-container--tab-container {
    min-height: $ibo-tab-container--tab-container--min-height;
  }  
  .ibo-tab-container--tab-container:last-child {
    min-height: $ibo-tab-container--tab-container--last--min-height;
  }
}

.ibo-tab-container--tab-container--label {
  display: none;
  margin-bottom: $ibo-tab-container--tab-container--label--margin-bottom;
  overflow-x: hidden;

  > span {
    position: relative;
    padding-left: $ibo-tab-container--tab-container--label--spacing;
    margin-left: $ibo-tab-container--tab-container--label--span--margin-left;
    color: $ibo-tab-container--tab-container--label--text-color;

    @extend %ibo-font-size-250;
  }

  > span::before,
  > span::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: calc(50% - (#{$ibo-tab-container--tab-container--label--separator-height} / 2));
    height: 1px;
    width: 10000px;
    border-top: $ibo-tab-container--tab-container--label--separator-height solid $ibo-tab-container--tab-container--label--text-color;
  }

  > span::before {
    right: 100%;
  }

  > span::after {
    left: 100%;
    margin-left: $ibo-tab-container--tab-container--label--spacing;
  }
}

.ibo-tab--temporary-remote-content {
  position: relative;
}

.ibo-tab--temporary-remote-content--placeholder {
  position: relative;
  height: auto;
  max-height: $ibo-tab--temporary-remote-content--max-height;
  text-align: center;

  > svg {
    max-width: $ibo-tab--temporary-remote-content--max-width;
    max-height: $ibo-tab--temporary-remote-content--max-height;
  }
}

.ibo-tab--temporary-remote-content--button {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;

  height: 100%;
  width: 100%;

  cursor: pointer;
  @extend %ibo-font-size-300;

  background-color: transparent;
  color: $ibo-tab--temporary-remote-content--button--color;

  &:hover {
    opacity: $ibo-tab--temporary-remote-content--button--hover--opacity;
    background-color: $ibo-tab--temporary-remote-content--button--hover--background-color;
    color: $ibo-tab--temporary-remote-content--button--hover--color;
  }
}