Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 04:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix hover/active states

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-02 23:20:04 +01:00
parent 45a31d7b86
commit 09ca2efe62
5 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/navbar.html
View File

@@ -66,7 +66,7 @@
<a class="navbar-item" href="{{ post.url }}"> <a class="navbar-item" href="{{ post.url }}">
<div class="navbar-content"> <div class="navbar-content">
<p> <p>
<small>{{ post.date | date_to_string }}</small> <small class="has-text-info">{{ post.date | date_to_string }}</small>
</p> </p>
<p>{{ post.title }}</p> <p>{{ post.title }}</p>
</div> </div>

1
docs/_layouts/default.html
View File

@@ -3,5 +3,6 @@
{% include head.html %} {% include head.html %}
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}"> <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
{{ content }} {{ content }}
{% include footer.html %}
</body> </body>
</html> </html>

3
docs/_posts/2017-07-02-new-navbar-component.md
View File

@@ -1,6 +1,5 @@
--- ---
layout: post layout: post
title: "RIP nav; long live the navbar!" title: "RIP nav; long live the navbar!"
published: true published: false
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>"
--- ---

44
docs/css/bulma-docs.css
View File

@@ -4391,13 +4391,9 @@ a.nav-item.is-tab.is-active {
} }
a.navbar-item:hover, a.navbar-item:hover,
.navbar-link:hover {
background-color: whitesmoke;
color: #0a0a0a;
}
a.navbar-item.is-active, 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; background-color: whitesmoke;
color: #0a0a0a; color: #0a0a0a;
} }
@@ -4435,16 +4431,6 @@ a.navbar-item.is-active,
padding-right: 1.5rem; 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 { .navbar-divider {
background-color: #dbdbdb; background-color: #dbdbdb;
border: none; border: none;
@@ -4483,9 +4469,17 @@ a.navbar-item.is-active,
.navbar.is-transparent .navbar-link.is-active { .navbar.is-transparent .navbar-link.is-active {
background-color: transparent; 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; 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 { .navbar-burger {
display: none; display: none;
} }
@@ -4497,10 +4491,6 @@ a.navbar-item.is-active,
.navbar-item.has-dropdown { .navbar-item.has-dropdown {
align-items: stretch; 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 { .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
display: block; display: block;
} }
@@ -4509,6 +4499,10 @@ a.navbar-item.is-active,
pointer-events: auto; pointer-events: auto;
transform: translateY(0); transform: translateY(0);
} }
a.navbar-item.is-active {
background-color: transparent;
color: #0a0a0a;
}
.navbar-link::after { .navbar-link::after {
border: 1px solid #00d1b2; border: 1px solid #00d1b2;
border-right: 0; border-right: 0;
@@ -4557,6 +4551,14 @@ a.navbar-item.is-active,
.navbar-dropdown a.navbar-item { .navbar-dropdown a.navbar-item {
padding-right: 3rem; 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 { .navbar-dropdown.is-boxed {
border-radius: 5px; border-radius: 5px;
border-top: none; border-top: none;

45
sass/components/navbar.sass
View File

@@ -5,7 +5,7 @@ $navbar-item: $grey-dark !default
$navbar-item-hover: $black !default $navbar-item-hover: $black !default
$navbar-item-hover-background: $background !default $navbar-item-hover-background: $background !default
$navbar-item-active: $black !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-background: $white !default
$navbar-dropdown-border: $border !default $navbar-dropdown-border: $border !default
@@ -46,14 +46,12 @@ $navbar-divider-background: $border !default
padding: 0.5rem 1rem padding: 0.5rem 1rem
position: relative position: relative
a.navbar-item, a.navbar-item:hover,
.navbar-link a.navbar-item.is-active,
&:hover .navbar-item.has-dropdown:hover .navbar-link,
background-color: $navbar-item-hover-background .navbar-item.has-dropdown.is-active .navbar-link
color: $navbar-item-hover background-color: $navbar-item-hover-background
&.is-active color: $navbar-item-hover
background-color: $navbar-item-active-background
color: $navbar-item-active
.navbar-item .navbar-item
flex-grow: 0 flex-grow: 0
@@ -77,13 +75,6 @@ a.navbar-item,
.navbar-item .navbar-item
padding-left: 1.5rem padding-left: 1.5rem
padding-right: 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 .navbar-divider
background-color: $navbar-divider-background background-color: $navbar-divider-background
@@ -118,11 +109,19 @@ a.navbar-item,
&:hover, &:hover,
&.is-active &.is-active
background-color: transparent background-color: transparent
.navbar-item .navbar-item.has-dropdown
&.is-active, &.is-active,
&.is-hoverable:hover &.is-hoverable:hover
.navbar-link .navbar-link
background-color: transparent 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 .navbar-burger
display: none display: none
.navbar-item, .navbar-item,
@@ -134,15 +133,15 @@ a.navbar-item,
align-items: stretch align-items: stretch
&.is-active, &.is-active,
&.is-hoverable:hover &.is-hoverable:hover
.navbar-link
background-color: $navbar-item-active-background
color: $navbar-item-active
.navbar-dropdown .navbar-dropdown
display: block display: block
&.is-boxed &.is-boxed
opacity: 1 opacity: 1
pointer-events: auto pointer-events: auto
transform: translateY(0) transform: translateY(0)
a.navbar-item.is-active
background-color: $navbar-item-active-background
color: $navbar-item-active
.navbar-link .navbar-link
&::after &::after
+arrow($navbar-dropdown-arrow) +arrow($navbar-dropdown-arrow)
@@ -176,6 +175,12 @@ a.navbar-item,
white-space: nowrap white-space: nowrap
a.navbar-item a.navbar-item
padding-right: 3rem 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 &.is-boxed
border-radius: $navbar-dropdown-radius border-radius: $navbar-dropdown-radius
border-top: none border-top: none