Changeset 9866

Timestamp:

05/12/2015 06:40:43 PM (9 years ago)

Author:

hnla

Message:

Update twentyfifteen companion styles

• Update messages mixin for conditional variables to match twentyfourteen
• Update messages rulesets.

_ Adjust responsive styling for group members list.

See #6291

Location:

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

Files:

• twentyfifteen-rtl.css (modified) (2 diffs)
• twentyfifteen.css (modified) (2 diffs)
• twentyfifteen.scss (modified) (6 diffs)

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

@@ -655 +655 @@
 *-----------------------------------------
 */
+/* Members loop */
+@media screen and (max-width: 30em) {
+  .groups.group-members #buddypress #members-group-list li > a {
+    border-bottom: 0;
+    display: block;
+    margin-bottom: 10px;
+    text-align: center; }
+    .groups.group-members #buddypress #members-group-list li > a img.avatar {
+      display: inline;
+      float: none; } }
+.groups.group-members #buddypress #members-group-list li h5 {
+  display: inline-block;
+  font-size: 14px;
+  font-size: 1.4rem;
+  margin: 0; }
+  @media screen and (min-width: 59.6875em) {
+    .groups.group-members #buddypress #members-group-list li h5 {
+      font-size: 16px;
+      font-size: 1.6rem; } }
+  .groups.group-members #buddypress #members-group-list li h5 a {
+    border-bottom: 0; }
+.groups.group-members #buddypress #members-group-list li span.activity {
+  font-size: 12px;
+  font-size: 1.2rem; }
+.groups.group-members #buddypress #members-group-list li .action {
+  top: 0; }
+
 .groups.group-members #subnav li {
   width: 100%; }
@@ -1035 +1062 @@
   background: #c6e4ee;
   border: 1px solid #78bed6;
-  color: #fff; }
+  color: #1e5264; }
 #buddypress div#message.updated p {
   background: #dee6b2;
   border: 1px solid #becc66;
-  color: #fff; }
+  color: #454d19; }
 
 .delete-group #buddypress div#message.info p {

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

@@ -655 +655 @@
 *-----------------------------------------
 */
+/* Members loop */
+@media screen and (max-width: 30em) {
+  .groups.group-members #buddypress #members-group-list li > a {
+    border-bottom: 0;
+    display: block;
+    margin-bottom: 10px;
+    text-align: center; }
+    .groups.group-members #buddypress #members-group-list li > a img.avatar {
+      display: inline;
+      float: none; } }
+.groups.group-members #buddypress #members-group-list li h5 {
+  display: inline-block;
+  font-size: 14px;
+  font-size: 1.4rem;
+  margin: 0; }
+  @media screen and (min-width: 59.6875em) {
+    .groups.group-members #buddypress #members-group-list li h5 {
+      font-size: 16px;
+      font-size: 1.6rem; } }
+  .groups.group-members #buddypress #members-group-list li h5 a {
+    border-bottom: 0; }
+.groups.group-members #buddypress #members-group-list li span.activity {
+  font-size: 12px;
+  font-size: 1.2rem; }
+.groups.group-members #buddypress #members-group-list li .action {
+  top: 0; }
+
 .groups.group-members #subnav li {
   width: 100%; }
@@ -1035 +1062 @@
   background: #c6e4ee;
   border: 1px solid #78bed6;
-  color: #fff; }
+  color: #1e5264; }
 #buddypress div#message.updated p {
   background: #dee6b2;
   border: 1px solid #becc66;
-  color: #fff; }
+  color: #454d19; }
 
 .delete-group #buddypress div#message.info p {

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

@@ -101 +101 @@
 
 // BP message boxes
-@mixin message-box($background, $text-color: inherit) {
+@mixin message-box($background, $text-color: null) {
+
+    @if($text-color) {
+        // if a param was passed through
+        $text-color: $text-color;
+    } @else {
+        $text-color: darken($background, 50%);
+    }
+
     background: lighten($background, 10%);
     border: 1px solid darken($background, 10%);
@@ -1263 +1271 @@
 */
 
+/* Members loop */
+
+.groups.group-members {
+    #buddypress {
+        #members-group-list {
+            li {
+
+                @media screen and (max-width: 30em) {
+                    > a {
+                        border-bottom: 0;
+                        display: block;
+                        margin-bottom: $spacing-val-sm;
+                        text-align: center;
+
+                        img.avatar {
+                            display: inline;
+                            float: none;
+                        }
+                    }
+                }
+
+                h5 {
+                    display: inline-block;
+                    @include font-size(14);
+
+                    @media screen and (min-width: 59.6875em) {
+                        @include font-size(16);
+                    }
+                    margin: 0;
+
+                    a {border-bottom: 0;}
+                } //  close h5
+
+                span.activity {
+                    @include font-size(12);
+                }
+
+                .action {
+                    top: 0;
+                }
+            } // close li
+        }
+    }
+}
+
 // Massage the members search for groups nav specifically.
 .groups.group-members {
@@ -1918 +1971 @@
 *-------------------------------------------------------------------------------
 */
+
+// message args ($variable-color, text-color)
+// Leave text-color undefined to automagically set text color
+// to background color darker by 50%
+
 #buddypress {
+
     div#message {
         p {
@@ -1927 +1986 @@
         &.info {
             p {
-                @include message-box($notice-info, #fff);
+                @include message-box($notice-info);
             }
         }
@@ -1933 +1992 @@
         &.updated {
             p {
-                @include message-box($notice-update, #fff);
+                @include message-box($notice-update);
             }
         }
@@ -1943 +2002 @@
 // Without direct classes on our mesages ( 'warning' )
 // we need to use the body classes
-// message args ($variable-color, text-color)
 // todo: If this is class .warning is included in main BP styles remove from here
 .delete-group {