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     margin-bottom: 4px;
  29 }
  30
  31 .alert-dismissible {
  32     .close {
  33         position: relative;
  34         top: -2px;
  35         right: -21px;
  36         color: inherit;
  37     }
  38 }
  39
  40 .alert-variant(@background; @border; @text-color) {
  41     background-color: @background;
  42     border-color: @border;
  43     color: @text-color;
  44
  45     hr {
  46         border-top-color: darken(@border, 5%);
  47     }
  48     .alert-link {
  49         color: darken(@text-color, 10%);
  50     }
  51 }
  52
  53 .alert-success {
  54     .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
  55 }
  56
  57 .alert-info {
  58     .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
  59 }
  60
  61 .alert-warning {
  62     .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
  63 }
  64
  65 .alert-error {
  66     .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
  67 }
  68
  69 .alert-danger {
  70     .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
  71 }