Skip to:
Content

BuddyPress.org

Changeset 10593


Ignore:
Timestamp:
02/15/2016 11:19:17 AM (11 years ago)
Author:
hnla
Message:

Companion Styles twentytwelve
Groups header element adjustments.
Commit addresses:

  • Cover images item-actions margin top positioning only stated for cover images when activated.
  • General updates and improvements for item-header content & item-actions layout & flex-box; Improves layouts at finer breakpoints.

See #6766 Props mercime

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

Legend:

Unmodified
Added
Removed

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

    r10568 r10593  
    928928}
    929929
    930 @media screen and (max-width: 37.5em) {
     930@media screen and (max-width: 50em) {
    931931        .single-item.groups #buddypress div#item-header {
    932932                display: flex;
    … …  
    958958.single-item.groups #buddypress div#item-header {
    959959        padding-bottom: 48px;
     960}
     961
     962.single-item.groups #buddypress div#item-header #item-header-content {
     963        -webkit-box-sizing: border-box;
     964        -moz-box-sizing: border-box;
     965        box-sizing: border-box;
    960966}
    961967
    … …  
    970976                clear: none;
    971977                float: left;
    972                 margin-top: 225px !important;
    973978                padding-right: 0.2em;
    974979                width: 30%;
    … …  
    10041009        }
    10051010        .single-item.groups #buddypress div#item-header #item-header-content {
    1006                 margin-right: 4%;
    1007                 width: 40%;
     1011                margin-right: 2%;
     1012                padding: 0 0.5em;
    10081013        }
    10091014        .single-item.groups #buddypress div#item-header div#item-actions {
    10101015                float: left;
    10111016                width: 28%;
     1017        }
     1018}
     1019
     1020@media screen and (min-width: 64em) {
     1021        .single-item.groups #buddypress div#item-header #item-header-content {
     1022                width: 40%;
     1023        }
     1024}
     1025
     1026.single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-actions {
     1027        margin-top: 225px !important;
     1028}
     1029
     1030@media screen and (min-width: 50em) and (max-width: 60em) {
     1031        .single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-header-content {
     1032                max-width: 60% !important;
     1033                width: 60% !important;
    10121034        }
    10131035}

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

    r10568 r10593  
    928928}
    929929
    930 @media screen and (max-width: 37.5em) {
     930@media screen and (max-width: 50em) {
    931931        .single-item.groups #buddypress div#item-header {
    932932                display: flex;
    … …  
    958958.single-item.groups #buddypress div#item-header {
    959959        padding-bottom: 48px;
     960}
     961
     962.single-item.groups #buddypress div#item-header #item-header-content {
     963        -webkit-box-sizing: border-box;
     964        -moz-box-sizing: border-box;
     965        box-sizing: border-box;
    960966}
    961967
    … …  
    970976                clear: none;
    971977                float: right;
    972                 margin-top: 225px !important;
    973978                padding-left: 0.2em;
    974979                width: 30%;
    … …  
    10041009        }
    10051010        .single-item.groups #buddypress div#item-header #item-header-content {
    1006                 margin-left: 4%;
    1007                 width: 40%;
     1011                margin-left: 2%;
     1012                padding: 0 0.5em;
    10081013        }
    10091014        .single-item.groups #buddypress div#item-header div#item-actions {
    10101015                float: right;
    10111016                width: 28%;
     1017        }
     1018}
     1019
     1020@media screen and (min-width: 64em) {
     1021        .single-item.groups #buddypress div#item-header #item-header-content {
     1022                width: 40%;
     1023        }
     1024}
     1025
     1026.single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-actions {
     1027        margin-top: 225px !important;
     1028}
     1029
     1030@media screen and (min-width: 50em) and (max-width: 60em) {
     1031        .single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-header-content {
     1032                max-width: 60% !important;
     1033                width: 60% !important;
    10121034        }
    10131035}

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

    r10568 r10593  
    13011301                // Move visual flow of avatar & item-actions at narrow width,
    13021302                // avatar first after group title
    1303                 @media screen and (max-width: 37.500em) {
     1303                @media screen and (max-width: 50em) {
    13041304                        div#item-header {
    13051305                                display: flex;
    … …  
    13381338                        padding-bottom: $spacing-val-lg;
    13391339
     1340                        #item-header-content {
     1341                                @include box-model(border-box);
     1342                        }
     1343
    13401344                        div#item-actions {
    13411345                                margin: 0 !important;
    … …  
    13461350                                        clear: none;
    13471351                                        float: right;
    1348                                         margin-top: 225px !important;
    13491352                                        padding-left: 0.2em;
    13501353                                        width: 30%;
    … …  
    13821385
    13831386                                #item-header-content {
    1384                                         margin-left: 4%;
    1385                                         width: 40%;
     1387                                        margin-left: 2%;
     1388                                        padding: 0 0.5em;
    13861389                                }
    13871390
    … …  
    13931396                        } // close @media
    13941397
     1398                        @media screen and (min-width: 64em) {
     1399                                #item-header-content {
     1400                                        width: 40%;
     1401                                }
     1402                        }
    13951403                } // close #item-header
    13961404        } // close #buddypress
    … …  
    14001408        // breakpoints.
    14011409        // Due to cover image styles being applied via embedded styles & thus carrying
    1402         // heavier weight than linked styles the use !important to override may be required.
     1410        // heavier weight than linked styles the use of !important to override may be required.
    14031411        #buddypress {
    14041412                #cover-image-container {
    14051413                        #item-header-cover-image {
     1414
     1415                                #item-actions {
     1416                                        margin-top: 225px !important;
     1417                                }
     1418
     1419                                @media screen and (min-width: 50em) and (max-width: 60em) {
     1420                                        #item-header-content {
     1421                                                max-width: 60% !important;
     1422                                                width: 60% !important;
     1423                                        }
     1424                                }
     1425
    14061426                                @media screen and (max-width: 64em) {
     1427
    14071428                                        #item-actions {
    14081429                                                border: 0;
    … …  
    14151436                                                h3 {border-bottom: 1px solid $border-light;}
    14161437                                        }
    1417                                 }
     1438                                } // @media
     1439
     1440
    14181441                        }
    14191442                }
Note: See TracChangeset for help on using the changeset viewer.