Skip to:
Content

BuddyPress.org

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

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

format corrections

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

     
     1/*--------------------------------------------------------------
     2
     3This is the BuddyPress companion stylesheet for
     4the WordPress Twentyfifteen theme.
     5
     6This sheet supports the primary BuddyPress styles in buddypress.css
     7
     8The Rulesets shadow the BP default stylesheet sectioning
     9to maintain uniformity.
     10
     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    left: 10%;
     287    position: relative;
     288    width: 55%;
     289  }
     290}
     291#buddypress ul.item-list li div.action {
     292  clear: left;
     293  float: none;
     294  margin-bottom: -20px;
     295  margin-left: 0;
     296  padding: 20px 0 5px;
     297  position: relative;
     298  text-align: left;
     299  top: 0;
     300}
     301@media screen and (min-width: 59.6875em) {
     302  #buddypress ul.item-list li div.action {
     303    clear: none;
     304    float: right;
     305    margin-bottom: 0;
     306    padding: 0;
     307  }
     308}
     309#buddypress ul.item-list li div.action div {
     310  display: inline-block;
     311  margin: 10px 0;
     312  width: 100%;
     313}
     314#buddypress ul.item-list li div.action div a {
     315  display: block;
     316  width: 100%;
     317}
     318@media screen and (min-width: 38.75em) {
     319  #buddypress ul.item-list li div.action div {
     320    margin: 0 10px 10px 0;
     321    width: auto;
     322  }
     323}
     324@media screen and (min-width: 59.6875em) {
     325  #buddypress ul.item-list li div.action div {
     326    clear: right;
     327    float: right;
     328    margin: 0 0 10px 0;
     329  }
     330}
     331#buddypress ul.item-list li div.action .meta {
     332  font-style: italic;
     333}
     334
     335/**
     336*-------------------------------------------------------------------------------
     337* @section 4.1 - Activity
     338*-------------------------------------------------------------------------------
     339*/
     340/**
     341*-------------------------------------------------------------------------------
     342* @section 4.1.2 - Activity Whats New
     343*-------------------------------------------------------------------------------
     344*/
     345#buddypress form#whats-new-form textarea {
     346  width: 100%;
     347}
     348#buddypress form#whats-new-form #whats-new-options[style] {
     349  min-height: 6rem;
     350}
     351#buddypress #item-body form#whats-new-form {
     352  margin: 40px 0;
     353}
     354
     355/**
     356*-------------------------------------------------------------------------------
     357* @section 4.1.2 - Activity Listing
     358*-------------------------------------------------------------------------------
     359*/
     360#buddypress .activity-list .activity-content {
     361  margin-top: -12px;
     362}
     363#buddypress .activity-list .activity-content .activity-header img.avatar {
     364  display: inline-block;
     365}
     366#buddypress .activity-list .load-more a {
     367  display: block;
     368}
     369
     370/**
     371*-------------------------------------------------------------------------------
     372* @section 4.2 - Members Loop
     373*-------------------------------------------------------------------------------
     374*/
     375@media screen and (min-width: 59.6875em) {
     376  #buddypress #members-list li .item-avatar,
     377  #buddypress #members-list li .item {
     378    float: left;
     379  }
     380  #buddypress #members-list li .action {
     381    float: right;
     382  }
     383}
     384
     385/**
     386*-------------------------------------------------------------------------------
     387* @section 7.0 - Single User Account Screens
     388*-------------------------------------------------------------------------------
     389*/
     390.bp-user .entry-title {
     391  margin-bottom: .5em;
     392}
     393@media screen and (min-width: 77.5em) {
     394  .bp-user #buddypress #groups-list li .item {
     395    left: 5%;
     396    width: 50%;
     397  }
     398}
     399
     400/**
     401*-------------------------------------------------------------------------------
     402* @section 8.0 - Forms  - General
     403*-------------------------------------------------------------------------------
     404*/
     405#buddypress #item-body .standard-form li {
     406  float: none;
     407}
     408#buddypress #item-body .standard-form input[type='text'],
     409#buddypress #item-body .standard-form textarea {
     410  width: 100%;
     411}
     412#buddypress div.dir-search,
     413#buddypress div.message-search {
     414  float: none;
     415  margin: 10px 0;
     416}
     417#buddypress div.dir-search form,
     418#buddypress div.message-search form {
     419  border: 1px solid rgba(153, 153, 153, 0.4);
     420  overflow: hidden;
     421}
     422#buddypress div.dir-search form label,
     423#buddypress div.message-search form label {
     424  float: left;
     425  width: 80%;
     426}
     427#buddypress div.dir-search form input[type='text'],
     428#buddypress div.message-search form input[type='text'] {
     429  float: left;
     430  margin: 0;
     431  width: 80%;
     432}
     433#buddypress div.dir-search form input[type='text'],
     434#buddypress div.dir-search form input[type='submit'],
     435#buddypress div.message-search form input[type='text'],
     436#buddypress div.message-search form input[type='submit'] {
     437  font-size: 14px;
     438  font-size: 1.4rem;
     439  border: 0;
     440  line-height: inherit;
     441}
     442#buddypress div.dir-search form input[type='text'],
     443#buddypress div.message-search form input[type='text'] {
     444  border-right: 1px solid rgba(153, 153, 153, 0.4);
     445  padding: 0.2em 0 0.2em 0.2em;
     446}
     447#buddypress div.dir-search form input[type='submit'],
     448#buddypress div.message-search form input[type='submit'] {
     449  float: right;
     450  font-weight: normal;
     451  padding: 0.2em 1em;
     452  text-align: center;
     453  text-transform: none;
     454  width: 20%;
     455}
     456@media screen and (min-width: 38.75em) {
     457  #buddypress div.dir-search,
     458  #buddypress div.message-search {
     459    float: right;
     460    margin-bottom: 5px !important;
     461  }
     462  #buddypress div.dir-search form label,
     463  #buddypress div.dir-search form input[type='text'],
     464  #buddypress div.dir-search form input[type='submit'],
     465  #buddypress div.message-search form label,
     466  #buddypress div.message-search form input[type='text'],
     467  #buddypress div.message-search form input[type='submit'] {
     468    width: auto;
     469  }
     470  #buddypress div.message-search {
     471    margin-right: 10px;
     472  }
     473}
     474@media screen and (min-width: 77.5em) {
     475  #buddypress .dir-search form input[type='text'],
     476  #buddypress .message-search form input[type='text'] {
     477    font-size: 16px;
     478    font-size: 1.6rem;
     479  }
     480  #buddypress .dir-search form input[type='submit'],
     481  #buddypress .message-search form input[type='submit'] {
     482    font-size: 16px;
     483    font-size: 1.6rem;
     484  }
     485}
     486
     487/**
     488*-------------------------------------------------------------------------------
     489* @section 9.0 - Tables - General
     490*-------------------------------------------------------------------------------
     491*/
     492#buddypress table {
     493  font-size: 14px;
     494  font-size: 1.4rem;
     495  margin: 20px 0;
     496}
     497@media screen and (min-width: 55em) {
     498  #buddypress table {
     499    font-size: 16px;
     500    font-size: 1.6rem;
     501  }
     502}
     503
     504/*__ User Account tables __*/
     505#buddypress .notifications th,
     506#buddypress .messages-notices th {
     507  width: 30%;
     508}
     509#buddypress .notifications th.bulk-select-all,
     510#buddypress .messages-notices th.bulk-select-all {
     511  text-align: center;
     512  width: 10%;
     513}
     514#buddypress .notifications .bulk-select-check,
     515#buddypress .messages-notices .bulk-select-check {
     516  text-align: center;
     517}
     518#buddypress .notifications .notification-actions,
     519#buddypress .notifications td.thread-options,
     520#buddypress .messages-notices .notification-actions,
     521#buddypress .messages-notices td.thread-options {
     522  text-align: center;
     523}
     524#buddypress .notifications .notification-actions a,
     525#buddypress .notifications td.thread-options a,
     526#buddypress .messages-notices .notification-actions a,
     527#buddypress .messages-notices td.thread-options a {
     528  display: inline-block;
     529  margin: 0;
     530  padding: 0;
     531}
     532#buddypress .notifications td .button,
     533#buddypress .messages-notices td .button {
     534  border: 0;
     535  display: block;
     536  padding: 0;
     537  text-align: center;
     538}
     539
     540/*# 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
     241                                select,
     242                                label,
     243                                option {
     244                                        @include font-size(14);
     245                                }
     246
     247                                select {
     248                                        font-style: italic;
     249                                }
     250                        }
     251
     252                        @media screen and (min-width: 38.75em) {
     253                                li.last {
     254                                        text-align: right;
     255                                }
     256                        }
     257                } // close ul
     258        } // close #subnav
     259
     260        // active/current states all navs
     261        div.item-list-tabs {
     262                ul {
     263                        li.selected,
     264                        li.current {
     265                                a {
     266                                        background: $dark-background;
     267                                        color: #fff;
     268                                        opacity: 1;
     269                                }
     270                        }
     271                }
     272        }
     273
     274} // close #buddypress
     275
     276        /*__ Vertical menu User account screens __*/
     277
     278// This block contains the rules to re-factor the item-body structural element
     279// to sit alongside the vert menu
     280// Structural layout and faux column styling of backgrounds is more suited
     281// to the earlier section. todo: re-position sort out when known what styles
     282// are being used.
     283
     284@media screen and (min-width: 55em) {
     285        .bp-user #buddypress {
     286                background: $light-background;
     287
     288                #item-header,
     289                #item-body {
     290                        background: $content-background;
     291                }
     292
     293                #object-nav {
     294                        border-right: 1px solid rgba($border-color, .1);
     295                        float: left;
     296                        margin-right: -1px;
     297                        width: 200px;
     298
     299                        ul {
     300                                border-bottom: 0;
     301                                padding: 0;
     302
     303                                li {
     304                                        float: none;
     305                                        overflow: hidden;
     306
     307                                        span {
     308                                                border-radius: 10%;
     309                                                float: right;
     310                                                margin-right: 15px;
     311                                        }
     312                                }
     313                        }
     314                }
     315
     316                #item-body {
     317                        border-left: 1px solid #ddd;
     318                        overflow: hidden;
     319                        padding: 0 $spacing-val-sm;
     320                        width: auto;
     321
     322                        #subnav {
     323                                margin: 0 (-$spacing-val-sm);
     324                        }
     325                }
     326
     327        } // close .bp-user #buddypress
     328} // close @media
     329
     330/**
     331*-------------------------------------------------------------------------------
     332* @section 2.2 - Pagination
     333*-------------------------------------------------------------------------------
     334*/
     335
     336#buddypress {
     337        div.pagination {
     338                box-shadow: none;
     339                .pag-count {margin-left: 0;}
     340                .pagination-links {
     341                        margin-right: 0;
     342
     343                        span,
     344                        a {
     345                                height: auto;
     346                                line-height: 1;
     347                                padding: 5px;
     348                        }
     349
     350                        .prev,
     351                        .next {
     352                                background-color: transparent;
     353                                color: inherit;
     354                                overflow: visible;
     355                                width: auto;
     356                                &:before {display: none;}
     357                        }
     358
     359                        .prev {
     360                                left: auto;
     361                                position: static;
     362                        }
     363
     364                        .next {
     365                                position: static;
     366                                right: auto;
     367                        }
     368                } // close .pagination-links
     369        } // close .pagination
     370} // close #buddypress
     371
     372/**
     373*-------------------------------------------------------------------------------
     374* @section 4.0 - BP Lists / Loops Generic
     375*-------------------------------------------------------------------------------
     376*/
     377
     378// Trying to position the action div absolute has bad consequences where
     379// aditional items are displayed, floating is an alternative but may need
     380// to reconsider this approach. All li items floated left at wide screen.
     381// Initialy override the BP absolute positioning, allow natural flow position
     382// mobile up.
     383
     384#buddypress {
     385        ul.item-list {
     386                li {
     387                        overflow: hidden !important;
     388                       
     389                        .item {
     390                                .item-desc {
     391                                        margin-left: 0;
     392                                        width: auto;
     393                                }
     394                        }
     395
     396                        @media screen and (min-width: 59.6875em) {
     397                                .item-avatar,
     398                                .item,
     399                                .action {
     400                                        float: left;
     401                                }
     402
     403                                .item {
     404                                        left: 10%;
     405                                        position: relative;
     406                                        width: 55%;
     407                                }
     408                        }// close @media
     409                       
     410                        div.action {
     411                                clear: left;
     412                                float: none;
     413                                margin-bottom: -$spacing-val-md;
     414                                // remove BP margin left
     415                                margin-left: 0;
     416                                padding: $spacing-val-md 0 $spacing-val-xs;
     417                                // push the actions to the right
     418                                @media screen and (min-width: 59.6875em) {
     419                                        clear: none;
     420                                        float: right;
     421                                        margin-bottom: 0;
     422                                        padding: 0;
     423                                }
     424                                position: relative;
     425                                text-align: left;
     426                                top: 0;
     427
     428                                div {
     429                                        display: inline-block;
     430                                        margin: $spacing-val-sm 0;
     431                                        width: 100%;
     432
     433                                        a {
     434                                                display: block;
     435                                                width: 100%;
     436                                        }
     437                                        // Provisionally lets keep the 'action' div
     438                                        //position but inline-block the buttons
     439                                        @media screen and (min-width: 38.75em) {
     440                                                // keep buttons to a row small tablet up
     441                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
     442                                                width: auto;
     443                                        } // close @media
     444                                        @media screen and (min-width: 59.6875em) {
     445                                                // take buttons to block to stack them when floated right
     446                                                clear: right;
     447                                                float: right;
     448                                                margin: 0 0 $spacing-val-sm 0;
     449                                        } // close @media
     450                                       
     451                                } // close div
     452                               
     453                                .meta {
     454                                        font-style: italic;
     455                                }
     456
     457                        } // close .action
     458
     459                } // close li
     460        } // close .item-list
     461} // close #buddypress
     462
     463/**
     464*-------------------------------------------------------------------------------
     465* @section 4.1 - Activity
     466*-------------------------------------------------------------------------------
     467*/
     468
     469/**
     470*-------------------------------------------------------------------------------
     471* @section 4.1.2 - Activity Whats New
     472*-------------------------------------------------------------------------------
     473*/
     474
     475#buddypress {
     476        form#whats-new-form {
     477                textarea {width: 100%;}
     478                // corrective measure for clipped elements due to JS inline styling
     479                #whats-new-options[style] {
     480                        min-height: 6rem; // unit open to debate px value might be better.
     481                }
     482        }
     483        // User account form requires matching bp default specificity
     484        #item-body {
     485                form#whats-new-form {
     486                        margin: $spacing-val-lg 0;
     487                }
     488        }
     489} // close #buddypress
     490
     491/**
     492*-------------------------------------------------------------------------------
     493* @section 4.1.2 - Activity Listing
     494*-------------------------------------------------------------------------------
     495*/
     496
     497#buddypress {
     498        .activity-list {
     499                .activity-content {
     500                        margin-top: -12px;
     501
     502                        .activity-header {
     503                                img.avatar {
     504                                        display: inline-block;
     505                                }
     506                        } // close .activity-header
     507                } // close .activity-content
     508                .load-more a {display: block;}
     509        } // close .activity-list
     510
     511} // close #buddypress
     512
     513/**
     514*-------------------------------------------------------------------------------
     515* @section 4.2 - Members Loop
     516*-------------------------------------------------------------------------------
     517*/
     518
     519#buddypress {
     520        #members-list {
     521                @media screen and (min-width: 59.6875em) {
     522                        li {
     523                                .item-avatar,
     524                                .item {
     525                                        float: left;
     526                                }
     527
     528                                .action {
     529                                        float: right;
     530                                }
     531                        }
     532                }
     533        }
     534} //close #BuddyPress
     535
     536/**
     537*-------------------------------------------------------------------------------
     538* @section 7.0 - Single User Account Screens
     539*-------------------------------------------------------------------------------
     540*/
     541
     542.bp-user {
     543        .entry-title {margin-bottom: .5em;}
     544       
     545        #buddypress {
     546                #groups-list {
     547                        li {
     548                                .item {
     549                                        @media screen and (min-width: 77.5em) {
     550                                                left: 5%;
     551                                                width: 50%;
     552                                        }
     553                                }
     554                        }
     555                }
     556        }
     557} // close .bp-user
     558
     559/**
     560*-------------------------------------------------------------------------------
     561* @section 8.0 - Forms  - General
     562*-------------------------------------------------------------------------------
     563*/
     564
     565// 2015 applies 100% width to form element, remove this initially for BP search
     566
     567#buddypress {
     568
     569        // Manage form control widths under #item-body in user account screens
     570        #item-body {
     571                .standard-form {
     572                        li {float: none;}
     573                        input[type='text'],
     574                        textarea {
     575                                width: 100%;
     576                        }
     577                }
     578        }
     579
     580        div.dir-search,
     581        div.message-search {
     582                float: none;
     583                margin: $spacing-val-sm 0;
     584
     585                // Stylise the seach form elements, in part this deals with padding
     586                // issues on the submit & sizing issues between bp styles & twentyfifteen
     587
     588                form { // *sigh* only to bludgeon over specified rules
     589                        border: 1px solid rgba($border-color, 0.4);
     590                        overflow: hidden;
     591
     592                        label {
     593                                float: left;
     594                                width: 80%;
     595                        }
     596
     597                        input[type='text'] {
     598                                float: left;
     599                                margin: 0;
     600                                width: 80%;
     601                        }
     602
     603                        input[type='text'],
     604                        input[type='submit'] {
     605                                @include font-size(14);
     606                                border: 0;
     607                                line-height: inherit;
     608                        }
     609
     610                        input[type='text'] {
     611                                border-right: 1px solid rgba($border-color, 0.4);
     612                                padding: 0.2em 0 0.2em 0.2em;
     613                        }
     614
     615                        input[type='submit'] {
     616                                float: right;
     617                                font-weight: normal;
     618                                padding: 0.2em 1em;
     619                                text-align: center;
     620                                text-transform: none;
     621                                width: 20%;
     622                        }
     623                }// close form
     624
     625        } // close .dir-search, .message-search
     626
     627        // Shift the search parent to the right and allow to shrinkwrap
     628        @media screen and (min-width: 38.75em) {
     629                div.dir-search,
     630                div.message-search {
     631                        float: right;
     632                        margin-bottom: 5px !important;
     633
     634                        form {
     635                                label,
     636                                input[type='text'],
     637                                input[type='submit'] {
     638                                        width: auto;
     639                                }
     640                        }
     641                }
     642
     643                div.message-search {margin-right: $spacing-val-sm;}
     644        } // close @media
     645
     646        // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     647//      @media screen and (min-width: 59.6875em) {
     648//              .dir-search,
     649//       .message-search {
     650        //              form {
     651        //                      input[type='text'] { @include font-size(14) ;}
     652        //                      input[type='submit'] {@include font-size(14);}
     653        //              }
     654        //      }
     655//      }
     656
     657        @media screen and (min-width: 77.5em) {
     658
     659                .dir-search,
     660                .message-search {
     661                        form {
     662                                input[type='text'] { @include font-size(16) ;}
     663                                input[type='submit'] { @include font-size(16) ;}
     664                        }
     665                }
     666        }
     667
     668} // close #buddypress
     669
     670/**
     671*-------------------------------------------------------------------------------
     672* @section 9.0 - Tables - General
     673*-------------------------------------------------------------------------------
     674*/
     675
     676// Adjust table font sizes, default too large proportionally
     677// This approach will require refinement and perhaps re-location to
     678// a more general typography section to manage BP elements grouped under
     679// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     680#buddypress {
     681        table {
     682                @include font-size(14);
     683                margin: $spacing-val-md 0;
     684        }
     685
     686        @media screen and (min-width: 55em) {
     687                table {@include font-size(16);}
     688        }
     689}
     690
     691/*__ User Account tables __*/
     692
     693#buddypress {
     694
     695        // Manage some table cells widths that are disproportionate to their content
     696        .notifications,
     697        .messages-notices {
     698                th {
     699                        width: 30%;
     700
     701                        &.bulk-select-all {
     702                                text-align: center;
     703                                width: 10%;
     704                        }
     705                }
     706
     707                .bulk-select-check {text-align: center;}
     708                .notification-actions,
     709                td.thread-options {
     710                        text-align: center;
     711
     712                        a {
     713                                display: inline-block;
     714                                margin: 0;
     715                                padding: 0;
     716                        }
     717                }
     718
     719                // Notices action buttons, this maybe better moved, temp for now to address
     720                // styling issues - this will need styling ideas
     721                td {
     722                        .button {
     723                                border: 0;
     724                                display: block;
     725                                padding: 0;
     726                                text-align: center;
     727                        }
     728                }
     729
     730        } // .notifications, .message-notices
     731} // #buddypress