Changeset 10310

Timestamp:

10/25/2015 03:14:19 PM (11 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%;
                         }