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-left: 4px;
  25     padding-right: 4px;
  26     border: 1px solid transparent;
  27     border-radius: @alert-border-radius;
  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     background-color: @background;
  41     border-color: @border;
  42     color: @text-color;
  43
  44     hr {
  45         border-top-color: darken(@border, 5%);
  46     }
  47     .alert-link {
  48         color: darken(@text-color, 10%);
  49     }
  50 }
  51
  52 .alert-success {
  53     .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
  54 }
  55
  56 .alert-info {
  57     .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
  58 }
  59
  60 .alert-warning {
  61     .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
  62 }
  63
  64 .alert-error {
  65     .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
  66 }
  67
  68 .alert-danger {
  69     .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
  70 }