Skip to:
Content

BuddyPress.org

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

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

update file for formatting.

  • 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/*--------------------------------------------------------------
     461.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/*--------------------------------------------------------------
     882.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/*--------------------------------------------------------------
     1072.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     108--------------------------------------------------------------*/
     109#buddypress {
     110  /*__ Horizontal menus __*/
     111}
     112#buddypress div.item-list-tabs ul li.selected a {
     113  background: #555;
     114  color: #fff;
     115  opacity: 1;
     116}
     117#buddypress div.item-list-tabs ul {
     118  background-color: #eee;
     119  border-bottom: 1px solid #ddd;
     120  overflow: hidden;
     121  padding: 5px 0;
     122}
     123#buddypress #object-nav ul {
     124  overflow: hidden;
     125}
     126#buddypress #object-nav ul li {
     127  float: none;
     128}
     129#buddypress #object-nav ul li:not(.selected) a {
     130  opacity: .7;
     131}
     132@media screen and (min-width: 38.75em) {
     133  #buddypress #object-nav ul li {
     134    float: left;
     135  }
     136}
     137#buddypress div#subnav.item-list-tabs {
     138  margin-top: 0;
     139}
     140#buddypress div#subnav.item-list-tabs ul {
     141  background-color: #F2F2F2;
     142  border-bottom: none;
     143  padding: 0;
     144}
     145#buddypress div#subnav.item-list-tabs ul li.last {
     146  background: #fff;
     147  margin-top: 0;
     148  width: 100%;
     149  padding: 5px 5px 5px 0;
     150}
     151#buddypress div#subnav.item-list-tabs ul li.last select,
     152#buddypress div#subnav.item-list-tabs ul li.last select:focus {
     153  border: none;
     154  background: transparent;
     155  outline: 0;
     156}
     157@media screen and (min-width: 38.75em) {
     158  #buddypress div#subnav.item-list-tabs ul li.last {
     159    text-align: right;
     160  }
     161}
     162#buddypress div.item-list-tabs ul li.selected a,
     163#buddypress div.item-list-tabs ul li.current a {
     164  background: #555;
     165  color: #fff;
     166  opacity: 1;
     167}
     168
     169/*__ Vertical menu User account screens __*/
     170@media screen and (min-width: 55em) {
     171  .bp-user #buddypress {
     172    background: #eee;
     173  }
     174  .bp-user #buddypress #item-header, .bp-user #buddypress #item-body {
     175    background: #fff;
     176  }
     177  .bp-user #buddypress #object-nav {
     178    border-right: 1px solid #ddd;
     179    float: left;
     180    margin-right: -1px;
     181    width: 200px;
     182  }
     183  .bp-user #buddypress #object-nav ul {
     184    border-bottom: none;
     185    padding: 0;
     186  }
     187  .bp-user #buddypress #object-nav ul li {
     188    float: none;
     189    overflow: hidden;
     190  }
     191  .bp-user #buddypress #object-nav ul li span {
     192    border-radius: 10%;
     193    float: right;
     194    margin-right: 15px;
     195  }
     196  .bp-user #buddypress #item-body {
     197    border-left: 1px solid #ddd;
     198    overflow: hidden;
     199    padding: 0 10px;
     200    width: auto;
     201  }
     202  .bp-user #buddypress #item-body #subnav {
     203    margin: 0 -10px;
     204  }
     205}
     206/*--------------------------------------------------------------
     2072.2 - Pagination
     208--------------------------------------------------------------*/
     209#buddypress div.pagination {
     210  box-shadow: none;
     211}
     212#buddypress div.pagination .pag-count {
     213  margin-left: 0;
     214}
     215#buddypress div.pagination .pagination-links {
     216  margin-right: 0;
     217}
     218#buddypress div.pagination .pagination-links span,
     219#buddypress div.pagination .pagination-links a {
     220  height: auto;
     221  line-height: 1;
     222  padding: 5px;
     223}
     224#buddypress div.pagination .pagination-links .prev,
     225#buddypress div.pagination .pagination-links .next {
     226  background-color: transparent;
     227  color: inherit;
     228  overflow: visible;
     229  width: auto;
     230}
     231#buddypress div.pagination .pagination-links .prev:before,
     232#buddypress div.pagination .pagination-links .next:before {
     233  display: none;
     234}
     235#buddypress div.pagination .pagination-links .prev {
     236  position: static;
     237  left: auto;
     238}
     239#buddypress div.pagination .pagination-links .next {
     240  position: static;
     241  right: auto;
     242}
     243
     244/*--------------------------------------------------------------
     2454.0 - BP Lists / Loops Generic
     246--------------------------------------------------------------*/
     247#buddypress ul.item-list li {
     248  overflow: hidden !important;
     249}
     250#buddypress ul.item-list li div.action {
     251  clear: left;
     252  margin-top: 20px;
     253  position: relative;
     254  text-align: left;
     255  top: 0;
     256}
     257@media screen and (min-width: 77.5em) {
     258  #buddypress ul.item-list li div.action {
     259    float: right;
     260    margin-top: -70px;
     261  }
     262}
     263#buddypress ul.item-list li div.action div {
     264  margin: 4px 0;
     265}
     266@media screen and (min-width: 55em) {
     267  #buddypress ul.item-list li div.action div {
     268    display: inline-block;
     269    margin-right: 5px;
     270  }
     271}
     272@media screen and (min-width: 77.5em) {
     273  #buddypress ul.item-list li div.action div {
     274    clear: right;
     275    display: block;
     276    float: right;
     277  }
     278}
     279
     280/*--------------------------------------------------------------
     2814.1 - Activity
     282--------------------------------------------------------------*/
     283/*--------------------------------------------------------------
     2844.1.2 - Activity Whats New
     285--------------------------------------------------------------*/
     286#buddypress form#whats-new-form textarea {
     287  width: 100%;
     288}
     289#buddypress form#whats-new-form #whats-new-options[style] {
     290  min-height: 6rem;
     291}
     292#buddypress #item-body form#whats-new-form {
     293  margin: 40px 0;
     294}
     295
     296/*--------------------------------------------------------------
     2974.1.2 - Activity Listing
     298--------------------------------------------------------------*/
     299#buddypress .activity-list .activity-content {
     300  margin-top: -12px;
     301}
     302#buddypress .activity-list .activity-content .activity-header img.avatar {
     303  display: inline-block;
     304}
     305#buddypress .activity-list .load-more a {
     306  display: block;
     307}
     308
     309/*--------------------------------------------------------------
     3107.0 - Single User Account Screens
     311--------------------------------------------------------------*/
     312/*--------------------------------------------------------------
     3138.0 - Forms  - General
     314--------------------------------------------------------------*/
     315#buddypress #item-body .standard-form li {
     316  float: none;
     317}
     318#buddypress #item-body .standard-form input[type='text'],
     319#buddypress #item-body .standard-form textarea {
     320  width: 100%;
     321}
     322#buddypress div.dir-search,
     323#buddypress div.message-search {
     324  float: none;
     325  margin: 10px 0;
     326}
     327#buddypress div.dir-search form,
     328#buddypress div.message-search form {
     329  border: 1px solid #ccc;
     330  overflow: hidden;
     331}
     332#buddypress div.dir-search form label,
     333#buddypress div.message-search form label {
     334  float: left;
     335  width: 80%;
     336}
     337#buddypress div.dir-search form input[type='text'],
     338#buddypress div.message-search form input[type='text'] {
     339  float: left;
     340  width: 80%;
     341  margin: 0;
     342}
     343#buddypress div.dir-search form input[type='text'],
     344#buddypress div.dir-search form input[type='submit'],
     345#buddypress div.message-search form input[type='text'],
     346#buddypress div.message-search form input[type='submit'] {
     347  border: none;
     348  font-size: 14px;
     349  font-size: 1.4rem;
     350  line-height: inherit;
     351}
     352#buddypress div.dir-search form input[type='text'],
     353#buddypress div.message-search form input[type='text'] {
     354  border-right: 1px solid #ccc;
     355  padding: .2em 0 .2em .2em;
     356}
     357#buddypress div.dir-search form input[type='submit'],
     358#buddypress div.message-search form input[type='submit'] {
     359  font-weight: normal;
     360  float: right;
     361  padding: .2em 1em;
     362  text-align: center;
     363  text-transform: none;
     364  width: 20%;
     365}
     366@media screen and (min-width: 38.75em) {
     367  #buddypress div.dir-search,
     368  #buddypress div.message-search {
     369    float: right;
     370    margin-bottom: 5px !important;
     371  }
     372  #buddypress div.dir-search form label,
     373  #buddypress div.dir-search form input[type='text'],
     374  #buddypress div.dir-search form input[type='submit'],
     375  #buddypress div.message-search form label,
     376  #buddypress div.message-search form input[type='text'],
     377  #buddypress div.message-search form input[type='submit'] {
     378    width: auto;
     379  }
     380  #buddypress div.message-search {
     381    margin-right: 10px;
     382  }
     383}
     384@media screen and (min-width: 77.5em) {
     385  #buddypress .dir-search form input[type='text'], #buddypress .message-search form input[type='text'] {
     386    font-size: 16px;
     387    font-size: 1.6rem;
     388  }
     389  #buddypress .dir-search form input[type='submit'], #buddypress .message-search form input[type='submit'] {
     390    font-size: 16px;
     391    font-size: 1.6rem;
     392  }
     393}
     394
     395/*--------------------------------------------------------------
     3969.0 - Tables - General
     397--------------------------------------------------------------*/
     398#buddypress table {
     399  font-size: 14px;
     400  font-size: 1.4rem;
     401  margin: 20px 0;
     402}
     403@media screen and (min-width: 55em) {
     404  #buddypress table {
     405    font-size: 16px;
     406    font-size: 1.6rem;
     407  }
     408}
     409
     410/*__ User Account tables __*/
     411#buddypress .notifications th,
     412#buddypress .messages-notices th {
     413  width: 30%;
     414}
     415#buddypress .notifications th.bulk-select-all,
     416#buddypress .messages-notices th.bulk-select-all {
     417  text-align: center;
     418  width: 10%;
     419}
     420#buddypress .notifications .bulk-select-check,
     421#buddypress .messages-notices .bulk-select-check {
     422  text-align: center;
     423}
     424#buddypress .notifications .notification-actions,
     425#buddypress .notifications td.thread-options,
     426#buddypress .messages-notices .notification-actions,
     427#buddypress .messages-notices td.thread-options {
     428  text-align: center;
     429}
     430#buddypress .notifications .notification-actions a,
     431#buddypress .notifications td.thread-options a,
     432#buddypress .messages-notices .notification-actions a,
     433#buddypress .messages-notices td.thread-options a {
     434  display: inline-block;
     435  margin: 0;
     436  padding: 0;
     437}
     438#buddypress .notifications td .button,
     439#buddypress .messages-notices td .button {
     440  border: none;
     441  display: block;
     442  padding: 0;
     443  text-align: center;
     444}
     445
     446/*# 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
     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/*--------------------------------------------------------------
     811.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         main {
     93                        padding-top: 4%;
     94                        @media screen and ( min-width: 59.6875em ) {
     95                                padding-top: 0;
     96                        }
     97                        article {
     98                                margin: 0 4%;
     99                                padding-top: 8.3333%;
     100                                        @media screen and ( min-width: 59.6875em ) {
     101                                                margin: 0 0 0 1px;
     102                                        }
     103                                        @media screen and ( min-width: 87.6875em ) {
     104                                                margin: 0  4.3333% 0 8.3333%;
     105                                        }
     106                                        .entry-header,
     107                                        .entry-content {
     108                                                padding: 0 2rem 2rem;
     109                                        }
     110                                        #buddypress {
     111                                                margin-bottom: $spacing-val-lg;
     112                                        }
     113                        } // .article
     114                } // .main
     115                .site-footer {
     116                        margin: 0 4%;
     117                        @media screen and ( min-width: 59.6875em ) {
     118                                margin: 0 0 0 35.2941%;
     119                                width: 61.8235%;
     120                        }
     121                }
     122} // .buddypress ( body class )
     123
     124/*--------------------------------------------------------------
     1252.0 - Navigation - General
     126--------------------------------------------------------------*/
     127
     128// Remove 2015 border bottom on BP links/spans
     129.buddypress #buddypress {
     130        .item-list-tabs,
     131        .activity-header,
     132        .activity-inner,
     133        .activity-comments,
     134        .item-title,
     135        .load-more,
     136        .field-visibility-settings-toggle,
     137        #latest-update,
     138        table, {
     139                a { border-bottom: 0; }
     140        }       
     141        .pagination-links {
     142                a,
     143                span { border-bottom: 0; }
     144        }
     145} // close .buddypress #buddypress
     146
     147/*--------------------------------------------------------------
     1482.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     149--------------------------------------------------------------*/
     150// The main navigational elements for BP screens
     151
     152
     153// We have a need to override BP specifity
     154// so some rulesets sets are seemingly over weighted in selectors
     155
     156#buddypress {
     157
     158        // active/current states all navs
     159        div.item-list-tabs {
     160                ul {
     161                        li.selected {
     162                                a {
     163                                        background: #555;
     164                                        color: #fff;
     165                                        opacity: 1;
     166                                }
     167                        }
     168                }
     169        }
     170        // Global nav styles
     171        div.item-list-tabs {
     172                ul {
     173                        background-color: #eee;
     174                        border-bottom: 1px solid #ddd;
     175                        overflow: hidden;
     176                        padding: $spacing-val-xs 0;
     177                }
     178        }
     179        /*__ Horizontal menus __*/
     180        #object-nav {
     181                ul {
     182        //              background-color: #eee;
     183        //              border-bottom: 1px solid #ddd;
     184                        overflow: hidden;
     185                        li {float: none;}
     186                        li:not(.selected) {
     187                                a {opacity: .7;}
     188                        }
     189                        @media screen and (min-width: 38.75em) {
     190                                li {
     191                                        float: left;
     192                                }
     193                                //      li:nth-child(1n+7) {clear: left;}
     194                        }
     195                }
     196        }
     197        div#subnav.item-list-tabs {
     198                margin-top: 0;
     199                        ul {
     200                                background-color: #F2F2F2;
     201                                border-bottom: none;
     202                                padding: 0;
     203                                        li.last {
     204                                                background: #fff;
     205                                                margin-top: 0;
     206                                                width: 100%;
     207                                                padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0 ;
     208                                                        select,
     209                                                        select:focus {
     210                                                                border: none;
     211                                                                background: transparent;
     212                                                                outline: 0;
     213                                                        }
     214                                        }
     215                                        @media screen and (min-width: 38.75em) {
     216                                        li.last {
     217                                                text-align: right;
     218                                        }
     219                                }
     220                        } // close ul
     221        } // close #subnav
     222
     223        // active/current states all navs
     224        div.item-list-tabs {
     225                ul {
     226                        li.selected,
     227                        li.current {
     228                                a {
     229                                        background: #555;
     230                                        color: #fff;
     231                                        opacity: 1;
     232                                }
     233                        }
     234                }
     235        }
     236
     237} // close #buddypress
     238
     239        /*__ Vertical menu User account screens __*/
     240
     241// This block contains the rules to re-factor the item-body structural element
     242// to sit alongside the vert menu
     243// Structural layout and faux column styling of backgrounds is more suited
     244// to the earlier section. todo: re-position sort out when known what styles
     245// are being used.
     246
     247@media screen and (min-width: 55em) {
     248        .bp-user #buddypress {
     249                 background: #eee;
     250
     251                        #item-header, #item-body {background: #fff;}
     252                        #object-nav {
     253                                border-right: 1px solid #ddd;
     254                                float: left;
     255                                margin-right: -1px;
     256                                width: 200px;
     257                                        ul {
     258                                                border-bottom: none;
     259                                                padding: 0;
     260                                                        li {
     261                                                                float: none;
     262                                                                overflow: hidden;
     263                                                                        span {
     264                                                                                border-radius: 10%;
     265                                                                                float: right;
     266                                                                                margin-right: 15px;
     267                                                                        }
     268                                                        }
     269                                        }
     270                        }
     271                        #item-body {
     272                                border-left: 1px solid #ddd;
     273                                overflow: hidden;
     274                                padding: 0 $spacing-val-sm;
     275                                width: auto;
     276                                        #subnav {
     277                                                margin: 0 (-$spacing-val-sm);
     278                                        }
     279                        }
     280               
     281        } // close .bp-user #buddypress
     282} // close @media
     283
     284/*--------------------------------------------------------------
     2852.2 - Pagination
     286--------------------------------------------------------------*/
     287
     288#buddypress {
     289        div.pagination {
     290                box-shadow: none;
     291                .pag-count {margin-left: 0;}
     292                .pagination-links {
     293                        margin-right: 0;
     294                                span,
     295                                a {
     296                                        height: auto;
     297                                        line-height: 1;
     298                                        padding: 5px;
     299                                }
     300                                .prev,
     301                                .next {
     302                                        background-color: transparent;
     303                                        color: inherit;
     304                                        overflow: visible;
     305                                        width: auto;
     306                                                &:before {display: none;}
     307                                }
     308                                .prev {
     309                                        position: static;
     310                                        left: auto;
     311                                }
     312                                .next {
     313                                        position: static;
     314                                        right: auto;
     315                                }
     316
     317                } // close .pagination-links
     318        } // close .pagination
     319} // close #buddypress
     320
     321/*--------------------------------------------------------------
     3224.0 - BP Lists / Loops Generic
     323--------------------------------------------------------------*/
     324
     325// Trying to position the action div absolute has bad consequences where
     326// aditional items are displayed, floating is an alternative but may need
     327// to reconsider this approach.
     328// Initialy override the BP absolute positioning, allow natural flow position
     329// mobile up.
     330
     331#buddypress {
     332                ul.item-list {
     333                        li {
     334                                overflow: hidden !important;
     335
     336                                div.action {
     337                                        clear: left;
     338                                        @media screen and (min-width: 77.5em) {
     339                                                float: right;
     340                                                margin-top: -70px;
     341                                        }
     342                                        margin-top: $spacing-val-md;
     343                                        position: relative;
     344                                        text-align: left;
     345                                        top: 0;
     346                                                div {
     347                                                        // Provisionally lets keep the 'action' div position but inline-block the buttons
     348                                                        @media screen and (min-width: 55em) {
     349                                                                // keep buttons to a row small tablet up
     350                                                                display: inline-block;
     351                                                                margin-right: $spacing-val-xs;
     352                                                        } // close @media
     353                                                        @media screen and (min-width: 77.5em) {
     354                                                                // take buttons to block to stack them when floated right
     355                                                                clear: right;
     356                                                                display: block;
     357                                                                float: right;
     358                                                        } // close @media
     359
     360                                                        margin: 4px 0;
     361                                                } // close div
     362
     363                                } // close .action
     364
     365                        } // close li
     366                } // close .item-list
     367} // close #buddypress
     368/*--------------------------------------------------------------
     3694.1 - Activity
     370--------------------------------------------------------------*/
     371
     372/*--------------------------------------------------------------
     3734.1.2 - Activity Whats New
     374--------------------------------------------------------------*/
     375#buddypress {
     376        form#whats-new-form {
     377                textarea {width: 100%;}
     378                // corrective measure for clipped elements due to JS inline styling
     379                #whats-new-options[style] {
     380                        min-height: 6rem; // unit open to debate px value might be better.
     381                }
     382        }
     383        // User account form requires matching bp default specificity
     384        #item-body {
     385                form#whats-new-form {
     386                        margin: $spacing-val-lg 0 ;
     387                }
     388        }
     389} // close #buddypress
     390
     391/*--------------------------------------------------------------
     3924.1.2 - Activity Listing
     393--------------------------------------------------------------*/
     394#buddypress {
     395        .activity-list {
     396                .activity-content {
     397                        margin-top: -12px;
     398                        .activity-header  {
     399                                img.avatar {
     400                                        display: inline-block;
     401                                }
     402                        } // close .activity-header
     403                } // close .activity-content
     404                .load-more a {display: block;}
     405        } // close .activity-list
     406
     407} // close #buddypress
     408/*--------------------------------------------------------------
     4097.0 - Single User Account Screens
     410--------------------------------------------------------------*/
     411
     412/*--------------------------------------------------------------
     4138.0 - Forms  - General
     414--------------------------------------------------------------*/
     415// 2015 applies 100% width to form element, remove this initially for BP search
     416
     417#buddypress {
     418
     419        // Manage form control widths under #item-body in user account screens
     420        #item-body {
     421                .standard-form {
     422                        li {float: none;}
     423                        input[type='text'],
     424                        textarea {
     425                                width: 100%;
     426                        }
     427                }
     428        }
     429
     430        div.dir-search,
     431        div.message-search {
     432                float: none;
     433                margin: $spacing-val-sm 0;
     434
     435                // Stylise the seach form elements, in part this deals with padding
     436                // issues on the submit & sizing issues between bp styles & twentyfifteen
     437
     438                        form { // *sigh* only to bludgeon over specified rules
     439                                border: 1px solid #ccc;
     440                                overflow: hidden;
     441                                        label {
     442                                                float: left;
     443                                                width: 80%;
     444                                        }
     445                                        input[type='text'] {
     446                                                float: left;
     447                                                width: 80%;
     448                                                margin: 0;
     449                                        }
     450                                        input[type='text'],
     451                                        input[type='submit'] {
     452                                                border: none;
     453                                                @include font-size(14);
     454                                                line-height: inherit;
     455                                        }
     456                                        input[type='text'] {
     457                                                border-right: 1px solid #ccc;
     458                                                padding: .2em 0 .2em .2em;
     459                                        }
     460                                        input[type='submit'] {
     461                                                font-weight: normal;
     462                                                float: right;
     463                                                padding: .2em 1em;
     464                                                text-align: center;
     465                                                text-transform: none;
     466                                                width: 20%;
     467                                }
     468                        }// close form
     469
     470        } // close .dir-search, .message-search
     471
     472        // Shift the search parent to the right and allow to shrinkwrap
     473        @media screen and (min-width: 38.75em) {
     474                div.dir-search,
     475                div.message-search {
     476                        float: right;
     477                        margin-bottom: 5px !important;
     478                                form {
     479                                label,
     480                                        input[type='text'],
     481                                        input[type='submit'] {
     482                                                width: auto;
     483                                        }
     484                                }
     485                }
     486                div.message-search {margin-right: $spacing-val-sm;}
     487        } // close @media
     488
     489        // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     490//      @media screen and (min-width: 59.6875em) {
     491//              .dir-search,
     492//       .message-search {
     493        //              form {
     494        //                      input[type='text'] { @include font-size(14) ;}
     495        //                      input[type='submit'] {@include font-size(14);}
     496        //              }
     497        //      }
     498//      }
     499
     500        @media screen and (min-width: 77.5em) {
     501                .dir-search, .message-search {
     502                        form {
     503                                input[type='text'] { @include font-size(16) ;}
     504                                input[type='submit'] { @include font-size(16) ;}
     505                        }
     506                }
     507        }
     508
     509} // close #buddypress
     510
     511/*--------------------------------------------------------------
     5129.0 - Tables - General
     513--------------------------------------------------------------*/
     514
     515// Adjust table font sizes, default too large proportionally
     516// This approach will require refinement and perhaps re-location to
     517// a more general typography section to manage BP elements grouped under
     518// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     519#buddypress {
     520                table {
     521                        @include font-size(14);
     522                        margin: $spacing-val-md 0;
     523                }
     524        @media screen and (min-width: 55em) {
     525                table {@include font-size(16);}
     526        }
     527}
     528
     529/*__ User Account tables __*/
     530
     531#buddypress {
     532
     533        // Manage some table cells widths that are disproportionate to their content
     534        .notifications,
     535        .messages-notices {
     536                th {
     537                        width: 30%;
     538                                &.bulk-select-all {
     539                                        text-align: center;
     540                                        width: 10%;
     541                                }
     542                }
     543                .bulk-select-check {text-align: center;}
     544                .notification-actions,
     545                td.thread-options {
     546                        text-align: center;
     547                                a {
     548                                        display: inline-block;
     549                                        margin: 0;
     550                                        padding: 0;
     551                        }
     552                }
     553
     554                // Notices action buttons, this maybe better moved, temp for now to address
     555                // styling issues - this will need styling ideas
     556                td {
     557                        .button {border: none; display: block; padding: 0; text-align: center;}
     558                }
     559
     560        } // .notifications, .message-notices
     561} // #buddypress
     562 No newline at end of file