Skip to:
Content

BuddyPress.org

Changeset 9767


Ignore:
Timestamp:
04/18/2015 06:39:24 PM (9 years ago)
Author:
hnla
Message:

Commit updates BP companion styles scss sheet for:

  • General improved handling of BP lists at small screen, mobile - stack elements in column flow
  • Primary lists - screen width layouts, action buttons/meta, content/desc breakpoints
  • Updates Activity stream styling, comment styling, comment form
  • Addresses inherited styles from parent theme to bring BP elements further into line with parent.
  • Updates user account screens general styles, table responsive font sizing, item-header responsive layout for avatar/last activity elements

#6291

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r9766 r9767  
    1212
    1313// Twentyfifteen Media Queries / Breakpoints
     14// @media screen and (min-width: 22em) // Additional for xtra small mobile
    1415// @media screen and (min-width: 38.75em)
    1516// @media screen and (min-width: 46.25em)
    … …  
    4041$border-color:       #999; // border color is varied using rgba
    4142$border-light:       #eaeaea; // BP dividers
    42 
     43$body-text:          #333; // 2015 body text color
     44$bp-button-hover:    #ededed; // this is the default BP button hover background
    4345/*--------------------------------------------------------------
    4446
    … …  
    6062>>> TABLE OF CONTENTS:
    6163----------------------------------------------------------------
    62 1.0 Theme Structural Elements
     641.0 Theme Structural Elements & overrides
    63652.0 - Navigation - General
    6466    2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
    … …  
    67694.0 - BP Lists / Loops Generic
    6870    4.1 - Activity Loop
    69         4.1.1 - Activity Listing
    70         4.1.2 - Activity Comments
     71        4.1.1 Whats New Activity
     72        4.1.2 - Activity Listing
     73        4.1.3 - Activity Comments
    7174    4.2 - Members Loop
    7275    4.3 - Groups Loop
    … …  
    8891/**
    8992*-------------------------------------------------------------------------------
    90 * @section 1.0 - Theme - Structural Elements
    91 *-------------------------------------------------------------------------------
    92 */
     93* @section 1.0 - Theme - Structural Elements & overrides
     94*-------------------------------------------------------------------------------
     95*/
     96
     97// Twentyfifteen  adds a generic grouped ruleset of clear:both;
     98// for all heading h# elements this is problematic where floats are concerned
     99// We reset this here under our #buddypress namespace
     100#buddypress {
     101    h1,
     102    h2,
     103    h3,
     104    h4,
     105    h5,
     106    h6 {
     107        clear: none;
     108    }
     109}
    93110
    94111// As BP screens have specific content lets adjust the themes primary elements
    … …  
    128145        } // .article
    129146    } // .main
     147   
    130148    .site-footer {
    131149        margin: 0 4%;
    … …  
    154172    .field-visibility-settings-toggle,
    155173    #latest-update,
    156     table, {
     174    table,
     175    .avatar-nav-items {
    157176        a { border-bottom: 0; }
    158177    }
    … …  
    196215            overflow: hidden;
    197216            padding: $spacing-val-xs 0;
     217           
     218            li {
     219                a {
     220                    span {border-radius: 25%;}
     221                }
     222            }
    198223        }
    199224    }
    … …  
    377402
    378403// 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
     404// aditional items are displayed, floating is an alternative that
     405// allows natural flow expansion.
     406// This block:
     407// * Manages li items, Stacks them small screen, floated left at wider screens.
     408// * Adjusts display of action buttons at small screen
    382409// mobile up.
    383410
    … …  
    386413        li {
    387414            overflow: hidden !important;
     415            // Undo BP floats to center avatars initially mobile up
     416            .item-avatar {
     417                margin-bottom: $spacing-val-sm;
     418                @media screen and (min-width: 38.75em) { margin-bottom: 0; }
     419                text-align: center;
     420                a {border-bottom: 0;}
     421                img.avatar {
     422                    display: inline-block;
     423                    float: none;           
     424                    // Quite early on we need to move avatars to the left(right)
     425                    @media screen and (min-width: 38.75em) {
     426                        display: block;
     427                        float: left;
     428                    }
     429                }
     430            }
    388431           
    389432            .item {
     433                margin-left: 25%;
     434               
     435                span.activity {font-style: italic;}
     436               
    390437                .item-desc {
    391438                    margin-left: 0;
    392                     width: auto;
    393                 }
    394             }
    395 
    396             @media screen and (min-width: 59.6875em) {
     439                    width: 70%;
     440                }
     441            }
     442
     443            @media screen and (min-width: 59.6875em) { 
    397444                .item-avatar,
    398445                .item,
    … …  
    403450                .item {
    404451                    left: 10%;
     452                    margin-left: 0;
    405453                    position: relative;
    406454                    width: 55%;
    … …  
    469517/**
    470518*-------------------------------------------------------------------------------
    471 * @section 4.1.2 - Activity Whats New
     519* @section 4.1.1 - Activity Whats New
    472520*-------------------------------------------------------------------------------
    473521*/
    … …  
    496544
    497545#buddypress {
     546
    498547    .activity-list {
     548       
     549        // re-size activity avatars
     550        li {
     551            .activity-avatar {
     552                a {
     553                    img.avatar {
     554                        height: 60px;
     555                        margin-left: 0;
     556                        width: 60px;
     557                    }
     558                }
     559            }
     560        }
     561       
     562        li.mini {
     563            .activity-avatar {
     564                a {
     565                    img.avatar {
     566                        height: 30px;
     567                        margin-left: 15px;
     568                        width: 30px;
     569                    }
     570                }
     571            }
     572
     573            .activity-content {
     574                .activity-header {
     575                    @include font-size(13);
     576                }
     577            }               
     578        }
     579       
    499580        .activity-content {
    500581            margin-top: -12px;
    501582
    502583            .activity-header {
     584                @include font-size(16);
     585                line-height: inherit;
     586                margin-right: 0;
     587               
     588                p {
     589                    background-color: $light-background;
     590                    border: 1px solid rgba($border-light, .6);
     591                    padding: 0 .2em;
     592                }
     593               
    503594                img.avatar {
    504595                    display: inline-block;
     596                    margin-bottom: 0 !important; // have to match to BP
    505597                }
    506598            } // close .activity-header
     599            .activity-meta {
     600                a {
     601                    display: block;
     602                    margin-bottom: $spacing-val-xs;
     603                    @media screen and (min-width: 38.75em) {
     604                        display: inline-block;
     605                        margin-bottom: 0;
     606                    }
     607                }
     608            }
     609
    507610        } // close .activity-content
     611       
    508612        .load-more a {display: block;}
     613   
    509614    } // close .activity-list
    510 
    511615} // close #buddypress
    512616
    513617/**
    514618*-------------------------------------------------------------------------------
     619* @section 4.1.3 - Activity Comments
     620*-------------------------------------------------------------------------------
     621*/
     622#buddypress {
     623    .activity {
     624        .activity-comments {
     625            border-left: 1px solid $border-light;
     626            margin-top: 5px;
     627           
     628            ul {
     629                background: rgba($light-background, .6);
     630                margin: 30px 0 0 2px;
     631            }
     632       
     633            .ac-form {
     634           
     635                input[type="submit"],
     636                .ac-reply-cancel {
     637                    color: rgba($body-text, .8);
     638                    display: inline-block;
     639                    font-family: inherit;
     640                    @include font-size(12);
     641                    font-weight: normal;
     642                    line-height: 1.2;
     643                    padding: 4px 10px;
     644                    text-transform: lowercase;
     645                    width: 100px;
     646                }
     647               
     648                .ac-reply-cancel {
     649                    border: 1px solid rgba($border-color, .7);
     650                    text-align: center;
     651                   
     652                    &:focus,
     653                    &:hover {
     654                        background: $bp-button-hover;
     655                    }
     656                }
     657
     658            } // close .ac-form
     659
     660        } // close .activity-comments
     661    } // close .activity
     662
     663} // close #buddypress
     664
     665/**
     666*-------------------------------------------------------------------------------
    515667* @section 4.2 - Members Loop
    516668*-------------------------------------------------------------------------------
    … …  
    519671#buddypress {
    520672    #members-list {
     673   
    521674        @media screen and (min-width: 59.6875em) {
    522675            li {
    … …  
    531684            }
    532685        }
    533     }
     686/*
     687        li {
     688            .item {
     689                .update {
     690                    border-left: 1px solid rgba($border-color, .4);
     691                    display: block;
     692                    margin: .5em 0;
     693                    padding-left: .3em;
     694                }
     695            }
     696        }
     697*/
     698    } // close #members-list
    534699} //close #BuddyPress
    535700
    … …  
    544709   
    545710    #buddypress {
     711   
     712    /* General elements & classes, pagination, filters */
     713   
     714        table {
     715            th {@include font-size(14)}
     716            td {@include font-size(12)}
     717       
     718            @media screen and (min-width: 46.25em) {
     719                th {@include font-size(16)}
     720                td {@include font-size(14)}
     721            }
     722       
     723            @media screen and (min-width: 77.5em) {
     724                th {@include font-size(18)}
     725                td {@include font-size(16)}
     726            }
     727        }
     728   
     729        .pag-count {font-style: italic;}
     730       
     731        .notifications-options-nav {
     732            border: 1px solid rgba($border-color, .5);
     733            float: left;
     734            width: 100%;
     735            @media screen and (min-width: 38.75em) {
     736                width: 300px;
     737            }
     738
     739            select,
     740            input {
     741                border: 0;
     742                @include font-size(14);
     743                outline: 0;
     744                padding: 0;
     745            }       
     746
     747            select {
     748                float: left;
     749                margin-right: 0;
     750                width: 60%;
     751            }
     752
     753            input {
     754                float: right;
     755                font-family: inherit;
     756                line-height: 20px;
     757                width: 40%;
     758            }
     759
     760        } // close .notifications-options-nav
     761   
     762    /* Item Header */
     763   
     764        #item-header {
     765            padding: $spacing-val-md 0;
     766       
     767            #item-header-avatar {
     768                text-align: center;
     769                width: 100%;
     770
     771                img.avatar,
     772                a {
     773                    border-bottom: 0;
     774                    display: inline-block;
     775                    float: none;
     776                }
     777            }
     778
     779            @media screen and (min-width: 46.25em) {
     780                #item-header-avatar {       
     781                    float: left;
     782                    width: 20%;
     783               
     784                    img.avatar,
     785                    a {
     786                        float: left;
     787                        width: 100%;
     788                    }
     789                }
     790       
     791                #item-header-content {
     792                    float: right;
     793                    margin-right: 5%;
     794                    width: 69%;
     795                }
     796   
     797            } // close @media
     798       
     799        } // close #item-header
     800   
     801    /* Profile */
     802        .profile {
     803            .bp-widget {
     804                h4 {
     805                    background: rgba($dark-background, .8);
     806                    color: #fff;
     807                    margin-bottom: 0;
     808                    padding: .4em;
     809                }
     810
     811                table {margin-top: 0;}
     812            }
     813        } // close .profile
     814       
     815        .bp-avatar-nav {
     816            ul:before,
     817            ul:after {
     818                content: " ";
     819                display: table;
     820            }
     821               
     822            ul:after {
     823                clear: both;
     824            }
     825               
     826            ul {
     827                border-bottom: 1px solid rgba($border-color, .5);
     828                margin-bottom: $spacing-val-md;
     829                   
     830                li.current {
     831                    border: 1px solid rgba($border-color, .5);
     832                    border-bottom-color: #fff;
     833                    border-top-left-radius: 4px;
     834                    border-top-right-radius: 4px;
     835                    margin-bottom: -1px;               
     836                       
     837                    a {
     838                        background: none;
     839                        outline: 0;
     840                    }
     841                } // close li.current
     842            }
     843        } // .bp-avatar-nav
     844       
     845        /* Groups */
     846       
    546847        #groups-list {
    547848            li {
    … …  
    554855            }
    555856        }
    556     }
     857   
     858    /* Messages / Notifications */
     859
     860    } // close #BuddyPress
     861
    557862} // close .bp-user
    558863
    … …  
    562867*-------------------------------------------------------------------------------
    563868*/
     869
     870// Match BP form elements to Themes(2015) styling where styles
     871// are not inherited or being overriden.
     872#buddypress {
     873   
     874    div.activity-comments {
     875        form {
     876            .ac-textarea {
     877                background: $light-background;
     878                border: 1px solid rgba($border-color, .3);
     879               
     880                textarea {
     881                    background: none;
     882                    border: 0;
     883                }
     884            }
     885        }
     886    }
     887
     888    select {border: 1px solid rgba($border-color, .5);}
     889
     890} // close #buddypress
    564891
    565892// 2015 applies 100% width to form element, remove this initially for BP search
Note: See TracChangeset for help on using the changeset viewer.