doc/_themes/odoodoc/static/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 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: @panel-body-padding;
  18   &:extend(.clearfix all);
  19 }
  20
  21 // Optional heading
  22 .panel-heading {
  23   padding: @panel-heading-padding;
  24   border-bottom: 1px solid transparent;
  25   .border-top-radius((@panel-border-radius - 1));
  26
  27   > .dropdown .dropdown-toggle {
  28     color: inherit;
  29   }
  30 }
  31
  32 // Within heading, strip any `h*` tag of its default margins for spacing.
  33 .panel-title {
  34   margin-top: 0;
  35   margin-bottom: 0;
  36   font-size: ceil((@font-size-base * 1.125));
  37   color: inherit;
  38
  39   > a {
  40     color: inherit;
  41   }
  42 }
  43
  44 // Optional footer (stays gray in every modifier class)
  45 .panel-footer {
  46   padding: @panel-footer-padding;
  47   background-color: @panel-footer-bg;
  48   border-top: 1px solid @panel-inner-border;
  49   .border-bottom-radius((@panel-border-radius - 1));
  50 }
  51
  52
  53 // List groups in panels
  54 //
  55 // By default, space out list group content from panel headings to account for
  56 // any kind of custom content between the two.
  57
  58 .panel {
  59   > .list-group {
  60     margin-bottom: 0;
  61
  62     .list-group-item {
  63       border-width: 1px 0;
  64       border-radius: 0;
  65     }
  66
  67     // Add border top radius for first one
  68     &:first-child {
  69       .list-group-item:first-child {
  70         border-top: 0;
  71         .border-top-radius((@panel-border-radius - 1));
  72       }
  73     }
  74     // Add border bottom radius for last one
  75     &:last-child {
  76       .list-group-item:last-child {
  77         border-bottom: 0;
  78         .border-bottom-radius((@panel-border-radius - 1));
  79       }
  80     }
  81   }
  82 }
  83 // Collapse space between when there's no additional content.
  84 .panel-heading + .list-group {
  85   .list-group-item:first-child {
  86     border-top-width: 0;
  87   }
  88 }
  89 .list-group + .panel-footer {
  90   border-top-width: 0;
  91 }
  92
  93 // Tables in panels
  94 //
  95 // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
  96 // watch it go full width.
  97
  98 .panel {
  99   > .table,
 100   > .table-responsive > .table,
 101   > .panel-collapse > .table {
 102     margin-bottom: 0;
 103   }
 104   // Add border top radius for first one
 105   > .table:first-child,
 106   > .table-responsive:first-child > .table:first-child {
 107     .border-top-radius((@panel-border-radius - 1));
 108
 109     > thead:first-child,
 110     > tbody:first-child {
 111       > tr:first-child {
 112         td:first-child,
 113         th:first-child {
 114           border-top-left-radius: (@panel-border-radius - 1);
 115         }
 116         td:last-child,
 117         th:last-child {
 118           border-top-right-radius: (@panel-border-radius - 1);
 119         }
 120       }
 121     }
 122   }
 123   // Add border bottom radius for last one
 124   > .table:last-child,
 125   > .table-responsive:last-child > .table:last-child {
 126     .border-bottom-radius((@panel-border-radius - 1));
 127
 128     > tbody:last-child,
 129     > tfoot:last-child {
 130       > tr:last-child {
 131         td:first-child,
 132         th:first-child {
 133           border-bottom-left-radius: (@panel-border-radius - 1);
 134         }
 135         td:last-child,
 136         th:last-child {
 137           border-bottom-right-radius: (@panel-border-radius - 1);
 138         }
 139       }
 140     }
 141   }
 142   > .panel-body + .table,
 143   > .panel-body + .table-responsive {
 144     border-top: 1px solid @table-border-color;
 145   }
 146   > .table > tbody:first-child > tr:first-child th,
 147   > .table > tbody:first-child > tr:first-child td {
 148     border-top: 0;
 149   }
 150   > .table-bordered,
 151   > .table-responsive > .table-bordered {
 152     border: 0;
 153     > thead,
 154     > tbody,
 155     > tfoot {
 156       > tr {
 157         > th:first-child,
 158         > td:first-child {
 159           border-left: 0;
 160         }
 161         > th:last-child,
 162         > td:last-child {
 163           border-right: 0;
 164         }
 165       }
 166     }
 167     > thead,
 168     > tbody {
 169       > tr:first-child {
 170         > td,
 171         > th {
 172           border-bottom: 0;
 173         }
 174       }
 175     }
 176     > tbody,
 177     > tfoot {
 178       > tr:last-child {
 179         > td,
 180         > th {
 181           border-bottom: 0;
 182         }
 183       }
 184     }
 185   }
 186   > .table-responsive {
 187     border: 0;
 188     margin-bottom: 0;
 189   }
 190 }
 191
 192
 193 // Collapsable panels (aka, accordion)
 194 //
 195 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
 196 // the help of our collapse JavaScript plugin.
 197
 198 .panel-group {
 199   margin-bottom: @line-height-computed;
 200
 201   // Tighten up margin so it's only between panels
 202   .panel {
 203     margin-bottom: 0;
 204     border-radius: @panel-border-radius;
 205     + .panel {
 206       margin-top: 5px;
 207     }
 208   }
 209
 210   .panel-heading {
 211     border-bottom: 0;
 212     + .panel-collapse > .panel-body {
 213       border-top: 1px solid @panel-inner-border;
 214     }
 215   }
 216   .panel-footer {
 217     border-top: 0;
 218     + .panel-collapse .panel-body {
 219       border-bottom: 1px solid @panel-inner-border;
 220     }
 221   }
 222 }
 223
 224
 225 // Contextual variations
 226 .panel-default {
 227   .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
 228 }
 229 .panel-primary {
 230   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 231 }
 232 .panel-success {
 233   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 234 }
 235 .panel-info {
 236   .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 237 }
 238 .panel-warning {
 239   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 240 }
 241 .panel-danger {
 242   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 243 }