Changeset 12844 for trunk/src/bp-templates/bp-nouveau/sass/twentytwentyone.scss

Timestamp:

02/13/2021 11:45:28 AM (4 years ago)

Author:

imath

Message:

Nouveau: improve Twenty Twenty-One Profile/Group Avatar UI

Update the twentytwentyone.scss file gathering all Avatar UI styles into the "Item Body: Global" subsection.

See #8434 (trunk)

File:

• trunk/src/bp-templates/bp-nouveau/sass/twentytwentyone.scss (modified) (3 diffs)

trunk/src/bp-templates/bp-nouveau/sass/twentytwentyone.scss

@@ -620 +620 @@
     #group-create-body {
 
-        #avatar-crop-pane {
-            margin-bottom: 1em;
-        }
-
         nav.group-create-links {
 
@@ -736 +732 @@
             font-size: var(--heading--font-size-h4);
             letter-spacing: var(--heading--letter-spacing-h4);
+        }
+
+        .bp-avatar {
+
+            #avatar-crop-pane {
+                margin-bottom: 1em;
+            }
+        }
+
+        .bp-avatar-nav {
+
+            ul.avatar-nav-items {
+                border-bottom: 1px solid var(--global--color-primary);
+
+                li {
+
+                    &.current {
+                        border: 1px solid var(--global--color-primary);
+                        border-bottom: 1px solid var(--global--color-background);
+                    }
+                }
+            }
+        }
+
+        #drag-drop-area {
+            border: 4px dashed var(--global--color-secondary);
+
+            .drag-drop-info {
+                color: var(--global--color-secondary);
+            }
+
+            #bp-browse-button {
+                margin: 50px auto 0;
+            }
+        }
+
+        .bp-avatar-status,
+        .bp-cover-image-status {
+
+            .warning,
+            .success {
+                background-color: var(--global--color-light-gray);
+                border: none;
+                border-left-width: 4px;
+                border-left-style: solid;
+                color: var(--global--color-dark-gray);
+            }
+
+            .warning {
+                border-left-color: var(--global--color-orange);
+            }
+
+            .success {
+                border-left-color: var(--global--color-green);
+            }
+
+            .error {
+                border-left-color: var(--global--color-red);
+            }
         }
     }
@@ -1005 +1060 @@
     .field-visibility-settings-header {
         color: var(--global--color-secondary);
-    }
-
-    .bp-avatar-nav {
-
-        ul.avatar-nav-items {
-            border-bottom: 1px solid var(--global--color-primary);
-
-            li {
-
-                &.current {
-                    border: 1px solid var(--global--color-primary);
-                    border-bottom: 1px solid var(--global--color-background);
-                }
-            }
-        }
-    }
-
-    #drag-drop-area {
-        border: 4px dashed var(--global--color-secondary);
-
-        .drag-drop-info {
-            color: var(--global--color-secondary);
-        }
-
-        #bp-browse-button {
-            margin: 50px auto 0;
-        }
-    }
-
-    .bp-avatar-status,
-    .bp-cover-image-status {
-
-        .warning,
-        .success {
-            background-color: var(--global--color-light-gray);
-            border: none;
-            border-left-width: 4px;
-            border-left-style: solid;
-            color: var(--global--color-dark-gray);
-        }
-
-        .warning {
-            border-left-color: var(--global--color-orange);
-        }
-
-        .success {
-            border-left-color: var(--global--color-green);
-        }
-
-        .error {
-            border-left-color: var(--global--color-red);
-        }
     }
 }