github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/panels.less (about)

     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: 10px 15px;
    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: 10px 15px;
    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  
    90  
    91  // Tables in panels
    92  //
    93  // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
    94  // watch it go full width.
    95  
    96  .panel {
    97    > .table,
    98    > .table-responsive > .table {
    99      margin-bottom: 0;
   100    }
   101    // Add border top radius for first one
   102    > .table:first-child,
   103    > .table-responsive:first-child > .table:first-child {
   104      .border-top-radius((@panel-border-radius - 1));
   105  
   106      > thead:first-child,
   107      > tbody:first-child {
   108        > tr:first-child {
   109          td:first-child,
   110          th:first-child {
   111            border-top-left-radius: (@panel-border-radius - 1);
   112          }
   113          td:last-child,
   114          th:last-child {
   115            border-top-right-radius: (@panel-border-radius - 1);
   116          }
   117        }
   118      }
   119    }
   120    // Add border bottom radius for last one
   121    > .table:last-child,
   122    > .table-responsive:last-child > .table:last-child {
   123      .border-bottom-radius((@panel-border-radius - 1));
   124  
   125      > tbody:last-child,
   126      > tfoot:last-child {
   127        > tr:last-child {
   128          td:first-child,
   129          th:first-child {
   130            border-bottom-left-radius: (@panel-border-radius - 1);
   131          }
   132          td:last-child,
   133          th:last-child {
   134            border-bottom-right-radius: (@panel-border-radius - 1);
   135          }
   136        }
   137      }
   138    }
   139    > .panel-body + .table,
   140    > .panel-body + .table-responsive {
   141      border-top: 1px solid @table-border-color;
   142    }
   143    > .table > tbody:first-child > tr:first-child th,
   144    > .table > tbody:first-child > tr:first-child td {
   145      border-top: 0;
   146    }
   147    > .table-bordered,
   148    > .table-responsive > .table-bordered {
   149      border: 0;
   150      > thead,
   151      > tbody,
   152      > tfoot {
   153        > tr {
   154          > th:first-child,
   155          > td:first-child {
   156            border-left: 0;
   157          }
   158          > th:last-child,
   159          > td:last-child {
   160            border-right: 0;
   161          }
   162        }
   163      }
   164      > thead,
   165      > tbody {
   166        > tr:first-child {
   167          > td,
   168          > th {
   169            border-bottom: 0;
   170          }
   171        }
   172      }
   173      > tbody,
   174      > tfoot {
   175        > tr:last-child {
   176          > td,
   177          > th {
   178            border-bottom: 0;
   179          }
   180        }
   181      }
   182    }
   183    > .table-responsive {
   184      border: 0;
   185      margin-bottom: 0;
   186    }
   187  }
   188  
   189  
   190  // Collapsable panels (aka, accordion)
   191  //
   192  // Wrap a series of panels in `.panel-group` to turn them into an accordion with
   193  // the help of our collapse JavaScript plugin.
   194  
   195  .panel-group {
   196    margin-bottom: @line-height-computed;
   197  
   198    // Tighten up margin so it's only between panels
   199    .panel {
   200      margin-bottom: 0;
   201      border-radius: @panel-border-radius;
   202      overflow: hidden; // crop contents when collapsed
   203      + .panel {
   204        margin-top: 5px;
   205      }
   206    }
   207  
   208    .panel-heading {
   209      border-bottom: 0;
   210      + .panel-collapse .panel-body {
   211        border-top: 1px solid @panel-inner-border;
   212      }
   213    }
   214    .panel-footer {
   215      border-top: 0;
   216      + .panel-collapse .panel-body {
   217        border-bottom: 1px solid @panel-inner-border;
   218      }
   219    }
   220  }
   221  
   222  
   223  // Contextual variations
   224  .panel-default {
   225    .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
   226  }
   227  .panel-primary {
   228    .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
   229  }
   230  .panel-success {
   231    .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
   232  }
   233  .panel-info {
   234    .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
   235  }
   236  .panel-warning {
   237    .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
   238  }
   239  .panel-danger {
   240    .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
   241  }