Skip to:
Content

BuddyPress.org

Changeset 10593


Ignore:
Timestamp:
02/15/2016 11:19:17 AM (9 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.