Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
04/27/2015 06:13:20 PM (9 years ago)
Author:
hnla
Message:

Update twentyfifteen companion styles
Commit adds:

  • Updated & improved sectioning for user & group screens, clearer ordering of item-header & item-body for global and individual screens
  • Adds mixin to manage messages.notices boxes for color/border
  • Adds additional color variables
  • Corrects display issues,user screens
  • Updates what's new area
  • Adds tabbed nav style for profile edit group names
  • Updates styles for profile

See #6291

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r9806 r9807  
    8181
    8282// Box sizing
    83 
    8483@mixin box-model($box-model) {
    8584//  -webkit-box-sizing: $box-model;
    8685//  -moz-box-sizing: $box-model;
    8786    box-sizing: $box-model;
     87}
     88
     89@mixin message-box($background) {
     90    background: lighten($background, 10%);
     91    border: 1px solid darken($background, 10%);
    8892}
    8993
    … …  
    9599$border-color:       #999; // border color is varied using rgba
    96100$border-light:       #eaeaea; // BP dividers
     101$border-med:         #ddd;
    97102$body-text:          #333; // 2015 body text color
    98103$bp-button-hover:    #ededed; // this is the default BP button hover background
     104$notice-info:        #9fd1e2;
    99105/*--------------------------------------------------------------
    100106
    … …  
    130136    4.4 - Blogs Loop
    1311375.0 - Directories - Members, Groups, Blogs, Forums
    132 6.0 - Single Group Screens
    133  6.1 - Item-header
    134  6.2 - Management settings screens
    135  6.3 - Group members list
    136 7.0 - Single User Account Screens
    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
    143 8.0 - Forms  -  General
    144 9.0 - Tables -  General
    145 10.0 - Error / Success Messages
    146 11.0 - Ajax Loading
    147 12.0 - Widgets
     1386.0 - Single Item screens: User Account & Single Group Screens
     139    6.1 - Item Headers: Global
     140        6.1.1 - Item-header: Groups;
     141        6.1.2 -  item-header: User Accounts
     142    6.2 - Item Body: Global
     143        6.2.1 - item-body: Groups
     144         6.2.1.1- Management settings screens
     145   6.2.1.2 - Group members list
     146        6.2.2 - item-body: User Accounts
     147      6.2.2.1 - classes, pag, filters
     148      6.2.2.2 - Extended Profiles
     149      6.2.2.3 - Groups
     150      6.2.2.4 - friends
     151      6.2.2.5 - Private Messaging Threads
     152      6.2.2.6 - Settings
     1537.0 - Forms  -  General
     1548.0 - Tables -  General
     1559.0 - Error / Success Messages
     15610.0 - Ajax Loading
     15711.0 - Widgets
    148158--------------------------------------------------------------*/
    149159
    … …  
    243253
    244254/**
    245 *-------------------------------------------------------------------------------
    246 * @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
    247 *-------------------------------------------------------------------------------
     255*----------------------------------------------------------
     256* @section 2.1 - Navs Object Nav / Sub Nav (item-list-tabs)
    248257*
    249 * @description The main navigational elements for BP screens
     258* The main navigational elements for all BP screens
     259*----------------------------------------------------------
    250260*/
    251261
    … …  
    282292        }
    283293    }
     294
    284295    /*__ Horizontal menus __*/
    285296    #object-nav {
    286297        ul {
    287     //      background-color: #eee;
    288     //      border-bottom: 1px solid #ddd;
    289298            overflow: hidden;
    290299            li {float: none;}
    … …  
    358367} // close #buddypress
    359368
    360     /*__ Vertical menu User account screens __*/
    361 
    362 // This block contains the rules to re-factor the item-body structural element
     369    /*__ Vertical menu User Account / Group single screens __*/
     370
     371// This block contains rules to re-factor the item-body structural element
    363372// to sit alongside the vert menu
    364 // Structural layout and faux column styling of backgrounds is more suited
    365 // to the earlier section. todo: re-position sort out when known what styles
    366 // are being used.
    367373
    368374@media screen and (min-width: 55em) {
    369     /*.bp-user*/ #buddypress {
     375    .bp-user #buddypress,
     376    .single-item.groups #buddypress {
    370377        background: $light-background;
    371 
     378    }
     379
     380    #buddypress {
    372381        #item-header,
    373382        #item-body {
    … …  
    376385
    377386        #object-nav {
    378             border-right: 1px solid rgba($border-color, 0.1);
     387            border-right: 1px solid $border-med;
    379388            float: left;
    380389            margin-right: -1px;
    … …  
    399408
    400409        #item-body {
    401             border-left: 1px solid #ddd;
     410            border-left: 1px solid $border-med;
    402411            overflow: hidden;
    403412            padding: 0 $spacing-val-sm;
    … …  
    409418        }
    410419
    411     } // close .bp-user #buddypress
     420    } // close #buddypress
    412421} // close @media
    413422
    414423/**
    415 *-------------------------------------------------------------------------------
     424*----------------------------------------------------------
    416425* @section 2.2 - Pagination
    417 *-------------------------------------------------------------------------------
     426*----------------------------------------------------------
    418427*/
    419428
    … …  
    571580
    572581/**
    573 *-------------------------------------------------------------------------------
     582*----------------------------------------------------------
    574583* @section 4.1 - Activity
    575 *-------------------------------------------------------------------------------
    576 */
    577 
    578 /**
    579 *-------------------------------------------------------------------------------
     584*----------------------------------------------------------
     585*/
     586
     587/**
     588*-----------------------------------------------------
    580589* @section 4.1.1 - Activity Whats New
    581 *-------------------------------------------------------------------------------
     590*-----------------------------------------------------
    582591*/
    583592
    584593#buddypress {
    585594    form#whats-new-form {
     595
     596        // Line-height issue inherited from BP rules, override.
     597        p.activity-greeting {
     598            line-height: 1.4;
     599        }
     600
    586601        textarea {width: 100%;}
    587602        // corrective measure for clipped elements due to JS inline styling
     603
     604        @media screen and (max-width: 46.25em) {
     605            #whats-new-content {
     606                clear: left;
     607                margin: $spacing-val-sm 0 $spacing-val-md;
     608                padding: $spacing-val-sm 0 0;
     609            }
     610        }
     611
    588612        #whats-new-options[style] {
    589613            min-height: 6rem; // unit open to debate px value might be better.
    590         }
    591     }
     614            overflow: visible;
     615
     616            #whats-new-post-in-box {
     617                border: 1px solid rgba($border-color, 0.5);
     618                float: left;
     619                line-height: 1.5em;
     620                margin-top: 12px;
     621                padding-left: 0.2em;
     622                width: 100%;
     623
     624                select {
     625                    background: none;
     626                    border: 0;
     627                    float: right;
     628                    margin: 0;
     629                    min-height: 1.5em;
     630                    padding-left: 0.4em;
     631                }
     632            }
     633
     634            @media screen and (min-width: 30em) {
     635                #whats-new-post-in-box {
     636                    width: auto;
     637                }
     638
     639                #whats-new-submit {
     640                    float: right;
     641                }
     642            }
     643        }
     644    }
     645
    592646    // User account form requires matching bp default specificity
    593647    #item-body {
    … …  
    599653
    600654/**
    601 *-------------------------------------------------------------------------------
     655*-----------------------------------------------------
    602656* @section 4.1.2 - Activity Listing
    603 *-------------------------------------------------------------------------------
     657*-----------------------------------------------------
    604658*/
    605659
    … …  
    677731
    678732/**
    679 *-------------------------------------------------------------------------------
     733*-----------------------------------------------------
    680734* @section 4.1.3 - Activity Comments
    681 *-------------------------------------------------------------------------------
     735*-----------------------------------------------------
    682736*/
    683737#buddypress {
    … …  
    725779
    726780/**
    727 *-------------------------------------------------------------------------------
     781*----------------------------------------------------------
    728782* @section 4.2 - Members Loop
    729 *-------------------------------------------------------------------------------
     783*----------------------------------------------------------
    730784*/
    731785
    … …  
    751805/**
    752806*-------------------------------------------------------------------------------
    753 * @section 6.0 - Single Group Screens
     807* @section 6.0 - Single Item screens: User Account & Single Group Screens
    754808*-------------------------------------------------------------------------------
    755809*/
    756810
    757811
    758     /**
    759     *------------------------------------------------------
    760     * @subsection 6.1 - item-header
    761     *------------------------------------------------------
    762     */
    763 
    764 .groups {
     812/**
     813*-----------------------------------------------------------
     814* @subsection 6.1 - Item Header Global
     815*-----------------------------------------------------------
     816*/
     817
     818/**
     819*-----------------------------------------------------
     820* @subsection 6.1.1 - item-header Groups
     821*
     822* Group Specific Item Header
     823*-----------------------------------------------------
     824*/
     825
     826.single-item.groups {
    765827    #buddypress {
    766828
    … …  
    845907
    846908/**
    847 *-------------------------------------------------------
    848 * @subsection 6.2 - Management settings screens
    849 *-------------------------------------------------------
     909*-----------------------------------------------------
     910* @subsection 6.1.2 - Item Header User Accounts
     911*
     912* User Accounts Specific Item Header
     913*-----------------------------------------------------
     914*/
     915
     916.bp-user {
     917    #buddypress {
     918        #item-header {
     919            padding: $spacing-val-md 0;
     920
     921            #item-header-avatar {
     922                text-align: center;
     923                width: 100%;
     924
     925                img.avatar,
     926                a {
     927                    border-bottom: 0;
     928                    display: inline-block;
     929                    float: none;
     930                }
     931            }
     932
     933            @media screen and (min-width: 46.25em) {
     934                #item-header-avatar {
     935                    float: left;
     936                    width: 20%;
     937
     938                    img.avatar,
     939                    a {
     940                        float: left;
     941                        width: 100%;
     942                    }
     943                }
     944
     945                #item-header-content {
     946                    float: right;
     947                    margin-right: 5%;
     948                    width: 69%;
     949                }
     950
     951            } // close @media
     952
     953        } // close #item-header
     954
     955    } // close #buddypress
     956} // close .bp-user
     957
     958/**
     959*-----------------------------------------------------------
     960* @subsection 6.2 - Item Body: Global
     961*-----------------------------------------------------------
     962*/
     963
     964/**
     965*----------------------------------------------------
     966* @subsection 6.2.1 - Item Body Groups
     967*
     968* Groups specific item body rules -  screens
     969*----------------------------------------------------
     970*/
     971
     972/**
     973*-----------------------------------------
     974* @subsection 6.2.1.1 - Group Management
     975*-----------------------------------------
    850976*/
    851977
    … …  
    9531079
    9541080/**
    955 *------------------------------------------------------
    956 * @subsection 6.3 - Group Members list
    957 *------------------------------------------------------
    958 */
    959 
    960 // Massage the members search for groups nav specifically
     1081*-----------------------------------------
     1082* @subsection 6.2.1.2 - Group members
     1083*-----------------------------------------
     1084*/
     1085
     1086// Massage the members search for groups nav specifically.
    9611087.groups.group-members {
    9621088    #subnav {
    … …  
    9871113
    9881114/**
    989 *-------------------------------------------------------------------------------
    990 * @section 7.0 - Single User Account Screens
    991 *-------------------------------------------------------------------------------
     1115*-----------------------------------------------------
     1116* @subsection 6.2.2 - Item Body User Accounts
     1117*
     1118* User Account specific item body rules
     1119*-----------------------------------------------------
    9921120*/
    9931121
    … …  
    9971125    #buddypress {
    9981126
    999     /* General elements & classes, pagination, filters */
     1127/**
     1128*--------------------------------------------
     1129* @subsection 6.2.2.1 - classes, pag, filters
     1130*--------------------------------------------
     1131*/
    10001132
    10011133        table {
    … …  
    10471179        } // close .notifications-options-nav
    10481180
    1049     /**
    1050     *-----------------------------------------------------
    1051     * @subsection 7.1 - Item Header
    1052     *-----------------------------------------------------
    1053     */
    1054 
    1055         #item-header {
    1056             padding: $spacing-val-md 0;
    1057 
    1058             #item-header-avatar {
    1059                 text-align: center;
    1060                 width: 100%;
    1061 
    1062                 img.avatar,
    1063                 a {
    1064                     border-bottom: 0;
    1065                     display: inline-block;
    1066                     float: none;
    1067                 }
    1068             }
    1069 
    1070             @media screen and (min-width: 46.25em) {
    1071                 #item-header-avatar {
    1072                     float: left;
    1073                     width: 20%;
    1074 
    1075                     img.avatar,
    1076                     a {
    1077                         float: left;
    1078                         width: 100%;
    1079                     }
    1080                 }
    1081 
    1082                 #item-header-content {
    1083                     float: right;
    1084                     margin-right: 5%;
    1085                     width: 69%;
    1086                 }
    1087 
    1088             } // close @media
    1089 
    1090         } // close #item-header
    1091 
    1092     /**
    1093     *-----------------------------------------------------
    1094     * @subsection 7.2 - Extended Profile
    1095     *-----------------------------------------------------
     1181/**
     1182    *-------------------------------------------
     1183    * @subsection 6.2.2.2 - Extended Profiles
     1184    *-------------------------------------------
    10961185    */
    10971186        .profile {
    … …  
    11061195                table {margin-top: 0;}
    11071196            }
     1197            /* Edit profile */
     1198
     1199            #profile-edit-form {
     1200                .button-nav:before,
     1201                .button-nav:after {
     1202                    content: " ";
     1203                    display: table;
     1204                }
     1205
     1206                .button-nav:after {
     1207                    clear: both;
     1208                }
     1209
     1210                ul.button-nav {
     1211                    border-bottom: 1px solid $border-light;
     1212                    margin-left: 0;
     1213
     1214                    li {
     1215                        float: left;
     1216                        margin-bottom: 0;
     1217
     1218                        &.current {
     1219                            border: 1px solid $border-light;
     1220                            border-bottom-color: #fff;
     1221                            margin-bottom: -1px;
     1222                        }
     1223                    } // li
     1224
     1225                    a {
     1226                        background: none;
     1227                        border: 0;
     1228                        @include font-size(18)
     1229                    }
     1230                } //.button-nav
     1231
     1232                .field-visibility-settings-toggle,
     1233                .field-visibility-settings {
     1234                    @include font-size(14);
     1235                }
     1236
     1237                .field-visibility-settings-close,
     1238                .visibility-toggle-link {
     1239                    background: $dark-background;
     1240                    color: #fff;
     1241                    padding: 0.2em 0.5em;
     1242                }
     1243            } // close profile form
     1244
     1245            .bp-avatar {
     1246                #bp-delete-avatar {
     1247                    a {font-size: inherit; }
     1248                }
     1249            }
    11081250        } // close .profile
    11091251
    11101252/**
    1111     *-----------------------------------------------------
    1112     * @subsection 7.3 - Groups
    1113     *-----------------------------------------------------
     1253    *-------------------------------------------
     1254    * @subsection 6.2.2.3 - Groups
     1255    *-------------------------------------------
    11141256    */
    11151257
    … …  
    11311273/**
    11321274*-------------------------------------------------------------------------------
    1133 * @section 8.0 - Forms  - General
     1275* @section 7.0 - Forms  - General
    11341276*-------------------------------------------------------------------------------
    11351277*/
    … …  
    12671409/**
    12681410*-------------------------------------------------------------------------------
    1269 * @section 9.0 - Tables - General
     1411* @section 8.0 - Tables - General
    12701412*-------------------------------------------------------------------------------
    12711413*/
    … …  
    13271469    } // .notifications, .message-notices
    13281470} // #buddypress
     1471
     1472/**
     1473*-------------------------------------------------------------------------------
     1474* @section 9.0 - Error / Success messages
     1475*-------------------------------------------------------------------------------
     1476*/
     1477#buddypress {
     1478    div#message.info {
     1479        p {
     1480            @include message-box($notice-info);
     1481        }
     1482    }
     1483}
Note: See TracChangeset for help on using the changeset viewer.