Skip to:
Content

BuddyPress.org

Ticket #6291: twentyfifteen-comp-style.12.patch

File twentyfifteen-comp-style.12.patch, 40.7 KB (added by hnla, 6 years ago)

Update general user account screens

  • 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 
    241                                 select,
    242                                 label,
    243                                 option {
    244                                         @include font-size(14);
    245                                 }
    246 
    247                                 select {
    248                                         font-style: italic;
    249                                 }
    250                         }
    251 
    252                         @media screen and (min-width: 38.75em) {
    253                                 li.last {
    254                                         text-align: right;
    255                                 }
    256                         }
    257                 } // close ul
    258         } // close #subnav
    259 
    260         // active/current states all navs
    261         div.item-list-tabs {
    262                 ul {
    263                         li.selected,
    264                         li.current {
    265                                 a {
    266                                         background: $dark-background;
    267                                         color: #fff;
    268                                         opacity: 1;
    269                                 }
    270                         }
    271                 }
    272         }
    273 
    274 } // close #buddypress
    275 
    276         /*__ Vertical menu User account screens __*/
    277 
    278 // This block contains the rules to re-factor the item-body structural element
    279 // to sit alongside the vert menu
    280 // Structural layout and faux column styling of backgrounds is more suited
    281 // to the earlier section. todo: re-position sort out when known what styles
    282 // are being used.
    283 
    284 @media screen and (min-width: 55em) {
    285         .bp-user #buddypress {
    286                 background: $light-background;
    287 
    288                 #item-header,
    289                 #item-body {
    290                         background: $content-background;
    291                 }
    292 
    293                 #object-nav {
    294                         border-right: 1px solid rgba($border-color, .1);
    295                         float: left;
    296                         margin-right: -1px;
    297                         width: 200px;
    298 
    299                         ul {
    300                                 border-bottom: 0;
    301                                 padding: 0;
    302 
    303                                 li {
    304                                         float: none;
    305                                         overflow: hidden;
    306 
    307                                         span {
    308                                                 border-radius: 10%;
    309                                                 float: right;
    310                                                 margin-right: 15px;
    311                                         }
    312                                 }
    313                         }
    314                 }
    315 
    316                 #item-body {
    317                         border-left: 1px solid #ddd;
    318                         overflow: hidden;
    319                         padding: 0 $spacing-val-sm;
    320                         width: auto;
    321 
    322                         #subnav {
    323                                 margin: 0 (-$spacing-val-sm);
    324                         }
    325                 }
    326 
    327         } // close .bp-user #buddypress
    328 } // close @media
    329 
    330 /**
    331 *-------------------------------------------------------------------------------
    332 * @section 2.2 - Pagination
    333 *-------------------------------------------------------------------------------
    334 */
    335 
    336 #buddypress {
    337         div.pagination {
    338                 box-shadow: none;
    339                 .pag-count {margin-left: 0;}
    340                 .pagination-links {
    341                         margin-right: 0;
    342 
    343                         span,
    344                         a {
    345                                 height: auto;
    346                                 line-height: 1;
    347                                 padding: 5px;
    348                         }
    349 
    350                         .prev,
    351                         .next {
    352                                 background-color: transparent;
    353                                 color: inherit;
    354                                 overflow: visible;
    355                                 width: auto;
    356                                 &:before {display: none;}
    357                         }
    358 
    359                         .prev {
    360                                 left: auto;
    361                                 position: static;
    362                         }
    363 
    364                         .next {
    365                                 position: static;
    366                                 right: auto;
    367                         }
    368                 } // close .pagination-links
    369         } // close .pagination
    370 } // close #buddypress
    371 
    372 /**
    373 *-------------------------------------------------------------------------------
    374 * @section 4.0 - BP Lists / Loops Generic
    375 *-------------------------------------------------------------------------------
    376 */
    377 
    378 // Trying to position the action div absolute has bad consequences where
    379 // aditional items are displayed, floating is an alternative but may need
    380 // to reconsider this approach. All li items floated left at wide screen.
    381 // Initialy override the BP absolute positioning, allow natural flow position
    382 // mobile up.
    383 
    384 #buddypress {
    385         ul.item-list {
    386                 li {
    387                         overflow: hidden !important;
    388                        
    389                         .item {
    390                                 .item-desc {
    391                                         margin-left: 0;
    392                                         width: auto;
    393                                 }
    394                         }
    395 
    396                         @media screen and (min-width: 59.6875em) {
    397                                 .item-avatar,
    398                                 .item,
    399                                 .action {
    400                                         float: left;
    401                                 }
    402 
    403                                 .item {
    404                                         left: 10%;
    405                                         position: relative;
    406                                         width: 55%;
    407                                 }
    408                         }// close @media
    409                        
    410                         div.action {
    411                                 clear: left;
    412                                 float: none;
    413                                 margin-bottom: -$spacing-val-md;
    414                                 // remove BP margin left
    415                                 margin-left: 0;
    416                                 padding: $spacing-val-md 0 $spacing-val-xs;
    417                                 // push the actions to the right
    418                                 @media screen and (min-width: 59.6875em) {
    419                                         clear: none;
    420                                         float: right;
    421                                         margin-bottom: 0;
    422                                         padding: 0;
    423                                 }
    424                                 position: relative;
    425                                 text-align: left;
    426                                 top: 0;
    427 
    428                                 div {
    429                                         display: inline-block;
    430                                         margin: $spacing-val-sm 0;
    431                                         width: 100%;
    432 
    433                                         a {
    434                                                 display: block;
    435                                                 width: 100%;
    436                                         }
    437                                         // Provisionally lets keep the 'action' div
    438                                         //position but inline-block the buttons
    439                                         @media screen and (min-width: 38.75em) {
    440                                                 // keep buttons to a row small tablet up
    441                                                 margin: 0 $spacing-val-sm $spacing-val-sm 0;
    442                                                 width: auto;
    443                                         } // close @media
    444                                         @media screen and (min-width: 59.6875em) {
    445                                                 // take buttons to block to stack them when floated right
    446                                                 clear: right;
    447                                                 float: right;
    448                                                 margin: 0 0 $spacing-val-sm 0;
    449                                         } // close @media
    450                                        
    451                                 } // close div
    452                                
    453                                 .meta {
    454                                         font-style: italic;
    455                                 }
    456 
    457                         } // close .action
    458 
    459                 } // close li
    460         } // close .item-list
    461 } // close #buddypress
    462 
    463 /**
    464 *-------------------------------------------------------------------------------
    465 * @section 4.1 - Activity
    466 *-------------------------------------------------------------------------------
    467 */
    468 
    469 /**
    470 *-------------------------------------------------------------------------------
    471 * @section 4.1.2 - Activity Whats New
    472 *-------------------------------------------------------------------------------
    473 */
    474 
    475 #buddypress {
    476         form#whats-new-form {
    477                 textarea {width: 100%;}
    478                 // corrective measure for clipped elements due to JS inline styling
    479                 #whats-new-options[style] {
    480                         min-height: 6rem; // unit open to debate px value might be better.
    481                 }
    482         }
    483         // User account form requires matching bp default specificity
    484         #item-body {
    485                 form#whats-new-form {
    486                         margin: $spacing-val-lg 0;
    487                 }
    488         }
    489 } // close #buddypress
    490 
    491 /**
    492 *-------------------------------------------------------------------------------
    493 * @section 4.1.2 - Activity Listing
    494 *-------------------------------------------------------------------------------
    495 */
    496 
    497 #buddypress {
    498         .activity-list {
    499                 .activity-content {
    500                         margin-top: -12px;
    501 
    502                         .activity-header {
    503                                 img.avatar {
    504                                         display: inline-block;
    505                                 }
    506                         } // close .activity-header
    507                 } // close .activity-content
    508                 .load-more a {display: block;}
    509         } // close .activity-list
    510 
    511 } // close #buddypress
    512 
    513 /**
    514 *-------------------------------------------------------------------------------
    515 * @section 4.2 - Members Loop
    516 *-------------------------------------------------------------------------------
    517 */
    518 
    519 #buddypress {
    520         #members-list {
    521                 @media screen and (min-width: 59.6875em) {
    522                         li {
    523                                 .item-avatar,
    524                                 .item {
    525                                         float: left;
    526                                 }
    527 
    528                                 .action {
    529                                         float: right;
    530                                 }
    531                         }
    532                 }
    533         }
    534 } //close #BuddyPress
    535 
    536 /**
    537 *-------------------------------------------------------------------------------
    538 * @section 7.0 - Single User Account Screens
    539 *-------------------------------------------------------------------------------
    540 */
    541 
    542 .bp-user {
    543         .entry-title {margin-bottom: .5em;}
    544        
    545         #buddypress {
    546                 #groups-list {
    547                         li {
    548                                 .item {
    549                                         @media screen and (min-width: 77.5em) {
    550                                                 left: 5%;
    551                                                 width: 50%;
    552                                         }
    553                                 }
    554                         }
    555                 }
    556         }
    557 } // close .bp-user
    558 
    559 /**
    560 *-------------------------------------------------------------------------------
    561 * @section 8.0 - Forms  - General
    562 *-------------------------------------------------------------------------------
    563 */
    564 
    565 // 2015 applies 100% width to form element, remove this initially for BP search
    566 
    567 #buddypress {
    568 
    569         // Manage form control widths under #item-body in user account screens
    570         #item-body {
    571                 .standard-form {
    572                         li {float: none;}
    573                         input[type='text'],
    574                         textarea {
    575                                 width: 100%;
    576                         }
    577                 }
    578         }
    579 
    580         div.dir-search,
    581         div.message-search {
    582                 float: none;
    583                 margin: $spacing-val-sm 0;
    584 
    585                 // Stylise the seach form elements, in part this deals with padding
    586                 // issues on the submit & sizing issues between bp styles & twentyfifteen
    587 
    588                 form { // *sigh* only to bludgeon over specified rules
    589                         border: 1px solid rgba($border-color, 0.4);
    590                         overflow: hidden;
    591 
    592                         label {
    593                                 float: left;
    594                                 width: 80%;
    595                         }
    596 
    597                         input[type='text'] {
    598                                 float: left;
    599                                 margin: 0;
    600                                 width: 80%;
    601                         }
    602 
    603                         input[type='text'],
    604                         input[type='submit'] {
    605                                 @include font-size(14);
    606                                 border: 0;
    607                                 line-height: inherit;
    608                         }
    609 
    610                         input[type='text'] {
    611                                 border-right: 1px solid rgba($border-color, 0.4);
    612                                 padding: 0.2em 0 0.2em 0.2em;
    613                         }
    614 
    615                         input[type='submit'] {
    616                                 float: right;
    617                                 font-weight: normal;
    618                                 padding: 0.2em 1em;
    619                                 text-align: center;
    620                                 text-transform: none;
    621                                 width: 20%;
    622                         }
    623                 }// close form
    624 
    625         } // close .dir-search, .message-search
    626 
    627         // Shift the search parent to the right and allow to shrinkwrap
    628         @media screen and (min-width: 38.75em) {
    629                 div.dir-search,
    630                 div.message-search {
    631                         float: right;
    632                         margin-bottom: 5px !important;
    633 
    634                         form {
    635                                 label,
    636                                 input[type='text'],
    637                                 input[type='submit'] {
    638                                         width: auto;
    639                                 }
    640                         }
    641                 }
    642 
    643                 div.message-search {margin-right: $spacing-val-sm;}
    644         } // close @media
    645 
    646         // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
    647 //      @media screen and (min-width: 59.6875em) {
    648 //              .dir-search,
    649 //       .message-search {
    650         //              form {
    651         //                      input[type='text'] { @include font-size(14) ;}
    652         //                      input[type='submit'] {@include font-size(14);}
    653         //              }
    654         //      }
    655 //      }
    656 
    657         @media screen and (min-width: 77.5em) {
    658 
    659                 .dir-search,
    660                 .message-search {
    661                         form {
    662                                 input[type='text'] { @include font-size(16) ;}
    663                                 input[type='submit'] { @include font-size(16) ;}
    664                         }
    665                 }
    666         }
    667 
    668 } // close #buddypress
    669 
    670 /**
    671 *-------------------------------------------------------------------------------
    672 * @section 9.0 - Tables - General
    673 *-------------------------------------------------------------------------------
    674 */
    675 
    676 // Adjust table font sizes, default too large proportionally
    677 // This approach will require refinement and perhaps re-location to
    678 // a more general typography section to manage BP elements grouped under
    679 // breakpoints. Provide top/bottom margins for tables, lacking in BP styles
    680 #buddypress {
    681         table {
    682                 @include font-size(14);
    683                 margin: $spacing-val-md 0;
    684         }
    685 
    686         @media screen and (min-width: 55em) {
    687                 table {@include font-size(16);}
    688         }
    689 }
    690 
    691 /*__ User Account tables __*/
    692 
    693 #buddypress {
    694 
    695         // Manage some table cells widths that are disproportionate to their content
    696         .notifications,
    697         .messages-notices {
    698                 th {
    699                         width: 30%;
    700 
    701                         &.bulk-select-all {
    702                                 text-align: center;
    703                                 width: 10%;
    704                         }
    705                 }
    706 
    707                 .bulk-select-check {text-align: center;}
    708                 .notification-actions,
    709                 td.thread-options {
    710                         text-align: center;
    711 
    712                         a {
    713                                 display: inline-block;
    714                                 margin: 0;
    715                                 padding: 0;
    716                         }
    717                 }
    718 
    719                 // Notices action buttons, this maybe better moved, temp for now to address
    720                 // styling issues - this will need styling ideas
    721                 td {
    722                         .button {
    723                                 border: 0;
    724                                 display: block;
    725                                 padding: 0;
    726                                 text-align: center;
    727                         }
    728                 }
    729 
    730         } // .notifications, .message-notices
    731 } // #buddypress
     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: 22em) // Additional for xtra small mobile
     15// @media screen and (min-width: 38.75em)
     16// @media screen and (min-width: 46.25em)
     17// @media screen and (min-width: 55em)
     18// @media screen and (min-width: 59.6875em)
     19// @media screen and (min-width: 77.5em)
     20// @media screen and (min-width: 87.6875em)
     21
     22// Mixins and Variabals
     23
     24// Common margin values
     25$spacing-val-lg: 40px;
     26$spacing-val-md: 20px;
     27$spacing-val-sm: 10px;
     28$spacing-val-xs: 5px;
     29
     30// A simple mixin to handle font-sizing to match 2015 62.5% approach
     31@mixin font-size($font-size: 16) {
     32        $rem-font-value: ($font-size / 10);
     33        font-size: ($font-size * 1px);
     34        font-size: $rem-font-value + rem;
     35}
     36// Variabals: color definitions
     37$content-background: #fff;
     38$light-background:   #f7f7f7;
     39$medium-background:  #ccc;
     40$dark-background:    #555;
     41$border-color:       #999; // border color is varied using rgba
     42$border-light:       #eaeaea; // BP dividers
     43$body-text:          #333; // 2015 body text color
     44$bp-button-hover:    #ededed; // this is the default BP button hover background
     45/*--------------------------------------------------------------
     46
     47This is the BuddyPress companion stylesheet for
     48the WordPress Twentyfifteen theme.
     49
     50This sheet supports the primary BuddyPress styles in buddypress.css
     51
     52The Rulesets shadow the BP default stylesheet sectioning
     53to maintain uniformity.
     54
     55If you are running as a child theme of twentyfifteen and wish to use
     56this stylesheet then please copy it to buddypress/css/ or community/css/
     57in your child theme root and rename the file to match your child theme name
     58i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
     59'twentyfifteen-child.css'
     60
     61----------------------------------------------------------------
     62>>> TABLE OF CONTENTS:
     63----------------------------------------------------------------
     641.0 Theme Structural Elements & overrides
     652.0 - Navigation - General
     66        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     67        2.2 - Pagination
     683.0 - Images
     694.0 - BP Lists / Loops Generic
     70        4.1 - Activity Loop
     71                4.1.1 Whats New Activity
     72                4.1.2 - Activity Listing
     73                4.1.3 - Activity Comments
     74        4.2 - Members Loop
     75        4.3 - Groups Loop
     76        4.4 - Blogs Loop
     775.0 - Directories - Members, Groups, Blogs, Forums
     786.0 - Single Group Screens
     797.0 - Single User Account Screens
     80        7.1 - Notifications
     81        7.2 - Private Messaging Threads
     82        7.3 - Extended Profiles
     83        7.4 - Settings
     848.0 - Forms  -  General
     859.0 - Tables -  General
     8610.0 - Error / Success Messages
     8711.0 - Ajax Loading
     8812.0 - Widgets
     89--------------------------------------------------------------*/
     90
     91/**
     92*-------------------------------------------------------------------------------
     93* @section 1.0 - Theme - Structural Elements & overrides
     94*-------------------------------------------------------------------------------
     95*/
     96
     97// Twentyfifteen  adds a generic grouped ruleset of clear:both;
     98// for all heading h# elements this is problematic where floats are concerned
     99// We reset this here under our #buddypress namespace
     100#buddypress {
     101        h1,
     102        h2,
     103        h3,
     104        h4,
     105        h5,
     106        h6 {
     107                clear: none;
     108        }
     109}
     110
     111// As BP screens have specific content lets adjust the themes primary elements
     112// to maximise the screen real estate for BP pages.
     113
     114.buddypress {
     115        div.clear {display: none;}
     116        .site-content {
     117                @media screen and (min-width: 77.5em) {
     118                }
     119        }
     120
     121        main {
     122                padding-top: 4%;
     123                @media screen and (min-width: 59.6875em) {
     124                        padding-top: 0;
     125                }
     126
     127                article {
     128                        margin: 0 4%;
     129                        padding-top: 8.3333%;
     130                        @media screen and (min-width: 59.6875em) {
     131                                margin: 0 0 0 1px;
     132                        }
     133                        @media screen and (min-width: 87.6875em) {
     134                                margin: 0 4.3333% 0 8.3333%;
     135                        }
     136
     137                        .entry-header,
     138                        .entry-content {
     139                                padding: 0 2rem 2rem;
     140                        }
     141
     142                        #buddypress {
     143                                margin-bottom: $spacing-val-lg;
     144                        }
     145                } // .article
     146        } // .main
     147       
     148        .site-footer {
     149                margin: 0 4%;
     150                @media screen and (min-width: 59.6875em) {
     151                        margin: 0 0 0 35.2941%;
     152                        width: 61.8235%;
     153                }
     154        }
     155} // .buddypress (body class)
     156
     157/**
     158*-------------------------------------------------------------------------------
     159* @section 2.0 - Navigation - General
     160*-------------------------------------------------------------------------------
     161*/
     162
     163// Remove 2015 border bottom on BP links/spans
     164
     165.buddypress #buddypress {
     166        .item-list-tabs,
     167        .activity-header,
     168        .activity-inner,
     169        .activity-comments,
     170        .item-title,
     171        .load-more,
     172        .field-visibility-settings-toggle,
     173        #latest-update,
     174        table,
     175        .avatar-nav-items {
     176                a { border-bottom: 0; }
     177        }
     178
     179        .pagination-links {
     180                a,
     181                span { border-bottom: 0; }
     182        }
     183} // close .buddypress #buddypress
     184
     185/**
     186*-------------------------------------------------------------------------------
     187* @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     188*-------------------------------------------------------------------------------
     189*
     190* @description The main navigational elements for BP screens
     191*/
     192
     193// We have a need to override BP specifity
     194// so some rulesets sets are seemingly over weighted in selectors
     195
     196#buddypress {
     197
     198        // active/current states all navs
     199        div.item-list-tabs {
     200                ul {
     201                        li.selected {
     202                                a {
     203                                        background: $dark-background;
     204                                        color: #fff;
     205                                        opacity: 1;
     206                                }
     207                        }
     208                }
     209        }
     210        // Global Nav Styles
     211        div.item-list-tabs {
     212                ul {
     213                        background-color: $light-background;
     214                        border-bottom: 1px solid rgba($border-color, 0.4);
     215                        overflow: hidden;
     216                        padding: $spacing-val-xs 0;
     217                       
     218                        li {
     219                                a {
     220                                        span {border-radius: 25%;}
     221                                }
     222                        }
     223                }
     224        }
     225        /*__ Horizontal menus __*/
     226        #object-nav {
     227                ul {
     228        //              background-color: #eee;
     229        //              border-bottom: 1px solid #ddd;
     230                        overflow: hidden;
     231                        li {float: none;}
     232                        li:not(.selected) {
     233                                a {opacity: 0.7;}
     234                        }
     235
     236                        @media screen and (min-width: 38.75em) {
     237                                li {
     238                                        float: left;
     239                                }
     240                                //      li:nth-child(1n+7) {clear: left;}
     241                        }
     242                }
     243        }
     244
     245        div#subnav.item-list-tabs {
     246                margin-top: 0;
     247
     248                ul {
     249                        background-color: $light-background;
     250                        border-bottom: 0;
     251                        padding: 0;
     252
     253                        li.last {
     254                                background: $content-background;
     255                                margin-top: 0;
     256                                padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
     257                                width: 100%;
     258
     259                                select,
     260                                select:focus {
     261                                        background: transparent;
     262                                        border: 0;
     263                                        outline: 0;
     264                                }
     265
     266                                select,
     267                                label,
     268                                option {
     269                                        @include font-size(14);
     270                                }
     271
     272                                select {
     273                                        font-style: italic;
     274                                }
     275                        }
     276
     277                        @media screen and (min-width: 38.75em) {
     278                                li.last {
     279                                        text-align: right;
     280                                }
     281                        }
     282                } // close ul
     283        } // close #subnav
     284
     285        // active/current states all navs
     286        div.item-list-tabs {
     287                ul {
     288                        li.selected,
     289                        li.current {
     290                                a {
     291                                        background: $dark-background;
     292                                        color: #fff;
     293                                        opacity: 1;
     294                                }
     295                        }
     296                }
     297        }
     298
     299} // close #buddypress
     300
     301        /*__ Vertical menu User account screens __*/
     302
     303// This block contains the rules to re-factor the item-body structural element
     304// to sit alongside the vert menu
     305// Structural layout and faux column styling of backgrounds is more suited
     306// to the earlier section. todo: re-position sort out when known what styles
     307// are being used.
     308
     309@media screen and (min-width: 55em) {
     310        .bp-user #buddypress {
     311                background: $light-background;
     312
     313                #item-header,
     314                #item-body {
     315                        background: $content-background;
     316                }
     317
     318                #object-nav {
     319                        border-right: 1px solid rgba($border-color, .1);
     320                        float: left;
     321                        margin-right: -1px;
     322                        width: 200px;
     323
     324                        ul {
     325                                border-bottom: 0;
     326                                padding: 0;
     327
     328                                li {
     329                                        float: none;
     330                                        overflow: hidden;
     331
     332                                        span {
     333                                                border-radius: 10%;
     334                                                float: right;
     335                                                margin-right: 15px;
     336                                        }
     337                                }
     338                        }
     339                }
     340
     341                #item-body {
     342                        border-left: 1px solid #ddd;
     343                        overflow: hidden;
     344                        padding: 0 $spacing-val-sm;
     345                        width: auto;
     346
     347                        #subnav {
     348                                margin: 0 (-$spacing-val-sm);
     349                        }
     350                }
     351
     352        } // close .bp-user #buddypress
     353} // close @media
     354
     355/**
     356*-------------------------------------------------------------------------------
     357* @section 2.2 - Pagination
     358*-------------------------------------------------------------------------------
     359*/
     360
     361#buddypress {
     362        div.pagination {
     363                box-shadow: none;
     364                .pag-count {margin-left: 0;}
     365                .pagination-links {
     366                        margin-right: 0;
     367
     368                        span,
     369                        a {
     370                                height: auto;
     371                                line-height: 1;
     372                                padding: 5px;
     373                        }
     374
     375                        .prev,
     376                        .next {
     377                                background-color: transparent;
     378                                color: inherit;
     379                                overflow: visible;
     380                                width: auto;
     381                                &:before {display: none;}
     382                        }
     383
     384                        .prev {
     385                                left: auto;
     386                                position: static;
     387                        }
     388
     389                        .next {
     390                                position: static;
     391                                right: auto;
     392                        }
     393                } // close .pagination-links
     394        } // close .pagination
     395} // close #buddypress
     396
     397/**
     398*-------------------------------------------------------------------------------
     399* @section 4.0 - BP Lists / Loops Generic
     400*-------------------------------------------------------------------------------
     401*/
     402
     403// Trying to position the action div absolute has bad consequences where
     404// aditional items are displayed, floating is an alternative that
     405// allows natural flow expansion.
     406// This block:
     407// * Manages li items, Stacks them small screen, floated left at wider screens.
     408// * Adjusts display of action buttons at small screen
     409// mobile up.
     410
     411#buddypress {
     412        ul.item-list {
     413                li {
     414                        overflow: hidden !important;
     415                        // Undo BP floats to center avatars initially mobile up
     416                        .item-avatar {
     417                                margin-bottom: $spacing-val-sm;
     418                                @media screen and (min-width: 38.75em) { margin-bottom: 0; }
     419                                text-align: center;
     420                                a {border-bottom: 0;}
     421                                img.avatar {
     422                                        display: inline-block;
     423                                        float: none;                   
     424                                        // Quite early on we need to move avatars to the left(right)
     425                                        @media screen and (min-width: 38.75em) {
     426                                                display: block;
     427                                                float: left;
     428                                        }
     429                                }
     430                        }
     431                       
     432                        .item {
     433                                margin-left: 25%;
     434                               
     435                                span.activity {font-style: italic;}
     436                               
     437                                .item-desc {
     438                                        margin-left: 0;
     439                                        width: 70%;
     440                                }
     441                        }
     442
     443                        @media screen and (min-width: 59.6875em) {
     444                                .item-avatar,
     445                                .item,
     446                                .action {
     447                                        float: left;
     448                                }
     449
     450                                .item {
     451                                        left: 10%;
     452                                        margin-left: 0;
     453                                        position: relative;
     454                                        width: 55%;
     455                                }
     456                        }// close @media
     457                       
     458                        div.action {
     459                                clear: left;
     460                                float: none;
     461                                margin-bottom: -$spacing-val-md;
     462                                // remove BP margin left
     463                                margin-left: 0;
     464                                padding: $spacing-val-md 0 $spacing-val-xs;
     465                                // push the actions to the right
     466                                @media screen and (min-width: 59.6875em) {
     467                                        clear: none;
     468                                        float: right;
     469                                        margin-bottom: 0;
     470                                        padding: 0;
     471                                }
     472                                position: relative;
     473                                text-align: left;
     474                                top: 0;
     475
     476                                div {
     477                                        display: inline-block;
     478                                        margin: $spacing-val-sm 0;
     479                                        width: 100%;
     480
     481                                        a {
     482                                                display: block;
     483                                                width: 100%;
     484                                        }
     485                                        // Provisionally lets keep the 'action' div
     486                                        //position but inline-block the buttons
     487                                        @media screen and (min-width: 38.75em) {
     488                                                // keep buttons to a row small tablet up
     489                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
     490                                                width: auto;
     491                                        } // close @media
     492                                        @media screen and (min-width: 59.6875em) {
     493                                                // take buttons to block to stack them when floated right
     494                                                clear: right;
     495                                                float: right;
     496                                                margin: 0 0 $spacing-val-sm 0;
     497                                        } // close @media
     498                                       
     499                                } // close div
     500                               
     501                                .meta {
     502                                        font-style: italic;
     503                                }
     504
     505                        } // close .action
     506
     507                } // close li
     508        } // close .item-list
     509} // close #buddypress
     510
     511/**
     512*-------------------------------------------------------------------------------
     513* @section 4.1 - Activity
     514*-------------------------------------------------------------------------------
     515*/
     516
     517/**
     518*-------------------------------------------------------------------------------
     519* @section 4.1.1 - Activity Whats New
     520*-------------------------------------------------------------------------------
     521*/
     522
     523#buddypress {
     524        form#whats-new-form {
     525                textarea {width: 100%;}
     526                // corrective measure for clipped elements due to JS inline styling
     527                #whats-new-options[style] {
     528                        min-height: 6rem; // unit open to debate px value might be better.
     529                }
     530        }
     531        // User account form requires matching bp default specificity
     532        #item-body {
     533                form#whats-new-form {
     534                        margin: $spacing-val-lg 0;
     535                }
     536        }
     537} // close #buddypress
     538
     539/**
     540*-------------------------------------------------------------------------------
     541* @section 4.1.2 - Activity Listing
     542*-------------------------------------------------------------------------------
     543*/
     544
     545#buddypress {
     546
     547        .activity-list {
     548               
     549                // re-size activity avatars
     550                li {
     551                        .activity-avatar {
     552                                a {
     553                                        img.avatar {
     554                                                height: 60px;
     555                                                margin-left: 0;
     556                                                width: 60px;
     557                                        }
     558                                }
     559                        }
     560                }
     561               
     562                li.mini {
     563                        .activity-avatar {
     564                                a {
     565                                        img.avatar {
     566                                                height: 30px;
     567                                                margin-left: 15px;
     568                                                width: 30px;
     569                                        }
     570                                }
     571                        }
     572
     573                        .activity-content {
     574                                .activity-header {
     575                                        @include font-size(13);
     576                                }
     577                        }                               
     578                }
     579               
     580                .activity-content {
     581                        margin-top: -12px;
     582
     583                        .activity-header {
     584                                @include font-size(16);
     585                                line-height: inherit;
     586                                margin-right: 0;
     587                               
     588                                p {
     589                                        background-color: $light-background;
     590                                        border: 1px solid rgba($border-light, .6);
     591                                        padding: 0 .2em;
     592                                }
     593                               
     594                                img.avatar {
     595                                        display: inline-block;
     596                                        margin-bottom: 0 !important; // have to match to BP
     597                                }
     598                        } // close .activity-header
     599                        .activity-meta {
     600                                a {
     601                                        display: block;
     602                                        margin-bottom: $spacing-val-xs;
     603                                        @media screen and (min-width: 38.75em) {
     604                                                display: inline-block;
     605                                                margin-bottom: 0;
     606                                        }
     607                                }
     608                        }
     609
     610                } // close .activity-content
     611               
     612                .load-more a {display: block;}
     613       
     614        } // close .activity-list
     615} // close #buddypress
     616
     617/**
     618*-------------------------------------------------------------------------------
     619* @section 4.1.3 - Activity Comments
     620*-------------------------------------------------------------------------------
     621*/
     622#buddypress {
     623        .activity {
     624                .activity-comments {
     625                        border-left: 1px solid $border-light;
     626                        margin-top: 5px;
     627                       
     628                        ul {
     629                                background: rgba($light-background, .6);
     630                                margin: 30px 0 0 2px;
     631                        }
     632               
     633                        .ac-form {
     634                       
     635                                input[type="submit"],
     636                                .ac-reply-cancel {
     637                                        color: rgba($body-text, .8);
     638                                        display: inline-block;
     639                                        font-family: inherit;
     640                                        @include font-size(12);
     641                                        font-weight: normal;
     642                                        line-height: 1.2;
     643                                        padding: 4px 10px;
     644                                        text-transform: lowercase;
     645                                        width: 100px;
     646                                }
     647                               
     648                                .ac-reply-cancel {
     649                                        border: 1px solid rgba($border-color, .7);
     650                                        text-align: center;
     651                                       
     652                                        &:focus,
     653                                        &:hover {
     654                                                background: $bp-button-hover;
     655                                        }
     656                                }
     657
     658                        } // close .ac-form
     659
     660                } // close .activity-comments
     661        } // close .activity
     662
     663} // close #buddypress
     664
     665/**
     666*-------------------------------------------------------------------------------
     667* @section 4.2 - Members Loop
     668*-------------------------------------------------------------------------------
     669*/
     670
     671#buddypress {
     672        #members-list {
     673       
     674                @media screen and (min-width: 59.6875em) {
     675                        li {
     676                                .item-avatar,
     677                                .item {
     678                                        float: left;
     679                                }
     680
     681                                .action {
     682                                        float: right;
     683                                }
     684                        }
     685                }
     686/*
     687                li {
     688                        .item {
     689                                .update {
     690                                        border-left: 1px solid rgba($border-color, .4);
     691                                        display: block;
     692                                        margin: .5em 0;
     693                                        padding-left: .3em;
     694                                }
     695                        }
     696                }
     697*/
     698        } // close #members-list
     699} //close #BuddyPress
     700
     701/**
     702*-------------------------------------------------------------------------------
     703* @section 7.0 - Single User Account Screens
     704*-------------------------------------------------------------------------------
     705*/
     706
     707.bp-user {
     708        .entry-title {margin-bottom: .5em;}
     709       
     710        #buddypress {
     711       
     712        /* General elements & classes, pagination, filters */
     713       
     714                table {
     715                        th {@include font-size(14)}
     716                        td {@include font-size(12)}
     717               
     718                        @media screen and (min-width: 46.25em) {
     719                                th {@include font-size(16)}
     720                                td {@include font-size(14)}
     721                        }
     722               
     723                        @media screen and (min-width: 77.5em) {
     724                                th {@include font-size(18)}
     725                                td {@include font-size(16)}
     726                        }
     727                }
     728       
     729                .pag-count {font-style: italic;}
     730               
     731                .notifications-options-nav {
     732                        border: 1px solid rgba($border-color, .5);
     733                        float: left;
     734                        width: 100%;
     735                        @media screen and (min-width: 38.75em) {
     736                                width: 300px;
     737                        }
     738
     739                        select,
     740                        input {
     741                                border: 0;
     742                                @include font-size(14);
     743                                outline: 0;
     744                                padding: 0;
     745                        }               
     746
     747                        select {
     748                                float: left;
     749                                margin-right: 0;
     750                                width: 60%;
     751                        }
     752
     753                        input {
     754                                float: right;
     755                                font-family: inherit;
     756                                line-height: 20px;
     757                                width: 40%;
     758                        }
     759
     760                } // close .notifications-options-nav
     761       
     762        /* Item Header */
     763       
     764                #item-header {
     765                        padding: $spacing-val-md 0;
     766               
     767                        #item-header-avatar {
     768                                text-align: center;
     769                                width: 100%;
     770
     771                                img.avatar,
     772                                a {
     773                                        border-bottom: 0;
     774                                        display: inline-block;
     775                                        float: none;
     776                                }
     777                        }
     778
     779                        @media screen and (min-width: 46.25em) {
     780                                #item-header-avatar {           
     781                                        float: left;
     782                                        width: 20%;
     783                               
     784                                        img.avatar,
     785                                        a {
     786                                                float: left;
     787                                                width: 100%;
     788                                        }
     789                                }
     790               
     791                                #item-header-content {
     792                                        float: right;
     793                                        margin-right: 5%;
     794                                        width: 69%;
     795                                }
     796       
     797                        } // close @media
     798               
     799                } // close #item-header
     800       
     801        /* Profile */
     802                .profile {
     803                        .bp-widget {
     804                                h4 {
     805                                        background: rgba($dark-background, .8);
     806                                        color: #fff;
     807                                        margin-bottom: 0;
     808                                        padding: .4em;
     809                                }
     810
     811                                table {margin-top: 0;}
     812                        }
     813                } // close .profile
     814               
     815                .bp-avatar-nav {
     816                        ul:before,
     817                        ul:after {
     818                                content: " ";
     819                                display: table;
     820                        }
     821                               
     822                        ul:after {
     823                                clear: both;
     824                        }
     825                               
     826                        ul {
     827                                border-bottom: 1px solid rgba($border-color, .5);
     828                                margin-bottom: $spacing-val-md;
     829                                       
     830                                li.current {
     831                                        border: 1px solid rgba($border-color, .5);
     832                                        border-bottom-color: #fff;
     833                                        border-top-left-radius: 4px;
     834                                        border-top-right-radius: 4px;
     835                                        margin-bottom: -1px;                           
     836                                               
     837                                        a {
     838                                                background: none;
     839                                                outline: 0;
     840                                        }
     841                                } // close li.current
     842                        }
     843                } // .bp-avatar-nav
     844               
     845                /* Groups */
     846               
     847                #groups-list {
     848                        li {
     849                                .item {
     850                                        @media screen and (min-width: 77.5em) {
     851                                                left: 5%;
     852                                                width: 50%;
     853                                        }
     854                                }
     855                        }
     856                }
     857       
     858        /* Messages / Notifications */
     859
     860        } // close #BuddyPress
     861
     862} // close .bp-user
     863
     864/**
     865*-------------------------------------------------------------------------------
     866* @section 8.0 - Forms  - General
     867*-------------------------------------------------------------------------------
     868*/
     869
     870// Match BP form elements to Themes(2015) styling where styles
     871// are not inherited or being overriden.
     872#buddypress {
     873       
     874        div.activity-comments {
     875                form {
     876                        .ac-textarea {
     877                                background: $light-background;
     878                                border: 1px solid rgba($border-color, .3);
     879                               
     880                                textarea {
     881                                        background: none;
     882                                        border: 0;
     883                                }
     884                        }
     885                }
     886        }
     887
     888        select {border: 1px solid rgba($border-color, .5);}
     889
     890} // close #buddypress
     891
     892// 2015 applies 100% width to form element, remove this initially for BP search
     893
     894#buddypress {
     895
     896        // Manage form control widths under #item-body in user account screens
     897        #item-body {
     898                .standard-form {
     899                        li {float: none;}
     900                        input[type='text'],
     901                        textarea {
     902                                width: 100%;
     903                        }
     904                }
     905        }
     906
     907        div.dir-search,
     908        div.message-search {
     909                float: none;
     910                margin: $spacing-val-sm 0;
     911
     912                // Stylise the seach form elements, in part this deals with padding
     913                // issues on the submit & sizing issues between bp styles & twentyfifteen
     914
     915                form { // *sigh* only to bludgeon over specified rules
     916                        border: 1px solid rgba($border-color, 0.4);
     917                        overflow: hidden;
     918
     919                        label {
     920                                float: left;
     921                                width: 80%;
     922                        }
     923
     924                        input[type='text'] {
     925                                float: left;
     926                                margin: 0;
     927                                width: 80%;
     928                        }
     929
     930                        input[type='text'],
     931                        input[type='submit'] {
     932                                @include font-size(14);
     933                                border: 0;
     934                                line-height: inherit;
     935                        }
     936
     937                        input[type='text'] {
     938                                border-right: 1px solid rgba($border-color, 0.4);
     939                                padding: 0.2em 0 0.2em 0.2em;
     940                        }
     941
     942                        input[type='submit'] {
     943                                float: right;
     944                                font-weight: normal;
     945                                padding: 0.2em 1em;
     946                                text-align: center;
     947                                text-transform: none;
     948                                width: 20%;
     949                        }
     950                }// close form
     951
     952        } // close .dir-search, .message-search
     953
     954        // Shift the search parent to the right and allow to shrinkwrap
     955        @media screen and (min-width: 38.75em) {
     956                div.dir-search,
     957                div.message-search {
     958                        float: right;
     959                        margin-bottom: 5px !important;
     960
     961                        form {
     962                                label,
     963                                input[type='text'],
     964                                input[type='submit'] {
     965                                        width: auto;
     966                                }
     967                        }
     968                }
     969
     970                div.message-search {margin-right: $spacing-val-sm;}
     971        } // close @media
     972
     973        // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     974//      @media screen and (min-width: 59.6875em) {
     975//              .dir-search,
     976//       .message-search {
     977        //              form {
     978        //                      input[type='text'] { @include font-size(14) ;}
     979        //                      input[type='submit'] {@include font-size(14);}
     980        //              }
     981        //      }
     982//      }
     983
     984        @media screen and (min-width: 77.5em) {
     985
     986                .dir-search,
     987                .message-search {
     988                        form {
     989                                input[type='text'] { @include font-size(16) ;}
     990                                input[type='submit'] { @include font-size(16) ;}
     991                        }
     992                }
     993        }
     994
     995} // close #buddypress
     996
     997/**
     998*-------------------------------------------------------------------------------
     999* @section 9.0 - Tables - General
     1000*-------------------------------------------------------------------------------
     1001*/
     1002
     1003// Adjust table font sizes, default too large proportionally
     1004// This approach will require refinement and perhaps re-location to
     1005// a more general typography section to manage BP elements grouped under
     1006// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     1007#buddypress {
     1008        table {
     1009                @include font-size(14);
     1010                margin: $spacing-val-md 0;
     1011        }
     1012
     1013        @media screen and (min-width: 55em) {
     1014                table {@include font-size(16);}
     1015        }
     1016}
     1017
     1018/*__ User Account tables __*/
     1019
     1020#buddypress {
     1021
     1022        // Manage some table cells widths that are disproportionate to their content
     1023        .notifications,
     1024        .messages-notices {
     1025                th {
     1026                        width: 30%;
     1027
     1028                        &.bulk-select-all {
     1029                                text-align: center;
     1030                                width: 10%;
     1031                        }
     1032                }
     1033
     1034                .bulk-select-check {text-align: center;}
     1035                .notification-actions,
     1036                td.thread-options {
     1037                        text-align: center;
     1038
     1039                        a {
     1040                                display: inline-block;
     1041                                margin: 0;
     1042                                padding: 0;
     1043                        }
     1044                }
     1045
     1046                // Notices action buttons, this maybe better moved, temp for now to address
     1047                // styling issues - this will need styling ideas
     1048                td {
     1049                        .button {
     1050                                border: 0;
     1051                                display: block;
     1052                                padding: 0;
     1053                                text-align: center;
     1054                        }
     1055                }
     1056
     1057        } // .notifications, .message-notices
     1058} // #buddypress