Changeset 10593

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:

• twentytwelve-rtl.css (modified) (4 diffs)
• twentytwelve.css (modified) (4 diffs)
• twentytwelve.scss (modified) (7 diffs)

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

@@ -928 +928 @@
 }
 
-@media screen and (max-width: 37.5em) {
+@media screen and (max-width: 50em) {
     .single-item.groups #buddypress div#item-header {
         display: flex;
@@ -958 +958 @@
 .single-item.groups #buddypress div#item-header {
     padding-bottom: 48px;
+}
+
+.single-item.groups #buddypress div#item-header #item-header-content {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
@@ -970 +976 @@
         clear: none;
         float: left;
-        margin-top: 225px !important;
         padding-right: 0.2em;
         width: 30%;
@@ -1004 +1009 @@
     }
     .single-item.groups #buddypress div#item-header #item-header-content {
-        margin-right: 4%;
-        width: 40%;
+        margin-right: 2%;
+        padding: 0 0.5em;
     }
     .single-item.groups #buddypress div#item-header div#item-actions {
         float: left;
         width: 28%;
+    }
+}
+
+@media screen and (min-width: 64em) {
+    .single-item.groups #buddypress div#item-header #item-header-content {
+        width: 40%;
+    }
+}
+
+.single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-actions {
+    margin-top: 225px !important;
+}
+
+@media screen and (min-width: 50em) and (max-width: 60em) {
+    .single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-header-content {
+        max-width: 60% !important;
+        width: 60% !important;
     }
 }

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

@@ -928 +928 @@
 }
 
-@media screen and (max-width: 37.5em) {
+@media screen and (max-width: 50em) {
     .single-item.groups #buddypress div#item-header {
         display: flex;
@@ -958 +958 @@
 .single-item.groups #buddypress div#item-header {
     padding-bottom: 48px;
+}
+
+.single-item.groups #buddypress div#item-header #item-header-content {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
@@ -970 +976 @@
         clear: none;
         float: right;
-        margin-top: 225px !important;
         padding-left: 0.2em;
         width: 30%;
@@ -1004 +1009 @@
     }
     .single-item.groups #buddypress div#item-header #item-header-content {
-        margin-left: 4%;
-        width: 40%;
+        margin-left: 2%;
+        padding: 0 0.5em;
     }
     .single-item.groups #buddypress div#item-header div#item-actions {
         float: right;
         width: 28%;
+    }
+}
+
+@media screen and (min-width: 64em) {
+    .single-item.groups #buddypress div#item-header #item-header-content {
+        width: 40%;
+    }
+}
+
+.single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-actions {
+    margin-top: 225px !important;
+}
+
+@media screen and (min-width: 50em) and (max-width: 60em) {
+    .single-item.groups #buddypress #cover-image-container #item-header-cover-image #item-header-content {
+        max-width: 60% !important;
+        width: 60% !important;
     }
 }

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
+
+
             }
         }