Merge pull request #92 from sippy-platform/0.9

Mellow CSS 0.9
sippy-platform · Jun 30, 2022 · b140cb6 · b140cb6
2 parents 5f48231 + c083cf2
commit b140cb6
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 124 deletions.
diff --git a/hugo/content/components/pivot.md b/hugo/content/components/pivot.md
@@ -37,30 +37,6 @@ Additionally, you can forgo the unodered list entirely and just use anchors dire
 
 Note: the basic style only exists to give you an easy jumping-off point to make variant styles. Unless it functions solely as a link list that doesn't need to indicate active state you shouldn't use it. It relies solely on color to indicate states other than focus, which isn't recommended.
 
-## Variants
-Note that we're using the anchor-based navigation here for demo purposes, but we recommend you use the unordered list-based version.
-
-### Underline
-{{<example>}}
-<nav class="pivot pivot-underline" aria-label="Navigation">
-  <a class="pivot-link active" href="#" aria-current="page">Active</a>
-  <a class="pivot-link" href="#">Link</a>
-  <a class="pivot-link" href="#">Link</a>
-  <a class="pivot-link disabled">Disabled</a>
-</nav>
-{{</example>}}
-
-
-### Pills
-{{<example>}}
-<nav class="pivot pivot-pills" aria-label="Navigation">
-  <a class="pivot-link active" href="#" aria-current="page">Active</a>
-  <a class="pivot-link" href="#">Link</a>
-  <a class="pivot-link" href="#">Link</a>
-  <a class="pivot-link disabled">Disabled</a>
-</nav>
-{{</example>}}
-
 ## Color
 As various other components, the pivot control supports the color classes to change its colors.
 
@@ -72,13 +48,13 @@ As various other components, the pivot control supports the color classes to cha
   <a class="pivot-link" href="#">Link</a>
   <a class="pivot-link disabled">Disabled</a>
 </nav>
-<nav class="pivot pivot-underline green mb-3" aria-label="Navigation">
+<nav class="pivot pivot green mb-3" aria-label="Navigation">
   <a class="pivot-link active" href="#" aria-current="page">Active</a>
   <a class="pivot-link" href="#">Link</a>
   <a class="pivot-link" href="#">Link</a>
   <a class="pivot-link disabled">Disabled</a>
 </nav>
-<nav class="pivot pivot-pills brown" aria-label="Navigation">
+<nav class="pivot pivot brown" aria-label="Navigation">
   <a class="pivot-link active" href="#" aria-current="page">Active</a>
   <a class="pivot-link" href="#">Link</a>
   <a class="pivot-link" href="#">Link</a>
@@ -96,13 +72,13 @@ You can also alter the color of only 1 pivot item.
   <a class="pivot-link rose" href="#">Link</a>
   <a class="pivot-link disabled">Disabled</a>
 </nav>
-<nav class="pivot pivot-underline green mb-3" aria-label="Navigation">
+<nav class="pivot pivot green mb-3" aria-label="Navigation">
   <a class="pivot-link active" href="#" aria-current="page">Active</a>
   <a class="pivot-link" href="#">Link</a>
   <a class="pivot-link accent" href="#">Link</a>
   <a class="pivot-link disabled">Disabled</a>
 </nav>
-<nav class="pivot pivot-pills brown" aria-label="Navigation">
+<nav class="pivot pivot brown" aria-label="Navigation">
   <a class="pivot-link active" href="#" aria-current="page">Active</a>
   <a class="pivot-link" href="#">Link</a>
   <a class="pivot-link rose" href="#">Link</a>
@@ -112,7 +88,7 @@ You can also alter the color of only 1 pivot item.
 
 ## Tabs
 {{<example>}}
-<nav class="pivot pivot-underline" id="myTab" role="tablist">
+<nav class="pivot pivot" id="myTab" role="tablist">
   <button class="pivot-link active" id="home-tab" data-mellow-toggle="tab" data-mellow-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   <button class="pivot-link" id="profile-tab" data-mellow-toggle="tab" data-mellow-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   <button class="pivot-link" id="contact-tab" data-mellow-toggle="tab" data-mellow-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sippy-platform/mellow-css",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "The Mellow Design System.",
   "main": "dist/js/mellow.js",
   "style": "dist/css/mellow.css",
@@ -68,7 +68,7 @@
     "nodemon": "2.0.18",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.14",
-    "postcss-cli": "9.1.0",
+    "postcss-cli": "10.0.0",
     "rimraf": "3.0.2",
     "sass": "^1.52.3",
     "stylelint": "14.9.1",

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -27,8 +27,8 @@
 
   // Sizes
   &.btn-sm {
-    padding: $spacer * .25 $spacer * .625;
-    font-size: .75rem;
+    padding: $spacer * .25 $spacer * .5;
+    font-size: .875rem;
   }
 
   &.btn-lg {

diff --git a/scss/_pivot.scss b/scss/_pivot.scss
@@ -9,21 +9,27 @@
 
 .pivot-link {
   display: block;
-  padding: $spacer * .5 $spacer * .75;
+  padding: $spacer * .3125 $spacer * .75;
   font-size: 1rem;
   font-weight: 500;
   text-decoration: none;
+  line-height: 1.5;
   border-radius: $border-radius;
   background: none;
-  color: var(--color-600, var(--accent-600));
+  color: $body-text;
   border: none;
+  transition: background-color .2s ease-in-out;
 
   &:hover,
   &:focus {
-    color: var(--color-600, var(--accent-600));
+    color: $body-text;
     text-decoration: none;
   }
 
+  &:hover {
+    background-color: var(--color-50a, var(--accent-50a));
+  }
+
   &:focus {
     box-shadow: 0 0 0 3px var(--color-400a, var(--accent-400a));
     outline: none;
@@ -34,43 +40,19 @@
     pointer-events: none;
     cursor: default;
   }
-}
-
-.pivot-pills {
-  .pivot-link {
-    &:hover {
-      background-color: var(--color-400a, var(--accent-400a));
-    }
-  }
 
-  .pivot-link.active,
-  .show > .pivot-link {
-    color: #fff;
-    background-color: var(--color-600, var(--accent-600));
-  }
-}
-
-.pivot-underline {
-  .pivot-link {
-    &.active,
-    &:hover,
-    &:focus {
-      position: relative;
-
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: calc(50% - .75rem);
-        width: 1.5rem;
-        height: 3px;
-        background-color: var(--color-600, var(--accent-600));
-        border-radius: 4px;
-      }
-    }
+  &.active {
+    position: relative;
 
-    &:focus {
-      box-shadow: 0 0 0 3px var(--color-400a, var(--accent-400a));
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -1px;
+      left: calc(50% - .75rem);
+      width: 1.5rem;
+      height: 2px;
+      background-color: var(--color-600, var(--accent-600));
+      border-radius: 4px;
     }
   }
 }