composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3123 - Refactor Directories

Browse Source
This commit is contained in:
Eric
2020-12-02 13:18:01 +01:00
parent d1b12ee04b
commit 15aa9e508c
259 changed files with 862 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
css/backoffice/layout/_all.scss
View File

@@ -1,34 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
@import "navigation-menu";
@import "top-bar";
@import "content";
@import "tab-container/tab-container";
@import "tab-container/tab";
@import "multi-column/multi-column";
@import "multi-column/column";
@import "dashboard/dashboard";
@import "object-details";
@import "activity-panel/activity-panel";
@import "activity-panel/activity-entry";
@import "activity-panel/caselog-entry";
@import "activity-panel/edits-entry";
@import "activity-panel/transition-entry";
@import "activity-panel/caselog-entry-form";
@import "blocks-integrations/panel-with-tab-container";

32
css/backoffice/layout/_content.scss
View File

@@ -1,32 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
.ibo-center-container--with-side-content{
display: flex;
align-items: stretch;
#ibo-main-content{
flex-grow: 1; /* To occupy maximum width, side content will handle its width */
overflow-x: auto; /* To avoid main content to be too wide when the blocks within it have no width constraints. This way it will occupy only the remaining space left by the side part. */
}
}
#ibo-side-content{
background-color: $ibo-content-block--background-color;
border-left: $ibo-content-block--border;
}

751
css/backoffice/layout/_navigation-menu.scss
View File

