iTop/css/backoffice/components/_alert.scss

/*!
 * 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-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 {
		cursor: pointer;

		@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;
		}
	}

}
.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;
	}
}