Skip to:
Content

BuddyPress.org

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

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

Updated BP list styling & general styles

  • 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 
    45 This is the BuddyPress companion stylesheet for
    46 the WordPress Twentyfifteen theme.
    47 
    48 This sheet supports the primary BuddyPress styles in buddypress.css
    49 
    50 The Rulesets shadow the BP default stylesheet sectioning
    51 to maintain uniformity.
    52 
    53 If you are running as a child theme of twentyfifteen and wish to use
    54 this stylesheet then please copy it to buddypress/css/ or community/css/
    55 in your child theme root and rename the file to match your child theme name
    56 i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
    57 'twentyfifteen-child.css'
    58 
    59 ----------------------------------------------------------------
    60 >>> TABLE OF CONTENTS:
    61 ----------------------------------------------------------------
    62 1.0 Theme Structural Elements
    63 2.0 - Navigation - General
    64         2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
    65         2.2 - Pagination
    66 3.0 - Images
    67 4.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
    74 5.0 - Directories - Members, Groups, Blogs, Forums
    75 6.0 - Single Group Screens
    76 7.0 - Single User Account Screens
    77         7.1 - Notifications
    78         7.2 - Private Messaging Threads
    79         7.3 - Extended Profiles
    80         7.4 - Settings
    81 8.0 - Forms  -  General
    82 9.0 - Tables -  General
    83 10.0 - Error / Success Messages
    84 11.0 - Ajax Loading
    85 12.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
     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$body-text:          #333; // 2015 body text color
     43$bp-button-hover:    #ededed; // this is the default BP button hover background
     44/*--------------------------------------------------------------
     45
     46This is the BuddyPress companion stylesheet for
     47the WordPress Twentyfifteen theme.
     48
     49This sheet supports the primary BuddyPress styles in buddypress.css
     50
     51The Rulesets shadow the BP default stylesheet sectioning
     52to maintain uniformity.
     53
     54If you are running as a child theme of twentyfifteen and wish to use
     55this stylesheet then please copy it to buddypress/css/ or community/css/
     56in your child theme root and rename the file to match your child theme name
     57i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
     58'twentyfifteen-child.css'
     59
     60----------------------------------------------------------------
     61>>> TABLE OF CONTENTS:
     62----------------------------------------------------------------
     631.0 Theme Structural Elements
     642.0 - Navigation - General
     65        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     66        2.2 - Pagination
     673.0 - Images
     684.0 - BP Lists / Loops Generic
     69        4.1 - Activity Loop
     70                4.1.1 Whats New Activity
     71                4.1.2 - Activity Listing
     72                4.1.3 - Activity Comments
     73        4.2 - Members Loop
     74        4.3 - Groups Loop
     75        4.4 - Blogs Loop
     765.0 - Directories - Members, Groups, Blogs, Forums
     776.0 - Single Group Screens
     787.0 - Single User Account Screens
     79        7.1 - Notifications
     80        7.2 - Private Messaging Threads
     81        7.3 - Extended Profiles
     82        7.4 - Settings
     838.0 - Forms  -  General
     849.0 - Tables -  General
     8510.0 - Error / Success Messages
     8611.0 - Ajax Loading
     8712.0 - Widgets
     88--------------------------------------------------------------*/
     89
     90/**
     91*-------------------------------------------------------------------------------
     92* @section 1.0 - Theme - Structural Elements
     93*-------------------------------------------------------------------------------
     94*/
     95
     96// As BP screens have specific content lets adjust the themes primary elements
     97// to maximise the screen real estate for BP pages.
     98
     99.buddypress {
     100        div.clear {display: none;}
     101        .site-content {
     102                @media screen and (min-width: 77.5em) {
     103                }
     104        }
     105
     106        main {
     107                padding-top: 4%;
     108                @media screen and (min-width: 59.6875em) {
     109                        padding-top: 0;
     110                }
     111
     112                article {
     113                        margin: 0 4%;
     114                        padding-top: 8.3333%;
     115                        @media screen and (min-width: 59.6875em) {
     116                                margin: 0 0 0 1px;
     117                        }
     118                        @media screen and (min-width: 87.6875em) {
     119                                margin: 0 4.3333% 0 8.3333%;
     120                        }
     121
     122                        .entry-header,
     123                        .entry-content {
     124                                padding: 0 2rem 2rem;
     125                        }
     126
     127                        #buddypress {
     128                                margin-bottom: $spacing-val-lg;
     129                        }
     130                } // .article
     131        } // .main
     132        .site-footer {
     133                margin: 0 4%;
     134                @media screen and (min-width: 59.6875em) {
     135                        margin: 0 0 0 35.2941%;
     136                        width: 61.8235%;
     137                }
     138        }
     139} // .buddypress (body class)
     140
     141/**
     142*-------------------------------------------------------------------------------
     143* @section 2.0 - Navigation - General
     144*-------------------------------------------------------------------------------
     145*/
     146
     147// Remove 2015 border bottom on BP links/spans
     148
     149.buddypress #buddypress {
     150        .item-list-tabs,
     151        .activity-header,
     152        .activity-inner,
     153        .activity-comments,
     154        .item-title,
     155        .load-more,
     156        .field-visibility-settings-toggle,
     157        #latest-update,
     158        table, {
     159                a { border-bottom: 0; }
     160        }
     161
     162        .pagination-links {
     163                a,
     164                span { border-bottom: 0; }
     165        }
     166} // close .buddypress #buddypress
     167
     168/**
     169*-------------------------------------------------------------------------------
     170* @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     171*-------------------------------------------------------------------------------
     172*
     173* @description The main navigational elements for BP screens
     174*/
     175
     176// We have a need to override BP specifity
     177// so some rulesets sets are seemingly over weighted in selectors
     178
     179#buddypress {
     180
     181        // active/current states all navs
     182        div.item-list-tabs {
     183                ul {
     184                        li.selected {
     185                                a {
     186                                        background: $dark-background;
     187                                        color: #fff;
     188                                        opacity: 1;
     189                                }
     190                        }
     191                }
     192        }
     193        // Global Nav Styles
     194        div.item-list-tabs {
     195                ul {
     196                        background-color: $light-background;
     197                        border-bottom: 1px solid rgba($border-color, 0.4);
     198                        overflow: hidden;
     199                        padding: $spacing-val-xs 0;
     200                       
     201                        li {
     202                                a {
     203                                        span {border-radius: 25%;}
     204                                }
     205                        }
     206                }
     207        }
     208        /*__ Horizontal menus __*/
     209        #object-nav {
     210                ul {
     211        //              background-color: #eee;
     212        //              border-bottom: 1px solid #ddd;
     213                        overflow: hidden;
     214                        li {float: none;}
     215                        li:not(.selected) {
     216                                a {opacity: 0.7;}
     217                        }
     218
     219                        @media screen and (min-width: 38.75em) {
     220                                li {
     221                                        float: left;
     222                                }
     223                                //      li:nth-child(1n+7) {clear: left;}
     224                        }
     225                }
     226        }
     227
     228        div#subnav.item-list-tabs {
     229                margin-top: 0;
     230
     231                ul {
     232                        background-color: $light-background;
     233                        border-bottom: 0;
     234                        padding: 0;
     235
     236                        li.last {
     237                                background: $content-background;
     238                                margin-top: 0;
     239                                padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
     240                                width: 100%;
     241
     242                                select,
     243                                select:focus {
     244                                        background: transparent;
     245                                        border: 0;
     246                                        outline: 0;
     247                                }
     248
     249                                select,
     250                                label,
     251                                option {
     252                                        @include font-size(14);
     253                                }
     254
     255                                select {
     256                                        font-style: italic;
     257                                }
     258                        }
     259
     260                        @media screen and (min-width: 38.75em) {
     261                                li.last {
     262                                        text-align: right;
     263                                }
     264                        }
     265                } // close ul
     266        } // close #subnav
     267
     268        // active/current states all navs
     269        div.item-list-tabs {
     270                ul {
     271                        li.selected,
     272                        li.current {
     273                                a {
     274                                        background: $dark-background;
     275                                        color: #fff;
     276                                        opacity: 1;
     277                                }
     278                        }
     279                }
     280        }
     281
     282} // close #buddypress
     283
     284        /*__ Vertical menu User account screens __*/
     285
     286// This block contains the rules to re-factor the item-body structural element
     287// to sit alongside the vert menu
     288// Structural layout and faux column styling of backgrounds is more suited
     289// to the earlier section. todo: re-position sort out when known what styles
     290// are being used.
     291
     292@media screen and (min-width: 55em) {
     293        .bp-user #buddypress {
     294                background: $light-background;
     295
     296                #item-header,
     297                #item-body {
     298                        background: $content-background;
     299                }
     300
     301                #object-nav {
     302                        border-right: 1px solid rgba($border-color, .1);
     303                        float: left;
     304                        margin-right: -1px;
     305                        width: 200px;
     306
     307                        ul {
     308                                border-bottom: 0;
     309                                padding: 0;
     310
     311                                li {
     312                                        float: none;
     313                                        overflow: hidden;
     314
     315                                        span {
     316                                                border-radius: 10%;
     317                                                float: right;
     318                                                margin-right: 15px;
     319                                        }
     320                                }
     321                        }
     322                }
     323
     324                #item-body {
     325                        border-left: 1px solid #ddd;
     326                        overflow: hidden;
     327                        padding: 0 $spacing-val-sm;
     328                        width: auto;
     329
     330                        #subnav {
     331                                margin: 0 (-$spacing-val-sm);
     332                        }
     333                }
     334
     335        } // close .bp-user #buddypress
     336} // close @media
     337
     338/**
     339*-------------------------------------------------------------------------------
     340* @section 2.2 - Pagination
     341*-------------------------------------------------------------------------------
     342*/
     343
     344#buddypress {
     345        div.pagination {
     346                box-shadow: none;
     347                .pag-count {margin-left: 0;}
     348                .pagination-links {
     349                        margin-right: 0;
     350
     351                        span,
     352                        a {
     353                                height: auto;
     354                                line-height: 1;
     355                                padding: 5px;
     356                        }
     357
     358                        .prev,
     359                        .next {
     360                                background-color: transparent;
     361                                color: inherit;
     362                                overflow: visible;
     363                                width: auto;
     364                                &:before {display: none;}
     365                        }
     366
     367                        .prev {
     368                                left: auto;
     369                                position: static;
     370                        }
     371
     372                        .next {
     373                                position: static;
     374                                right: auto;
     375                        }
     376                } // close .pagination-links
     377        } // close .pagination
     378} // close #buddypress
     379
     380/**
     381*-------------------------------------------------------------------------------
     382* @section 4.0 - BP Lists / Loops Generic
     383*-------------------------------------------------------------------------------
     384*/
     385
     386// Trying to position the action div absolute has bad consequences where
     387// aditional items are displayed, floating is an alternative that
     388// allows natural flow expansion.
     389// This block:
     390// * Manages li items, Stacks them small screen, floated left at wider screens.
     391// * Adjusts display of action buttons at small screen
     392// mobile up.
     393
     394#buddypress {
     395        ul.item-list {
     396                li {
     397                        overflow: hidden !important;
     398                        // Undo BP floats to center avatars initially mobile up
     399                        .item-avatar {
     400                                margin-bottom: $spacing-val-sm;
     401                                @media screen and (min-width: 38.75em) { margin-bottom: 0; }
     402                                text-align: center;
     403                                a {border-bottom: 0;}
     404                                img.avatar {
     405                                        display: inline-block;
     406                                        float: none;                   
     407                                        // Quite early on we need to move avatars to the left(right)
     408                                        @media screen and (min-width: 38.75em) {
     409                                                display: block;
     410                                                float: left;
     411                                        }
     412                                }
     413                        }
     414                       
     415                        .item {
     416                                margin-left: 25%;
     417                               
     418                                span.activity {font-style: italic;}
     419                               
     420                                .item-desc {
     421                                        margin-left: 0;
     422                                        width: 70%;
     423                                }
     424                        }
     425
     426                        @media screen and (min-width: 59.6875em) {
     427                                .item-avatar,
     428                                .item,
     429                                .action {
     430                                        float: left;
     431                                }
     432
     433                                .item {
     434                                        left: 10%;
     435                                        margin-left: 0;
     436                                        position: relative;
     437                                        width: 55%;
     438                                }
     439                        }// close @media
     440                       
     441                        div.action {
     442                                clear: left;
     443                                float: none;
     444                                margin-bottom: -$spacing-val-md;
     445                                // remove BP margin left
     446                                margin-left: 0;
     447                                padding: $spacing-val-md 0 $spacing-val-xs;
     448                                // push the actions to the right
     449                                @media screen and (min-width: 59.6875em) {
     450                                        clear: none;
     451                                        float: right;
     452                                        margin-bottom: 0;
     453                                        padding: 0;
     454                                }
     455                                position: relative;
     456                                text-align: left;
     457                                top: 0;
     458
     459                                div {
     460                                        display: inline-block;
     461                                        margin: $spacing-val-sm 0;
     462                                        width: 100%;
     463
     464                                        a {
     465                                                display: block;
     466                                                width: 100%;
     467                                        }
     468                                        // Provisionally lets keep the 'action' div
     469                                        //position but inline-block the buttons
     470                                        @media screen and (min-width: 38.75em) {
     471                                                // keep buttons to a row small tablet up
     472                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
     473                                                width: auto;
     474                                        } // close @media
     475                                        @media screen and (min-width: 59.6875em) {
     476                                                // take buttons to block to stack them when floated right
     477                                                clear: right;
     478                                                float: right;
     479                                                margin: 0 0 $spacing-val-sm 0;
     480                                        } // close @media
     481                                       
     482                                } // close div
     483                               
     484                                .meta {
     485                                        font-style: italic;
     486                                }
     487
     488                        } // close .action
     489
     490                } // close li
     491        } // close .item-list
     492} // close #buddypress
     493
     494/**
     495*-------------------------------------------------------------------------------
     496* @section 4.1 - Activity
     497*-------------------------------------------------------------------------------
     498*/
     499
     500/**
     501*-------------------------------------------------------------------------------
     502* @section 4.1.1 - Activity Whats New
     503*-------------------------------------------------------------------------------
     504*/
     505
     506#buddypress {
     507        form#whats-new-form {
     508                textarea {width: 100%;}
     509                // corrective measure for clipped elements due to JS inline styling
     510                #whats-new-options[style] {
     511                        min-height: 6rem; // unit open to debate px value might be better.
     512                }
     513        }
     514        // User account form requires matching bp default specificity
     515        #item-body {
     516                form#whats-new-form {
     517                        margin: $spacing-val-lg 0;
     518                }
     519        }
     520} // close #buddypress
     521
     522/**
     523*-------------------------------------------------------------------------------
     524* @section 4.1.2 - Activity Listing
     525*-------------------------------------------------------------------------------
     526*/
     527
     528#buddypress {
     529
     530        .activity-list {
     531               
     532                // re-size activity avatars
     533                li {
     534                        .activity-avatar {
     535                                a {
     536                                        img.avatar {
     537                                                height: 60px;
     538                                                margin-left: 0;
     539                                                width: 60px;
     540                                        }
     541                                }
     542                        }
     543                }
     544               
     545                li.mini {
     546                        .activity-avatar {
     547                                a {
     548                                        img.avatar {
     549                                                height: 30px;
     550                                                margin-left: 15px;
     551                                                width: 30px;
     552                                        }
     553                                }
     554                        }
     555
     556                        .activity-content {
     557                                .activity-header {
     558                                        @include font-size(12);
     559                                }
     560                        }                               
     561                }
     562               
     563                .activity-content {
     564                        margin-top: -12px;
     565
     566                        .activity-header {
     567                                @include font-size(16);
     568                                line-height: inherit;
     569                                margin-right: 0;
     570                               
     571                                p {
     572                                        background-color: $light-background;
     573                                        border: 1px solid rgba($border-light, .6);
     574                                        padding: 0 .2em;
     575                                }
     576                               
     577                                img.avatar {
     578                                        display: inline-block;
     579                                        margin-bottom: 0 !important; // have to match to BP
     580                                }
     581                        } // close .activity-header
     582                } // close .activity-content
     583               
     584                .load-more a {display: block;}
     585       
     586        } // close .activity-list
     587} // close #buddypress
     588
     589/**
     590*-------------------------------------------------------------------------------
     591* @section 4.1.3 - Activity Comments
     592*-------------------------------------------------------------------------------
     593*/
     594#buddypress {
     595        .activity {
     596                .activity-comments {
     597                        border-left: 1px solid $border-light;
     598                        margin-top: 5px;
     599                       
     600                        ul {
     601                                background: rgba($light-background, .6);
     602                                margin: 30px 0 0 2px;
     603                        }
     604               
     605                        .ac-form {
     606                       
     607                                input[type="submit"],
     608                                .ac-reply-cancel {
     609                                        color: rgba($body-text, .8);
     610                                        display: inline-block;
     611                                        font-family: inherit;
     612                                        @include font-size(12);
     613                                        font-weight: normal;
     614                                        line-height: 1.2;
     615                                        padding: 4px 10px;
     616                                        text-transform: lowercase;
     617                                        width: 100px;
     618                                }
     619                               
     620                                .ac-reply-cancel {
     621                                        border: 1px solid rgba($border-color, .7);
     622                                        text-align: center;
     623                                       
     624                                        &:focus,
     625                                        &:hover {
     626                                                background: $bp-button-hover;
     627                                        }
     628                                }
     629
     630                        } // close .ac-form
     631
     632                } // close .activity-comments
     633        } // close .activity
     634
     635} // close #buddypress
     636
     637/**
     638*-------------------------------------------------------------------------------
     639* @section 4.2 - Members Loop
     640*-------------------------------------------------------------------------------
     641*/
     642
     643#buddypress {
     644        #members-list {
     645       
     646                @media screen and (min-width: 59.6875em) {
     647                        li {
     648                                .item-avatar,
     649                                .item {
     650                                        float: left;
     651                                }
     652
     653                                .action {
     654                                        float: right;
     655                                }
     656                        }
     657                }
     658/*
     659                li {
     660                        .item {
     661                                .update {
     662                                        border-left: 1px solid rgba($border-color, .4);
     663                                        display: block;
     664                                        margin: .5em 0;
     665                                        padding-left: .3em;
     666                                }
     667                        }
     668                }
     669*/
     670        } // close #members-list
     671} //close #BuddyPress
     672
     673/**
     674*-------------------------------------------------------------------------------
     675* @section 7.0 - Single User Account Screens
     676*-------------------------------------------------------------------------------
     677*/
     678
     679.bp-user {
     680        .entry-title {margin-bottom: .5em;}
     681       
     682        #buddypress {
     683                #groups-list {
     684                        li {
     685                                .item {
     686                                        @media screen and (min-width: 77.5em) {
     687                                                left: 5%;
     688                                                width: 50%;
     689                                        }
     690                                }
     691                        }
     692                }
     693        }
     694} // close .bp-user
     695
     696/**
     697*-------------------------------------------------------------------------------
     698* @section 8.0 - Forms  - General
     699*-------------------------------------------------------------------------------
     700*/
     701
     702// Match BP form elements to Themes(2015) styling where styles
     703// are not inherited or being overriden.
     704#buddypress {
     705        div.activity-comments {
     706                form {
     707                        .ac-textarea {
     708                                background: $light-background;
     709                                border: 1px solid rgba($border-color, .3);
     710                               
     711                                textarea {
     712                                        background: none;
     713                                        border: 0;
     714                                }
     715                        }
     716                }
     717        }
     718}
     719
     720// 2015 applies 100% width to form element, remove this initially for BP search
     721
     722#buddypress {
     723
     724        // Manage form control widths under #item-body in user account screens
     725        #item-body {
     726                .standard-form {
     727                        li {float: none;}
     728                        input[type='text'],
     729                        textarea {
     730                                width: 100%;
     731                        }
     732                }
     733        }
     734
     735        div.dir-search,
     736        div.message-search {
     737                float: none;
     738                margin: $spacing-val-sm 0;
     739
     740                // Stylise the seach form elements, in part this deals with padding
     741                // issues on the submit & sizing issues between bp styles & twentyfifteen
     742
     743                form { // *sigh* only to bludgeon over specified rules
     744                        border: 1px solid rgba($border-color, 0.4);
     745                        overflow: hidden;
     746
     747                        label {
     748                                float: left;
     749                                width: 80%;
     750                        }
     751
     752                        input[type='text'] {
     753                                float: left;
     754                                margin: 0;
     755                                width: 80%;
     756                        }
     757
     758                        input[type='text'],
     759                        input[type='submit'] {
     760                                @include font-size(14);
     761                                border: 0;
     762                                line-height: inherit;
     763                        }
     764
     765                        input[type='text'] {
     766                                border-right: 1px solid rgba($border-color, 0.4);
     767                                padding: 0.2em 0 0.2em 0.2em;
     768                        }
     769
     770                        input[type='submit'] {
     771                                float: right;
     772                                font-weight: normal;
     773                                padding: 0.2em 1em;
     774                                text-align: center;
     775                                text-transform: none;
     776                                width: 20%;
     777                        }
     778                }// close form
     779
     780        } // close .dir-search, .message-search
     781
     782        // Shift the search parent to the right and allow to shrinkwrap
     783        @media screen and (min-width: 38.75em) {
     784                div.dir-search,
     785                div.message-search {
     786                        float: right;
     787                        margin-bottom: 5px !important;
     788
     789                        form {
     790                                label,
     791                                input[type='text'],
     792                                input[type='submit'] {
     793                                        width: auto;
     794                                }
     795                        }
     796                }
     797
     798                div.message-search {margin-right: $spacing-val-sm;}
     799        } // close @media
     800
     801        // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     802//      @media screen and (min-width: 59.6875em) {
     803//              .dir-search,
     804//       .message-search {
     805        //              form {
     806        //                      input[type='text'] { @include font-size(14) ;}
     807        //                      input[type='submit'] {@include font-size(14);}
     808        //              }
     809        //      }
     810//      }
     811
     812        @media screen and (min-width: 77.5em) {
     813
     814                .dir-search,
     815                .message-search {
     816                        form {
     817                                input[type='text'] { @include font-size(16) ;}
     818                                input[type='submit'] { @include font-size(16) ;}
     819                        }
     820                }
     821        }
     822
     823} // close #buddypress
     824
     825/**
     826*-------------------------------------------------------------------------------
     827* @section 9.0 - Tables - General
     828*-------------------------------------------------------------------------------
     829*/
     830
     831// Adjust table font sizes, default too large proportionally
     832// This approach will require refinement and perhaps re-location to
     833// a more general typography section to manage BP elements grouped under
     834// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     835#buddypress {
     836        table {
     837                @include font-size(14);
     838                margin: $spacing-val-md 0;
     839        }
     840
     841        @media screen and (min-width: 55em) {
     842                table {@include font-size(16);}
     843        }
     844}
     845
     846/*__ User Account tables __*/
     847
     848#buddypress {
     849
     850        // Manage some table cells widths that are disproportionate to their content
     851        .notifications,
     852        .messages-notices {
     853                th {
     854                        width: 30%;
     855
     856                        &.bulk-select-all {
     857                                text-align: center;
     858                                width: 10%;
     859                        }
     860                }
     861
     862                .bulk-select-check {text-align: center;}
     863                .notification-actions,
     864                td.thread-options {
     865                        text-align: center;
     866
     867                        a {
     868                                display: inline-block;
     869                                margin: 0;
     870                                padding: 0;
     871                        }
     872                }
     873
     874                // Notices action buttons, this maybe better moved, temp for now to address
     875                // styling issues - this will need styling ideas
     876                td {
     877                        .button {
     878                                border: 0;
     879                                display: block;
     880                                padding: 0;
     881                                text-align: center;
     882                        }
     883                }
     884
     885        } // .notifications, .message-notices
     886} // #buddypress