mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-23 10:38:45 +02:00
N°2847 - Restore components/layouts SCSS files to keep matching SCSS conventions
This commit is contained in:
Molkobain
149
css/backoffice/components/_alert.scss
Normal file
149
css/backoffice/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/components/_all.scss
Normal file
29
css/backoffice/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/components/_badge.scss
Normal file
99
css/backoffice/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/components/_breadcrumbs.scss
Normal file
80
css/backoffice/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/components/_button.scss
Normal file
410
css/backoffice/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/components/_datatable.scss
Normal file
175
css/backoffice/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/components/_field.scss
Normal file
62
css/backoffice/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/components/_fieldset.scss
Normal file
28
css/backoffice/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/components/_form.scss
Normal file
4
css/backoffice/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/components/_formtable.scss
Normal file
4
css/backoffice/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/components/_formtablerow.scss
Normal file
4
css/backoffice/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/components/_global-search.scss
Normal file
203
css/backoffice/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/components/_modal.scss
Normal file
55
css/backoffice/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/components/_newsroom-menu.scss
Normal file
125
css/backoffice/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/components/_panel.scss
Normal file
120
css/backoffice/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/components/_quick-create.scss
Normal file
244
css/backoffice/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/components/_richtext.scss
Normal file
4
css/backoffice/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/components/_search-form.scss
Normal file
894
css/backoffice/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/components/_title.scss
Normal file
108
css/backoffice/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/components/_toolbar.scss
Normal file
8
css/backoffice/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/components/dashlet/_all.scss
Normal file
9
css/backoffice/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/components/dashlet/_dashlet-badge.scss
Normal file
76
css/backoffice/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/components/dashlet/_dashlet.scss
Normal file
23
css/backoffice/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/components/input/_all.scss
Normal file
12
css/backoffice/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/components/input/_input-date.scss
Normal file
46
css/backoffice/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/components/input/_input-datetime.scss
Normal file
37
css/backoffice/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;
|
||||
}
|
||||
}
|
||||
8
css/backoffice/components/input/_input-duration.scss
Normal file
8
css/backoffice/components/input/_input-duration.scss
Normal file
@@ -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/components/input/_input-select.scss
Normal file
90
css/backoffice/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;
|
||||
}
|
||||
0
css/backoffice/components/input/_input-string.scss
Normal file
0
css/backoffice/components/input/_input-string.scss
Normal file
31
css/backoffice/components/input/_input-tagset.scss
Normal file
31
css/backoffice/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/components/input/_input.scss
Normal file
58
css/backoffice/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
|
||||
}
|
||||
}
|
||||
57
css/backoffice/components/popover-menu/_popover-menu.scss
Normal file
57
css/backoffice/components/popover-menu/_popover-menu.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user