git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/assets/less/bootstrap-3.0.0/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 transparent;
  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   .clearfix();
  19 }
  20
  21
  22 // List groups in panels
  23 //
  24 // By default, space out list group content from panel headings to account for
  25 // any kind of custom content between the two.
  26
  27 .panel {
  28   > .list-group {
  29     margin-bottom: 0;
  30
  31     .list-group-item {
  32       border-width: 1px 0;
  33
  34       // Remove border radius for top one
  35       &:first-child {
  36         .border-top-radius(0);
  37       }
  38       // But keep it for the last one
  39       &:last-child {
  40         border-bottom: 0;
  41       }
  42     }
  43   }
  44 }
  45 // Collapse space between when there's no additional content.
  46 .panel-heading + .list-group {
  47   .list-group-item:first-child {
  48     border-top-width: 0;
  49   }
  50 }
  51
  52
  53 // Tables in panels
  54 //
  55 // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
  56 // watch it go full width.
  57
  58 .panel {
  59   > .table {
  60     margin-bottom: 0;
  61   }
  62   > .panel-body + .table {
  63     border-top: 1px solid @table-border-color;
  64   }
  65 }
  66
  67
  68 // Optional heading
  69 .panel-heading {
  70   padding: 10px 15px;
  71   border-bottom: 1px solid transparent;
  72   .border-top-radius(@panel-border-radius - 1);
  73 }
  74
  75 // Within heading, strip any `h*` tag of it's default margins for spacing.
  76 .panel-title {
  77   margin-top: 0;
  78   margin-bottom: 0;
  79   font-size: ceil((@font-size-base * 1.125));
  80   > a {
  81     color: inherit;
  82   }
  83 }
  84
  85 // Optional footer (stays gray in every modifier class)
  86 .panel-footer {
  87   padding: 10px 15px;
  88   background-color: @panel-footer-bg;
  89   border-top: 1px solid @panel-inner-border;
  90   .border-bottom-radius(@panel-border-radius - 1);
  91 }
  92
  93
  94 // Collapsable panels (aka, accordion)
  95 //
  96 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
  97 // the help of our collapse JavaScript plugin.
  98
  99 .panel-group {
 100   // Tighten up margin so it's only between panels
 101   .panel {
 102     margin-bottom: 0;
 103     border-radius: @panel-border-radius;
 104     overflow: hidden; // crop contents when collapsed
 105     + .panel {
 106       margin-top: 5px;
 107     }
 108   }
 109
 110   .panel-heading {
 111     border-bottom: 0;
 112     + .panel-collapse .panel-body {
 113       border-top: 1px solid @panel-inner-border;
 114     }
 115   }
 116   .panel-footer {
 117     border-top: 0;
 118     + .panel-collapse .panel-body {
 119       border-bottom: 1px solid @panel-inner-border;
 120     }
 121   }
 122
 123   // New subcomponent for wrapping collapsable content for proper animations
 124   .panel-collapse {
 125
 126   }
 127 }
 128
 129
 130 // Contextual variations
 131 .panel-default {
 132   .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
 133 }
 134 .panel-primary {
 135   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 136 }
 137 .panel-success {
 138   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 139 }
 140 .panel-warning {
 141   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 142 }
 143 .panel-danger {
 144   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 145 }
 146 .panel-info {
 147   .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 148 }