mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
1d67d50a20
* N°7397 - Update welcome popup content for iTop 3.2 * N°7397 - Display illustrations as restylable SVG, add extension to twig to support absolute url in source function * N°7397 - Update 3.2 welcome messages dictionaries, add French translations and set up other languages files --------- Co-authored-by: Stephen Abello <stephen.abello@combodo.com>
142 lines
5.4 KiB
SCSS
142 lines
5.4 KiB
SCSS
/*!
|
|
* @copyright Copyright (C) 2010-2024 Combodo SAS
|
|
* @license http://opensource.org/licenses/AGPL-3.0
|
|
*/
|
|
|
|
$ibo-welcome-popup--dialog--padding-x: $ibo-spacing-0 !default;
|
|
$ibo-welcome-popup--dialog--padding-y: $ibo-spacing-0 !default;
|
|
|
|
$ibo-welcome-popup--messages-stack--width: 300px !default;
|
|
$ibo-welcome-popup--messages-stack--padding-x: $ibo-spacing-500 !default;
|
|
$ibo-welcome-popup--messages-stack--padding-y: $ibo-spacing-600 !default;
|
|
$ibo-welcome-popup--messages-stack--background-color: $ibo-color-grey-100 !default;
|
|
|
|
$ibo-welcome-popup--stack-item--padding-x: $ibo-spacing-400 !default;
|
|
$ibo-welcome-popup--stack-item--padding-y: $ibo-spacing-400 !default;
|
|
$ibo-welcome-popup--stack-item--background-color: $ibo-color-white-100 !default;
|
|
$ibo-welcome-popup--stack-item--border-width: 1px !default;
|
|
$ibo-welcome-popup--stack-item--border-style: solid !default;
|
|
$ibo-welcome-popup--stack-item--border-color: $ibo-color-grey-300 !default;
|
|
$ibo-welcome-popup--stack-item--is-active--border-color: $ibo-color-grey-600 !default;
|
|
$ibo-welcome-popup--stack-item--opacity: 1 !default;
|
|
$ibo-welcome-popup--stack-item--is-acknowledged--opacity: 0.6 !default;
|
|
$ibo-welcome-popup--stack-item--sibling-spacing: $ibo-spacing-400 !default;
|
|
|
|
$ibo-welcome-popup--stack-item-icon--size: $ibo-size-350 !default;
|
|
$ibo-welcome-popup--stack-item-icon--margin-right: $ibo-spacing-400 !default;
|
|
$ibo-welcome-popup--stack-item-icon--border-size: 1px !default;
|
|
|
|
$ibo-welcome-popup--message-content--padding-x: $ibo-spacing-800 !default;
|
|
$ibo-welcome-popup--message-content--padding-y: $ibo-spacing-700 !default;
|
|
|
|
$ibo-welcome-popup--message-illustration--min-width: $ibo-size-650 !default;
|
|
$ibo-welcome-popup--message-illustration--background-size: contain !default;
|
|
$ibo-welcome-popup--message-illustration--spacing: $ibo-spacing-800 !default;
|
|
|
|
$ibo-welcome-popup--message-title--margin-bottom: $ibo-spacing-700 !default;
|
|
|
|
|
|
.ibo-welcome-popup--dialog {
|
|
@extend %ibo-full-height-content;
|
|
|
|
&.ui-dialog-content {
|
|
padding: $ibo-welcome-popup--dialog--padding-y $ibo-welcome-popup--dialog--padding-x; /* Overload default modal style */
|
|
height: auto !important; /* Overload default modal inline style to avoid "content" overflowing while "stack" size remains smaller */
|
|
max-height: 80vh !important; /* Overload default modal inline style to avoid modal remaining "collapsed" */
|
|
}
|
|
}
|
|
|
|
.ibo-welcome-popup--messages-stack {
|
|
min-width: $ibo-welcome-popup--messages-stack--width;
|
|
max-width: $ibo-welcome-popup--messages-stack--width;
|
|
padding: $ibo-welcome-popup--messages-stack--padding-y $ibo-welcome-popup--messages-stack--padding-x;
|
|
overflow-y: auto;
|
|
background-color: $ibo-welcome-popup--messages-stack--background-color;
|
|
|
|
/* Here instead of in .ibo-welcome-popup--stack-item as there is an intermediate DOM level */
|
|
> *:not(:first-child) {
|
|
margin-top: $ibo-welcome-popup--stack-item--sibling-spacing;
|
|
}
|
|
}
|
|
|
|
.ibo-welcome-popup--stack-item {
|
|
@extend %ibo-vertically-centered-content;
|
|
padding: $ibo-welcome-popup--stack-item--padding-y $ibo-welcome-popup--messages-stack--padding-x;
|
|
background-color: $ibo-welcome-popup--stack-item--background-color;
|
|
border: $ibo-welcome-popup--stack-item--border-width $ibo-welcome-popup--stack-item--border-style $ibo-welcome-popup--stack-item--border-color;
|
|
@extend %ibo-border-radius-400;
|
|
|
|
&.ibo-is-active {
|
|
border-color: $ibo-welcome-popup--stack-item--is-active--border-color;
|
|
}
|
|
&.ibo-is-acknowledged {
|
|
opacity: $ibo-welcome-popup--stack-item--is-acknowledged--opacity;
|
|
|
|
&.ibo-is-active {
|
|
opacity: $ibo-welcome-popup--stack-item--opacity;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ibo-welcome-popup--stack-item-icon {
|
|
width: $ibo-welcome-popup--stack-item-icon--size;
|
|
height: $ibo-welcome-popup--stack-item-icon--size;
|
|
min-width: $ibo-welcome-popup--stack-item-icon--size;
|
|
min-height: $ibo-welcome-popup--stack-item-icon--size;
|
|
margin-right: $ibo-welcome-popup--stack-item-icon--margin-right; /* Space from title which is always present */
|
|
@extend %ibo-medallion;
|
|
border-width: $ibo-welcome-popup--stack-item-icon--border-size;
|
|
}
|
|
|
|
.ibo-welcome-popup--stack-item-title {
|
|
@extend %ibo-text-truncated-with-ellipsis;
|
|
@extend %ibo-font-ral-med-150;
|
|
@extend %ibo-hyperlink-inherited-colors;
|
|
}
|
|
|
|
.ibo-welcome-popup--message-content-wrapper {
|
|
overflow: auto;
|
|
}
|
|
|
|
.ibo-welcome-popup--message-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: $ibo-welcome-popup--message-content--padding-y $ibo-welcome-popup--message-content--padding-x;
|
|
|
|
.ibo-welcome-popup--message-illustration {
|
|
margin-left: $ibo-welcome-popup--message-illustration--spacing;
|
|
}
|
|
|
|
&:not(.ibo-is-active) {
|
|
display: none;
|
|
}
|
|
&.ibo-is-illustration-on-left-side {
|
|
flex-direction: row-reverse;
|
|
|
|
.ibo-welcome-popup--message-illustration {
|
|
margin-left: unset;
|
|
margin-right: $ibo-welcome-popup--message-illustration--spacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ibo-welcome-popup--message-title {
|
|
@extend %ibo-font-ral-bol-150;
|
|
margin-bottom: $ibo-welcome-popup--message-title--margin-bottom;
|
|
}
|
|
|
|
.ibo-welcome-popup--message-description {
|
|
@extend %ibo-font-ral-med-150;
|
|
}
|
|
|
|
.ibo-welcome-popup--message-illustration {
|
|
display: flex;
|
|
min-width: $ibo-welcome-popup--message-illustration--min-width;
|
|
aspect-ratio: 1;
|
|
background-size: $ibo-welcome-popup--message-illustration--background-size;
|
|
/* Raw svg needs their height overridden in case its defined in one of their attributes */
|
|
> svg {
|
|
height: auto;
|
|
}
|
|
} |