We use cookies to ensure you get the best experience on our website
Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
0ct0pu5
/
bulma
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

Fix hover/active states

Jeremy Thomas 8 năm trước cách đây
mục cha
45a31d7b86
commit
09ca2efe62
5 tập tin đã thay đổi với 51 bổ sung và 44 xóa
Split View Hiển thị tình trạng sai khác
  1. 1 1
      docs/_includes/navbar.html
  2. 1 0
      docs/_layouts/default.html
  3. 1 2
      docs/_posts/2017-07-02-new-navbar-component.md
  4. 23 21
      docs/css/bulma-docs.css
  5. 25 20
      sass/components/navbar.sass

+ 1 - 1
docs/_includes/navbar.html
Xem Tập Tin 

@@ -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>

+ 1 - 0
docs/_layouts/default.html
Xem Tập Tin 

@@ -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>

+ 1 - 2
docs/_posts/2017-07-02-new-navbar-component.md
Xem Tập Tin 

@@ -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
 
 ---

+ 23 - 21
docs/css/bulma-docs.css
Xem Tập Tin 

@@ -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;

+ 25 - 20
sass/components/navbar.sass
Xem Tập Tin 

@@ -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

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5