src/newslash_web/css/newslash/alert.less

   1 /* alerts related styles */
   2
   3
   4 @alert-success-bg:     #dff0d8;
   5 @alert-success-text:   #3c763d;
   6 @alert-success-border: darken(spin(@alert-success-bg, -10), 5%);
   7
   8 @alert-info-text:      #31708f;
   9 @alert-info-bg:        #d9edf7;
  10 @alert-info-border:    darken(spin(@alert-info-bg, -10), 7%);
  11
  12 @alert-warning-text:   #8a6d3b;
  13 @alert-warning-bg:     #fcf8e3;
  14 @alert-warning-border: darken(spin(@alert-warning-bg, -10), 5%);
  15
  16 @alert-danger-text:    #a94442;
  17 @alert-danger-bg:      #f2dede;
  18 @alert-danger-border:  darken(spin(@alert-danger-bg, -10), 5%);
  19
  20 @alert-border-radius: 4px;
  21
  22 .alert {
  23     &:extend(.medium-text);
  24     padding: 0 4px;
  25     border: 1px solid transparent;
  26     border-radius: @alert-border-radius;
  27     margin-bottom: 4px;
  28 }
  29
  30 .alert-dismissible {
  31     .close {
  32         position: relative;
  33         top: -2px;
  34         right: -21px;
  35         color: inherit;
  36     }
  37 }
  38
  39 .alert-variant(@background; @border; @text-color) {
  40     &:extend(.alert);
  41
  42     background-color: @background;
  43     border-color: @border;
  44     color: @text-color;
  45
  46     hr {
  47         border-top-color: darken(@border, 5%);
  48     }
  49     .alert-link {
  50         color: darken(@text-color, 10%);
  51     }
  52 }
  53
  54 .alert-success {
  55     .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
  56 }
  57
  58 .alert-info {
  59     .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
  60 }
  61
  62 .alert-warning {
  63     .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
  64 }
  65
  66 .alert-error {
  67     .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
  68 }
  69
  70 .alert-danger {
  71     .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
  72 }