Skip to:
Content

BuddyPress.org

Changeset 10244


Ignore:
Timestamp:
10/11/2015 01:28:40 PM (9 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.