git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/panels.less

   1 //
   2 // Panels
   3 // --------------------------------------------------
   4
   5
   6 // Base class
   7 .panel {
   8   padding: 15px;
   9   margin-bottom: 20px;
  10   background-color: @panel-bg;
  11   border: 1px solid @panel-border;
  12   border-radius: @panel-border-radius;
  13   .box-shadow(0 1px 1px rgba(0,0,0,.05));
  14 }
  15
  16 // Optional heading
  17 .panel-heading {
  18   margin: -15px -15px 15px;
  19   padding: 10px 15px;
  20   background-color: @panel-heading-bg;
  21   border-bottom: 1px solid @panel-border;
  22   border-top-left-radius:  (@panel-border-radius - 1);
  23   border-top-right-radius: (@panel-border-radius - 1);
  24 }
  25
  26 // Within heading, strip any `h*` tag of it's default margins for spacing.
  27 .panel-title {
  28   margin-top: 0;
  29   margin-bottom: 0;
  30   font-size: (@font-size-base * 1.25);
  31   font-weight: 500;
  32 }
  33
  34 // Optional footer (stays gray in every modifier class)
  35 .panel-footer {
  36   margin: 15px -15px -15px;
  37   padding: 10px 15px;
  38   background-color: @panel-footer-bg;
  39   border-top: 1px solid @panel-border;
  40   border-bottom-left-radius:  (@panel-border-radius - 1);
  41   border-bottom-right-radius: (@panel-border-radius - 1);
  42 }
  43
  44 // Contextual variations
  45 .panel-primary {
  46   border-color: @panel-primary-border;
  47   .panel-heading {
  48     color: @panel-primary-text;
  49     background-color: @panel-primary-heading-bg;
  50     border-color: @panel-primary-border;
  51   }
  52 }
  53 .panel-success {
  54   border-color: @panel-success-border;
  55   .panel-heading {
  56     color: @panel-success-text;
  57     background-color: @panel-success-heading-bg;
  58     border-color: @panel-success-border;
  59   }
  60 }
  61 .panel-warning {
  62   border-color: @panel-warning-border;
  63   .panel-heading {
  64     color: @panel-warning-text;
  65     background-color: @panel-warning-heading-bg;
  66     border-color: @panel-warning-border;
  67   }
  68 }
  69 .panel-danger {
  70   border-color: @panel-danger-border;
  71   .panel-heading {
  72     color: @panel-danger-text;
  73     background-color: @panel-danger-heading-bg;
  74     border-color: @panel-danger-border;
  75   }
  76 }
  77 .panel-info {
  78   border-color: @panel-info-border;
  79   .panel-heading {
  80     color: @panel-info-text;
  81     background-color: @panel-info-heading-bg;
  82     border-color: @panel-info-border;
  83   }
  84 }
  85
  86 // List groups in panels
  87 .list-group-flush {
  88   margin: 15px -15px -15px;
  89
  90   .list-group-item {
  91     border-width: 1px 0;
  92
  93     // Remove border radius for top one
  94     &:first-child {
  95       .border-top-radius(0);
  96     }
  97     // But keep it for the last one
  98     &:last-child {
  99       border-bottom: 0;
 100     }
 101   }
 102 }