/* * @copyright Copyright (C) 2010-2021 Combodo SARL * @license http://opensource.org/licenses/AGPL-3.0 */ /* SCSS variables */ $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: $ibo-spacing-200 !default; $ibo-alert-minimized--padding-y: 5px !default; $ibo-alert-minimized--title--padding-bottom: $ibo-spacing-0 !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; a { color: $text-color; @extend %ibo-font-ral-bol-150; } &::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; } .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; } }