Skip to:
Content

Changeset 10244


Ignore:
Timestamp:
10/11/15 13:28:40 (2 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.