composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
support/3.2
iTop/css/backoffice/layout/tab-container/_tab-container.scss
Molkobain ad36066126 📝 Copyright year bump
2024-05-06 18:35:31 +02:00

249 lines
8.7 KiB
SCSS
Raw Permalink Blame History

/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables */
$ibo-tab-container--hidden-tabs-on-init--display: none !default;
$ibo-tab-container--tabs-list--height: 36px !default;
$ibo-tab-container--tabs-list--padding-x: $ibo-spacing-600 !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: $ibo-spacing-600 !default;
$ibo-tab-container--tab-container--padding-x: $ibo-spacing-700 !default;
$ibo-tab-container--tab-container--padding-y: $ibo-spacing-700 !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: $ibo-spacing-400 !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: $ibo-spacing-300 $ibo-spacing-500 !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--extra-tab-toggler--tooltip-title--margin-bottom: $ibo-spacing-500 !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:not(.ibo-is-scrollable):not([data-status="loaded"]) {
.ibo-tab-container--tab-container:not(:first-child) {
display: $ibo-tab-container--hidden-tabs-on-init--display;
}
}
.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: fixed;
z-index: 10; /* To be above linkedset datatables */
/* top: Must be computed on menu opening, if set back to absolute, value must be calc(100% + 6px); */
/* right: Must be computed on menu opening, if set back to absolute, value must be 12px; */
max-height: $ibo-tab-container--extra-tabs-list--max-height;
display: flex;
flex-direction: column;
overflow-y: auto;
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;
overflow-x: clip; /* For unknown reason yet, this is necessary otherwise the element will have almost no height */
&: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--extra-tab-toggler--tooltip-title {
@extend %ibo-font-weight-600;
margin-bottom: $ibo-tab-container--extra-tab-toggler--tooltip-title--margin-bottom;
}
.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:not(:first-child:nth-last-child(2)) .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:not(:only-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;
}
}
Reference in New Issue View Git Blame Copy Permalink