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