_panels.scss (6656B)
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 @include box-shadow(0 1px 1px rgba(0,0,0,.05)); 13 } 14 15 // Panel contents 16 .panel-body { 17 padding: $panel-body-padding; 18 @include clearfix; 19 } 20 21 // Optional heading 22 .panel-heading { 23 padding: $panel-heading-padding; 24 border-bottom: 1px solid transparent; 25 @include 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 > small, 41 > .small, 42 > small > a, 43 > .small > a { 44 color: inherit; 45 } 46 } 47 48 // Optional footer (stays gray in every modifier class) 49 .panel-footer { 50 padding: $panel-footer-padding; 51 background-color: $panel-footer-bg; 52 border-top: 1px solid $panel-inner-border; 53 @include border-bottom-radius(($panel-border-radius - 1)); 54 } 55 56 57 // List groups in panels 58 // 59 // By default, space out list group content from panel headings to account for 60 // any kind of custom content between the two. 61 62 .panel { 63 > .list-group, 64 > .panel-collapse > .list-group { 65 margin-bottom: 0; 66 67 .list-group-item { 68 border-width: 1px 0; 69 border-radius: 0; 70 } 71 72 // Add border top radius for first one 73 &:first-child { 74 .list-group-item:first-child { 75 border-top: 0; 76 @include border-top-radius(($panel-border-radius - 1)); 77 } 78 } 79 80 // Add border bottom radius for last one 81 &:last-child { 82 .list-group-item:last-child { 83 border-bottom: 0; 84 @include border-bottom-radius(($panel-border-radius - 1)); 85 } 86 } 87 } 88 > .panel-heading + .panel-collapse > .list-group { 89 .list-group-item:first-child { 90 @include border-top-radius(0); 91 } 92 } 93 } 94 // Collapse space between when there's no additional content. 95 .panel-heading + .list-group { 96 .list-group-item:first-child { 97 border-top-width: 0; 98 } 99 } 100 .list-group + .panel-footer { 101 border-top-width: 0; 102 } 103 104 // Tables in panels 105 // 106 // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and 107 // watch it go full width. 108 109 .panel { 110 > .table, 111 > .table-responsive > .table, 112 > .panel-collapse > .table { 113 margin-bottom: 0; 114 115 caption { 116 padding-left: $panel-body-padding; 117 padding-right: $panel-body-padding; 118 } 119 } 120 // Add border top radius for first one 121 > .table:first-child, 122 > .table-responsive:first-child > .table:first-child { 123 @include border-top-radius(($panel-border-radius - 1)); 124 125 > thead:first-child, 126 > tbody:first-child { 127 > tr:first-child { 128 border-top-left-radius: ($panel-border-radius - 1); 129 border-top-right-radius: ($panel-border-radius - 1); 130 131 td:first-child, 132 th:first-child { 133 border-top-left-radius: ($panel-border-radius - 1); 134 } 135 td:last-child, 136 th:last-child { 137 border-top-right-radius: ($panel-border-radius - 1); 138 } 139 } 140 } 141 } 142 // Add border bottom radius for last one 143 > .table:last-child, 144 > .table-responsive:last-child > .table:last-child { 145 @include border-bottom-radius(($panel-border-radius - 1)); 146 147 > tbody:last-child, 148 > tfoot:last-child { 149 > tr:last-child { 150 border-bottom-left-radius: ($panel-border-radius - 1); 151 border-bottom-right-radius: ($panel-border-radius - 1); 152 153 td:first-child, 154 th:first-child { 155 border-bottom-left-radius: ($panel-border-radius - 1); 156 } 157 td:last-child, 158 th:last-child { 159 border-bottom-right-radius: ($panel-border-radius - 1); 160 } 161 } 162 } 163 } 164 > .panel-body + .table, 165 > .panel-body + .table-responsive, 166 > .table + .panel-body, 167 > .table-responsive + .panel-body { 168 border-top: 1px solid $table-border-color; 169 } 170 > .table > tbody:first-child > tr:first-child th, 171 > .table > tbody:first-child > tr:first-child td { 172 border-top: 0; 173 } 174 > .table-bordered, 175 > .table-responsive > .table-bordered { 176 border: 0; 177 > thead, 178 > tbody, 179 > tfoot { 180 > tr { 181 > th:first-child, 182 > td:first-child { 183 border-left: 0; 184 } 185 > th:last-child, 186 > td:last-child { 187 border-right: 0; 188 } 189 } 190 } 191 > thead, 192 > tbody { 193 > tr:first-child { 194 > td, 195 > th { 196 border-bottom: 0; 197 } 198 } 199 } 200 > tbody, 201 > tfoot { 202 > tr:last-child { 203 > td, 204 > th { 205 border-bottom: 0; 206 } 207 } 208 } 209 } 210 > .table-responsive { 211 border: 0; 212 margin-bottom: 0; 213 } 214 } 215 216 217 // Collapsible panels (aka, accordion) 218 // 219 // Wrap a series of panels in `.panel-group` to turn them into an accordion with 220 // the help of our collapse JavaScript plugin. 221 222 .panel-group { 223 margin-bottom: $line-height-computed; 224 225 // Tighten up margin so it's only between panels 226 .panel { 227 margin-bottom: 0; 228 border-radius: $panel-border-radius; 229 230 + .panel { 231 margin-top: 5px; 232 } 233 } 234 235 .panel-heading { 236 border-bottom: 0; 237 238 + .panel-collapse > .panel-body, 239 + .panel-collapse > .list-group { 240 border-top: 1px solid $panel-inner-border; 241 } 242 } 243 244 .panel-footer { 245 border-top: 0; 246 + .panel-collapse .panel-body { 247 border-bottom: 1px solid $panel-inner-border; 248 } 249 } 250 } 251 252 253 // Contextual variations 254 .panel-default { 255 @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border); 256 } 257 .panel-primary { 258 @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border); 259 } 260 .panel-success { 261 @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border); 262 } 263 .panel-info { 264 @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border); 265 } 266 .panel-warning { 267 @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border); 268 } 269 .panel-danger { 270 @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border); 271 }