mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-27 04:28:44 +02:00
N°3123 - Refactor Directories
This commit is contained in:
Eric
@@ -17,4 +17,6 @@
|
||||
*/
|
||||
|
||||
@import "base";
|
||||
@import "typography";
|
||||
@import "typography";
|
||||
@import "components/all";
|
||||
@import "layout/all";
|
||||
149
css/backoffice/base/components/_alert.scss
Normal file
149
css/backoffice/base/components/_alert.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
/*!
|
||||
* 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-alert--spacing-top--with-same-block: 6px !default;
|
||||
$ibo-alert--spacing-top--with-other-blocks: 16px !default;
|
||||
$ibo-alert--padding-y: 18px !default;
|
||||
$ibo-alert--padding-x: 20px !default;
|
||||
$ibo-alert--min-height: 30px !default;
|
||||
$ibo-alert--border-radius: $ibo-border-radius-300 !default;
|
||||
|
||||
$ibo-alert--title--padding-bottom: 4px !default;
|
||||
|
||||
$ibo-alert--title--highlight--width: 4px !default;
|
||||
$ibo-alert--title--highlight--height: 100% !default;
|
||||
|
||||
$ibo-alert-minimized--padding-y: 5px !default;
|
||||
$ibo-alert-minimized--title--padding-bottom: 0px !default;
|
||||
|
||||
$ibo-alert--action-button--top: 5px !default;
|
||||
$ibo-alert--maximize-minimize-button--right: 30px !default;
|
||||
$ibo-alert--close-button--right: 10px !default;
|
||||
|
||||
$ibo-alert-colors: (
|
||||
'primary': ($ibo-color-primary-200, $ibo-color-primary-700, $ibo-color-primary-900),
|
||||
'secondary': ($ibo-color-secondary-200, $ibo-color-secondary-700, $ibo-color-secondary-900),
|
||||
'neutral': ($ibo-color-secondary-200, $ibo-color-secondary-700, $ibo-color-secondary-900),
|
||||
'information': ($ibo-color-information-200, $ibo-color-information-700, $ibo-color-information-900),
|
||||
'success': ($ibo-color-success-100, $ibo-color-success-700, $ibo-color-success-900),
|
||||
'failure': ($ibo-color-danger-200, $ibo-color-danger-700, $ibo-color-danger-900),
|
||||
'warning': ($ibo-color-warning-200, $ibo-color-warning-700, $ibo-color-warning-900),
|
||||
'danger': ($ibo-color-danger-200, $ibo-color-danger-700, $ibo-color-danger-900),
|
||||
'grey' : ($ibo-color-grey-200, $ibo-color-grey-700, $ibo-color-grey-900),
|
||||
'blue-grey': ($ibo-color-blue-grey-200, $ibo-color-blue-grey-700, $ibo-color-blue-grey-900),
|
||||
'blue': ($ibo-color-blue-200, $ibo-color-blue-700, $ibo-color-blue-900),
|
||||
'cyan': ($ibo-color-cyan-100, $ibo-color-blue-700, $ibo-color-cyan-900),
|
||||
'green': ($ibo-color-green-100, $ibo-color-green-700, $ibo-color-green-900),
|
||||
'orange' : ($ibo-color-orange-200, $ibo-color-orange-700, $ibo-color-orange-900),
|
||||
'red': ($ibo-color-red-200, $ibo-color-red-700, $ibo-color-red-900),
|
||||
'pink': ($ibo-color-pink-200, $ibo-color-pink-700, $ibo-color-pink-900),
|
||||
) !default;
|
||||
|
||||
@each $sColor, $aColorValues in $ibo-alert-colors {
|
||||
$bg-color: nth($aColorValues, 1);
|
||||
$highlight-color: nth($aColorValues, 2);
|
||||
$text-color: nth($aColorValues, 3);
|
||||
.ibo-alert.ibo-is-#{$sColor} {
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
|
||||
&::before {
|
||||
background-color: $highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Rules */
|
||||
.ibo-alert {
|
||||
position: relative;
|
||||
padding: $ibo-alert--padding-y $ibo-alert--padding-x;
|
||||
min-height: $ibo-alert--min-height;
|
||||
border-radius: $ibo-alert--border-radius;
|
||||
overflow: hidden; /* To force highlight color to be cropped by the border radius */
|
||||
|
||||
@extend %ibo-font-ral-med-150;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
|
||||
width: $ibo-alert--title--highlight--width;
|
||||
height: $ibo-alert--title--highlight--height;
|
||||
}
|
||||
|
||||
.ibo-alert--title {
|
||||
padding-bottom: $ibo-alert--title--padding-bottom;
|
||||
|
||||
@extend %ibo-font-ral-bol-150;
|
||||
}
|
||||
|
||||
&.ibo-is-opened {
|
||||
.ibo-alert--minimize-button {
|
||||
display: block;
|
||||
}
|
||||
.ibo-alert--maximize-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:not(.ibo-is-opened){
|
||||
padding: $ibo-alert-minimized--padding-y $ibo-alert--padding-x;
|
||||
|
||||
.ibo-alert--title {
|
||||
padding-bottom: $ibo-alert-minimized--title--padding-bottom;
|
||||
}
|
||||
.ibo-alert--minimize-button {
|
||||
display: none;
|
||||
}
|
||||
.ibo-alert--maximize-button {
|
||||
display: block;
|
||||
}
|
||||
.ibo-alert--body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Spacing between alert blocks */
|
||||
.ibo-alert + .ibo-alert {
|
||||
margin-top: $ibo-alert--spacing-top--with-same-block;
|
||||
}
|
||||
/* Spacing between an alert block and something else */
|
||||
.ibo-alert + :not(.ibo-alert) {
|
||||
margin-top: $ibo-alert--spacing-top--with-other-blocks;
|
||||
}
|
||||
|
||||
.ibo-alert--action-button{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: $ibo-alert--action-button--top;
|
||||
|
||||
&:hover i{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&.ibo-alert--maximize-button, &.ibo-alert--minimize-button{
|
||||
right: $ibo-alert--maximize-minimize-button--right;
|
||||
}
|
||||
&.ibo-alert--close-button{
|
||||
right: $ibo-alert--close-button--right;
|
||||
}
|
||||
}
|
||||
29
css/backoffice/base/components/_all.scss
Normal file
29
css/backoffice/base/components/_all.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
@import "alert";
|
||||
@import "badge";
|
||||
@import "button";
|
||||
@import "breadcrumbs";
|
||||
@import "quick-create";
|
||||
@import "global-search";
|
||||
@import "popover-menu/popover-menu";
|
||||
@import "popover-menu/popover-menu-item";
|
||||
@import "newsroom-menu";
|
||||
@import "panel";
|
||||
@import "modal";
|
||||
@import "dashlet/all";
|
||||
@import "input/all";
|
||||
|
||||
@import "title";
|
||||
@import "datatable";
|
||||
@import "form";
|
||||
@import "fieldset";
|
||||
@import "field";
|
||||
@import "toolbar";
|
||||
@import "richtext";
|
||||
@import "formtable";
|
||||
@import "formtablerow";
|
||||
@import "search-form";
|
||||
99
css/backoffice/base/components/_badge.scss
Normal file
99
css/backoffice/base/components/_badge.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
/*!
|
||||
* 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-badge--margin: 4px 8px !default;
|
||||
$ibo-badge--padding: 6px 10px !default;
|
||||
$ibo-badge--border-radius: $ibo-border-radius-300 !default;
|
||||
|
||||
$ibo-badge-new-state-primary-color: $ibo-color-blue-100 !default;
|
||||
$ibo-badge-new-state-secondary-color: $ibo-color-blue-900 !default;
|
||||
|
||||
$ibo-badge-neutral-state-primary-color: $ibo-color-blue-100 !default;
|
||||
$ibo-badge-neutral-state-secondary-color: $ibo-color-blue-900 !default;
|
||||
|
||||
$ibo-badge-waiting-state-primary-color: $ibo-color-orange-100 !default;
|
||||
$ibo-badge-waiting-state-secondary-color: $ibo-color-orange-800 !default;
|
||||
|
||||
$ibo-badge-success-state-primary-color: $ibo-color-green-100 !default;
|
||||
$ibo-badge-success-state-secondary-color: $ibo-color-green-900 !default;
|
||||
|
||||
$ibo-badge-failure-state-primary-color: $ibo-color-red-100 !default;
|
||||
$ibo-badge-failure-state-secondary-color: $ibo-color-red-800 !default;
|
||||
|
||||
$ibo-badge-frozen-state-primary-color: $ibo-color-grey-100 !default;
|
||||
$ibo-badge-frozen-state-secondary-color: $ibo-color-grey-700 !default;
|
||||
|
||||
/* - For basic badge */
|
||||
$ibo-badge-active-state-primary-color: $ibo-color-green-100 !default;
|
||||
$ibo-badge-active-state-secondary-color: $ibo-color-green-900 !default;
|
||||
|
||||
$ibo-badge-inactive-state-primary-color: $ibo-color-orange-100 !default;
|
||||
$ibo-badge-inactive-state-secondary-color: $ibo-color-orange-800 !default;
|
||||
|
||||
$ibo-badge-states-colors: (
|
||||
'new': (
|
||||
'primary-color': $ibo-badge-new-state-primary-color,
|
||||
'secondary-color': $ibo-badge-new-state-secondary-color,
|
||||
),
|
||||
'neutral': (
|
||||
'primary-color': $ibo-badge-neutral-state-primary-color,
|
||||
'secondary-color': $ibo-badge-neutral-state-secondary-color,
|
||||
),
|
||||
'waiting': (
|
||||
'primary-color': $ibo-badge-waiting-state-primary-color,
|
||||
'secondary-color': $ibo-badge-waiting-state-secondary-color,
|
||||
),
|
||||
'success': (
|
||||
'primary-color': $ibo-badge-success-state-primary-color,
|
||||
'secondary-color': $ibo-badge-success-state-secondary-color,
|
||||
),
|
||||
'failure': (
|
||||
'primary-color': $ibo-badge-failure-state-primary-color,
|
||||
'secondary-color': $ibo-badge-failure-state-secondary-color,
|
||||
),
|
||||
'frozen': (
|
||||
'primary-color': $ibo-badge-frozen-state-primary-color,
|
||||
'secondary-color': $ibo-badge-frozen-state-secondary-color,
|
||||
),
|
||||
'active': (
|
||||
'primary-color': $ibo-badge-active-state-primary-color,
|
||||
'secondary-color': $ibo-badge-active-state-secondary-color,
|
||||
),
|
||||
'inactive': (
|
||||
'primary-color': $ibo-badge-inactive-state-primary-color,
|
||||
'secondary-color': $ibo-badge-inactive-state-secondary-color,
|
||||
),
|
||||
);
|
||||
|
||||
@each $sType, $aColors in $ibo-badge-states-colors {
|
||||
.ibo-badge-is-#{$sType} {
|
||||
color: map-get($aColors, 'secondary-color');
|
||||
background-color: map-get($aColors, 'primary-color');
|
||||
}
|
||||
}
|
||||
|
||||
/* Rules */
|
||||
.ibo-badge {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: $ibo-badge--margin;
|
||||
padding: $ibo-badge--padding;
|
||||
border-radius: $ibo-badge--border-radius;
|
||||
}
|
||||
80
css/backoffice/base/components/_breadcrumbs.scss
Normal file
80
css/backoffice/base/components/_breadcrumbs.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
/*!
|
||||
* 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-breadcrumbs--item--text-color: $ibo-color-grey-800 !default;
|
||||
|
||||
$ibo-breadcrumbs--item-icon--margin-x: 8px !default;
|
||||
$ibo-breadcrumbs--item-icon--max-width: 16px !default;
|
||||
$ibo-breadcrumbs--item-icon--text-color: $ibo-color-grey-600 !default;
|
||||
|
||||
$ibo-breadcrumbs--item-label--max-width: 100px !default;
|
||||
|
||||
$ibo-breadcrumbs--item-separator--margin-x: 12px !default;
|
||||
$ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
|
||||
|
||||
.ibo-breadcrumbs{
|
||||
@extend %ibo-full-height-content;
|
||||
|
||||
* {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.ibo-breadcrumbs--item{
|
||||
color: $ibo-breadcrumbs--item--text-color;
|
||||
@extend %ibo-font-ral-nor-100;
|
||||
|
||||
&:not(:last-child){
|
||||
&::after{
|
||||
content: '\f054';
|
||||
margin: 0 $ibo-breadcrumbs--item-separator--margin-x;
|
||||
color: $ibo-breadcrumbs--item-separator--text-color;
|
||||
@extend %fa-solid-base;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.ibo-breadcrumbs--item-icon{
|
||||
> *{
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ibo-breadcrumbs--item-icon{
|
||||
margin-right: $ibo-breadcrumbs--item-icon--margin-x;
|
||||
@extend %ibo-font-ral-nor-150;
|
||||
transition: all 0.1s linear;
|
||||
|
||||
> span{
|
||||
color: $ibo-breadcrumbs--item-icon--text-color;
|
||||
opacity: 0.6;
|
||||
}
|
||||
> img{
|
||||
height: auto;
|
||||
max-width: $ibo-breadcrumbs--item-icon--max-width;
|
||||
opacity: 0.3;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
.ibo-breadcrumbs--item-label{
|
||||
display: inline; /* Otherwise the "truncate" doesn't work with th default display: flex */
|
||||
max-width: $ibo-breadcrumbs--item-label--max-width;
|
||||
@extend %ibo-text-truncated-with-ellipsis;
|
||||
}
|
||||
410
css/backoffice/base/components/_button.scss
Normal file
410
css/backoffice/base/components/_button.scss
Normal file
@@ -0,0 +1,410 @@
|
||||
$ibo-button--sibling-spacing: 5px !default;
|
||||
$ibo-button--padding-y: 6px !default;
|
||||
$ibo-button--padding-x: 9px !default;
|
||||
$ibo-button--border: 0 !default;
|
||||
$ibo-button--border-radius: $ibo-border-radius-400 !default;
|
||||
$ibo-button--box-shadow-bottom: 0px 2px 0px !default;
|
||||
$ibo-button--box-shadow-top: inset 0px 2px 0px !default;
|
||||
|
||||
$ibo-button--label--margin-left: 4px !default;
|
||||
|
||||
$ibo-button-colors: (
|
||||
'regular': (
|
||||
/* Semantics */
|
||||
'neutral': (
|
||||
'': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
||||
'primary': (
|
||||
'': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'danger': (
|
||||
'': (
|
||||
$ibo-color-danger-600,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-danger-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-danger-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-danger-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'success': (
|
||||
'': (
|
||||
$ibo-color-success-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-success-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-success-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-success-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
/* Colors */
|
||||
'red': (
|
||||
'': (
|
||||
$ibo-color-red-600,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
$ibo-color-green-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
$ibo-color-cyan-500,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
|
||||
),
|
||||
':disabled': (
|
||||
$ibo-color-grey-300,
|
||||
$ibo-color-grey-700,
|
||||
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
||||
),
|
||||
)
|
||||
),
|
||||
'alternative': (
|
||||
/* Semantics */
|
||||
'neutral': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
||||
'primary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-cyan-800,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-white-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-white-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-white-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-white-100 #{','} $ibo-button--box-shadow-bottom $ibo-color-white-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'danger': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-danger-700,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-danger-200,
|
||||
$ibo-color-danger-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-danger-200,
|
||||
$ibo-color-danger-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-danger-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'success': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-success-100,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-success-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-success-100,
|
||||
$ibo-color-success-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-success-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
/* Colors */
|
||||
'red': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-red-700,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
),
|
||||
':disabled': (
|
||||
transparent,
|
||||
$ibo-color-grey-600,
|
||||
$ibo-button--box-shadow-top transparent,
|
||||
),
|
||||
),
|
||||
)
|
||||
) !default;
|
||||
@each $sType, $aColors in $ibo-button-colors {
|
||||
@each $sColor, $aPseudoclasses in $aColors {
|
||||
@each $sPseudoclass, $sAttributes in $aPseudoclasses {
|
||||
$bg-color: nth($sAttributes, 1);
|
||||
$font-color: nth($sAttributes, 2);
|
||||
$box-shadow: nth($sAttributes, 3);
|
||||
.ibo-button.ibo-is-#{$sType}.ibo-is-#{$sColor}#{$sPseudoclass} {
|
||||
background-color: $bg-color;
|
||||
color: $font-color;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-button {
|
||||
cursor: pointer;
|
||||
@extend %ibo-font-ral-med-150;
|
||||
padding: $ibo-button--padding-y $ibo-button--padding-x;
|
||||
border: $ibo-button--border;
|
||||
border-radius: $ibo-button--border-radius;
|
||||
|
||||
& ~ .ibo-button {
|
||||
margin-left: $ibo-button--sibling-spacing;
|
||||
}
|
||||
|
||||
&.ibo-action-button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* Only when a button has both an icon and a label */
|
||||
.ibo-button--icon + .ibo-button--label {
|
||||
margin-left: $ibo-button--label--margin-left;
|
||||
}
|
||||
|
||||
175
css/backoffice/base/components/_datatable.scss
Normal file
175
css/backoffice/base/components/_datatable.scss
Normal file
@@ -0,0 +1,175 @@
|
||||
$ibo-datatable--padding-y: 2em !default;
|
||||
|
||||
$ibo-datatable-cell-row--line-height: 30px !default;
|
||||
$ibo-datatable-cell-row--padding-x: 1em !default;
|
||||
$ibo-datatable-cell-row--link--color: $ibo-color-primary-600 !default;
|
||||
|
||||
$ibo-datatable-row--odd--background-color: $ibo-color-white-200 !default;
|
||||
$ibo-datatable-row--even--background-color: $ibo-color-white-100 !default;
|
||||
|
||||
$ibo-datatable--toolbar--elements--padding-top: 0.755em !default;
|
||||
|
||||
$ibo-datatable--toolbar--length--padding-right: 0.5em !default;
|
||||
$ibo-datatable--toolbar--length--select--height: 18px !default;
|
||||
$ibo-datatable--toolbar--length--select--width: unset !default;
|
||||
$ibo-datatable--toolbar--length--select--padding-y: 1px !default;
|
||||
$ibo-datatable--toolbar--length--select--padding-x: 2px !default;
|
||||
|
||||
$ibo-datatable--toolbar--info--padding-right: 2em !default;
|
||||
$ibo-datatable--toolbar--info--padding-left: 0em !default;
|
||||
$ibo-datatable--toolbar--info--line-height: $ibo-datatable--toolbar--length--select--height + $ibo-datatable--toolbar--length--select--padding-y !default;
|
||||
|
||||
$ibo-datatable--select-info--padding-left: 2em !default;
|
||||
|
||||
$ibo-datatable--pagination--color: $ibo-color-grey-800 !default;
|
||||
|
||||
$ibo-datatable--pagination--position-x: 1.21% !default;
|
||||
$ibo-datatable--pagination--position-top: 91.58% !default;
|
||||
$ibo-datatable--pagination--position-bottom: 4.85% !default;
|
||||
$ibo-datatable--pagination--button-margin-x: 0.5em !default;
|
||||
|
||||
$ibo-datatable--paginate--padding-top: $ibo-datatable--toolbar--elements--padding-top !default;
|
||||
$ibo-datatable--paginate--padding-left: 2em !default;
|
||||
|
||||
$ibo-datatable--paginate-button--link--color: $ibo-color-grey-800 !default;
|
||||
$ibo-datatable--paginate-button--link--hover--color: $ibo-color-blue-grey-200 !default;
|
||||
|
||||
$ibo-datatable--paginate-button-active--link--color: $ibo-color-grey-900 !default;
|
||||
$ibo-datatable--paginate-button-active--link--background-color: $ibo-color-grey-200 !default;
|
||||
$ibo-datatable--paginate-button-active--link--padding-y: 2px !default;
|
||||
$ibo-datatable--paginate-button-active--link--padding-x: 6px !default;
|
||||
$ibo-datatable--paginate-button-active--link--box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15) !default;
|
||||
$ibo-datatable--paginate-button-active--link--border-radius: $ibo-border-radius-300 !default;
|
||||
|
||||
$ibo-datatable--sorting--opacity: 0.3 !default;
|
||||
$ibo-datatable--sorting--right: 1em !default;
|
||||
|
||||
$ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default;
|
||||
|
||||
.ibo-datatable {
|
||||
padding-bottom: $ibo-datatable--padding-y;
|
||||
padding-top: $ibo-datatable--padding-y;
|
||||
|
||||
thead tr th, tbody tr td {
|
||||
line-height: $ibo-datatable-cell-row--line-height;
|
||||
padding-right: $ibo-datatable-cell-row--padding-x;
|
||||
padding-left: $ibo-datatable-cell-row--padding-x;
|
||||
@extend %ibo-font-ral-med-100;
|
||||
|
||||
a {
|
||||
color: $ibo-datatable-cell-row--link--color;
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-datatable-header.sorting, .ibo-datatable-header.sorting_asc, .ibo-datatable-header.sorting_desc {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: $ibo-datatable-row--odd--background-color;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: $ibo-datatable-row--even--background-color;
|
||||
}
|
||||
}
|
||||
.dataTables_length {
|
||||
@extend %ibo-font-ral-med-100;
|
||||
color: $ibo-color-grey-700;
|
||||
|
||||
position: relative;
|
||||
float: right;
|
||||
padding-top: $ibo-datatable--toolbar--elements--padding-top;
|
||||
padding-right: $ibo-datatable--toolbar--length--padding-right;
|
||||
select{
|
||||
@extend .ibo-input;
|
||||
@extend .ibo-input-select;
|
||||
display: inline-block;
|
||||
height: $ibo-datatable--toolbar--length--select--height;
|
||||
width: $ibo-datatable--toolbar--length--select--width;
|
||||
padding: $ibo-datatable--toolbar--length--select--padding-y $ibo-datatable--toolbar--length--select--padding-x;
|
||||
|
||||
@extend %ibo-font-ral-med-100;
|
||||
}
|
||||
}
|
||||
.dataTables_info {
|
||||
@extend %ibo-font-ral-med-100;
|
||||
color: $ibo-color-grey-700;
|
||||
|
||||
position: relative;
|
||||
float: right;
|
||||
padding-top: $ibo-datatable--toolbar--elements--padding-top;
|
||||
padding-right: $ibo-datatable--toolbar--info--padding-right;
|
||||
padding-left: $ibo-datatable--toolbar--info--padding-left;
|
||||
line-height: $ibo-datatable--toolbar--info--line-height;
|
||||
}
|
||||
.select-info {
|
||||
padding-left: $ibo-datatable--select-info--padding-left;
|
||||
}
|
||||
.pagination
|
||||
{
|
||||
color: $ibo-datatable--pagination--color;
|
||||
|
||||
left: $ibo-datatable--pagination--position-x;
|
||||
right: $ibo-datatable--pagination--position-x;
|
||||
top: $ibo-datatable--pagination--position-top;
|
||||
bottom: $ibo-datatable--pagination--position-bottom;
|
||||
.paginate_button {
|
||||
margin-left: $ibo-datatable--pagination--button-margin-x;
|
||||
margin-right: $ibo-datatable--pagination--button-margin-x;
|
||||
}
|
||||
}
|
||||
.dataTables_paginate
|
||||
{
|
||||
float: left;
|
||||
padding-top: $ibo-datatable--paginate--padding-top;
|
||||
padding-left: $ibo-datatable--paginate--padding-left;
|
||||
}
|
||||
.paginate_button {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.paginate_button a{
|
||||
@extend %ibo-font-ral-med-100;
|
||||
color: $ibo-datatable--paginate-button--link--color;
|
||||
}
|
||||
.paginate_button a:hover {
|
||||
color: $ibo-datatable--paginate-button--link--hover--color;
|
||||
}
|
||||
.paginate_button.active a {
|
||||
@extend %ibo-font-ral-med-100;
|
||||
|
||||
color: $ibo-datatable--paginate-button-active--link--color;
|
||||
background-color: $ibo-datatable--paginate-button-active--link--background-color;
|
||||
padding: $ibo-datatable--paginate-button-active--link--padding-y $ibo-datatable--paginate-button-active--link--padding-x;
|
||||
box-shadow: $ibo-datatable--paginate-button-active--link--box-shadow;
|
||||
border-radius: $ibo-border-radius-300;
|
||||
}
|
||||
.ibo-datatable thead tr th{
|
||||
position: relative;
|
||||
}
|
||||
.ibo-datatable thead tr th.sorting::after{
|
||||
position: absolute;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f0dc";
|
||||
font-weight: 900;
|
||||
opacity: $ibo-datatable--sorting--opacity;
|
||||
right: $ibo-datatable--sorting--right;
|
||||
}
|
||||
.ibo-datatable thead tr th.sorting_desc:after{
|
||||
position: absolute;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f0d7";
|
||||
font-weight: 900;
|
||||
right: $ibo-datatable--sorting--right;
|
||||
}
|
||||
.ibo-datatable thead tr th.sorting_asc:after{
|
||||
position: absolute;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
content: "\f0d8";
|
||||
right: $ibo-datatable--sorting--right;
|
||||
}
|
||||
.ibo-datatable-panel > .ibo-panel--body {
|
||||
padding: $ibo-datatable-panel--body--padding;
|
||||
}
|
||||
62
css/backoffice/base/components/_field.scss
Normal file
62
css/backoffice/base/components/_field.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
$ibo-field--sibling-spacing: 16px !default;
|
||||
$ibo-field--value--color: $ibo-color-grey-700 !default;
|
||||
|
||||
$ibo-field--label--description--content: "?" !default;
|
||||
$ibo-field--label--description--padding-left: 2px !default;
|
||||
$ibo-field--label--description--color: $ibo-color-grey-700 !default;
|
||||
|
||||
.ibo-field {
|
||||
@extend %ibo-font-ral-nor-150;
|
||||
|
||||
& ~ .ibo-field {
|
||||
margin-top: $ibo-field--sibling-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-field-large {
|
||||
display: inherit;
|
||||
|
||||
.ibo-field--label {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-field-small {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
.ibo-field--label {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-field--label {
|
||||
min-width: 100px;
|
||||
max-width: 145px;
|
||||
width: 30%;
|
||||
padding-right: 10px;
|
||||
|
||||
> .ibo-has-description {
|
||||
&::after {
|
||||
content: $ibo-field--label--description--content;
|
||||
padding-left: $ibo-field--label--description--padding-left;
|
||||
vertical-align: top;
|
||||
|
||||
cursor: pointer;
|
||||
color: $ibo-field--label--description--color;
|
||||
@extend %ibo-font-ral-bol-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-field--value {
|
||||
display: table;
|
||||
width: 100%;
|
||||
color: $ibo-field--value--color;
|
||||
}
|
||||
28
css/backoffice/base/components/_fieldset.scss
Normal file
28
css/backoffice/base/components/_fieldset.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
$ibo-fieldset--sibling-spacing: 48px !default;
|
||||
|
||||
$ibo-fieldset--legend--width: 100% !default;
|
||||
$ibo-fieldset--legend--margin-bottom: 16px !default;
|
||||
$ibo-fieldset--legend--padding-bottom: 4px !default;
|
||||
$ibo-fieldset--legend--border-bottom-size: 2px !default;
|
||||
$ibo-fieldset--legend--border-bottom-color: $ibo-color-grey-500 !default;
|
||||
$ibo-fieldset--legend--border-bottom-style: solid !default;
|
||||
|
||||
.ibo-fieldset {
|
||||
& ~ .ibo-fieldset {
|
||||
margin-top: $ibo-fieldset--sibling-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-fieldset-legend {
|
||||
width: $ibo-fieldset--legend--width;
|
||||
margin-bottom: $ibo-fieldset--legend--margin-bottom;
|
||||
padding-bottom: $ibo-fieldset--legend--padding-bottom;
|
||||
border-bottom: $ibo-fieldset--legend--border-bottom-size $ibo-fieldset--legend--border-bottom-style $ibo-fieldset--legend--border-bottom-color;
|
||||
|
||||
@extend %ibo-font-ral-med-250;
|
||||
}
|
||||
4
css/backoffice/base/components/_form.scss
Normal file
4
css/backoffice/base/components/_form.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
4
css/backoffice/base/components/_formtable.scss
Normal file
4
css/backoffice/base/components/_formtable.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
4
css/backoffice/base/components/_formtablerow.scss
Normal file
4
css/backoffice/base/components/_formtablerow.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
203
css/backoffice/base/components/_global-search.scss
Normal file
203
css/backoffice/base/components/_global-search.scss
Normal file
@@ -0,0 +1,203 @@
|
||||
/*!
|
||||
* 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-global-search--head--background-color: $ibo-color-white-100 !default;
|
||||
|
||||
$ibo-global-search--icon-padding-x: 16px !default;
|
||||
$ibo-global-search--icon-padding-y: 0 !default;
|
||||
|
||||
$ibo-global-search--input--padding: 0 default;
|
||||
$ibo-global-search--input--padding-x--is-opened: 8px !default;
|
||||
$ibo-global-search--input--padding-y--is-opened: 8px !default;
|
||||
$ibo-global-search--input--width: 0 !default;
|
||||
$ibo-global-search--input--width--is-opened: 245px !default;
|
||||
$ibo-global-search--input--text-color: $ibo-color-grey-800 !default;
|
||||
$ibo-global-search--input--placeholder-color: $ibo-color-grey-600 !default;
|
||||
|
||||
$ibo-global-search--drawer--max-height: 300px !default;
|
||||
$ibo-global-search--drawer--padding-x: $ibo-global-search--icon-padding-x !default;
|
||||
$ibo-global-search--drawer--padding-y: 16px !default;
|
||||
$ibo-global-search--drawer--top: -1 * ($ibo-global-search--drawer--max-height) !default;
|
||||
$ibo-global-search--drawer--top--is-opened: 100% !default;
|
||||
$ibo-global-search--drawer--background-color: $ibo-color-white-100 !default;
|
||||
|
||||
$ibo-global-search--compartment-title--margin-bottom: 8px !default;
|
||||
$ibo-global-search--compartment-title--padding-left: 32px !default;
|
||||
$ibo-global-search--compartment-title--text-color: $ibo-color-grey-600 !default;
|
||||
$ibo-global-search--compartment-title--line-spacing: 8px !default;
|
||||
|
||||
$ibo-global-search--compartment-content--text-color: $ibo-color-grey-900 !default;
|
||||
|
||||
$ibo-global-search--compartment-element--margin-bottom: 8px !default;
|
||||
|
||||
$ibo-global-search--compartment-element-image--margin-right: 8px !default;
|
||||
$ibo-global-search--compartment-element-image--width: 20px !default;
|
||||
|
||||
$ibo-global-search--compartment--placeholder-image--margin-top: 24px !default;
|
||||
$ibo-global-search--compartment--placeholder-image--margin-bottom: 16px !default;
|
||||
$ibo-global-search--compartment--placeholder-image--margin-y: auto !default;
|
||||
$ibo-global-search--compartment--placeholder-image--width: 66% !default;
|
||||
|
||||
$ibo-global-search--compartment--placeholder-hint--padding-x: 8px !default;
|
||||
$ibo-global-search--compartment--placeholder-hint--padding-y: 0 !default;
|
||||
$ibo-global-search--compartment--placeholder-hint--text-color: $ibo-color-grey-700 !default;
|
||||
|
||||
/* Animations*/
|
||||
@keyframes ibo-global-search--drawer--opening {
|
||||
from {
|
||||
top: $ibo-global-search--drawer--top;
|
||||
box-shadow: none;
|
||||
}
|
||||
to {
|
||||
top: $ibo-global-search--drawer--top--is-opened;
|
||||
box-shadow: $ibo-elevation-300;
|
||||
}
|
||||
}
|
||||
|
||||
/* SCSS rules */
|
||||
.ibo-global-search{
|
||||
position: relative;
|
||||
@extend %ibo-full-height-content;
|
||||
|
||||
&.ibo-is-opened{
|
||||
.ibo-global-search--input{
|
||||
padding: $ibo-global-search--input--padding-y--is-opened $ibo-global-search--input--padding-x--is-opened;
|
||||
width: $ibo-global-search--input--width--is-opened;
|
||||
}
|
||||
.ibo-global-search--drawer{
|
||||
animation-name: ibo-global-search--drawer--opening;
|
||||
animation-delay: 0.1s;
|
||||
animation-duration: 0.2s;
|
||||
animation-direction: normal;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ibo-global-search--head{
|
||||
@extend %ibo-full-height-content;
|
||||
background-color: $ibo-global-search--head--background-color;
|
||||
}
|
||||
.ibo-global-search--icon{
|
||||
align-self: center;
|
||||
padding: $ibo-global-search--icon-padding-y $ibo-global-search--icon-padding-x;
|
||||
@extend %ibo-font-ral-nor-400;
|
||||
}
|
||||
.ibo-global-search--input{
|
||||
padding: $ibo-global-search--input--padding;
|
||||
width: $ibo-global-search--input--width;
|
||||
color: $ibo-global-search--input--text-color;
|
||||
@extend %ibo-font-ral-nor-300;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&::placeholder{
|
||||
color: $ibo-global-search--input--placeholder-color;
|
||||
}
|
||||
/* This rule is duplicated otherwise Chrome won't be able to parse it. */
|
||||
&:-ms-input-placeholder,
|
||||
&::-ms-input-placeholder{
|
||||
color: $ibo-global-search--input--placeholder-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
@extend .ibo-global-search--input;
|
||||
}
|
||||
}
|
||||
/* TODO: Make drawer appear below the top bar so its shadow is cast on the drawer */
|
||||
.ibo-global-search--drawer{
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: $ibo-global-search--drawer--top;
|
||||
padding: $ibo-global-search--drawer--padding-y $ibo-global-search--drawer--padding-x;
|
||||
background-color: $ibo-global-search--drawer--background-color;
|
||||
box-shadow: none;
|
||||
@extend %ibo-font-ral-nor-100;
|
||||
}
|
||||
.ibo-global-search--compartment-title{
|
||||
margin-bottom: $ibo-global-search--compartment-title--margin-bottom;
|
||||
padding-left: $ibo-global-search--compartment-title--padding-left;
|
||||
overflow-x: hidden;
|
||||
color: $ibo-global-search--compartment-title--text-color;
|
||||
|
||||
> span{
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
width: 600px;
|
||||
border-top: 1px solid $ibo-global-search--compartment-title--text-color;
|
||||
}
|
||||
&::before{
|
||||
right: 100%;
|
||||
margin-right: $ibo-global-search--compartment-title--line-spacing;
|
||||
}
|
||||
&::after{
|
||||
left: 100%;
|
||||
margin-left: $ibo-global-search--compartment-title--line-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ibo-global-search--compartment-content{
|
||||
color: $ibo-global-search--compartment-content--text-color;
|
||||
}
|
||||
.ibo-global-search--compartment-element{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
|
||||
@extend %ibo-text-truncated-with-ellipsis;
|
||||
|
||||
&:not(:last-child){
|
||||
margin-bottom: $ibo-global-search--compartment-element--margin-bottom;
|
||||
}
|
||||
}
|
||||
.ibo-global-search--compartment-element-image{
|
||||
margin-right: $ibo-global-search--compartment-element-image--margin-right;
|
||||
width: $ibo-global-search--compartment-element-image--width;
|
||||
}
|
||||
.ibo-global-search--compartment--placeholder{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ibo-global-search--compartment--placeholder-image>svg{
|
||||
width: $ibo-global-search--compartment--placeholder-image--width;
|
||||
height: inherit;
|
||||
margin: $ibo-global-search--compartment--placeholder-image--margin-top $ibo-global-search--compartment--placeholder-image--margin-y $ibo-global-search--compartment--placeholder-image--margin-bottom $ibo-global-search--compartment--placeholder-image--margin-y;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.ibo-global-search--compartment--placeholder-hint{
|
||||
text-align: justify;
|
||||
padding: $ibo-global-search--compartment--placeholder-hint--padding-y $ibo-global-search--compartment--placeholder-hint--padding-x;
|
||||
color: $ibo-global-search--compartment--placeholder-hint--text-color;
|
||||
@extend %ibo-font-ral-ita-100;
|
||||
}
|
||||
55
css/backoffice/base/components/_modal.scss
Normal file
55
css/backoffice/base/components/_modal.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
$ibo-modal--ui-dialog--padding: 16px 16px 16px !default;
|
||||
$ibo-modal--ui-dialog--border-radius: $ibo-border-radius-500 !default;
|
||||
$ibo-modal--ui-dialog--background-color: $ibo-color-white-100 !default;
|
||||
|
||||
$ibo-modal--ui-widget-overlay--background-color: $ibo-color-blue-grey-900 !default;
|
||||
|
||||
.ui-dialog{
|
||||
padding: $ibo-modal--ui-dialog--padding;
|
||||
background-color: $ibo-modal--ui-dialog--background-color;
|
||||
border-radius: $ibo-modal--ui-dialog--border-radius;
|
||||
overflow: hidden;
|
||||
&::before{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background-color: #2c5382;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.ui-button {
|
||||
@extend .ibo-button;
|
||||
@extend .ibo-is-regular;
|
||||
@extend .ibo-is-secondary;
|
||||
> .ui-icon {
|
||||
background-image: none;
|
||||
float: unset;
|
||||
margin: auto;
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
|
||||
&.ui-icon-closethick::before{
|
||||
content: '\f00d';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 600;
|
||||
text-indent: 0;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.ui-dialog-titlebar-close{
|
||||
@extend .ibo-is-alternative;
|
||||
@extend .ibo-is-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-dialog-title{
|
||||
@extend %ibo-font-ral-nor-250;
|
||||
}
|
||||
.ui-widget-overlay.ui-front{
|
||||
background-color: $ibo-modal--ui-widget-overlay--background-color;
|
||||
}
|
||||
125
css/backoffice/base/components/_newsroom-menu.scss
Normal file
125
css/backoffice/base/components/_newsroom-menu.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
/*!
|
||||
* 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-navigation-menu--notifications-menu--min-width: 250px;
|
||||
|
||||
$ibo-navigation-menu--notifications--item--image--margin-x: 6px !default;
|
||||
$ibo-navigation-menu--notifications--item--image--margin-y: 0 !default;
|
||||
$ibo-navigation-menu--notifications--item--image--max-width: 20px !default;
|
||||
$ibo-navigation-menu--notifications--item--image--max-height: 20px !default;
|
||||
$ibo-navigation-menu--notifications--item--image--border-radius: $ibo-border-radius-full !default;
|
||||
|
||||
$ibo-navigation-menu--notifications--item--bottom-text--margin-left: auto !default;
|
||||
|
||||
$ibo-navigation-menu--notifications--item--content--padding-y: 0 !default;
|
||||
$ibo-navigation-menu--notifications--item--content--padding-x: 14px !default;
|
||||
$ibo-navigation-menu--notifications--item--content--img--max-height: 100px !default;
|
||||
$ibo-navigation-menu--notifications--item--content--img--padding: 5px !default;
|
||||
|
||||
$ibo-navigation-menu--notifications--item--new-message-indicator--width: 10px !default;
|
||||
$ibo-navigation-menu--notifications--item--new-message-indicator--height: 10px !default;
|
||||
$ibo-navigation-menu--notifications--item--new-message-indicator--background-color: $ibo-color-blue-500 !default;
|
||||
$ibo-navigation-menu--notifications--item--new-message-indicator--border-radius: $ibo-border-radius-full !default;
|
||||
$ibo-navigation-menu--notifications--item--new-message-indicator--margin-top: 4px !default;
|
||||
|
||||
$ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right: 15px !default;
|
||||
|
||||
$ibo-navigation-menu--notifications-dismiss-all--icon--margin: 0 10px 0 0 !default;
|
||||
|
||||
$ibo-popover-menu--item--no-message--image--svg--width : 100% !default;
|
||||
$ibo-popover-menu--item--no-message--image--svg--height : inherit !default;
|
||||
$ibo-popover-menu--item--no-message--image--svg--padding : 15px !default;
|
||||
|
||||
#ibo-navigation-menu--notifications-menu {
|
||||
flex-flow: column;
|
||||
min-width: $ibo-navigation-menu--notifications-menu--min-width;
|
||||
.ibo-navigation-menu--notifications--messages-section{
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
.ibo-navigation-menu--notifications--show-all-messages, .ibo-navigation-menu--notifications-dismiss-all, .ibo-navigation-menu--notifications-show-all-multiple{
|
||||
overflow-x: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ibo-navigation-menu--notifications--item--image{
|
||||
max-width: $ibo-navigation-menu--notifications--item--image--max-width;
|
||||
max-height: $ibo-navigation-menu--notifications--item--image--max-height;
|
||||
margin: $ibo-navigation-menu--notifications--item--image--margin-y $ibo-navigation-menu--notifications--item--image--margin-x;
|
||||
border-radius: $ibo-navigation-menu--notifications--item--image--border-radius;
|
||||
}
|
||||
|
||||
img.ibo-navigation-menu--notifications--item--image[src=""]{
|
||||
display: none;
|
||||
}
|
||||
img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-navigation-menu--notifications--item--image
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.ibo-navigation-menu--notifications--item--bottom-text{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
float: right;
|
||||
align-self: center;
|
||||
@extend %ibo-font-ral-nor-100;
|
||||
margin-left: $ibo-navigation-menu--notifications--item--bottom-text--margin-left;
|
||||
}
|
||||
.ibo-navigation-menu--notifications--item--content{
|
||||
@extend %ibo-font-ral-nor-150;
|
||||
padding: $ibo-navigation-menu--notifications--item--content--padding-y $ibo-navigation-menu--notifications--item--content--padding-x;
|
||||
img{
|
||||
max-height: $ibo-navigation-menu--notifications--item--content--img--max-height;
|
||||
padding: $ibo-navigation-menu--notifications--item--content--img--padding;
|
||||
}
|
||||
}
|
||||
.ibo-navigation-menu--notifications-item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.ibo-navigation-menu--notifications--item--new-message-indicator{
|
||||
width: $ibo-navigation-menu--notifications--item--new-message-indicator--width;
|
||||
height: $ibo-navigation-menu--notifications--item--new-message-indicator--height;
|
||||
background-color: $ibo-navigation-menu--notifications--item--new-message-indicator--background-color;
|
||||
border-radius: $ibo-navigation-menu--notifications--item--new-message-indicator--border-radius;
|
||||
margin-top: $ibo-navigation-menu--notifications--item--new-message-indicator--margin-top;
|
||||
}
|
||||
|
||||
.ibo-navigation-menu--notifications-show-all-multiple ~ .ibo-popover-menu{
|
||||
bottom: 0;
|
||||
.ibo-navigation-menu--notifications--item--new-message-indicator{
|
||||
display: inline-block;
|
||||
margin-right: $ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right;
|
||||
}
|
||||
.ibo-navigation-menu--notifications-show-all-multiple--counter{
|
||||
@extend %ibo-font-ral-bol-200;
|
||||
}
|
||||
}
|
||||
.ibo-navigation-menu--notifications-dismiss-all--icon{
|
||||
margin: $ibo-navigation-menu--notifications-dismiss-all--icon--margin;
|
||||
}
|
||||
.ibo-popover-menu--item--no-message{
|
||||
text-align: center;
|
||||
}
|
||||
.ibo-popover-menu--item--no-message--image>svg{
|
||||
display: flex;
|
||||
width: $ibo-popover-menu--item--no-message--image--svg--width;
|
||||
height: $ibo-popover-menu--item--no-message--image--svg--height;
|
||||
padding: $ibo-popover-menu--item--no-message--image--svg--padding;
|
||||
}
|
||||
120
css/backoffice/base/components/_panel.scss
Normal file
120
css/backoffice/base/components/_panel.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
/*!
|
||||
* 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-panel--spacing-top: 24px !default;
|
||||
|
||||
$ibo-panel--highlight--width: 100% !default;
|
||||
$ibo-panel--highlight--height: 8px !default;
|
||||
$ibo-panel--highlight--border-radius: $ibo-border-radius-400 $ibo-border-radius-400 0 0 !default;
|
||||
$ibo-panel--highlight--padding-bottom: $ibo-panel--highlight--height !default;
|
||||
|
||||
$ibo-panel--title--color: $ibo-color-grey-900 !default;
|
||||
$ibo-panel--subtitle--color: $ibo-color-grey-800 !default;
|
||||
|
||||
$ibo-panel--body--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-panel--body--padding-bottom: 16px !default;
|
||||
$ibo-panel--body--padding-top: $ibo-panel--body--padding-bottom + $ibo-panel--highlight--height !default;
|
||||
$ibo-panel--body--padding-x: 16px !default;
|
||||
$ibo-panel--body--border-radius: $ibo-border-radius-500 !default;
|
||||
$ibo-panel--body--border-size: 1px !default;
|
||||
$ibo-panel--body--border-color: $ibo-color-grey-400 !default;
|
||||
|
||||
$ibo-panel-colors: (
|
||||
'primary': $ibo-color-primary-600,
|
||||
'secondary': $ibo-color-secondary-600,
|
||||
'neutral': $ibo-color-grey-600,
|
||||
'information': $ibo-color-information-600,
|
||||
'success': $ibo-color-success-600,
|
||||
'failure': $ibo-color-danger-600,
|
||||
'warning': $ibo-color-warning-600,
|
||||
'danger': $ibo-color-danger-600,
|
||||
'grey' : $ibo-color-grey-600,
|
||||
'blue-grey': $ibo-color-blue-grey-600,
|
||||
'blue': $ibo-color-blue-800,
|
||||
'cyan': $ibo-color-cyan-600,
|
||||
'green': $ibo-color-green-600,
|
||||
'orange' : $ibo-color-orange-600,
|
||||
'red': $ibo-color-red-600,
|
||||
'pink': $ibo-color-pink-600,
|
||||
) !default;
|
||||
|
||||
@each $sColor, $sColorValue in $ibo-panel-colors {
|
||||
.ibo-panel.ibo-is-#{$sColor} > .ibo-panel--body::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
|
||||
background-color: $sColorValue;
|
||||
content: "";
|
||||
|
||||
width: $ibo-panel--highlight--width;
|
||||
height: $ibo-panel--highlight--height;
|
||||
padding-bottom: $ibo-panel--highlight--padding-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
/* Rules */
|
||||
.ibo-panel + .ibo-panel {
|
||||
margin-top: $ibo-panel--spacing-top;
|
||||
}
|
||||
|
||||
.ibo-panel--header {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.ibo-panel--title {
|
||||
color: $ibo-panel--title--color;
|
||||
@extend %ibo-font-ral-med-250;
|
||||
flex-grow: 1;
|
||||
|
||||
.ibo-panel--title-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ibo-panel--title-title {
|
||||
display: inline-block;
|
||||
@extend %ibo-font-ral-med-250;
|
||||
|
||||
.ibo-panel--title-title-title {
|
||||
}
|
||||
|
||||
.ibo-panel--title-title-subtitle {
|
||||
@extend %ibo-font-ral-nor-250;
|
||||
color: $ibo-panel--subtitle--color;
|
||||
|
||||
a.summary {
|
||||
@extend %ibo-font-ral-nor-250;
|
||||
color: $ibo-panel--subtitle--color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-panel--body {
|
||||
position: relative;
|
||||
padding: $ibo-panel--body--padding-top $ibo-panel--body--padding-x $ibo-panel--body--padding-bottom;
|
||||
background-color: $ibo-panel--body--background-color;
|
||||
border: solid $ibo-panel--body--border-size $ibo-panel--body--border-color;
|
||||
border-radius: $ibo-panel--body--border-radius;
|
||||
overflow: hidden; /* To force highlight color to be cropped by the border radius */
|
||||
|
||||
@extend %ibo-font-ral-nor-200;
|
||||
}
|
||||
244
css/backoffice/base/components/_quick-create.scss
Normal file
244
css/backoffice/base/components/_quick-create.scss
Normal file
@@ -0,0 +1,244 @@
|
||||
/*!
|
||||
* 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-quick-create--head--background-color: $ibo-color-white-100 !default;
|
||||
|
||||
$ibo-quick-create--icon-padding-x: 16px !default;
|
||||
$ibo-quick-create--icon-padding-y: 0 !default;
|
||||
|
||||
$ibo-quick-create--input--padding: 0 default;
|
||||
$ibo-quick-create--input--padding-x--is-opened: 8px !default;
|
||||
$ibo-quick-create--input--padding-y--is-opened: 8px !default;
|
||||
$ibo-quick-create--input--width: 0 !default;
|
||||
$ibo-quick-create--input--width--is-opened: 245px !default;
|
||||
$ibo-quick-create--input--text-color: $ibo-color-grey-800 !default;
|
||||
$ibo-quick-create--input--placeholder-color: $ibo-color-grey-600 !default;
|
||||
|
||||
$ibo-quick-create--input-options--background-color: $ibo-quick-create--head--background-color !default;
|
||||
$ibo-quick-create--input-options--border: none !default;
|
||||
$ibo-quick-create--input-options--border-radius: 0 !default;
|
||||
|
||||
$ibo-quick-create--drawer--max-height: 300px !default;
|
||||
$ibo-quick-create--drawer--padding-x: $ibo-quick-create--icon-padding-x !default;
|
||||
$ibo-quick-create--drawer--padding-y: 16px !default;
|
||||
$ibo-quick-create--drawer--top: -1 * ($ibo-quick-create--drawer--max-height) !default;
|
||||
$ibo-quick-create--drawer--top--is-opened: 100% !default;
|
||||
$ibo-quick-create--drawer--background-color: $ibo-color-white-100 !default;
|
||||
|
||||
$ibo-quick-create--compartment-title--margin-bottom: 8px !default;
|
||||
$ibo-quick-create--compartment-title--padding-left: 32px !default;
|
||||
$ibo-quick-create--compartment-title--text-color: $ibo-color-grey-600 !default;
|
||||
$ibo-quick-create--compartment-title--line-spacing: 8px !default;
|
||||
|
||||
$ibo-quick-create--compartment-content--text-color: $ibo-color-grey-900 !default;
|
||||
|
||||
$ibo-quick-create--compartment-element--margin-bottom: 8px !default;
|
||||
|
||||
$ibo-quick-create--compartment-results--element--option: $ibo-quick-create--compartment-element--margin-bottom !default;
|
||||
|
||||
$ibo-quick-create--compartment-element-image--margin-right: 8px !default;
|
||||
$ibo-quick-create--compartment-element-image--width: 20px !default;
|
||||
|
||||
$ibo-quick-create--compartment--placeholder-image--margin-top: 24px !default;
|
||||
$ibo-quick-create--compartment--placeholder-image--margin-bottom: 16px !default;
|
||||
$ibo-quick-create--compartment--placeholder-image--margin-x: auto !default;
|
||||
$ibo-quick-create--compartment--placeholder-image--width: 66% !default;
|
||||
|
||||
$ibo-quick-create--compartment--placeholder-hint--padding-x: 8px !default;
|
||||
$ibo-quick-create--compartment--placeholder-hint--padding-y: 0 !default;
|
||||
$ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-700 !default;
|
||||
|
||||
/* Animations*/
|
||||
@keyframes ibo-quick-create--drawer--opening{
|
||||
from {
|
||||
top: $ibo-quick-create--drawer--top;
|
||||
box-shadow: none;
|
||||
}
|
||||
to {
|
||||
top: $ibo-quick-create--drawer--top--is-opened;
|
||||
box-shadow: $ibo-elevation-300;
|
||||
}
|
||||
}
|
||||
|
||||
/* SCSS rules */
|
||||
.ibo-quick-create{
|
||||
position: relative;
|
||||
@extend %ibo-full-height-content;
|
||||
|
||||
&.ibo-is-opened{
|
||||
.ibo-quick-create--input{
|
||||
width: $ibo-quick-create--input--width--is-opened;
|
||||
}
|
||||
.ibo-quick-create--drawer{
|
||||
animation-name: ibo-quick-create--drawer--opening;
|
||||
animation-delay: 0.1s;
|
||||
animation-duration: 0.2s;
|
||||
animation-direction: normal;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ibo-quick-create--head{
|
||||
@extend %ibo-full-height-content;
|
||||
background-color: $ibo-quick-create--head--background-color;
|
||||
}
|
||||
.ibo-quick-create--icon{
|
||||
align-self: center;
|
||||
padding: $ibo-quick-create--icon-padding-y $ibo-quick-create--icon-padding-x;
|
||||
@extend %ibo-font-ral-nor-400;
|
||||
}
|
||||
.ibo-quick-create--input{
|
||||
width: $ibo-quick-create--input--width;
|
||||
border: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
/* Remove selectize.js theme and apply our own */
|
||||
&.selectize-control.single{
|
||||
position: sticky;
|
||||
display: flex;
|
||||
|
||||
.selectize-input{
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&.input-active{
|
||||
@extend .selectize-input;
|
||||
}
|
||||
|
||||
> input{
|
||||
color: $ibo-quick-create--input--text-color;
|
||||
@extend %ibo-font-ral-nor-300;
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
&::placeholder{
|
||||
color: $ibo-quick-create--input--placeholder-color;
|
||||
}
|
||||
/* This rule is duplicated otherwise Chrome won't be able to parse it. */
|
||||
&:-ms-input-placeholder,
|
||||
&::-ms-input-placeholder{
|
||||
color: $ibo-quick-create--input--placeholder-color;
|
||||
}
|
||||
}
|
||||
> .item{
|
||||
color: $ibo-quick-create--input--text-color;
|
||||
@extend %ibo-font-ral-nor-300;
|
||||
|
||||
line-height: 200%;
|
||||
}
|
||||
}
|
||||
.selectize-dropdown{
|
||||
background-color: $ibo-quick-create--input-options--background-color;
|
||||
border: $ibo-quick-create--input-options--border;
|
||||
border-radius: $ibo-quick-create--input-options--border-radius;
|
||||
@extend %ibo-elevation-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* TODO: Make drawer appear below the top bar so its shadow is cast on the drawer */
|
||||
.ibo-quick-create--drawer{
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: $ibo-quick-create--drawer--top;
|
||||
padding: $ibo-quick-create--drawer--padding-y $ibo-quick-create--drawer--padding-x;
|
||||
background-color: $ibo-quick-create--drawer--background-color;
|
||||
box-shadow: none;
|
||||
@extend %ibo-font-ral-nor-100;
|
||||
}
|
||||
.ibo-quick-create--compartment-title{
|
||||
margin-bottom: $ibo-quick-create--compartment-title--margin-bottom;
|
||||
padding-left: $ibo-quick-create--compartment-title--padding-left;
|
||||
overflow-x: hidden;
|
||||
color: $ibo-quick-create--compartment-title--text-color;
|
||||
|
||||
> span{
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
width: 600px;
|
||||
border-top: 1px solid $ibo-quick-create--compartment-title--text-color;
|
||||
}
|
||||
&::before{
|
||||
right: 100%;
|
||||
margin-right: $ibo-quick-create--compartment-title--line-spacing;
|
||||
}
|
||||
&::after{
|
||||
left: 100%;
|
||||
margin-left: $ibo-quick-create--compartment-title--line-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ibo-quick-create--compartment-content{
|
||||
color: $ibo-quick-create--compartment-content--text-color;
|
||||
}
|
||||
.ibo-quick-create--compartment-element{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
|
||||
@extend %ibo-text-truncated-with-ellipsis;
|
||||
|
||||
&:not(:last-child){
|
||||
margin-bottom: $ibo-quick-create--compartment-element--margin-bottom;
|
||||
}
|
||||
}
|
||||
.ibo-quick-create--compartment-element-image{
|
||||
margin-right: $ibo-quick-create--compartment-element-image--margin-right;
|
||||
width: $ibo-quick-create--compartment-element-image--width;
|
||||
}
|
||||
|
||||
.ibo-quick-create--compartment-results--element > .option{
|
||||
margin-bottom: $ibo-quick-create--compartment-element--margin-bottom;
|
||||
color: inherit;
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
@extend a:hover;
|
||||
}
|
||||
}
|
||||
|
||||
.ibo-quick-create--compartment--placeholder{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ibo-quick-create--compartment--placeholder-image>svg{
|
||||
width: $ibo-quick-create--compartment--placeholder-image--width;
|
||||
height: inherit;
|
||||
margin: $ibo-quick-create--compartment--placeholder-image--margin-top $ibo-quick-create--compartment--placeholder-image--margin-x $ibo-quick-create--compartment--placeholder-image--margin-bottom $ibo-quick-create--compartment--placeholder-image--margin-x;
|
||||
display: flex;
|
||||
}
|
||||
.ibo-quick-create--compartment--placeholder-hint{
|
||||
text-align: justify;
|
||||
padding: $ibo-quick-create--compartment--placeholder-hint--padding-y $ibo-quick-create--compartment--placeholder-hint--padding-x;
|
||||
color: $ibo-quick-create--compartment--placeholder-hint--text-color;
|
||||
@extend %ibo-font-ral-ita-100;
|
||||
}
|
||||
4
css/backoffice/base/components/_richtext.scss
Normal file
4
css/backoffice/base/components/_richtext.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
894
css/backoffice/base/components/_search-form.scss
Normal file
894
css/backoffice/base/components/_search-form.scss
Normal file
@@ -0,0 +1,894 @@
|
||||
/* Search forms v2 */
|
||||
.search_box {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1100; /* To be over the table block/unblock UI. Not very sure about this. */
|
||||
text-align: center; /* Used when form is closed */
|
||||
|
||||
/* Sizing reset */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.search_form_handler {
|
||||
// position: relative;
|
||||
// z-index: 10;
|
||||
// width: 100%;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
// font-size: 12px;
|
||||
// text-align: left; /* To compensate .search_box:text-align */
|
||||
// border: 1px solid $search-form-container-bg-color;
|
||||
//transition: width 0.3s ease-in-out;
|
||||
|
||||
/* Sizing reset */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Hyperlink reset */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Input reset */
|
||||
input[type="text"],
|
||||
select {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
&:not(.closed) {
|
||||
.sf_title {
|
||||
.sft_short {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sft_hint,
|
||||
.sfobs_hint,
|
||||
.sft_toggler {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sft_toggler {
|
||||
transform: rotateX(180deg);
|
||||
transition: transform 0.5s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
margin-bottom: 0.5em;
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
//background-color: $complement-color;
|
||||
|
||||
.sf_criterion_area {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sf_title {
|
||||
padding: 6px 8px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
.sft_long {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sft_hint,
|
||||
.sfobs_hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.no_auto_submit) {
|
||||
.sft_hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sfc_fg_apply {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.no_auto_submit {
|
||||
.sfc_fg_search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sft_hint {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:not(.hide_obsolete_data) {
|
||||
.sfobs_hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide_obsolete_data {
|
||||
.sfobs_hint {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide_obsolete_data.no_auto_submit {
|
||||
.sfobs_hint {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sf_title {
|
||||
transition: opacity 0.3s, background-color 0.3s, color 0.3s linear;
|
||||
padding: 8px 10px;
|
||||
margin: 0;
|
||||
color: $ibo-color-white-200;
|
||||
//background-color: $search-form-container-bg-color;
|
||||
cursor: pointer;
|
||||
|
||||
.sft_hint,
|
||||
.sfobs_hint {
|
||||
font-size: 8pt;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sft_toggler {
|
||||
margin-left: 0.7em;
|
||||
transition: color 0.2s ease-in-out, transform 0.4s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: $ibo-color-grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sf_message {
|
||||
display: none;
|
||||
margin: 8px 8px 0px 8px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.sf_criterion_area {
|
||||
/*display: none;*/
|
||||
padding: 8px 8px 3px 8px; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
|
||||
background-color: $ibo-color-white-100;
|
||||
|
||||
.sf_criterion_row {
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid $ibo-color-grey-200;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "or"; /* TODO: Make this into a dict entry */
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 8px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: $ibo-color-grey-600;
|
||||
background-color: $ibo-color-white-100; /* Must match .sf_criterion_area:background-color */
|
||||
}
|
||||
}
|
||||
|
||||
.sf_criterion_group {
|
||||
display: inline;
|
||||
.sfc_fg_button,
|
||||
.sfc_header {
|
||||
border: 1px solid #E1E7EC; /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Common style between criterion and more criterion */
|
||||
.search_form_criteria,
|
||||
.sf_more_criterion,
|
||||
.sf_button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
vertical-align: top;
|
||||
min-width: 34px;
|
||||
text-align: center;
|
||||
|
||||
&.opened {
|
||||
margin-bottom: 0px; /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
|
||||
|
||||
.sfc_header,
|
||||
.sfm_header {
|
||||
margin-bottom: 7px;
|
||||
//padding-bottom: 13px; /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
padding: 7px 8px;
|
||||
vertical-align: top;
|
||||
border: solid 1px $ibo-color-grey-300;
|
||||
border-radius: $ibo-border-radius-300;
|
||||
}
|
||||
|
||||
.sfm_content {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
min-width: 100%;
|
||||
left: 0px;
|
||||
margin-top: -1px;
|
||||
|
||||
.sfc_fg_buttons {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Criteria tags */
|
||||
.search_form_criteria {
|
||||
/* Non editable criteria */
|
||||
&.locked {
|
||||
background-color: $ibo-color-grey-200;
|
||||
|
||||
.sfc_title {
|
||||
user-select: none;
|
||||
cursor: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/* Draft criteria (modifications not applied) */
|
||||
&.draft {
|
||||
.sfc_header,
|
||||
.sfc_form_group {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.sfc_title {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
/* Opened criteria (form group displayed) */
|
||||
&.opened {
|
||||
z-index: 1; /* To be over other criterion */
|
||||
|
||||
.sfc_toggle {
|
||||
transform: rotateX(-180deg);
|
||||
}
|
||||
|
||||
.sfc_form_group {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.opened_left {
|
||||
.sfc_form_group {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add "and" on criterion but the one and submit button */
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> * {
|
||||
background-color: $ibo-color-white-200;
|
||||
color: $ibo-color-grey-900;
|
||||
}
|
||||
|
||||
/* Top left corner icons */
|
||||
.sfc_toggle,
|
||||
.sfc_close {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
color: $ibo-color-primary-600;
|
||||
}
|
||||
|
||||
.sfc_locked {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
color: $ibo-color-grey-500;
|
||||
}
|
||||
|
||||
.sfc_toggle {
|
||||
display: inline-block;
|
||||
right: 23px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.sfc_close,
|
||||
.sfc_locked {
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
.sfc_title {
|
||||
max-width: 240px;
|
||||
padding-right: 30px;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
.sfc_values {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sfc_form_group {
|
||||
/* Form group (operators) is displayed only when the criteria is toggled to opened state */
|
||||
display: none;
|
||||
max-width: 450px;
|
||||
max-height: 520px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
.sfc_fg_operators {
|
||||
font-size: 12px;
|
||||
|
||||
.sfc_fg_operator {
|
||||
&.force_hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
> label {
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_op_radio {
|
||||
width: 12px;
|
||||
margin: 0px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.sfc_op_name {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.sfc_op_content {
|
||||
input[type="text"] {
|
||||
@extend .ibo-input;
|
||||
display: unset;
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_opc_multichoices {
|
||||
label > input {
|
||||
vertical-align: middle;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.sfc_opc_mc_toggler {
|
||||
|
||||
}
|
||||
|
||||
.sfc_opc_mc_items_wrapper {
|
||||
max-height: 415px; /* Must be less than .sfc_form_group:max-height - .sfc_opc_mc_toggler:height - .sfc_opc_mc_filter:height */
|
||||
overflow-y: auto;
|
||||
margin: 0px -8px; /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
|
||||
|
||||
.sfc_opc_mc_items {
|
||||
.sfc_opc_mc_items_list {
|
||||
text-align: left;
|
||||
&.sfc_opc_mc_items_selected {
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-top: 1px solid $ibo-color-grey-300;
|
||||
width: calc(100% - 12px); /* minus margin-left x2 */
|
||||
margin-left: 6px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_opc_mc_placeholder {
|
||||
padding: 15px 8px;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sfc_opc_mc_item {
|
||||
padding: 4px 8px; /* Putting back the padding remove by .sfc_opc_mc_items */
|
||||
|
||||
&:hover {
|
||||
background-color: $ibo-color-grey-200;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_opc_mc_items_hint {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
color: $ibo-color-grey-700;
|
||||
font-size: 10px;
|
||||
font-style: italic;
|
||||
|
||||
> span {
|
||||
margin-right: 0.5em;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_fg_search,
|
||||
.sfc_fg_apply,
|
||||
.sfc_fg_cancel {
|
||||
margin-top: 8px;
|
||||
//padding: 3px 6px;
|
||||
font-size: $ibo-font-size-100; /* Not bold, so it looks like 10px/bold of more/less buttons */
|
||||
}
|
||||
|
||||
.sfc_fg_search,
|
||||
.sfc_fg_apply {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.sfc_fg_more,
|
||||
.sfc_fg_less {
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
color: $ibo-color-blue-800;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
> span {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show only first operator in simple mode */
|
||||
.sfc_fg_operator:not(:first-of-type),
|
||||
.sfc_fg_operator:first-of-type .sfc_op_radio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sfc_fg_less {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sfc_fg_more {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Show all operators in advanced mode */
|
||||
&.advanced {
|
||||
|
||||
.sfc_fg_operator {
|
||||
margin-bottom: 3px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_fg_operator:not(:first-of-type),
|
||||
.sfc_fg_operator:first-of-type .sfc_op_radio {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.sfc_fg_less {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sfc_fg_more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide_on_advanced {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:not(.advanced) {
|
||||
.hide_on_less {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Special criterion processing */
|
||||
&.search_form_criteria_raw {
|
||||
> * {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.sfc_title {
|
||||
cursor: initial;
|
||||
padding-right: 20px; /* Less than regular as there is no toggle icon */
|
||||
}
|
||||
|
||||
.sfc_form_group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.search_form_criteria_enum {
|
||||
.sfc_form_group {
|
||||
.sfc_fg_operator_in {
|
||||
> label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: initial;
|
||||
white-space: nowrap;
|
||||
|
||||
.sfc_op_content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.search_form_criteria_tag_set {
|
||||
.sfc_form_group {
|
||||
.sfc_fg_operator_in {
|
||||
> label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: initial;
|
||||
white-space: nowrap;
|
||||
|
||||
.sfc_op_content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.search_form_criteria_numeric {
|
||||
//.sfc_form_group.advanced {
|
||||
// .sfc_fg_operator_between {
|
||||
// margin-top: 5px;
|
||||
// margin-bottom: 5px;
|
||||
// }
|
||||
//}
|
||||
.sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_between {
|
||||
.sfc_op_content_from_outer {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sfc_op_content_until_outer {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
&.sfc_op_content_from_label, &.sfc_op_content_until_label {
|
||||
width: 45px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.search_form_criteria_date_time,
|
||||
&.search_form_criteria_date {
|
||||
.sfc_form_group.advanced {
|
||||
.sfc_fg_operator_between {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_fg_operator_between_days {
|
||||
input {
|
||||
width: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
button.ui-datepicker-trigger {
|
||||
background: none;
|
||||
border: none;
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* More criterion */
|
||||
.sf_more_criterion {
|
||||
&.opened {
|
||||
z-index: 2; /* To be over criterion */
|
||||
|
||||
.sfm_content {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.opened_left {
|
||||
.sfm_content {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
background-color: $ibo-color-white-100;
|
||||
color: $ibo-color-blue-grey-800;
|
||||
}
|
||||
|
||||
.sfm_toggler {
|
||||
.sfm_tg_title {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.sfm_tg_icon {
|
||||
color: $ibo-color-primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
.sfm_content {
|
||||
display: none;
|
||||
min-width: 200px; /* To avoid element going to thin on filter, not very slick */
|
||||
|
||||
.sfm_lists {
|
||||
margin: 0px -8px;
|
||||
padding: 0px 8px;
|
||||
max-height: 400px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.sfl_items {
|
||||
> li {
|
||||
&:hover {
|
||||
background-color: $ibo-color-grey-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sfm_buttons {
|
||||
display: none;
|
||||
|
||||
button {
|
||||
margin-top: 8px;
|
||||
margin-right: 5px;
|
||||
padding: 3px 6px;
|
||||
font-size: 11px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Misc. buttons */
|
||||
.sf_button {
|
||||
cursor: pointer;
|
||||
|
||||
> * {
|
||||
background-color: $ibo-color-white-100;
|
||||
color: $ibo-color-primary-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* List helpers */
|
||||
.sf_list {
|
||||
&:not(:first-of-type) {
|
||||
.sfl_title {
|
||||
border-top: 1px solid $ibo-color-grey-400;
|
||||
padding-top: 8px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sfl_title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sfl_items {
|
||||
margin: 5px -8px 0px -8px;
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
|
||||
> li {
|
||||
padding: 4px 8px;
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: $ibo-color-white-100;
|
||||
}
|
||||
|
||||
&.sfl_i_placeholder {
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
> label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> input[type="checkbox"] {
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sf_filter {
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
input,
|
||||
button,
|
||||
.sff_picto {
|
||||
vertical-align: middle;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border: 1px solid #ABABAB;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 23px; /* Must be equals to .sf_filter > *:height */
|
||||
background-color: $ibo-color-white-100;
|
||||
color: $ibo-color-primary-600;
|
||||
font-size: 10px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-left: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sff_input_wrapper {
|
||||
position: relative;
|
||||
|
||||
input[type="text"] {
|
||||
@extend .ibo-input;
|
||||
display: unset;
|
||||
}
|
||||
.sff_picto {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 3px;
|
||||
user-select: none;
|
||||
color: $ibo-color-grey-800;
|
||||
}
|
||||
|
||||
.sff_reset {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sf_with_buttons {
|
||||
input {
|
||||
width: calc(100% - 28px) !important; /* Minus button outter width (only one for now) */
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sf_results_placeholder {
|
||||
@extend %ibo-font-ral-med-150;
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin-top: 8px;
|
||||
@extend .ibo-button;
|
||||
@extend .ibo-is-primary;
|
||||
@extend .ibo-is-regular;
|
||||
> span {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ibo-search-form-panel {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.ibo-panel--body {
|
||||
padding: 18px 14px 10px;
|
||||
}
|
||||
}
|
||||
.ibo-criterion-area{
|
||||
//font-size: $ibo-font-size-150;
|
||||
@extend %ibo-font-ral-med-100;
|
||||
}
|
||||
#ibo-main-content .search_form_handler .sf_criterion_area{
|
||||
padding: 0;
|
||||
}
|
||||
.ibo-search-form{
|
||||
padding-top: $ibo-panel--spacing-top ;
|
||||
}
|
||||
|
||||
.ibo-form-group{
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sf_more_criterion.opened > .sfm_content{
|
||||
position: fixed !important;
|
||||
left: auto !important;
|
||||
}
|
||||
.sfc_fg_button{
|
||||
@extend .ibo-button;
|
||||
@extend .ibo-is-neutral;
|
||||
&.sfc_fg_search, &.sfc_fg_apply, &.sfc_fg_cancel {
|
||||
@extend .ibo-is-regular;
|
||||
}
|
||||
&.sfc_fg_more {
|
||||
@extend .ibo-is-alternative;
|
||||
}
|
||||
}
|
||||
108
css/backoffice/base/components/_title.scss
Normal file
108
css/backoffice/base/components/_title.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
$ibo-title--text-color: $ibo-color-grey-900 !default;
|
||||
|
||||
$ibo-title--medallion--size: 90px !default;
|
||||
$ibo-title--medallion--background-color: $ibo-color-grey-100 !default;
|
||||
$ibo-title--medallion--border: 2px solid $ibo-color-blue-grey-300 !default;
|
||||
$ibo-title--medallion--border-radius: $ibo-border-radius-full !default;
|
||||
|
||||
$ibo-title--icon--size--must-cover: 100% !default;
|
||||
$ibo-title--icon--size--must-zoomout: 66.67% !default;
|
||||
|
||||
$ibo-title--status-dot--size: 10px !default;
|
||||
$ibo-title--status-dot--spacing: 8px !default;
|
||||
$ibo-title--status-dot--border-radius: $ibo-border-radius-full !default;
|
||||
|
||||
.ibo-title {
|
||||
@extend %ibo-baseline-centered-content;
|
||||
|
||||
color: $ibo-title--text-color;
|
||||
}
|
||||
|
||||
.ibo-title--medallion {
|
||||
@extend %ibo-fully-centered-content;
|
||||
width: $ibo-title--medallion--size;
|
||||
height: $ibo-title--medallion--size;
|
||||
min-width: $ibo-title--medallion--size;
|
||||
min-height: $ibo-title--medallion--size;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: $ibo-title--medallion--background-color;
|
||||
border: $ibo-title--medallion--border;
|
||||
border-radius: $ibo-title--medallion--border-radius;
|
||||
}
|
||||
.ibo-title--icon {
|
||||
width: $ibo-title--icon--size--must-cover;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.ibo-title--icon--must-zoomout {
|
||||
width: $ibo-title--icon--size--must-zoomout;
|
||||
}
|
||||
|
||||
.ibo-title--emphasis {
|
||||
|
||||
}
|
||||
|
||||
.ibo-title--for-object-details {
|
||||
@extend %ibo-font-ral-nor-350;
|
||||
}
|
||||
|
||||
.ibo-title--status {
|
||||
@extend %ibo-baseline-centered-content;
|
||||
@extend %ibo-font-ral-nor-100;
|
||||
}
|
||||
.ibo-title--status-dot {
|
||||
@extend %ibo-fully-centered-content;
|
||||
|
||||
width: $ibo-title--status-dot--size;
|
||||
height: $ibo-title--status-dot--size;
|
||||
min-width: $ibo-title--status-dot--size;
|
||||
min-height: $ibo-title--status-dot--size;
|
||||
|
||||
border-radius: $ibo-title--status-dot--border-radius;
|
||||
}
|
||||
.ibo-title--status-label {
|
||||
|
||||
}
|
||||
.ibo-title--status-dot + .ibo-title--status-label {
|
||||
margin-left: $ibo-title--status-dot--spacing;
|
||||
}
|
||||
|
||||
@each $sType, $aColors in $ibo-lifecycle-states-colors {
|
||||
.ibo-title--status-dot.ibo-is-state-#{$sType} {
|
||||
color: map-get($aColors, 'secondary-color');
|
||||
background-color: map-get($aColors, 'primary-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ibo-title-for-dashlet {
|
||||
padding-top: 2em;
|
||||
}
|
||||
.ibo-title-for-dashlet--title {
|
||||
@extend %ibo-font-ral-nor-350;
|
||||
}
|
||||
|
||||
.ibo-title-for-dashlet--content{
|
||||
background-color: $ibo-color-white-100;
|
||||
border-radius: 5px;
|
||||
border: 1px solid ;
|
||||
border-color:$ibo-color-grey-400;
|
||||
padding-bottom:1em;
|
||||
}
|
||||
.ibo-title-separator{
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
border-color:$ibo-color-blue-600;
|
||||
color:$ibo-color-blue-600;
|
||||
background-color:$ibo-color-blue-600;
|
||||
border: 3px solid ;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
8
css/backoffice/base/components/_toolbar.scss
Normal file
8
css/backoffice/base/components/_toolbar.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
.ibo-action-toolbar {
|
||||
position: relative;
|
||||
}
|
||||
9
css/backoffice/base/components/dashlet/_all.scss
Normal file
9
css/backoffice/base/components/dashlet/_all.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
@import "dashlet";
|
||||
@import "dashlet-badge";
|
||||
@import "dashlet-header-static";
|
||||
@import "dashlet-header-dynamic";
|
||||
76
css/backoffice/base/components/dashlet/_dashlet-badge.scss
Normal file
76
css/backoffice/base/components/dashlet/_dashlet-badge.scss
Normal file
@@ -0,0 +1,76 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
$ibo-dashlet-badge--padding-x: 16px !default;
|
||||
$ibo-dashlet-badge--padding-y: 16px !default;
|
||||
$ibo-dashlet-badge--min-width: 200px !default;
|
||||
$ibo-dashlet-badge--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-dashlet-badge--border: 1px solid $ibo-color-grey-400 !default;
|
||||
$ibo-dashlet-badge--border-radius: $ibo-border-radius-500 !default;
|
||||
|
||||
$ibo-dashlet-badge--action-list--text-color: inherit !default;
|
||||
$ibo-dashlet-badge--action-list-count--margin-right: 8px !default;
|
||||
$ibo-dashlet-badge--action-list-label--max-width: 150px !default;
|
||||
|
||||
$ibo-dashlet-badge--icon-container--margin-right: 16px !default;
|
||||
$ibo-dashlet-badge--icon--size: 48px !default;
|
||||
|
||||
$ibo-dashlet-badge--action-icon--margin-right: 6px !default;
|
||||
|
||||
/* Rules */
|
||||
.ibo-dashlet-badge{
|
||||
//min-width: $ibo-dashlet-badge--min-width;
|
||||
flex-basis: $ibo-dashlet-badge--min-width;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x;
|
||||
background-color: $ibo-dashlet-badge--background-color;
|
||||
border: $ibo-dashlet-badge--border;
|
||||
border-radius: $ibo-dashlet-badge--border-radius;
|
||||
}
|
||||
.ibo-dashlet-badge--body{
|
||||
display: flex;
|
||||
justify-items: left;
|
||||
align-items: center;
|
||||
}
|
||||
.ibo-dashlet-badge--icon-container{
|
||||
margin-right: $ibo-dashlet-badge--icon-container--margin-right;
|
||||
}
|
||||
.ibo-dashlet-badge--icon{
|
||||
width: $ibo-dashlet-badge--icon--size;
|
||||
min-width: $ibo-dashlet-badge--icon--size; /* To avoid image being shrinked when container is too small */
|
||||
max-height: $ibo-dashlet-badge--icon--size;
|
||||
}
|
||||
|
||||
.ibo-dashlet-badge--actions{
|
||||
|
||||
}
|
||||
.ibo-dashlet-badge--action-list{
|
||||
@extend %ibo-vertically-centered-content;
|
||||
color: $ibo-dashlet-badge--action-list--text-color;
|
||||
@extend %ibo-font-ral-med-250;
|
||||
|
||||
&:hover,
|
||||
&:active{
|
||||
@extend %ibo-hyperlink-inherited-colors;
|
||||
}
|
||||
}
|
||||
.ibo-dashlet-badge--action-list-count{
|
||||
margin-right: $ibo-dashlet-badge--action-list-count--margin-right;
|
||||
@extend %ibo-font-ral-bol-450;
|
||||
}
|
||||
.ibo-dashlet-badge--action-list-label{
|
||||
display: inline-block;
|
||||
max-width: $ibo-dashlet-badge--action-list-label--max-width;
|
||||
@extend %ibo-text-truncated-with-ellipsis;
|
||||
}
|
||||
.ibo-dashlet-badge--action-create{
|
||||
@extend %ibo-baseline-centered-content;
|
||||
@extend %ibo-font-ral-med-150;
|
||||
}
|
||||
.ibo-dashlet-badge--action-create-icon{
|
||||
margin-right: $ibo-dashlet-badge--action-icon--margin-right;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
$ibo-dashlet-header-dynamic--count--margin-right: 10px !default;
|
||||
|
||||
/* Rules */
|
||||
.ibo-dashlet-header-dynamic--container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.ibo-dashlet-header-dynamic--count {
|
||||
@extend %ibo-font-ral-bol-200;
|
||||
margin-right: $ibo-dashlet-header-dynamic--count--margin-right;
|
||||
}
|
||||
|
||||
.ibo-dashlet-header-dynamic--label {
|
||||
@extend %ibo-font-ral-med-100;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
$ibo-dashlet-header-static--padding-x: 16px !default;
|
||||
$ibo-dashlet-header-static--padding-y: 16px !default;
|
||||
$ibo-dashlet-header-static--min-width: 200px !default;
|
||||
$ibo-dashlet-header-static--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-dashlet-header-static--border: 1px solid $ibo-color-grey-400 !default;
|
||||
$ibo-dashlet-header-static--border-radius: $ibo-border-radius-500 !default;
|
||||
|
||||
$ibo-dashlet-header-static--title--text-color: inherit !default;
|
||||
$ibo-dashlet-header-static--title--margin-right: 8px !default;
|
||||
|
||||
$ibo-dashlet-header-static--text--text-color: inherit !default;
|
||||
|
||||
$ibo-dashlet-header-static--icon-container--margin-right: 16px !default;
|
||||
$ibo-dashlet-header-static--icon--size: 48px !default;
|
||||
|
||||
|
||||
/* Rules */
|
||||
.ibo-dashlet-header-static {
|
||||
//min-width: $ibo-dashlet-header-static--min-width;
|
||||
flex-basis: $ibo-dashlet-header-static--min-width;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: $ibo-dashlet-header-static--padding-y $ibo-dashlet-header-static--padding-x;
|
||||
background-color: $ibo-dashlet-header-static--background-color;
|
||||
border: $ibo-dashlet-header-static--border;
|
||||
border-radius: $ibo-dashlet-header-static--border-radius;
|
||||
}
|
||||
|
||||
.ibo-dashlet-header-static--body {
|
||||
display: flex;
|
||||
justify-items: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ibo-dashlet-header-static--icon-container {
|
||||
margin-right: $ibo-dashlet-header-static--icon-container--margin-right;
|
||||
}
|
||||
|
||||
.ibo-dashlet-header-static--icon {
|
||||
width: $ibo-dashlet-header-static--icon--size;
|
||||
min-width: $ibo-dashlet-header-static--icon--size; /* To avoid image being shrinked when container is too small */
|
||||
max-height: $ibo-dashlet-header-static--icon--size;
|
||||
}
|
||||
|
||||
.ibo-dashlet-header-static--title {
|
||||
@extend %ibo-font-ral-med-250;
|
||||
color: $ibo-dashlet-header-static--title--text-color;
|
||||
margin-right: $ibo-dashlet-header-static--title--margin-right;
|
||||
}
|
||||
|
||||
.ibo-dashlet-header-static--text {
|
||||
@extend %ibo-font-ral-nor-200;
|
||||
flex-grow: 1;
|
||||
color: $ibo-dashlet-header-static--text--text-color;
|
||||
}
|
||||
23
css/backoffice/base/components/dashlet/_dashlet.scss
Normal file
23
css/backoffice/base/components/dashlet/_dashlet.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
/* SCSS variables */
|
||||
$ibo-dashlet--width: 100% !default;
|
||||
$ibo-dashlet--width--is-inline: auto !default;
|
||||
$ibo-dashlet--elements-spacing-x: 24px !default;
|
||||
$ibo-dashlet--elements-spacing-y: 24px !default;
|
||||
|
||||
/* Rules */
|
||||
.ibo-dashlet{
|
||||
width: $ibo-dashlet--width;
|
||||
margin: calc(#{$ibo-dashlet--elements-spacing-y} / 2) calc(#{$ibo-dashlet--elements-spacing-x} / 2);
|
||||
|
||||
&.dashlet-selected {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.ibo-dashlet--is-inline{
|
||||
width: $ibo-dashlet--width--is-inline;
|
||||
}
|
||||
12
css/backoffice/base/components/input/_all.scss
Normal file
12
css/backoffice/base/components/input/_all.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
@import "input";
|
||||
@import "input-select";
|
||||
@import "input-date";
|
||||
@import "input-datetime";
|
||||
@import "input-duration";
|
||||
@import "input-string";
|
||||
@import "input-tagset";
|
||||
46
css/backoffice/base/components/input/_input-date.scss
Normal file
46
css/backoffice/base/components/input/_input-date.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
$ibo-input-date--width: 100% !default;
|
||||
|
||||
$ibo-input-date--button--margin--left: -20px !default;
|
||||
$ibo-input-date--button--margin--top: 5px !default;
|
||||
$ibo-input-date--button--padding: 0 !default;
|
||||
|
||||
$ibo-input-date--button--background-color: transparent !default;
|
||||
$ibo-input-date--button--color: $ibo-color-grey-800 !default;
|
||||
|
||||
$ibo-input-date--ui-datepicker--padding-top: 34px !default;
|
||||
$ibo-input-date--ui-datepicker--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-input-date--ui-datepicker--border-color: $ibo-color-grey-400 !default;
|
||||
$ibo-input-date--ui-datepicker--border-radius: $ibo-border-radius-500 !default;
|
||||
|
||||
$ibo-input-date--ui-datepicker-header--padding: $ibo-border-radius-500 $ibo-border-radius-500 0 0 !default;
|
||||
$ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
|
||||
|
||||
.ibo-input-date{
|
||||
display: inline-block;
|
||||
width: $ibo-input-date--width;
|
||||
}
|
||||
.ibo-input-date + button{
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
margin-left: $ibo-input-date--button--margin--left;
|
||||
margin-top: $ibo-input-date--button--margin--top;
|
||||
padding: $ibo-input-date--button--padding;
|
||||
|
||||
background-color: $ibo-input-date--button--background-color;
|
||||
color: $ibo-input-date--button--color;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui-datepicker{
|
||||
padding-top: 34px;
|
||||
background-color: $ibo-input-date--ui-datepicker--background-color;
|
||||
border: solid 1px $ibo-input-date--ui-datepicker--border-color;
|
||||
border-radius: $ibo-input-date--ui-datepicker--border-radius;
|
||||
}
|
||||
.ui-datepicker-header{
|
||||
@extend .ui-dialog::before;
|
||||
position: absolute;
|
||||
height: unset;
|
||||
padding: $ibo-input-date--ui-datepicker-header--border-radius;
|
||||
border-radius: $ibo-input-date--ui-datepicker-header--border-radius;
|
||||
}
|
||||
37
css/backoffice/base/components/input/_input-datetime.scss
Normal file
37
css/backoffice/base/components/input/_input-datetime.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
$ibo-input-datetime--width: $ibo-input-date--width !default;
|
||||
$ibo-input-datetime--action-button--margin--left: $ibo-input-date--button--margin--left !default;
|
||||
$ibo-input-datetime--action-button--margin--top: $ibo-input-date--button--margin--top !default;
|
||||
$ibo-input-datetime--action-button--padding: $ibo-input-date--button--padding !default;
|
||||
$ibo-input-datetime--action-button--color: $ibo-input-date--button--color !default;
|
||||
|
||||
$ibo-input-datetime--ui-tpicker-slider--width: auto !default;
|
||||
$ibo-input-datetime--ui-tpicker-slider--padding-right: 18px !default;
|
||||
|
||||
.ibo-input-datetime{
|
||||
display: inline-block;
|
||||
width: $ibo-input-datetime--width;
|
||||
}
|
||||
.ibo-input-datetime--action-button{
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
margin-left: $ibo-input-datetime--action-button--margin--left;
|
||||
margin-top: $ibo-input-datetime--action-button--margin--top;
|
||||
padding: $ibo-input-datetime--action-button--padding;
|
||||
|
||||
color: $ibo-input-datetime--action-button--color;
|
||||
}
|
||||
.ui-datepicker-current, .ui-datepicker-close{
|
||||
@extend .ibo-button;
|
||||
@extend .ibo-is-regular;
|
||||
@extend .ibo-is-secondary;
|
||||
}
|
||||
.ui_tpicker_hour_slider, .ui_tpicker_minute_slider, .ui_tpicker_second_slider{
|
||||
@extend .ibo-input-wrapper;
|
||||
@extend .ibo-input-select-wrapper;
|
||||
&> select {
|
||||
@extend .ibo-input;
|
||||
@extend .ibo-input-select;
|
||||
width: $ibo-input-datetime--ui-tpicker-slider--width;
|
||||
padding-right: $ibo-input-datetime--ui-tpicker-slider--padding-right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
$ibo-input-duration--width: unset !default;
|
||||
$ibo-input-duration--text-align: right !default;
|
||||
|
||||
.ibo-input-duration{
|
||||
display: inline-block;
|
||||
width: $ibo-input-duration--width;
|
||||
text-align: $ibo-input-duration--text-align;
|
||||
}
|
||||
90
css/backoffice/base/components/input/_input-select.scss
Normal file
90
css/backoffice/base/components/input/_input-select.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
$ibo-input-select-selectize--value--height: 100% !default;
|
||||
$ibo-input-select-selectize--value--line-height: $ibo-input--height !default;
|
||||
|
||||
$ibo-input-select-wrapper--width: 100% !default;
|
||||
|
||||
$ibo-input-select-wrapper--after--height: 28px !default;
|
||||
$ibo-input-select-wrapper--after--margin-left: -16px !default;
|
||||
$ibo-input-select-wrapper--after--margin-top: 1px !default;
|
||||
$ibo-input-select-wrapper--after--padding-top: 3px !default;
|
||||
$ibo-input-select-wrapper--after--background-color: inherit !default;
|
||||
$ibo-input-select-wrapper--after--color: $ibo-color-grey-900 !default;
|
||||
|
||||
$ibo-input-select--action-button--height: 28px !default;
|
||||
$ibo-input-select--action-button--width: 23px !default;
|
||||
$ibo-input-select--action-button--margin-top: 1px !default;
|
||||
$ibo-input-select--action-button--background-color: inherit !default;
|
||||
$ibo-input-select--action-button--color: $ibo-color-grey-800 !default;
|
||||
$ibo-input-select--action-button--padding-x: 4px !default;
|
||||
$ibo-input-select--action-button--padding-y: 5px !default;
|
||||
|
||||
$ibo-input-select--action-button--hierarchy--margin-left: -60px !default;
|
||||
$ibo-input-select--action-button--create--margin-left: -38px !default;
|
||||
$ibo-input-select--action-button--search--margin-left: -60px !default;
|
||||
|
||||
$ibo-input-select-autocomplete-action-button--hierarchy--margin-left: -82px !default;
|
||||
|
||||
.ibo-input-select{
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
&.ibo-input-selectize{
|
||||
input{
|
||||
display: none;
|
||||
}
|
||||
>[data-value]
|
||||
{
|
||||
height: $ibo-input-select-selectize--value--height;
|
||||
line-height: $ibo-input-select-selectize--value--line-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ibo-input-select-wrapper .selectize-control
|
||||
{
|
||||
display: inline-block;
|
||||
width: $ibo-input-select-wrapper--width;
|
||||
}
|
||||
.ibo-input-select-wrapper::after{
|
||||
position: absolute;
|
||||
content: "\f0d7";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 600;
|
||||
|
||||
height: $ibo-input-select-wrapper--after--height;
|
||||
margin-left: $ibo-input-select-wrapper--after--margin-left;
|
||||
margin-top: $ibo-input-select-wrapper--after--margin-top;
|
||||
padding-top: $ibo-input-select-wrapper--after--padding-top;
|
||||
|
||||
background-color: $ibo-input-select-wrapper--after--background-color;
|
||||
color: $ibo-input-select-wrapper--after--color;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ibo-input-select--action-button{
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: $ibo-input-select--action-button--height;
|
||||
width: $ibo-input-select--action-button--width;
|
||||
margin-top: $ibo-input-select--action-button--margin-top;
|
||||
|
||||
font-size: $ibo-font-size-100;
|
||||
background-color: $ibo-input-select--action-button--background-color;
|
||||
color: $ibo-input-select--action-button--color;
|
||||
padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x;
|
||||
|
||||
&.ibo-input-select--action-button--hierarchy{
|
||||
margin-left: $ibo-input-select--action-button--hierarchy--margin-left;
|
||||
}
|
||||
&.ibo-input-select--action-button--create{
|
||||
margin-left: $ibo-input-select--action-button--create--margin-left;
|
||||
}
|
||||
&.ibo-input-select--action-button--search{
|
||||
margin-left: $ibo-input-select--action-button--search--margin-left;
|
||||
}
|
||||
}
|
||||
.ibo-input-select-autocomplete ~ .ibo-input-select--action-button--hierarchy{
|
||||
margin-left: $ibo-input-select-autocomplete-action-button--hierarchy--margin-left;
|
||||
}
|
||||
.selectize-dropdown.ui-menu .ui-state-active {
|
||||
margin: unset;
|
||||
background-color: #f5fafd;
|
||||
color: #495c68;
|
||||
}
|
||||
31
css/backoffice/base/components/input/_input-tagset.scss
Normal file
31
css/backoffice/base/components/input/_input-tagset.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
$ibo-input-tagset--input--height: 100% !default;
|
||||
|
||||
$ibo-input-tagset--remove--padding-top: 0.15em !default;
|
||||
$ibo-input-tagset--remove--border-left: none !default;
|
||||
|
||||
$ibo-input-tagset--has-items--after--right: 8px !default;
|
||||
$ibo-input-tagset--has-items--after--top: 5px !default;
|
||||
|
||||
|
||||
|
||||
.selectize-control.plugin-remove_button .ibo-input-tagset{
|
||||
> input{
|
||||
height: $ibo-input-tagset--input--height;
|
||||
}
|
||||
.item[data-value] > .remove{
|
||||
font-size: 18px;
|
||||
padding-top: $ibo-input-tagset--remove--padding-top;
|
||||
border-left: $ibo-input-tagset--remove--border-left;
|
||||
}
|
||||
&.has-items::after{
|
||||
content: "\f067";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
|
||||
position: absolute;
|
||||
|
||||
right: $ibo-input-tagset--has-items--after--right;
|
||||
top: $ibo-input-tagset--has-items--after--top;
|
||||
}
|
||||
}
|
||||
58
css/backoffice/base/components/input/_input.scss
Normal file
58
css/backoffice/base/components/input/_input.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
/*!
|
||||
* copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
|
||||
$ibo-input--height: 30px !default;
|
||||
$ibo-input--width: 100% !default;
|
||||
|
||||
$ibo-input--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-input--color: $ibo-color-grey-900 !default;
|
||||
$ibo-input--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-input--border-color: $ibo-color-grey-500 !default;
|
||||
|
||||
$ibo-input--padding-x: 10px !default;
|
||||
$ibo-input--padding-y: 0px !default;
|
||||
|
||||
$ibo-input--border-radius: $ibo-border-radius-300 !default;
|
||||
|
||||
$ibo-input--focus--border-color: $ibo-color-primary-600 !default;
|
||||
|
||||
$ibo-input--placeholder--color: $ibo-color-grey-600 !default;
|
||||
|
||||
$ibo-input--disabled--background-color: $ibo-color-grey-300 !default;
|
||||
$ibo-input--placeholder--color: $ibo-color-grey-700 !default;
|
||||
|
||||
$ibo-input-wrapper--is-error--background-color: $ibo-color-red-200 !default;
|
||||
$ibo-input-wrapper--is-error--border-color: $ibo-color-red-600 !default;
|
||||
$ibo-field-validation: $ibo-color-red-700 !default;
|
||||
.ibo-input{
|
||||
@extend %ibo-vertically-centered-content;
|
||||
height: $ibo-input--height;
|
||||
width: $ibo-input--width;
|
||||
background-color: $ibo-input--background-color;
|
||||
color: $ibo-input--color;
|
||||
padding: $ibo-input--padding-y $ibo-input--padding-x;
|
||||
border: 1px solid $ibo-input--border-color;
|
||||
border-radius: $ibo-input--border-radius;
|
||||
|
||||
&:focus{
|
||||
border: 1px solid $ibo-input--focus--border-color;
|
||||
}
|
||||
&:disabled{
|
||||
background-color: $ibo-input--disabled--background-color;
|
||||
color: $ibo-input--placeholder--color;
|
||||
}
|
||||
&::placeholder{
|
||||
color: $ibo-input--placeholder--color;
|
||||
}
|
||||
}
|
||||
.ibo-input-wrapper.is-error {
|
||||
.ibo-input{
|
||||
background-color: $ibo-input-wrapper--is-error--background-color;
|
||||
border: 1px solid $ibo-input-wrapper--is-error--border-color;
|
||||
}
|
||||
}
|
||||
.ibo-field-validation{
|
||||
color: $ibo-field-validation;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/*!
|
||||
* 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-popover-menu--item--padding-y: 12px !default;
|
||||
$ibo-popover-menu--item--padding-right: 24px !default;
|
||||
$ibo-popover-menu--item--padding-left: 16px !default;
|
||||
$ibo-popover-menu--item--text-color: $ibo-color-grey-900 !default;
|
||||
$ibo-popover-menu--item--hyperlink-color: $ibo-popover-menu--item--text-color !default;
|
||||
$ibo-popover-menu--item--hover-background-color: $ibo-color-grey-200 !default;
|
||||
|
||||
$ibo-popover-menu--separator--padding: 0 !default;
|
||||
$ibo-popover-menu--separator--margin: 0 !default;
|
||||
$ibo-popover-menu--separator--background-color: $ibo-color-grey-200 !default;
|
||||
|
||||
.ibo-popover-menu--item{
|
||||
padding: $ibo-popover-menu--item--padding-y $ibo-popover-menu--item--padding-right $ibo-popover-menu--item--padding-y $ibo-popover-menu--item--padding-left;
|
||||
color: $ibo-popover-menu--item--text-color;
|
||||
@extend %ibo-font-ral-nor-150;
|
||||
|
||||
a {
|
||||
color: $ibo-popover-menu--item--text-color;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $ibo-popover-menu--item--hover-background-color;
|
||||
color: inherit;
|
||||
}
|
||||
&.ibo-popover-menu--separator{
|
||||
padding: $ibo-popover-menu--separator--padding;
|
||||
margin: $ibo-popover-menu--separator--margin;
|
||||
background-color: $ibo-popover-menu--separator--background-color
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/*!
|
||||
* 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-popover-menu--background-color: $ibo-color-white-100 !default;
|
||||
$ibo-popover-menu--border-radius: $ibo-border-radius-300 !default;
|
||||
$ibo-popover-menu--padding: 0 !default;
|
||||
|
||||
$ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !default;
|
||||
|
||||
.ibo-popover-menu{
|
||||
display: none;
|
||||
padding: $ibo-popover-menu--padding;
|
||||
background-color: $ibo-popover-menu--background-color;
|
||||
@extend %ibo-elevation-300;
|
||||
border-radius: $ibo-popover-menu--border-radius;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
|
||||
&.ibo-is-opened{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ibo-popover-menu--section{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: flex-start;
|
||||
margin: 0px 0px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden; /* To avoid first/last entries of the menu to have no border-radius on hover */
|
||||
|
||||
&:first-child{
|
||||
border-radius: $ibo-popover-menu--section-border-radius $ibo-popover-menu--section-border-radius 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 $ibo-popover-menu--section-border-radius $ibo-popover-menu--section-border-radius;
|
||||
}
|
||||
}
|
||||
34
css/backoffice/base/layout/_all.scss
Normal file
34
css/backoffice/base/layout/_all.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
/*!
|
||||
* 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/base/layout/_content.scss
Normal file
32
css/backoffice/base/layout/_content.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
/*!
|
||||
* 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/base/layout/_navigation-menu.scss
Normal file
751
css/backoffice/base/layout/_navigation-menu.scss
Normal file
@@ -0,0 +1,751 @@
|
||||
/*!
|
||||
* 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/base/layout/_object-details.scss
Normal file
52
css/backoffice/base/layout/_object-details.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
/*!
|
||||
* @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/base/layout/_top-bar.scss
Normal file
149
css/backoffice/base/layout/_top-bar.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
/*!
|
||||
* 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/base/layout/activity-panel/_activity-entry.scss
Normal file
214
css/backoffice/base/layout/activity-panel/_activity-entry.scss
Normal file
@@ -0,0 +1,214 @@
|
||||
/*!
|
||||
* 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/base/layout/activity-panel/_activity-panel.scss
Normal file
252
css/backoffice/base/layout/activity-panel/_activity-panel.scss
Normal file
@@ -0,0 +1,252 @@
|
||||
/*!
|
||||
* 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;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/*!
|
||||
* 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;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/*!
|
||||
* 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/base/layout/activity-panel/_edits-entry.scss
Normal file
48
css/backoffice/base/layout/activity-panel/_edits-entry.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
/*!
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* 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;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/*!
|
||||
* @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/base/layout/dashboard/_dashboard.scss
Normal file
58
css/backoffice/base/layout/dashboard/_dashboard.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
/*!
|
||||
* @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/base/layout/multi-column/_column.scss
Normal file
22
css/backoffice/base/layout/multi-column/_column.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
/*!
|
||||
* 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/base/layout/multi-column/_multi-column.scss
Normal file
13
css/backoffice/base/layout/multi-column/_multi-column.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
/*!
|
||||
* 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/base/layout/tab-container/_tab-container.scss
Normal file
112
css/backoffice/base/layout/tab-container/_tab-container.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
/*!
|
||||
* @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/base/layout/tab-container/_tab.scss
Normal file
4
css/backoffice/base/layout/tab-container/_tab.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/*!
|
||||
* @copyright Copyright (C) 2010-2020 Combodo SARL
|
||||
* @license http://opensource.org/licenses/AGPL-3.0
|
||||
*/
|
||||
Reference in New Issue
Block a user