Skip to:
Content

BuddyPress.org

Ticket #6338: twentyfourteen-comp-style.02.patch

File twentyfourteen-comp-style.02.patch, 16.2 KB (added by hnla, 10 years ago)

Update scss file for formatting, mixins, & styles

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

     
    8383
    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;
    8989        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
    104120@mixin default-font() {
     
    132148        4.3 - Groups Loop
    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
    148174/**
     
    185211*/
    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
    193221.directory #buddypress {
     
    230258        } // close #subnav
    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}
    234270
     271/*__ Vertical Menu User Account Screens __*/
     272
    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.
    237275
     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;
     279
    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,
    243285                #item-body {
    244286                        background: #fff;
    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;
    254296                        width: 200px;
    255297
    256298                        ul {
    257299                                border-bottom: 0;
     300                                border-top: 1px solid $nav-background-border;
    258301                                padding: 0;
    259302
    260303                                li {
    261304                                        float: none;
    262305                                        overflow: hidden;
    263306
     307                                        &:focus,
     308                                        &:hover {
     309                                                background: $nav-background-border;
     310                                        }
     311
    264312                                        span {
    265313                                                border-radius: 10%;
    266314                                                float: right;
    267315                                                margin-right: 15px;
    268316                                        }
    269317                                }
     318
     319                                li.current {
     320                                        background: lighten($nav-background-border, 20%);
     321                                }
    270322                        }
    271323                }
    272324
     
    276328                        width: auto;
    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                }
    285346        } // close .bp-user #buddypress
    286347} // close @media
    287348
    288349/**
    289 *-------------------------------------------------------------------------------
    290 * @section 2.2 - Pagination
    291 *-------------------------------------------------------------------------------
     350*----------------------------------------------------------
     351* @subsection 2.2 - Pagination
     352*----------------------------------------------------------
    292353*/
    293354
    294355/**
     
    391452                                        a,
    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                                }
    397458                        } // close @media
     
    437498} // close #budypress
    438499
    439500/**
    440 *-------------------------------------------------------------------------------
    441 * @section 4.0 - BP Lists / Loops Generic
    442 *-------------------------------------------------------------------------------
    443 */
    444 
    445 /**
    446 *-------------------------------------------------------------------------------
     501*------------------------------------------------------------
    447502* @section 4.1 - Activity
    448 *-------------------------------------------------------------------------------
     503*------------------------------------------------------------
    449504*/
    450505
    451506/**
    452 *-------------------------------------------------------------------------------
    453 * @section 4.1.1 - Activity What's New
    454 *-------------------------------------------------------------------------------
     507*-------------------------------------------------
     508* @subsection 4.1.1 - Activity What's New
     509*-------------------------------------------------
    455510*/
    456511#buddypress {
    457512        #whats-new-form {
     
    464519}
    465520
    466521/**
    467 *-------------------------------------------------------------------------------
    468 * @section 4.1.2 - Activity Listing
    469 *-------------------------------------------------------------------------------
     522*-------------------------------------------------
     523* @subsection 4.1.2 - Activity Listing
     524*-------------------------------------------------
    470525*/
    471526
    472527/**
    473 *-------------------------------------------------------------------------------
    474 * @section 4.1.3 - Activity Comments
    475 *-------------------------------------------------------------------------------
     528*-------------------------------------------------
     529* @subsection 4.1.3 - Activity Comments
     530*-------------------------------------------------
    476531*/
    477532
    478533#buddypress {
     
    520575
    521576
    522577/**
    523 *-------------------------------------------------------------------------------
     578*------------------------------------------------------------
    524579* @section 4.2 - Members Loop
    525 *-------------------------------------------------------------------------------
     580*------------------------------------------------------------
    526581*/
    527582
    528583#buddypress {
     
    545600                }
    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*/
    552946
     
    554948// are not inherited or being overriden.
    555949#buddypress {
    556950
     951        .standard-form {
     952                input[type="text"],
     953                textarea {
     954                        width: 100%;
     955                }
     956        }
     957
    557958        div.activity-comments {
    558959                form {
    559960                        .ac-textarea {
     
    6421043
    6431044/**
    6441045*-------------------------------------------------------------------------------
    645 * @section 9.0 - Tables General
     1046* @section 8.0 - Tables General
    6461047*-------------------------------------------------------------------------------
    6471048*/
    6481049
    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