@@ -1,751 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables (can be overloaded) */
$ibo-navigation-menu-height: 100vh !default;
$ibo-navigation-menu--body--padding-x: 16px !default;
$ibo-navigation-menu--body--padding-y: 16px !default;
$ibo-navigation-menu--body--width-collapsed: 60px !default;
$ibo-navigation-menu--body--width-expanded: 310px !default;
$ibo-navigation-menu--body--background-color: $ibo-color-blue-grey-900 !default;
$ibo-navigation-menu--body--text-color: $ibo-color-grey-300 !default;
$ibo-navigation-menu--top-part--height: 120px !default;
$ibo-navigation-menu--top-part--padding-y: $ibo-navigation-menu--body--padding-y !default;
$ibo-navigation-menu--top-part--padding-x: $ibo-navigation-menu--body--padding-x !default;
$ibo-navigation-menu--top-part--elements-spacing: 20px !default;
$ibo-navigation-menu--silo-selection--width: 70% !default;
$ibo-navigation-menu--silo-selection--margin-left: 15px !default;
$ibo-navigation-menu--silo-selection--input--action-button--hierarchy--padding-right: -42px !default;
$ibo-navigation-menu--silo-selection--input--padding-right: 38px !default;
$ibo-navigation-menu--silo-selection--input-select--action-button--hierarchy--margin-left: -42px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--padding-left: 60px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--search--margin-left: -42px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--hierarchy--margin-left: -60px !default;
$ibo-navigation-menu--middle-part--padding-top: 24px !default;
$ibo-navigation-menu--middle-part--padding-bottom: 16px !default;
$ibo-navigation-menu--middle-part--padding-x: $ibo-navigation-menu--body--padding-x !default;
$ibo-navigation-menu--middle-part--elements-spacing: 20px !default;
$ibo-navigation-menu--middle-part--scrollbar-width: 5px !default;
$ibo-navigation-menu--middle-part--scrollbar-track-background-color: $ibo-color-transparent !default;
$ibo-navigation-menu--middle-part--scrollbar-thumb-background-color: $ibo-color-grey-300 !default;
$ibo-navigation-menu--middle-part--scrollbar-thumb-border: none !default;
$ibo-navigation-menu--middle-part--scrollbar-thumb-border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--bottom-part--padding-top: 20px !default;
$ibo-navigation-menu--bottom-part--padding-bottom: 16px !default;
$ibo-navigation-menu--bottom-part--padding-x: 0px !default;
$ibo-navigation-menu--bottom-part--height: 126px !default;
$ibo-navigation-menu--bottom-part--background-color: $ibo-color-grey-800 !default;
$ibo-navigation-menu--bottom-part--is-expanded--padding-top: 24px !default;
$ibo-navigation-menu--bottom-part--is-expanded--padding-bottom: 12px !default;
$ibo-navigation-menu--action--padding-x: 8px !default;
$ibo-navigation-menu--action--padding-y: 10px !default;
$ibo-navigation-menu--action--border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--action--border-radius--on-active: $ibo-border-radius-full !default;
$ibo-navigation-menu--action--border-radius--on-active-expanded: $ibo-border-radius-900 !default;
$ibo-navigation-menu--action--text-color--on-hover: $ibo-color-white-100 !default;
$ibo-navigation-menu--action--background-color--on-hover: $ibo-color-blue-grey-700 !default;
$ibo-navigation-menu--action--background-color--on-active: $ibo-color-grey-100 !default;
$ibo-navigation-menu--action-icon--width: 28px !default;
$ibo-navigation-menu--action-icon--text-color--on-hover: $ibo-color-white-100 !default;
$ibo-navigation-menu--square-company-logo--width: 38px !default;
$ibo-navigation-menu--square-company-logo--height: 38px !default;
$ibo-navigation-menu--square-company-logo--margin-top: 0 !default;
$ibo-navigation-menu--square-company-logo--margin-x: -5px !default;
$ibo-navigation-menu--square-company-logo--margin-bottom: $ibo-navigation-menu--body--padding-y * 2 !default;
$ibo-navigation-menu--full-company-logo--width: $ibo-navigation-menu--body--width-expanded !default;
$ibo-navigation-menu--full-company-logo--height: 70px !default;
$ibo-navigation-menu--full-company-logo--margin-top: 0 !default;
$ibo-navigation-menu--full-company-logo--margin-right: 0 !default;
$ibo-navigation-menu--full-company-logo--margin-bottom: 0 !default;
$ibo-navigation-menu--full-company-logo--margin-left: -$ibo-navigation-menu--body--padding-y !default;
$ibo-navigation-menu--full-company-logo--image--margin-x: auto !default;
$ibo-navigation-menu--full-company-logo--image--margin-y: 0 !default;
$ibo-navigation-menu--toggler-icon--height: 20px !default;
$ibo-navigation-menu--toggler-icon--width: $ibo-navigation-menu--action-icon--width !default;
$ibo-navigation-menu--toggler-bar--height: 3px !default;
$ibo-navigation-menu--toggler-bar--width: 100% !default;
$ibo-navigation-menu--toggler--width: $ibo-navigation-menu--action-icon--width + $ibo-navigation-menu--top-part--padding-x !default;
$ibo-navigation-menu--menu-group--background-color--is-active: $ibo-color-grey-100 !default;
$ibo-navigation-menu--menu-group--border-radius--is-active: $ibo-border-radius-500 0 0 $ibo-border-radius-500 !default;
$ibo-navigation-menu--menu-group-icon--font-size: $ibo-font-size-350 !default;
$ibo-navigation-menu--menu-group-icon--text-color--is-active: $ibo-color-primary-500 !default;
$ibo-navigation-menu--menu-group-title--margin-left: $ibo-navigation-menu--middle-part--padding-x !default;
$ibo-navigation-menu--menu-group-title--text-color--is-active: $ibo-color-blue-grey-800 !default;
$ibo-navigation-menu--drawer--width: 312px !default;
$ibo-navigation-menu--drawer--padding-x: 20px !default;
$ibo-navigation-menu--drawer--padding-y: 32px !default;
$ibo-navigation-menu--drawer--background-color: $ibo-color-grey-100 !default;
$ibo-navigation-menu--drawer--border-right: 1px solid $ibo-color-grey-300 !default;
$ibo-navigation-menu--menu-filter--width: $ibo-navigation-menu--drawer--width - $ibo-navigation-menu--drawer--padding-x * 2 !default;
$ibo-navigation-menu--menu-filter--margin-bottom: 50px !default;
$ibo-navigation-menu--menu-filter-input--padding-right: 64px !default;
$ibo-navigation-menu--menu-filter-hotkey--border: 1px solid $ibo-color-grey-400 !default;
/* TODO: Refactor this into the standard field input */
$ibo-navigation-menu--menu-filter-input--padding-x: 10px !default;
$ibo-navigation-menu--menu-filter-input--padding-y: 8px !default;
$ibo-navigation-menu--menu-filter-input--width: 100% !default;
$ibo-navigation-menu--menu-filter-input--placeholder-color: $ibo-color-grey-500 !default;
$ibo-navigation-menu--menu-filter-input--text-color: $ibo-color-grey-900 !default;
$ibo-navigation-menu--menu-filter-input--background-color: $ibo-color-white-100 !default;
$ibo-navigation-menu--menu-filter-input--border: 1px solid $ibo-color-grey-300 !default;
$ibo-navigation-menu--menu-filter-input--border-radius: $ibo-border-radius-300 !default;
$ibo-navigation-menu--menu-groups--margin-top: $ibo-navigation-menu--drawer--padding-y + $ibo-navigation-menu--menu-filter--margin-bottom !default;
$ibo-navigation-menu--menu--placeholder--width: 100% !default;
$ibo-navigation-menu--menu--placeholder--margin-top: $ibo-navigation-menu--menu-groups--margin-top !default;
$ibo-navigation-menu--menu--placeholder-image--svg--width: 90% !default;
$ibo-navigation-menu--menu--placeholder-image--svg--height: auto !default;
$ibo-navigation-menu--menu--placeholder-image--svg--margin: auto !default;
$ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered: 48px !default;
$ibo-navigation-menu--menu-nodes-title--margin-top: 0 !default;
$ibo-navigation-menu--menu-nodes-title--margin-bottom: 32px !default;
$ibo-navigation-menu--menu-nodes-title--margin-bottom--on-filtered: 8px !default;
$ibo-navigation-menu--menu-node--padding-x: 10px !default;
$ibo-navigation-menu--menu-node--padding-y: 6px !default;
$ibo-navigation-menu--menu-node--margin-x: -1 * $ibo-navigation-menu--menu-node--padding-x !default;
$ibo-navigation-menu--menu-node--margin-y: 0 !default;
$ibo-navigation-menu--menu-node--text-color: $ibo-color-grey-700 !default;
$ibo-navigation-menu--menu-node--hyperlink-color: inherit !default;
$ibo-navigation-menu--menu-node--background-color: $ibo-color-grey-200 !default;
$ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--notifications-toggler--font-size: 24px !default;
$ibo-navigation-menu--notifications-toggler--color: $ibo-color-grey-600 !default;
$ibo-navigation-menu--notifications-toggler--color--is-loaded: $ibo-color-grey-300 !default;
$ibo-navigation-menu--notifications-toggler--color--on-hover: $ibo-color-white-200 !default;
$ibo-navigation-menu--notifications-toggler--new-messages--width: 16px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--height: 16px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--top: -2px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--right: -7px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--background-color: $ibo-color-red-600 !default;
$ibo-navigation-menu--notifications-toggler--new-messages--border: solid 2px $ibo-navigation-menu--bottom-part--background-color !default;
$ibo-navigation-menu--notifications-toggler--new-messages--border-radius: $ibo-border-radius-full !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--width: 10px !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--height: 10px !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--top: -2px !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--right: -5px !default;
$ibo-navigation-menu--user--text-color: $ibo-color-white-100 !default;
$ibo-navigation-menu--user-welcome-message--toggler--padding-left: 6px !default;
$ibo-navigation-menu--user-picture--border-radius: $ibo-border-radius-full !default;
$ibo-navigation-menu--user-picture--background-color: $ibo-color-grey-300 !default;
$ibo-navigation-menu--user-notifications--toggler--icon--padding-left: 5px !default;
$ibo-navigation-menu--user-organization--text-color: $ibo-color-blue-100 !default;
$ibo-navigation-menu--user-picture--size--is-collapsed: 36px !default;
$ibo-navigation-menu--user-picture--size--is-expanded: 72px !default;
$ibo-navigation-menu--user-picture--margin-top--is-expanded: -60px !default;
$ibo-navigation-menu--user-picture--border--is-expanded: solid 3px $ibo-color-blue-grey-900 !default;
$ibo-navigation-menu--user-menu--popover-menu--odd-section--background-color: $ibo-color-grey-100 !default;
$ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
$ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--background-color !default;
/* CSS variables (can be changed directly from the browser) */
:root {
/* TODO: Introduce variables once SCSS variables are set */
}
/* IMPORTANT: Rules are made for the collapsed mode by default */
/* Expanded rules should only be in the dedicated section */
.ibo-navigation-menu{
position: relative;
height: $ibo-navigation-menu-height;
&.ibo-is-expanded{
.ibo-navigation-menu--square-company-logo{
display: none;
}
.ibo-navigation-menu--full-company-logo{
display: flex;
}
.ibo-navigation-menu--silo-selection{
display: inline-block;
}
.ibo-navigation-menu--body{
width: $ibo-navigation-menu--body--width-expanded;
.ibo-navigation-menu--toggler-bar{
&:nth-child(1){
top: 4px;
left: 7px;
width: 14px;
transform: rotateZ(-45deg);
}
&:nth-child(2){
top: 8px;
left: 7px;
width: 0;
opacity: 0;
}
&:nth-child(3){
top: 12px;
left: 7px;
width: 14px;
transform: rotateZ(45deg);
}
}
.ibo-navigation-menu--menu-group{
&:not(.ibo-is-active){
&:active{
border-radius: $ibo-navigation-menu--action--border-radius--on-active-expanded;
}
}
}
.ibo-navigation-menu--bottom-part{
padding: $ibo-navigation-menu--bottom-part--is-expanded--padding-top $ibo-navigation-menu--bottom-part--padding-x $ibo-navigation-menu--bottom-part--is-expanded--padding-bottom;
.ibo-navigation-menu--notifications .ibo-navigation-menu--notifications-toggler{
display: none;
}
.ibo-navigation-menu--user-info{
height: $ibo-navigation-menu--user-info--height--is-expanded;
.ibo-navigation-menu--user-welcome-message, .ibo-navigation-menu--user-notifications, .ibo-navigation-menu--user-organization{
display: block;
}
.ibo-navigation-menu--user-picture{
margin-top: $ibo-navigation-menu--user-picture--margin-top--is-expanded;
width: $ibo-navigation-menu--user-picture--size--is-expanded;
height: $ibo-navigation-menu--user-picture--size--is-expanded;
border: $ibo-navigation-menu--user-picture--border--is-expanded;
.ibo-navigation-menu--user-picture--image {
max-width: $ibo-navigation-menu--user-picture--size--is-expanded;
max-height: $ibo-navigation-menu--user-picture--size--is-expanded;
}
}
}
}
}
}
&.ibo-is-active{
.ibo-navigation-menu--drawer{
right: calc(-1 * #{$ibo-navigation-menu--drawer--width});
}
}
&.ibo-is-filtered{
.ibo-navigation-menu--menu-nodes{
margin-bottom: $ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered;
.ibo-navigation-menu--menu-nodes-title{
margin-bottom: $ibo-navigation-menu--menu-nodes-title--margin-bottom--on-filtered;
}
}
}
}
.ibo-navigation-menu--body,
.ibo-navigation-menu--drawer{
height: $ibo-navigation-menu-height;
}
/* Body */
.ibo-navigation-menu--body{
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: $ibo-navigation-menu-height;
width: $ibo-navigation-menu--body--width-collapsed;
background-color: $ibo-navigation-menu--body--background-color;
transition: width 0.1s ease-in-out;
}
/* - Top part */
.ibo-navigation-menu--top-part{
z-index: 2;
min-height: $ibo-navigation-menu--top-part--height;
padding: $ibo-navigation-menu--top-part--padding-y $ibo-navigation-menu--top-part--padding-x;
overflow: hidden;
}
/* - Middle part */
.ibo-navigation-menu--middle-part{
z-index: 1;
/* Occupy as much space as possible */
flex-grow: 1;
/* Only the middle part should have a variable size */
overflow-y: auto;
padding: $ibo-navigation-menu--middle-part--padding-top $ibo-navigation-menu--middle-part--padding-x $ibo-navigation-menu--middle-part--padding-bottom;
/* Scrollbar for Firefox and future W3C specs. */
scrollbar-width: thin;
scrollbar-color: $ibo-navigation-menu--middle-part--scrollbar-thumb-background-color $ibo-navigation-menu--middle-part--scrollbar-track-background-color;
}
/* Scrollbar for Chrome/Edge/Safari */
.ibo-navigation-menu--middle-part::-webkit-scrollbar {
width: $ibo-navigation-menu--middle-part--scrollbar-width;
}
.ibo-navigation-menu--middle-part::-webkit-scrollbar-track {
background-color: $ibo-navigation-menu--middle-part--scrollbar-track-background-color;
}
.ibo-navigation-menu--middle-part::-webkit-scrollbar-thumb {
background-color: $ibo-navigation-menu--middle-part--scrollbar-thumb-background-color;
border: $ibo-navigation-menu--middle-part--scrollbar-thumb-border;
border-radius: $ibo-navigation-menu--middle-part--scrollbar-thumb-border-radius;
}
/* - Bottom part */
.ibo-navigation-menu--bottom-part{
z-index: 2; /* User picture must be above the middle part when expanded */
padding-top: $ibo-navigation-menu--bottom-part--padding-top;
padding-bottom: $ibo-navigation-menu--bottom-part--padding-bottom;
height: $ibo-navigation-menu--bottom-part--height;
background-color: $ibo-navigation-menu--bottom-part--background-color;
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-direction: column;
}
.ibo-navigation-menu--toggler,
.ibo-navigation-menu--menu-group{
margin: calc(-1 * #{$ibo-navigation-menu--action--padding-y}) calc(-1 * #{$ibo-navigation-menu--action--padding-x});
padding: $ibo-navigation-menu--action--padding-y $ibo-navigation-menu--action--padding-x;
border-radius: $ibo-navigation-menu--action--border-radius;
}
/* Top part */
/* - Company logo: square */
.ibo-navigation-menu--square-company-logo{
display: flex;
width: $ibo-navigation-menu--square-company-logo--width;
height: $ibo-navigation-menu--square-company-logo--height;
margin: $ibo-navigation-menu--square-company-logo--margin-top $ibo-navigation-menu--square-company-logo--margin-x $ibo-navigation-menu--square-company-logo--margin-bottom;
>img {
object-fit: contain;
}
}
/* - Company logo: full */
.ibo-navigation-menu--full-company-logo{
display: none;
width: $ibo-navigation-menu--full-company-logo--width;
height: $ibo-navigation-menu--full-company-logo--height;
margin: $ibo-navigation-menu--full-company-logo--margin-top $ibo-navigation-menu--full-company-logo--margin-right $ibo-navigation-menu--full-company-logo--margin-bottom $ibo-navigation-menu--full-company-logo--margin-left;
>img{
object-fit: contain;
margin: $ibo-navigation-menu--full-company-logo--image--margin-y $ibo-navigation-menu--full-company-logo--image--margin-x;
}
}
/* - Toggler */
.ibo-navigation-menu--toggler{
display: inline-flex;
/* Width is define here in addition of the icon so we can fix its width whether the menu is collapsed or expanded */
width: $ibo-navigation-menu--toggler--width;
&:hover,
&:active{
background-color: $ibo-navigation-menu--action--background-color--on-hover;
.ibo-navigation-menu--toggler-bar{
background-color: $ibo-navigation-menu--action--text-color--on-hover;
}
}
}
.ibo-navigation-menu--toggler-icon{
position: relative;
display: flex;
height: $ibo-navigation-menu--toggler-icon--height;
width: $ibo-navigation-menu--toggler-icon--width;
}
.ibo-navigation-menu--toggler-bar{
position: absolute;
display: block;
height: $ibo-navigation-menu--toggler-bar--height;
width: $ibo-navigation-menu--toggler-bar--width;
opacity: 1;
transition: all 0.2s linear;
background-color: $ibo-navigation-menu--body--text-color;
&:nth-child(1){
top: 0;
}
&:nth-child(2){
top: 8px;
}
&:nth-child(3){
top: 16px;
}
}
.ibo-navigation-menu--silo-selection {
position: absolute;
display: none;
width: $ibo-navigation-menu--silo-selection--width;
margin-left: $ibo-navigation-menu--silo-selection--margin-left;
.ibo-input-wrapper
{
.ibo-input{
padding-right: $ibo-navigation-menu--silo-selection--input--padding-right;
overflow: hidden;
}
.ibo-input-select--action-button--hierarchy{
margin-left: $ibo-navigation-menu--silo-selection--input--action-button--hierarchy--padding-right;
}
.ibo-input-select-autocomplete{
padding-right: $ibo-navigation-menu--silo-selection--input-select-autocomplete--padding-left;
~ .ibo-input-select--action-button--search{
margin-left: $ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--search--margin-left;
}
~ .ibo-input-select--action-button--hierarchy{
margin-left: $ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--hierarchy--margin-left;
}
}
}
}
/* - Menu groups */
.ibo-navigation-menu--menu-group{
display: flex;
justify-content: left;
align-items: center;
/* To keep title on the line even when collapsed. Better visual feedback when expanding. */
white-space: nowrap;
overflow-x: hidden;
color: $ibo-navigation-menu--body--text-color;
@extend %ibo-font-ral-nor-200;
transition-property: background-color, color, padding, margin, border-radius;
transition-duration: 0.1s;
transition-timing-function: linear;
> .ibo-navigation-menu--menu-group-icon,
> .ibo-navigation-menu--menu-group-title{
display: flex; /* To avoid end space due to display:inline-block */
}
&:not(:last-child){
margin-bottom: $ibo-navigation-menu--middle-part--elements-spacing;
}
&:not(.ibo-is-active)
{
&:hover,
&:active{
color: $ibo-navigation-menu--action--text-color--on-hover;
background-color: $ibo-navigation-menu--action--background-color--on-hover;
}
&:active{
border-radius: $ibo-navigation-menu--action--border-radius--on-active;
}
}
&.ibo-is-active{
margin-right: calc(-2 * #{$ibo-navigation-menu--action--padding-x});
padding-right: calc(2 - #{$ibo-navigation-menu--action--padding-x});
color: $ibo-navigation-menu--menu-group-title--text-color--is-active;
background-color: $ibo-navigation-menu--menu-group--background-color--is-active;
border-radius: $ibo-navigation-menu--menu-group--border-radius--is-active;
.ibo-navigation-menu--menu-group-icon{
color: $ibo-navigation-menu--menu-group-icon--text-color--is-active;
}
}
}
.ibo-navigation-menu--menu-group-icon{
width: $ibo-navigation-menu--action-icon--width;
min-width: $ibo-navigation-menu--action-icon--width; /* Necessary with flex, otherwise it will shrink */
justify-content: center;
font-size: $ibo-navigation-menu--menu-group-icon--font-size;
&::before{
width: $ibo-navigation-menu--action-icon--width;
}
}
.ibo-navigation-menu--menu-group-title{
margin-left: $ibo-navigation-menu--menu-group-title--margin-left;
justify-content: left;
@extend %ibo-text-truncated-with-ellipsis;
}
/* Drawer */
.ibo-navigation-menu--drawer{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
right: 0;
width: $ibo-navigation-menu--drawer--width;
padding: $ibo-navigation-menu--drawer--padding-y $ibo-navigation-menu--drawer--padding-x;
overflow-y: auto;
background-color: $ibo-navigation-menu--drawer--background-color;
border-right: $ibo-navigation-menu--drawer--border-right;
transition: right 0.2s ease-in-out;
}
/* - Menu filter */
.ibo-navigation-menu--menu-filter{
position: fixed;
width: $ibo-navigation-menu--menu-filter--width;
}
.ibo-navigation-menu--menu-filter-input{
/* TODO: Refactor this into the standard field input */
width: $ibo-navigation-menu--menu-filter-input--width;
padding: $ibo-navigation-menu--menu-filter-input--padding-y $ibo-navigation-menu--menu-filter-input--padding-x;
color: $ibo-navigation-menu--menu-filter-input--text-color;
background-color: $ibo-navigation-menu--menu-filter-input--background-color;
border: $ibo-navigation-menu--menu-filter-input--border;
border-radius: $ibo-navigation-menu--menu-filter-input--border-radius;
&::placeholder{
color: $ibo-navigation-menu--menu-filter-input--placeholder-color;
}
/* This rule is duplicated otherwise Chrome won't be able to parse it. */
&:-ms-input-placeholder,
&::-ms-input-placeholder{
color: $ibo-navigation-menu--menu-filter-input--placeholder-color;
}
padding-right: $ibo-navigation-menu--menu-filter-input--padding-right; /* Must be at least #nm-filter-hotkey width + some padding */
}
.ibo-navigation-menu--menu-filter-clear{
display: none;
}
.ibo-navigation-menu--menu-filter-hotkey{
position: absolute;
top: $ibo-navigation-menu--menu-filter-input--padding-y;
right: $ibo-navigation-menu--menu-filter-input--padding-x;
border: $ibo-navigation-menu--menu-filter-hotkey--border;
border-radius: $ibo-navigation-menu--menu-filter-input--border-radius;
color: $ibo-navigation-menu--menu-filter-input--placeholder-color;
padding: 2px 4px;
@extend %ibo-font-ral-nor-50;
}
.ibo-navigation-menu--menu--placeholder{
width: $ibo-navigation-menu--menu--placeholder--width;
margin-top: $ibo-navigation-menu--menu--placeholder--margin-top;
}
.ibo-navigation-menu--menu--placeholder-image > svg{
display: block;
width: $ibo-navigation-menu--menu--placeholder-image--svg--width;
height: $ibo-navigation-menu--menu--placeholder-image--svg--height;
margin: $ibo-navigation-menu--menu--placeholder-image--svg--margin;
}
.ibo-navigation-menu--menu--placeholder-hint{
text-align: center;
}
/* - Menu groups */
.ibo-navigation-menu--menu-groups{
margin-top: $ibo-navigation-menu--menu-groups--margin-top;
}
/* - Menu nodes */
.ibo-navigation-menu--menu-nodes{
display: none;
ul{
li{
> a,
> span{
display: block; /* Force to occupy parent's full width */
margin: $ibo-navigation-menu--menu-node--margin-y $ibo-navigation-menu--menu-node--margin-x;
padding: $ibo-navigation-menu--menu-node--padding-y $ibo-navigation-menu--menu-node--padding-x;
border-radius: 0;
color: $ibo-navigation-menu--menu-node--text-color;
@extend %ibo-font-ral-nor-150;
}
> a{
color: $ibo-navigation-menu--menu-node--hyperlink-color;
&:hover{
background-color: $ibo-navigation-menu--menu-node--background-color;
border-radius: $ibo-navigation-menu--menu-node--border-radius;
}
}
}
ul{
padding-left: $ibo-navigation-menu--drawer--padding-x;
}
}
&.ibo-is-active{
display: block;
}
}
.ibo-navigation-menu--menu-nodes-title{
margin-top: $ibo-navigation-menu--menu-nodes-title--margin-top;
margin-bottom: $ibo-navigation-menu--menu-nodes-title--margin-bottom;
@extend %ibo-font-ral-nor-350;
@extend %ibo-text-truncated-with-ellipsis;
}
/* - Notifications menu */
.ibo-navigation-menu--notifications{
position: relative;
display: flex;
flex-direction: column;
align-content: center;
}
.ibo-navigation-menu--notifications-toggler{
position: relative;
font-size: $ibo-navigation-menu--notifications-toggler--font-size;
color: $ibo-navigation-menu--notifications-toggler--color;
&:hover,
&.ibo-is-loaded:hover{
color: $ibo-navigation-menu--notifications-toggler--color--on-hover;
}
&.ibo-is-loaded{
color: $ibo-navigation-menu--notifications-toggler--color--is-loaded;
&:not(.ibo-is-empty) .ibo-navigation-menu--notifications-toggler--new-messages{
display: inline;
}
}
.ibo-navigation-menu--notifications-toggler--new-messages{
top: $ibo-navigation-menu--notifications-toggler--new-messages--top;
right: $ibo-navigation-menu--notifications-toggler--new-messages--right;
width: $ibo-navigation-menu--notifications-toggler--new-messages--width;
height: $ibo-navigation-menu--notifications-toggler--new-messages--height;
}
}
.ibo-navigation-menu--user-notifications--toggler{
position: relative;
&.ibo-is-loaded{
color: $ibo-navigation-menu--notifications-toggler--color--is-loaded;
&:not(.ibo-is-empty) .ibo-navigation-menu--notifications-toggler--new-messages{
display: inline;
}
}
.ibo-navigation-menu--notifications-toggler--new-messages {
top: $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--top;
right: $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--right;
width: $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--width;
height: $ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--height;
}
}
.ibo-navigation-menu--notifications-toggler--new-messages{
position: absolute;
display: none;
background-color: $ibo-navigation-menu--notifications-toggler--new-messages--background-color;
border: $ibo-navigation-menu--notifications-toggler--new-messages--border;
border-radius: $ibo-navigation-menu--notifications-toggler--new-messages--border-radius;
}
.ibo-navigation-menu--user-info{
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-direction: column;
.ibo-navigation-menu--user-picture{
@extend %ibo-fully-centered-content;
width: $ibo-navigation-menu--user-picture--size--is-collapsed;
height: $ibo-navigation-menu--user-picture--size--is-collapsed;
overflow: hidden; /* Crop the image, for example when tall but narrow, it would overlap on top and bottom */
background-color: $ibo-navigation-menu--user-picture--background-color;
border-radius: $ibo-navigation-menu--user-picture--border-radius;
.ibo-navigation-menu--user-picture--image{
display: flex;
max-width: $ibo-navigation-menu--user-picture--size--is-collapsed;
max-height: $ibo-navigation-menu--user-picture--size--is-collapsed;
}
}
.ibo-navigation-menu--user-welcome-message,
.ibo-navigation-menu--user-organization,
.ibo-navigation-menu--user-notifications {
display: none;
text-align: center;
color: $ibo-navigation-menu--user--text-color;
}
.ibo-navigation-menu--user-welcome-message {
@extend %ibo-font-ral-nor-250;
.ibo-navigation-menu--user-welcome-message--text,
.ibo-navigation-menu--user-welcome-message--toggler {
color: $ibo-navigation-menu--user--text-color;
}
}
.ibo-navigation-menu--user-welcome-message--toggler {
padding-left: $ibo-navigation-menu--user-welcome-message--toggler--padding-left;
}
.ibo-navigation-menu--user-notifications {
@extend %ibo-font-ral-nor-150;
.ibo-navigation-menu--user-notifications--text {
color: $ibo-navigation-menu--user--text-color;
}
.ibo-navigation-menu--user-notifications--toggler--icon {
padding-left: $ibo-navigation-menu--user-notifications--toggler--icon--padding-left;
}
}
.ibo-navigation-menu--user-organization {
@extend %ibo-font-ral-nor-100;
color: $ibo-navigation-menu--user-organization--text-color;
}
.ibo-navigation-menu--user-menu-container {
position: absolute;
bottom: 10px;
.ibo-popover-menu > .ibo-popover-menu--section:nth-child(odd) {
background-color: $ibo-navigation-menu--user-menu--popover-menu--odd-section--background-color;
}
}
}
.ibo-navigation-menu--menu-counter {
padding: 2px 6px;
position: absolute;
right: 10px;
width: 34px;
text-align: center;
@extend %ibo-font-ral-bol-100;
/* Grey 200 */
background: $ibo-navigation-menu--menu-counter-color;
border-radius: 5px;
}

52
css/backoffice/layout/_object-details.scss
View File

@@ -1,52 +0,0 @@
/*!
* @copyright Copyright (C) 2010-2020 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
// TODO 3.0.0: This is temporary to make object forms work while it is being migrated to the blocks syste.
// When there is a real ObjectDetails block, rework this to match the block conventions.
.object-details .ibo-title {
z-index: 1;
align-items: start;
position: relative;
padding-left: 32px;
}
.object-details .ibo-title .ibo-title--medallion {
position: absolute;
margin-top: 16px;
}
.object-details .ibo-title .ibo-title--content {
margin-left: calc(90px + 32px);
}
.object-details .ibo-panel {
z-index: 0;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container > .ibo-tab-container--tabs-list{
padding-left: calc(32px + 90px + 32px - 24px);
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical{
display: flex;
flex-direction: row;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list{
padding-top: 50px;
flex-direction: column;
height: auto;
padding-left: unset;
margin-right: unset;
min-width: calc(32px + 90px + 32px);
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header{
height: 50px;
width: 100%;
justify-content: left;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tabs-list > .ibo-tab-container--tab-header > .ibo-tab-container--tab-toggler{
width: 100%;
justify-content: left;
}
.object-details .ibo-panel > .ibo-panel--body > .ibo-tab-container.ibo-is-vertical > .ibo-tab-container--tab-container {
flex-grow: 1;
margin-left: unset;
}

149
css/backoffice/layout/_top-bar.scss
View File

@@ -1,149 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables (can be overloaded) */
$ibo-top-bar--height: 54px !default;
$ibo-top-bar--padding-left: 16px !default; /* Should be align with the page content padding-left */
$ibo-top-bar--padding-right: 16px !default;
$ibo-top-bar--padding-y: 0px !default;
$ibo-top-bar--background-color: $ibo-color-white-100 !default;
$ibo-top-bar--elements-spacing: 32px !default;
$ibo-top-bar--quick-actions--margin-right: $ibo-top-bar--elements-spacing !default;
/* CSS variables (can be changed directly from the browser) */
:root{
--ibo-top-bar--height: #{$ibo-top-bar--height};
--ibo-top-bar--padding-left: #{$ibo-top-bar--padding-left};
--ibo-top-bar--padding-right: #{$ibo-top-bar--padding-right};
--ibo-top-bar--padding-y: #{$ibo-top-bar--padding-y};
--ibo-top-bar--background-color: #{$ibo-top-bar--background-color};
--ibo-top-bar--elements-spacing: #{$ibo-top-bar--elements-spacing};
--ibo-top-bar--quick-actions--margin-right: #{$ibo-top-bar--quick-actions--margin-right};
}
.ibo-top-bar{
@extend %ibo-full-height-content;
height: var(--ibo-top-bar--height);
padding: var(--ibo-top-bar--padding-y) var(--ibo-top-bar--padding-right) var(--ibo-top-bar--padding-y) var(--ibo-top-bar--padding-left);
background-color: var(--ibo-top-bar--background-color);
@extend %ibo-elevation-100;
.ibo-breadcrumbs {
flex-grow: 1; /* Occupy as much width as possible */
overflow-x: hidden; /* Avoid glitches when too many items */
}
}
.ibo-top-bar--quick-actions {
@extend %ibo-full-height-content;
margin-right: var(--ibo-top-bar--quick-actions--margin-right);
.ibo-global-search {
}
}
.ibo-top-bar--toolbar {
@extend %ibo-full-height-content;
}
.ibo-top-bar--toolbar-dashboard-title {
@extend %ibo-full-height-content;
@extend %ibo-font-ral-med-250;
display: flex;
align-items: center;
}
.ibo-top-bar--toolbar-dashboard-menu-toggler {
@extend %ibo-full-height-content;
display: flex;
align-items: center;
}
.ibo-top-bar--toolbar-dashboard-selector {
@extend %ibo-full-height-content;
display: flex;
align-items: center;
.selector-label {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
vertical-align: super;
}
}
// Round Toggle
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
vertical-align: baseline;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $ibo-color-secondary-600;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 15px;
width: 15px;
left: 3px;
bottom: 3px;
background-color: $ibo-color-secondary-300;
transition: .4s;
}
input:checked + .slider {
background-color: $ibo-color-primary-600;
}
input:focus + .slider {
box-shadow: 0 0 1px $ibo-color-primary-600;
}
input:checked + .slider:before {
transform: translateX(14.5px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 7px;
}

214
css/backoffice/layout/activity-panel/_activity-entry.scss
View File

@@ -1,214 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables */
/* - Entry group */
$ibo-activity-panel--entry-group--margin-bottom: 24px !default;
/* - Entry */
$ibo-activity-entry--medallion--margin-with-information: 8px !default;
$ibo-activity-entry--medallion--margin-bottom: 18px !default;
$ibo-activity-entry--medallion--diameter: 32px !default;
$ibo-activity-entry--medallion--border-radius: $ibo-border-radius-full !default;
$ibo-activity-entry--medallion--has-image--background-color: $ibo-color-blue-100 !default;
$ibo-activity-entry--medallion--has-image--box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.25) !default;
$ibo-activity-entry--medallion--has-no-image--background-color: $ibo-color-blue-grey-600 !default;
$ibo-activity-entry--medallion--has-no-image--text-color: $ibo-color-white-100 !default;
$ibo-activity-entry--medallion--has-no-image--border: 1px solid $ibo-color-grey-200 !default;
$ibo-activity-entry--information--margin-to-other-side: $ibo-activity-entry--medallion--diameter + $ibo-activity-entry--medallion--margin-with-information !default;
$ibo-activity-entry--main-information--padding-x: 16px !default;
$ibo-activity-entry--main-information--padding-y: 12px !default;
$ibo-activity-entry--main-information--text-color: $ibo-color-grey-800 !default;
$ibo-activity-entry--main-information--background-color: $ibo-color-grey-200 !default;
$ibo-activity-entry--main-information--border-radius: $ibo-border-radius-500 !default;
$ibo-activity-entry--main-information--border-radius--for-tip: 0 !default;
$ibo-activity-entry--main-information--elements-spacing: $ibo-activity-entry--main-information--padding-x !default;
$ibo-activity-entry--main-information-accent-strip--width: 2px !default;
$ibo-activity-entry--main-information-hyperlink--text-color: $ibo-color-blue-700 !default;
$ibo-activity-entry--main-information-hyperlink--on-hover--text-color: $ibo-color-blue-900 !default;
$ibo-activity-entry--main-information-hyperlink--on-active--text-color: $ibo-activity-entry--main-information-hyperlink--on-hover--text-color !default;
$ibo-activity-entry--main-information--is-current-user--background-color: $ibo-color-blue-100 !default;
$ibo-activity-entry--main-information--is-closed--max-height: 48px !default;
$ibo-activity-entry--main-information--is-closed--placeholder-top: 30px !default;
$ibo-activity-entry--main-information--is-closed--placeholder-padding-left: $ibo-activity-entry--main-information--padding-x !default;
$ibo-activity-entry--main-information-icon--text-color: $ibo-color-grey-700 !default;
$ibo-activity-entry--main-information-icon--font-size: 16px !default;
$ibo-activity-entry--sub-information--margin-top: 4px !default;
$ibo-activity-entry--sub-information--margin-bottom: $ibo-activity-entry--sub-information--margin-top !default;
$ibo-activity-entry--sub-information--text-color: $ibo-color-grey-700 !default;
/* Entry group */
.ibo-activity-panel--entry-group{
&:not(:last-child){
margin-bottom: $ibo-activity-panel--entry-group--margin-bottom;
}
}
/* Entry */
.ibo-activity-entry{
display: flex;
flex-direction: row;
align-items: flex-end;
/* Last entry */
&:not(:last-child){
.ibo-activity-entry--medallion{
visibility: hidden; /* Show only medallion on the last entry */
}
.ibo-activity-entry--sub-information{
margin-bottom: $ibo-activity-entry--sub-information--margin-bottom;
}
}
/* Current or not user specificities */
&.ibo-is-current-user{
flex-direction: row-reverse;
.ibo-activity-entry--medallion{
margin-right: initial;
margin-left: $ibo-activity-entry--medallion--margin-with-information;
}
.ibo-activity-entry--information{
margin-right: 0;
margin-left: $ibo-activity-entry--information--margin-to-other-side;
}
.ibo-activity-entry--main-information{
background-color: $ibo-activity-entry--main-information--is-current-user--background-color;
}
.ibo-activity-entry--sub-information{
text-align: right;
}
/* Bubble tip on the right for last entry of the group */
&:last-child{
.ibo-activity-entry--main-information{
border-bottom-right-radius: $ibo-activity-entry--main-information--border-radius--for-tip;
border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius;
}
}
}
&:not(.ibo-is-current-user){
.ibo-activity-entry--information{
margin-right: $ibo-activity-entry--information--margin-to-other-side;
margin-left: 0;
}
/* Bubble tip on the left for last entry of the group */
&:last-child{
.ibo-activity-entry--main-information{
border-bottom-right-radius: $ibo-activity-entry--main-information--border-radius;
border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius--for-tip;
}
}
}
&.ibo-is-closed{
.ibo-activity-entry--main-information{
max-height: $ibo-activity-entry--main-information--is-closed--max-height;
overflow: hidden;
cursor: pointer;
&::after{
content: "...";
position: absolute;
top: $ibo-activity-entry--main-information--is-closed--placeholder-top;
left: 0;
padding-left: $ibo-activity-entry--main-information--is-closed--placeholder-padding-left;
width: 100%;
height: 100%;
background-color: inherit;
}
}
}
}
.ibo-activity-entry--medallion{
margin-right: $ibo-activity-entry--medallion--margin-with-information;
margin-bottom: $ibo-activity-entry--medallion--margin-bottom;
min-width: $ibo-activity-entry--medallion--diameter; /* We have to set a min-width, otherwise the medallion will be compressed when sibling element is too large */
width: $ibo-activity-entry--medallion--diameter;
min-height: $ibo-activity-entry--medallion--diameter;
height: $ibo-activity-entry--medallion--diameter;
overflow: hidden;
@extend %ibo-fully-centered-content;
border-radius: $ibo-activity-entry--medallion--border-radius;
@extend %ibo-font-ral-nor-150;
&.ibo-has-image{
background-color: $ibo-activity-entry--medallion--has-image--background-color;
box-shadow: $ibo-activity-entry--medallion--has-image--box-shadow;
}
&:not(.ibo-has-image){
background-color: $ibo-activity-entry--medallion--has-no-image--background-color;
color: $ibo-activity-entry--medallion--has-no-image--text-color;
border: $ibo-activity-entry--medallion--has-no-image--border;
}
.ibo-activity-entry--author-picture{
max-height: 100%;
}
}
.ibo-activity-entry--main-information{
position: relative;
display: flex;
flex-direction: row;
align-items: baseline;
padding: $ibo-activity-entry--main-information--padding-y $ibo-activity-entry--main-information--padding-x;
color: $ibo-activity-entry--main-information--text-color;
background-color: $ibo-activity-entry--main-information--background-color;
border-radius: $ibo-activity-entry--main-information--border-radius;
/* Avoid pre (code snippets) to overflow outside the entry */
pre{
white-space: pre-wrap;
}
/* Specific hyperlink color */
a{
color: $ibo-activity-entry--main-information-hyperlink--text-color;
&:hover{
color: $ibo-activity-entry--main-information-hyperlink--on-hover--text-color;
}
&:active,
&:focus{
color: $ibo-activity-entry--main-information-hyperlink--on-active--text-color;
}
}
}
.ibo-activity-entry--main-information-icon{
margin-right: $ibo-activity-entry--main-information--elements-spacing;
color: $ibo-activity-entry--main-information-icon--text-color;
font-size: $ibo-activity-entry--main-information-icon--font-size;
}
.ibo-activity-entry--main-information-content{
}
.ibo-activity-entry--sub-information{
margin-top: $ibo-activity-entry--sub-information--margin-top;
text-align: left;
color: $ibo-activity-entry--sub-information--text-color;
@extend %ibo-font-ral-nor-50;
}

252
css/backoffice/layout/activity-panel/_activity-panel.scss
View File

@@ -1,252 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables */
$ibo-activity-panel--width: 460px !default;
/* TODO: This should be changed when responsive breakpoints are defined and used */
$ibo-activity-panel--is-expanded--width: 60vw !default;
$ibo-activity-panel--padding-x: 16px !default;
$ibo-activity-panel--padding-y: 0 !default;
/* - Header */
$ibo-activity-panel--header--background-color: $ibo-color-grey-100 !default;
$ibo-activity-panel--size-toggler--color: $ibo-color-grey-600 !default;
$ibo-activity-panel--size-toggler--on-hover--color: $ibo-color-grey-800 !default;
/* - Tabs togglers*/
$ibo-activity-panel--tabs-togglers--padding-x: $ibo-activity-panel--padding-x * 3 !default; /* We need to increase this so the size toggler which will be set in abs. pos. can overlap it nicely */
/* - Tab toggler */
$ibo-activity-panel--tab-toggler--caselog-highlight-colors: $ibo-caselog-highlight-colors !default;
$ibo-activity-panel--tab-toggler--is-active--background-color: $ibo-color-grey-200 !default;
/* - Tab title */
$ibo-activity-panel--tab-title--padding-x: 16px !default;
$ibo-activity-panel--tab-title--padding-y: 8px !default;
$ibo-activity-panel--tab-title--on-hover--background-color: $ibo-activity-panel--tab-toggler--is-active--background-color !default;
$ibo-activity-panel--tab-title--is-active--background-color: $ibo-activity-panel--tab-toggler--is-active--background-color !default;
$ibo-activity-panel--tab-title-decoration--width: 12px !default;
$ibo-activity-panel--tab-title-decoration--height: $ibo-activity-panel--tab-title-decoration--width !default;
$ibo-activity-panel--tab-title-decoration--margin-right: 8px !default;
$ibo-activity-panel--tab-title-decoration--border-radius: $ibo-border-radius-300 !default;
$ibo-activity-panel--tab-title-text--max-width: 100px !default;
/* - Tab toolbar */
$ibo-activity-panel--tab-toolbar--padding-x: $ibo-activity-panel--padding-x !default;
$ibo-activity-panel--tab-toolbar--text-color: $ibo-color-grey-800 !default;
$ibo-activity-panel--tab-toolbar--background-color: $ibo-activity-panel--tab-toggler--is-active--background-color !default;
$ibo-activity-panel--tab-toolbar-actions--height: 32px !default;
$ibo-activity-panel--tab-toolbar-for-caselog--elements-spacing: 16px !default;
$ibo-activity-panel--tab-toolbar-for-caselog--icon-margin-left: 8px !default;
$ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-content: "-" !default;
$ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-margin-x: 8px !default;
$ibo-activity-panel--tab-toolbar-for-activity--elements-spacing: 36px !default;
$ibo-activity-panel--tab-toolbar-for-activity--checkbox-margin-right: 8px !default;
/* - Body */
$ibo-activity-panel--body--padding-top: $ibo-activity-panel--padding-x !default;
$ibo-activity-panel--body--padding-x: $ibo-activity-panel--padding-x !default;
$ibo-activity-panel--body--placeholder--margin-top: 16px !default;
$ibo-activity-panel--body--placeholder-image--width: 250px !default;
$ibo-activity-panel--body--placeholder-hint--margin-top: 16px !default;
$ibo-activity-panel--body--placeholder-hint--color: $ibo-color-grey-800 !default;
/* Whole layout */
.ibo-activity-panel{
width: $ibo-activity-panel--width;
transition: width 0.2s ease-in-out;
&.ibo-is-expanded{
width: $ibo-activity-panel--is-expanded--width;
.ibo-activity-panel--expand-icon{
display: none;
}
}
&:not(.ibo-is-expanded){
.ibo-activity-panel--collapse-icon{
display: none;
}
}
}
/* Header */
.ibo-activity-panel--header{
position: relative;
background-color: $ibo-activity-panel--header--background-color;
/* Remove hyperlinks default color */
a{
color: $ibo-activity-panel--tab-toolbar--text-color;
}
}
/* Size toggler */
.ibo-activity-panel--size-toggler{
position: absolute;
right: $ibo-activity-panel--padding-x;
top: 0;
bottom: 0;
@extend %ibo-fully-centered-content;
color: $ibo-activity-panel--size-toggler--color;
&:hover{
color: $ibo-activity-panel--size-toggler--on-hover--color;
}
}
/* Tabs togglers */
.ibo-activity-panel--tabs-togglers{
position: relative; /* For size toggler */
padding-left: $ibo-activity-panel--tabs-togglers--padding-x;
padding-right: $ibo-activity-panel--tabs-togglers--padding-x;
@extend %ibo-fully-centered-content;
}
.ibo-activity-panel--tab-toggler{
&.ibo-is-active{
.ibo-activity-panel--tab-title{
background-color: $ibo-activity-panel--tab-title--is-active--background-color;
}
}
}
/* - Specific decoration regarding the case log rank */
@each $sColor in $ibo-activity-panel--tab-toggler--caselog-highlight-colors {
.ibo-activity-panel--tab-toggler-for-caselog-#{index($ibo-activity-panel--tab-toggler--caselog-highlight-colors, $sColor)}{
.ibo-activity-panel--tab-title-decoration{
background-color: $sColor;
}
}
}
/* Tab title */
.ibo-activity-panel--tab-title{
padding: $ibo-activity-panel--tab-title--padding-y $ibo-activity-panel--tab-title--padding-x;
@extend %ibo-fully-centered-content;
&:hover{
background-color: $ibo-activity-panel--tab-title--on-hover--background-color;
}
}
.ibo-activity-panel--tab-title-decoration{
display: inline-flex;
margin-right: $ibo-activity-panel--tab-title-decoration--margin-right;
width: $ibo-activity-panel--tab-title-decoration--width;
height: $ibo-activity-panel--tab-title-decoration--height;
border-radius: $ibo-activity-panel--tab-title-decoration--border-radius;
@extend %ibo-depression-100;
}
.ibo-activity-panel--tab-title-text{
max-width: $ibo-activity-panel--tab-title-text--max-width;
@extend %ibo-text-truncated-with-ellipsis;
}
/* Tab toolbar */
.ibo-activity-panel--tab-toolbar{
display: none;
flex-direction: column;
padding-left: $ibo-activity-panel--tab-toolbar--padding-x;
padding-right: $ibo-activity-panel--tab-toolbar--padding-x;
background-color: $ibo-activity-panel--tab-toolbar--background-color;
&.ibo-is-active{
display: flex;
}
}
.ibo-activity-panel--tab-toolbar-actions{
@extend %ibo-fully-centered-content;
flex-wrap: wrap;
height: $ibo-activity-panel--tab-toolbar-actions--height;
}
.ibo-activity-panel--tab-toolbar-left-actions,
.ibo-activity-panel--tab-toolbar-middle-actions,
.ibo-activity-panel--tab-toolbar-right-actions{
@extend %ibo-vertically-centered-content;
}
.ibo-activity-panel--tab-toolbar-action{
@extend %ibo-fully-centered-content;
}
.ibo-activity-panel--tab-toolbar-for-caselog{
.ibo-activity-panel--tab-toolbar-actions{
justify-content: space-between;
.ibo-activity-panel--tab-toolbar-action{
&:not(:first-child){
&::before{
content: $ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-content;
margin: 0 $ibo-activity-panel--tab-toolbar-for-caselog--icons-separator-margin-x;
}
}
}
.ibo-activity-panel--tab-toolbar-info{
> .ibo-activity-panel--tab-toolbar-info-icon{
margin-left: $ibo-activity-panel--tab-toolbar-for-caselog--icon-margin-left;
}
&:not(:first-child){
margin-left: $ibo-activity-panel--tab-toolbar-for-caselog--elements-spacing;
}
}
}
}
.ibo-activity-panel--tab-toolbar-for-activity{
.ibo-activity-panel--tab-toolbar-actions{
justify-content: center;
.ibo-activity-panel--tab-toolbar-action{
> input{
margin-right: $ibo-activity-panel--tab-toolbar-for-activity--checkbox-margin-right;
}
&:not(:first-child){
margin-left: $ibo-activity-panel--tab-toolbar-for-activity--elements-spacing;
}
}
}
}
/* Body */
.ibo-activity-panel--body{
padding-top: $ibo-activity-panel--body--padding-top;
padding-left: $ibo-activity-panel--body--padding-x;
padding-right: $ibo-activity-panel--body--padding-x;
}
.ibo-activity-panel--body--placeholder{
margin-top: $ibo-activity-panel--body--placeholder--margin-top;
}
.ibo-activity-panel--body--placeholder-image{
@extend %ibo-fully-centered-content;
> svg {
width: $ibo-activity-panel--body--placeholder-image--width;
height: inherit;
}
}
.ibo-activity-panel--body--placeholder-hint{
margin-top: $ibo-activity-panel--body--placeholder-hint--margin-top;
color: $ibo-activity-panel--body--placeholder-hint--color;
@extend %ibo-font-ral-ita-100;
@extend %ibo-fully-centered-content;
}

70
css/backoffice/layout/activity-panel/_caselog-entry-form.scss
View File

@@ -1,70 +0,0 @@
/*!
* copyright Copyright (C) 2010-2020 Combodo SARL
* license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-caselog-entry-form--width: 100% !default;
$ibo-caselog-entry-form--background-color: $ibo-activity-panel--tab-toolbar--background-color !default;
$ibo-caselog-entry-form--actions--margin-top: 6px !default;
$ibo-caselog-entry-form--actions--margin-bottom: 8px !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--right: 4px !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--margin-top: calc(#{$ibo-activity-panel--tab-toolbar-actions--height} + 4px) !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--diameter: 36px !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--background-color: $ibo-color-primary-600 !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--color: $ibo-color-white-100 !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--border-radius: $ibo-border-radius-full !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--box-shadow: $ibo-elevation-100 !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--icon--height: 100% !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--icon--width: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--height !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--icon--font-size: 16px !default;
$ibo-activity-panel--body--add-caselog-entry--toggler--icon--line-height: 33px !default;
.ibo-caselog-entry-form{
display: block;
width: 100%;
background-color: $ibo-caselog-entry-form--background-color;
&.ibo-is-closed{
display: none;
}
}
.ibo-caselog-entry-form--actions{
display: flex;
justify-content: space-between;
margin-top: $ibo-caselog-entry-form--actions--margin-top;
margin-bottom: $ibo-caselog-entry-form--actions--margin-bottom;
}
.ibo-activity-panel--body--add-caselog-entry--toggler{
@extend %ibo-baseline-centered-content;
position: absolute;
right: $ibo-activity-panel--body--add-caselog-entry--toggler--right;
margin-top: $ibo-activity-panel--body--add-caselog-entry--toggler--margin-top;
width: $ibo-activity-panel--body--add-caselog-entry--toggler--diameter;
height: $ibo-activity-panel--body--add-caselog-entry--toggler--diameter;
background-color: $ibo-activity-panel--body--add-caselog-entry--toggler--background-color;
color: $ibo-activity-panel--body--add-caselog-entry--toggler--color;
border-radius: $ibo-activity-panel--body--add-caselog-entry--toggler--border-radius;
box-shadow: $ibo-activity-panel--body--add-caselog-entry--toggler--box-shadow;
> i{
text-align: center;
height: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--height;
width: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--width;
font-size: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--font-size;
line-height: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--line-height;
}
&:hover {
color: $ibo-activity-panel--body--add-caselog-entry--toggler--color;
}
&.ibo-is-hidden{
display: none;
}
}
.ibo-caselog-entry-form--action-buttons--main-actions > .ibo-popover-menu{
z-index: 1;
}

88
css/backoffice/layout/activity-panel/_caselog-entry.scss
View File

@@ -1,88 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables */
$ibo-caselog-entry--highlight-colors: $ibo-caselog-highlight-colors !default;
$ibo-caselog-entry--main-information--padding-y: 12px !default;
$ibo-caselog-entry--main-information--decoration--width: 3px !default;
/* Main information */
.ibo-caselog-entry{
.ibo-activity-entry--main-information{
padding-top: $ibo-caselog-entry--main-information--padding-y;
padding-bottom: $ibo-caselog-entry--main-information--padding-y;
}
.ibo-activity-entry--main-information-icon{
display: none;
}
/* Highlight color */
.ibo-activity-entry--main-information::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
width: $ibo-caselog-entry--main-information--decoration--width;
}
/* - User specific (current or not) */
&:not(.ibo-is-current-user){
.ibo-activity-entry--main-information::before{
left: 0;
border-top-left-radius: $ibo-activity-entry--main-information--border-radius;
border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius;
}
&:last-child{
.ibo-activity-entry--main-information::before{
border-bottom-left-radius: $ibo-activity-entry--main-information--border-radius--for-tip;
}
}
}
&.ibo-is-current-user{
.ibo-activity-entry--main-information::before{
right: 0;
border-top-right-radius: $ibo-activity-entry--main-information--border-radius;
border-bottom-right-radius: $ibo-activity-entry--main-information--border-radius;
}
&:last-child{
.ibo-activity-entry--main-information::before{
border-bottom-right-radius: $ibo-activity-entry--main-information--border-radius--for-tip;
}
}
}
/* - Closed entry placeholder specific */
&.ibo-is-closed{
&.ibo-is-current-user{
.ibo-activity-entry--main-information::after{
width: calc(100% - #{$ibo-caselog-entry--main-information--decoration--width});
}
}
&:not(.ibo-is-current-user){
.ibo-activity-entry--main-information::after{
margin-left: $ibo-caselog-entry--main-information--decoration--width;
}
}
}
}
/* - Specific decoration regarding the case log rank */
@each $sColor in $ibo-caselog-entry--highlight-colors {
.ibo-caselog-entry--entry-for-caselog-#{index($ibo-caselog-entry--highlight-colors, $sColor)}{
.ibo-activity-entry--main-information::before{
background-color: $sColor;
}
}
}

48
css/backoffice/layout/activity-panel/_edits-entry.scss
View File

@@ -1,48 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables */
$ibo-edits-entry--short-description--text-color: inherit !default;
$ibo-edits-entry--long-description-toggler-icon--margin-left: 12px !default;
$ibo-edits-entry--long-description--margin-top: 8px !default;
/* CSS rules */
/* - Long description */
a.ibo-edits-entry--short-description {
color: $ibo-edits-entry--short-description--text-color;
}
.ibo-edits-entry--long-description-toggler-icon{
margin-left: $ibo-edits-entry--long-description-toggler-icon--margin-left;
transition: all 0.2s ease-in-out;
}
.ibo-edits-entry--long-description{
display: none;
margin-top: $ibo-edits-entry--long-description--margin-top;
list-style: inside;
}
/* - Long desc. opened */
.ibo-edits-entry{
&.ibo-is-opened{
.ibo-edits-entry--long-description-toggler-icon{
transform: rotateX(180deg);
}
.ibo-edits-entry--long-description{
display: block;
}
}
}

27
css/backoffice/layout/activity-panel/_transition-entry.scss
View File

@@ -1,27 +0,0 @@
/*!
* Copyright (C) 2013-2020 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
/* SCSS variables */
$ibo-transition-entry--original-state-label--text-color: $ibo-color-grey-800 !default;
$ibo-transition-entry--original-state-label--text-decoration: line-through !default;
/* Main information */
.ibo-transition-entry--original-state-label{
color: $ibo-transition-entry--original-state-label--text-color;
text-decoration: $ibo-transition-entry--original-state-label--text-decoration;
}

26
css/backoffice/layout/blocks-integrations/_panel-with-tab-container.scss
View File

@@ -1,26 +0,0 @@
/*!
* @copyright Copyright (C) 2010-2020 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-panel-with-tab-container--body--padding-top: -1 * ($ibo-panel--body--padding-top - $ibo-panel--highlight--height) !default;
$ibo-panel-with-tab-container--tabs-list--margin-x: -1 * $ibo-panel--body--padding-x !default;
$ibo-panel-with-tab-container--tab-container--margin-x: -1 * $ibo-panel--body--padding-x !default;
.ibo-panel {
> .ibo-panel--body {
> .ibo-tab-container {
margin-top: $ibo-panel-with-tab-container--body--padding-top;
> .ibo-tab-container--tabs-list{
margin-left: $ibo-panel-with-tab-container--tabs-list--margin-x;
margin-right: $ibo-panel-with-tab-container--tabs-list--margin-x;
}
> .ibo-tab-container--tab-container{
margin-left: $ibo-panel-with-tab-container--tab-container--margin-x;
margin-right: $ibo-panel-with-tab-container--tab-container--margin-x;
}
}
}
}

58
css/backoffice/layout/dashboard/_dashboard.scss
View File

@@ -1,58 +0,0 @@
/*!
* @copyright Copyright (C) 2010-2020 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables */
$ibo-dashboard--grid--width: 100% !default;
$ibo-dashboard--grid--elements-spacing-x: $ibo-dashlet--elements-spacing-x !default;
$ibo-dashboard--grid--elements-spacing-y: $ibo-dashlet--elements-spacing-y !default;
/* Rules */
.ibo-dashboard--content{
display: flex;
flex-direction: column;
}
.ibo-dashboard--grid{
width: $ibo-dashboard--grid--width;
}
.ibo-dashboard--grid-row{
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden; /* Because of the column negative margin (which is for the dashlets spacing) */
/* Compensate negative margin on inner borders to simulate egal dashlets spacing between rows */
&:not(:last-child) {
padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2);
}
&:not(:first-child) {
padding-top: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2);
}
}
.ibo-dashboard--grid-column {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
align-content: flex-start;
width: calc(100% + (2 * #{$ibo-dashboard--grid--elements-spacing-x}));
margin: calc(-1 * #{$ibo-dashboard--grid--elements-spacing-y} / 2) calc(-1 * #{$ibo-dashboard--grid--elements-spacing-x} / 2); /* Because of the margin all around the dashlets, we need to compensate it */
/* Compensate negative margin on inner borders to simulate egal dashlets spacing between columns */
&:not(:last-child) {
margin-right: 0;
}
&:not(:first-child) {
margin-left: 0;
}
&.edit_mode {
margin: 1px;
border: 2px #ccc dashed;
width: 100%;
min-height: 40px;
}
}

22
css/backoffice/layout/multi-column/_column.scss
View File

@@ -1,22 +0,0 @@
/*!
* copyright Copyright (C) 2010-2020 Combodo SARL
* license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-column--min-width: 300px !default;
$ibo-column--padding-x: abs($ibo-multi-column--margin-x) !default;
$ibo-column--padding-y: 0 !default;
$ibo-column--margin-bottom--is-last-element: 48px !default;
.ibo-column {
min-width: $ibo-column--min-width;
flex-grow: 1;
flex-shrink: 1;
padding: $ibo-column--padding-y $ibo-column--padding-x;
flex-basis: 10%;
&:not(:last-child){
margin-bottom: $ibo-column--margin-bottom--is-last-element;
}
}

13
css/backoffice/layout/multi-column/_multi-column.scss
View File

@@ -1,13 +0,0 @@
/*!
* copyright Copyright (C) 2010-2020 Combodo SARL
* license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-multi-column--margin-x: -16px !default; /* This is to compensate columns padding and make the whole multicolumn align with the parent borders (cf. Bootstrap rows / cols) */
$ibo-multi-column--margin-y: 0 !default;
.ibo-multi-column {
display: flex;
flex-wrap: wrap;
margin: $ibo-multi-column--margin-y $ibo-multi-column--margin-x;
}

112
css/backoffice/layout/tab-container/_tab-container.scss
View File

@@ -1,112 +0,0 @@
/*!
* @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;
}

4
css/backoffice/layout/tab-container/_tab.scss
View File

@@ -1,4 +0,0 @@
/*!
* @copyright Copyright (C) 2010-2020 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/