Skip to:
Content

BuddyPress.org

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

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

Further formatting - ammend sectional comment structure.

  • 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
     11If you are running as a child theme of twentyfifteen and wish to use
     12this stylesheet then please copy it to buddypress/css/ or community/css/
     13in your child theme root and rename the file to match your child theme name
     14i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
     15'twentyfifteen-child.css'
     16
     17----------------------------------------------------------------
     18>>> TABLE OF CONTENTS:
     19----------------------------------------------------------------
     201.0 Theme Structural Elements
     212.0 - Navigation - General
     22        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     23        2.2 - Pagination
     243.0 - Images
     254.0 - BP Lists / Loops Generic
     26        4.1 - Activity Loop
     27                4.1.1 - Activity Listing
     28                4.1.2 - Activity Comments
     29        4.2 - Members Loop
     30        4.3 - Groups Loop
     31        4.4 - Blogs Loop
     325.0 - Directories - Members, Groups, Blogs, Forums
     336.0 - Single Group Screens
     347.0 - Single User Account Screens
     35        7.1 - Notifications
     36        7.2 - Private Messaging Threads
     37        7.3 - Extended Profiles
     38        7.4 - Settings
     398.0 - Forms  -  General
     409.0 - Tables -  General
     4110.0 - Error / Success Messages
     4211.0 - Ajax Loading
     4312.0 - Widgets
     44--------------------------------------------------------------*/
     45/**
     46* 1.0 - Theme - Structural Elements
     47*/
     48.buddypress main {
     49  padding-top: 4%;
     50}
     51@media screen and (min-width: 59.6875em) {
     52  .buddypress main {
     53    padding-top: 0;
     54  }
     55}
     56.buddypress main article {
     57  margin: 0 4%;
     58  padding-top: 8.3333%;
     59}
     60@media screen and (min-width: 59.6875em) {
     61  .buddypress main article {
     62    margin: 0 0 0 1px;
     63  }
     64}
     65@media screen and (min-width: 87.6875em) {
     66  .buddypress main article {
     67    margin: 0 4.3333% 0 8.3333%;
     68  }
     69}
     70.buddypress main article .entry-header,
     71.buddypress main article .entry-content {
     72  padding: 0 2rem 2rem;
     73}
     74.buddypress main article #buddypress {
     75  margin-bottom: 40px;
     76}
     77.buddypress .site-footer {
     78  margin: 0 4%;
     79}
     80@media screen and (min-width: 59.6875em) {
     81  .buddypress .site-footer {
     82    margin: 0 0 0 35.2941%;
     83    width: 61.8235%;
     84  }
     85}
     86
     87/**
     88* 2.0 - Navigation - General
     89*/
     90.buddypress #buddypress .item-list-tabs a,
     91.buddypress #buddypress .activity-header a,
     92.buddypress #buddypress .activity-inner a,
     93.buddypress #buddypress .activity-comments a,
     94.buddypress #buddypress .item-title a,
     95.buddypress #buddypress .load-more a,
     96.buddypress #buddypress .field-visibility-settings-toggle a,
     97.buddypress #buddypress #latest-update a,
     98.buddypress #buddypress table a {
     99  border-bottom: 0;
     100}
     101.buddypress #buddypress .pagination-links a,
     102.buddypress #buddypress .pagination-links span {
     103  border-bottom: 0;
     104}
     105
     106/**
     107* 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     108*
     109* The main navigational elements for BP screens
     110*/
     111#buddypress {
     112  /*__ Horizontal menus __*/
     113}
     114#buddypress div.item-list-tabs ul li.selected a {
     115  background: #555;
     116  color: #fff;
     117  opacity: 1;
     118}
     119#buddypress div.item-list-tabs ul {
     120  background-color: #eee;
     121  border-bottom: 1px solid #ddd;
     122  overflow: hidden;
     123  padding: 5px 0;
     124}
     125#buddypress #object-nav ul {
     126  overflow: hidden;
     127}
     128#buddypress #object-nav ul li {
     129  float: none;
     130}
     131#buddypress #object-nav ul li:not(.selected) a {
     132  opacity: 0.7;
     133}
     134@media screen and (min-width: 38.75em) {
     135  #buddypress #object-nav ul li {
     136    float: left;
     137  }
     138}
     139#buddypress div#subnav.item-list-tabs {
     140  margin-top: 0;
     141}
     142#buddypress div#subnav.item-list-tabs ul {
     143  background-color: #f2f2f2;
     144  border-bottom: 0;
     145  padding: 0;
     146}
     147#buddypress div#subnav.item-list-tabs ul li.last {
     148  background: #fff;
     149  margin-top: 0;
     150  padding: 5px 5px 5px 0;
     151  width: 100%;
     152}
     153#buddypress div#subnav.item-list-tabs ul li.last select,
     154#buddypress div#subnav.item-list-tabs ul li.last select:focus {
     155  background: transparent;
     156  border: 0;
     157  outline: 0;
     158}
     159@media screen and (min-width: 38.75em) {
     160  #buddypress div#subnav.item-list-tabs ul li.last {
     161    text-align: right;
     162  }
     163}
     164#buddypress div.item-list-tabs ul li.selected a,
     165#buddypress div.item-list-tabs ul li.current a {
     166  background: #555;
     167  color: #fff;
     168  opacity: 1;
     169}
     170
     171/*__ Vertical menu User account screens __*/
     172@media screen and (min-width: 55em) {
     173  .bp-user #buddypress {
     174    background: #eee;
     175  }
     176  .bp-user #buddypress #item-header,
     177  .bp-user #buddypress #item-body {
     178    background: #fff;
     179  }
     180  .bp-user #buddypress #object-nav {
     181    border-right: 1px solid #ddd;
     182    float: left;
     183    margin-right: -1px;
     184    width: 200px;
     185  }
     186  .bp-user #buddypress #object-nav ul {
     187    border-bottom: 0;
     188    padding: 0;
     189  }
     190  .bp-user #buddypress #object-nav ul li {
     191    float: none;
     192    overflow: hidden;
     193  }
     194  .bp-user #buddypress #object-nav ul li span {
     195    border-radius: 10%;
     196    float: right;
     197    margin-right: 15px;
     198  }
     199  .bp-user #buddypress #item-body {
     200    border-left: 1px solid #ddd;
     201    overflow: hidden;
     202    padding: 0 10px;
     203    width: auto;
     204  }
     205  .bp-user #buddypress #item-body #subnav {
     206    margin: 0 -10px;
     207  }
     208}
     209/**
     210* 2.2 - Pagination
     211*/
     212#buddypress div.pagination {
     213  box-shadow: none;
     214}
     215#buddypress div.pagination .pag-count {
     216  margin-left: 0;
     217}
     218#buddypress div.pagination .pagination-links {
     219  margin-right: 0;
     220}
     221#buddypress div.pagination .pagination-links span,
     222#buddypress div.pagination .pagination-links a {
     223  height: auto;
     224  line-height: 1;
     225  padding: 5px;
     226}
     227#buddypress div.pagination .pagination-links .prev,
     228#buddypress div.pagination .pagination-links .next {
     229  background-color: transparent;
     230  color: inherit;
     231  overflow: visible;
     232  width: auto;
     233}
     234#buddypress div.pagination .pagination-links .prev:before,
     235#buddypress div.pagination .pagination-links .next:before {
     236  display: none;
     237}
     238#buddypress div.pagination .pagination-links .prev {
     239  left: auto;
     240  position: static;
     241}
     242#buddypress div.pagination .pagination-links .next {
     243  position: static;
     244  right: auto;
     245}
     246
     247/**
     248* 4.0 - BP Lists / Loops Generic
     249*/
     250#buddypress ul.item-list li {
     251  overflow: hidden !important;
     252}
     253#buddypress ul.item-list li div.action {
     254  clear: left;
     255  margin-top: 20px;
     256  position: relative;
     257  text-align: left;
     258  top: 0;
     259}
     260@media screen and (min-width: 77.5em) {
     261  #buddypress ul.item-list li div.action {
     262    float: right;
     263    margin-top: -70px;
     264  }
     265}
     266#buddypress ul.item-list li div.action div {
     267  margin: 4px 0;
     268}
     269@media screen and (min-width: 55em) {
     270  #buddypress ul.item-list li div.action div {
     271    display: inline-block;
     272    margin-right: 5px;
     273  }
     274}
     275@media screen and (min-width: 77.5em) {
     276  #buddypress ul.item-list li div.action div {
     277    clear: right;
     278    display: block;
     279    float: right;
     280  }
     281}
     282
     283/**
     284* 4.1 - Activity
     285*/
     286/**
     287* 4.1.2 - Activity Whats New
     288*/
     289#buddypress form#whats-new-form textarea {
     290  width: 100%;
     291}
     292#buddypress form#whats-new-form #whats-new-options[style] {
     293  min-height: 6rem;
     294}
     295#buddypress #item-body form#whats-new-form {
     296  margin: 40px 0;
     297}
     298
     299/**
     300* 4.1.2 - Activity Listing
     301*/
     302#buddypress .activity-list .activity-content {
     303  margin-top: -12px;
     304}
     305#buddypress .activity-list .activity-content .activity-header img.avatar {
     306  display: inline-block;
     307}
     308#buddypress .activity-list .load-more a {
     309  display: block;
     310}
     311
     312/**
     313* 7.0 - Single User Account Screens
     314*/
     315/**
     316* 8.0 - Forms  - General
     317*/
     318#buddypress #item-body .standard-form li {
     319  float: none;
     320}
     321#buddypress #item-body .standard-form input[type='text'],
     322#buddypress #item-body .standard-form textarea {
     323  width: 100%;
     324}
     325#buddypress div.dir-search,
     326#buddypress div.message-search {
     327  float: none;
     328  margin: 10px 0;
     329}
     330#buddypress div.dir-search form,
     331#buddypress div.message-search form {
     332  border: 1px solid #ccc;
     333  overflow: hidden;
     334}
     335#buddypress div.dir-search form label,
     336#buddypress div.message-search form label {
     337  float: left;
     338  width: 80%;
     339}
     340#buddypress div.dir-search form input[type='text'],
     341#buddypress div.message-search form input[type='text'] {
     342  float: left;
     343  margin: 0;
     344  width: 80%;
     345}
     346#buddypress div.dir-search form input[type='text'],
     347#buddypress div.dir-search form input[type='submit'],
     348#buddypress div.message-search form input[type='text'],
     349#buddypress div.message-search form input[type='submit'] {
     350  font-size: 14px;
     351  font-size: 1.4rem;
     352  border: 0;
     353  line-height: inherit;
     354}
     355#buddypress div.dir-search form input[type='text'],
     356#buddypress div.message-search form input[type='text'] {
     357  border-right: 1px solid #ccc;
     358  padding: 0.2em 0 0.2em 0.2em;
     359}
     360#buddypress div.dir-search form input[type='submit'],
     361#buddypress div.message-search form input[type='submit'] {
     362  float: right;
     363  font-weight: normal;
     364  padding: 0.2em 1em;
     365  text-align: center;
     366  text-transform: none;
     367  width: 20%;
     368}
     369@media screen and (min-width: 38.75em) {
     370  #buddypress div.dir-search,
     371  #buddypress div.message-search {
     372    float: right;
     373    margin-bottom: 5px !important;
     374  }
     375  #buddypress div.dir-search form label,
     376  #buddypress div.dir-search form input[type='text'],
     377  #buddypress div.dir-search form input[type='submit'],
     378  #buddypress div.message-search form label,
     379  #buddypress div.message-search form input[type='text'],
     380  #buddypress div.message-search form input[type='submit'] {
     381    width: auto;
     382  }
     383  #buddypress div.message-search {
     384    margin-right: 10px;
     385  }
     386}
     387@media screen and (min-width: 77.5em) {
     388  #buddypress .dir-search form input[type='text'],
     389  #buddypress .message-search form input[type='text'] {
     390    font-size: 16px;
     391    font-size: 1.6rem;
     392  }
     393  #buddypress .dir-search form input[type='submit'],
     394  #buddypress .message-search form input[type='submit'] {
     395    font-size: 16px;
     396    font-size: 1.6rem;
     397  }
     398}
     399
     400/**
     401* 9.0 - Tables - General
     402*/
     403#buddypress table {
     404  font-size: 14px;
     405  font-size: 1.4rem;
     406  margin: 20px 0;
     407}
     408@media screen and (min-width: 55em) {
     409  #buddypress table {
     410    font-size: 16px;
     411    font-size: 1.6rem;
     412  }
     413}
     414
     415/*__ User Account tables __*/
     416#buddypress .notifications th,
     417#buddypress .messages-notices th {
     418  width: 30%;
     419}
     420#buddypress .notifications th.bulk-select-all,
     421#buddypress .messages-notices th.bulk-select-all {
     422  text-align: center;
     423  width: 10%;
     424}
     425#buddypress .notifications .bulk-select-check,
     426#buddypress .messages-notices .bulk-select-check {
     427  text-align: center;
     428}
     429#buddypress .notifications .notification-actions,
     430#buddypress .notifications td.thread-options,
     431#buddypress .messages-notices .notification-actions,
     432#buddypress .messages-notices td.thread-options {
     433  text-align: center;
     434}
     435#buddypress .notifications .notification-actions a,
     436#buddypress .notifications td.thread-options a,
     437#buddypress .messages-notices .notification-actions a,
     438#buddypress .messages-notices td.thread-options a {
     439  display: inline-block;
     440  margin: 0;
     441  padding: 0;
     442}
     443#buddypress .notifications td .button,
     444#buddypress .messages-notices td .button {
     445  border: 0;
     446  display: block;
     447  padding: 0;
     448  text-align: center;
     449}
     450
     451/*# sourceMappingURL=twentyfifteen.css.map */
  • src/bp-templates/bp-legacy/css/twentyfifteen.scss

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