themes/default/less/alerts.less

   1 // ALERT STYLES
   2 // ------------
   3
   4 // Base alert styles
   5 .alert {
   6   padding: 10px 20px 10px 10px;
   7   margin-bottom: @baseLineHeight;
   8   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   9   background-color: @warningBackground;
  10   border: 1px solid @warningBorder;
  11   .border-radius(4px);
  12 }
  13 .alert [class^=icon-] {
  14   margin: 0 5px 0 0;
  15 }
  16 .alert,
  17 .alert-heading {
  18   color:  darken(@warningBackground, 70%)
  19 }
  20
  21 // Adjust close link position
  22 .alert .close {
  23   position: relative;
  24   top: -2px;
  25   right: -10px;
  26   line-height: 18px;
  27 }
  28
  29 // Alternate styles
  30 // ----------------
  31
  32 .alert-success {
  33   background-color: @successBackground;
  34   border-color: @successBorder;
  35 }
  36 .alert-success,
  37 .alert-success .alert-heading {
  38   color:  darken(@successBackground, 70%);
  39 }
  40 .alert-danger,
  41 .alert-error {
  42   background-color: @errorBackground;
  43   border-color: @errorBorder;
  44 }
  45 .alert-danger,
  46 .alert-error,
  47 .alert-danger .alert-heading,
  48 .alert-error .alert-heading {
  49   color:  darken(@errorBackground, 70%);
  50 }
  51 .alert-info {
  52   background-color: @infoBackground;
  53   border-color: @infoBorder;
  54 }
  55 .alert-info,
  56 .alert-info .alert-heading {
  57   color:  darken(@infoBackground, 70%);
  58 }
  59
  60
  61 // Block alerts
  62 // ------------------------
  63 .alert-block {
  64   padding-top: 14px;
  65   padding-bottom: 14px;
  66 }
  67 .alert-block > p,
  68 .alert-block > ul {
  69   margin-bottom: 0;
  70 }
  71 .alert-block p + p {
  72   margin-top: 5px;
  73 }