1+ $ibo-badge--padding-x : $ibo-spacing-200 !default ;
2+ $ibo-badge--padding-y : $ibo-spacing-100 !default ;
3+ $ibo-badge--border-radius : $ibo-border-radius-400 !default ;
4+
5+ $ibo-badge-colors : (
6+ ' primary' : ($ibo-color-primary-100 , $ibo-color-primary-900 ),
7+ ' secondary' : ($ibo-color-secondary-100 , $ibo-color-secondary-900 ),
8+ ' neutral' : ($ibo-color-secondary-100 , $ibo-color-secondary-900 ),
9+ ' information' : ($ibo-color-information-100 , $ibo-color-information-900 ),
10+ ' success' : ($ibo-color-success-100 , $ibo-color-success-900 ),
11+ ' failure' : ($ibo-color-danger-100 , $ibo-color-danger-900 ),
12+ ' warning' : ($ibo-color-warning-100 ,$ibo-color-warning-900 ),
13+ ' danger' : ($ibo-color-danger-100 ,$ibo-color-danger-900 ),
14+ ' grey' : ($ibo-color-grey-100 , $ibo-color-grey-900 ),
15+ ' blue-grey' : ($ibo-color-blue-grey-100 , $ibo-color-blue-grey-900 ),
16+ ' blue' : ($ibo-color-blue-100 , $ibo-color-blue-900 ),
17+ ' cyan' : ($ibo-color-cyan-100 , $ibo-color-cyan-900 ),
18+ ' green' : ($ibo-color-green-100 , $ibo-color-green-900 ),
19+ ' orange' : ($ibo-color-orange-100 , $ibo-color-orange-900 ),
20+ ' red' : ($ibo-color-red-100 , $ibo-color-red-900 ),
21+ ' pink' : ($ibo-color-pink-100 , $ibo-color-pink-900 ),
22+ ) !default ;
23+
24+
25+
26+ .ibo-badge {
27+ display : inline-block ;
28+ white-space : nowrap ;
29+ padding : $ibo-badge--padding-y $ibo-badge--padding-x ;
30+ border-radius : $ibo-badge--border-radius ;
31+ @extend %ibo-font-ral-med-50 ;
32+
33+ @each $sColor , $aColorValues in $ibo-badge-colors {
34+ $bg-color : nth ($aColorValues , 1 );
35+ $text-color : nth ($aColorValues , 2 );
36+ & .ibo-is-#{$sColor } {
37+ background-color : $bg-color ;
38+ color : $text-color ;
39+ }
40+ }
41+ }
0 commit comments