1/* Labels */ 2 3.badge, .label { 4 height: 20px; 5 display: inline-block; 6 font-family: Helvetica, arial, verdana, sans-serif; 7 font-weight: bold; 8 line-height: 20px; 9 text-align:center; 10 color: #fff; 11 a { 12 color: #fff; 13 } 14 @each $shade in $ui-coloring { 15 &.#{nth($shade, 1)} { 16 background: nth($shade, 2); 17 border: 1px solid nth($shade, 2); 18 @if nth($shade, 1) == default { 19 color: darken(nth($shade, 2), 61.5%); 20 &:hover { 21 border-color: darken(nth($shade, 2), 5%); 22 } 23 a { 24 color: darken(nth($shade, 2), 61.5%); 25 } 26 } 27 @if nth($shade, 1) == warning { 28 color: darken(nth($shade, 2), 40%); 29 a { 30 color: darken(nth($shade, 2), 40%); 31 } 32 } 33 } 34 } 35 &.light { 36 background: #fff; 37 color: $body-font-color; 38 border: 1px solid $default-color; 39 a { 40 color: $body-link-color; 41 } 42 } 43 &.dark { 44 background: #212121; 45 border: 1px solid #212121; 46 } 47} 48 49.badge { 50 padding: 0 10px; 51 @include font-size(ms(0, 14px)); 52 @include border-radius(10px); 53} 54 55.label { 56 padding: 0 10px; 57 @include font-size(ms(0, 12px)); 58 @include border-radius(2px); 59} 60 61.alert { 62 padding: 0 10px; 63 font-family: $font-family; 64 font-weight: $font-weight-semibold; 65 list-style-type: none; 66 word-wrap: break-word; 67 margin-bottom: $norm / 2; 68 @include font-size(ms(0, 14px)); 69 @include border-radius($button-radius); 70 @each $shade in $ui-coloring { 71 &.#{nth($shade, 1)} { 72 background: lighten(nth($shade, 2), 20%); 73 border: 1px solid nth($shade, 2); 74 color: darken(nth($shade, 2), 20%); 75 @if nth($shade, 1) == info { 76 color: $default-color; 77 } 78 @if nth($shade, 1) == default { 79 color: darken(nth($shade, 2), 61.5%); 80 border: 1px solid nth($shade, 2); 81 } 82 @if nth($shade, 1) == warning { 83 color: darken(nth($shade, 2), 40%); 84 } 85 } 86 } 87} 88