Changeset 13271 for trunk/src/bp-templates/bp-nouveau/sass/twentytwentytwo.scss

Timestamp:

04/16/2022 10:54:54 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.

See #8684 (trunk)

File:

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

trunk/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);
+                                        }
+                                }
                         }
                 }