Changeset 10309

Timestamp:

10/25/2015 12:18:39 PM (9 years ago)

Author:

hnla

Message:

Twentythirteen Companion styles updates.

• Updates list elements for groups & member screens, improves item-desc & .update elements for small screens, centres blocks and titles.

• Adjust bp search box for label input widths ,wider for small screens & correct input text width to 100% of it's parent label.

See #6533

Location:

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

Files:

• twentythirteen-rtl.css (modified) (7 diffs)
• twentythirteen.css (modified) (7 diffs)
• twentythirteen.scss (modified) (6 diffs)

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

@@ -419 +419 @@
 
 #buddypress ul.item-list li .item .item-desc {
-    margin-right: 0;
-    width: 94%;
+    margin: 0 auto;
+    width: 100%;
 }
 
@@ -427 +427 @@
     font-size: 1.125rem;
     line-height: 1.2;
+    margin: 0 auto;
+    text-align: center;
+    width: 100%;
+}
+
+@media screen and (min-width: 38.75em) {
+    #buddypress ul.item-list li .item .item-title {
+        text-align: right;
+    }
 }
 
@@ -432 +441 @@
     font-size: 12px;
     font-size: 0.75rem;
+    display: block;
+    padding: 10px 0;
+    text-align: right;
 }
 
@@ -448 +460 @@
     }
     #buddypress ul.item-list li .item {
-        right: 10%;
+        right: 5%;
         margin-right: 0;
         position: relative;
@@ -1723 +1735 @@
 #buddypress li.groups-members-search form label {
     float: right;
-    width: 80%;
+    width: 60%;
+}
+
+@media screen and (min-width: 46.25em) {
+    #buddypress div.dir-search form label,
+    #buddypress div.message-search form label,
+    #buddypress li.groups-members-search form label {
+        width: 80%;
+    }
 }
 
@@ -1731 +1751 @@
     float: right;
     margin: 0;
-    width: 80%;
+    width: 100%;
 }
 
@@ -1761 +1781 @@
     text-align: center;
     text-transform: none;
-    width: 20%;
+    width: 40%;
+}
+
+@media screen and (min-width: 46.25em) {
+    #buddypress div.dir-search form input[type='submit'],
+    #buddypress div.message-search form input[type='submit'],
+    #buddypress li.groups-members-search form input[type='submit'] {
+        width: 20%;
+    }
 }
 

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

@@ -419 +419 @@
 
 #buddypress ul.item-list li .item .item-desc {
-    margin-left: 0;
-    width: 94%;
+    margin: 0 auto;
+    width: 100%;
 }
 
@@ -427 +427 @@
     font-size: 1.125rem;
     line-height: 1.2;
+    margin: 0 auto;
+    text-align: center;
+    width: 100%;
+}
+
+@media screen and (min-width: 38.75em) {
+    #buddypress ul.item-list li .item .item-title {
+        text-align: left;
+    }
 }
 
@@ -432 +441 @@
     font-size: 12px;
     font-size: 0.75rem;
+    display: block;
+    padding: 10px 0;
+    text-align: left;
 }
 
@@ -448 +460 @@
     }
     #buddypress ul.item-list li .item {
-        left: 10%;
+        left: 5%;
         margin-left: 0;
         position: relative;
@@ -1723 +1735 @@
 #buddypress li.groups-members-search form label {
     float: left;
-    width: 80%;
+    width: 60%;
+}
+
+@media screen and (min-width: 46.25em) {
+    #buddypress div.dir-search form label,
+    #buddypress div.message-search form label,
+    #buddypress li.groups-members-search form label {
+        width: 80%;
+    }
 }
 
@@ -1731 +1751 @@
     float: left;
     margin: 0;
-    width: 80%;
+    width: 100%;
 }
 
@@ -1761 +1781 @@
     text-align: center;
     text-transform: none;
-    width: 20%;
+    width: 40%;
+}
+
+@media screen and (min-width: 46.25em) {
+    #buddypress div.dir-search form input[type='submit'],
+    #buddypress div.message-search form input[type='submit'],
+    #buddypress li.groups-members-search form input[type='submit'] {
+        width: 20%;
+    }
 }
 

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

@@ -666 +666 @@
 
                 .item-desc {
-                    margin-left: 0;
-                    width: 94%;
+                    margin: 0 auto;
+                    width: 100%;
                 }
 
@@ -673 +673 @@
                     @include font-size(18);
                     line-height: 1.2;
+                    margin: 0 auto;
+                    text-align: center;
+
+                    @media screen and (min-width: 38.75em) {
+                        text-align: left;
+                    }
+                    width: 100%;
 
                     .update {
                         @include font-size(12);
+                        display: block;
 
                         @media screen and (min-width: 59.6875em) {
                             @include font-size(14);
                         }
-                    }
-                }
+                        padding: $spacing-val-sm 0;
+                        text-align: left;
+                    }
+
+                } // .item-title
 
             }
@@ -693 +704 @@
 
                 .item {
-                    left: 10%;
+                    left: 5%;
                     margin-left: 0;
                     position: relative;
@@ -2143 +2154 @@
             label {
                 float: left;
-                width: 80%;
+                width: 60%;
+                @media screen and (min-width: 46.25em) {
+                    width: 80%;
+                }
             }
 
@@ -2149 +2163 @@
                 float: left;
                 margin: 0;
-                width: 80%;
+                width: 100%;
             }
 
@@ -2170 +2184 @@
                 text-align: center;
                 text-transform: none;
-                width: 20%;
+                width: 40%;
+
+                @media screen and (min-width: 46.25em) {
+                    width: 20%;
+                }
+
             }
         } // close form