github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/notice/skin.scss (about) 1 %notice { 2 border-radius: $radius-small; 3 border-width: 1px; 4 } 5 %notice-success, 6 %notice-info, 7 %notice-highlight, 8 %notice-error, 9 %notice-warning { 10 @extend %notice; 11 } 12 %notice-success { 13 @extend %with-passing; 14 background-color: $ui-green-050; 15 border-color: $ui-color-success; 16 color: $ui-green-700; 17 } 18 %notice-success::before { 19 color: $ui-color-success; 20 } 21 %notice-info { 22 /* %frame-blue-000*/ 23 border-style: solid; /*TODO: this can go once we are using a frame*/ 24 @extend %with-passing; /* needs a better info button*/ 25 background-color: $ui-blue-050; 26 border-color: $ui-color-action; /* TODO: change to info */ 27 color: $ui-blue-700; 28 } 29 %notice-highlight { 30 /* %frame-blue-000*/ 31 border-style: solid; /*TODO: this can go once we are using a frame*/ 32 @extend %with-star; 33 border-color: $ui-gray-300; 34 background-color: $ui-gray-050; 35 } 36 %notice-info::before { 37 color: $ui-color-action; /* change to info */ 38 } 39 %notice-highlight::before { 40 /* %with-star, bigger */ 41 width: 16px; 42 height: 16px; 43 } 44 %notice-warning { 45 @extend %frame-yellow-500, %with-warning; 46 } 47 %notice-error { 48 @extend %with-critical; 49 background-color: $ui-red-050; 50 border-color: $ui-color-failure; 51 color: $ui-red-600; 52 } 53 %notice-error::before { 54 color: $ui-color-failure; 55 }