Skip to:
Content

Changeset 10285


Ignore:
Timestamp:
10/17/15 18:16:35 (2 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.