Skip to:
Content

BuddyPress.org

Changeset 10244


Ignore:
Timestamp:
10/11/2015 01:28:40 PM (11 years ago)
Author:
hnla
Message:

Twentysixteen Companion Styles Updates

  • Adjust main elements margins for breakpoints and sidebar display, adjust secondary bottom content widgets for margins.
  • If sidebar present display BP object nav at default horizontal layout to maximize layout widths.
  • Tweak object nav hover small screens.

See #6648

Location:
trunk/src/bp-templates/bp-legacy/css
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-legacy/css/twentysixteen-rtl.css

    r10225 r10244  
    8787                margin: 0;
    8888        }
    89         .buddypress #primary .entry-content {
     89        .buddypress #primary .entry-content,
     90        .buddypress #primary .content-bottom-widgets {
    9091                margin-right: 7.6923%;
    9192                margin-left: 7.6923%;
    … …  
    105106                width: 70%;
    106107        }
    107         .buddypress #primary .entry-header {
    108                 margin: 0 7.6923%;
     108        .buddypress #primary .entry-content,
     109        .buddypress #primary .content-bottom-widgets {
     110                margin-right: 0;
     111                margin-left: 0;
    109112        }
    110113        .buddypress .sidebar {
    … …  
    161164}
    162165
     166@media screen and (max-width: 38.75em) {
     167        #buddypress #object-nav ul li:not(:last-child) {
     168                border-bottom: 1px solid #eaeaea;
     169        }
     170}
     171
    163172#buddypress #object-nav ul li:not(.selected) a {
    164173        opacity: 0.7;
     174}
     175
     176@media screen and (max-width: 38.75em) {
     177        #buddypress #object-nav ul li:not(.selected):focus,
     178        #buddypress #object-nav ul li:not(.selected):hover {
     179                background: #f4f2df;
     180        }
    165181}
    166182
    … …  
    222238/*__ Vertical menu User Account / Group single screens __*/
    223239@media screen and (min-width: 55em) {
    224         body:not(.sidebar) #buddypress #item-header,
    225         body:not(.sidebar) #buddypress #item-body {
     240        body.no-sidebar #buddypress #item-header,
     241        body.no-sidebar #buddypress #item-body {
    226242                background: #fff;
    227243        }
    228         body:not(.sidebar) #buddypress #object-nav {
     244        body.no-sidebar #buddypress #object-nav {
    229245                border-left: 1px solid #ddd;
    230246                float: right;
    … …  
    232248                width: 200px;
    233249        }
    234         body:not(.sidebar) #buddypress #object-nav ul {
     250        body.no-sidebar #buddypress #object-nav ul {
    235251                background: none;
    236252                border-bottom: 0;
    237253                padding: 0;
    238254        }
    239         body:not(.sidebar) #buddypress #object-nav ul li {
     255        body.no-sidebar #buddypress #object-nav ul li {
    240256                float: none;
    241257                overflow: hidden;
    242258        }
    243         body:not(.sidebar) #buddypress #object-nav ul li span {
     259        body.no-sidebar #buddypress #object-nav ul li span {
    244260                background: #fff;
    245261                border-radius: 10%;
    … …  
    247263                margin-left: 2px;
    248264        }
    249         body:not(.sidebar) #buddypress #item-body {
     265        body.no-sidebar #buddypress #item-body {
    250266                border-right: 1px solid #ddd;
    251267                overflow: hidden;
    … …  
    253269                width: auto;
    254270        }
    255         body:not(.sidebar) #buddypress #item-body #subnav {
     271        body.no-sidebar #buddypress #item-body #subnav {
    256272                margin: 0 -20px 0 0;
    257273        }
    258         body:not(.sidebar) #buddypress #item-body #subnav ul {
     274        body.no-sidebar #buddypress #item-body #subnav ul {
    259275                margin-top: 0;
    260276        }

  • trunk/src/bp-templates/bp-legacy/css/twentysixteen.css

    r10225 r10244  
    8787                margin: 0;
    8888        }
    89         .buddypress #primary .entry-content {
     89        .buddypress #primary .entry-content,
     90        .buddypress #primary .content-bottom-widgets {
    9091                margin-left: 7.6923%;
    9192                margin-right: 7.6923%;
    … …  
    105106                width: 70%;
    106107        }
    107         .buddypress #primary .entry-header {
    108                 margin: 0 7.6923%;
     108        .buddypress #primary .entry-content,
     109        .buddypress #primary .content-bottom-widgets {
     110                margin-left: 0;
     111                margin-right: 0;
    109112        }
    110113        .buddypress .sidebar {
    … …  
    161164}
    162165
     166@media screen and (max-width: 38.75em) {
     167        #buddypress #object-nav ul li:not(:last-child) {
     168                border-bottom: 1px solid #eaeaea;
     169        }
     170}
     171
    163172#buddypress #object-nav ul li:not(.selected) a {
    164173        opacity: 0.7;
     174}
     175
     176@media screen and (max-width: 38.75em) {
     177        #buddypress #object-nav ul li:not(.selected):focus,
     178        #buddypress #object-nav ul li:not(.selected):hover {
     179                background: #f4f2df;
     180        }
    165181}
    166182
    … …  
    222238/*__ Vertical menu User Account / Group single screens __*/
    223239@media screen and (min-width: 55em) {
    224         body:not(.sidebar) #buddypress #item-header,
    225         body:not(.sidebar) #buddypress #item-body {
     240        body.no-sidebar #buddypress #item-header,
     241        body.no-sidebar #buddypress #item-body {
    226242                background: #fff;
    227243        }
    228         body:not(.sidebar) #buddypress #object-nav {
     244        body.no-sidebar #buddypress #object-nav {
    229245                border-right: 1px solid #ddd;
    230246                float: left;
    … …  
    232248                width: 200px;
    233249        }
    234         body:not(.sidebar) #buddypress #object-nav ul {
     250        body.no-sidebar #buddypress #object-nav ul {
    235251                background: none;
    236252                border-bottom: 0;
    237253                padding: 0;
    238254        }
    239         body:not(.sidebar) #buddypress #object-nav ul li {
     255        body.no-sidebar #buddypress #object-nav ul li {
    240256                float: none;
    241257                overflow: hidden;
    242258        }
    243         body:not(.sidebar) #buddypress #object-nav ul li span {
     259        body.no-sidebar #buddypress #object-nav ul li span {
    244260                background: #fff;
    245261                border-radius: 10%;
    … …  
    247263                margin-right: 2px;
    248264        }
    249         body:not(.sidebar) #buddypress #item-body {
     265        body.no-sidebar #buddypress #item-body {
    250266                border-left: 1px solid #ddd;
    251267                overflow: hidden;
    … …  
    253269                width: auto;
    254270        }
    255         body:not(.sidebar) #buddypress #item-body #subnav {
     271        body.no-sidebar #buddypress #item-body #subnav {
    256272                margin: 0 0 0 -20px;
    257273        }
    258         body:not(.sidebar) #buddypress #item-body #subnav ul {
     274        body.no-sidebar #buddypress #item-body #subnav ul {
    259275                margin-top: 0;
    260276        }

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

    r10225 r10244  
    256256
    257257        // The breakpoint for main & sidebar could cut in earlier, elements wrap to blocks/columns
    258         // but margins & padding still in effect style.css L:2781.
     258        // but margins & padding still in effect for sidebar style.css L:2781.
    259259
    260260        @include small-up {
    … …  
    268268                        }
    269269
    270                         .entry-content {
     270                        .entry-content,
     271                        .content-bottom-widgets {
    271272                                margin-left: 7.6923%;
    272273                                margin-right: 7.6923%;
    … …  
    288289                        width: 70%;
    289290
    290                         .entry-header {
    291                                 margin: 0 7.6923%;
     291                        .entry-content,
     292                        .content-bottom-widgets {
     293                                margin-left: 0;
     294                                margin-right: 0;
    292295                        }
    293296                }
    … …  
    376379                ul {
    377380                        overflow: hidden;
    378                         li {float: none;}
     381
     382                        li {
     383                                float: none;
     384                        }
     385
     386                        @media screen and (max-width: 38.75em) {
     387                                li:not(:last-child) {
     388                                        border-bottom: 1px solid $border-light;
     389                                }
     390                        }
     391
    379392                        li:not(.selected) {
    380393                                a {opacity: 0.7;}
     394
     395                                @media screen and (max-width: 38.75em) {
     396                                        &:focus,
     397                                        &:hover {
     398                                                background: darken($cream-background, 2%);
     399                                        }
     400                                }
    381401                        }
    382402
    … …  
    454474// This block contains rules to re-factor the item-body structural element
    455475// to sit alongside the vert menu
    456 // As 2016 has an inner sidebar which if active can narrow screen too far
    457 // for a columner nav we'll only use these rules if no sidebar.
     476// 2016 right sidebar is displayed if the widget sidebar has widgets;
     477// we'll only display object nav as a vert menu if sidebar not present.
    458478
    459479@media screen and (min-width: 55em) {
    460480
    461         .bp-user #buddypress,
    462         .single-item.groups #buddypress {
    463         //      background: $light-background;
    464         }
    465 
    466         body:not(.sidebar) {
     481        body.no-sidebar {
    467482                #buddypress {
    468483
Note: See TracChangeset for help on using the changeset viewer.