Skip to:
Content

BuddyPress.org

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

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

Correct format errors.

  • 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  width: 100%;
     312  margin: 10px 0;
     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                                        width: 100%;
     431                                        a {
     432                                                display: block;
     433                                                width: 100%;
     434                                        }
     435                                        // Provisionally lets keep the 'action' div
     436                                        //position but inline-block the buttons
     437                                        @media screen and (min-width: 38.75em) {
     438                                                // keep buttons to a row small tablet up
     439                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
     440                                                width: auto;
     441                                        } // close @media
     442                                        @media screen and (min-width: 59.6875em) {
     443                                                // take buttons to block to stack them when floated right
     444                                                clear: right;
     445                                                float: right;
     446                                                margin: 0 0 $spacing-val-sm 0;
     447                                        } // close @media
     448                                        margin: $spacing-val-sm 0;
     449                                } // close div
     450                                .meta {font-style: italic;}
     451                        } // close .action
     452
     453                } // close li
     454        } // close .item-list
     455} // close #buddypress
     456
     457/**
     458*-------------------------------------------------------------------------------
     459* @section 4.1 - Activity
     460*-------------------------------------------------------------------------------
     461*/
     462
     463/**
     464*-------------------------------------------------------------------------------
     465* @section 4.1.2 - Activity Whats New
     466*-------------------------------------------------------------------------------
     467*/
     468
     469#buddypress {
     470        form#whats-new-form {
     471                textarea {width: 100%;}
     472                // corrective measure for clipped elements due to JS inline styling
     473                #whats-new-options[style] {
     474                        min-height: 6rem; // unit open to debate px value might be better.
     475                }
     476        }
     477        // User account form requires matching bp default specificity
     478        #item-body {
     479                form#whats-new-form {
     480                        margin: $spacing-val-lg 0;
     481                }
     482        }
     483} // close #buddypress
     484
     485/**
     486*-------------------------------------------------------------------------------
     487* @section 4.1.2 - Activity Listing
     488*-------------------------------------------------------------------------------
     489*/
     490
     491#buddypress {
     492        .activity-list {
     493                .activity-content {
     494                        margin-top: -12px;
     495
     496                        .activity-header {
     497                                img.avatar {
     498                                        display: inline-block;
     499                                }
     500                        } // close .activity-header
     501                } // close .activity-content
     502                .load-more a {display: block;}
     503        } // close .activity-list
     504
     505} // close #buddypress
     506
     507/**
     508*-------------------------------------------------------------------------------
     509* @section 4.2 - Members Loop
     510*-------------------------------------------------------------------------------
     511*/
     512
     513#buddypress {
     514        #members-list {
     515                @media screen and (min-width: 59.6875em) {
     516                        li {
     517                                .item-avatar,
     518                                .item {
     519                                        float: left;
     520                                }
     521
     522                                .action {
     523                                        float: right;
     524                                }
     525                        }
     526                }
     527        }
     528} //close #BuddyPress
     529
     530/**
     531*-------------------------------------------------------------------------------
     532* @section 7.0 - Single User Account Screens
     533*-------------------------------------------------------------------------------
     534*/
     535
     536.bp-user {
     537        .entry-title {margin-bottom: .5em;}
     538       
     539        #buddypress {
     540                #groups-list {
     541                        li {
     542                                .item {
     543                                        @media screen and (min-width: 77.5em) {
     544                                                left: 5%;
     545                                                width: 50%;
     546                                        }
     547                                }
     548                        }
     549                }
     550        }
     551} // close .bp-user
     552
     553/**
     554*-------------------------------------------------------------------------------
     555* @section 8.0 - Forms  - General
     556*-------------------------------------------------------------------------------
     557*/
     558
     559// 2015 applies 100% width to form element, remove this initially for BP search
     560
     561#buddypress {
     562
     563        // Manage form control widths under #item-body in user account screens
     564        #item-body {
     565                .standard-form {
     566                        li {float: none;}
     567                        input[type='text'],
     568                        textarea {
     569                                width: 100%;
     570                        }
     571                }
     572        }
     573
     574        div.dir-search,
     575        div.message-search {
     576                float: none;
     577                margin: $spacing-val-sm 0;
     578
     579                // Stylise the seach form elements, in part this deals with padding
     580                // issues on the submit & sizing issues between bp styles & twentyfifteen
     581
     582                form { // *sigh* only to bludgeon over specified rules
     583                        border: 1px solid rgba($border-color, 0.4);
     584                        overflow: hidden;
     585
     586                        label {
     587                                float: left;
     588                                width: 80%;
     589                        }
     590
     591                        input[type='text'] {
     592                                float: left;
     593                                margin: 0;
     594                                width: 80%;
     595                        }
     596
     597                        input[type='text'],
     598                        input[type='submit'] {
     599                                @include font-size(14);
     600                                border: 0;
     601                                line-height: inherit;
     602                        }
     603
     604                        input[type='text'] {
     605                                border-right: 1px solid rgba($border-color, 0.4);
     606                                padding: 0.2em 0 0.2em 0.2em;
     607                        }
     608
     609                        input[type='submit'] {
     610                                float: right;
     611                                font-weight: normal;
     612                                padding: 0.2em 1em;
     613                                text-align: center;
     614                                text-transform: none;
     615                                width: 20%;
     616                        }
     617                }// close form
     618
     619        } // close .dir-search, .message-search
     620
     621        // Shift the search parent to the right and allow to shrinkwrap
     622        @media screen and (min-width: 38.75em) {
     623                div.dir-search,
     624                div.message-search {
     625                        float: right;
     626                        margin-bottom: 5px !important;
     627
     628                        form {
     629                                label,
     630                                input[type='text'],
     631                                input[type='submit'] {
     632                                        width: auto;
     633                                }
     634                        }
     635                }
     636
     637                div.message-search {margin-right: $spacing-val-sm;}
     638        } // close @media
     639
     640        // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     641//      @media screen and (min-width: 59.6875em) {
     642//              .dir-search,
     643//       .message-search {
     644        //              form {
     645        //                      input[type='text'] { @include font-size(14) ;}
     646        //                      input[type='submit'] {@include font-size(14);}
     647        //              }
     648        //      }
     649//      }
     650
     651        @media screen and (min-width: 77.5em) {
     652
     653                .dir-search,
     654                .message-search {
     655                        form {
     656                                input[type='text'] { @include font-size(16) ;}
     657                                input[type='submit'] { @include font-size(16) ;}
     658                        }
     659                }
     660        }
     661
     662} // close #buddypress
     663
     664/**
     665*-------------------------------------------------------------------------------
     666* @section 9.0 - Tables - General
     667*-------------------------------------------------------------------------------
     668*/
     669
     670// Adjust table font sizes, default too large proportionally
     671// This approach will require refinement and perhaps re-location to
     672// a more general typography section to manage BP elements grouped under
     673// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     674#buddypress {
     675        table {
     676                @include font-size(14);
     677                margin: $spacing-val-md 0;
     678        }
     679
     680        @media screen and (min-width: 55em) {
     681                table {@include font-size(16);}
     682        }
     683}
     684
     685/*__ User Account tables __*/
     686
     687#buddypress {
     688
     689        // Manage some table cells widths that are disproportionate to their content
     690        .notifications,
     691        .messages-notices {
     692                th {
     693                        width: 30%;
     694
     695                        &.bulk-select-all {
     696                                text-align: center;
     697                                width: 10%;
     698                        }
     699                }
     700
     701                .bulk-select-check {text-align: center;}
     702                .notification-actions,
     703                td.thread-options {
     704                        text-align: center;
     705
     706                        a {
     707                                display: inline-block;
     708                                margin: 0;
     709                                padding: 0;
     710                        }
     711                }
     712
     713                // Notices action buttons, this maybe better moved, temp for now to address
     714                // styling issues - this will need styling ideas
     715                td {
     716                        .button {
     717                                border: 0;
     718                                display: block;
     719                                padding: 0;
     720                                text-align: center;
     721                        }
     722                }
     723
     724        } // .notifications, .message-notices
     725} // #buddypress