bootstrap-source/bootstrap-3.0.3/less/panels.less
author stetrabby <info@trabucchi.de>
Fri, 20 Dec 2013 22:49:16 +0100
changeset 54 0ded9d7748b7
permissions -rwxr-xr-x
initial less based on the pymove3d.css
info@54
     1
//
info@54
     2
// Panels
info@54
     3
// --------------------------------------------------
info@54
     4
info@54
     5
info@54
     6
// Base class
info@54
     7
.panel {
info@54
     8
  margin-bottom: @line-height-computed;
info@54
     9
  background-color: @panel-bg;
info@54
    10
  border: 1px solid transparent;
info@54
    11
  border-radius: @panel-border-radius;
info@54
    12
  .box-shadow(0 1px 1px rgba(0,0,0,.05));
info@54
    13
}
info@54
    14
info@54
    15
// Panel contents
info@54
    16
.panel-body {
info@54
    17
  padding: 15px;
info@54
    18
  .clearfix();
info@54
    19
}
info@54
    20
info@54
    21
info@54
    22
// List groups in panels
info@54
    23
//
info@54
    24
// By default, space out list group content from panel headings to account for
info@54
    25
// any kind of custom content between the two.
info@54
    26
info@54
    27
.panel {
info@54
    28
  > .list-group {
info@54
    29
    margin-bottom: 0;
info@54
    30
info@54
    31
    .list-group-item {
info@54
    32
      border-width: 1px 0;
info@54
    33
info@54
    34
      // Remove border radius for top one
info@54
    35
      &:first-child {
info@54
    36
        .border-top-radius(0);
info@54
    37
      }
info@54
    38
      // But keep it for the last one
info@54
    39
      &:last-child {
info@54
    40
        border-bottom: 0;
info@54
    41
      }
info@54
    42
    }
info@54
    43
  }
info@54
    44
}
info@54
    45
// Collapse space between when there's no additional content.
info@54
    46
.panel-heading + .list-group {
info@54
    47
  .list-group-item:first-child {
info@54
    48
    border-top-width: 0;
info@54
    49
  }
info@54
    50
}
info@54
    51
info@54
    52
info@54
    53
// Tables in panels
info@54
    54
//
info@54
    55
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
info@54
    56
// watch it go full width.
info@54
    57
info@54
    58
.panel {
info@54
    59
  > .table,
info@54
    60
  > .table-responsive > .table {
info@54
    61
    margin-bottom: 0;
info@54
    62
  }
info@54
    63
  > .panel-body + .table,
info@54
    64
  > .panel-body + .table-responsive {
info@54
    65
    border-top: 1px solid @table-border-color;
info@54
    66
  }
info@54
    67
  > .table > tbody:first-child th,
info@54
    68
  > .table > tbody:first-child td {
info@54
    69
    border-top: 0;
info@54
    70
  }
info@54
    71
  > .table-bordered,
info@54
    72
  > .table-responsive > .table-bordered {
info@54
    73
    border: 0;
info@54
    74
    > thead,
info@54
    75
    > tbody,
info@54
    76
    > tfoot {
info@54
    77
      > tr {
info@54
    78
        > th:first-child,
info@54
    79
        > td:first-child {
info@54
    80
          border-left: 0;
info@54
    81
        }
info@54
    82
        > th:last-child,
info@54
    83
        > td:last-child {
info@54
    84
          border-right: 0;
info@54
    85
        }
info@54
    86
info@54
    87
        &:last-child > th,
info@54
    88
        &:last-child > td {
info@54
    89
          border-bottom: 0;
info@54
    90
        }
info@54
    91
      }
info@54
    92
    }
info@54
    93
  }
info@54
    94
  > .table-responsive {
info@54
    95
    border: 0;
info@54
    96
    margin-bottom: 0;
info@54
    97
  }
info@54
    98
}
info@54
    99
info@54
   100
info@54
   101
// Optional heading
info@54
   102
.panel-heading {
info@54
   103
  padding: 10px 15px;
info@54
   104
  border-bottom: 1px solid transparent;
info@54
   105
  .border-top-radius(@panel-border-radius - 1);
info@54
   106
info@54
   107
  > .dropdown .dropdown-toggle {
info@54
   108
    color: inherit;
info@54
   109
  }
info@54
   110
}
info@54
   111
info@54
   112
// Within heading, strip any `h*` tag of it's default margins for spacing.
info@54
   113
.panel-title {
info@54
   114
  margin-top: 0;
info@54
   115
  margin-bottom: 0;
info@54
   116
  font-size: ceil((@font-size-base * 1.125));
info@54
   117
  color: inherit;
info@54
   118
info@54
   119
  > a {
info@54
   120
    color: inherit;
info@54
   121
  }
info@54
   122
}
info@54
   123
info@54
   124
// Optional footer (stays gray in every modifier class)
info@54
   125
.panel-footer {
info@54
   126
  padding: 10px 15px;
info@54
   127
  background-color: @panel-footer-bg;
info@54
   128
  border-top: 1px solid @panel-inner-border;
info@54
   129
  .border-bottom-radius(@panel-border-radius - 1);
info@54
   130
}
info@54
   131
info@54
   132
info@54
   133
// Collapsable panels (aka, accordion)
info@54
   134
//
info@54
   135
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
info@54
   136
// the help of our collapse JavaScript plugin.
info@54
   137
info@54
   138
.panel-group {
info@54
   139
  // Tighten up margin so it's only between panels
info@54
   140
  .panel {
info@54
   141
    margin-bottom: 0;
info@54
   142
    border-radius: @panel-border-radius;
info@54
   143
    overflow: hidden; // crop contents when collapsed
info@54
   144
    + .panel {
info@54
   145
      margin-top: 5px;
info@54
   146
    }
info@54
   147
  }
info@54
   148
info@54
   149
  .panel-heading {
info@54
   150
    border-bottom: 0;
info@54
   151
    + .panel-collapse .panel-body {
info@54
   152
      border-top: 1px solid @panel-inner-border;
info@54
   153
    }
info@54
   154
  }
info@54
   155
  .panel-footer {
info@54
   156
    border-top: 0;
info@54
   157
    + .panel-collapse .panel-body {
info@54
   158
      border-bottom: 1px solid @panel-inner-border;
info@54
   159
    }
info@54
   160
  }
info@54
   161
}
info@54
   162
info@54
   163
info@54
   164
// Contextual variations
info@54
   165
.panel-default {
info@54
   166
  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
info@54
   167
}
info@54
   168
.panel-primary {
info@54
   169
  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
info@54
   170
}
info@54
   171
.panel-success {
info@54
   172
  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
info@54
   173
}
info@54
   174
.panel-warning {
info@54
   175
  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
info@54
   176
}
info@54
   177
.panel-danger {
info@54
   178
  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
info@54
   179
}
info@54
   180
.panel-info {
info@54
   181
  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
info@54
   182
}
Impressum Datenschutzerklärung