Skip to:
Content

BuddyPress.org

Changeset 10285


Ignore:
Timestamp:
10/17/2015 06:16:35 PM (11 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.