mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
125 lines
4.1 KiB
SCSS
125 lines
4.1 KiB
SCSS
/*!
|
|
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
|
* @license http://opensource.org/licenses/AGPL-3.0
|
|
*/
|
|
|
|
$ibo-object-details--icon--size: 96px !default;
|
|
$ibo-object-details--icon--spacing--as-medallion: 32px !default;
|
|
$ibo-object-details--icon--bottom--as-medallion: -12px !default;
|
|
$ibo-object-details--icon--background-color--as-medallion: $ibo-color-grey-100 !default;
|
|
$ibo-object-details--icon--border--as-medallion: 2px solid $ibo-color-blue-grey-300 !default;
|
|
$ibo-object-details--icon--border-radius--as-medallion: $ibo-border-radius-full !default;
|
|
|
|
$ibo-object-details--status-dot--size: 10px !default;
|
|
$ibo-object-details--status-dot--spacing: 8px !default;
|
|
$ibo-object-details--status-dot--border-radius: $ibo-border-radius-full !default;
|
|
|
|
$ibo-object-details--tag--sibling-spacing: 12px !default;
|
|
$ibo-object-details--tag--color: $ibo-panel--subtitle--color !default;
|
|
|
|
$ibo-object-details--tag-icon--margin-right: 6px !default;
|
|
$ibo-object-details--tag-icon--color: $ibo-color-grey-700 !default;
|
|
|
|
$ibo-object-details--tag--separator--background-color: $ibo-color-grey-800 !default;
|
|
$ibo-object-details--tag--separator--diameter: 5px !default;
|
|
$ibo-object-details--tag--separator--margin-right: 12px !default;
|
|
$ibo-object-details--tag--separator--border-radius: $ibo-border-radius-full !default;
|
|
|
|
/* Parent block overloads (!= than blocks integrations */
|
|
.ibo-object-details {
|
|
&.ibo-has-icon.ibo-has-medallion-icon {
|
|
// Note: Direct child selector is mandatory, otherwise a panel within a panel with a medallion icon will have its icon as a medallion too (eg. dashboard in an object)
|
|
> .ibo-panel--header {
|
|
.ibo-panel--header-left {
|
|
margin-left: $ibo-object-details--icon--spacing--as-medallion;
|
|
padding-left: $ibo-object-details--icon--size;
|
|
|
|
.ibo-panel--icon {
|
|
bottom: calc(-1 * #{$ibo-object-details--icon--size} / 2 + #{$ibo-object-details--icon--bottom--as-medallion});
|
|
width: $ibo-object-details--icon--size;
|
|
height: $ibo-object-details--icon--size;
|
|
min-width: $ibo-object-details--icon--size;
|
|
min-height: $ibo-object-details--icon--size;
|
|
}
|
|
|
|
.ibo-panel--titles {
|
|
padding-left: $ibo-object-details--icon--spacing--as-medallion;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ibo-panel--title {
|
|
@extend %ibo-font-ral-med-350;
|
|
}
|
|
|
|
.ibo-panel--subtitle {
|
|
@extend %ibo-font-ral-med-150;
|
|
}
|
|
}
|
|
|
|
.ibo-object-details--status {
|
|
@extend %ibo-baseline-centered-content;
|
|
}
|
|
|
|
.ibo-object-details--status-dot {
|
|
@extend %ibo-fully-centered-content;
|
|
|
|
width: $ibo-object-details--status-dot--size;
|
|
height: $ibo-object-details--status-dot--size;
|
|
min-width: $ibo-object-details--status-dot--size;
|
|
min-height: $ibo-object-details--status-dot--size;
|
|
|
|
border-radius: $ibo-object-details--status-dot--border-radius;
|
|
}
|
|
|
|
.ibo-object-details--status-dot + .ibo-object-details--status-label {
|
|
margin-left: $ibo-object-details--status-dot--spacing;
|
|
}
|
|
|
|
.ibo-object-details--status + .ibo-object-details--object-class {
|
|
margin-left: 0.5rem;
|
|
|
|
&::before {
|
|
content: "(";
|
|
}
|
|
|
|
&::after {
|
|
content: ")";
|
|
}
|
|
}
|
|
|
|
@each $sType, $aColors in $ibo-lifecycle-states-colors {
|
|
.ibo-object-details--status-dot.ibo-is-state-#{$sType} {
|
|
color: map-get($aColors, 'secondary-color');
|
|
background-color: map-get($aColors, 'primary-color');
|
|
}
|
|
}
|
|
|
|
.ibo-object-details--tag {
|
|
color: $ibo-object-details--tag--color;
|
|
|
|
&:not(:first-child) {
|
|
margin-left: $ibo-object-details--tag--sibling-spacing;
|
|
}
|
|
}
|
|
|
|
.ibo-object-details--tag-icon {
|
|
margin-right: $ibo-object-details--tag-icon--margin-right;
|
|
color: $ibo-object-details--tag-icon--color;
|
|
}
|
|
|
|
.ibo-object-details--object-class,
|
|
.ibo-object-details--tag {
|
|
~ .ibo-object-details--tag::before {
|
|
content: " ";
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: $ibo-object-details--tag--separator--margin-right;
|
|
width: $ibo-object-details--tag--separator--diameter;
|
|
height: $ibo-object-details--tag--separator--diameter;
|
|
border-radius: $ibo-object-details--tag--separator--border-radius;
|
|
background-color: $ibo-object-details--tag--separator--background-color;
|
|
}
|
|
}
|