library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix nav

Browse Source
This commit is contained in:
Jeremy Thomas 2016-10-30 20:24:23 +00:00
parent b016326ac8
commit 9d48eff270
6 changed files with 176 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -19,6 +19,8 @@
* Fix `.level-item` height
* Fix `.menu` spacing
* Deprecate `.menu-nav`
* Add invert outlined buttons
* Fix `.nav`
## 0.2.2

2
docs/_includes/header.html
View File

@ -66,7 +66,7 @@
</span>
{% else %}
<span class="nav-item">
<a class="button is-light is-outlined"
<a class="button is-primary is-inverted is-outlined"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/"

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

@ -745,7 +745,6 @@ a.box:active {
.button.is-white.is-outlined {
background-color: transparent;
border-color: white;
border-width: 1px;
color: white;
}
@ -755,6 +754,17 @@ a.box:active {
color: #0a0a0a;
}
.button.is-white.is-inverted.is-outlined {
background-color: transparent;
border-color: #0a0a0a;
color: #0a0a0a;
}
.button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined:focus {
background-color: #0a0a0a;
color: white;
}
.button.is-black {
background-color: #0a0a0a;
border-color: transparent;
@ -796,7 +806,6 @@ a.box:active {
.button.is-black.is-outlined {
background-color: transparent;
border-color: #0a0a0a;
border-width: 1px;
color: #0a0a0a;
}
@ -806,6 +815,17 @@ a.box:active {
color: white;
}
.button.is-black.is-inverted.is-outlined {
background-color: transparent;
border-color: white;
color: white;
}
.button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined:focus {
background-color: white;
color: #0a0a0a;
}
.button.is-light {
background-color: whitesmoke;
border-color: transparent;
@ -847,7 +867,6 @@ a.box:active {
.button.is-light.is-outlined {
background-color: transparent;
border-color: whitesmoke;
border-width: 1px;
color: whitesmoke;
}
@ -857,6 +876,17 @@ a.box:active {
color: #363636;
}
.button.is-light.is-inverted.is-outlined {
background-color: transparent;
border-color: #363636;
color: #363636;
}
.button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined:focus {
background-color: #363636;
color: whitesmoke;
}
.button.is-dark {
background-color: #363636;
border-color: transparent;
@ -898,7 +928,6 @@ a.box:active {
.button.is-dark.is-outlined {
background-color: transparent;
border-color: #363636;
border-width: 1px;
color: #363636;
}
@ -908,6 +937,17 @@ a.box:active {
color: whitesmoke;
}
.button.is-dark.is-inverted.is-outlined {
background-color: transparent;
border-color: whitesmoke;
color: whitesmoke;
}
.button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined:focus {
background-color: whitesmoke;
color: #363636;
}
.button.is-primary {
background-color: #00d1b2;
border-color: transparent;
@ -949,7 +989,6 @@ a.box:active {
.button.is-primary.is-outlined {
background-color: transparent;
border-color: #00d1b2;
border-width: 1px;
color: #00d1b2;
}
@ -959,6 +998,17 @@ a.box:active {
color: #fff;
}
.button.is-primary.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined:focus {
background-color: #fff;
color: #00d1b2;
}
.button.is-info {
background-color: #3273dc;
border-color: transparent;
@ -1000,7 +1050,6 @@ a.box:active {
.button.is-info.is-outlined {
background-color: transparent;
border-color: #3273dc;
border-width: 1px;
color: #3273dc;
}
@ -1010,6 +1059,17 @@ a.box:active {
color: #fff;
}
.button.is-info.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined:focus {
background-color: #fff;
color: #3273dc;
}
.button.is-success {
background-color: #23d160;
border-color: transparent;
@ -1051,7 +1111,6 @@ a.box:active {
.button.is-success.is-outlined {
background-color: transparent;
border-color: #23d160;
border-width: 1px;
color: #23d160;
}
@ -1061,6 +1120,17 @@ a.box:active {
color: #fff;
}
.button.is-success.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined:focus {
background-color: #fff;
color: #23d160;
}
.button.is-warning {
background-color: #ffdd57;
border-color: transparent;
@ -1102,7 +1172,6 @@ a.box:active {
.button.is-warning.is-outlined {
background-color: transparent;
border-color: #ffdd57;
border-width: 1px;
color: #ffdd57;
}
@ -1112,6 +1181,17 @@ a.box:active {
color: rgba(0, 0, 0, 0.7);
}
.button.is-warning.is-inverted.is-outlined {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.7);
color: rgba(0, 0, 0, 0.7);
}
.button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined:focus {
background-color: rgba(0, 0, 0, 0.7);
color: #ffdd57;
}
.button.is-danger {
background-color: #ff3860;
border-color: transparent;
@ -1153,7 +1233,6 @@ a.box:active {
.button.is-danger.is-outlined {
background-color: transparent;
border-color: #ff3860;
border-width: 1px;
color: #ff3860;
}
@ -1163,6 +1242,17 @@ a.box:active {
color: #fff;
}
.button.is-danger.is-inverted.is-outlined {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined:focus {
background-color: #fff;
color: #ff3860;
}
.button.is-small {
border-radius: 2px;
font-size: 0.75rem;
@ -3770,6 +3860,7 @@ a.box:active {
display: flex;
flex-grow: 0;
flex-shrink: 0;
font-size: 1rem;
justify-content: center;
padding: 0.5rem 0.75rem;
}
@ -3787,12 +3878,12 @@ a.box:active {
margin-left: 0.75rem;
}
.nav-item .tag:first-child {
margin-right: 0.25rem;
.nav-item .tag:first-child:not(:last-child) {
margin-right: 0.5rem;
}
.nav-item .tag:last-child {
margin-left: 0.25rem;
.nav-item .tag:last-child:not(:first-child) {
margin-left: 0.5rem;
}
@media screen and (max-width: 768px) {
@ -3820,21 +3911,23 @@ a.nav-item.is-active {
a.nav-item.is-tab {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
padding-left: 12px;
padding-right: 12px;
padding-bottom: calc(0.5rem - 1px);
padding-left: 1rem;
padding-right: 1rem;
padding-top: calc(0.5rem - 1px);
}
.nav-item a.is-tab:hover,
a.nav-item.is-tab:hover {
border-bottom: 1px solid #00d1b2;
border-top: 1px solid transparent;
border-bottom-color: #00d1b2;
border-top-color: transparent;
}
.nav-item a.is-tab.is-active,
a.nav-item.is-tab.is-active {
border-bottom: 3px solid #00d1b2;
border-top: 3px solid transparent;
color: #00d1b2;
padding-bottom: calc(0.5rem - 3px);
}
@media screen and (max-width: 768px) {
@ -3862,12 +3955,16 @@ a.nav-item.is-tab.is-active {
}
}
.nav-left {
.nav-left,
.nav-right {
align-items: stretch;
display: flex;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
}
.nav-left {
display: flex;
justify-content: flex-start;
overflow: hidden;
overflow-x: auto;
@ -3877,19 +3974,20 @@ a.nav-item.is-tab.is-active {
.nav-center {
align-items: stretch;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.nav-right {
justify-content: flex-end;
}
@media screen and (min-width: 769px) {
.nav-right {
align-items: stretch;
display: flex;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
justify-content: flex-end;
}
}

21
docs/documentation/elements/button.html
View File

@ -103,6 +103,27 @@ doc-subtab: button
<div class="column">
{% highlight html %}
{{button_inverted_example}}
{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
{% capture button_inverted_outlined_example %}
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
{% endcapture %}
<div class="columns">
<div class="column">
<div class="notification is-primary">
{{button_inverted_outlined_example}}
</div>
</div>
<div class="column">
{% highlight html %}
{{button_inverted_outlined_example}}
{% endhighlight %}
</div>
</div>

37
sass/components/nav.sass
View File

@ -13,6 +13,7 @@ $nav-height: 3rem !default
display: flex
flex-grow: 0
flex-shrink: 0
font-size: $size-normal
justify-content: center
padding: 0.5rem 0.75rem
a
@ -23,10 +24,10 @@ $nav-height: 3rem !default
.button + .button
margin-left: 0.75rem
.tag
&:first-child
margin-right: 0.25rem
&:last-child
margin-left: 0.25rem
&:first-child:not(:last-child)
margin-right: 0.5rem
&:last-child:not(:first-child)
margin-left: 0.5rem
// Responsiveness
+mobile
justify-content: flex-start
@ -42,15 +43,17 @@ a.nav-item
&.is-tab
border-bottom: 1px solid transparent
border-top: 1px solid transparent
padding-left: 12px
padding-right: 12px
padding-bottom: calc(0.5rem - 1px)
padding-left: 1rem
padding-right: 1rem
padding-top: calc(0.5rem - 1px)
&:hover
border-bottom: 1px solid $link
border-top: 1px solid transparent
border-bottom-color: $link
border-top-color: transparent
&.is-active
border-bottom: 3px solid $link
border-top: 3px solid transparent
color: $link
padding-bottom: calc(0.5rem - 3px)
// Containers
@ -72,12 +75,16 @@ a.nav-item
+tablet-only
padding-right: 1.5rem
.nav-left
.nav-left,
.nav-right
align-items: stretch
display: flex
flex-basis: 0
flex-grow: 1
flex-shrink: 0
.nav-left
display: flex
justify-content: flex-start
overflow: hidden
overflow-x: auto
@ -86,19 +93,17 @@ a.nav-item
.nav-center
align-items: stretch
display: flex
flex-grow: 0
flex-shrink: 0
justify-content: center
margin-left: auto
margin-right: auto
.nav-right
justify-content: flex-end
// Responsiveness
+tablet
align-items: stretch
display: flex
flex-basis: 0
flex-grow: 1
flex-shrink: 0
justify-content: flex-end
// Main container

9
sass/elements/button.sass
View File

@ -161,13 +161,20 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
&.is-outlined
background-color: transparent
border-color: $color
border-width: 1px
color: $color
&:hover,
&:focus
background-color: $color
border-color: $color
color: $color-invert
&.is-inverted.is-outlined
background-color: transparent
border-color: $color-invert
color: $color-invert
&:hover,
&:focus
background-color: $color-invert
color: $color
// Sizes
&.is-small
+button-small