Skip to:
Content

BuddyPress.org

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

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

Update sheet with basic color variable decs. Update BP lists 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/**
     46*-------------------------------------------------------------------------------
     47* @section 1.0 - Theme - Structural Elements
     48*-------------------------------------------------------------------------------
     49*/
     50.buddypress div.clear {
     51  display: none;
     52}
     53.buddypress main {
     54  padding-top: 4%;
     55}
     56@media screen and (min-width: 59.6875em) {
     57  .buddypress main {
     58    padding-top: 0;
     59  }
     60}
     61.buddypress main article {
     62  margin: 0 4%;
     63  padding-top: 8.3333%;
     64}
     65@media screen and (min-width: 59.6875em) {
     66  .buddypress main article {
     67    margin: 0 0 0 1px;
     68  }
     69}
     70@media screen and (min-width: 87.6875em) {
     71  .buddypress main article {
     72    margin: 0 4.3333% 0 8.3333%;
     73  }
     74}
     75.buddypress main article .entry-header,
     76.buddypress main article .entry-content {
     77  padding: 0 2rem 2rem;
     78}
     79.buddypress main article #buddypress {
     80  margin-bottom: 40px;
     81}
     82.buddypress .site-footer {
     83  margin: 0 4%;
     84}
     85@media screen and (min-width: 59.6875em) {
     86  .buddypress .site-footer {
     87    margin: 0 0 0 35.2941%;
     88    width: 61.8235%;
     89  }
     90}
     91
     92/**
     93*-------------------------------------------------------------------------------
     94* @section 2.0 - Navigation - General
     95*-------------------------------------------------------------------------------
     96*/
     97.buddypress #buddypress .item-list-tabs a,
     98.buddypress #buddypress .activity-header a,
     99.buddypress #buddypress .activity-inner a,
     100.buddypress #buddypress .activity-comments a,
     101.buddypress #buddypress .item-title a,
     102.buddypress #buddypress .load-more a,
     103.buddypress #buddypress .field-visibility-settings-toggle a,
     104.buddypress #buddypress #latest-update a,
     105.buddypress #buddypress table a {
     106  border-bottom: 0;
     107}
     108.buddypress #buddypress .pagination-links a,
     109.buddypress #buddypress .pagination-links span {
     110  border-bottom: 0;
     111}
     112
     113/**
     114*-------------------------------------------------------------------------------
     115* @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     116*-------------------------------------------------------------------------------
     117*
     118* @description The main navigational elements for BP screens
     119*/
     120#buddypress {
     121  /*__ Horizontal menus __*/
     122}
     123#buddypress div.item-list-tabs ul li.selected a {
     124  background: #555;
     125  color: #fff;
     126  opacity: 1;
     127}
     128#buddypress div.item-list-tabs ul {
     129  background-color: #f7f7f7;
     130  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
     131  overflow: hidden;
     132  padding: 5px 0;
     133}
     134#buddypress #object-nav ul {
     135  overflow: hidden;
     136}
     137#buddypress #object-nav ul li {
     138  float: none;
     139}
     140#buddypress #object-nav ul li:not(.selected) a {
     141  opacity: 0.7;
     142}
     143@media screen and (min-width: 38.75em) {
     144  #buddypress #object-nav ul li {
     145    float: left;
     146  }
     147}
     148#buddypress div#subnav.item-list-tabs {
     149  margin-top: 0;
     150}
     151#buddypress div#subnav.item-list-tabs ul {
     152  background-color: #f7f7f7;
     153  border-bottom: 0;
     154  padding: 0;
     155}
     156#buddypress div#subnav.item-list-tabs ul li.last {
     157  background: #fff;
     158  margin-top: 0;
     159  padding: 5px 5px 5px 0;
     160  width: 100%;
     161}
     162#buddypress div#subnav.item-list-tabs ul li.last select,
     163#buddypress div#subnav.item-list-tabs ul li.last select:focus {
     164  background: transparent;
     165  border: 0;
     166  outline: 0;
     167}
     168#buddypress div#subnav.item-list-tabs ul li.last select,
     169#buddypress div#subnav.item-list-tabs ul li.last label,
     170#buddypress div#subnav.item-list-tabs ul li.last option {
     171  font-size: 14px;
     172  font-size: 1.4rem;
     173}
     174#buddypress div#subnav.item-list-tabs ul li.last select {
     175  font-style: italic;
     176}
     177@media screen and (min-width: 38.75em) {
     178  #buddypress div#subnav.item-list-tabs ul li.last {
     179    text-align: right;
     180  }
     181}
     182#buddypress div.item-list-tabs ul li.selected a,
     183#buddypress div.item-list-tabs ul li.current a {
     184  background: #555;
     185  color: #fff;
     186  opacity: 1;
     187}
     188
     189/*__ Vertical menu User account screens __*/
     190@media screen and (min-width: 55em) {
     191  .bp-user #buddypress {
     192    background: #f7f7f7;
     193  }
     194  .bp-user #buddypress #item-header,
     195  .bp-user #buddypress #item-body {
     196    background: #fff;
     197  }
     198  .bp-user #buddypress #object-nav {
     199    border-right: 1px solid rgba(153, 153, 153, 0.1);
     200    float: left;
     201    margin-right: -1px;
     202    width: 200px;
     203  }
     204  .bp-user #buddypress #object-nav ul {
     205    border-bottom: 0;
     206    padding: 0;
     207  }
     208  .bp-user #buddypress #object-nav ul li {
     209    float: none;
     210    overflow: hidden;
     211  }
     212  .bp-user #buddypress #object-nav ul li span {
     213    border-radius: 10%;
     214    float: right;
     215    margin-right: 15px;
     216  }
     217  .bp-user #buddypress #item-body {
     218    border-left: 1px solid #ddd;
     219    overflow: hidden;
     220    padding: 0 10px;
     221    width: auto;
     222  }
     223  .bp-user #buddypress #item-body #subnav {
     224    margin: 0 -10px;
     225  }
     226}
     227/**
     228*-------------------------------------------------------------------------------
     229* @section 2.2 - Pagination
     230*-------------------------------------------------------------------------------
     231*/
     232#buddypress div.pagination {
     233  box-shadow: none;
     234}
     235#buddypress div.pagination .pag-count {
     236  margin-left: 0;
     237}
     238#buddypress div.pagination .pagination-links {
     239  margin-right: 0;
     240}
     241#buddypress div.pagination .pagination-links span,
     242#buddypress div.pagination .pagination-links a {
     243  height: auto;
     244  line-height: 1;
     245  padding: 5px;
     246}
     247#buddypress div.pagination .pagination-links .prev,
     248#buddypress div.pagination .pagination-links .next {
     249  background-color: transparent;
     250  color: inherit;
     251  overflow: visible;
     252  width: auto;
     253}
     254#buddypress div.pagination .pagination-links .prev:before,
     255#buddypress div.pagination .pagination-links .next:before {
     256  display: none;
     257}
     258#buddypress div.pagination .pagination-links .prev {
     259  left: auto;
     260  position: static;
     261}
     262#buddypress div.pagination .pagination-links .next {
     263  position: static;
     264  right: auto;
     265}
     266
     267/**
     268*-------------------------------------------------------------------------------
     269* @section 4.0 - BP Lists / Loops Generic
     270*-------------------------------------------------------------------------------
     271*/
     272#buddypress ul.item-list li {
     273  overflow: hidden !important;
     274}
     275#buddypress ul.item-list li .item .item-desc {
     276  margin-left: 0;
     277  width: auto;
     278}
     279@media screen and (min-width: 59.6875em) {
     280  #buddypress ul.item-list li .item-avatar,
     281  #buddypress ul.item-list li .item,
     282  #buddypress ul.item-list li .action {
     283    float: left;
     284  }
     285  #buddypress ul.item-list li .item {
     286    position: relative;
     287    left: 10%;
     288    width: 55%;
     289  }
     290}
     291#buddypress ul.item-list li div.action {
     292  clear: left;
     293  float: none;
     294  padding: 0 2px;
     295  margin-bottom: -20px;
     296  margin-left: 0;
     297  padding: 20px 0 5px;
     298  position: relative;
     299  text-align: left;
     300  top: 0;
     301}
     302@media screen and (min-width: 59.6875em) {
     303  #buddypress ul.item-list li div.action {
     304    clear: none;
     305    float: right;
     306    margin-bottom: 0;
     307    padding: 0;
     308  }
     309}
     310#buddypress ul.item-list li div.action div {
     311  display: inline-block;
     312  width: 100%;
     313  margin: 10px 0;
     314}
     315#buddypress ul.item-list li div.action div a {
     316  display: block;
     317  width: 100%;
     318}
     319@media screen and (min-width: 38.75em) {
     320  #buddypress ul.item-list li div.action div {
     321    margin: 0 10px 10px 0;
     322    width: auto;
     323  }
     324}
     325@media screen and (min-width: 59.6875em) {
     326  #buddypress ul.item-list li div.action div {
     327    clear: right;
     328    float: right;
     329    margin: 0 0 10px 0;
     330  }
     331}
     332#buddypress ul.item-list li div.action .meta {
     333  font-style: italic;
     334}
     335
     336/**
     337*-------------------------------------------------------------------------------
     338* @section 4.1 - Activity
     339*-------------------------------------------------------------------------------
     340*/
     341/**
     342*-------------------------------------------------------------------------------
     343* @section 4.1.2 - Activity Whats New
     344*-------------------------------------------------------------------------------
     345*/
     346#buddypress form#whats-new-form textarea {
     347  width: 100%;
     348}
     349#buddypress form#whats-new-form #whats-new-options[style] {
     350  min-height: 6rem;
     351}
     352#buddypress #item-body form#whats-new-form {
     353  margin: 40px 0;
     354}
     355
     356/**
     357*-------------------------------------------------------------------------------
     358* @section 4.1.2 - Activity Listing
     359*-------------------------------------------------------------------------------
     360*/
     361#buddypress .activity-list .activity-content {
     362  margin-top: -12px;
     363}
     364#buddypress .activity-list .activity-content .activity-header img.avatar {
     365  display: inline-block;
     366}
     367#buddypress .activity-list .load-more a {
     368  display: block;
     369}
     370
     371/**
     372*-------------------------------------------------------------------------------
     373* @section 4.2 - Members Loop
     374*-------------------------------------------------------------------------------
     375*/
     376@media screen and (min-width: 59.6875em) {
     377  #buddypress #members-list li .item-avatar,
     378  #buddypress #members-list li .item {
     379    float: left;
     380  }
     381  #buddypress #members-list li .action {
     382    float: right;
     383  }
     384}
     385
     386/**
     387*-------------------------------------------------------------------------------
     388* @section 7.0 - Single User Account Screens
     389*-------------------------------------------------------------------------------
     390*/
     391.bp-user .entry-title {
     392  margin-bottom: .5em;
     393}
     394@media screen and (min-width: 77.5em) {
     395  .bp-user #buddypress #groups-list li .item {
     396    left: 5%;
     397    width: 50%;
     398  }
     399}
     400
     401/**
     402*-------------------------------------------------------------------------------
     403* @section 8.0 - Forms  - General
     404*-------------------------------------------------------------------------------
     405*/
     406#buddypress #item-body .standard-form li {
     407  float: none;
     408}
     409#buddypress #item-body .standard-form input[type='text'],
     410#buddypress #item-body .standard-form textarea {
     411  width: 100%;
     412}
     413#buddypress div.dir-search,
     414#buddypress div.message-search {
     415  float: none;
     416  margin: 10px 0;
     417}
     418#buddypress div.dir-search form,
     419#buddypress div.message-search form {
     420  border: 1px solid rgba(153, 153, 153, 0.4);
     421  overflow: hidden;
     422}
     423#buddypress div.dir-search form label,
     424#buddypress div.message-search form label {
     425  float: left;
     426  width: 80%;
     427}
     428#buddypress div.dir-search form input[type='text'],
     429#buddypress div.message-search form input[type='text'] {
     430  float: left;
     431  margin: 0;
     432  width: 80%;
     433}
     434#buddypress div.dir-search form input[type='text'],
     435#buddypress div.dir-search form input[type='submit'],
     436#buddypress div.message-search form input[type='text'],
     437#buddypress div.message-search form input[type='submit'] {
     438  font-size: 14px;
     439  font-size: 1.4rem;
     440  border: 0;
     441  line-height: inherit;
     442}
     443#buddypress div.dir-search form input[type='text'],
     444#buddypress div.message-search form input[type='text'] {
     445  border-right: 1px solid rgba(153, 153, 153, 0.4);
     446  padding: 0.2em 0 0.2em 0.2em;
     447}
     448#buddypress div.dir-search form input[type='submit'],
     449#buddypress div.message-search form input[type='submit'] {
     450  float: right;
     451  font-weight: normal;
     452  padding: 0.2em 1em;
     453  text-align: center;
     454  text-transform: none;
     455  width: 20%;
     456}
     457@media screen and (min-width: 38.75em) {
     458  #buddypress div.dir-search,
     459  #buddypress div.message-search {
     460    float: right;
     461    margin-bottom: 5px !important;
     462  }
     463  #buddypress div.dir-search form label,
     464  #buddypress div.dir-search form input[type='text'],
     465  #buddypress div.dir-search form input[type='submit'],
     466  #buddypress div.message-search form label,
     467  #buddypress div.message-search form input[type='text'],
     468  #buddypress div.message-search form input[type='submit'] {
     469    width: auto;
     470  }
     471  #buddypress div.message-search {
     472    margin-right: 10px;
     473  }
     474}
     475@media screen and (min-width: 77.5em) {
     476  #buddypress .dir-search form input[type='text'],
     477  #buddypress .message-search form input[type='text'] {
     478    font-size: 16px;
     479    font-size: 1.6rem;
     480  }
     481  #buddypress .dir-search form input[type='submit'],
     482  #buddypress .message-search form input[type='submit'] {
     483    font-size: 16px;
     484    font-size: 1.6rem;
     485  }
     486}
     487
     488/**
     489*-------------------------------------------------------------------------------
     490* @section 9.0 - Tables - General
     491*-------------------------------------------------------------------------------
     492*/
     493#buddypress table {
     494  font-size: 14px;
     495  font-size: 1.4rem;
     496  margin: 20px 0;
     497}
     498@media screen and (min-width: 55em) {
     499  #buddypress table {
     500    font-size: 16px;
     501    font-size: 1.6rem;
     502  }
     503}
     504
     505/*__ User Account tables __*/
     506#buddypress .notifications th,
     507#buddypress .messages-notices th {
     508  width: 30%;
     509}
     510#buddypress .notifications th.bulk-select-all,
     511#buddypress .messages-notices th.bulk-select-all {
     512  text-align: center;
     513  width: 10%;
     514}
     515#buddypress .notifications .bulk-select-check,
     516#buddypress .messages-notices .bulk-select-check {
     517  text-align: center;
     518}
     519#buddypress .notifications .notification-actions,
     520#buddypress .notifications td.thread-options,
     521#buddypress .messages-notices .notification-actions,
     522#buddypress .messages-notices td.thread-options {
     523  text-align: center;
     524}
     525#buddypress .notifications .notification-actions a,
     526#buddypress .notifications td.thread-options a,
     527#buddypress .messages-notices .notification-actions a,
     528#buddypress .messages-notices td.thread-options a {
     529  display: inline-block;
     530  margin: 0;
     531  padding: 0;
     532}
     533#buddypress .notifications td .button,
     534#buddypress .messages-notices td .button {
     535  border: 0;
     536  display: block;
     537  padding: 0;
     538  text-align: center;
     539}
     540
     541/*# sourceMappingURL=twentyfifteen.css.map */

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

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