Changeset 13272 for branches/10.0/src/bp-templates/bp-nouveau/sass/twentytwentytwo.scss

Timestamp:

04/16/2022 10:55:58 AM (4 years ago)

Author:

imath

Message:

BP Nouveau: improve group members management screen display in TT2

Edit the Twenty Twenty-Two custom stylesheet to improve how the group members management screen is displayed into this theme.

Fixes #8684 (10.0 branch)

File:

• branches/10.0/src/bp-templates/bp-nouveau/sass/twentytwentytwo.scss (modified) (2 diffs)

branches/10.0/src/bp-templates/bp-nouveau/sass/twentytwentytwo.scss

@@ -61 +61 @@
 
 7.0 - Tables -  General
+    7.0.1 - Group - Manage Members
 
 8.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips
@@ -1908 +1909 @@
             tr.alt {
                 background: transparent;
+            }
+        }
+    }
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @subsection 7.0.1 - Group - Manage Members
+*-------------------------------------------------------------------------------
+*/
+
+#buddypress.twentytwentytwo {
+
+    table#group-members-list-table {
+        border-collapse: collapse;
+        width: 100%;
+
+        a:hover,
+        a:focus {
+            text-decoration: underline;
+            text-decoration-style: dashed;
+            text-decoration-thickness: 1px;
+            text-underline-offset: 0.25ch;
+        }
+
+        .row-actions a {
+            font-size: 90%;
+        }
+
+        th,
+        td {
+            padding: 0.5em;
+            border: 1px solid var(--wp--preset--color--primary);
+            word-break: break-all;
+
+            &.uname-column {
+                width: 60%;
+            }
+        }
+
+        td {
+
+            img {
+
+                &.avatar {
+                    display: block;
+                    height: calc(2.25 * 1rem);
+                    min-height: inherit;
+                    width: calc(2.25 * 1rem);
+                }
+
+                &.alignleft {
+                    float: left;
+
+                    @media screen and (min-width: 46.8em) {
+
+                        margin-right: calc(2 * 1rem);
+                    }
+                }
             }
         }