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