Changeset 10593 for trunk/src/bp-templates/bp-legacy/css/twentytwelve.scss

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

File:

• trunk/src/bp-templates/bp-legacy/css/twentytwelve.scss (modified) (7 diffs)

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

@@ -1301 +1301 @@
                 // Move visual flow of avatar & item-actions at narrow width,
                 // avatar first after group title
-                @media screen and (max-width: 37.500em) {
+                @media screen and (max-width: 50em) {
                         div#item-header {
                                 display: flex;
@@ -1338 +1338 @@
                         padding-bottom: $spacing-val-lg;
 
+                        #item-header-content {
+                                @include box-model(border-box);
+                        }
+
                         div#item-actions {
                                 margin: 0 !important;
@@ -1346 +1350 @@
                                         clear: none;
                                         float: right;
-                                        margin-top: 225px !important;
                                         padding-left: 0.2em;
                                         width: 30%;
@@ -1382 +1385 @@
 
                                 #item-header-content {
-                                        margin-left: 4%;
-                                        width: 40%;
+                                        margin-left: 2%;
+                                        padding: 0 0.5em;
                                 }
 
@@ -1393 +1396 @@
                         } // close @media
 
+                        @media screen and (min-width: 64em) {
+                                #item-header-content {
+                                        width: 40%;
+                                }
+                        }
                 } // close #item-header
         } // close #buddypress
@@ -1400 +1408 @@
         // breakpoints.
         // Due to cover image styles being applied via embedded styles & thus carrying
-        // heavier weight than linked styles the use !important to override may be required.
+        // heavier weight than linked styles the use of !important to override may be required.
         #buddypress {
                 #cover-image-container {
                         #item-header-cover-image {
+
+                                #item-actions {
+                                        margin-top: 225px !important;
+                                }
+
+                                @media screen and (min-width: 50em) and (max-width: 60em) {
+                                        #item-header-content {
+                                                max-width: 60% !important;
+                                                width: 60% !important;
+                                        }
+                                }
+
                                 @media screen and (max-width: 64em) {
+
                                         #item-actions {
                                                 border: 0;
@@ -1415 +1436 @@
                                                 h3 {border-bottom: 1px solid $border-light;}
                                         }
-                                }
+                                } // @media
+
+
                         }
                 }