Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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>