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

Timestamp:

01/07/2016 08:33:28 PM (10 years ago)

Author:

hnla

Message:

Update Twentytwelve Companion styles.

Builds upon original commit to address specific style concerns, and thin out styling in keeping with 2012 design.

See #6766

File:

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

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

@@ -291 +291 @@
                         color: #555;
                     }
+                    // Keep links from inheriting :visited states
+                    &:visited {
+                        color: #21759b;
+                    }
 
                     span {border-radius: 25%;}
                 }
+
             }
         }
@@ -438 +443 @@
         div#subnav.item-list-tabs {
             li.last {
-//              float: right;
                 margin-left: 0;
                 text-align: right;
-//              width: 230px;
+
                 @media screen and (max-width: 30em) {
                     clear: left;
@@ -638 +642 @@
 #buddypress {
     ul.item-list {
+        border-top: 0;
+
         li {
             overflow: hidden !important;
@@ -692 +698 @@
 
                 .item-title {
-                    @include font-size(18);
+                    @include font-size(16);
                     line-height: 1.2;
                     text-align: center;
@@ -702 +708 @@
                     width: 100%;
 
-                    > a {text-decoration: none;}
+                    > a {
+                        text-decoration: none;
+
+                        &:visited { color: #21759b;}
+                    }
 
                     .update {
@@ -715 +725 @@
                         text-align: left;
                     }
-                }
-
-            }
+                }  // close .item-title
+
+            } // close .item
 
             @include medium-up {
@@ -733 +743 @@
 
                     .item-title {
-                        @include font-size(22)
+                        @include font-size(18)
                     }
                 }
@@ -746 +756 @@
                 margin-left: 0;
                 padding: $spacing-val-md 0 $spacing-val-xs;
+
                 // push the actions to the right
-
                 @include medium-up {
                     clear: none;
@@ -841 +851 @@
                         margin: 0;
                         min-height: 1.5em;
-                        padding-left: 0.4em;
+                        padding: 0 0 0 0.4em;
                     }
                 }
@@ -852 +862 @@
                     #whats-new-submit {
                         float: right;
+
+                        input {
+                            padding: 0;
+                        }
                     }
                 }
@@ -908 +922 @@
             .activity-header {
                 @include font-size(14);
+
+                a:visited {
+                    color: #21759b;
+                }
             }
 
@@ -916 +934 @@
                     margin-right: $spacing-val-sm;
                     text-align: left;
-                    a {border-bottom: 0;}
+
+                    a {
+                        border-bottom: 0;
+                    }
                 }
 
@@ -955 +976 @@
                     a {
                         @include font-size(12);
-                        padding: 2px 4px;
                     }
                 }
@@ -1004 +1024 @@
                 background: darken($light-background, 1%);
                 border: 1px solid rgba(#9fd1e2, 0.3);
-                a { font-style: italic; }
             }
 
@@ -1058 +1077 @@
             > ul {
                 background: rgba($light-background, 0.6);
-                border-left: 1px solid $border-light;
-                margin: 2em 0 0 2px;
+                margin: $spacing-val-sm 0 0 2px;
 
                 > li {
@@ -1066 +1084 @@
                         color: #555;
                     }
+
+                    .acomment-meta,
+                    .acomment-content {
+                        @include font-size(12);
+                    }
+
                 }
 
@@ -1193 +1217 @@
 */
 
