]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
projects / thirdparty / bulma.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 45a31d7)
Fix hover/active states
authorJeremy Thomas <bbxdesign@gmail.com>
Sun, 2 Jul 2017 22:20:04 +0000 (23:20 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Sun, 2 Jul 2017 22:20:04 +0000 (23:20 +0100)
docs/_includes/navbar.html patch | blob | blame | history
docs/_layouts/default.html patch | blob | blame | history
docs/_posts/2017-07-02-new-navbar-component.md patch | blob | blame | history
docs/css/bulma-docs.css patch | blob | blame | history
sass/components/navbar.sass patch | blob | blame | history

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 19eebb42c9dd7ff6d031d5cfa826194ea5195c98..db13302c592bc853fc4022254f42bb460dbad8af 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -66,7 +66,7 @@
             <a class="navbar-item" href="{{ post.url }}">
               <div class="navbar-content">
                 <p>
-                  <small>{{ post.date | date_to_string }}</small>
+                  <small class="has-text-info">{{ post.date | date_to_string }}</small>
                 </p>
                 <p>{{ post.title }}</p>
               </div>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 39dbb71b4fa3df538f9b5a738cc82aae3ea2aaba..0521f28a3a7d9e84187dd7acaf57b83dc6a5dd05 100644 (file)
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -3,5 +3,6 @@
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {{ content }}
+    {% include footer.html %}
   </body>
 </html>
diff --git a/docs/_posts/2017-07-02-new-navbar-component.md b/docs/_posts/2017-07-02-new-navbar-component.md
index fea4e2a07fb40c2f4c845faf2cc4a277ec33d3b3..f2916e34a47de39dfacf713f04bfaea593b74587 100644 (file)
--- a/docs/_posts/2017-07-02-new-navbar-component.md
+++ b/docs/_posts/2017-07-02-new-navbar-component.md
@@ -1,6 +1,5 @@
 ---
 layout: post
 title: "RIP nav; long live the navbar!"
-published: true
-introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
+published: false
 ---
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index b150392f4c370495081043951ac760d3949e9586..c6aeec6419b3f3183acd75109050bbe85492bf7f 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4391,13 +4391,9 @@ a.nav-item.is-tab.is-active {
 }
 
 a.navbar-item:hover,
-.navbar-link:hover {
-  background-color: whitesmoke;
-  color: #0a0a0a;
-}
-
 a.navbar-item.is-active,
-.navbar-link.is-active {
+.navbar-item.has-dropdown:hover .navbar-link,
+.navbar-item.has-dropdown.is-active .navbar-link {
   background-color: whitesmoke;
   color: #0a0a0a;
 }
@@ -4435,16 +4431,6 @@ a.navbar-item.is-active,
   padding-right: 1.5rem;
 }
 
-.navbar-dropdown a.navbar-item:hover {
-  background-color: whitesmoke;
-  color: #0a0a0a;
-}
-
-.navbar-dropdown a.navbar-item.is-active {
-  background-color: whitesmoke;
-  color: #00d1b2;
-}
-
 .navbar-divider {
   background-color: #dbdbdb;
   border: none;
@@ -4483,9 +4469,17 @@ a.navbar-item.is-active,
   .navbar.is-transparent .navbar-link.is-active {
     background-color: transparent;
   }
-  .navbar.is-transparent .navbar-item.is-active .navbar-link, .navbar.is-transparent .navbar-item.is-hoverable:hover .navbar-link {
+  .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
     background-color: transparent;
   }
+  .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
+    background-color: whitesmoke;
+    color: #0a0a0a;
+  }
+  .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
+    background-color: whitesmoke;
+    color: #00d1b2;
+  }
   .navbar-burger {
     display: none;
   }
@@ -4497,10 +4491,6 @@ a.navbar-item.is-active,
   .navbar-item.has-dropdown {
     align-items: stretch;
   }
-  .navbar-item.is-active .navbar-link, .navbar-item.is-hoverable:hover .navbar-link {
-    background-color: whitesmoke;
-    color: #0a0a0a;
-  }
   .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
     display: block;
   }
@@ -4509,6 +4499,10 @@ 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;
@@ -4557,6 +4551,14 @@ a.navbar-item.is-active,
   .navbar-dropdown a.navbar-item {
     padding-right: 3rem;
   }
+  .navbar-dropdown a.navbar-item:hover {
+    background-color: whitesmoke;
+    color: #0a0a0a;
+  }
+  .navbar-dropdown a.navbar-item.is-active {
+    background-color: whitesmoke;
+    color: #00d1b2;
+  }
   .navbar-dropdown.is-boxed {
     border-radius: 5px;
     border-top: none;
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 31ee0200d918e35b033747e5708d044f13250424..356ff09fbd944ace3ceeb38d682aaa22da757b02 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -5,7 +5,7 @@ $navbar-item: $grey-dark !default
 $navbar-item-hover: $black !default
 $navbar-item-hover-background: $background !default
 $navbar-item-active: $black !default
-$navbar-item-active-background: $background !default
+$navbar-item-active-background: transparent !default
 
 $navbar-dropdown-background: $white !default
 $navbar-dropdown-border: $border !default
@@ -46,14 +46,12 @@ $navbar-divider-background: $border !default
   padding: 0.5rem 1rem
   position: relative
 
-a.navbar-item,
-.navbar-link
-  &:hover
-    background-color: $navbar-item-hover-background
-    color: $navbar-item-hover
-  &.is-active
-    background-color: $navbar-item-active-background
-    color: $navbar-item-active
+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
 
 .navbar-item
   flex-grow: 0
@@ -77,13 +75,6 @@ a.navbar-item,
   .navbar-item
     padding-left: 1.5rem
     padding-right: 1.5rem
-  a.navbar-item
-    &:hover
-      background-color: $navbar-dropdown-item-hover-background
-      color: $navbar-dropdown-item-hover
-    &.is-active
-      background-color: $navbar-dropdown-item-active-background
-      color: $navbar-dropdown-item-active
 
 .navbar-divider
   background-color: $navbar-divider-background
@@ -118,11 +109,19 @@ a.navbar-item,
         &:hover,
         &.is-active
           background-color: transparent
-      .navbar-item
+      .navbar-item.has-dropdown
         &.is-active,
         &.is-hoverable:hover
           .navbar-link
             background-color: transparent
+      .navbar-dropdown
+        a.navbar-item
+          &:hover
+            background-color: $navbar-dropdown-item-hover-background
+            color: $navbar-dropdown-item-hover
+          &.is-active
+            background-color: $navbar-dropdown-item-active-background
+            color: $navbar-dropdown-item-active
   .navbar-burger
     display: none
   .navbar-item,
@@ -134,15 +133,15 @@ a.navbar-item,
       align-items: stretch
     &.is-active,
     &.is-hoverable:hover
-      .navbar-link
-        background-color: $navbar-item-active-background
-        color: $navbar-item-active
       .navbar-dropdown
         display: block
         &.is-boxed
           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)
@@ -176,6 +175,12 @@ a.navbar-item,
       white-space: nowrap
     a.navbar-item
       padding-right: 3rem
+      &:hover
+        background-color: $navbar-dropdown-item-hover-background
+        color: $navbar-dropdown-item-hover
+      &.is-active
+        background-color: $navbar-dropdown-item-active-background
+        color: $navbar-dropdown-item-active
     &.is-boxed
       border-radius: $navbar-dropdown-radius
       border-top: none
Mirror of https://github.com/jgthms/bulma.git