Changeset 12061

Timestamp:

05/05/2018 09:14:06 AM (7 years ago)

Author:

hnla

Message:

Nouveau: Adjust tabbed link styles

Commit addresses horizontal links when dropping to new line not able to float fully to the extreme edge past the current tabbed link due to neg margin.

Commit also addresses vert navs losing rulesets specificity on non floated lists due to recent grouped selector changes by adding in additional class.

Props boonebgorges hnla

Fixes #7784

Location:

trunk/src/bp-templates/bp-nouveau

Files:

• common-styles/_bp-mixins.scss (modified) (1 diff)
• common-styles/_bp_layouts.scss (modified) (2 diffs)
• css/buddypress-rtl.css (modified) (4 diffs)
• css/buddypress.css (modified) (4 diffs)

trunk/src/bp-templates/bp-nouveau/common-styles/_bp-mixins.scss

@@ -374 +374 @@
             }
 
+            li:not(.current) {
+                margin-bottom: 2px;
+            }
+
             li.current {
                 border-color: $bp-border-dark $bp-border-dark #fff;

trunk/src/bp-templates/bp-nouveau/common-styles/_bp_layouts.scss

@@ -457 +457 @@
     .bp-single-vert-nav { // described for the #buddypress element
 
-        .vertical {
+        .bp-navs.vertical {
             overflow: visible;
 
@@ -469 +469 @@
             li {
                 float: none;
+                margin-right: 0;
 
                 &.selected a {
                     background: $grey;
                     color: $black;
+                    padding-left: 0;
                 }
 

trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css

@@ -589 +589 @@
     .buddypress-wrap .tabbed-links ol li a:hover {
         background: none;
+    }
+    .buddypress-wrap .tabbed-links ul li:not(.current),
+    .buddypress-wrap .tabbed-links ol li:not(.current) {
+        margin-bottom: 2px;
     }
     .buddypress-wrap .tabbed-links ul li.current,
@@ -5083 +5087 @@
 
 @media screen and (min-width: 46.8em) {
-    .bp-single-vert-nav .vertical {
+    .bp-single-vert-nav .bp-navs.vertical {
         overflow: visible;
     }
-    .bp-single-vert-nav .vertical ul {
+    .bp-single-vert-nav .bp-navs.vertical ul {
         border-left: 1px solid #d6d6d6;
         float: right;
@@ -5092 +5096 @@
         width: 25%;
     }
-    .bp-single-vert-nav .vertical li {
+    .bp-single-vert-nav .bp-navs.vertical li {
         float: none;
-    }
-    .bp-single-vert-nav .vertical li.selected a {
+        margin-left: 0;
+    }
+    .bp-single-vert-nav .bp-navs.vertical li.selected a {
         background: #ccc;
         color: #333;
-    }
-    .bp-single-vert-nav .vertical li:focus, .bp-single-vert-nav .vertical li:hover {
+        padding-right: 0;
+    }
+    .bp-single-vert-nav .bp-navs.vertical li:focus, .bp-single-vert-nav .bp-navs.vertical li:hover {
         background: #ccc;
     }
-    .bp-single-vert-nav .vertical li span {
+    .bp-single-vert-nav .bp-navs.vertical li span {
         background: #d6d6d6;
         border-radius: 10%;
@@ -5108 +5114 @@
         margin-left: 2px;
     }
-    .bp-single-vert-nav .vertical li:hover span {
+    .bp-single-vert-nav .bp-navs.vertical li:hover span {
         border-color: #eaeaea;
     }

trunk/src/bp-templates/bp-nouveau/css/buddypress.css

@@ -589 +589 @@
     .buddypress-wrap .tabbed-links ol li a:hover {
         background: none;
+    }
+    .buddypress-wrap .tabbed-links ul li:not(.current),
+    .buddypress-wrap .tabbed-links ol li:not(.current) {
+        margin-bottom: 2px;
     }
     .buddypress-wrap .tabbed-links ul li.current,
@@ -5083 +5087 @@
 
 @media screen and (min-width: 46.8em) {
-    .bp-single-vert-nav .vertical {
+    .bp-single-vert-nav .bp-navs.vertical {
         overflow: visible;
     }
-    .bp-single-vert-nav .vertical ul {
+    .bp-single-vert-nav .bp-navs.vertical ul {
         border-right: 1px solid #d6d6d6;
         float: left;
@@ -5092 +5096 @@
         width: 25%;
     }
-    .bp-single-vert-nav .vertical li {
+    .bp-single-vert-nav .bp-navs.vertical li {
         float: none;
-    }
-    .bp-single-vert-nav .vertical li.selected a {
+        margin-right: 0;
+    }
+    .bp-single-vert-nav .bp-navs.vertical li.selected a {
         background: #ccc;
         color: #333;
-    }
-    .bp-single-vert-nav .vertical li:focus, .bp-single-vert-nav .vertical li:hover {
+        padding-left: 0;
+    }
+    .bp-single-vert-nav .bp-navs.vertical li:focus, .bp-single-vert-nav .bp-navs.vertical li:hover {
         background: #ccc;
     }
-    .bp-single-vert-nav .vertical li span {
+    .bp-single-vert-nav .bp-navs.vertical li span {
         background: #d6d6d6;
         border-radius: 10%;
@@ -5108 +5114 @@
         margin-right: 2px;
     }
-    .bp-single-vert-nav .vertical li:hover span {
+    .bp-single-vert-nav .bp-navs.vertical li:hover span {
         border-color: #eaeaea;
     }