Skip to:
Content

BuddyPress.org

Changeset 9748


Ignore:
Timestamp:
04/13/2015 11:03:31 PM (6 years ago)
Author:
hnla
Message:

Initial commit for scss stylesheet to support the Companion styles task for twentyfifteen theme.

Companion Styles are intended to support the default BP styles and enhance BP displayed with the standard WP themes and ensure BP is presented at it's best.

Provides the initial file format and baseline corrective styles along with breakpoint responsive layout and new user account menu layout.

An SCSS linter was previously added to Grunt in r9697.

See #6291
Props mercime, jjj, djpaul

Location:
trunk/src/bp-templates/bp-legacy/css
Files:
1 added
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss

    r9697 r9748  
     1// Stylesheet Guidence Notes
     2// Table of content represents a guide to sections of the sheet.
     3// Note that not all sections may be described in the body of the
     4// rulesets only those that require styles for a given theme.
     5// Sub sections might not exist but can be added as required
     6// as per BP Lists - 'activity' section.
     7
     8// We follow the dictats of the parent theme in respect of media queries,
     9// font sizing etc. Media queries are used in a modular sense (OOCSS)
     10// rather than described as blocks to the end of the sheet, this aids ease
     11// of managing media queries, scalability & flexibility .
     12
     13// Twentyfifteen Media Queries / Breakpoints
     14// @media screen and (min-width: 38.75em)
     15// @media screen and (min-width: 46.25em)
     16// @media screen and (min-width: 55em)
     17// @media screen and (min-width: 59.6875em)
     18// @media screen and (min-width: 77.5em)
     19// @media screen and (min-width: 87.6875em)
     20
     21// Mixins and Variabals
     22
     23// Common margin values
     24$spacing-val-lg: 40px;
     25$spacing-val-md: 20px;
     26$spacing-val-sm: 10px;
     27$spacing-val-xs: 5px;
     28
     29// A simple mixin to handle font-sizing to match 2015 62.5% approach
     30@mixin font-size($font-size: 16) {
     31    $rem-font-value: ($font-size / 10);
     32    font-size: ($font-size * 1px);
     33    font-size: $rem-font-value + rem;
     34}
     35// Variabals: color definitions
     36$content-background: #fff;
     37$light-background:   #f7f7f7;
     38$medium-background:  #ccc;
     39$dark-background:    #555;
     40$border-color:       #999; // border color is varied using rgba
     41$border-light:       #eaeaea; // BP dividers
     42
     43/*--------------------------------------------------------------
     44
     45This is the BuddyPress companion stylesheet for
     46the WordPress Twentyfifteen theme.
     47
     48This sheet supports the primary BuddyPress styles in buddypress.css
     49
     50The Rulesets shadow the BP default stylesheet sectioning
     51to maintain uniformity.
     52
     53If you are running as a child theme of twentyfifteen and wish to use
     54this stylesheet then please copy it to buddypress/css/ or community/css/
     55in your child theme root and rename the file to match your child theme name
     56i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
     57'twentyfifteen-child.css'
     58
     59----------------------------------------------------------------
     60>>> TABLE OF CONTENTS:
     61----------------------------------------------------------------
     621.0 Theme Structural Elements
     632.0 - Navigation - General
     64    2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     65    2.2 - Pagination
     663.0 - Images
     674.0 - BP Lists / Loops Generic
     68    4.1 - Activity Loop
     69        4.1.1 - Activity Listing
     70        4.1.2 - Activity Comments
     71    4.2 - Members Loop
     72    4.3 - Groups Loop
     73    4.4 - Blogs Loop
     745.0 - Directories - Members, Groups, Blogs, Forums
     756.0 - Single Group Screens
     767.0 - Single User Account Screens
     77    7.1 - Notifications
     78    7.2 - Private Messaging Threads
     79    7.3 - Extended Profiles
     80    7.4 - Settings
     818.0 - Forms  -  General
     829.0 - Tables -  General
     8310.0 - Error / Success Messages
     8411.0 - Ajax Loading
     8512.0 - Widgets
     86--------------------------------------------------------------*/
     87
     88/**
     89*-------------------------------------------------------------------------------
     90* @section 1.0 - Theme - Structural Elements
     91*-------------------------------------------------------------------------------
     92*/
     93
     94// As BP screens have specific content lets adjust the themes primary elements
     95// to maximise the screen real estate for BP pages.
     96
     97.buddypress {
     98    div.clear {display: none;}
     99    .site-content {
     100        @media screen and (min-width: 77.5em) {
     101        }
     102    }
     103
     104    main {
     105        padding-top: 4%;
     106        @media screen and (min-width: 59.6875em) {
     107            padding-top: 0;
     108        }
     109
     110        article {
     111            margin: 0 4%;
     112            padding-top: 8.3333%;
     113            @media screen and (min-width: 59.6875em) {
     114                margin: 0 0 0 1px;
     115            }
     116            @media screen and (min-width: 87.6875em) {
     117                margin: 0 4.3333% 0 8.3333%;
     118            }
     119
     120            .entry-header,
     121            .entry-content {
     122                padding: 0 2rem 2rem;
     123            }
     124
     125            #buddypress {
     126                margin-bottom: $spacing-val-lg;
     127            }
     128        } // .article
     129    } // .main
     130    .site-footer {
     131        margin: 0 4%;
     132        @media screen and (min-width: 59.6875em) {
     133            margin: 0 0 0 35.2941%;
     134            width: 61.8235%;
     135        }
     136    }
     137} // .buddypress (body class)
     138
     139/**
     140*-------------------------------------------------------------------------------
     141* @section 2.0 - Navigation - General
     142*-------------------------------------------------------------------------------
     143*/
     144
     145// Remove 2015 border bottom on BP links/spans
     146
     147.buddypress #buddypress {
     148    .item-list-tabs,
     149    .activity-header,
     150    .activity-inner,
     151    .activity-comments,
     152    .item-title,
     153    .load-more,
     154    .field-visibility-settings-toggle,
     155    #latest-update,
     156    table, {
     157        a { border-bottom: 0; }
     158    }
     159
     160    .pagination-links {
     161        a,
     162        span { border-bottom: 0; }
     163    }
     164} // close .buddypress #buddypress
     165
     166/**
     167*-------------------------------------------------------------------------------
     168* @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     169*-------------------------------------------------------------------------------
     170*
     171* @description The main navigational elements for BP screens
     172*/
     173
     174// We have a need to override BP specifity
     175// so some rulesets sets are seemingly over weighted in selectors
     176
     177#buddypress {
     178
     179    // active/current states all navs
     180    div.item-list-tabs {
     181        ul {
     182            li.selected {
     183                a {
     184                    background: $dark-background;
     185                    color: #fff;
     186                    opacity: 1;
     187                }
     188            }
     189        }
     190    }
     191    // Global Nav Styles
     192    div.item-list-tabs {
     193        ul {
     194            background-color: $light-background;
     195            border-bottom: 1px solid rgba($border-color, 0.4);
     196            overflow: hidden;
     197            padding: $spacing-val-xs 0;
     198        }
     199    }
     200    /*__ Horizontal menus __*/
     201    #object-nav {
     202        ul {
     203    //      background-color: #eee;
     204    //      border-bottom: 1px solid #ddd;
     205            overflow: hidden;
     206            li {float: none;}
     207            li:not(.selected) {
     208                a {opacity: 0.7;}
     209            }
     210
     211            @media screen and (min-width: 38.75em) {
     212                li {
     213                    float: left;
     214                }
     215                //  li:nth-child(1n+7) {clear: left;}
     216            }
     217        }
     218    }
     219
     220    div#subnav.item-list-tabs {
     221        margin-top: 0;
     222
     223        ul {
     224            background-color: $light-background;
     225            border-bottom: 0;
     226            padding: 0;
     227
     228            li.last {
     229                background: $content-background;
     230                margin-top: 0;
     231                padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
     232                width: 100%;
     233
     234                select,
     235                select:focus {
     236                    background: transparent;
     237                    border: 0;
     238                    outline: 0;
     239                }
     240
     241                select,
     242                label,
     243                option {
     244                    @include font-size(14);
     245                }
     246
     247                select {
     248                    font-style: italic;
     249                }
     250            }
     251
     252            @media screen and (min-width: 38.75em) {
     253                li.last {
     254                    text-align: right;
     255                }
     256            }
     257        } // close ul
     258    } // close #subnav
     259
     260    // active/current states all navs
     261    div.item-list-tabs {
     262        ul {
     263            li.selected,
     264            li.current {
     265                a {
     266                    background: $dark-background;
     267                    color: #fff;
     268                    opacity: 1;
     269                }
     270            }
     271        }
     272    }
     273
     274} // close #buddypress
     275
     276    /*__ Vertical menu User account screens __*/
     277
     278// This block contains the rules to re-factor the item-body structural element
     279// to sit alongside the vert menu
     280// Structural layout and faux column styling of backgrounds is more suited
     281// to the earlier section. todo: re-position sort out when known what styles
     282// are being used.
     283
     284@media screen and (min-width: 55em) {
     285    .bp-user #buddypress {
     286        background: $light-background;
     287
     288        #item-header,
     289        #item-body {
     290            background: $content-background;
     291        }
     292
     293        #object-nav {
     294            border-right: 1px solid rgba($border-color, .1);
     295            float: left;
     296            margin-right: -1px;
     297            width: 200px;
     298
     299            ul {
     300                border-bottom: 0;
     301                padding: 0;
     302
     303                li {
     304                    float: none;
     305                    overflow: hidden;
     306
     307                    span {
     308                        border-radius: 10%;
     309                        float: right;
     310                        margin-right: 15px;
     311                    }
     312                }
     313            }
     314        }
     315
     316        #item-body {
     317            border-left: 1px solid #ddd;
     318            overflow: hidden;
     319            padding: 0 $spacing-val-sm;
     320            width: auto;
     321
     322            #subnav {
     323                margin: 0 (-$spacing-val-sm);
     324            }
     325        }
     326
     327    } // close .bp-user #buddypress
     328} // close @media
     329
     330/**
     331*-------------------------------------------------------------------------------
     332* @section 2.2 - Pagination
     333*-------------------------------------------------------------------------------
     334*/
     335
     336#buddypress {
     337    div.pagination {
     338        box-shadow: none;
     339        .pag-count {margin-left: 0;}
     340        .pagination-links {
     341            margin-right: 0;
     342
     343            span,
     344            a {
     345                height: auto;
     346                line-height: 1;
     347                padding: 5px;
     348            }
     349
     350            .prev,
     351            .next {
     352                background-color: transparent;
     353                color: inherit;
     354                overflow: visible;
     355                width: auto;
     356                &:before {display: none;}
     357            }
     358
     359            .prev {
     360                left: auto;
     361                position: static;
     362            }
     363
     364            .next {
     365                position: static;
     366                right: auto;
     367            }
     368        } // close .pagination-links
     369    } // close .pagination
     370} // close #buddypress
     371
     372/**
     373*-------------------------------------------------------------------------------
     374* @section 4.0 - BP Lists / Loops Generic
     375*-------------------------------------------------------------------------------
     376*/
     377
     378// Trying to position the action div absolute has bad consequences where
     379// aditional items are displayed, floating is an alternative but may need
     380// to reconsider this approach. All li items floated left at wide screen.
     381// Initialy override the BP absolute positioning, allow natural flow position
     382// mobile up.
     383
     384#buddypress {
     385    ul.item-list {
     386        li {
     387            overflow: hidden !important;
     388           
     389            .item {
     390                .item-desc {
     391                    margin-left: 0;
     392                    width: auto;
     393                }
     394            }
     395
     396            @media screen and (min-width: 59.6875em) {
     397                .item-avatar,
     398                .item,
     399                .action {
     400                    float: left;
     401                }
     402
     403                .item {
     404                    left: 10%;
     405                    position: relative;
     406                    width: 55%;
     407                }
     408            }// close @media
     409           
     410            div.action {
     411                clear: left;
     412                float: none;
     413                margin-bottom: -$spacing-val-md;
     414                // remove BP margin left
     415                margin-left: 0;
     416                padding: $spacing-val-md 0 $spacing-val-xs;
     417                // push the actions to the right
     418                @media screen and (min-width: 59.6875em) {
     419                    clear: none;
     420                    float: right;
     421                    margin-bottom: 0;
     422                    padding: 0;
     423                }
     424                position: relative;
     425                text-align: left;
     426                top: 0;
     427
     428                div {
     429                    display: inline-block;
     430                    margin: $spacing-val-sm 0;
     431                    width: 100%;
     432
     433                    a {
     434                        display: block;
     435                        width: 100%;
     436                    }
     437                    // Provisionally lets keep the 'action' div
     438                    //position but inline-block the buttons
     439                    @media screen and (min-width: 38.75em) {
     440                        // keep buttons to a row small tablet up
     441                        margin: 0 $spacing-val-sm $spacing-val-sm 0;
     442                        width: auto;
     443                    } // close @media
     444                    @media screen and (min-width: 59.6875em) {
     445                        // take buttons to block to stack them when floated right
     446                        clear: right;
     447                        float: right;
     448                        margin: 0 0 $spacing-val-sm 0;
     449                    } // close @media
     450                   
     451                } // close div
     452               
     453                .meta {
     454                    font-style: italic;
     455                }
     456
     457            } // close .action
     458
     459        } // close li
     460    } // close .item-list
     461} // close #buddypress
     462
     463/**
     464*-------------------------------------------------------------------------------
     465* @section 4.1 - Activity
     466*-------------------------------------------------------------------------------
     467*/
     468
     469/**
     470*-------------------------------------------------------------------------------
     471* @section 4.1.2 - Activity Whats New
     472*-------------------------------------------------------------------------------
     473*/
     474
     475#buddypress {
     476    form#whats-new-form {
     477        textarea {width: 100%;}
     478        // corrective measure for clipped elements due to JS inline styling
     479        #whats-new-options[style] {
     480            min-height: 6rem; // unit open to debate px value might be better.
     481        }
     482    }
     483    // User account form requires matching bp default specificity
     484    #item-body {
     485        form#whats-new-form {
     486            margin: $spacing-val-lg 0;
     487        }
     488    }
     489} // close #buddypress
     490
     491/**
     492*-------------------------------------------------------------------------------
     493* @section 4.1.2 - Activity Listing
     494*-------------------------------------------------------------------------------
     495*/
     496
     497#buddypress {
     498    .activity-list {
     499        .activity-content {
     500            margin-top: -12px;
     501
     502            .activity-header {
     503                img.avatar {
     504                    display: inline-block;
     505                }
     506            } // close .activity-header
     507        } // close .activity-content
     508        .load-more a {display: block;}
     509    } // close .activity-list
     510
     511} // close #buddypress
     512
     513/**
     514*-------------------------------------------------------------------------------
     515* @section 4.2 - Members Loop
     516*-------------------------------------------------------------------------------
     517*/
     518
     519#buddypress {
     520    #members-list {
     521        @media screen and (min-width: 59.6875em) {
     522            li {
     523                .item-avatar,
     524                .item {
     525                    float: left;
     526                }
     527
     528                .action {
     529                    float: right;
     530                }
     531            }
     532        }
     533    }
     534} //close #BuddyPress
     535
     536/**
     537*-------------------------------------------------------------------------------
     538* @section 7.0 - Single User Account Screens
     539*-------------------------------------------------------------------------------
     540*/
     541
     542.bp-user {
     543    .entry-title {margin-bottom: .5em;}
     544   
     545    #buddypress {
     546        #groups-list {
     547            li {
     548                .item {
     549                    @media screen and (min-width: 77.5em) {
     550                        left: 5%;
     551                        width: 50%;
     552                    }
     553                }
     554            }
     555        }
     556    }
     557} // close .bp-user
     558
     559/**
     560*-------------------------------------------------------------------------------
     561* @section 8.0 - Forms  - General
     562*-------------------------------------------------------------------------------
     563*/
     564
     565// 2015 applies 100% width to form element, remove this initially for BP search
     566
     567#buddypress {
     568
     569    // Manage form control widths under #item-body in user account screens
     570    #item-body {
     571        .standard-form {
     572            li {float: none;}
     573            input[type='text'],
     574            textarea {
     575                width: 100%;
     576            }
     577        }
     578    }
     579
     580    div.dir-search,
     581    div.message-search {
     582        float: none;
     583        margin: $spacing-val-sm 0;
     584
     585        // Stylise the seach form elements, in part this deals with padding
     586        // issues on the submit & sizing issues between bp styles & twentyfifteen
     587
     588        form { // *sigh* only to bludgeon over specified rules
     589            border: 1px solid rgba($border-color, 0.4);
     590            overflow: hidden;
     591
     592            label {
     593                float: left;
     594                width: 80%;
     595            }
     596
     597            input[type='text'] {
     598                float: left;
     599                margin: 0;
     600                width: 80%;
     601            }
     602
     603            input[type='text'],
     604            input[type='submit'] {
     605                @include font-size(14);
     606                border: 0;
     607                line-height: inherit;
     608            }
     609
     610            input[type='text'] {
     611                border-right: 1px solid rgba($border-color, 0.4);
     612                padding: 0.2em 0 0.2em 0.2em;
     613            }
     614
     615            input[type='submit'] {
     616                float: right;
     617                font-weight: normal;
     618                padding: 0.2em 1em;
     619                text-align: center;
     620                text-transform: none;
     621                width: 20%;
     622            }
     623        }// close form
     624
     625    } // close .dir-search, .message-search
     626
     627    // Shift the search parent to the right and allow to shrinkwrap
     628    @media screen and (min-width: 38.75em) {
     629        div.dir-search,
     630        div.message-search {
     631            float: right;
     632            margin-bottom: 5px !important;
     633
     634            form {
     635                label,
     636                input[type='text'],
     637                input[type='submit'] {
     638                    width: auto;
     639                }
     640            }
     641        }
     642
     643        div.message-search {margin-right: $spacing-val-sm;}
     644    } // close @media
     645
     646    // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
     647//  @media screen and (min-width: 59.6875em) {
     648//      .dir-search,
     649//   .message-search {
     650    //      form {
     651    //          input[type='text'] { @include font-size(14) ;}
     652    //          input[type='submit'] {@include font-size(14);}
     653    //      }
     654    //  }
     655//  }
     656
     657    @media screen and (min-width: 77.5em) {
     658
     659        .dir-search,
     660        .message-search {
     661            form {
     662                input[type='text'] { @include font-size(16) ;}
     663                input[type='submit'] { @include font-size(16) ;}
     664            }
     665        }
     666    }
     667
     668} // close #buddypress
     669
     670/**
     671*-------------------------------------------------------------------------------
     672* @section 9.0 - Tables - General
     673*-------------------------------------------------------------------------------
     674*/
     675
     676// Adjust table font sizes, default too large proportionally
     677// This approach will require refinement and perhaps re-location to
     678// a more general typography section to manage BP elements grouped under
     679// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     680#buddypress {
     681    table {
     682        @include font-size(14);
     683        margin: $spacing-val-md 0;
     684    }
     685
     686    @media screen and (min-width: 55em) {
     687        table {@include font-size(16);}
     688    }
     689}
     690
     691/*__ User Account tables __*/
     692
     693#buddypress {
     694
     695    // Manage some table cells widths that are disproportionate to their content
     696    .notifications,
     697    .messages-notices {
     698        th {
     699            width: 30%;
     700
     701            &.bulk-select-all {
     702                text-align: center;
     703                width: 10%;
     704            }
     705        }
     706
     707        .bulk-select-check {text-align: center;}
     708        .notification-actions,
     709        td.thread-options {
     710            text-align: center;
     711
     712            a {
     713                display: inline-block;
     714                margin: 0;
     715                padding: 0;
     716            }
     717        }
     718
     719        // Notices action buttons, this maybe better moved, temp for now to address
     720        // styling issues - this will need styling ideas
     721        td {
     722            .button {
     723                border: 0;
     724                display: block;
     725                padding: 0;
     726                text-align: center;
     727            }
     728        }
     729
     730    } // .notifications, .message-notices
     731} // #buddypress
Note: See TracChangeset for help on using the changeset viewer.