N3-components/N3-components

View on GitHub
src/style/panel.less

Summary

Maintainability
Test Coverage
.@{prefix-cls}-panel-body {
  padding: @panelBodyPadding;
}
.@{prefix-cls}-panel-heading {
  padding: @panelHeaderPadding;
  border-bottom: 1px solid transparent;
  border-color: @lightColor ;
  font-size: 16px;
  font-weight: 300;
  background: @panelHeadingColor;

  > .@{prefix-cls}-dropdown .@{prefix-cls}-dropdown-toggle {
    color: inherit;
  }

  + .@{prefix-cls}-list-group .@{prefix-cls}-list-group-item:first-child {
    border-top-width: 0;
  }
}

.@{prefix-cls}-panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: @fontColor;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;

  > a,
  > small,
  > .small,
  > small > a,
  > .small > a {
    color: inherit;
  }
}

.@{prefix-cls}-panel {
  margin-bottom: 20px;
  background-color: @whiteColor;
  border-radius: 4px;

  > .@{prefix-cls}-list-group,
  > .@{prefix-cls}-panel-collapse > .@{prefix-cls}-list-group {
    margin-bottom: 0;
  }
  > .@{prefix-cls}-list-group .@{prefix-cls}-list-group-item,
  > .@{prefix-cls}-panel-collapse > .@{prefix-cls}-list-group .@{prefix-cls}-list-group-item {
    border-width: 1px 0;
    border-radius: 0;
  }
  > .@{prefix-cls}-list-group:first-child .@{prefix-cls}-list-group-item:first-child,
  > .@{prefix-cls}-panel-collapse > .@{prefix-cls}-list-group:first-child .@{prefix-cls}-list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  > .@{prefix-cls}-list-group:last-child .@{prefix-cls}-list-group-item:last-child,
  > .@{prefix-cls}-panel-collapse > .@{prefix-cls}-list-group:last-child .@{prefix-cls}-list-group-item:last-child {
    border-bottom: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  > .@{prefix-cls}-table,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table,
  > .@{prefix-cls}-panel-collapse > .@{prefix-cls}-table {
    margin-bottom: 0;
  }
  > .@{prefix-cls}-table caption,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table caption,
  > .@{prefix-cls}-panel-collapse > .@{prefix-cls}-table caption {
    padding-right: 15px;
    padding-left: 15px;
  }
  > .@{prefix-cls}-table:first-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child,
  > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child td:first-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child td:first-child,
  > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child td:first-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child td:first-child,
  > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child th:first-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child th:first-child,
  > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child th:first-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child th:first-child {
    border-top-left-radius: 3px;
  }
  > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child td:last-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child td:last-child,
  > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child td:last-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child td:last-child,
  > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child th:last-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > thead:first-child > tr:first-child th:last-child,
  > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child th:last-child,
  > .@{prefix-cls}-table-responsive:first-child > .@{prefix-cls}-table:first-child > tbody:first-child > tr:first-child th:last-child {
    border-top-right-radius: 3px;
  }
  > .@{prefix-cls}-table:last-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child,
  > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child td:first-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child td:first-child,
  > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child td:first-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child td:first-child,
  > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child th:first-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child th:first-child,
  > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child th:first-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child th:first-child {
    border-bottom-left-radius: 3px;
  }
  > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child td:last-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child td:last-child,
  > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child td:last-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child td:last-child,
  > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child th:last-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tbody:last-child > tr:last-child th:last-child,
  > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child th:last-child,
  > .@{prefix-cls}-table-responsive:last-child > .@{prefix-cls}-table:last-child > tfoot:last-child > tr:last-child th:last-child {
    border-bottom-right-radius: 3px;
  }
  > .@{prefix-cls}-panel-body + .@{prefix-cls}-table,
  > .@{prefix-cls}-panel-body + .@{prefix-cls}-table-responsive,
  > .@{prefix-cls}-table + .@{prefix-cls}-panel-body,
  > .@{prefix-cls}-table-responsive + .@{prefix-cls}-panel-body {
    border-top: 1px solid @lightGrayColor;
  }
  > .@{prefix-cls}-table > tbody:first-child > tr:first-child th,
  > .@{prefix-cls}-table > tbody:first-child > tr:first-child td {
    border-top: 0;
  }
  > .@{prefix-cls}-table-bordered,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered {
    border: 0;
  }
  > .@{prefix-cls}-table-bordered > thead > tr > th:first-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > thead > tr > th:first-child,
  > .@{prefix-cls}-table-bordered > tbody > tr > th:first-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr > th:first-child,
  > .@{prefix-cls}-table-bordered > tfoot > tr > th:first-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tfoot > tr > th:first-child,
  > .@{prefix-cls}-table-bordered > thead > tr > td:first-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > thead > tr > td:first-child,
  > .@{prefix-cls}-table-bordered > tbody > tr > td:first-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr > td:first-child,
  > .@{prefix-cls}-table-bordered > tfoot > tr > td:first-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  > .@{prefix-cls}-table-bordered > thead > tr > th:last-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > thead > tr > th:last-child,
  > .@{prefix-cls}-table-bordered > tbody > tr > th:last-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr > th:last-child,
  > .@{prefix-cls}-table-bordered > tfoot > tr > th:last-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tfoot > tr > th:last-child,
  > .@{prefix-cls}-table-bordered > thead > tr > td:last-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > thead > tr > td:last-child,
  > .@{prefix-cls}-table-bordered > tbody > tr > td:last-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr > td:last-child,
  > .@{prefix-cls}-table-bordered > tfoot > tr > td:last-child,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  > .@{prefix-cls}-table-bordered > thead > tr:first-child > td,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > thead > tr:first-child > td,
  > .@{prefix-cls}-table-bordered > tbody > tr:first-child > td,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr:first-child > td,
  > .@{prefix-cls}-table-bordered > thead > tr:first-child > th,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > thead > tr:first-child > th,
  > .@{prefix-cls}-table-bordered > tbody > tr:first-child > th,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr:first-child > th {
    border-bottom: 0;
  }
  > .@{prefix-cls}-table-bordered > tbody > tr:last-child > td,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr:last-child > td,
  > .@{prefix-cls}-table-bordered > tfoot > tr:last-child > td,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tfoot > tr:last-child > td,
  > .@{prefix-cls}-table-bordered > tbody > tr:last-child > th,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tbody > tr:last-child > th,
  > .@{prefix-cls}-table-bordered > tfoot > tr:last-child > th,
  > .@{prefix-cls}-table-responsive > .@{prefix-cls}-table-bordered > tfoot > tr:last-child > th {
    border-bottom: 0;
  }

  > .@{prefix-cls}-table-responsive {
    margin-bottom: 0;
    border: 0;
  }
}

.@{prefix-cls}-list-group + .@{prefix-cls}-panel-footer {
  border-top-width: 0;
}

.@{prefix-cls}-panel-group {
  margin-bottom: 20px;

  .@{prefix-cls}-panel {
    margin-bottom: 0;
    border-radius: 4px;
  }
  .@{prefix-cls}-panel + .@{prefix-cls}-panel {
    margin-top: 5px;
  }
  .@{prefix-cls}-panel-heading {
    border-bottom: 0;
  }
  .@{prefix-cls}-panel-heading + .@{prefix-cls}-panel-collapse > .@{prefix-cls}-panel-body,
  .@{prefix-cls}-panel-heading + .@{prefix-cls}-panel-collapse > .@{prefix-cls}-list-group {
    border-top: 1px solid @lightGrayColor;
  }
  .@{prefix-cls}-panel-footer {
    border-top: 0;
  }
  .@{prefix-cls}-panel-footer + .@{prefix-cls}-panel-collapse .@{prefix-cls}-panel-body {
    border-bottom: 1px solid @lightGrayColor;
  }
}

.@{prefix-cls}-panel-default {
  border-color: @lightGrayColor;

  > .@{prefix-cls}-panel-heading {
    background-color: @whiteColor;
    border-color: @lightGrayColor;
    color: @fontColor;
  }
  > .@{prefix-cls}-panel-heading + .@{prefix-cls}-panel-collapse > .@{prefix-cls}-panel-body {
    border-top-color: @lightGrayColor;
  }
  > .@{prefix-cls}-panel-heading .@{prefix-cls}-badge {
    color: @lightColor;
    background-color: @fontColor;
  }
  > .@{prefix-cls}-panel-footer + .@{prefix-cls}-panel-collapse > .@{prefix-cls}-panel-body {
    border-bottom-color: @lightGrayColor;
  }
}