Skip to:
Content

BuddyPress.org

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

File twentyfifteen-comp-style.05.patch, 14.4 KB (added by netweb, 6 years ago)
  • 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/*--------------------------------------------------------------
     36
     37This is the BuddyPress companion stylesheet for
     38the WordPress Twentyfifteen theme.
     39
     40This sheet supports the primary BuddyPress styles in buddypress.css
     41
     42The Rulesets shadow the BP default stylesheet sectioning
     43to maintain uniformity.
     44
     45If you are running as a child theme of twentyfifteen and wish to use
     46this stylesheet then please copy it to buddypress/css/ or community/css/
     47in your child theme root and rename the file to match your child theme name
     48i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
     49'twentyfifteen-child.css'
     50
     51----------------------------------------------------------------
     52>>> TABLE OF CONTENTS:
     53----------------------------------------------------------------
     541.0 Theme Structural Elements
     552.0 - Navigation - General
     56        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     57        2.2 - Pagination
     583.0 - Images
     594.0 - BP Lists / Loops Generic
     60        4.1 - Activity Loop
     61                4.1.1 - Activity Listing
     62                4.1.2 - Activity Comments
     63        4.2 - Members Loop
     64        4.3 - Groups Loop
     65        4.4 - Blogs Loop
     665.0 - Directories - Members, Groups, Blogs, Forums
     676.0 - Single Group Screens
     687.0 - Single User Account Screens
     69        7.1 - Notifications
     70        7.2 - Private Messaging Threads
     71        7.3 - Extended Profiles
     72        7.4 - Settings
     738.0 - Forms  -  General
     749.0 - Tables -  General
     7510.0 - Error / Success Messages
     7611.0 - Ajax Loading
     7712.0 - Widgets
     78--------------------------------------------------------------*/
     79
     80/*--------------------------------------------------------------
     811.0 - Theme - Structural Elements
     82--------------------------------------------------------------*/
     83
     84// As BP screens have specific content lets adjust the themes primary elements
     85// to maximise the screen real estate for BP pages.
     86
     87.buddypress {
     88        .site-content {
     89                @media screen and (min-width: 77.5em) {
     90                }
     91        }
     92
     93        main {
     94                padding-top: 4%;
     95                @media screen and (min-width: 59.6875em) {
     96                        padding-top: 0;
     97                }
     98
     99                article {
     100                        margin: 0 4%;
     101                        padding-top: 8.3333%;
     102                        @media screen and (min-width: 59.6875em) {
     103                                margin: 0 0 0 1px;
     104                        }
     105                        @media screen and (min-width: 87.6875em) {
     106                                margin: 0 4.3333% 0 8.3333%;
     107                        }
     108
     109                        .entry-header,
     110                        .entry-content {
     111                                padding: 0 2rem 2rem;
     112                        }
     113
     114                        #buddypress {
     115                                margin-bottom: $spacing-val-lg;
     116                        }
     117                } // .article
     118        } // .main
     119        .site-footer {
     120                margin: 0 4%;
     121                @media screen and (min-width: 59.6875em) {
     122                        margin: 0 0 0 35.2941%;
     123                        width: 61.8235%;
     124                }
     125        }
     126} // .buddypress (body class)
     127
     128/*--------------------------------------------------------------
     1292.0 - Navigation - General
     130--------------------------------------------------------------*/
     131
     132// Remove 2015 border bottom on BP links/spans
     133
     134.buddypress #buddypress {
     135        .item-list-tabs,
     136        .activity-header,
     137        .activity-inner,
     138        .activity-comments,
     139        .item-title,
     140        .load-more,
     141        .field-visibility-settings-toggle,
     142        #latest-update,
     143        table, {
     144                a { border-bottom: 0; }
     145        }
     146
     147        .pagination-links {
     148                a,
     149                span { border-bottom: 0; }
     150        }
     151} // close .buddypress #buddypress
     152
     153/*--------------------------------------------------------------
     1542.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     155--------------------------------------------------------------*/
     156// The main navigational elements for BP screens
     157
     158
     159// We have a need to override BP specifity
     160// so some rulesets sets are seemingly over weighted in selectors
     161
     162#buddypress {
     163
     164        // active/current states all navs
     165        div.item-list-tabs {
     166                ul {
     167                        li.selected {
     168                                a {
     169                                        background: #555;
     170                                        color: #fff;
     171                                        opacity: 1;
     172                                }
     173                        }
     174                }
     175        }
     176        // Global nav styles
     177        div.item-list-tabs {
     178                ul {
     179                        background-color: #eee;
     180                        border-bottom: 1px solid #ddd;
     181                        overflow: hidden;
     182                        padding: $spacing-val-xs 0;
     183                }
     184        }
     185        /*__ Horizontal menus __*/
     186        #object-nav {
     187                ul {
     188        //              background-color: #eee;
     189        //              border-bottom: 1px solid #ddd;
     190                        overflow: hidden;
     191                        li {float: none;}
     192                        li:not(.selected) {
     193                                a {opacity: 0.7;}
     194                        }
     195
     196                        @media screen and (min-width: 38.75em) {
     197                                li {
     198                                        float: left;
     199                                }
     200                                //      li:nth-child(1n+7) {clear: left;}
     201                        }
     202                }
     203        }
     204
     205        div#subnav.item-list-tabs {
     206                margin-top: 0;
     207
     208                ul {
     209                        background-color: #f2f2f2;
     210                        border-bottom: 0;
     211                        padding: 0;
     212
     213                        li.last {
     214                                background: #fff;
     215                                margin-top: 0;
     216                                padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
     217                                width: 100%;
     218
     219                                select,
     220                                select:focus {
     221                                        background: transparent;
     222                                        border: 0;
     223                                        outline: 0;
     224                                }
     225                        }
     226
     227                        @media screen and (min-width: 38.75em) {
     228                                li.last {
     229                                        text-align: right;
     230                                }
     231                        }
     232                } // close ul
     233        } // close #subnav
     234
     235        // active/current states all navs
     236        div.item-list-tabs {
     237                ul {
     238                        li.selected,
     239                        li.current {
     240                                a {
     241                                        background: #555;
     242                                        color: #fff;
     243                                        opacity: 1;
     244                                }
     245                        }
     246                }
     247        }
     248
     249} // close #buddypress
     250
     251        /*__ Vertical menu User account screens __*/
     252
     253// This block contains the rules to re-factor the item-body structural element
     254// to sit alongside the vert menu
     255// Structural layout and faux column styling of backgrounds is more suited
     256// to the earlier section. todo: re-position sort out when known what styles
     257// are being used.
     258
     259@media screen and (min-width: 55em) {
     260        .bp-user #buddypress {
     261                background: #eee;
     262
     263                #item-header,
     264                #item-body {
     265                        background: #fff;
     266                }
     267
     268                #object-nav {
     269                        border-right: 1px solid #ddd;
     270                        float: left;
     271                        margin-right: -1px;
     272                        width: 200px;
     273
     274                        ul {
     275                                border-bottom: 0;
     276                                padding: 0;
     277
     278                                li {
     279                                        float: none;
     280                                        overflow: hidden;
     281
     282                                        span {
     283                                                border-radius: 10%;
     284                                                float: right;
     285                                                margin-right: 15px;
     286                                        }
     287                                }
     288                        }
     289                }
     290
     291                #item-body {
     292                        border-left: 1px solid #ddd;
     293                        overflow: hidden;
     294                        padding: 0 $spacing-val-sm;
     295                        width: auto;
     296
     297                        #subnav {
     298                                margin: 0 (-$spacing-val-sm);
     299                        }
     300                }
     301
     302        } // close .bp-user #buddypress
     303} // close @media
     304
     305/*--------------------------------------------------------------
     3062.2 - Pagination
     307--------------------------------------------------------------*/
     308
     309#buddypress {
     310        div.pagination {
     311                box-shadow: none;
     312                .pag-count {margin-left: 0;}
     313                .pagination-links {
     314                        margin-right: 0;
     315
     316                        span,
     317                        a {
     318                                height: auto;
     319                                line-height: 1;
     320                                padding: 5px;
     321                        }
     322
     323                        .prev,
     324                        .next {
     325                                background-color: transparent;
     326                                color: inherit;
     327                                overflow: visible;
     328                                width: auto;
     329                                &:before {display: none;}
     330                        }
     331
     332                        .prev {
     333                                left: auto;
     334                                position: static;
     335                        }
     336
     337                        .next {
     338                                position: static;
     339                                right: auto;
     340                        }
     341                } // close .pagination-links
     342        } // close .pagination
     343} // close #buddypress
     344
     345/*--------------------------------------------------------------
     3464.0 - BP Lists / Loops Generic
     347--------------------------------------------------------------*/
     348
     349// Trying to position the action div absolute has bad consequences where
     350// aditional items are displayed, floating is an alternative but may need
     351// to reconsider this approach.
     352// Initialy override the BP absolute positioning, allow natural flow position
     353// mobile up.
     354
     355#buddypress {
     356        ul.item-list {
     357                li {
     358                        overflow: hidden !important;
     359
     360                        div.action {
     361                                clear: left;
     362                                @media screen and (min-width: 77.5em) {
     363                                        float: right;
     364                                        margin-top: -70px;
     365                                }
     366                                margin-top: $spacing-val-md;
     367                                position: relative;
     368                                text-align: left;
     369                                top: 0;
     370
     371                                div {
     372                                        // Provisionally lets keep the 'action' div position but inline-block the buttons
     373                                        @media screen and (min-width: 55em) {
     374                                                // keep buttons to a row small tablet up
     375                                                display: inline-block;
     376                                                margin-right: $spacing-val-xs;
     377                                        } // close @media
     378                                        @media screen and (min-width: 77.5em) {
     379                                                // take buttons to block to stack them when floated right
     380                                                clear: right;
     381                                                display: block;
     382                                                float: right;
     383                                        } // close @media
     384                                        margin: 4px 0;
     385                                } // close div
     386                        } // close .action
     387                } // close li
     388        } // close .item-list
     389} // close #buddypress
     390/*--------------------------------------------------------------
     3914.1 - Activity
     392--------------------------------------------------------------*/
     393
     394/*--------------------------------------------------------------
     3954.1.2 - Activity Whats New
     396--------------------------------------------------------------*/
     397#buddypress {
     398        form#whats-new-form {
     399                textarea {width: 100%;}
     400                // corrective measure for clipped elements due to JS inline styling
     401                #whats-new-options[style] {
     402                        min-height: 6rem; // unit open to debate px value might be better.
     403                }
     404        }
     405        // User account form requires matching bp default specificity
     406        #item-body {
     407                form#whats-new-form {
     408                        margin: $spacing-val-lg 0;
     409                }
     410        }
     411} // close #buddypress
     412
     413/*--------------------------------------------------------------
     4144.1.2 - Activity Listing
     415--------------------------------------------------------------*/
     416#buddypress {
     417        .activity-list {
     418                .activity-content {
     419                        margin-top: -12px;
     420
     421                        .activity-header {
     422                                img.avatar {
     423                                        display: inline-block;
     424                                }
     425                        } // close .activity-header
     426                } // close .activity-content
     427                .load-more a {display: block;}
     428        } // close .activity-list
     429
     430} // close #buddypress
     431/*--------------------------------------------------------------
     4327.0 - Single User Account Screens
     433--------------------------------------------------------------*/
     434
     435/*--------------------------------------------------------------
     4368.0 - Forms  - General
     437--------------------------------------------------------------*/
     438// 2015 applies 100% width to form element, remove this initially for BP search
     439
     440#buddypress {
     441
     442        // Manage form control widths under #item-body in user account screens
     443        #item-body {
     444                .standard-form {
     445                        li {float: none;}
     446                        input[type='text'],
     447                        textarea {
     448                                width: 100%;
     449                        }
     450                }
     451        }
     452
     453        div.dir-search,
     454        div.message-search {
     455                float: none;
     456                margin: $spacing-val-sm 0;
     457
     458                // Stylise the seach form elements, in part this deals with padding
     459                // issues on the submit & sizing issues between bp styles & twentyfifteen
     460
     461                form { // *sigh* only to bludgeon over specified rules
     462                        border: 1px solid #ccc;
     463                        overflow: hidden;
     464
     465                        label {
     466                                float: left;
     467                                width: 80%;
     468                        }
     469
     470                        input[type='text'] {
     471                                float: left;
     472                                margin: 0;
     473                                width: 80%;
     474                        }
     475
     476                        input[type='text'],
     477                        input[type='submit'] {
     478                                @include font-size(14);
     479                                border: 0;
     480                                line-height: inherit;
     481                        }
     482
     483                        input[type='text'] {
     484                                border-right: 1px solid #ccc;
     485                                padding: 0.2em 0 0.2em 0.2em;
     486                        }
     487
     488                        input[type='submit'] {
     489                                float: right;
     490                                font-weight: normal;
     491                                padding: 0.2em 1em;
     492                                text-align: center;
     493                                text-transform: none;
     494                                width: 20%;
     495                        }
     496                }// close form
     497
     498        } // close .dir-search, .message-search
     499
     500        // Shift the search parent to the right and allow to shrinkwrap
     501        @media screen and (min-width: 38.75em) {
     502                div.dir-search,
     503                div.message-search {
     504                        float: right;
     505                        margin-bottom: 5px !important;
     506
     507                        form {
     508                                label,
     509                                input[type='text'],
     510                                input[type='submit'] {
     511                                        width: auto;
     512                                }
     513                        }
     514                }
     515
     516                div.message-search {margin-right: $spacing-val-sm;}
     517        } // close @media
     518
     519        // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     520//      @media screen and (min-width: 59.6875em) {
     521//              .dir-search,
     522//       .message-search {
     523        //              form {
     524        //                      input[type='text'] { @include font-size(14) ;}
     525        //                      input[type='submit'] {@include font-size(14);}
     526        //              }
     527        //      }
     528//      }
     529
     530        @media screen and (min-width: 77.5em) {
     531
     532                .dir-search,
     533                .message-search {
     534                        form {
     535                                input[type='text'] { @include font-size(16) ;}
     536                                input[type='submit'] { @include font-size(16) ;}
     537                        }
     538                }
     539        }
     540
     541} // close #buddypress
     542
     543/*--------------------------------------------------------------
     5449.0 - Tables - General
     545--------------------------------------------------------------*/
     546
     547// Adjust table font sizes, default too large proportionally
     548// This approach will require refinement and perhaps re-location to
     549// a more general typography section to manage BP elements grouped under
     550// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     551#buddypress {
     552        table {
     553                @include font-size(14);
     554                margin: $spacing-val-md 0;
     555        }
     556
     557        @media screen and (min-width: 55em) {
     558                table {@include font-size(16);}
     559        }
     560}
     561
     562/*__ User Account tables __*/
     563
     564#buddypress {
     565
     566        // Manage some table cells widths that are disproportionate to their content
     567        .notifications,
     568        .messages-notices {
     569                th {
     570                        width: 30%;
     571
     572                        &.bulk-select-all {
     573                                text-align: center;
     574                                width: 10%;
     575                        }
     576                }
     577
     578                .bulk-select-check {text-align: center;}
     579                .notification-actions,
     580                td.thread-options {
     581                        text-align: center;
     582
     583                        a {
     584                                display: inline-block;
     585                                margin: 0;
     586                                padding: 0;
     587                        }
     588                }
     589
     590                // Notices action buttons, this maybe better moved, temp for now to address
     591                // styling issues - this will need styling ideas
     592                td {
     593                        .button {border: 0; display: block; padding: 0; text-align: center;}
     594                }
     595
     596        } // .notifications, .message-notices
     597} // #buddypress