Changeset 9872 for trunk/src/bp-templates/bp-legacy/css/twentyfourteen.scss

Timestamp:

05/16/2015 06:08:30 PM (10 years ago)

Author:

hnla

Message:

Updates to twentyfourteen companion styles

• Minor corrections & improvements for mobile views
• Transpose what's new active class to use style attr check
• Port over messages-threads table layout from 2015 and adjust layout to work for 2014; update various styles. props r-a-y

See #6338

File:

• trunk/src/bp-templates/bp-legacy/css/twentyfourteen.scss (modified) (20 diffs)

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

@@ -495 +495 @@
 }
 
-// Trying to position the action div absolute has bad consequences where
-// aditional items are displayed, floating is an alternative that
-// allows natural flow expansion.
 // This block:
-// * Manages li items, Stacks them small screen, floated left at wider screens.
-// * Adjusts display of action buttons at small screen
+// - Manages li items, Stacks them small screen, floated left at wider screens.
+// - Adjusts display of action buttons at small screen
 
 #buddypress {
@@ -522 +519 @@
                 float: none;
                 width: 100%;
+
+                > a {text-align: center;}
             }
 
@@ -566 +565 @@
                 }
 
+                div.item-title > a {text-align: left;}
+
                 .item {
                     float: right;
@@ -581 +582 @@
                     }
                 }
+
             } // close @media
 
@@ -613 +615 @@
                         text-align: center;
                     }
-                }
+                } // close .action
+
             } // close @media
+
             .meta,
             .item-meta .activity {
                 font-style: italic;
             }
+
         } // close li
     } // ul.item-list
@@ -661 +666 @@
         }
 
-        #whats-new-content.active {
-            textarea {
-                // !important to override the BP inline fixed height
-                height: auto !important;
-            }
-
-            #whats-new-options {
+        #whats-new-content {
+
+            #whats-new-options[style] {
                 // Have to override the BP fixed height
                 height: auto !important;
@@ -686 +687 @@
 
                     #whats-new-post-in-box {
+                        margin-top: $spacing-val-sm;
                         order: 1;
 
@@ -854 +856 @@
 */
 
-#buddypress {
-    .members {
-        .item-list {
-            .my-entry {
-                .item {
-                    background: $light-background;
-                    @include box-model(border-box);
-                    padding: 0 0.5em;
-                    @media screen and (min-width: 783px) {
-
-                        float: right;
-                        margin-left: 0;
-                        padding: 0 0.5em;
-                        width: 88%;
-                    }
-                }
-            }
-        }
-    }
-}
+
 
 /*
@@ -1271 +1254 @@
     }
 }
+
 /**
 *-------------------------------------------------
@@ -1276 +1260 @@
 *-------------------------------------------------
 */
-#buddypress {
+
+
 /**
     *------------------------------
@@ -1282 +1267 @@
     *------------------------------
     */
+
+
+#buddypress {
     .profile {
 
@@ -1292 +1280 @@
         }
 
-            /* Edit profile */
+        // Edit profile
 
         #profile-edit-form {
@@ -1341 +1329 @@
 
     } // close .profile
+} // close #buddypress - user acounts item-body
 
 /**
@@ -1348 +1337 @@
     */
 
+#buddypress {
+
     table#message-threads {
-
-        .bulk-select-check {
-            width: 5%;
-        }
-
-        .thread-from,
-        .thread-info {
-            width: 35%;
-        }
-
-        .thread-options {
-            width: 25%;
+        border-left: 1px solid $border-med;
+        border-right: 1px solid $border-med;
+
+        tbody > tr:first-child {
+            td.bulk-select-check,
+            td.thread-from {
+                border-top: 1px solid $border-med;
+         }
         }
 
         tr {
+
             td {
-                background: $stripe-odd;
-            }
-        }
-
-        tr.alt {
-            td {
-                background: $stripe-even;
+                background: $content-background;
+                border-right: 0 !important;
+                @include box-model(border-box);
+                display: inline-block;
+                float: left;
+            }
+
+            td.thread-star,
+            td.thread-options {
+                border-bottom-color: darken($border-med, 5%);
+                border-bottom-width: 2px;
+                border-left: 0;
+                height: 2.4em;
+                padding-bottom: 0.2em;
+                padding-top: 0.2em;
+
+                @media screen and (max-width: 549px) {
+                    padding-top: 0;
+                }
+            }
+
+            td.bulk-select-check,
+            td.thread-from {
+                border-left: 0;
+                height: 2.6em;
+                @media screen and (max-width: 320px) {
+                    height: 5.2em;
+                }
+            }
+
+            td.thread-from,
+            td.thread-options {
+                border-left: 0;
+                @include calc(width, "100% - 30px");
+                margin-left: 0;
+            }
+
+            td.thread-info {
+                border-left: 0;
+                padding-left: 41px;
+                width: 100%;
+
+                a::after {
+                    content: " \2013 \00a0"attr(title);
+                    @include font-size(12);
+                }
+            }
+
+            td.thread-options {
+                text-align: right;
+
+                a {
+                    @include font-size(12);
+                    line-height: 2.2;
+                }
+            }
+
+            span.from {
+                display: none;
+            }
+
+            span.activity {
+                display: block;
+                float: right;
+                line-height: 2;
+                @media screen and (max-width: 320px) {
+                    clear: both;
+                    @include font-size(11);
+                    width: 100%;
+                }
             }
         }
@@ -1377 +1428 @@
         tr.unread {
             td {
-                background: $unread;
-                border-bottom: 1px solid #e4cdff;
-                border-top: 1px solid #e4cdff;
-            }
-        }
-
-        tr.read {
-            td {
-                opacity: 0.5;
-            }
-        }
-    }
+                background: lighten($unread, 7%);
+                border-color: $border-med;
+                border-top: 0;
+                border-width: 1px;
+            }
+        }
+
+        th {
+            display: none;
+        }
+
+        th.bulk-select-all {
+            border-bottom: 0;
+            display: inline-block;
+            text-align: left;
+        }
+
+        th.bulk-select-all,
+        td.bulk-select-check,
+        td.thread-star {
+            border-right: 0;
+            width: 30px;
+        }
+
+    } // close #messages-threads
+
+    /* Read Single thread */
+    #message-thread {
+
+        #message-subject {
+            @include title-background-dark();
+            padding: 0.5em;
+        }
+
+        .message-box {
+            .message-metadata {
+                margin-bottom: $spacing-val-sm;
+            }
+
+            .message-content {
+                clear: left;
+                margin-left: 0;
+            }
+        }
+    }
+
+} // close #buddypress - user acounts item-body
 
 /**
@@ -1396 +1482 @@
     */
 
+#buddypress {
     #settings-form {
         // 'p' = email notification screen sub heading
@@ -1427 +1514 @@
         }
     }
-
 } // close #buddypress - user acounts item-body
 
@@ -1458 +1544 @@
     }
 
+    // BP :(
+    #send-reply.standard-form textarea {width: 100%;}
+
     div.activity-comments {
         form {
@@ -1475 +1564 @@
 
 #buddypress {
+
     div.dir-search,
     div.message-search,
@@ -1561 +1651 @@
 *-------------------------------------------------------------------------------
 */
-
+#buddypress {
+    table {
+        border-color: $border-med;
+    }
+}
 /*__ User Account tables __*/