Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
04/28/2015 06:16:49 PM (10 years ago)
Author:
hnla
Message:

Commit updates twentyfourteen companion styles:

  • Adds new mixins
  • Replicates new groups/users sections as in twentyfifteen
  • Updates sectioning formatting
  • Adds new color variables
  • Updates object nav users/groups
  • Runs through groups screens broad pass styles
  • addresses item-headers layouts groups/user screens

See #6338

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r9784 r9816  
    8484// Box sizing
    8585
    86 @mixin box-model($box-model) {
     86@mixin box-model($box-model: border-box) {
    8787//  -webkit-box-sizing: $box-model;
    8888//  -moz-box-sizing: $box-model;
    … …  
    9090}
    9191
     92// BP message boxes
     93@mixin message-box($background, $text-color: inherit) {
     94    background: lighten($background, 10%);
     95    border: 1px solid darken($background, 10%);
     96    color: $text-color;
     97}
     98
     99// titles dark backgrounds
     100@mixin title-background-dark() {
     101    background: lighten($dark-background, 20%);
     102    color: $dark-back-text-color;
     103}
     104
    92105// Variabals: color definitions
    93 $content-background: #fff;
    94 $light-background:   #f7f7f7;
    95 $medium-background:  #999;
    96 $dark-background:    #000;
    97 $border-color:       #000; // border color can be varied using rgba
    98 $border-med:         rgba(#000, 0.2);
    99 $border-light:       rgba(#000, 0.1); // BP dividers
    100 $body-text:          #2b2b2b; // 2015 body text color
    101 $bp-button-hover:    #ededed; // this is the default BP button hover background
     106$content-background:     #fff;
     107$dark-back-text-color:   #fff;
     108$light-background:       #f7f7f7;
     109$medium-background:      #999;
     110$dark-background:        #000;
     111$border-color:           #000; // border color can be varied using rgba
     112$border-med:             rgba(#000, 0.2);
     113$border-light:           rgba(#000, 0.1); // BP dividers
     114$body-text:              #2b2b2b; // 2015 body text color
     115$bp-button-hover:        #ededed; // this is the default BP button hover background
     116$notice-warning:         #d05656;
     117$notice-info:            #9fd1e2;
    102118
    103119// 2014 font family
    … …  
    133149    4.4 - Blogs Loop
    1341505.0 - Directories - Members, Groups, Blogs, Forums
    135 6.0 - Single Group Screens
    136 7.0 - Single User Account Screens
    137     7.1 - Notifications
    138     7.2 - Private Messaging Threads
    139     7.3 - Extended Profiles
    140     7.4 - Settings
    141 8.0 - Forms  -  General
    142 9.0 - Tables -  General
    143 10.0 - Error / Success Messages
    144 11.0 - Ajax Loading
    145 12.0 - Widgets
     1516.0 - Single Item screens: User Account & Single Group Screens
     152    6.1 - Item Headers: Global
     153        6.1.1 - Item-header: Groups;
     154        6.1.2 -  item-header: User Accounts
     155    6.2 - Item Body: Global
     156        6.2.1 - item-body: Groups
     157            6.2.1.1- Management settings screens
     158            6.2.1.2 - Group members list
     159            6.2.1.3 - Group Send Invites
     160        6.2.2 - item-body: User Accounts
     161            6.2.2.1 - classes, pag, filters
     162            6.2.2.2 - Extended Profiles
     163            6.2.2.3 - Groups
     164            6.2.2.4 - friends
     165            6.2.2.5 - Private Messaging Threads
     166            6.2.2.6 - Settings
     1677.0 - Forms  -  General
     1688.0 - Tables -  General
     1699.0 - Error / Success Messages
     17010.0 - Ajax Loading
     17111.0 - Widgets
    146172------------------------------------------------------------------------------*/
    147173
    … …  
    186212
    187213/**
    188 * ------------------------------------------------------------------------------
    189 * @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
    190 *-------------------------------------------------------------------------------
     214*----------------------------------------------------------
     215* @subsection 2.1 - Object Nav / Subnav (item-list-tabs)
     216*
     217* The main navigational elements for all BP screens
     218*----------------------------------------------------------
    191219*/
    192220
    … …  
    231259} // close .directory #buddypress
    232260
    233     /*__ Vertical Menu User Account Screens __*/
     261/* List last filters global */
     262#buddypress {
     263    #subnav {
     264        li#activity-filter-select.last {
     265            line-height: 2.1;
     266            margin-top: 0;
     267        }
     268    }
     269}
     270
     271/*__ Vertical Menu User Account Screens __*/
    234272
    235273// This block contains the rules to re-factor the item-body structural element
    236 // to sit alongside the vert menu
     274// to sit alongside the vert menu & menu item styles.
     275
     276// Boders & backgrounds for user/group navs rely on one color
     277// set this here for convenience of changing and clarity
     278$nav-background-border: #bebebe;
    237279
    238280@media screen and (min-width: 783px) {
    239     .bp-user #buddypress {
    240         background: #eee;
     281    #buddypress {
     282        background: lighten($nav-background-border, 10%);
    241283
    242284        #item-header,
    … …  
    245287        }
    246288
    247         #item-body {border-left: 1px solid #ddd;}
     289        #item-body {border-left: 1px solid $nav-background-border;}
    248290
    249291        #object-nav {
    250             background: #eee;
    251             border-right: 1px solid #ddd;
     292            background: lighten($nav-background-border, 10%);
     293            border-right: 1px solid $nav-background-border;
    252294            float: left;
    253295            margin-right: -1px;
    … …  
    256298            ul {
    257299                border-bottom: 0;
     300                border-top: 1px solid $nav-background-border;
    258301                padding: 0;
    259302
    … …  
    261304                    float: none;
    262305                    overflow: hidden;
     306
     307                    &:focus,
     308                    &:hover {
     309                        background: $nav-background-border;
     310                    }
    263311
    264312                    span {
    … …  
    268316                    }
    269317                }
     318
     319                li.current {
     320                    background: lighten($nav-background-border, 20%);
     321                }
    270322            }
    271323        }
    … …  
    277329
    278330            #subnav {
    279                 border: 1px solid #ddd;
     331                border: 1px solid $nav-background-border;
    280332                border-left: 0;
    281333                border-right: 0;
    282334                margin: 0 (-$spacing-val-md) $spacing-val-lg;
     335
     336                li:focus,
     337                li:hover {
     338                    background: $nav-background-border;
     339                }
     340
     341                li.current {
     342                    background: lighten($nav-background-border, 20%);
     343                }
    283344            }
    284345        }
    … …  
    287348
    288349/**
    289 *-------------------------------------------------------------------------------
    290 * @section 2.2 - Pagination
    291 *-------------------------------------------------------------------------------
     350*----------------------------------------------------------
     351* @subsection 2.2 - Pagination
     352*----------------------------------------------------------
    292353*/
    293354
    … …  
    392453                    div {
    393454                        display: inline-block;
    394                         margin: spacing-val-xs $spacing-val-xs 0 0;
     455                        margin: $spacing-val-xs $spacing-val-xs 0 0;
    395456                    }
    396457                }
    … …  
    438499
    439500/**
    440 *-------------------------------------------------------------------------------
    441 * @section 4.0 - BP Lists / Loops Generic
    442 *-------------------------------------------------------------------------------
    443 */
    444 
    445 /**
    446 *-------------------------------------------------------------------------------
     501*------------------------------------------------------------
    447502* @section 4.1 - Activity
    448 *-------------------------------------------------------------------------------
    449 */
    450 
    451 /**
    452 *-------------------------------------------------------------------------------
    453 * @section 4.1.1 - Activity What's New
    454 *-------------------------------------------------------------------------------
     503*------------------------------------------------------------
     504*/
     505
     506/**
     507*-------------------------------------------------
     508* @subsection 4.1.1 - Activity What's New
     509*-------------------------------------------------
    455510*/
    456511#buddypress {
    … …  
    465520
    466521/**
    467 *-------------------------------------------------------------------------------
    468 * @section 4.1.2 - Activity Listing
    469 *-------------------------------------------------------------------------------
    470 */
    471 
    472 /**
    473 *-------------------------------------------------------------------------------
    474 * @section 4.1.3 - Activity Comments
    475 *-------------------------------------------------------------------------------
     522*-------------------------------------------------
     523* @subsection 4.1.2 - Activity Listing
     524*-------------------------------------------------
     525*/
     526
     527/**
     528*-------------------------------------------------
     529* @subsection 4.1.3 - Activity Comments
     530*-------------------------------------------------
    476531*/
    477532
    … …  
    521576
    522577/**
    523 *-------------------------------------------------------------------------------
     578*------------------------------------------------------------
    524579* @section 4.2 - Members Loop
    525 *-------------------------------------------------------------------------------
     580*------------------------------------------------------------
    526581*/
    527582
    … …  
    546601    }
    547602}
     603
     604/*
     605*-------------------------------------------------------------------------------
     606* @section 6.0 - Single Item screens
     607*-------------------------------------------------------------------------------
     608*/
     609/* groups & user account page entry title */
     610.single-item.groups,
     611.bp-user {
     612
     613    .entry-title {
     614        @include title-background-dark();
     615        @include font-size(22);
     616        padding: 0.2em;
     617    }
     618
     619    @media screen and (min-width: 673px) {
     620        .entry-title {
     621            @include font-size(28);
     622        }
     623    }
     624
     625} // close #buddypress
     626/**
     627*------------------------------------------------------------
     628* @subsection 6.1 - Item Header: Global
     629*------------------------------------------------------------
     630*/
     631
     632/**
     633*-------------------------------------------------
     634* @subsection 6.1.1 - item-header: Groups
     635*-------------------------------------------------
     636*/
     637.single-item.groups {
     638    #buddypress {
     639
     640        @media screen and (max-width: 594px) {
     641            div#item-header {
     642                display: flex;
     643                flex-direction: column;
     644
     645                #item-header-avatar {
     646                    order: 1;
     647                    text-align: center;
     648
     649                    a {
     650                        border-bottom: 0;
     651
     652                        img {
     653                            display: inline-block;
     654                            float: none;
     655                        }
     656                    }
     657                }
     658
     659                #item-header-content {order: 2;}
     660
     661                #item-actions {
     662                    margin-left: 0;
     663                    order: 3;
     664                    text-align: left;
     665
     666                    ul {
     667                        margin-left: 0;
     668
     669                        li {
     670                            float: left;
     671                        }
     672                    }
     673                } // close #item-actions
     674            }
     675        } // close @media
     676
     677        #item-header {
     678
     679            #item-actions {
     680                float: none;
     681                width: auto;
     682
     683                h3 {
     684                    @include font-size(20);
     685                }
     686            }
     687
     688            #item-header-avatar {
     689                text-align: center;
     690            }
     691
     692            #item-header-content {
     693                float: none;
     694                overflow: hidden;
     695            }
     696
     697            @media screen and (min-width: 594px) {
     698                #item-actions {
     699                    float: right;
     700                }
     701
     702                #item-header-avatar {
     703                    float: left;
     704                }
     705
     706                #item-header-content {
     707                    float: none;
     708                    overflow: hidden;
     709                }
     710            }// close @media
     711
     712        }
     713    }
     714} // close .single-item.groups
     715
     716/**
     717*-------------------------------------------------
     718* @subsection 6.1.2 - item-header: User Accounts
     719*-------------------------------------------------
     720*/
     721
     722.bp-user #buddypress {
     723    #item-header {
     724        padding-bottom: $spacing-val-sm;
     725
     726        #item-header-avatar {
     727            text-align: center;
     728            width: 100%;
     729
     730            img {
     731                float: none;
     732            }
     733        }
     734
     735        @media screen and (min-width: 673px) {
     736            #item-header-avatar {
     737                float: left;
     738                overflow: hidden;
     739                text-align: left;
     740                width: 20%;
     741
     742                img {margin: 0;}
     743            }
     744
     745            #item-header-content {
     746                float: right;
     747                width: 78%;
     748            }
     749        }
     750
     751    } // close #item-header
     752
     753} // close .bp-user #buddypress
     754
     755/**
     756*------------------------------------------------------------
     757* @subsection 6.2 - Item Body: Global
     758*------------------------------------------------------------
     759*/
     760
     761/**
     762*-------------------------------------------------
     763* @subsection 6.2.1 - item-body: groups
     764*-------------------------------------------------
     765*/
     766
     767/**
     768    *------------------------------
     769    * 6.2.1.1 - Groups Management
     770    *------------------------------
     771    */
     772
     773/* manage members */
     774.groups.manage-members {
     775    #group-settings-form {
     776
     777        h4 {margin-top: $spacing-val-lg;}
     778
     779        .item-list {
     780            background: $light-background;
     781            border-top: 0;
     782            padding: 0 0.5em;
     783
     784            li {
     785                border-bottom: 1px solid $border-light;
     786                &:last-child {border-bottom: 0;}
     787
     788                img,
     789                h5 {
     790                    clear: none;
     791                    float: left;
     792                    > a {border-bottom: 0;}
     793                }
     794
     795                span.small {
     796                    display: block;
     797                    float: none;
     798                    margin-top: $spacing-val-sm;
     799                    width: 100%;
     800
     801                    a {
     802                        display: inline-block;
     803                        margin: $spacing-val-xs 0;
     804                        width: 100%;
     805
     806                        @media screen and (min-width: 38.75em) {
     807                            width: auto;
     808                        }
     809                    }
     810                }
     811
     812                h5 {
     813                    margin: 0;
     814                }
     815
     816            }
     817        }
     818    }
     819} // close .groups.manage-members
     820
     821/**
     822    *------------------------------
     823    * 6.2.1.3 - Groups Send Invites
     824    *------------------------------
     825    */
     826
     827.send-invites {
     828    #buddypress {
     829        #item-body {
     830            @media screen and (min-width: 783px) {
     831                border-top: 1px solid $nav-background-border;
     832            }
     833
     834            #invite-list {width: 120px;}
     835            .main-column {margin-left: 160px;}
     836
     837            li {
     838                img.avatar {
     839                    display: block;
     840                    float: none;
     841                    margin: $spacing-val-sm auto;
     842                }
     843
     844                .action {
     845                    margin-top: $spacing-val-sm;
     846                    text-align: left;
     847                    width: 100%;
     848
     849                    @media screen and (min-width: 38.75em) {
     850                        text-align: right;
     851                    }
     852                }
     853            }
     854
     855            @media screen and (min-width: 594px) {
     856                #invite-list {width: 160px;}
     857                .main-column {margin-left: 190px;}
     858
     859                li {
     860                    img.avatar {
     861                        float: left;
     862                        margin: 0 $spacing-val-sm 0 0;
     863                    }
     864                }
     865            }
     866
     867        }
     868    }
     869}
     870/**
     871*-------------------------------------------------
     872* @subsection 6.2.2 - item-body: User Accounts
     873*-------------------------------------------------
     874*/
     875#buddypress {
     876/**
     877    *------------------------------
     878    * 6.2.2.2 - Extended Profiles
     879    *------------------------------
     880    */
     881    .profile {
     882
     883        .bp-widget {
     884            h4 {
     885                background: $medium-background;
     886                color: #fff;
     887                padding: 0.4em 0.2em;
     888            }
     889        }
     890
     891            /* Edit profile */
     892
     893        #profile-edit-form {
     894            .button-nav:before,
     895            .button-nav:after {
     896                content: " ";
     897                display: table;
     898            }
     899
     900            .button-nav:after {
     901                clear: both;
     902            }
     903
     904            ul.button-nav {
     905                border-bottom: 1px solid $border-light;
     906                margin-left: 0;
     907
     908                li {
     909                    float: left;
     910                    margin-bottom: 0;
     911
     912                    &.current {
     913                        border: 1px solid $border-light;
     914                        border-bottom-color: #fff;
     915                        margin-bottom: -1px;
     916                    }
     917                } // li
     918
     919                a {
     920                    background: none;
     921                    border: 0;
     922                    @include font-size(18)
     923                }
     924            } //.button-nav
     925
     926            .field-visibility-settings-toggle,
     927            .field-visibility-settings {
     928                @include font-size(14);
     929            }
     930
     931            .field-visibility-settings-close,
     932            .visibility-toggle-link {
     933                background: $dark-background;
     934                color: #fff;
     935                padding: 0.2em 0.5em;
     936            }
     937        } // close profile form
     938
     939    } // close .profile
     940
     941} // close #buddypress - user acounts item-body
    548942/*------------------------------------------------------------------------------
    549 * @section - 8.0 - Forms  - General
     943* @section - 7.0 - Forms  - General
    550944*-------------------------------------------------------------------------------
    551945*/
    … …  
    554948// are not inherited or being overriden.
    555949#buddypress {
     950
     951    .standard-form {
     952        input[type="text"],
     953        textarea {
     954            width: 100%;
     955        }
     956    }
    556957
    557958    div.activity-comments {
    … …  
    6431044/**
    6441045*-------------------------------------------------------------------------------
    645 * @section 9.0 - Tables General
     1046* @section 8.0 - Tables General
    6461047*-------------------------------------------------------------------------------
    6471048*/
    … …  
    6491050/*__ User Account tables __*/
    6501051
     1052/**
     1053*-------------------------------------------------------------------------------
     1054* @section 9.0 - Error / Success messages
     1055*-------------------------------------------------------------------------------
     1056*/
     1057#buddypress {
     1058    div#message.info {
     1059        p {
     1060            @include message-box($notice-info);
     1061        }
     1062    }
     1063}
     1064
     1065// Without direct classes on our mesages ( 'warning' )
     1066// we need to use the body classes
     1067// message args ($variable-color, text-color)
     1068.delete-group {
     1069    #buddypress {
     1070        div#message.info {
     1071            p {
     1072                @include message-box($notice-warning, #fff);
     1073            }
     1074        }
     1075    }
     1076}
     1077
Note: See TracChangeset for help on using the changeset viewer.