Fix hover/active states on desktop

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
index 8022ac82400534896d58b010bbd1fe2d8ceead1e..d611cc657b7605a2719e10bac08002776df4fca2 100644 (file)
--- a/docs/_includes/blog-hero.html
+++ b/docs/_includes/blog-hero.html
@@ -21,7 +21,7 @@
           </a>
         </div>
         <div class="column is-narrow">
-          <!-- {% include carbon.html %} -->
+          {% include carbon.html %}
         </div>
       </div>
     </div>

diff --git a/docs/blog.html b/docs/blog.html
index af64c356bbb25b95e6e0353cbf5374f88c94ebfe..0227c8f4460137a4d8622f60d7efef63bb0cd45a 100644 (file)
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -20,8 +20,8 @@ route: blog
           </h2>
         </div>
         <div class="column is-8">
-          <div class="content is-medium">
-            {{ post.introduction }}
+          <div class="content">
+            {{ post.content }}
           </div>
         </div>
       </div>

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index c6aeec6419b3f3183acd75109050bbe85492bf7f..7cd42f1f55ce91db942201452fcaabb4ba2717de 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4390,10 +4390,9 @@ a.nav-item.is-tab.is-active {
   position: relative;
 }
 
-a.navbar-item:hover,
-a.navbar-item.is-active,
-.navbar-item.has-dropdown:hover .navbar-link,
-.navbar-item.has-dropdown.is-active .navbar-link {
+a.navbar-item:hover, a.navbar-item.is-active,
+.navbar-link:hover,
+.navbar-link.is-active {
   background-color: whitesmoke;
   color: #0a0a0a;
 }
@@ -4499,10 +4498,6 @@ a.navbar-item.is-active,
     pointer-events: auto;
     transform: translateY(0);
   }
-  a.navbar-item.is-active {
-    background-color: transparent;
-    color: #0a0a0a;
-  }
   .navbar-link::after {
     border: 1px solid #00d1b2;
     border-right: 0;
@@ -4578,6 +4573,17 @@ a.navbar-item.is-active,
     margin-left: -1rem;
     margin-right: -1rem;
   }
+  a.navbar-item.is-active,
+  .navbar-link.is-active {
+    color: #ff3860;
+  }
+  a.navbar-item.is-active:not(:hover),
+  .navbar-link.is-active:not(:hover) {
+    background-color: transparent;
+  }
+  .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {
+    background-color: whitesmoke;
+  }
 }
 
 .pagination {

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 356ff09fbd944ace3ceeb38d682aaa22da757b02..3c146cde5222ee325d16259f21ccf23c5b7f0c80 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -4,7 +4,7 @@ $navbar-height: 3.25rem !default
 $navbar-item: $grey-dark !default
 $navbar-item-hover: $black !default
 $navbar-item-hover-background: $background !default
-$navbar-item-active: $black !default
+$navbar-item-active: $red !default
 $navbar-item-active-background: transparent !default
 
 $navbar-dropdown-background: $white !default
@@ -46,12 +46,12 @@ $navbar-divider-background: $border !default
   padding: 0.5rem 1rem
   position: relative
 
-a.navbar-item:hover,
-a.navbar-item.is-active,
-.navbar-item.has-dropdown:hover .navbar-link,
-.navbar-item.has-dropdown.is-active .navbar-link
-  background-color: $navbar-item-hover-background
-  color: $navbar-item-hover
+a.navbar-item,
+.navbar-link
+  &:hover,
+  &.is-active
+    background-color: $navbar-item-hover-background
+    color: $navbar-item-hover
 
 .navbar-item
   flex-grow: 0
@@ -139,9 +139,6 @@ a.navbar-item.is-active,
           opacity: 1
           pointer-events: auto
           transform: translateY(0)
-  a.navbar-item.is-active
-    background-color: $navbar-item-active-background
-    color: $navbar-item-active
   .navbar-link
     &::after
       +arrow($navbar-dropdown-arrow)
@@ -197,3 +194,15 @@ a.navbar-item.is-active,
   .container > .navbar
     margin-left: -1rem
     margin-right: -1rem
+  // Hover/Active states
+  a.navbar-item,
+  .navbar-link
+    &.is-active
+      color: $navbar-item-active
+    &.is-active:not(:hover)
+      background-color: $navbar-item-active-background
+  .navbar-item.has-dropdown
+    &:hover,
+    &.is-active
+      .navbar-link
+        background-color: $navbar-item-hover-background