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