Skip to:
Content

BuddyPress.org

Changeset 10285


Ignore:
Timestamp:
10/17/2015 06:16:35 PM (9 years ago)
Author:
hnla
Message:

Twentysixteen Companion Styles Updates

  • Update nav styles, remove active anchor backgrounds.
  • Add mobile menu dropdown.
  • Correct nested CSS comments within scss hierarchical selectors preventing ruleset compilation.

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

    r10244 r10285  
    138138*/
    139139#buddypress div.item-list-tabs ul li.selected a {
    140     background: #555;
    141     color: #fff;
     140    background: inherit;
    142141    opacity: 1;
    143142}
    … …  
    155154}
    156155
     156@media screen and (max-width: 38.75em) {
     157    .bp-user #buddypress #object-nav {
     158        background: #f7f5e7;
     159        border: 1px solid #eaeaea;
     160        overflow: visible;
     161        padding: 10px;
     162    }
     163    .bp-user #buddypress #object-nav ul {
     164        border: 0;
     165        height: 0;
     166        transition: height 0.3s ease-in-out 0.7s;
     167        visibility: hidden;
     168    }
     169    .bp-user #buddypress #object-nav:before {
     170        content: "Menu \021E9";
     171        display: inline;
     172        opacity: 0.7;
     173    }
     174    .bp-user #buddypress #object-nav:hover:before,
     175    .bp-user #buddypress #object-nav:focus:before {
     176        content: "Menu \021E7";
     177    }
     178    .bp-user #buddypress #object-nav:hover ul,
     179    .bp-user #buddypress #object-nav:focus ul {
     180        height: 320px;
     181        opacity: 1;
     182        overflow-y: auto;
     183        visibility: visible;
     184    }
     185    .bp-user #buddypress #subnav {
     186        clear: both;
     187    }
     188}
     189
    157190/*__ Horizontal menus __*/
    158191#buddypress #object-nav ul {
    … …  
    227260        text-align: left;
    228261    }
    229 }
    230 
    231 #budypress div.item-list-tabs ul li.selected a,
    232 #budypress div.item-list-tabs ul li.current a {
    233     background: #555;
    234     color: #fff;
    235     opacity: 1;
    236262}
    237263
    … …  
    385411#buddypress .activity-meta .button:focus,
    386412#buddypress .activity-meta .button:hover {
    387     background: #e37a5a;
    388     color: #f7f5e7;
     413    background: inherit;
     414    color: #000;
    389415}
    390416
    391417#buddypress .action .generic-button a:focus,
    392418#buddypress .action .generic-button a:hover {
    393     background: #e37a5a;
    394     color: #f7f5e7;
     419    background: inherit;
     420    color: #000;
    395421}
    396422
    … …  
    11611187}
    11621188
    1163 .bp-user #buddypress {
    1164     /**
     1189/**
    11651190*--------------------------------------------
    11661191* @subsection 6.2.2.1 - classes, pag, filters
    11671192*--------------------------------------------
    11681193*/
    1169     /**
    1170     *-------------------------------------------
    1171     * @subsection 6.2.2.2 - Extended Profiles
    1172     *-------------------------------------------
    1173     */
    1174     /**
    1175     *-------------------------------------------
    1176     * @subsection 6.2.2.3 - Groups
    1177     *-------------------------------------------
    1178     */
    1179     /**
    1180     *-------------------------------------------
    1181     * @subsection 6.2.2.5 - Private Messaging
    1182     *-------------------------------------------
    1183     */
    1184     /* Auto Complete background */
    1185     /* Sitewide Notices loop */
    1186     /**
    1187     *------------------------------
    1188     * @subsection 6.2.2.6 - Settings
    1189     *------------------------------
    1190     */
    1191 }
    1192 
    11931194.bp-user #buddypress table th {
    11941195    font-size: 14px;
    … …  
    12611262}
    12621263
     1264/**
     1265    *-------------------------------------------
     1266    * @subsection 6.2.2.2 - Extended Profiles
     1267    *-------------------------------------------
     1268    */
    12631269.bp-user #buddypress .profile {
    12641270    /* Edit profile */
    … …  
    13261332}
    13271333
     1334/**
     1335    *-------------------------------------------
     1336    * @subsection 6.2.2.3 - Groups
     1337    *-------------------------------------------
     1338    */
    13281339@media screen and (min-width: 77.5em) {
    13291340    .bp-user #buddypress #groups-list li .item {
    … …  
    13311342        width: 50%;
    13321343    }
     1344}
     1345
     1346/**
     1347    *-------------------------------------------
     1348    * @subsection 6.2.2.5 - Private Messaging
     1349    *-------------------------------------------
     1350    */
     1351.bp-user #buddypress {
     1352    /* Auto Complete background */
    13331353}
    13341354
    … …  
    15231543}
    15241544
     1545/**
     1546    *------------------------------
     1547    * @subsection 6.2.2.6 - Settings
     1548    *------------------------------
     1549    */
    15251550.bp-user #buddypress #settings-form > p {
    15261551    font-size: 20px;
    … …  
    16291654    float: right;
    16301655    margin: 0;
    1631     width: 100%;
     1656    width: 70%;
    16321657}
    16331658

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

    r10244 r10285  
    138138*/
    139139#buddypress div.item-list-tabs ul li.selected a {
    140     background: #555;
    141     color: #fff;
     140    background: inherit;
    142141    opacity: 1;
    143142}
    … …  
    155154}
    156155
     156@media screen and (max-width: 38.75em) {
     157    .bp-user #buddypress #object-nav {
     158        background: #f7f5e7;
     159        border: 1px solid #eaeaea;
     160        overflow: visible;
     161        padding: 10px;
     162    }
     163    .bp-user #buddypress #object-nav ul {
     164        border: 0;
     165        height: 0;
     166        transition: height 0.3s ease-in-out 0.7s;
     167        visibility: hidden;
     168    }
     169    .bp-user #buddypress #object-nav:before {
     170        content: "Menu \021E9";
     171        display: inline;
     172        opacity: 0.7;
     173    }
     174    .bp-user #buddypress #object-nav:hover:before,
     175    .bp-user #buddypress #object-nav:focus:before {
     176        content: "Menu \021E7";
     177    }
     178    .bp-user #buddypress #object-nav:hover ul,
     179    .bp-user #buddypress #object-nav:focus ul {
     180        height: 320px;
     181        opacity: 1;
     182        overflow-y: auto;
     183        visibility: visible;
     184    }
     185    .bp-user #buddypress #subnav {
     186        clear: both;
     187    }
     188}
     189
    157190/*__ Horizontal menus __*/
    158191#buddypress #object-nav ul {
    … …  
    227260        text-align: right;
    228261    }
    229 }
    230 
    231 #budypress div.item-list-tabs ul li.selected a,
    232 #budypress div.item-list-tabs ul li.current a {
    233     background: #555;
    234     color: #fff;
    235     opacity: 1;
    236262}
    237263
    … …  
    385411#buddypress .activity-meta .button:focus,
    386412#buddypress .activity-meta .button:hover {
    387     background: #e37a5a;
    388     color: #f7f5e7;
     413    background: inherit;
     414    color: #000;
    389415}
    390416
    391417#buddypress .action .generic-button a:focus,
    392418#buddypress .action .generic-button a:hover {
    393     background: #e37a5a;
    394     color: #f7f5e7;
     419    background: inherit;
     420    color: #000;
    395421}
    396422
    … …  
    11611187}
    11621188
    1163 .bp-user #buddypress {
    1164     /**
     1189/**
    11651190*--------------------------------------------
    11661191* @subsection 6.2.2.1 - classes, pag, filters
    11671192*--------------------------------------------
    11681193*/
    1169     /**
    1170     *-------------------------------------------
    1171     * @subsection 6.2.2.2 - Extended Profiles
    1172     *-------------------------------------------
    1173     */
    1174     /**
    1175     *-------------------------------------------
    1176     * @subsection 6.2.2.3 - Groups
    1177     *-------------------------------------------
    1178     */
    1179     /**
    1180     *-------------------------------------------
    1181     * @subsection 6.2.2.5 - Private Messaging
    1182     *-------------------------------------------
    1183     */
    1184     /* Auto Complete background */
    1185     /* Sitewide Notices loop */
    1186     /**
    1187     *------------------------------
    1188     * @subsection 6.2.2.6 - Settings
    1189     *------------------------------
    1190     */
    1191 }
    1192 
    11931194.bp-user #buddypress table th {
    11941195    font-size: 14px;
    … …  
    12611262}
    12621263
     1264/**
     1265    *-------------------------------------------
     1266    * @subsection 6.2.2.2 - Extended Profiles
     1267    *-------------------------------------------
     1268    */
    12631269.bp-user #buddypress .profile {
    12641270    /* Edit profile */
    … …  
    13261332}
    13271333
     1334/**
     1335    *-------------------------------------------
     1336    * @subsection 6.2.2.3 - Groups
     1337    *-------------------------------------------
     1338    */
    13281339@media screen and (min-width: 77.5em) {
    13291340    .bp-user #buddypress #groups-list li .item {
    … …  
    13311342        width: 50%;
    13321343    }
     1344}
     1345
     1346/**
     1347    *-------------------------------------------
     1348    * @subsection 6.2.2.5 - Private Messaging
     1349    *-------------------------------------------
     1350    */
     1351.bp-user #buddypress {
     1352    /* Auto Complete background */
    13331353}
    13341354
    … …  
    15231543}
    15241544
     1545/**
     1546    *------------------------------
     1547    * @subsection 6.2.2.6 - Settings
     1548    *------------------------------
     1549    */
    15251550.bp-user #buddypress #settings-form > p {
    15261551    font-size: 20px;
    … …  
    16291654    float: left;
    16301655    margin: 0;
    1631     width: 100%;
     1656    width: 70%;
    16321657}
    16331658

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

    r10244 r10285  
     1
    12// Stylesheet Guidence Notes
    23// Table of content represents a guide to sections of the sheet.
    … …  
    346347            li.selected {
    347348                a {
    348                     background: $dark-background;
    349                     color: #fff;
     349                    background: inherit;
    350350                    opacity: 1;
    351351                }
    … …  
    353353        }
    354354    }
    355     // Global Nav Styles
     355    // global nav styles
    356356    div.item-list-tabs {
    357357        ul {
    … …  
    372372} // close #buddypress
    373373
     374// .bp-user #object-nav @ small screen as a dropdown
     375
     376.bp-user {
     377
     378    #buddypress {
     379
     380        @media screen and (max-width: 38.75em) {
     381
     382            #object-nav {
     383                background: $cream-background;
     384                border: 1px solid $border-light;
     385                overflow: visible;
     386                padding: $spacing-val-sm;
     387
     388                ul {
     389                    border: 0;
     390                    height: 0;
     391                    // all latest vendor releases handle transitions, so no prefixes used.
     392                    transition: height 0.3s ease-in-out 0.7s;
     393                    visibility: hidden;
     394                }
     395
     396                &:before {
     397                    content: "Menu \021E9";
     398                    display: inline;
     399                    opacity: 0.7;
     400                }
     401
     402                &:hover,
     403                &:focus {
     404                    &:before {content: "Menu \021E7";}
     405
     406                    ul {
     407                        height: 320px;
     408                        opacity: 1;
     409                        overflow-y: auto;
     410                        visibility: visible;
     411                    }
     412                }
     413            }
     414
     415            #subnav {
     416                clear: both;
     417            }
     418
     419        } // close @media
     420    }
     421}
     422
    374423    /*__ Horizontal menus __*/
    375424#buddypress {
    … …  
    452501} // close #buddypress
    453502
    454 #budypress {
    455 
    456     // active/current states all navs
    457     div.item-list-tabs {
    458         ul {
    459             li.selected,
    460             li.current {
    461                 a {
    462                     background: $dark-background;
    463                     color: #fff;
    464                     opacity: 1;
    465                 }
    466             }
    467         }
    468     }
    469 
    470 } // close #buddypress
    471503
    472504    /*__ Vertical menu User Account / Group single screens __*/
    … …  
    660692            &:focus,
    661693            &:hover {
    662                 background: lighten($background-hover, 10%);
    663                 color: $cream-background;
     694                background: inherit;
     695                color: #000;
    664696            }
    665697        }
    … …  
    671703                &:focus,
    672704                &:hover {
    673                     background: lighten($background-hover, 10%);
    674                     color: $cream-background;
     705                    background: inherit;
     706                    color: #000;
    675707                }
    676708            }
    … …  
    15601592.bp-user {
    15611593    .entry-title {margin-bottom: 0.5em;}
    1562 
    1563     #buddypress {
     1594}
    15641595
    15651596/**
    … …  
    15681599*--------------------------------------------
    15691600*/
     1601.bp-user {
     1602
     1603    #buddypress {
    15701604
    15711605        table {
    … …  
    16171651        } // close .notifications-options-nav
    16181652
     1653    } //close #buddypress
     1654} // close .bp-user
     1655
    16191656/**
    16201657    *-------------------------------------------
    … …  
    16221659    *-------------------------------------------
    16231660    */
     1661
     1662.bp-user {
     1663
     1664    #buddypress {
     1665
    16241666        .profile {
    16251667            .bp-widget {
    … …  
    16881730        } // close .profile
    16891731
     1732    } // close #buddypress
     1733} // close .bp-user
     1734
    16901735/**
    16911736    *-------------------------------------------
    … …  
    16931738    *-------------------------------------------
    16941739    */
     1740
     1741.bp-user {
     1742
     1743    #buddypress {
    16951744
    16961745        #groups-list {
    … …  
    17051754        }
    17061755
     1756    } // close #buddypress
     1757} // close .bp-user
     1758
    17071759/**
    17081760    *-------------------------------------------
    … …  
    17101762    *-------------------------------------------
    17111763    */
     1764
     1765.bp-user {
     1766
     1767    #buddypress {
    17121768
    17131769        #message-thread {
    … …  
    18941950        }
    18951951
    1896         /* Sitewide Notices loop */
    18971952        .sitewide-notices {
    18981953            tr {
    … …  
    19121967        }
    19131968
     1969    } // #buddypress
     1970} // close .bp-user
     1971
    19141972/**
    19151973    *------------------------------
    … …  
    19171975    *------------------------------
    19181976    */
     1977
     1978.bp-user {
     1979
     1980    #buddypress {
    19191981
    19201982        #settings-form {
    … …  
    19582020        }
    19592021
    1960     } // close #BuddyPress
     2022    } // close #buddyPress
    19612023
    19622024} // close .bp-user
    … …  
    20502112                float: left;
    20512113                margin: 0;
    2052                 width: 100%;
     2114                width: 70%;
    20532115            }
    20542116
Note: See TracChangeset for help on using the changeset viewer.