/*! * 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; justify-content: space-between; 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; }