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

   1 //
   2 // Panels
   3 // --------------------------------------------------
   4
   5
   6 // Base class
   7 .panel {
   8   margin-bottom: @line-height-computed;
   9   background-color: @panel-bg;
  10   border: 1px solid @panel-border;
  11   border-radius: @panel-border-radius;
  12   .box-shadow(0 1px 1px rgba(0,0,0,.05));
  13 }
  14
  15 // Panel contents
  16 .panel-body {
  17   padding: 15px;
  18 }
  19
  20 // List groups in panels
  21 //
  22 // By default, space out list group content from panel headings to account for
  23 // any kind of custom content between the two.
  24
  25 .panel {
  26   > .list-group {
  27     margin-bottom: 0;
  28
  29     .list-group-item {
  30       border-width: 1px 0;
  31
  32       // Remove border radius for top one
  33       &:first-child {
  34         .border-top-radius(0);
  35       }
  36       // But keep it for the last one
  37       &:last-child {
  38         border-bottom: 0;
  39       }
  40     }
  41   }
  42 }
  43 // Collapse space between when there's no additional content.
  44 .panel-heading + .list-group {
  45   .list-group-item:first-child {
  46     border-top-width: 0;
  47   }
  48 }
  49
  50 // Optional heading
  51 .panel-heading {
  52   padding: 10px 15px;
  53   background-color: @panel-heading-bg;
  54   border-bottom: 1px solid @panel-border;
  55   .border-top-radius(@panel-border-radius - 1);
  56 }
  57
  58 // Within heading, strip any `h*` tag of it's default margins for spacing.
  59 .panel-title {
  60   margin-top: 0;
  61   margin-bottom: 0;
  62   font-size: (@font-size-base * 1.25);
  63   > a {
  64     color: inherit;
  65   }
  66 }
  67
  68 // Optional footer (stays gray in every modifier class)
  69 .panel-footer {
  70   padding: 10px 15px;
  71   background-color: @panel-footer-bg;
  72   border-top: 1px solid @panel-border;
  73   .border-bottom-radius(@panel-border-radius - 1);
  74 }
  75
  76
  77 // Collapsable panels (aka, accordion)
  78 //
  79 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
  80 // the help of our collapse JavaScript plugin.
  81
  82 .panel-group {
  83   // Tighten up margin so it's only between panels
  84   .panel {
  85     margin-bottom: 0;
  86     border-radius: @panel-border-radius;
  87     overflow: hidden; // crop contents when collapsed
  88     + .panel {
  89       margin-top: 5px;
  90     }
  91   }
  92
  93   .panel-heading {
  94     border-bottom: 0;
  95     + .panel-collapse .panel-body {
  96       border-top: 1px solid @panel-border;
  97     }
  98   }
  99   .panel-footer {
 100     border-top: 0;
 101     + .panel-collapse .panel-body {
 102       border-bottom: 1px solid @panel-border;
 103     }
 104   }
 105
 106   // New subcomponent for wrapping collapsable content for proper animations
 107   .panel-collapse {
 108
 109   }
 110 }
 111
 112
 113 // Contextual variations
 114 .panel-primary {
 115   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 116 }
 117 .panel-success {
 118   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 119 }
 120 .panel-warning {
 121   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 122 }
 123 .panel-danger {
 124   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 125 }
 126 .panel-info {
 127   .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 128 }