library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix hover/active states on desktop

Browse Source
This commit is contained in:
Jeremy Thomas 2017-07-02 23:39:08 +01:00
parent 09ca2efe62
commit 0abecdd777
4 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/blog-hero.html
View File

@ -21,7 +21,7 @@
</a> </a>
</div> </div>
<div class="column is-narrow"> <div class="column is-narrow">
<!-- {% include carbon.html %} --> {% include carbon.html %}
</div> </div>
</div> </div>
</div> </div>

4
docs/blog.html
View File

@ -20,8 +20,8 @@ route: blog
</h2> </h2>
</div> </div>
<div class="column is-8"> <div class="column is-8">
<div class="content is-medium"> <div class="content">
{{ post.introduction }} {{ post.content }}
</div> </div>
</div> </div>
</div> </div>

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

@ -4390,10 +4390,9 @@ a.nav-item.is-tab.is-active {
position: relative; position: relative;
} }
a.navbar-item:hover, a.navbar-item:hover, a.navbar-item.is-active,
a.navbar-item.is-active, .navbar-link:hover,
.navbar-item.has-dropdown:hover .navbar-link, .navbar-link.is-active {
.navbar-item.has-dropdown.is-active .navbar-link {
background-color: whitesmoke; background-color: whitesmoke;
color: #0a0a0a; color: #0a0a0a;
} }
@ -4499,10 +4498,6 @@ 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;
@ -4578,6 +4573,17 @@ a.navbar-item.is-active,
margin-left: -1rem; margin-left: -1rem;
margin-right: -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 { .pagination {

25
sass/components/navbar.sass
View File

@ -4,7 +4,7 @@ $navbar-height: 3.25rem !default
$navbar-item: $grey-dark !default $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: $red !default
$navbar-item-active-background: transparent !default $navbar-item-active-background: transparent !default
$navbar-dropdown-background: $white !default $navbar-dropdown-background: $white !default
@ -46,10 +46,10 @@ $navbar-divider-background: $border !default
padding: 0.5rem 1rem padding: 0.5rem 1rem
position: relative position: relative
a.navbar-item:hover, a.navbar-item,
a.navbar-item.is-active, .navbar-link
.navbar-item.has-dropdown:hover .navbar-link, &:hover,
.navbar-item.has-dropdown.is-active .navbar-link &.is-active
background-color: $navbar-item-hover-background background-color: $navbar-item-hover-background
color: $navbar-item-hover color: $navbar-item-hover
@ -139,9 +139,6 @@ a.navbar-item.is-active,
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)
@ -197,3 +194,15 @@ a.navbar-item.is-active,
.container > .navbar .container > .navbar
margin-left: -1rem margin-left: -1rem
margin-right: -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