Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
05/09/2015 06:54:33 PM (11 years ago)
Author:
hnla
Message:

Update twentyfifteen companion styles
commit adds:
Additions provided by r-a-y for message thread layout, single headers, spacing, fonts.
Various style updates and scss additions.

  • Re-factor message thread layout - cheers r-a-y.
  • Add default fonts mixins
  • Port over updated vendor prefix mixin scss-lint disable rules block.
  • Update small screen responsive view for activity stream items.
  • Provide minor styling for activity-permalink views.
  • Updates single-item screens header responsive styles - cheers r-a-y.

See #6291 Props r-a-y

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r9852 r9859  
    3636}
    3737
     38// To allow mixins to pass VendorPrefix scss-lint tests we disable lint-test
     39// for specific blocks / rulesets
     40// until such time as exemption lists can be built for the scss-lint.yml?
     41// Any vendor prefix properties / mixins need to be in this block
     42// scss-lint:disable VendorPrefix
     43
    3844// 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 
    4245@mixin border-radius($radius) {
    43 //  -webkit-border-radius: $radius;
    44 //  -moz-border-radius: $radius;
    45 //  -ms-border-radius: $radius;
     46    -webkit-border-radius: $radius;
     47    -moz-border-radius: $radius;
     48    -ms-border-radius: $radius;
    4649    border-radius: $radius;
    4750    background-clip: padding-box;
    … …  
    4952
    5053@mixin border-top-radius($radius) {
    51 //  -webkit-border-top-right-radius: $radius;
     54    -webkit-border-top-right-radius: $radius;
    5255    border-top-right-radius: $radius;
    53 //  -webkit-border-top-left-radius: $radius;
     56    -webkit-border-top-left-radius: $radius;
    5457    border-top-left-radius: $radius;
    5558    background-clip: padding-box;
    … …  
    5760
    5861@mixin border-right-radius($radius) {
    59 //  -webkit-border-bottom-right-radius: $radius;
     62    -webkit-border-bottom-right-radius: $radius;
    6063    border-bottom-right-radius: $radius;
    61 //  -webkit-border-top-right-radius: $radius;
     64    -webkit-border-top-right-radius: $radius;
    6265    border-top-right-radius: $radius;
    6366    background-clip: padding-box;
    … …  
    6568
    6669@mixin border-bottom-radius($radius) {
    67 //  -webkit-border-bottom-right-radius: $radius;
     70    -webkit-border-bottom-right-radius: $radius;
    6871    border-bottom-right-radius: $radius;
    69 //  -webkit-border-bottom-left-radius: $radius;
     72    -webkit-border-bottom-left-radius: $radius;
    7073    border-bottom-left-radius: $radius;
    7174    background-clip: padding-box;
    … …  
    7376
    7477@mixin border-left-radius($radius) {
    75 //  -webkit-border-bottom-left-radius: $radius;
     78    -webkit-border-bottom-left-radius: $radius;
    7679    border-bottom-left-radius: $radius;
    77 //  -webkit-border-top-left-radius: $radius;
     80    -webkit-border-top-left-radius: $radius;
    7881    border-top-left-radius: $radius;
    7982    background-clip: padding-box;
    … …  
    8285// Box sizing
    8386@mixin box-model($box-model) {
    84 //  -webkit-box-sizing: $box-model;
    85 //  -moz-box-sizing: $box-model;
     87    -webkit-box-sizing: $box-model;
     88    -moz-box-sizing: $box-model;
    8689    box-sizing: $box-model;
    8790}
     91
     92// Calc
     93@mixin calc($property, $expression) {
     94    #{$property}: -webkit-calc(#{$expression});
     95    #{$property}: -moz-calc(#{$expression});
     96    #{$property}: calc(#{$expression});
     97}
     98
     99// Re-enable the VendorPrefix lint test
     100// scss-lint:enable VendorPrefix
    88101
    89102// BP message boxes
    … …  
    94107}
    95108
    96 // Variabals: color definitions
     109// 2015 font family
     110@mixin default-font-sans() {
     111    font-family: "Noto Sans", sans-serif;
     112}
     113
     114@mixin default-font-serif() {
     115    font-family: "Noto Serif", serif;
     116}
     117
     118// Variables: color definitions
    97119$content-background: #fff;
    98120$light-background:   #f7f7f7;
    99121$medium-background:  #ccc;
    100122$dark-background:    #555;
    101 $border-color:       #999; // border color is varied using rgba
     123$border-color:       #999;    // border color is varied using rgba
    102124$border-light:       #eaeaea; // BP dividers
    103125$border-med:         #ddd;
    104 $body-text:          #333; // 2015 body text color
     126$body-text:          #333;    // 2015 body text color
    105127$bp-button-hover:    #ededed; // this is the default BP button hover background
    106128$notice-error:       #c85a6e;
    … …  
    110132$stripe-odd:         #ebf0ff;
    111133$stripe-even:        #dbe5ff;
    112 $unread:             #cddaff;
     134$unread:             #dce5ff;
    113135
    114136/*--------------------------------------------------------------
    … …  
    214236            .entry-header,
    215237            .entry-content {
    216                 padding: 0 2rem 2rem;
     238                padding: 0 3rem 3rem 3rem;
    217239            }
    218240
    … …  
    289311        ul {
    290312            background-color: $light-background;
    291             border-bottom: 1px solid rgba($border-color, 0.4);
     313            border-bottom: 1px solid rgba($border-light, 0.9);
     314            border-top: 1px solid rgba($border-light, 0.9);
    292315            overflow: hidden;
    293316            padding: $spacing-val-xs 0;
    … …  
    303326    /*__ Horizontal menus __*/
    304327    #object-nav {
     328
    305329        ul {
    306330            overflow: hidden;
    … …  
    314338                    float: left;
    315339                }
    316                 //  li:nth-child(1n+7) {clear: left;}
    317340            }
    318341        }
    … …  
    407430
    408431                    span {
     432                        background: $content-background;
    409433                        border-radius: 10%;
    410434                        float: right;
    411                         margin-right: 15px;
     435                        margin-right: 2px;
    412436                    }
    413437                }
    … …  
    418442            border-left: 1px solid $border-med;
    419443            overflow: hidden;
    420             padding: 0 $spacing-val-sm;
     444            padding: 0 0 0 $spacing-val-md;
    421445            width: auto;
    422446
    423447            #subnav {
    424                 margin: 0 (-$spacing-val-sm);
     448                margin: 0 0 0 (-$spacing-val-md);
    425449            }
    426450        }
    … …  
    477501*/
    478502
     503// Adjusts Meta items and various elements to match 2015 font-family
     504#buddypress {
     505    .item-list {
     506        .activity-header,
     507        .activity-meta {
     508            @include default-font-sans();
     509        }
     510    }
     511}
     512
    479513// Trying to position the action div absolute has bad consequences where
    480514// aditional items are displayed, floating is an alternative that
    … …  
    482516// This block:
    483517// * Manages li items, Stacks them small screen, floated left at wider screens.
    484 // * Adjusts display of action buttons at small screen
    485 // mobile up.
     518// * Adjusts display of action buttons at small screen mobile up.
     519// Adjusts Meta items to match 2015 font-family
    486520
    487521#buddypress {
    … …  
    489523        li {
    490524            overflow: hidden !important;
     525
    491526            // Undo BP floats to center avatars initially mobile up
    492527            .item-avatar {
    … …  
    672707#buddypress {
    673708
    674     .activity-list {
    675 
    676         // re-size activity avatars
     709    #activity-stream {
     710
     711        // re-size activity avatars and stack small screen
     712        // refactor main elements positioning medium up.
    677713        li {
     714            padding: 25px 0 15px;
     715
    678716            .activity-avatar {
     717                float: none;
     718                text-align: center;
     719
    679720                a {
     721                    display: inline-block;
     722
    680723                    img.avatar {
     724                        display: inline;
     725                        float: none;
    681726                        height: 60px;
     727                        margin-bottom: $spacing-val-md;
    682728                        margin-left: 0;
    683729                        width: 60px;
    684730                    }
    685731                }
    686             }
    687         }
     732            } // close .activity-avatar
     733
     734            .activity-content {
     735                margin-left: 0;
     736
     737                .activity-header {
     738                    @include font-size(14);
     739                }
     740            }
     741
     742            @media screen and (min-width: 46.25em) {
     743
     744                .activity-avatar {
     745                    float: left;
     746                    margin-right: $spacing-val-sm;
     747                    text-align: left;
     748                    a {border-bottom: 0;}
     749                }
     750
     751                .activity-content {
     752                    margin: 0;
     753                    overflow: hidden;
     754
     755                    .activity-header {
     756                        @include font-size(16);
     757                    }
     758                }
     759
     760            } // close @media
     761
     762        } // close li
    688763
    689764        li.mini {
    … …  
    709784
    710785            .activity-header {
    711                 @include font-size(16);
    712786                line-height: inherit;
    713787                margin-right: 0;
    … …  
    724798                }
    725799            } // close .activity-header
     800
    726801            .activity-meta {
    727802                a {
    … …  
    737812        } // close .activity-content
    738813
    739         .load-more a {display: block;}
    740 
    741     } // close .activity-list
     814        .load-more {
     815            background: $light-background;
     816            border: 1px solid transparent;
     817            padding: $spacing-val-sm;
     818
     819            &:focus,
     820            &:hover {
     821                background: darken($light-background, 1%);
     822                border: 1px solid rgba(#9fd1e2, 0.3);
     823                a { font-style: italic; }
     824            }
     825
     826            a {
     827                display: block;
     828            }
     829        }
     830
     831    } // close #activity-stream
    742832} // close #buddypress
     833
     834/* Single activity view  - activity permalink */
     835
     836.activity-permalink {
     837    #buddypress {
     838        #activity-stream {
     839
     840            li.activity-item {
     841                padding: $spacing-val-md;
     842            }
     843
     844            li.mini {
     845                .activity-header {
     846                    @include font-size(16);
     847                    @media screen and (min-width: 46.25em) {
     848                        @include font-size(20);
     849                    }
     850                    margin-bottom: $spacing-val-lg;
     851                    p {padding: $spacing-val-md;}
     852                }
     853            }
     854        }
     855    }
     856}
    743857
    744858/**
    … …  
    748862*/
    749863#buddypress {
    750     .activity {
     864
     865    #activity-stream {
    751866        .activity-comments {
    752867            border-left: 1px solid $border-light;
    … …  
    755870            ul {
    756871                background: rgba($light-background, 0.6);
    757                 margin: 30px 0 0 2px;
     872                margin: 15px 0 0 2px;
    758873            }
    759874
    … …  
    828943*/
    829944
     945.bp-user,
     946.single-item.groups {
     947    @media screen and (max-width: 46.25em) {
     948        main {
     949            header.entry-header {
     950                padding-bottom: 1rem;
     951            }
     952        }
     953    }
     954
     955    @media screen and (max-width: 38.75em) {
     956        h1,
     957        #item-header-content {
     958            text-align: center;
     959        }
     960    }
     961
     962    #buddypress {
     963        @media screen and (max-width: 46.25em) {
     964            #item-header {
     965                .generic-button {
     966                    float: none;
     967                    margin: 1.5em 0 0 0;
     968                }
     969            }
     970        }
     971
     972        @media screen and (max-width: 38.75em) {
     973            h1 {
     974                margin-bottom: 0;
     975            }
     976
     977            #item-header-avatar {
     978                img.avatar {
     979                    margin-right: 0;
     980                }
     981            }
     982
     983            #item-header-content {
     984                width: 100%;
     985            }
     986        }
     987    }
     988}
     989
    830990/**
    831991*-----------------------------------------------------
    … …  
    838998.single-item.groups {
    839999    #buddypress {
     1000        @media screen and (max-width: 46.25em) {
     1001            #item-header {
     1002                #item-meta {
     1003                    margin-bottom: $spacing-val-md;
     1004                }
     1005            }
     1006        }
    8401007
    8411008        // Move visual flow of avatar & item-actions at narrow width,
    … …  
    11011268        li {
    11021269            @media screen and (max-width: 38.75em) {
    1103                 background: #fff;
     1270                background: $content-background;
    11041271                padding: $spacing-val-md 0;
    11051272            }
    … …  
    13241491                    position: static;
    13251492                }
    1326             }
     1493            } // close .message-meta
    13271494
    13281495            .message-content {
    … …  
    13321499                padding: 0.3em;
    13331500            }
    1334         }
    1335 
    1336         table#message-threads {
    1337 
    1338             .bulk-select-check,
    1339             .thread-star {
    1340                 width: 10%;
    1341             }
    1342 
    1343             .thread-star a {
    1344                 outline: none;
    1345             }
    1346 
    1347             .thread-from,
    1348             .thread-info {
    1349                 width: 30%;
    1350             }
    1351 
    1352             .thread-options {
    1353                 width: 20%;
     1501
     1502            #send-reply {
     1503                .message-content {
     1504                    background: $content-background;
     1505                    border: 0;
     1506                }
     1507            }
     1508
     1509            .alt {
     1510                background: $content-background;
     1511            }
     1512
     1513        } // close message-thread  Singular view!
     1514
     1515        #message-threads {
     1516            display: block;
     1517
     1518            thead {
     1519                tr {
     1520                    background: lighten($dark-background, 10%);
     1521                }
    13541522            }
    13551523
    13561524            tr {
    1357 
    13581525                td {
    1359                     background: $stripe-odd;
    1360                 }
    1361             }
    1362 
    1363             tr.alt {
    1364                 td {
    1365                     background: $stripe-even;
     1526                    background: $content-background;
     1527                    display: inline-block;
     1528                    float: left;
     1529                }
     1530
     1531                td.thread-star,
     1532                td.thread-options {
     1533                    border-bottom-color: $medium-background;
     1534                    border-bottom-width: 2px;
     1535                    height: 2.4em;
     1536                    padding-bottom: 0.2em;
     1537                    padding-top: 0.2em;
     1538
     1539                    @media screen and (max-width: 46.25em) {
     1540                        padding-top: 0;
     1541                    }
     1542                }
     1543
     1544                td.bulk-select-check,
     1545                td.thread-from {
     1546                    height: 2.6em;
     1547                    @media screen and (max-width: 38.75em) {
     1548                        height: 5.2em;
     1549                    }
     1550                }
     1551
     1552                td.thread-from,
     1553                td.thread-options {
     1554                    border-left: 0 !important;
     1555                    @include calc(width, "100% - 30px");
     1556                    margin-left: 0;
     1557                }
     1558
     1559                td.thread-info {
     1560                    padding-left: 41px;
     1561                    width: 100%;
     1562
     1563                    a::after {
     1564                        content: " \2013 \00a0"attr(title);
     1565                        @include font-size(12);
     1566                    }
     1567                }
     1568
     1569                td.thread-options {
     1570                    text-align: right;
     1571
     1572                    a {
     1573                        @include font-size(12);
     1574                        line-height: 2.2;
     1575                    }
     1576                }
     1577
     1578                span.from {
     1579                    display: none;
     1580                }
     1581
     1582                span.activity {
     1583                    display: block;
     1584                    float: right;
     1585                    line-height: 2;
     1586                    @media screen and (max-width: 38.75em) {
     1587                        clear: both;
     1588                        @include font-size(11);
     1589                        width: 100%;
     1590                    }
    13661591                }
    13671592            }
    … …  
    13701595                td {
    13711596                    background: $unread;
    1372                     border-bottom: 1px solid #e4cdff;
    1373                     border-top: 1px solid #e4cdff;
    1374                 }
    1375             }
    1376 
    1377             tr.read {
    1378                 td {
    1379                     background: $light-background;
    1380                 }
     1597                    border-color: $border-color;
     1598                }
     1599            }
     1600
     1601            th {
     1602                display: none;
     1603            }
     1604
     1605            th.bulk-select-all {
     1606                border-bottom: 0;
     1607                display: inline-block;
     1608                text-align: left;
     1609            }
     1610
     1611            th.bulk-select-all,
     1612            td.bulk-select-check,
     1613            td.thread-star {
     1614                border-right: 0;
     1615                width: 30px;
    13811616            }
    13821617        }
Note: See TracChangeset for help on using the changeset viewer.