Skip to:
Content

BuddyPress.org

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

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

Update User item-header elements layout

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