Skip to:
Content

BuddyPress.org

Changeset 10283


Ignore:
Timestamp:
10/17/2015 02:31:48 PM (9 years ago)
Author:
hnla
Message:

Twentythirteen Companion styles updates.

  • Updates general styles.
  • Corrects issue where scss nested rulesets/selectors aren't compiled where nested CSS comment structures are found causing all styles to be omitted.
  • Add new menu layout for user object-nav for mobile screens, menu parent on hover/focus expands to display menu items.

See #6533

Location:
trunk/src/bp-templates/bp-legacy/css
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen-rtl.css

    r10249 r10283  
    9595*----------------------------------------------------------
    9696*/
    97 #buddypress {
    98     /*__ Horizontal menus & small screen __*/
    99 }
    100 
    101 #buddypress div.item-list-tabs ul li.selected a {
    102     background: #555;
    103     color: #fff;
    104     opacity: 1;
    105 }
    106 
    10797#buddypress div.item-list-tabs ul {
    10898    background-color: #f7f5e7;
    … …  
    117107}
    118108
     109@media screen and (max-width: 38.75em) {
     110    .bp-user #buddypress #object-nav {
     111        background: #f7f5e7;
     112        border: 1px solid #eaeaea;
     113        overflow: visible;
     114        padding: 10px;
     115    }
     116    .bp-user #buddypress #object-nav ul {
     117        border: 0;
     118        height: 0;
     119        transition: height 0.3s ease-in-out 0.7s;
     120        visibility: hidden;
     121    }
     122    .bp-user #buddypress #object-nav:before {
     123        content: "Menu \021E9";
     124        display: inline;
     125        opacity: 0.7;
     126    }
     127    .bp-user #buddypress #object-nav:hover:before,
     128    .bp-user #buddypress #object-nav:focus:before {
     129        content: "Menu \021E7";
     130    }
     131    .bp-user #buddypress #object-nav:hover ul,
     132    .bp-user #buddypress #object-nav:focus ul {
     133        height: 320px;
     134        opacity: 1;
     135        overflow-y: auto;
     136        visibility: visible;
     137    }
     138    .bp-user #buddypress #subnav {
     139        clear: both;
     140    }
     141}
     142
     143/*__ Horizontal menus & small screen __*/
    119144#buddypress #object-nav ul {
    120145    overflow: hidden;
    … …  
    192217#buddypress div.item-list-tabs ul li.selected a,
    193218#buddypress div.item-list-tabs ul li.current a {
    194     background: #555;
    195     color: #fff;
     219    background: none;
    196220    opacity: 1;
    197221}
    … …  
    12341258}
    12351259
    1236 .bp-user #buddypress {
    1237     /**
     1260/**
    12381261*--------------------------------------------
    12391262* @subsection 6.2.2.1 - classes, pag, filters
    12401263*--------------------------------------------
    12411264*/
    1242     /**
    1243     *-------------------------------------------
    1244     * @subsection 6.2.2.2 - Extended Profiles
    1245     *-------------------------------------------
    1246     */
    1247     /**
    1248     *-------------------------------------------
    1249     * @subsection 6.2.2.3 - Groups
    1250     *-------------------------------------------
    1251     */
    1252     /**
    1253     *-------------------------------------------
    1254     * @subsection 6.2.2.5 - Private Messaging
    1255     *-------------------------------------------
    1256     */
    1257     /* Auto Complete background */
    1258     /* Sitewide Notices loop */
    1259     /**
    1260     *------------------------------
    1261     * @subsection 6.2.2.6 - Settings
    1262     *------------------------------
    1263     */
    1264 }
    1265 
    12661265.bp-user #buddypress table th {
    12671266    font-size: 14px;
    … …  
    12701269
    12711270.bp-user #buddypress table td {
    1272     font-size: 12px;
    1273     font-size: 0.75rem;
     1271    font-size: 13px;
     1272    font-size: 0.8125rem;
    12741273}
    12751274
    … …  
    13341333}
    13351334
    1336 .bp-user #buddypress .profile {
    1337     /* Edit profile */
    1338 }
    1339 
     1335/**
     1336    *-------------------------------------------
     1337    * @subsection 6.2.2.2 - Extended Profiles
     1338    *-------------------------------------------
     1339    */
    13401340.bp-user #buddypress .profile .bp-widget h4 {
    13411341    background: #6e6e6e;
    … …  
    14001400}
    14011401
     1402/**
     1403    *-------------------------------------------
     1404    * @subsection 6.2.2.3 - Groups
     1405    *-------------------------------------------
     1406    */
    14021407@media screen and (min-width: 77.5em) {
    14031408    .bp-user #buddypress #groups-list li .item {
    … …  
    14051410        width: 50%;
    14061411    }
     1412}
     1413
     1414/**
     1415    *-------------------------------------------
     1416    * @subsection 6.2.2.5 - Private Messaging
     1417    *-------------------------------------------
     1418    */
     1419.bp-user #buddypress {
     1420    /* Auto Complete background */
     1421    /* Sitewide Notices loop */
    14071422}
    14081423
    … …  
    14861501        padding-top: 0;
    14871502    }
     1503    .bp-user #buddypress #message-threads tr td.thread-star span.icon:before,
     1504    .bp-user #buddypress #message-threads tr td.thread-options span.icon:before {
     1505        font-size: 14px;
     1506    }
    14881507}
    14891508
    … …  
    16041623    display: block;
    16051624    padding-right: 0.2em;
     1625}
     1626
     1627/**
     1628    *------------------------------
     1629    * @subsection 6.2.2.6 - Settings
     1630    *------------------------------
     1631    */
     1632.bp-user #buddypress #settings-form {
     1633    padding: 0 10px;
    16061634}
    16071635

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

    r10249 r10283  
    9595*----------------------------------------------------------
    9696*/
    97 #buddypress {
    98     /*__ Horizontal menus & small screen __*/
    99 }
    100 
    101 #buddypress div.item-list-tabs ul li.selected a {
    102     background: #555;
    103     color: #fff;
    104     opacity: 1;
    105 }
    106 
    10797#buddypress div.item-list-tabs ul {
    10898    background-color: #f7f5e7;
    … …  
    117107}
    118108
     109@media screen and (max-width: 38.75em) {
     110    .bp-user #buddypress #object-nav {
     111        background: #f7f5e7;
     112        border: 1px solid #eaeaea;
     113        overflow: visible;
     114        padding: 10px;
     115    }
     116    .bp-user #buddypress #object-nav ul {
     117        border: 0;
     118        height: 0;
     119        transition: height 0.3s ease-in-out 0.7s;
     120        visibility: hidden;
     121    }
     122    .bp-user #buddypress #object-nav:before {
     123        content: "Menu \021E9";
     124        display: inline;
     125        opacity: 0.7;
     126    }
     127    .bp-user #buddypress #object-nav:hover:before,
     128    .bp-user #buddypress #object-nav:focus:before {
     129        content: "Menu \021E7";
     130    }
     131    .bp-user #buddypress #object-nav:hover ul,
     132    .bp-user #buddypress #object-nav:focus ul {
     133        height: 320px;
     134        opacity: 1;
     135        overflow-y: auto;
     136        visibility: visible;
     137    }
     138    .bp-user #buddypress #subnav {
     139        clear: both;
     140    }
     141}
     142
     143/*__ Horizontal menus & small screen __*/
    119144#buddypress #object-nav ul {
    120145    overflow: hidden;
    … …  
    192217#buddypress div.item-list-tabs ul li.selected a,
    193218#buddypress div.item-list-tabs ul li.current a {
    194     background: #555;
    195     color: #fff;
     219    background: none;
    196220    opacity: 1;
    197221}
    … …  
    12341258}
    12351259
    1236 .bp-user #buddypress {
    1237     /**
     1260/**
    12381261*--------------------------------------------
    12391262* @subsection 6.2.2.1 - classes, pag, filters
    12401263*--------------------------------------------
    12411264*/
    1242     /**
    1243     *-------------------------------------------
    1244     * @subsection 6.2.2.2 - Extended Profiles
    1245     *-------------------------------------------
    1246     */
    1247     /**
    1248     *-------------------------------------------
    1249     * @subsection 6.2.2.3 - Groups
    1250     *-------------------------------------------
    1251     */
    1252     /**
    1253     *-------------------------------------------
    1254     * @subsection 6.2.2.5 - Private Messaging
    1255     *-------------------------------------------
    1256     */
    1257     /* Auto Complete background */
    1258     /* Sitewide Notices loop */
    1259     /**
    1260     *------------------------------
    1261     * @subsection 6.2.2.6 - Settings
    1262     *------------------------------
    1263     */
    1264 }
    1265 
    12661265.bp-user #buddypress table th {
    12671266    font-size: 14px;
    … …  
    12701269
    12711270.bp-user #buddypress table td {
    1272     font-size: 12px;
    1273     font-size: 0.75rem;
     1271    font-size: 13px;
     1272    font-size: 0.8125rem;
    12741273}
    12751274
    … …  
    13341333}
    13351334
    1336 .bp-user #buddypress .profile {
    1337     /* Edit profile */
    1338 }
    1339 
     1335/**
     1336    *-------------------------------------------
     1337    * @subsection 6.2.2.2 - Extended Profiles
     1338    *-------------------------------------------
     1339    */
    13401340.bp-user #buddypress .profile .bp-widget h4 {
    13411341    background: #6e6e6e;
    … …  
    14001400}
    14011401
     1402/**
     1403    *-------------------------------------------
     1404    * @subsection 6.2.2.3 - Groups
     1405    *-------------------------------------------
     1406    */
    14021407@media screen and (min-width: 77.5em) {
    14031408    .bp-user #buddypress #groups-list li .item {
    … …  
    14051410        width: 50%;
    14061411    }
     1412}
     1413
     1414/**
     1415    *-------------------------------------------
     1416    * @subsection 6.2.2.5 - Private Messaging
     1417    *-------------------------------------------
     1418    */
     1419.bp-user #buddypress {
     1420    /* Auto Complete background */
     1421    /* Sitewide Notices loop */
    14071422}
    14081423
    … …  
    14861501        padding-top: 0;
    14871502    }
     1503    .bp-user #buddypress #message-threads tr td.thread-star span.icon:before,
     1504    .bp-user #buddypress #message-threads tr td.thread-options span.icon:before {
     1505        font-size: 14px;
     1506    }
    14881507}
    14891508
    … …  
    16041623    display: block;
    16051624    padding-left: 0.2em;
     1625}
     1626
     1627/**
     1628    *------------------------------
     1629    * @subsection 6.2.2.6 - Settings
     1630    *------------------------------
     1631    */
     1632.bp-user #buddypress #settings-form {
     1633    padding: 0 10px;
    16061634}
    16071635

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

    r10249 r10283  
    260260#buddypress {
    261261
    262     // active/current states all navs
    263     div.item-list-tabs {
    264         ul {
    265             li.selected {
    266                 a {
    267                     background: $dark-background;
    268                     color: #fff;
    269                     opacity: 1;
    270                 }
    271             }
    272         }
    273     }
    274262    // Global Nav Styles
    275263    div.item-list-tabs {
    … …  
    288276        }
    289277    }
    290 
     278}
     279// .bp-user #object-nav @ small screen as a dropdown
     280
     281.bp-user {
     282    #buddypress {
     283        @media screen and (max-width: 38.75em) {
     284
     285            #object-nav {
     286                background: $cream-background;
     287                border: 1px solid $border-light;
     288                overflow: visible;
     289                padding: $spacing-val-sm;
     290
     291                ul {
     292                    border: 0;
     293                    height: 0;
     294                    // all latest vendor releases handle transitions, so no prefixes used.
     295                    transition: height 0.3s ease-in-out 0.7s;
     296                    visibility: hidden;
     297                }
     298
     299                &:before {
     300                    content: "Menu \021E9";
     301                    display: inline;
     302                    opacity: 0.7;
     303                }
     304
     305                &:hover,
     306                &:focus {
     307                    &:before {content: "Menu \021E7";}
     308
     309                    ul {
     310                        height: 320px;
     311                        opacity: 1;
     312                        overflow-y: auto;
     313                        visibility: visible;
     314                    }
     315                }
     316            }
     317
     318            #subnav {clear: both;}
     319
     320        } // close @media
     321    }
     322}
    291323    /*__ Horizontal menus & small screen __*/
     324
     325#buddypress {
     326
    292327    #object-nav {
    293328
    … …  
    371406            li.current {
    372407                a {
    373                     background: $dark-background;
    374                     color: #fff;
     408                    background: none;
    375409                    opacity: 1;
    376410                }
    … …  
    15901624.bp-user {
    15911625    .entry-title {margin-bottom: 0.5em;}
    1592 
    1593     #buddypress {
     1626}
    15941627
    15951628/**
    … …  
    15991632*/
    16001633
     1634.bp-user {
     1635
     1636    #buddypress {
     1637
    16011638        table {
    16021639            th {@include font-size(14)}
    1603             td {@include font-size(12)}
     1640            td {@include font-size(13)}
    16041641
    16051642            @media screen and (min-width: 46.25em) {
    … …  
    16461683
    16471684        } // close .notifications-options-nav
     1685    } // close #buddypress
     1686} // close .bp-user
    16481687
    16491688/**
    … …  
    16521691    *-------------------------------------------
    16531692    */
     1693
     1694.bp-user {
     1695
     1696    #buddypress {
     1697
    16541698        .profile {
    16551699            .bp-widget {
    … …  
    16631707                table {margin-top: 0;}
    16641708            }
    1665             /* Edit profile */
    16661709
    16671710            #profile-edit-form {
    … …  
    17191762            }
    17201763        } // close .profile
     1764    } // close #buddyPress
     1765} // close .bp-user
    17211766
    17221767/**
    … …  
    17251770    *-------------------------------------------
    17261771    */
     1772
     1773.bp-user {
     1774
     1775    #buddypress {
    17271776
    17281777        #groups-list {
    … …  
    17361785            }
    17371786        }
     1787    }
     1788}
    17381789
    17391790/**
    … …  
    17421793    *-------------------------------------------
    17431794    */
     1795
     1796.bp-user {
     1797
     1798    #buddypress {
    17441799
    17451800        #message-thread {
    … …  
    18281883                    @media screen and (max-width: 46.25em) {
    18291884                        padding-top: 0;
     1885                        span.icon:before {font-size: 14px;}
    18301886                    }
    18311887                }
    … …  
    18631919                    }
    18641920                }
    1865 
    1866 
    18671921
    18681922                td.thread-options {
    … …  
    19532007            }
    19542008        }
     2009    } // close #buddypress
     2010} // close .bp-user
    19552011
    19562012/**
    … …  
    19602016    */
    19612017
     2018.bp-user {
     2019
     2020    #buddypress {
     2021
    19622022        #settings-form {
    1963             // 'p' = email notification screen sub heading
     2023            padding: 0 $spacing-val-sm;
     2024        // 'p' = email notification screen sub heading
    19642025            > p {
    19652026                @include font-size(20);
    … …  
    20002061        }
    20012062
    2002     } // close #BuddyPress
     2063    } // close #buddyPress
    20032064
    20042065} // close .bp-user
Note: See TracChangeset for help on using the changeset viewer.