+.bp-user {
+    #buddypress {
+    // On object nav links, table links (notifications etc) we don't really need :visited
+    // inheritance, so set pseudo class to :link color.
+        a {
+            &:visited {
+                color: #21759b;
+            }
+        }
+    }
+}
 
 /**
@@ -1213 +1248 @@
     }
 
+    @media screen and (max-width: 37.500em) {
+        h1,
+        #item-header-content {
+            text-align: center;
+        }
+    }
+
     @media screen and (max-width: 46.25em) {
         main {
@@ -1221 +1263 @@
     }
 
-    @media screen and (max-width: 37.500em) {
-        h1,
-        #item-header-content {
-            text-align: center;
-        }
-    }
-
     #buddypress {
+        @media screen and (max-width: 37.500em) {
+            h1 {
+                margin-bottom: 0;
+            }
+
+            #item-header-avatar {
+                img.avatar {
+                    margin-right: 0;
+                }
+            }
+
+            #item-header-content {
+                width: 100%;
+            }
+        } // close @media
+
         @media screen and (max-width: 46.25em) {
             #item-header {
@@ -1237 +1288 @@
             }
         }
-
-        @media screen and (max-width: 37.500em) {
-            h1 {
-                margin-bottom: 0;
-            }
-
-            #item-header-avatar {
-                img.avatar {
-                    margin-right: 0;
-                }
-            }
-
-            #item-header-content {
-                width: 100%;
-            }
-        }
-    }
+    } // close #buddypress
+
 }
 
@@ -1339 +1375 @@
                     padding: 0.2em;
                 }
+
+                #group-admins,
+                #group-mods {
+                    li {
+                        margin: 0;
+                    }
+                }
+
             } // close item-actions
 
@@ -1366 +1410 @@
         } // close #item-header
     } // close #buddypress
-} // close .groups
+
+    // These rules handle the specific instance of Cover Images on single groups
+    // activated & attempt to address positioning concerns arising from themes
+    // 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.
+    #buddypress {
+        #cover-image-container {
+            #item-header-cover-image {
+                @media screen and (max-width: 64em) {
+                    #item-actions {
+                        border: 0;
+                        clear: both;
+                        margin-top: 0 !important;
+                        max-width: 100% !important;
+                        padding-top: 0 !important;
+                        width: auto;
+
+                        h3 {border-bottom: 1px solid $border-light;}
+                    }
+                }
+            }
+        }
+    }
+
+} // close .single-item.groups
 
 /**
@@ -1614 +1683 @@
             width: 100%;
             @media screen and (min-width: 37.500em) {
-                width: 50%;
+                width: 40%;
             }
 
@@ -1627 +1696 @@
                 float: left;
                 margin-right: 0;
-                width: 60%;
+                width: 49%;
+
+                @media screen and (min-width: 37.500em) {
+                    width: auto;
+                }
             }
 
             input {
-                float: right;
+                float: left;
                 font-family: inherit;
                 line-height: 20px;
                 margin-left: 1%;
-                width: 39%;
+                width: 50%;
+
+                @media screen and (min-width: 37.500em) {
+                    width: auto;
+                }
 
                 &[disabled="disabled"]:focus,
@@ -1704 +1781 @@
                 } //.button-nav
 
+                .field-visibility-settings-toggle {
+                    margin: $spacing-val-xs 0 $spacing-val-md;
+                }
+
                 .field-visibility-settings-toggle,
                 .field-visibility-settings {
@@ -1711 +1792 @@
                 .field-visibility-settings-close,
                 .visibility-toggle-link {
-                    background: $dark-background;
-                    color: #fff;
-                    padding: 0.2em 0.5em;
+                    background: lighten($dark-background, 10%);
+                    @include border-radius(2px);
+                    color: #eee;
+                    font-weight: bold;
+                    padding: 0.1em 0.5em;
+                    text-decoration: none;
+
+                    &:focus,
+                    &:hover {
+                        color: #fff;
+                    }
                 }
             } // close profile form
@@ -1919 +2008 @@
             tr.unread {
                 td {
-                    background: rgba($unread, 0.4);
-                    border-color: $border-color;
+                    border-color: $border-light;
                 }
             }
@@ -2106 +2194 @@
 #buddypress {
 
-// Match BP form elements to Themes(2016) styling where styles
+// Match BP form elements to Themes(2012) styling where styles
 // are not inherited or being overriden.
     div.activity-comments {
@@ -2156 +2244 @@
 
         // Stylise the seach form elements, in part this deals with padding
-        // issues on the submit & sizing issues between bp styles & 2016
+        // issues on the submit & sizing issues between bp styles & 2012
 
         form { // *sigh* only to bludgeon over specified rules
@@ -2165 +2253 @@
                 float: left;
                 width: 70%;
-            }
-
-            input[type='text'] {
-                float: left;
-                margin: 0;
-                width: 100%;
             }
 
@@ -2177 +2259 @@
                 @include font-size(14);
                 border: 0;
-                line-height: inherit;
+                border-radius: 0;
+                line-height: 1.8;
+                min-height: 2rem;
             }
 
             input[type='text'] {
                 border-right: 1px solid rgba($border-color, 0.6);
-                padding: 0.2em 0 0.2em 0.2em;
+                float: left;
+                margin: 0;
+                padding: 0 0.2em 0;
+                width: 100%;
             }
 
@@ -2188 +2275 @@
                 float: right;
                 font-weight: normal;
-                padding: 0.2em 1em;
+                padding: 0 1em;
                 text-align: center;
                 text-transform: none;