composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 10:38:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 Add alert component

Browse Source
This commit is contained in:
Stephen Abello
2020-08-18 12:03:21 +02:00
parent 9516e7f023
commit 74db53d51d
6 changed files with 185 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
css/backoffice/components/_alert.scss Normal file
View File

@@ -0,0 +1,59 @@
$ibo-alert--padding-y: 18px !default;
$ibo-alert--padding-x: 20px !default;
$ibo-alert--border-radius: 2px !default;
$ibo-alert--title--padding-bottom: 4px !default;
$ibo-alert--title--highlight--width: 4px !default;
$ibo-alert--title--highlight--height: 100% !default;
$ibo-alert-colors: (
'grey' : ($ibo-color-grey-200, $ibo-color-grey-700, $ibo-color-grey-900),
'red': ($ibo-color-red-200, $ibo-color-red-700, $ibo-color-red-900),
'orange' : ($ibo-color-orange-200, $ibo-color-orange-700, $ibo-color-orange-900),
'green': ($ibo-color-green-200, $ibo-color-green-700, $ibo-color-green-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),
'pink': ($ibo-color-pink-200, $ibo-color-pink-700, $ibo-color-pink-900),
'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),
) !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;
}
}
}
.ibo-alert{
position: relative;
padding: $ibo-alert--padding-y $ibo-alert--padding-x;
border-radius: $ibo-alert--border-radius;
@extend %ibo-font-ral-med-150;
.ibo-alert--title{
padding-bottom: $ibo-alert--title--padding-bottom;
@extend %ibo-font-ral-bol-150;
}
}
.ibo-alert::before{
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
border-radius: $ibo-alert--border-radius 0 0 $ibo-alert--border-radius;
width: $ibo-alert--title--highlight--width;
height: $ibo-alert--title--highlight--height;
}

1
css/backoffice/components/_all.scss
View File

@@ -16,6 +16,7 @@
* You should have received a copy of the GNU Affero General Public License
*/
@import "alert";
@import "button";
@import "breadcrumbs";
@import "quick-create";