Changeset 10310

Timestamp:

10/25/2015 03:14:19 PM (9 years ago)

Author:

hnla

Message:

Twentysixteen Companion Styles Updates

• Update item-lists; member .update & group desc blocks for small screen.

• Update BP search boxes for label/input widths to balance with submit width.

See #6648

Location:

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

Files:

• twentysixteen-rtl.css (modified) (4 diffs)
• twentysixteen.css (modified) (4 diffs)
• twentysixteen.scss (modified) (5 diffs)

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

@@ -443 +443 @@
     display: inline-block;
     float: none;
-}
-
-@media screen and (min-width: 38.75em) {
+    margin-bottom: 10px;
+}
+
+@media screen and (min-width: 44.375em) {
     #buddypress ul.item-list li .item-avatar img.avatar {
         display: block;
@@ -475 +476 @@
     font-size: 1.125rem;
     line-height: 1.2;
+    text-align: center;
+    width: 100%;
+}
+
+@media screen and (min-width: 44.375em) {
+    #buddypress ul.item-list li .item .item-title {
+        text-align: right;
+    }
 }
 
 #buddypress ul.item-list li .item .item-title .update {
+    display: block;
     font-size: 12px;
     font-size: 0.75rem;
+    padding: 10px 0;
+    text-align: right;
 }
 
@@ -496 +508 @@
     }
     #buddypress ul.item-list li .item {
-        right: 10%;
+        right: 5%;
         margin-right: 0;
         position: relative;
@@ -1645 +1657 @@
     float: right;
     margin: 0;
-    width: 70%;
+    width: 100%;
 }
 

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

@@ -443 +443 @@
     display: inline-block;
     float: none;
-}
-
-@media screen and (min-width: 38.75em) {
+    margin-bottom: 10px;
+}
+
+@media screen and (min-width: 44.375em) {
     #buddypress ul.item-list li .item-avatar img.avatar {
         display: block;
@@ -475 +476 @@
     font-size: 1.125rem;
     line-height: 1.2;
+    text-align: center;
+    width: 100%;
+}
+
+@media screen and (min-width: 44.375em) {
+    #buddypress ul.item-list li .item .item-title {
+        text-align: left;
+    }
 }
 
 #buddypress ul.item-list li .item .item-title .update {
+    display: block;
     font-size: 12px;
     font-size: 0.75rem;
+    padding: 10px 0;
+    text-align: left;
 }
 
@@ -496 +508 @@
     }
     #buddypress ul.item-list li .item {
-        left: 10%;
+        left: 5%;
         margin-left: 0;
         position: relative;
@@ -1645 +1657 @@
     float: left;
     margin: 0;
-    width: 70%;
+    width: 100%;
 }
 

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

@@ -737 +737 @@
                     display: inline-block;
                     float: none;
+                    margin-bottom: $spacing-val-sm;
 
                     // Quite early on we need to move avatars to the left(right)
-                    @media screen and (min-width: 38.75em) {
+                    @include small-up {
                         display: block;
                         float: left;
@@ -764 +765 @@
                     @include font-size(18);
                     line-height: 1.2;
+                    text-align: center;
+
+                    @include small-up {
+                        text-align: left;
+                    }
+
+                    width: 100%;
 
                     .update {
+                        display: block;
                         @include font-size(12);
 
@@ -771 +780 @@
                             @include font-size(14);
                         }
+
+                        padding: $spacing-val-sm 0;
+                        text-align: left;
                     }
                 }
@@ -784 +796 @@
 
                 .item {
-                    left: 10%;
+                    left: 5%;
                     margin-left: 0;
                     position: relative;
@@ -2108 +2120 @@
                 float: left;
                 margin: 0;
-                width: 70%;
+                width: 100%;
             }