shop.balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

_alerts.scss (1623B)

      1 //
      2 // Alerts
      3 // --------------------------------------------------
      4 
      5 
      6 // Base styles
      7 // -------------------------
      8 
      9 .alert {
     10   padding: $alert-padding;
     11   margin-bottom: $line-height-computed;
     12   border: 1px solid transparent;
     13   border-radius: $alert-border-radius;
     14 
     15   // Headings for larger alerts
     16   h4 {
     17     margin-top: 0;
     18     // Specified for the h4 to prevent conflicts of changing $headings-color
     19     color: inherit;
     20   }
     21 
     22   // Provide class for links that match alerts
     23   .alert-link {
     24     font-weight: $alert-link-font-weight;
     25   }
     26 
     27   // Improve alignment and spacing of inner content
     28   > p,
     29   > ul {
     30     margin-bottom: 0;
     31   }
     32 
     33   > p + p {
     34     margin-top: 5px;
     35   }
     36 }
     37 
     38 // Dismissible alerts
     39 //
     40 // Expand the right padding and account for the close button's positioning.
     41 
     42 .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
     43 .alert-dismissible {
     44   padding-right: ($alert-padding + 20);
     45 
     46   // Adjust close link position
     47   .close {
     48     position: relative;
     49     top: -2px;
     50     right: -21px;
     51     color: inherit;
     52   }
     53 }
     54 
     55 // Alternate styles
     56 //
     57 // Generate contextual modifier classes for colorizing the alert.
     58 
     59 .alert-success {
     60   @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
     61 }
     62 
     63 .alert-info {
     64   @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
     65 }
     66 
     67 .alert-warning {
     68   @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
     69 }
     70 
     71 .alert-danger {
     72   @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
     73 }