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