mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-27 06:04:12 +01:00
112 lines
4.0 KiB
SCSS
112 lines
4.0 KiB
SCSS
/*!
|
|
* @copyright Copyright (C) 2010-2020 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-700 !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;
|
|
|
|
/* 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-ral-nor-150;
|
|
}
|
|
.ibo-tab-container--tab-header{
|
|
@extend %ibo-full-height-content;
|
|
|
|
color: $ibo-tab-container--tab-header--text-color;
|
|
|
|
&:hover{
|
|
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-ral-bol-150;
|
|
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--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;
|
|
} |