Changeset 10216 for trunk/src/bp-templates/bp-legacy/css/twentythirteen.scss

Timestamp:

10/08/2015 11:23:07 AM (11 years ago)

Author:

hnla

Message:

Commit updates for Twentythirteen companion styles.
Update addresses user account and single group headers, styling updates for cover image header and default header instances at various screen sizes.
See #6533

File:

• trunk/src/bp-templates/bp-legacy/css/twentythirteen.scss (modified) (9 diffs)

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

@@ -134 +134 @@
 // Variables: color definitions
 $body-text:          #141412;
+$light-body:         lighten(#141412, 45%);
 $content-background: #fff;
-$off-white:          lighten(#f9f8ee, 0.7);
+$off-white:          lighten(#f9f8ee, 10%);
 $cream-background:   #f7f5e7;
 $light-background:   #f7f7f7;
@@ -367 +368 @@
 // to sit alongside the vert menu
 // As 2013 has an inner sidebar which if active can narrow screen too far
-// for a columner nav we'll only use these rules if no sidebar.
+// for a columner nav we'll only use these rules if no sidebar 'body:not(.sidebar)'.
 
 @media screen and (min-width: 55em) {
@@ -1067 +1068 @@
 .bp-user,
 .single-item.groups {
+
+        .entry-header {
+                margin-bottom: 0;
+
+                .entry-title {
+                        color: $light-body;
+                        @include font-size(32);
+                        margin-bottom: $spacing-val-sm;
+                        text-align: center;
+                        @media screen and (min-width: 46.25em) {
+                                text-align: left;
+                        }
+                }
+        }
+
         #buddypress {
                 #item-header-content {
@@ -1200 +1216 @@
 
                                 h3 {
-                                        //background: $dark-background;
-                                        //color: $content-background;
                                         @include font-size(14);
 
@@ -1228 +1242 @@
 
                                 div#item-actions {
+                                        clear: both;
                                         float: right;
                                         width: 28%;
+
+                                        h3 {
+                                                @include font-size(14);
+                                        }
                                 }
 
                         } // close @media
+
+                        #item-header-cover-image {
+        //                      #item-header-content {
+        //                      }
+
+                                #item-actions {
+                                        border: 0;
+                                        @media screen and (max-width: 46.25em) {
+                                                clear: both !important;
+                                        }
+                                        float: none;
+                                        width: auto;
+                                }
+
+                                @media screen and (min-width: 46.25em) {
+                                        #item-header-content {
+                                                padding-left: $spacing-val-sm;
+
+                                                #item-buttons {
+                                                        margin-top: 0;
+                                                }
+                                        }
+
+                                        #item-actions {
+                                                border-left: 1px solid $border-light;
+                                                clear: none;
+                                                float: right;
+                                                margin-top: 230px !important;
+                                                padding-top: 0 !important;
+                                                width: 20%;
+                                        }
+                                }
+                        }
 
                 } // close #item-header
@@ -1247 +1299 @@
 
 .bp-user {
+
         #buddypress {
                 #item-header {
@@ -1263 +1316 @@
                         }
 
+                        #item-header-content {
+                                .user-nicename,
+                                span.activity {
+                                        display: block;
+                                        text-align: center;
+                                }
+                        }
+
                         @media screen and (min-width: 46.25em) {
                                 #item-header-avatar {
                                         float: left;
-                                        width: 20%;
+                                        width: auto;
 
                                         a {
@@ -1274 +1335 @@
 
                                 #item-header-content {
-                                        float: right;
-                                        margin-right: 5%;
-                                        width: 69%;
+                                        float: none;
+                                        overflow: hidden;
+
+                                        .user-nicename,
+                                        span.activity {
+                                                text-align: left;
+                                        }
+
+                                        #item-meta {
+                                                margin-top: 0;
+                                        }
                                 }
 
@@ -1282 +1351 @@
 
                 } // close #item-header
+
+                #item-header-cover-image {
+
+                        #item-header-content {
+                                @media screen and (min-width: 46.25em) {
+                                        .user-nicename {
+                                                margin-bottom: $spacing-val-md;
+                                        }
+
+                                        #item-buttons {
+                                                margin: 0;
+                                        }
+                                }
+                        }
+                }
 
         } // close #buddypress