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

Timestamp:

01/07/2016 08:33:28 PM (11 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;