launchpad-reviewers team mailing list archive

[Peter Makowski <mp+444157@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/launchpad:feat-vanilla-tabs-style into launchpad:master.

Commit message:
feat: vanilla tabs style
- increase base font-size


Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~petermakowski/launchpad/+git/launchpad/+merge/444157

- set main navigation to use vanilla framework tabs style https://vanillaframework.io/docs/patterns/tabs
- increase the base font-size by .8px - update base font-size to 0.8rem (12.8px)

## before
https://share.cleanshot.com/1GbXJYtd
## after
https://share.cleanshot.com/DjVjJWQz


The overall goal is for launchpad to use the sabe base font-size that vanilla framework uses - 1rem (16px). This merge proposal is a small step in this direction.
-- 
Your team Launchpad code reviewers is requested to review the proposed merge of ~petermakowski/launchpad:feat-vanilla-tabs-style into launchpad:master.

diff --git a/lib/canonical/launchpad/icing/css/base.scss b/lib/canonical/launchpad/icing/css/base.scss
index 086e64d..a28ec5d 100644
--- a/lib/canonical/launchpad/icing/css/base.scss
+++ b/lib/canonical/launchpad/icing/css/base.scss
@@ -4,8 +4,8 @@ body {
     /* line-height is the same as the sprite height. */
     font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma,
                  sans-serif;
-    font-size: 12px;
-    line-height: 18px;
+    font-size: 0.8rem;
+    line-height: 1.2rem;
     color: #333;
 
     &.private, &.public {
diff --git a/lib/canonical/launchpad/icing/css/layout.scss b/lib/canonical/launchpad/icing/css/layout.scss
index d01f79a..f0def2f 100644
--- a/lib/canonical/launchpad/icing/css/layout.scss
+++ b/lib/canonical/launchpad/icing/css/layout.scss
@@ -127,17 +127,38 @@
   }
 
   .watermark-apps-portlet ul.facetmenu {
-    margin-top: 12px;
-    margin-left: -0.5em;
+    display: flex;
+    padding: 0;
+    position: relative;
     white-space: nowrap;
+    width: 100%;
+    padding-left: 0;
+    margin-top: 2em;
+    margin-left: 0;
+    padding-bottom: 0.7em;
+
+    &::after {
+      background-color: #d9d9d9;
+      content: "";
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+      bottom: 2px;
+    }
 
     li {
       display: inline;
       list-style-type: none;
 
       a, span {
-        padding: 0.3em 0.5em;
-        margin-right: 0.4em;
+        position: relative;
+        gap: .5rem;
+        padding: .75rem 1.15rem;
+        transition-duration: .1s;
+        transition-property: background-color, border-color;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        margin-right: 0;
       }
 
       a {
@@ -146,17 +167,33 @@
           text-decoration: none;
         }
 
-        &:hover {
+        &:hover, &:focus {
           color: #000;
-          background-color: #f3f3f3;
+          background-color: #f2f2f2;
         }
       }
 
       &.active {
         a, span {
-          font-weight: bold;
-          color: #fff;
-          background-color: #747474;
+          background-color: #ebebeb;
+          color: #000;
+          font-weight: normal;
+          transition-duration: .1s;
+          transition-property: background-color, border-color;
+          transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+          z-index: 1;
+
+          &::before {
+            height: 0.1875rem;
+            width: auto;
+            left: 0;
+            right: 0;
+            bottom: -1px;
+            top: auto;
+            background-color: #111;
+            content: "";
+            position: absolute;
+          }
         }
       }