Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
04/26/2015 10:44:51 AM (9 years ago)
Author:
hnla
Message:

Commit updates twentyfifteen companion style files

  • Adds border-radius mixins
  • Update Sections / section numbering
  • Addresses single group screens styling headers for responsive breakpoints
  • Item-body component styling, settings sub screens
  • Removes Avatar upload nav tabbed styles from twentyfifteen to avatar.css to provide tabbed styles theme independent.

See #6291

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r9770 r9806  
    1212
    1313// Twentyfifteen Media Queries / Breakpoints
    14 // @media screen and (min-width: 22em) // Additional for xtra small mobile
     14// @media screen and (max-width: 22em) // Additional for xtra small mobile only
     15// @media screen and (max-width: 30em) // Additional small only
    1516// @media screen and (min-width: 38.75em)
    1617// @media screen and (min-width: 46.25em)
    … …  
    3435    font-size: $rem-font-value + rem;
    3536}
     37
     38// Border border-radius mixins
     39// To allow mixins to pass cscc-lint tests we will not provide vendor prefix
     40// until such time as exemption lists can be built for the scss-lint.yml
     41
     42@mixin border-radius($radius) {
     43//  -webkit-border-radius: $radius;
     44//  -moz-border-radius: $radius;
     45//  -ms-border-radius: $radius;
     46    border-radius: $radius;
     47    background-clip: padding-box;
     48}
     49
     50@mixin border-top-radius($radius) {
     51//  -webkit-border-top-right-radius: $radius;
     52    border-top-right-radius: $radius;
     53//  -webkit-border-top-left-radius: $radius;
     54    border-top-left-radius: $radius;
     55    background-clip: padding-box;
     56}
     57
     58@mixin border-right-radius($radius) {
     59//  -webkit-border-bottom-right-radius: $radius;
     60    border-bottom-right-radius: $radius;
     61//  -webkit-border-top-right-radius: $radius;
     62    border-top-right-radius: $radius;
     63    background-clip: padding-box;
     64}
     65
     66@mixin border-bottom-radius($radius) {
     67//  -webkit-border-bottom-right-radius: $radius;
     68    border-bottom-right-radius: $radius;
     69//  -webkit-border-bottom-left-radius: $radius;
     70    border-bottom-left-radius: $radius;
     71    background-clip: padding-box;
     72}
     73
     74@mixin border-left-radius($radius) {
     75//  -webkit-border-bottom-left-radius: $radius;
     76    border-bottom-left-radius: $radius;
     77//  -webkit-border-top-left-radius: $radius;
     78    border-top-left-radius: $radius;
     79    background-clip: padding-box;
     80}
     81
     82// Box sizing
     83
     84@mixin box-model($box-model) {
     85//  -webkit-box-sizing: $box-model;
     86//  -moz-box-sizing: $box-model;
     87    box-sizing: $box-model;
     88}
     89
    3690// Variabals: color definitions
    3791$content-background: #fff;
    … …  
    771315.0 - Directories - Members, Groups, Blogs, Forums
    781326.0 - Single Group Screens
     133 6.1 - Item-header
     134 6.2 - Management settings screens
     135 6.3 - Group members list
    791367.0 - Single User Account Screens
    80     7.1 - Notifications
    81     7.2 - Private Messaging Threads
    82     7.3 - Extended Profiles
    83     7.4 - Settings
     137    7.1 - Item Header
     138    7.2 - Extended Profiles
     139    7.3 - Groups
     140    7.4 - friends
     141    7.5 - Private Messaging Threads
     142    7.6 - Settings
    841438.0 - Forms  -  General
    851449.0 - Tables -  General
    … …  
    308367
    309368@media screen and (min-width: 55em) {
    310     .bp-user #buddypress {
     369    /*.bp-user*/ #buddypress {
    311370        background: $light-background;
    312371
    … …  
    485544                    // Provisionally lets keep the 'action' div
    486545                    //position but inline-block the buttons
     546
    487547                    @media screen and (min-width: 38.75em) {
    488548                        // keep buttons to a row small tablet up
    … …  
    490550                        width: auto;
    491551                    } // close @media
     552
    492553                    @media screen and (min-width: 59.6875em) {
    493554                        // take buttons to block to stack them when floated right
    … …  
    684745            }
    685746        }
    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 */
     747
    698748    } // close #members-list
    699749} //close #BuddyPress
     750
     751/**
     752*-------------------------------------------------------------------------------
     753* @section 6.0 - Single Group Screens
     754*-------------------------------------------------------------------------------
     755*/
     756
     757
     758    /**
     759    *------------------------------------------------------
     760    * @subsection 6.1 - item-header
     761    *------------------------------------------------------
     762    */
     763
     764.groups {
     765    #buddypress {
     766
     767        // Move visual flow of avatar & item-actions at narrow width,
     768        // avatar first after group title
     769        @media screen and (max-width: 38.75em) {
     770            div#item-header {
     771                display: flex;
     772                flex-direction: column;
     773
     774                #item-header-avatar {
     775                    order: 1;
     776                    text-align: center;
     777
     778                    a {
     779                        border-bottom: 0;
     780
     781                        img {
     782                            display: inline-block;
     783                            float: none;
     784                        }
     785                    }
     786                }
     787
     788                #item-header-content {order: 2;}
     789
     790                #item-actions {order: 3;}
     791            }
     792        } // close @media
     793
     794        div#item-header {
     795            padding-bottom: $spacing-val-lg;
     796
     797            div#item-actions {
     798                margin: 0;
     799                width: 100%;
     800
     801                @media screen and (min-width: 38.75em) {
     802                    clear: none;
     803                    float: right;
     804                    width: 50%;
     805                }
     806
     807                h3 {
     808                    background: $dark-background;
     809                    color: $content-background;
     810                    @include font-size(14);
     811
     812                    @media screen and (min-width: 46.25em) {
     813                        @include font-size(16);
     814                    }
     815                    padding: 0.2em;
     816                }
     817            } // close item-actions
     818
     819            @media screen and (min-width: 46.25em) {
     820
     821                #item-header-avatar,
     822                #item-header-content {
     823                    float: left;
     824                }
     825
     826                #item-header-avatar {
     827                    width: 21%;
     828                }
     829
     830                #item-header-content {
     831                    margin-left: 4%;
     832                    width: 40%;
     833                }
     834
     835                div#item-actions {
     836                    float: right;
     837                    width: 28%;
     838                }
     839
     840            } // close @media
     841
     842        } // close #item-header
     843    } // close #buddypress
     844} // close .groups
     845
     846/**
     847*-------------------------------------------------------
     848* @subsection 6.2 - Management settings screens
     849*-------------------------------------------------------
     850*/
     851
     852// headings settings screens & general global settings styles
     853.groups {
     854    #group-settings-form {
     855        h4 {
     856            background: $dark-background;
     857            color: $content-background;
     858            padding: 0.2em;
     859        }
     860    }
     861}
     862
     863.groups.edit-details {
     864    #group-settings-form {
     865
     866        label {
     867            background: $dark-background;
     868            @include border-top-radius(4px);
     869            color: $content-background;
     870            display: inline-block;
     871            margin-bottom: 0;
     872            padding: 0.2em;
     873            width: 80%;
     874
     875            @media screen and (min-width: 38.75em) {
     876                width: 60%;
     877            }
     878
     879        }
     880
     881        textarea + p label {
     882            background: none;
     883            color: inherit;
     884            @include font-size(14);
     885            width: auto;
     886        }
     887
     888    }
     889} // close .groups.edit-details
     890
     891.groups.group-settings {
     892    #group-settings-form {
     893
     894        div.radio label {
     895            border: 1px solid $border-light;
     896            padding: 0.2em;
     897
     898            ul {
     899                color: rgba($body-text, 0.6);
     900                @include font-size(14);
     901            }
     902        }
     903
     904    }
     905} // close .groups.group-settings
     906
     907.groups.group-avatar {
     908
     909    form > p {
     910        margin-top: $spacing-val-md;
     911    }
     912
     913}
     914
     915.groups.manage-members {
     916    #group-settings-form {
     917        .item-list {
     918            li {
     919                border-bottom: 1px solid $border-light;
     920
     921                img,
     922                h5 {
     923                    float: left;
     924
     925                    > a {border-bottom: 0;}
     926                }
     927
     928                span.small {
     929                    clear: left;
     930                    display: block;
     931                    float: none;
     932                    margin-top: $spacing-val-sm;
     933
     934                    a {
     935                        display: inline-block;
     936                        margin: $spacing-val-xs 0;
     937                        width: 100%;
     938
     939                        @media screen and (min-width: 38.75em) {
     940                            width: auto;
     941                        }
     942                    }
     943                }
     944
     945                h5 {
     946                    margin: 0;
     947                }
     948
     949            }
     950        }
     951    }
     952} // close .groups.manage-members
     953
     954/**
     955*------------------------------------------------------
     956* @subsection 6.3 - Group Members list
     957*------------------------------------------------------
     958*/
     959
     960// Massage the members search for groups nav specifically
     961.groups.group-members {
     962    #subnav {
     963        li {
     964            @media screen and (max-width: 38.75em) {
     965                background: #fff;
     966                padding: $spacing-val-md 0;
     967            }
     968            width: 100%;
     969
     970            #search-members-form {
     971                float: right;
     972
     973                @media screen and (max-width: 38.75em) {
     974                    margin: 0;
     975                    width: 100%;
     976
     977                    label {
     978                        input[type="text"] {width: 100%;}
     979                    }
     980                }
     981
     982                margin: $spacing-val-xs $spacing-val-xs 0 0;
     983            }
     984        }
     985    }
     986}
    700987
    701988/**
    … …  
    7601047        } // close .notifications-options-nav
    7611048
    762     /* Item Header */
     1049    /**
     1050    *-----------------------------------------------------
     1051    * @subsection 7.1 - Item Header
     1052    *-----------------------------------------------------
     1053    */
    7631054
    7641055        #item-header {
    … …  
    7991090        } // close #item-header
    8001091
    801     /* Profile */
     1092    /**
     1093    *-----------------------------------------------------
     1094    * @subsection 7.2 - Extended Profile
     1095    *-----------------------------------------------------
     1096    */
    8021097        .profile {
    8031098            .bp-widget {
    … …  
    8131108        } // close .profile
    8141109
    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, 0.5);
    828                 margin-bottom: $spacing-val-md;
    829 
    830                 li.current {
    831                     border: 1px solid rgba($border-color, 0.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 */
     1110/**
     1111    *-----------------------------------------------------
     1112    * @subsection 7.3 - Groups
     1113    *-----------------------------------------------------
     1114    */
    8461115
    8471116        #groups-list {
    … …  
    8561125        }
    8571126
    858     /* Messages / Notifications */
    859 
    8601127    } // close #BuddyPress
    8611128
    … …  
    9061173
    9071174    div.dir-search,
    908     div.message-search {
     1175    div.message-search,
     1176    li.groups-members-search
     1177     {
    9091178        float: none;
    9101179        margin: $spacing-val-sm 0;
    … …  
    9551224    @media screen and (min-width: 38.75em) {
    9561225        div.dir-search,
    957         div.message-search {
     1226        div.message-search,
     1227        li.groups-members-search {
    9581228            float: right;
    9591229            margin-bottom: 5px !important;
Note: See TracChangeset for help on using the changeset viewer.