/*! * Copyright (C) 2013-2021 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--highlight--width: 4px !default; $ibo-alert--title--highlight--height: 100% !default; $ibo-alert--body--margin-top: 4px !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-size-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 { cursor: pointer; @extend %ibo-font-weight-700; } &.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; } } } .ibo-alert--title + .ibo-alert--body { margin-top: $ibo-alert--body--margin-top; } /* 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; } }