Ticket #6291: twentyfifteen-comp-style.07.patch
File twentyfifteen-comp-style.07.patch, 32.5 KB (added by , 10 years ago) |
---|
-
src/bp-templates/bp-legacy/css/twentyfifteen.css
1 /*-------------------------------------------------------------- 2 3 This is the BuddyPress companion stylesheet for 4 the WordPress Twentyfifteen theme. 5 6 This sheet supports the primary BuddyPress styles in buddypress.css 7 8 The Rulesets shadow the BP default stylesheet sectioning 9 to maintain uniformity. 10 11 If you are running as a child theme of twentyfifteen and wish to use 12 this stylesheet then please copy it to buddypress/css/ or community/css/ 13 in your child theme root and rename the file to match your child theme name 14 i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become 15 'twentyfifteen-child.css' 16 17 ---------------------------------------------------------------- 18 >>> TABLE OF CONTENTS: 19 ---------------------------------------------------------------- 20 1.0 Theme Structural Elements 21 2.0 - Navigation - General 22 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs) 23 2.2 - Pagination 24 3.0 - Images 25 4.0 - BP Lists / Loops Generic 26 4.1 - Activity Loop 27 4.1.1 - Activity Listing 28 4.1.2 - Activity Comments 29 4.2 - Members Loop 30 4.3 - Groups Loop 31 4.4 - Blogs Loop 32 5.0 - Directories - Members, Groups, Blogs, Forums 33 6.0 - Single Group Screens 34 7.0 - Single User Account Screens 35 7.1 - Notifications 36 7.2 - Private Messaging Threads 37 7.3 - Extended Profiles 38 7.4 - Settings 39 8.0 - Forms - General 40 9.0 - Tables - General 41 10.0 - Error / Success Messages 42 11.0 - Ajax Loading 43 12.0 - Widgets 44 --------------------------------------------------------------*/ 45 /** 46 *------------------------------------------------------------------------------- 47 * @section 1.0 - Theme - Structural Elements 48 *------------------------------------------------------------------------------- 49 */ 50 .buddypress div.clear { 51 display: none; 52 } 53 .buddypress main { 54 padding-top: 4%; 55 } 56 @media screen and (min-width: 59.6875em) { 57 .buddypress main { 58 padding-top: 0; 59 } 60 } 61 .buddypress main article { 62 margin: 0 4%; 63 padding-top: 8.3333%; 64 } 65 @media screen and (min-width: 59.6875em) { 66 .buddypress main article { 67 margin: 0 0 0 1px; 68 } 69 } 70 @media screen and (min-width: 87.6875em) { 71 .buddypress main article { 72 margin: 0 4.3333% 0 8.3333%; 73 } 74 } 75 .buddypress main article .entry-header, 76 .buddypress main article .entry-content { 77 padding: 0 2rem 2rem; 78 } 79 .buddypress main article #buddypress { 80 margin-bottom: 40px; 81 } 82 .buddypress .site-footer { 83 margin: 0 4%; 84 } 85 @media screen and (min-width: 59.6875em) { 86 .buddypress .site-footer { 87 margin: 0 0 0 35.2941%; 88 width: 61.8235%; 89 } 90 } 91 92 /** 93 *------------------------------------------------------------------------------- 94 * @section 2.0 - Navigation - General 95 *------------------------------------------------------------------------------- 96 */ 97 .buddypress #buddypress .item-list-tabs a, 98 .buddypress #buddypress .activity-header a, 99 .buddypress #buddypress .activity-inner a, 100 .buddypress #buddypress .activity-comments a, 101 .buddypress #buddypress .item-title a, 102 .buddypress #buddypress .load-more a, 103 .buddypress #buddypress .field-visibility-settings-toggle a, 104 .buddypress #buddypress #latest-update a, 105 .buddypress #buddypress table a { 106 border-bottom: 0; 107 } 108 .buddypress #buddypress .pagination-links a, 109 .buddypress #buddypress .pagination-links span { 110 border-bottom: 0; 111 } 112 113 /** 114 *------------------------------------------------------------------------------- 115 * @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs) 116 *------------------------------------------------------------------------------- 117 * 118 * @description The main navigational elements for BP screens 119 */ 120 #buddypress { 121 /*__ Horizontal menus __*/ 122 } 123 #buddypress div.item-list-tabs ul li.selected a { 124 background: #555; 125 color: #fff; 126 opacity: 1; 127 } 128 #buddypress div.item-list-tabs ul { 129 background-color: #f7f7f7; 130 border-bottom: 1px solid rgba(153, 153, 153, 0.4); 131 overflow: hidden; 132 padding: 5px 0; 133 } 134 #buddypress #object-nav ul { 135 overflow: hidden; 136 } 137 #buddypress #object-nav ul li { 138 float: none; 139 } 140 #buddypress #object-nav ul li:not(.selected) a { 141 opacity: 0.7; 142 } 143 @media screen and (min-width: 38.75em) { 144 #buddypress #object-nav ul li { 145 float: left; 146 } 147 } 148 #buddypress div#subnav.item-list-tabs { 149 margin-top: 0; 150 } 151 #buddypress div#subnav.item-list-tabs ul { 152 background-color: #f7f7f7; 153 border-bottom: 0; 154 padding: 0; 155 } 156 #buddypress div#subnav.item-list-tabs ul li.last { 157 background: #fff; 158 margin-top: 0; 159 padding: 5px 5px 5px 0; 160 width: 100%; 161 } 162 #buddypress div#subnav.item-list-tabs ul li.last select, 163 #buddypress div#subnav.item-list-tabs ul li.last select:focus { 164 background: transparent; 165 border: 0; 166 outline: 0; 167 } 168 #buddypress div#subnav.item-list-tabs ul li.last select, 169 #buddypress div#subnav.item-list-tabs ul li.last label, 170 #buddypress div#subnav.item-list-tabs ul li.last option { 171 font-size: 14px; 172 font-size: 1.4rem; 173 } 174 #buddypress div#subnav.item-list-tabs ul li.last select { 175 font-style: italic; 176 } 177 @media screen and (min-width: 38.75em) { 178 #buddypress div#subnav.item-list-tabs ul li.last { 179 text-align: right; 180 } 181 } 182 #buddypress div.item-list-tabs ul li.selected a, 183 #buddypress div.item-list-tabs ul li.current a { 184 background: #555; 185 color: #fff; 186 opacity: 1; 187 } 188 189 /*__ Vertical menu User account screens __*/ 190 @media screen and (min-width: 55em) { 191 .bp-user #buddypress { 192 background: #f7f7f7; 193 } 194 .bp-user #buddypress #item-header, 195 .bp-user #buddypress #item-body { 196 background: #fff; 197 } 198 .bp-user #buddypress #object-nav { 199 border-right: 1px solid rgba(153, 153, 153, 0.1); 200 float: left; 201 margin-right: -1px; 202 width: 200px; 203 } 204 .bp-user #buddypress #object-nav ul { 205 border-bottom: 0; 206 padding: 0; 207 } 208 .bp-user #buddypress #object-nav ul li { 209 float: none; 210 overflow: hidden; 211 } 212 .bp-user #buddypress #object-nav ul li span { 213 border-radius: 10%; 214 float: right; 215 margin-right: 15px; 216 } 217 .bp-user #buddypress #item-body { 218 border-left: 1px solid #ddd; 219 overflow: hidden; 220 padding: 0 10px; 221 width: auto; 222 } 223 .bp-user #buddypress #item-body #subnav { 224 margin: 0 -10px; 225 } 226 } 227 /** 228 *------------------------------------------------------------------------------- 229 * @section 2.2 - Pagination 230 *------------------------------------------------------------------------------- 231 */ 232 #buddypress div.pagination { 233 box-shadow: none; 234 } 235 #buddypress div.pagination .pag-count { 236 margin-left: 0; 237 } 238 #buddypress div.pagination .pagination-links { 239 margin-right: 0; 240 } 241 #buddypress div.pagination .pagination-links span, 242 #buddypress div.pagination .pagination-links a { 243 height: auto; 244 line-height: 1; 245 padding: 5px; 246 } 247 #buddypress div.pagination .pagination-links .prev, 248 #buddypress div.pagination .pagination-links .next { 249 background-color: transparent; 250 color: inherit; 251 overflow: visible; 252 width: auto; 253 } 254 #buddypress div.pagination .pagination-links .prev:before, 255 #buddypress div.pagination .pagination-links .next:before { 256 display: none; 257 } 258 #buddypress div.pagination .pagination-links .prev { 259 left: auto; 260 position: static; 261 } 262 #buddypress div.pagination .pagination-links .next { 263 position: static; 264 right: auto; 265 } 266 267 /** 268 *------------------------------------------------------------------------------- 269 * @section 4.0 - BP Lists / Loops Generic 270 *------------------------------------------------------------------------------- 271 */ 272 #buddypress ul.item-list li { 273 overflow: hidden !important; 274 } 275 #buddypress ul.item-list li .item .item-desc { 276 margin-left: 0; 277 width: auto; 278 } 279 @media screen and (min-width: 59.6875em) { 280 #buddypress ul.item-list li .item-avatar, 281 #buddypress ul.item-list li .item, 282 #buddypress ul.item-list li .action { 283 float: left; 284 } 285 #buddypress ul.item-list li .item { 286 position: relative; 287 left: 10%; 288 width: 55%; 289 } 290 } 291 #buddypress ul.item-list li div.action { 292 clear: left; 293 float: none; 294 padding: 0 2px; 295 margin-bottom: -20px; 296 margin-left: 0; 297 padding: 20px 0 5px; 298 position: relative; 299 text-align: left; 300 top: 0; 301 } 302 @media screen and (min-width: 59.6875em) { 303 #buddypress ul.item-list li div.action { 304 clear: none; 305 float: right; 306 margin-bottom: 0; 307 padding: 0; 308 } 309 } 310 #buddypress ul.item-list li div.action div { 311 display: inline-block; 312 width: 100%; 313 margin: 10px 0; 314 } 315 #buddypress ul.item-list li div.action div a { 316 display: block; 317 width: 100%; 318 } 319 @media screen and (min-width: 38.75em) { 320 #buddypress ul.item-list li div.action div { 321 margin: 0 10px 10px 0; 322 width: auto; 323 } 324 } 325 @media screen and (min-width: 59.6875em) { 326 #buddypress ul.item-list li div.action div { 327 clear: right; 328 float: right; 329 margin: 0 0 10px 0; 330 } 331 } 332 #buddypress ul.item-list li div.action .meta { 333 font-style: italic; 334 } 335 336 /** 337 *------------------------------------------------------------------------------- 338 * @section 4.1 - Activity 339 *------------------------------------------------------------------------------- 340 */ 341 /** 342 *------------------------------------------------------------------------------- 343 * @section 4.1.2 - Activity Whats New 344 *------------------------------------------------------------------------------- 345 */ 346 #buddypress form#whats-new-form textarea { 347 width: 100%; 348 } 349 #buddypress form#whats-new-form #whats-new-options[style] { 350 min-height: 6rem; 351 } 352 #buddypress #item-body form#whats-new-form { 353 margin: 40px 0; 354 } 355 356 /** 357 *------------------------------------------------------------------------------- 358 * @section 4.1.2 - Activity Listing 359 *------------------------------------------------------------------------------- 360 */ 361 #buddypress .activity-list .activity-content { 362 margin-top: -12px; 363 } 364 #buddypress .activity-list .activity-content .activity-header img.avatar { 365 display: inline-block; 366 } 367 #buddypress .activity-list .load-more a { 368 display: block; 369 } 370 371 /** 372 *------------------------------------------------------------------------------- 373 * @section 4.2 - Members Loop 374 *------------------------------------------------------------------------------- 375 */ 376 @media screen and (min-width: 59.6875em) { 377 #buddypress #members-list li .item-avatar, 378 #buddypress #members-list li .item { 379 float: left; 380 } 381 #buddypress #members-list li .action { 382 float: right; 383 } 384 } 385 386 /** 387 *------------------------------------------------------------------------------- 388 * @section 7.0 - Single User Account Screens 389 *------------------------------------------------------------------------------- 390 */ 391 .bp-user .entry-title { 392 margin-bottom: .5em; 393 } 394 @media screen and (min-width: 77.5em) { 395 .bp-user #buddypress #groups-list li .item { 396 left: 5%; 397 width: 50%; 398 } 399 } 400 401 /** 402 *------------------------------------------------------------------------------- 403 * @section 8.0 - Forms - General 404 *------------------------------------------------------------------------------- 405 */ 406 #buddypress #item-body .standard-form li { 407 float: none; 408 } 409 #buddypress #item-body .standard-form input[type='text'], 410 #buddypress #item-body .standard-form textarea { 411 width: 100%; 412 } 413 #buddypress div.dir-search, 414 #buddypress div.message-search { 415 float: none; 416 margin: 10px 0; 417 } 418 #buddypress div.dir-search form, 419 #buddypress div.message-search form { 420 border: 1px solid rgba(153, 153, 153, 0.4); 421 overflow: hidden; 422 } 423 #buddypress div.dir-search form label, 424 #buddypress div.message-search form label { 425 float: left; 426 width: 80%; 427 } 428 #buddypress div.dir-search form input[type='text'], 429 #buddypress div.message-search form input[type='text'] { 430 float: left; 431 margin: 0; 432 width: 80%; 433 } 434 #buddypress div.dir-search form input[type='text'], 435 #buddypress div.dir-search form input[type='submit'], 436 #buddypress div.message-search form input[type='text'], 437 #buddypress div.message-search form input[type='submit'] { 438 font-size: 14px; 439 font-size: 1.4rem; 440 border: 0; 441 line-height: inherit; 442 } 443 #buddypress div.dir-search form input[type='text'], 444 #buddypress div.message-search form input[type='text'] { 445 border-right: 1px solid rgba(153, 153, 153, 0.4); 446 padding: 0.2em 0 0.2em 0.2em; 447 } 448 #buddypress div.dir-search form input[type='submit'], 449 #buddypress div.message-search form input[type='submit'] { 450 float: right; 451 font-weight: normal; 452 padding: 0.2em 1em; 453 text-align: center; 454 text-transform: none; 455 width: 20%; 456 } 457 @media screen and (min-width: 38.75em) { 458 #buddypress div.dir-search, 459 #buddypress div.message-search { 460 float: right; 461 margin-bottom: 5px !important; 462 } 463 #buddypress div.dir-search form label, 464 #buddypress div.dir-search form input[type='text'], 465 #buddypress div.dir-search form input[type='submit'], 466 #buddypress div.message-search form label, 467 #buddypress div.message-search form input[type='text'], 468 #buddypress div.message-search form input[type='submit'] { 469 width: auto; 470 } 471 #buddypress div.message-search { 472 margin-right: 10px; 473 } 474 } 475 @media screen and (min-width: 77.5em) { 476 #buddypress .dir-search form input[type='text'], 477 #buddypress .message-search form input[type='text'] { 478 font-size: 16px; 479 font-size: 1.6rem; 480 } 481 #buddypress .dir-search form input[type='submit'], 482 #buddypress .message-search form input[type='submit'] { 483 font-size: 16px; 484 font-size: 1.6rem; 485 } 486 } 487 488 /** 489 *------------------------------------------------------------------------------- 490 * @section 9.0 - Tables - General 491 *------------------------------------------------------------------------------- 492 */ 493 #buddypress table { 494 font-size: 14px; 495 font-size: 1.4rem; 496 margin: 20px 0; 497 } 498 @media screen and (min-width: 55em) { 499 #buddypress table { 500 font-size: 16px; 501 font-size: 1.6rem; 502 } 503 } 504 505 /*__ User Account tables __*/ 506 #buddypress .notifications th, 507 #buddypress .messages-notices th { 508 width: 30%; 509 } 510 #buddypress .notifications th.bulk-select-all, 511 #buddypress .messages-notices th.bulk-select-all { 512 text-align: center; 513 width: 10%; 514 } 515 #buddypress .notifications .bulk-select-check, 516 #buddypress .messages-notices .bulk-select-check { 517 text-align: center; 518 } 519 #buddypress .notifications .notification-actions, 520 #buddypress .notifications td.thread-options, 521 #buddypress .messages-notices .notification-actions, 522 #buddypress .messages-notices td.thread-options { 523 text-align: center; 524 } 525 #buddypress .notifications .notification-actions a, 526 #buddypress .notifications td.thread-options a, 527 #buddypress .messages-notices .notification-actions a, 528 #buddypress .messages-notices td.thread-options a { 529 display: inline-block; 530 margin: 0; 531 padding: 0; 532 } 533 #buddypress .notifications td .button, 534 #buddypress .messages-notices td .button { 535 border: 0; 536 display: block; 537 padding: 0; 538 text-align: center; 539 } 540 541 /*# sourceMappingURL=twentyfifteen.css.map */ -
src/bp-templates/bp-legacy/css/twentyfifteen.scss
1 // Stylesheet Guidence Notes 2 // Table of content represents a guide to sections of the sheet. 3 // Note that not all sections may be described in the body of the 4 // rulesets only those that require styles for a given theme. 5 // Sub sections might not exist but can be added as required 6 // as per BP Lists - 'activity' section. 7 8 // We follow the dictats of the parent theme in respect of media queries, 9 // font sizing etc. Media queries are used in a modular sense (OOCSS) 10 // rather than described as blocks to the end of the sheet, this aids ease 11 // of managing media queries, scalability & flexibility . 12 13 // Twentyfifteen Media Queries / Breakpoints 14 // @media screen and (min-width: 38.75em) 15 // @media screen and (min-width: 46.25em) 16 // @media screen and (min-width: 55em) 17 // @media screen and (min-width: 59.6875em) 18 // @media screen and (min-width: 77.5em) 19 // @media screen and (min-width: 87.6875em) 20 21 // Mixins and Variabals 22 23 // Common margin values 24 $spacing-val-lg: 40px; 25 $spacing-val-md: 20px; 26 $spacing-val-sm: 10px; 27 $spacing-val-xs: 5px; 28 29 // A simple mixin to handle font-sizing to match 2015 62.5% approach 30 @mixin font-size($font-size: 16) { 31 $rem-font-value: ($font-size / 10); 32 font-size: ($font-size * 1px); 33 font-size: $rem-font-value + rem; 34 } 35 // Variabals: color definitions 36 $content-background: #fff; 37 $light-background: #f7f7f7; 38 $medium-background: #ccc; 39 $dark-background: #555; 40 $border-color: #999; // border color is varied using rgba 41 $border-light: #eaeaea; // BP dividers 42 43 /*-------------------------------------------------------------- 44 45 This is the BuddyPress companion stylesheet for 46 the WordPress Twentyfifteen theme. 47 48 This sheet supports the primary BuddyPress styles in buddypress.css 49 50 The Rulesets shadow the BP default stylesheet sectioning 51 to maintain uniformity. 52 53 If you are running as a child theme of twentyfifteen and wish to use 54 this stylesheet then please copy it to buddypress/css/ or community/css/ 55 in your child theme root and rename the file to match your child theme name 56 i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become 57 'twentyfifteen-child.css' 58 59 ---------------------------------------------------------------- 60 >>> TABLE OF CONTENTS: 61 ---------------------------------------------------------------- 62 1.0 Theme Structural Elements 63 2.0 - Navigation - General 64 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs) 65 2.2 - Pagination 66 3.0 - Images 67 4.0 - BP Lists / Loops Generic 68 4.1 - Activity Loop 69 4.1.1 - Activity Listing 70 4.1.2 - Activity Comments 71 4.2 - Members Loop 72 4.3 - Groups Loop 73 4.4 - Blogs Loop 74 5.0 - Directories - Members, Groups, Blogs, Forums 75 6.0 - Single Group Screens 76 7.0 - Single User Account Screens 77 7.1 - Notifications 78 7.2 - Private Messaging Threads 79 7.3 - Extended Profiles 80 7.4 - Settings 81 8.0 - Forms - General 82 9.0 - Tables - General 83 10.0 - Error / Success Messages 84 11.0 - Ajax Loading 85 12.0 - Widgets 86 --------------------------------------------------------------*/ 87 88 /** 89 *------------------------------------------------------------------------------- 90 * @section 1.0 - Theme - Structural Elements 91 *------------------------------------------------------------------------------- 92 */ 93 94 // As BP screens have specific content lets adjust the themes primary elements 95 // to maximise the screen real estate for BP pages. 96 97 .buddypress { 98 div.clear {display: none;} 99 .site-content { 100 @media screen and (min-width: 77.5em) { 101 } 102 } 103 104 main { 105 padding-top: 4%; 106 @media screen and (min-width: 59.6875em) { 107 padding-top: 0; 108 } 109 110 article { 111 margin: 0 4%; 112 padding-top: 8.3333%; 113 @media screen and (min-width: 59.6875em) { 114 margin: 0 0 0 1px; 115 } 116 @media screen and (min-width: 87.6875em) { 117 margin: 0 4.3333% 0 8.3333%; 118 } 119 120 .entry-header, 121 .entry-content { 122 padding: 0 2rem 2rem; 123 } 124 125 #buddypress { 126 margin-bottom: $spacing-val-lg; 127 } 128 } // .article 129 } // .main 130 .site-footer { 131 margin: 0 4%; 132 @media screen and (min-width: 59.6875em) { 133 margin: 0 0 0 35.2941%; 134 width: 61.8235%; 135 } 136 } 137 } // .buddypress (body class) 138 139 /** 140 *------------------------------------------------------------------------------- 141 * @section 2.0 - Navigation - General 142 *------------------------------------------------------------------------------- 143 */ 144 145 // Remove 2015 border bottom on BP links/spans 146 147 .buddypress #buddypress { 148 .item-list-tabs, 149 .activity-header, 150 .activity-inner, 151 .activity-comments, 152 .item-title, 153 .load-more, 154 .field-visibility-settings-toggle, 155 #latest-update, 156 table, { 157 a { border-bottom: 0; } 158 } 159 160 .pagination-links { 161 a, 162 span { border-bottom: 0; } 163 } 164 } // close .buddypress #buddypress 165 166 /** 167 *------------------------------------------------------------------------------- 168 * @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs) 169 *------------------------------------------------------------------------------- 170 * 171 * @description The main navigational elements for BP screens 172 */ 173 174 // We have a need to override BP specifity 175 // so some rulesets sets are seemingly over weighted in selectors 176 177 #buddypress { 178 179 // active/current states all navs 180 div.item-list-tabs { 181 ul { 182 li.selected { 183 a { 184 background: $dark-background; 185 color: #fff; 186 opacity: 1; 187 } 188 } 189 } 190 } 191 // Global Nav Styles 192 div.item-list-tabs { 193 ul { 194 background-color: $light-background; 195 border-bottom: 1px solid rgba($border-color, 0.4); 196 overflow: hidden; 197 padding: $spacing-val-xs 0; 198 } 199 } 200 /*__ Horizontal menus __*/ 201 #object-nav { 202 ul { 203 // background-color: #eee; 204 // border-bottom: 1px solid #ddd; 205 overflow: hidden; 206 li {float: none;} 207 li:not(.selected) { 208 a {opacity: 0.7;} 209 } 210 211 @media screen and (min-width: 38.75em) { 212 li { 213 float: left; 214 } 215 // li:nth-child(1n+7) {clear: left;} 216 } 217 } 218 } 219 220 div#subnav.item-list-tabs { 221 margin-top: 0; 222 223 ul { 224 background-color: $light-background; 225 border-bottom: 0; 226 padding: 0; 227 228 li.last { 229 background: $content-background; 230 margin-top: 0; 231 padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0; 232 width: 100%; 233 234 select, 235 select:focus { 236 background: transparent; 237 border: 0; 238 outline: 0; 239 } 240 select, 241 label, 242 option { 243 @include font-size(14); 244 } 245 select { 246 font-style: italic; 247 } 248 } 249 250 @media screen and (min-width: 38.75em) { 251 li.last { 252 text-align: right; 253 } 254 } 255 } // close ul 256 } // close #subnav 257 258 // active/current states all navs 259 div.item-list-tabs { 260 ul { 261 li.selected, 262 li.current { 263 a { 264 background: $dark-background; 265 color: #fff; 266 opacity: 1; 267 } 268 } 269 } 270 } 271 272 } // close #buddypress 273 274 /*__ Vertical menu User account screens __*/ 275 276 // This block contains the rules to re-factor the item-body structural element 277 // to sit alongside the vert menu 278 // Structural layout and faux column styling of backgrounds is more suited 279 // to the earlier section. todo: re-position sort out when known what styles 280 // are being used. 281 282 @media screen and (min-width: 55em) { 283 .bp-user #buddypress { 284 background: $light-background; 285 286 #item-header, 287 #item-body { 288 background: $content-background; 289 } 290 291 #object-nav { 292 border-right: 1px solid rgba($border-color, .1); 293 float: left; 294 margin-right: -1px; 295 width: 200px; 296 297 ul { 298 border-bottom: 0; 299 padding: 0; 300 301 li { 302 float: none; 303 overflow: hidden; 304 305 span { 306 border-radius: 10%; 307 float: right; 308 margin-right: 15px; 309 } 310 } 311 } 312 } 313 314 #item-body { 315 border-left: 1px solid #ddd; 316 overflow: hidden; 317 padding: 0 $spacing-val-sm; 318 width: auto; 319 320 #subnav { 321 margin: 0 (-$spacing-val-sm); 322 } 323 } 324 325 } // close .bp-user #buddypress 326 } // close @media 327 328 /** 329 *------------------------------------------------------------------------------- 330 * @section 2.2 - Pagination 331 *------------------------------------------------------------------------------- 332 */ 333 334 #buddypress { 335 div.pagination { 336 box-shadow: none; 337 .pag-count {margin-left: 0;} 338 .pagination-links { 339 margin-right: 0; 340 341 span, 342 a { 343 height: auto; 344 line-height: 1; 345 padding: 5px; 346 } 347 348 .prev, 349 .next { 350 background-color: transparent; 351 color: inherit; 352 overflow: visible; 353 width: auto; 354 &:before {display: none;} 355 } 356 357 .prev { 358 left: auto; 359 position: static; 360 } 361 362 .next { 363 position: static; 364 right: auto; 365 } 366 } // close .pagination-links 367 } // close .pagination 368 } // close #buddypress 369 370 /** 371 *------------------------------------------------------------------------------- 372 * @section 4.0 - BP Lists / Loops Generic 373 *------------------------------------------------------------------------------- 374 */ 375 376 // Trying to position the action div absolute has bad consequences where 377 // aditional items are displayed, floating is an alternative but may need 378 // to reconsider this approach. All li items floated left at wide screen. 379 // Initialy override the BP absolute positioning, allow natural flow position 380 // mobile up. 381 382 #buddypress { 383 ul.item-list { 384 li { 385 overflow: hidden !important; 386 387 .item { 388 .item-desc { 389 margin-left: 0; 390 width: auto; 391 } 392 } 393 @media screen and (min-width: 59.6875em) { 394 .item-avatar, 395 .item, 396 .action { 397 float: left; 398 } 399 .item { 400 position: relative; 401 left: 10%; 402 width:55%; 403 } 404 }// close @media 405 406 div.action { 407 clear: left; 408 float: none; 409 padding: 0 2px; 410 margin-bottom: -$spacing-val-md; 411 // remove BP margin left 412 margin-left: 0; 413 padding: $spacing-val-md 0 $spacing-val-xs; 414 // push the actions to the right 415 @media screen and (min-width: 59.6875em) { 416 clear: none; 417 float: right; 418 margin-bottom: 0; 419 padding: 0 ; 420 } 421 position: relative; 422 text-align: left; 423 top: 0; 424 div { 425 display: inline-block; 426 width: 100%; 427 a { 428 display: block; 429 width: 100%; 430 } 431 // Provisionally lets keep the 'action' div 432 //position but inline-block the buttons 433 @media screen and (min-width: 38.75em) { 434 // keep buttons to a row small tablet up 435 margin: 0 $spacing-val-sm $spacing-val-sm 0; 436 width: auto; 437 } // close @media 438 @media screen and (min-width: 59.6875em) { 439 // take buttons to block to stack them when floated right 440 clear: right; 441 float: right; 442 margin: 0 0 $spacing-val-sm 0; 443 } // close @media 444 margin: $spacing-val-sm 0; 445 } // close div 446 .meta {font-style: italic;} 447 } // close .action 448 449 } // close li 450 } // close .item-list 451 } // close #buddypress 452 453 /** 454 *------------------------------------------------------------------------------- 455 * @section 4.1 - Activity 456 *------------------------------------------------------------------------------- 457 */ 458 459 /** 460 *------------------------------------------------------------------------------- 461 * @section 4.1.2 - Activity Whats New 462 *------------------------------------------------------------------------------- 463 */ 464 465 #buddypress { 466 form#whats-new-form { 467 textarea {width: 100%;} 468 // corrective measure for clipped elements due to JS inline styling 469 #whats-new-options[style] { 470 min-height: 6rem; // unit open to debate px value might be better. 471 } 472 } 473 // User account form requires matching bp default specificity 474 #item-body { 475 form#whats-new-form { 476 margin: $spacing-val-lg 0; 477 } 478 } 479 } // close #buddypress 480 481 /** 482 *------------------------------------------------------------------------------- 483 * @section 4.1.2 - Activity Listing 484 *------------------------------------------------------------------------------- 485 */ 486 487 #buddypress { 488 .activity-list { 489 .activity-content { 490 margin-top: -12px; 491 492 .activity-header { 493 img.avatar { 494 display: inline-block; 495 } 496 } // close .activity-header 497 } // close .activity-content 498 .load-more a {display: block;} 499 } // close .activity-list 500 501 } // close #buddypress 502 503 /** 504 *------------------------------------------------------------------------------- 505 * @section 4.2 - Members Loop 506 *------------------------------------------------------------------------------- 507 */ 508 509 #buddypress { 510 #members-list { 511 @media screen and (min-width: 59.6875em) { 512 li { 513 .item-avatar, 514 .item { 515 float: left; 516 } 517 .action { 518 float: right; 519 } 520 } 521 } 522 } 523 } //close #BuddyPress 524 525 /** 526 *------------------------------------------------------------------------------- 527 * @section 7.0 - Single User Account Screens 528 *------------------------------------------------------------------------------- 529 */ 530 531 .bp-user { 532 .entry-title {margin-bottom: .5em;} 533 534 #buddypress { 535 #groups-list { 536 li { 537 .item { 538 @media screen and (min-width: 77.5em) { 539 left: 5%; 540 width: 50%; 541 } 542 } 543 } 544 } 545 } 546 } // close .bp-user 547 548 /** 549 *------------------------------------------------------------------------------- 550 * @section 8.0 - Forms - General 551 *------------------------------------------------------------------------------- 552 */ 553 554 // 2015 applies 100% width to form element, remove this initially for BP search 555 556 #buddypress { 557 558 // Manage form control widths under #item-body in user account screens 559 #item-body { 560 .standard-form { 561 li {float: none;} 562 input[type='text'], 563 textarea { 564 width: 100%; 565 } 566 } 567 } 568 569 div.dir-search, 570 div.message-search { 571 float: none; 572 margin: $spacing-val-sm 0; 573 574 // Stylise the seach form elements, in part this deals with padding 575 // issues on the submit & sizing issues between bp styles & twentyfifteen 576 577 form { // *sigh* only to bludgeon over specified rules 578 border: 1px solid rgba($border-color, 0.4); 579 overflow: hidden; 580 581 label { 582 float: left; 583 width: 80%; 584 } 585 586 input[type='text'] { 587 float: left; 588 margin: 0; 589 width: 80%; 590 } 591 592 input[type='text'], 593 input[type='submit'] { 594 @include font-size(14); 595 border: 0; 596 line-height: inherit; 597 } 598 599 input[type='text'] { 600 border-right: 1px solid rgba($border-color, 0.4); 601 padding: 0.2em 0 0.2em 0.2em; 602 } 603 604 input[type='submit'] { 605 float: right; 606 font-weight: normal; 607 padding: 0.2em 1em; 608 text-align: center; 609 text-transform: none; 610 width: 20%; 611 } 612 }// close form 613 614 } // close .dir-search, .message-search 615 616 // Shift the search parent to the right and allow to shrinkwrap 617 @media screen and (min-width: 38.75em) { 618 div.dir-search, 619 div.message-search { 620 float: right; 621 margin-bottom: 5px !important; 622 623 form { 624 label, 625 input[type='text'], 626 input[type='submit'] { 627 width: auto; 628 } 629 } 630 } 631 632 div.message-search {margin-right: $spacing-val-sm;} 633 } // close @media 634 635 // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits 636 // @media screen and (min-width: 59.6875em) { 637 // .dir-search, 638 // .message-search { 639 // form { 640 // input[type='text'] { @include font-size(14) ;} 641 // input[type='submit'] {@include font-size(14);} 642 // } 643 // } 644 // } 645 646 @media screen and (min-width: 77.5em) { 647 648 .dir-search, 649 .message-search { 650 form { 651 input[type='text'] { @include font-size(16) ;} 652 input[type='submit'] { @include font-size(16) ;} 653 } 654 } 655 } 656 657 } // close #buddypress 658 659 /** 660 *------------------------------------------------------------------------------- 661 * @section 9.0 - Tables - General 662 *------------------------------------------------------------------------------- 663 */ 664 665 // Adjust table font sizes, default too large proportionally 666 // This approach will require refinement and perhaps re-location to 667 // a more general typography section to manage BP elements grouped under 668 // breakpoints. Provide top/bottom margins for tables, lacking in BP styles 669 #buddypress { 670 table { 671 @include font-size(14); 672 margin: $spacing-val-md 0; 673 } 674 675 @media screen and (min-width: 55em) { 676 table {@include font-size(16);} 677 } 678 } 679 680 /*__ User Account tables __*/ 681 682 #buddypress { 683 684 // Manage some table cells widths that are disproportionate to their content 685 .notifications, 686 .messages-notices { 687 th { 688 width: 30%; 689 690 &.bulk-select-all { 691 text-align: center; 692 width: 10%; 693 } 694 } 695 696 .bulk-select-check {text-align: center;} 697 .notification-actions, 698 td.thread-options { 699 text-align: center; 700 701 a { 702 display: inline-block; 703 margin: 0; 704 padding: 0; 705 } 706 } 707 708 // Notices action buttons, this maybe better moved, temp for now to address 709 // styling issues - this will need styling ideas 710 td { 711 .button { 712 border: 0; 713 display:block; 714 padding: 0; 715 text-align: center; 716 } 717 } 718 719 } // .notifications, .message-notices 720 } // #buddypress 721 No newline at end of file