Skip to:
Content

BuddyPress.org

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

File twentyfifteen-comp-style.02.patch, 26.9 KB (added by hnla, 10 years ago)

Latest revision of core scss file, with essential style corrections.

  • src/bp-templates/bp-legacy/css/twentyfifteen.css

     
     1/*--------------------------------------------------------------
     2
     3This is the BuddyPress companion stylesheet for
     4the WordPress Twentyfifteen theme.
     5
     6This sheet supports the primary BuddyPress styles in buddypress.css
     7
     8The Rulesets shadow the BP default stylesheet sectioning
     9to maintain uniformity.
     10
     11----------------------------------------------------------------
     12>>> TABLE OF CONTENTS:
     13----------------------------------------------------------------
     141.0 Theme Structural Elements
     152.0 - Navigation - General
     16        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     17        2.2 - Pagination
     183.0 - Images
     194.0 - BP Lists / Loops Generic
     20        4.1 - Activity Loop
     21                4.1.1 - Activity Listing
     22                4.1.2 - Activity Comments
     23        4.2 - Members Loop
     24        4.3 - Groups Loop
     25        4.4 - Blogs Loop
     265.0 - Directories - Members, Groups, Blogs, Forums
     276.0 - Single Group Screens
     287.0 - Single User Account Screens
     29        7.1 - Notifications
     30        7.2 - Private Messaging Threads
     31        7.3 - Extended Profiles
     32        7.4 - Settings 
     338.0 - Forms  -  General
     349.0 - Tables -  General
     3510.0 - Error / Success Messages
     3611.0 - Ajax Loading
     3712.0 - Widgets
     38--------------------------------------------------------------*/
     39/*--------------------------------------------------------------
     401.0 - Theme - Structural Elements
     41--------------------------------------------------------------*/
     42.buddypress main {
     43  padding-top: 4%;
     44}
     45@media screen and (min-width: 59.6875em) {
     46  .buddypress main {
     47    padding-top: 0;
     48  }
     49}
     50.buddypress main article {
     51  margin: 0 4%;
     52  padding-top: 8.3333%;
     53}
     54@media screen and (min-width: 59.6875em) {
     55  .buddypress main article {
     56    margin: 0 0 0 1px;
     57  }
     58}
     59@media screen and (min-width: 87.6875em) {
     60  .buddypress main article {
     61    margin: 0  4.3333% 0 8.3333%;
     62  }
     63}
     64.buddypress main article .entry-header,
     65.buddypress main article .entry-content {
     66  padding: 0 2rem 2rem;
     67}
     68.buddypress main article #buddypress {
     69  margin-bottom: 40px;
     70}
     71.buddypress .site-footer {
     72  margin: 0 4%;
     73}
     74@media screen and (min-width: 59.6875em) {
     75  .buddypress .site-footer {
     76    margin: 0 0 0 35.2941%;
     77    width: 61.8235%;
     78  }
     79}
     80
     81/*--------------------------------------------------------------
     822.0 - Navigation - General
     83--------------------------------------------------------------*/
     84.buddypress #buddypress .item-list-tabs a,
     85.buddypress #buddypress .activity-header a,
     86.buddypress #buddypress .activity-inner a,
     87.buddypress #buddypress .activity-comments a,
     88.buddypress #buddypress .item-title a,
     89.buddypress #buddypress .load-more a,
     90.buddypress #buddypress .field-visibility-settings-toggle a,
     91.buddypress #buddypress #latest-update a,
     92.buddypress #buddypress table a {
     93  border-bottom: 0;
     94}
     95.buddypress #buddypress .pagination-links a,
     96.buddypress #buddypress .pagination-links span {
     97  border-bottom: 0;
     98}
     99
     100/*--------------------------------------------------------------
     1012.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     102--------------------------------------------------------------*/
     103#buddypress {
     104  /*__ Horizontal menus __*/
     105}
     106#buddypress div.item-list-tabs ul li.selected a {
     107  background: #555;
     108  color: #fff;
     109  opacity: 1;
     110}
     111#buddypress div.item-list-tabs ul {
     112  background-color: #eee;
     113  border-bottom: 1px solid #ddd;
     114  overflow: hidden;
     115  padding: 5px 0;
     116}
     117#buddypress #object-nav ul {
     118  overflow: hidden;
     119}
     120#buddypress #object-nav ul li {
     121  float: none;
     122}
     123#buddypress #object-nav ul li:not(.selected) a {
     124  opacity: .7;
     125}
     126@media screen and (min-width: 38.75em) {
     127  #buddypress #object-nav ul li {
     128    float: left;
     129  }
     130}
     131#buddypress div#subnav.item-list-tabs {
     132  margin-top: 0;
     133}
     134#buddypress div#subnav.item-list-tabs ul {
     135  background-color: #F2F2F2;
     136  border-bottom: none;
     137  padding: 0;
     138}
     139#buddypress div#subnav.item-list-tabs ul li.last {
     140  background: #fff;
     141  margin-top: 0;
     142  width: 100%;
     143  padding: 5px 5px 5px 0;
     144}
     145#buddypress div#subnav.item-list-tabs ul li.last select, #buddypress div#subnav.item-list-tabs ul li.last select:focus {
     146  border: none;
     147  background: transparent;
     148  outline: 0;
     149}
     150@media screen and (min-width: 38.75em) {
     151  #buddypress div#subnav.item-list-tabs ul li.last {
     152    text-align: right;
     153  }
     154}
     155#buddypress div.item-list-tabs ul li.selected a, #buddypress div.item-list-tabs ul li.current a {
     156  background: #555;
     157  color: #fff;
     158  opacity: 1;
     159}
     160
     161/*__ Vertical menu User account screens __*/
     162@media screen and (min-width: 55em) {
     163  .bp-user #buddypress {
     164    background: #eee;
     165  }
     166  .bp-user #buddypress #item-header, .bp-user #buddypress #item-body {
     167    background: #fff;
     168  }
     169  .bp-user #buddypress #object-nav {
     170    border-right: 1px solid #ddd;
     171    float: left;
     172    margin-right: -1px;
     173    width: 200px;
     174  }
     175  .bp-user #buddypress #object-nav ul {
     176    border-bottom: none;
     177    padding: 0;
     178  }
     179  .bp-user #buddypress #object-nav ul li {
     180    float: none;
     181    overflow: hidden;
     182  }
     183  .bp-user #buddypress #object-nav ul li span {
     184    border-radius: 10%;
     185    float: right;
     186    margin-right: 15px;
     187  }
     188  .bp-user #buddypress #item-body {
     189    border-left: 1px solid #ddd;
     190    overflow: hidden;
     191    padding: 0 10px;
     192    width: auto;
     193  }
     194  .bp-user #buddypress #item-body #subnav {
     195    margin: 0 -10px;
     196  }
     197}
     198/*--------------------------------------------------------------
     1992.2 - Pagination
     200--------------------------------------------------------------*/
     201#buddypress div.pagination {
     202  box-shadow: none;
     203}
     204#buddypress div.pagination .pagination-links {
     205  margin-right: 0;
     206}
     207#buddypress div.pagination .pagination-links span,
     208#buddypress div.pagination .pagination-links a {
     209  height: auto;
     210  line-height: 1;
     211  padding: 5px;
     212}
     213#buddypress div.pagination .pagination-links .prev,
     214#buddypress div.pagination .pagination-links .next {
     215  background-color: transparent;
     216  color: inherit;
     217  overflow: visible;
     218  width: auto;
     219}
     220#buddypress div.pagination .pagination-links .prev:before,
     221#buddypress div.pagination .pagination-links .next:before {
     222  display: none;
     223}
     224#buddypress div.pagination .pagination-links .prev {
     225  position: static;
     226  left: auto;
     227}
     228#buddypress div.pagination .pagination-links .next {
     229  position: static;
     230  right: auto;
     231}
     232
     233/*--------------------------------------------------------------
     2344.0 - BP Lists / Loops Generic
     235--------------------------------------------------------------*/
     236#buddypress ul.item-list li {
     237  overflow: hidden !important;
     238}
     239#buddypress ul.item-list li div.action {
     240  clear: left;
     241  margin-top: 20px;
     242  position: relative;
     243  text-align: left;
     244  top: 0;
     245}
     246@media screen and (min-width: 77.5em) {
     247  #buddypress ul.item-list li div.action {
     248    float: right;
     249    margin-top: -70px;
     250  }
     251}
     252#buddypress ul.item-list li div.action div {
     253  margin: 4px 0;
     254}
     255@media screen and (min-width: 55em) {
     256  #buddypress ul.item-list li div.action div {
     257    display: inline-block;
     258    margin-right: 5px;
     259  }
     260}
     261@media screen and (min-width: 77.5em) {
     262  #buddypress ul.item-list li div.action div {
     263    clear: right;
     264    display: block;
     265    float: right;
     266  }
     267}
     268
     269/*--------------------------------------------------------------
     2704.1 - Activity
     271--------------------------------------------------------------*/
     272/*--------------------------------------------------------------
     2734.1.2 - Activity Whats New
     274--------------------------------------------------------------*/
     275#buddypress form#whats-new-form textarea {
     276  width: 100%;
     277}
     278#buddypress form#whats-new-form #whats-new-options[style] {
     279  min-height: 6rem;
     280}
     281#buddypress #item-body form#whats-new-form {
     282  margin: 40px 0;
     283}
     284
     285/*--------------------------------------------------------------
     2864.1.2 - Activity Listing
     287--------------------------------------------------------------*/
     288#buddypress .activity-list .activity-content {
     289  margin-top: -12px;
     290}
     291#buddypress .activity-list .activity-content .activity-header img.avatar {
     292  display: inline-block;
     293}
     294#buddypress .activity-list .load-more a {
     295  display: block;
     296}
     297
     298/*--------------------------------------------------------------
     2997.0 - Single User Account Screens
     300--------------------------------------------------------------*/
     301/*--------------------------------------------------------------
     3028.0 - Forms  - General
     303--------------------------------------------------------------*/
     304#buddypress #item-body .standard-form li {
     305  float: none;
     306}
     307#buddypress #item-body .standard-form input[type='text'],
     308#buddypress #item-body .standard-form textarea {
     309  width: 100%;
     310}
     311#buddypress div.dir-search,
     312#buddypress div.message-search {
     313  float: none;
     314  margin: 10px 0;
     315}
     316#buddypress div.dir-search form,
     317#buddypress div.message-search form {
     318  border: 1px solid #ccc;
     319  overflow: hidden;
     320}
     321#buddypress div.dir-search form label,
     322#buddypress div.message-search form label {
     323  float: left;
     324  width: 80%;
     325}
     326#buddypress div.dir-search form input[type='text'],
     327#buddypress div.message-search form input[type='text'] {
     328  float: left;
     329  width: 80%;
     330  margin: 0;
     331}
     332#buddypress div.dir-search form input[type='text'],
     333#buddypress div.dir-search form input[type='submit'],
     334#buddypress div.message-search form input[type='text'],
     335#buddypress div.message-search form input[type='submit'] {
     336  border: none;
     337  font-size: 14px;
     338  font-size: 1.4rem;
     339  line-height: inherit;
     340}
     341#buddypress div.dir-search form input[type='text'],
     342#buddypress div.message-search form input[type='text'] {
     343  border-right: 1px solid #ccc;
     344  padding: .2em 0 .2em .2em;
     345}
     346#buddypress div.dir-search form input[type='submit'],
     347#buddypress div.message-search form input[type='submit'] {
     348  font-weight: normal;
     349  float: right;
     350  padding: .2em 1em;
     351  text-align: center;
     352  text-transform: none;
     353  width: 20%;
     354}
     355@media screen and (min-width: 38.75em) {
     356  #buddypress div.dir-search,
     357  #buddypress div.message-search {
     358    float: right;
     359    margin-bottom: 5px !important;
     360  }
     361  #buddypress div.dir-search form label,
     362  #buddypress div.dir-search form input[type='text'],
     363  #buddypress div.dir-search form input[type='submit'],
     364  #buddypress div.message-search form label,
     365  #buddypress div.message-search form input[type='text'],
     366  #buddypress div.message-search form input[type='submit'] {
     367    width: auto;
     368  }
     369  #buddypress div.message-search {
     370    margin-right: 10px;
     371  }
     372}
     373@media screen and (min-width: 77.5em) {
     374  #buddypress .dir-search form input[type='text'], #buddypress .message-search form input[type='text'] {
     375    font-size: 16px;
     376    font-size: 1.6rem;
     377  }
     378  #buddypress .dir-search form input[type='submit'], #buddypress .message-search form input[type='submit'] {
     379    font-size: 16px;
     380    font-size: 1.6rem;
     381  }
     382}
     383
     384/*--------------------------------------------------------------
     3859.0 - Tables - General
     386--------------------------------------------------------------*/
     387#buddypress table {
     388  font-size: 14px;
     389  font-size: 1.4rem;
     390}
     391@media screen and (min-width: 55em) {
     392  #buddypress table {
     393    font-size: 16px;
     394    font-size: 1.6rem;
     395  }
     396}
     397
     398/*__ User Account tables __*/
     399#buddypress .notifications th,
     400#buddypress .messages-notices th {
     401  width: 30%;
     402}
     403#buddypress .notifications th.bulk-select-all,
     404#buddypress .messages-notices th.bulk-select-all {
     405  text-align: center;
     406  width: 10%;
     407}
     408#buddypress .notifications .bulk-select-check,
     409#buddypress .messages-notices .bulk-select-check {
     410  text-align: center;
     411}
     412#buddypress .notifications .notification-actions,
     413#buddypress .notifications td.thread-options,
     414#buddypress .messages-notices .notification-actions,
     415#buddypress .messages-notices td.thread-options {
     416  text-align: center;
     417}
     418#buddypress .notifications .notification-actions a,
     419#buddypress .notifications td.thread-options a,
     420#buddypress .messages-notices .notification-actions a,
     421#buddypress .messages-notices td.thread-options a {
     422  display: inline-block;
     423  margin: 0;
     424  padding: 0;
     425}
     426#buddypress .notifications td .button,
     427#buddypress .messages-notices td .button {
     428  border: none;
     429  display: block;
     430  padding: 0;
     431  text-align: center;
     432}
     433
     434/*# 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        $RemFontValue: ($font-size / 10);
     32        font-size: ($font-size * 1px);
     33        font-size: $RemFontValue + rem;
     34}
     35/*--------------------------------------------------------------
     36
     37This is the BuddyPress companion stylesheet for
     38the WordPress Twentyfifteen theme.
     39
     40This sheet supports the primary BuddyPress styles in buddypress.css
     41
     42The Rulesets shadow the BP default stylesheet sectioning
     43to maintain uniformity.
     44
     45----------------------------------------------------------------
     46>>> TABLE OF CONTENTS:
     47----------------------------------------------------------------
     481.0 Theme Structural Elements
     492.0 - Navigation - General
     50        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     51        2.2 - Pagination
     523.0 - Images
     534.0 - BP Lists / Loops Generic
     54        4.1 - Activity Loop
     55                4.1.1 - Activity Listing
     56                4.1.2 - Activity Comments
     57        4.2 - Members Loop
     58        4.3 - Groups Loop
     59        4.4 - Blogs Loop
     605.0 - Directories - Members, Groups, Blogs, Forums
     616.0 - Single Group Screens
     627.0 - Single User Account Screens
     63        7.1 - Notifications
     64        7.2 - Private Messaging Threads
     65        7.3 - Extended Profiles
     66        7.4 - Settings 
     678.0 - Forms  -  General
     689.0 - Tables -  General
     6910.0 - Error / Success Messages
     7011.0 - Ajax Loading
     7112.0 - Widgets
     72--------------------------------------------------------------*/
     73
     74/*--------------------------------------------------------------
     751.0 - Theme - Structural Elements
     76--------------------------------------------------------------*/
     77
     78// As BP screens have specific content lets adjust the themes primary elements
     79// to maximise the screen real estate for BP pages.
     80
     81.buddypress {
     82                .site-content {
     83                        @media screen and ( min-width: 77.5em ) {
     84                        }
     85                }
     86         main {
     87                        padding-top: 4%;
     88                        @media screen and ( min-width: 59.6875em ) {
     89                                padding-top: 0;
     90                        }
     91                        article {
     92                                margin: 0 4%;
     93                                padding-top: 8.3333%;           
     94                                        @media screen and ( min-width: 59.6875em ) {
     95                                                margin: 0 0 0 1px;
     96                                        }
     97                                        @media screen and ( min-width: 87.6875em ) {
     98                                                margin: 0  4.3333% 0 8.3333%;
     99                                        }
     100                                        .entry-header,
     101                                        .entry-content {
     102                                                padding: 0 2rem 2rem;
     103                                        }
     104                                        #buddypress {
     105                                                margin-bottom: $spacing-val-lg;
     106                                        }
     107                        } // .article
     108                } // .main
     109                .site-footer {
     110                        margin: 0 4%;
     111                        @media screen and ( min-width: 59.6875em ) {
     112                                margin: 0 0 0 35.2941%;
     113                                width: 61.8235%;
     114                        }
     115                }
     116} // .buddypress ( body class )
     117
     118/*--------------------------------------------------------------
     1192.0 - Navigation - General
     120--------------------------------------------------------------*/
     121
     122// Remove 2015 border bottom on BP links/spans
     123.buddypress #buddypress {
     124        .item-list-tabs,
     125        .activity-header,
     126        .activity-inner,
     127        .activity-comments,
     128        .item-title,
     129        .load-more,
     130        .field-visibility-settings-toggle,
     131        #latest-update,
     132        table, {
     133                a { border-bottom: 0; }
     134        }       
     135        .pagination-links {
     136                a,
     137                span { border-bottom: 0; }
     138        }
     139} // close .buddypress #buddypress
     140
     141/*--------------------------------------------------------------
     1422.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     143--------------------------------------------------------------*/
     144// The main navigational elements for BP screens
     145
     146
     147// We have a need to override BP specifity
     148// so some rulesets sets are seemingly over weighted in selectors
     149
     150#buddypress {
     151
     152        // active/current states all navs
     153        div.item-list-tabs {
     154                ul {
     155                        li.selected {
     156                                a {
     157                                        background: #555;
     158                                        color: #fff;
     159                                        opacity: 1;
     160                                }
     161                        }
     162                }
     163        }
     164        // Global nav styles
     165        div.item-list-tabs {
     166                ul {
     167                        background-color: #eee;
     168                        border-bottom: 1px solid #ddd;
     169                        overflow: hidden;
     170                        padding: $spacing-val-xs 0;
     171                }
     172        }
     173        /*__ Horizontal menus __*/
     174        #object-nav {
     175                ul {
     176        //              background-color: #eee;
     177        //              border-bottom: 1px solid #ddd;
     178                        overflow: hidden;                       
     179                        li {float: none;}
     180                        li:not(.selected) {
     181                                a {opacity: .7;}
     182                        }
     183                        @media screen and (min-width: 38.75em) {
     184                                li {
     185                                        float: left;
     186                                }
     187                                //      li:nth-child(1n+7) {clear: left;}
     188                        }                       
     189                }
     190        }
     191        div#subnav.item-list-tabs {                                             
     192                margin-top: 0;
     193                        ul {
     194                                background-color: #F2F2F2;
     195                                border-bottom: none;
     196                                padding: 0;
     197                                        li.last {
     198                                                background: #fff;
     199                                                margin-top: 0;
     200                                                width: 100%;
     201                                                padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0 ;
     202                                                        select, select:focus {
     203                                                                border: none;
     204                                                                background: transparent;
     205                                                                outline: 0;
     206                                                        }
     207                                        }
     208                                        @media screen and (min-width: 38.75em) {
     209                                        li.last {
     210                                                text-align: right;
     211                                        }
     212                                }       
     213                        } // close ul
     214        } // close #subnav
     215
     216        // active/current states all navs
     217        div.item-list-tabs {
     218                ul {
     219                        li.selected, li.current {
     220                                a {
     221                                        background: #555;
     222                                        color: #fff;
     223                                        opacity: 1;
     224                                }
     225                        }
     226                }
     227        }
     228
     229} // close #buddypress
     230
     231        /*__ Vertical menu User account screens __*/
     232
     233// This block contains the rules to re-factor the item-body structural element
     234// to sit alongside the vert menu
     235// Structural layout and faux column styling of backgrounds is more suited
     236// to the earlier section. todo: re-position sort out when known what styles
     237// are being used.
     238
     239@media screen and (min-width: 55em) {
     240 .bp-user #buddypress {
     241                 background: #eee;
     242
     243                        #item-header, #item-body {background: #fff;}           
     244                        #object-nav {
     245                                border-right: 1px solid #ddd;
     246                        float: left;
     247                                margin-right: -1px;                     
     248                                width: 200px;
     249                                        ul {
     250                                                border-bottom: none;
     251                                                padding: 0;
     252                                                        li {
     253                                                                float: none;
     254                                                                overflow: hidden;
     255                                                                        span {
     256                                                                                border-radius: 10%;
     257                                                                                float: right;
     258                                                                                margin-right: 15px;
     259                                                                        }
     260                                                        }
     261                                        }
     262                        }
     263                        #item-body {
     264                                border-left: 1px solid #ddd;
     265                                overflow: hidden;
     266                                padding: 0 $spacing-val-sm;
     267                                width: auto;
     268                                        #subnav {
     269                                                margin: 0 (-$spacing-val-sm);
     270                                        }
     271                        }
     272               
     273        } // close .bp-user #buddypress
     274} // close @media
     275
     276/*--------------------------------------------------------------
     2772.2 - Pagination
     278--------------------------------------------------------------*/
     279
     280#buddypress {
     281        div.pagination {
     282                box-shadow: none;
     283                .pagination-links {
     284                        margin-right: 0;
     285                                span,
     286                                a {
     287                                        height: auto;
     288                                        line-height: 1;
     289                                        padding: 5px;
     290                                }
     291                                .prev,
     292                                .next {
     293                                        background-color: transparent;
     294                                        color: inherit;
     295                                        overflow: visible;
     296                                        width: auto;
     297                                                &:before {display: none;}
     298                                }
     299                                .prev {
     300                                        position: static;
     301                                        left: auto;                             
     302                                }
     303                                .next {
     304                                        position: static;
     305                                        right: auto;
     306                                }
     307
     308                } // close .pagination-links
     309        } // close .pagination
     310} // close #buddypress
     311
     312/*--------------------------------------------------------------
     3134.0 - BP Lists / Loops Generic
     314--------------------------------------------------------------*/
     315
     316// Trying to position the action div absolute has bad consequences where
     317// aditional items are displayed, floating is an alternative but may need
     318// to reconsider this approach.
     319// Initialy override the BP absolute positioning, allow natural flow position
     320// mobile up.
     321
     322#buddypress {   
     323                ul.item-list {
     324                        li {
     325                                overflow: hidden !important; // upsets me but buddypress styles over specified
     326
     327                                div.action {
     328                                        clear: left;
     329                                        @media screen and (min-width: 77.5em) {
     330                                                float: right;
     331                                                margin-top: -70px;
     332                                        }
     333                                        margin-top: $spacing-val-md;
     334                                        position: relative;
     335                                        text-align: left;
     336                                        top: 0;
     337                                                div {
     338                                                        // Provisionally lets keep the 'action' div position but inline-block the buttons
     339                                                        @media screen and (min-width: 55em) {
     340                                                                // keep buttons to a row small tablet up
     341                                                                display: inline-block;
     342                                                                margin-right: $spacing-val-xs;
     343                                                        } // close @media
     344                                                        @media screen and (min-width: 77.5em) {
     345                                                                // take buttons to block to stack them when floated right
     346                                                                clear: right;
     347                                                                display: block;
     348                                                                float: right;
     349                                                        } // close @media
     350
     351                                                        margin: 4px 0;
     352                                                } // close div
     353
     354                                } // close .action
     355
     356                        } // close li
     357                } // close .item-list
     358} // close #buddypress
     359/*--------------------------------------------------------------
     3604.1 - Activity
     361--------------------------------------------------------------*/
     362
     363/*--------------------------------------------------------------
     3644.1.2 - Activity Whats New
     365--------------------------------------------------------------*/
     366#buddypress {
     367        form#whats-new-form {
     368                textarea {width: 100%;}
     369                // corrective measure for clipped elements due to JS inline styling
     370                #whats-new-options[style] {
     371                        min-height: 6rem; // unit open to debate px value might be better.
     372                }
     373        }
     374        // User account form requires matching bp default specificity
     375        #item-body {
     376                form#whats-new-form {
     377                        margin: $spacing-val-lg 0 ;
     378                }
     379        }
     380} // close #buddypress
     381
     382/*--------------------------------------------------------------
     3834.1.2 - Activity Listing
     384--------------------------------------------------------------*/
     385#buddypress {
     386        .activity-list {
     387                .activity-content {
     388                        margin-top: -12px;
     389                .activity-header  {
     390                                img.avatar {
     391                                        display: inline-block;
     392                                }
     393                        } // close .activity-header
     394                } // close .activity-content
     395                .load-more a {display: block;}
     396        } // close .activity-list
     397
     398} // close #buddypress
     399/*--------------------------------------------------------------
     4007.0 - Single User Account Screens
     401--------------------------------------------------------------*/
     402
     403/*--------------------------------------------------------------
     4048.0 - Forms  - General
     405--------------------------------------------------------------*/
     406// 2015 applies 100% width to form element, remove this initially for BP search
     407
     408#buddypress {
     409
     410        // Manage form control widths under #item-body in user account screens
     411        #item-body {
     412                .standard-form {
     413                        li {float: none;}
     414                        input[type='text'],
     415                        textarea {             
     416                                width: 100%;
     417                        }
     418                }
     419        }
     420
     421        div.dir-search,
     422        div.message-search {
     423                float: none;
     424                margin: $spacing-val-sm 0;
     425
     426                // Stylise the seach form elements, in part this deals with padding
     427                // issues on the submit & sizing issues between bp styles & twentyfifteen
     428
     429                        form { // *sigh* only to bludgeon over specified rules
     430                                border: 1px solid #ccc;   
     431                                overflow: hidden;
     432                                        label {
     433                                                float: left;
     434                                                width: 80%;
     435                                        }
     436                                        input[type='text'] {
     437                                                float: left;
     438                                                width: 80%;
     439                                                margin: 0;
     440                                        }
     441                                        input[type='text'],
     442                                        input[type='submit'] {
     443                                        border: none;
     444                                                @include font-size(14);
     445                                                line-height: inherit;
     446                                        }
     447                                        input[type='text'] {
     448                                                border-right: 1px solid #ccc;
     449                                                padding: .2em 0 .2em .2em;                                     
     450                                        }
     451                                        input[type='submit'] {
     452                                                font-weight: normal;
     453                                                float: right;
     454                                                padding: .2em 1em;
     455                                                text-align: center;
     456                                                text-transform: none;
     457                                                width: 20%;
     458                                }
     459                        }// close form
     460
     461        } // close .dir-search, .message-search
     462
     463        // Shift the search parent to the right and allow to shrinkwrap
     464        @media screen and (min-width: 38.75em) {
     465                div.dir-search,
     466                div.message-search {
     467                        float: right;
     468                        margin-bottom: 5px !important;
     469                                form {
     470                                label,
     471                                        input[type='text'],
     472                                        input[type='submit'] {
     473                                                width: auto;
     474                                        }
     475                                }
     476                }
     477                div.message-search {margin-right: $spacing-val-sm;}
     478        } // close @media
     479
     480        // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     481//      @media screen and (min-width: 59.6875em) {
     482//              .dir-search,
     483//       .message-search {
     484        //              form {
     485        //                      input[type='text'] { @include font-size(14) ;}
     486        //                      input[type='submit'] {@include font-size(14);}
     487        //              }
     488        //      }
     489//      }
     490
     491 @media screen and (min-width: 77.5em) {
     492                .dir-search, .message-search {
     493                        form {
     494                                input[type='text'] { @include font-size(16) ;}
     495                                input[type='submit'] { @include font-size(16) ;}
     496                        }
     497                }
     498        }
     499
     500} // close #buddypress
     501
     502/*--------------------------------------------------------------
     5039.0 - Tables - General
     504--------------------------------------------------------------*/
     505
     506// Adjust table font sizes, default too large proportionally
     507// This approach will require refinement and perhaps re-location to
     508// a more general typography section to manage BP elements grouped under
     509// breakpoints.
     510#buddypress {
     511                table {@include font-size(14);}
     512        @media screen and (min-width: 55em) {
     513                table {@include font-size(16);}
     514        }
     515}
     516
     517/*__ User Account tables __*/
     518
     519#buddypress {
     520
     521        // Manage some table cells widths that are disproportionate to their content
     522        .notifications,
     523        .messages-notices {
     524                th {
     525                        width: 30%;
     526                                &.bulk-select-all {
     527                                        text-align: center;
     528                                        width: 10%;
     529                                }
     530                }
     531                .bulk-select-check {text-align: center;}
     532                .notification-actions,
     533                td.thread-options {
     534                        text-align: center;
     535                                a {
     536                                        display: inline-block;
     537                                        margin: 0;
     538                                        padding: 0;
     539                        }
     540                }
     541
     542                // Notices action buttons, this maybe better moved, temp for now to address
     543                // styling issues - this will need styling ideas
     544                td {
     545                        .button {border: none; display: block; padding: 0; text-align: center;}
     546                }
     547
     548        } // .notifications, .message-notices
     549} // #buddypress
     550 No newline at end of file