mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix button icon spacing
This commit is contained in:
Jeremy Thomas
parent
0e5c14ac26
commit
b016326ac8
@ -2,11 +2,14 @@
|
||||
|
||||
## 0.3.0
|
||||
|
||||
* Use `rem` and `em`
|
||||
* Use `rem` and `em` (!)
|
||||
* Fix Font Awesome icons in buttons (!)
|
||||
* Fix message colors (!)
|
||||
* Use `{% capture %}` to ensure same display as code snippet (!)
|
||||
|
||||
* Move variables to their own file
|
||||
* Remove small tag
|
||||
* Add `:focus` state
|
||||
* Fix Font Awesome icons in buttons
|
||||
* Fix table
|
||||
* Remove table `.is-icon` and `.is-link`
|
||||
* Add `.content` table
|
||||
@ -16,7 +19,6 @@
|
||||
* Fix `.level-item` height
|
||||
* Fix `.menu` spacing
|
||||
* Deprecate `.menu-nav`
|
||||
* Fix message colors (!)
|
||||
|
||||
## 0.2.2
|
||||
|
||||
|
||||
@ -615,44 +615,64 @@ a.box:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.button .icon:first-child {
|
||||
margin-left: calc(-1px - 0.5rem);
|
||||
}
|
||||
|
||||
.button .icon:last-child {
|
||||
margin-right: calc(-1px - 0.5rem);
|
||||
}
|
||||
|
||||
.button .icon.is-small:first-child {
|
||||
margin-left: calc(-1px - 0.25rem);
|
||||
}
|
||||
|
||||
.button .icon.is-small:last-child {
|
||||
margin-right: calc(-1px - 0.25rem);
|
||||
}
|
||||
|
||||
.button .icon.is-medium:first-child {
|
||||
margin-left: calc(-1px - 0.75rem);
|
||||
}
|
||||
|
||||
.button .icon.is-medium:last-child {
|
||||
margin-right: calc(-1px - 0.75rem);
|
||||
}
|
||||
|
||||
.button .icon.is-large:first-child {
|
||||
margin-left: calc(-1px - 1.25rem);
|
||||
}
|
||||
|
||||
.button .icon.is-large:last-child {
|
||||
margin-right: calc(-1px - 1.25rem);
|
||||
}
|
||||
|
||||
.button .icon:first-child:not(:last-child) {
|
||||
margin-right: 0.25rem !important;
|
||||
margin-left: -0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.button .icon:last-child:not(:first-child) {
|
||||
margin-left: 0.25rem !important;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
|
||||
.button .icon:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.5rem);
|
||||
margin-right: calc(-1px - 0.5rem);
|
||||
}
|
||||
|
||||
.button .icon.is-small:first-child:not(:last-child) {
|
||||
margin-left: -0.125rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.button .icon.is-small:last-child:not(:first-child) {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: -0.125rem;
|
||||
}
|
||||
|
||||
.button .icon.is-small:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.25rem);
|
||||
margin-right: calc(-1px - 0.25rem);
|
||||
}
|
||||
|
||||
.button .icon.is-medium:first-child:not(:last-child) {
|
||||
margin-left: -0.375rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.button .icon.is-medium:last-child:not(:first-child) {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: -0.375rem;
|
||||
}
|
||||
|
||||
.button .icon.is-medium:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.75rem);
|
||||
margin-right: calc(-1px - 0.75rem);
|
||||
}
|
||||
|
||||
.button .icon.is-large:first-child:not(:last-child) {
|
||||
margin-left: -0.625rem;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
.button .icon.is-large:last-child:not(:first-child) {
|
||||
margin-left: 1.25rem;
|
||||
margin-right: -0.625rem;
|
||||
}
|
||||
|
||||
.button .icon.is-large:first-child:last-child {
|
||||
margin-left: calc(-1px - 1.25rem);
|
||||
margin-right: calc(-1px - 1.25rem);
|
||||
}
|
||||
|
||||
.button:hover, .button.is-hovered {
|
||||
@ -1148,35 +1168,63 @@ a.box:active {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon:first-child {
|
||||
margin-left: calc(-1px - 0.5625rem);
|
||||
.button.is-small .icon:first-child:not(:last-child) {
|
||||
margin-left: -0.28125rem;
|
||||
margin-right: 0.5625rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon:last-child {
|
||||
.button.is-small .icon:last-child:not(:first-child) {
|
||||
margin-left: 0.5625rem;
|
||||
margin-right: -0.28125rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.5625rem);
|
||||
margin-right: calc(-1px - 0.5625rem);
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-small:first-child {
|
||||
margin-left: calc(-1px - 0.3125rem);
|
||||
.button.is-small .icon.is-small:first-child:not(:last-child) {
|
||||
margin-left: -0.15625rem;
|
||||
margin-right: 0.3125rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-small:last-child {
|
||||
.button.is-small .icon.is-small:last-child:not(:first-child) {
|
||||
margin-left: 0.3125rem;
|
||||
margin-right: -0.15625rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-small:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.3125rem);
|
||||
margin-right: calc(-1px - 0.3125rem);
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-medium:first-child {
|
||||
margin-left: calc(-1px - 0.8125rem);
|
||||
.button.is-small .icon.is-medium:first-child:not(:last-child) {
|
||||
margin-left: -0.40625rem;
|
||||
margin-right: 0.8125rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-medium:last-child {
|
||||
.button.is-small .icon.is-medium:last-child:not(:first-child) {
|
||||
margin-left: 0.8125rem;
|
||||
margin-right: -0.40625rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-medium:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.8125rem);
|
||||
margin-right: calc(-1px - 0.8125rem);
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-large:first-child {
|
||||
margin-left: calc(-1px - 1.3125rem);
|
||||
.button.is-small .icon.is-large:first-child:not(:last-child) {
|
||||
margin-left: -0.65625rem;
|
||||
margin-right: 1.3125rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-large:last-child {
|
||||
.button.is-small .icon.is-large:last-child:not(:first-child) {
|
||||
margin-left: 1.3125rem;
|
||||
margin-right: -0.65625rem;
|
||||
}
|
||||
|
||||
.button.is-small .icon.is-large:first-child:last-child {
|
||||
margin-left: calc(-1px - 1.3125rem);
|
||||
margin-right: calc(-1px - 1.3125rem);
|
||||
}
|
||||
|
||||
@ -1184,35 +1232,63 @@ a.box:active {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon:first-child {
|
||||
margin-left: calc(-1px - 0.4375rem);
|
||||
.button.is-medium .icon:first-child:not(:last-child) {
|
||||
margin-left: -0.21875rem;
|
||||
margin-right: 0.4375rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon:last-child {
|
||||
.button.is-medium .icon:last-child:not(:first-child) {
|
||||
margin-left: 0.4375rem;
|
||||
margin-right: -0.21875rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.4375rem);
|
||||
margin-right: calc(-1px - 0.4375rem);
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-small:first-child {
|
||||
margin-left: calc(-1px - 0.1875rem);
|
||||
.button.is-medium .icon.is-small:first-child:not(:last-child) {
|
||||
margin-left: -0.09375rem;
|
||||
margin-right: 0.1875rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-small:last-child {
|
||||
.button.is-medium .icon.is-small:last-child:not(:first-child) {
|
||||
margin-left: 0.1875rem;
|
||||
margin-right: -0.09375rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-small:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.1875rem);
|
||||
margin-right: calc(-1px - 0.1875rem);
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-medium:first-child {
|
||||
margin-left: calc(-1px - 0.6875rem);
|
||||
.button.is-medium .icon.is-medium:first-child:not(:last-child) {
|
||||
margin-left: -0.34375rem;
|
||||
margin-right: 0.6875rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-medium:last-child {
|
||||
.button.is-medium .icon.is-medium:last-child:not(:first-child) {
|
||||
margin-left: 0.6875rem;
|
||||
margin-right: -0.34375rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-medium:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.6875rem);
|
||||
margin-right: calc(-1px - 0.6875rem);
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-large:first-child {
|
||||
margin-left: calc(-1px - 1.1875rem);
|
||||
.button.is-medium .icon.is-large:first-child:not(:last-child) {
|
||||
margin-left: -0.59375rem;
|
||||
margin-right: 1.1875rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-large:last-child {
|
||||
.button.is-medium .icon.is-large:last-child:not(:first-child) {
|
||||
margin-left: 1.1875rem;
|
||||
margin-right: -0.59375rem;
|
||||
}
|
||||
|
||||
.button.is-medium .icon.is-large:first-child:last-child {
|
||||
margin-left: calc(-1px - 1.1875rem);
|
||||
margin-right: calc(-1px - 1.1875rem);
|
||||
}
|
||||
|
||||
@ -1220,35 +1296,63 @@ a.box:active {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon:first-child {
|
||||
margin-left: calc(-1px - 0.375rem);
|
||||
.button.is-large .icon:first-child:not(:last-child) {
|
||||
margin-left: -0.1875rem;
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon:last-child {
|
||||
.button.is-large .icon:last-child:not(:first-child) {
|
||||
margin-left: 0.375rem;
|
||||
margin-right: -0.1875rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.375rem);
|
||||
margin-right: calc(-1px - 0.375rem);
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-small:first-child {
|
||||
margin-left: calc(-1px - 0.125rem);
|
||||
.button.is-large .icon.is-small:first-child:not(:last-child) {
|
||||
margin-left: -0.0625rem;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-small:last-child {
|
||||
.button.is-large .icon.is-small:last-child:not(:first-child) {
|
||||
margin-left: 0.125rem;
|
||||
margin-right: -0.0625rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-small:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.125rem);
|
||||
margin-right: calc(-1px - 0.125rem);
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-medium:first-child {
|
||||
margin-left: calc(-1px - 0.625rem);
|
||||
.button.is-large .icon.is-medium:first-child:not(:last-child) {
|
||||
margin-left: -0.3125rem;
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-medium:last-child {
|
||||
.button.is-large .icon.is-medium:last-child:not(:first-child) {
|
||||
margin-left: 0.625rem;
|
||||
margin-right: -0.3125rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-medium:first-child:last-child {
|
||||
margin-left: calc(-1px - 0.625rem);
|
||||
margin-right: calc(-1px - 0.625rem);
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-large:first-child {
|
||||
margin-left: calc(-1px - 1.125rem);
|
||||
.button.is-large .icon.is-large:first-child:not(:last-child) {
|
||||
margin-left: -0.5625rem;
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-large:last-child {
|
||||
.button.is-large .icon.is-large:last-child:not(:first-child) {
|
||||
margin-left: 1.125rem;
|
||||
margin-right: -0.5625rem;
|
||||
}
|
||||
|
||||
.button.is-large .icon.is-large:first-child:last-child {
|
||||
margin-left: calc(-1px - 1.125rem);
|
||||
margin-right: calc(-1px - 1.125rem);
|
||||
}
|
||||
|
||||
@ -2060,7 +2164,6 @@ a.box:active {
|
||||
}
|
||||
|
||||
.icon {
|
||||
background: whitesmoke;
|
||||
display: inline-block;
|
||||
font-size: 21px;
|
||||
height: 1.5rem;
|
||||
@ -3602,9 +3705,9 @@ a.box:active {
|
||||
.nav-toggle {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 50px;
|
||||
height: 3rem;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
@ -3668,7 +3771,7 @@ a.box:active {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
@ -3677,19 +3780,19 @@ a.box:active {
|
||||
}
|
||||
|
||||
.nav-item img {
|
||||
max-height: 24px;
|
||||
max-height: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-item .button + .button {
|
||||
margin-left: 10px;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-item .tag:first-child {
|
||||
margin-right: 5px;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.nav-item .tag:last-child {
|
||||
margin-left: 5px;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@ -3746,7 +3849,7 @@ a.nav-item.is-tab.is-active {
|
||||
}
|
||||
.nav-menu .nav-item {
|
||||
border-top: 1px solid rgba(219, 219, 219, 0.5);
|
||||
padding: 10px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.nav-menu.is-active {
|
||||
display: block;
|
||||
@ -3755,7 +3858,7 @@ a.nav-item.is-tab.is-active {
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 979px) {
|
||||
.nav-menu {
|
||||
padding-right: 20px;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3794,7 +3897,7 @@ a.nav-item.is-tab.is-active {
|
||||
align-items: stretch;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
min-height: 50px;
|
||||
min-height: 3rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
@ -3803,7 +3906,7 @@ a.nav-item.is-tab.is-active {
|
||||
.nav > .container {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
min-height: 50px;
|
||||
min-height: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -3830,7 +3933,7 @@ a.nav-item.is-tab.is-active {
|
||||
@media screen and (max-width: 979px) {
|
||||
.nav > .container > .nav-left > .nav-item.is-brand:first-child,
|
||||
.container > .nav > .nav-left > .nav-item.is-brand:first-child {
|
||||
padding-left: 20px;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,486 +15,389 @@ doc-subtab: button
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
<a class="button">Button</a>
|
||||
<a class="button is-white">White</a>
|
||||
<a class="button is-light">Light</a>
|
||||
<a class="button is-dark">Dark</a>
|
||||
<a class="button is-black">Black</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-info">Info</a>
|
||||
<a class="button is-success">Success</a>
|
||||
<a class="button is-warning">Warning</a>
|
||||
<a class="button is-danger">Danger</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% capture button_example %}
|
||||
<div class="block">
|
||||
<a class="button">Button</a>
|
||||
<a class="button is-white">White</a>
|
||||
<a class="button is-light">Light</a>
|
||||
<a class="button is-dark">Dark</a>
|
||||
<a class="button is-black">Black</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-info">Info</a>
|
||||
<a class="button is-success">Success</a>
|
||||
<a class="button is-warning">Warning</a>
|
||||
<a class="button is-danger">Danger</a>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button">Button</a>
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-info">Info</a>
|
||||
<a class="button is-success">Success</a>
|
||||
<a class="button is-warning">Warning</a>
|
||||
<a class="button is-danger">Danger</a>
|
||||
<a class="button is-link">Link</a>
|
||||
{{button_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-small">Small</a>
|
||||
<a class="button">Normal</a>
|
||||
<a class="button is-medium">Medium</a>
|
||||
<a class="button is-large">Large</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_sizes_example %}
|
||||
<a class="button is-small">Small</a>
|
||||
<a class="button">Normal</a>
|
||||
<a class="button is-medium">Medium</a>
|
||||
<a class="button is-large">Large</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_sizes_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Styles</h3>
|
||||
<h4 class="subtitle">Outlined</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-outlined">Outlined</a>
|
||||
<a class="button is-primary is-outlined">Outlined</a>
|
||||
<a class="button is-info is-outlined">Outlined</a>
|
||||
<a class="button is-success is-outlined">Outlined</a>
|
||||
<a class="button is-danger is-outlined">Outlined</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_outlined_example %}
|
||||
<a class="button is-outlined">Outlined</a>
|
||||
<a class="button is-primary is-outlined">Outlined</a>
|
||||
<a class="button is-info is-outlined">Outlined</a>
|
||||
<a class="button is-success is-outlined">Outlined</a>
|
||||
<a class="button is-danger is-outlined">Outlined</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_outlined_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_outlined_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary">
|
||||
<a class="button is-primary is-inverted">Inverted</a>
|
||||
<a class="button is-info is-inverted">Inverted</a>
|
||||
<a class="button is-success is-inverted">Inverted</a>
|
||||
<a class="button is-danger is-inverted">Inverted</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_inverted_example %}
|
||||
<a class="button is-primary is-inverted">Inverted</a>
|
||||
<a class="button is-info is-inverted">Inverted</a>
|
||||
<a class="button is-success is-inverted">Inverted</a>
|
||||
<a class="button is-danger is-inverted">Inverted</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary">
|
||||
{{button_inverted_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_inverted_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">States</h3>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button">Normal</a>
|
||||
<a class="button is-primary">Normal</a>
|
||||
<a class="button is-info">Normal</a>
|
||||
<a class="button is-success">Normal</a>
|
||||
<a class="button is-warning">Normal</a>
|
||||
<a class="button is-danger">Normal</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_normal_example %}
|
||||
<a class="button">Normal</a>
|
||||
<a class="button is-primary">Normal</a>
|
||||
<a class="button is-info">Normal</a>
|
||||
<a class="button is-success">Normal</a>
|
||||
<a class="button is-warning">Normal</a>
|
||||
<a class="button is-danger">Normal</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_normal_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_normal_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-hovered">Hover</a>
|
||||
<a class="button is-primary is-hovered">Hover</a>
|
||||
<a class="button is-info is-hovered">Hover</a>
|
||||
<a class="button is-success is-hovered">Hover</a>
|
||||
<a class="button is-warning is-hovered">Hover</a>
|
||||
<a class="button is-danger is-hovered">Hover</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_hover_example %}
|
||||
<a class="button is-hovered">Hover</a>
|
||||
<a class="button is-primary is-hovered">Hover</a>
|
||||
<a class="button is-info is-hovered">Hover</a>
|
||||
<a class="button is-success is-hovered">Hover</a>
|
||||
<a class="button is-warning is-hovered">Hover</a>
|
||||
<a class="button is-danger is-hovered">Hover</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_hover_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_hover_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-focused">Focus</a>
|
||||
<a class="button is-primary is-focused">Focus</a>
|
||||
<a class="button is-info is-focused">Focus</a>
|
||||
<a class="button is-success is-focused">Focus</a>
|
||||
<a class="button is-warning is-focused">Focus</a>
|
||||
<a class="button is-danger is-focused">Focus</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_focus_example %}
|
||||
<a class="button is-focused">Focus</a>
|
||||
<a class="button is-primary is-focused">Focus</a>
|
||||
<a class="button is-info is-focused">Focus</a>
|
||||
<a class="button is-success is-focused">Focus</a>
|
||||
<a class="button is-warning is-focused">Focus</a>
|
||||
<a class="button is-danger is-focused">Focus</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_focus_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_focus_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Active</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-active">Active</a>
|
||||
<a class="button is-primary is-active">Active</a>
|
||||
<a class="button is-info is-active">Active</a>
|
||||
<a class="button is-success is-active">Active</a>
|
||||
<a class="button is-warning is-active">Active</a>
|
||||
<a class="button is-danger is-active">Active</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_active_example %}
|
||||
<a class="button is-active">Active</a>
|
||||
<a class="button is-primary is-active">Active</a>
|
||||
<a class="button is-info is-active">Active</a>
|
||||
<a class="button is-success is-active">Active</a>
|
||||
<a class="button is-warning is-active">Active</a>
|
||||
<a class="button is-danger is-active">Active</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_active_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_active_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-loading">Loading</a>
|
||||
<a class="button is-primary is-loading">Loading</a>
|
||||
<a class="button is-info is-loading">Loading</a>
|
||||
<a class="button is-success is-loading">Loading</a>
|
||||
<a class="button is-warning is-loading">Loading</a>
|
||||
<a class="button is-danger is-loading">Loading</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_loading_example %}
|
||||
<a class="button is-loading">Loading</a>
|
||||
<a class="button is-primary is-loading">Loading</a>
|
||||
<a class="button is-info is-loading">Loading</a>
|
||||
<a class="button is-success is-loading">Loading</a>
|
||||
<a class="button is-warning is-loading">Loading</a>
|
||||
<a class="button is-danger is-loading">Loading</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_loading_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_loading_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-disabled">Disabled</a>
|
||||
<a class="button is-primary is-disabled">Disabled</a>
|
||||
<a class="button is-info is-disabled">Disabled</a>
|
||||
<a class="button is-success is-disabled">Disabled</a>
|
||||
<a class="button is-warning is-disabled">Disabled</a>
|
||||
<a class="button is-danger is-disabled">Disabled</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_disabled_example %}
|
||||
<a class="button is-disabled">Disabled</a>
|
||||
<a class="button is-primary is-disabled">Disabled</a>
|
||||
<a class="button is-info is-disabled">Disabled</a>
|
||||
<a class="button is-success is-disabled">Disabled</a>
|
||||
<a class="button is-warning is-disabled">Disabled</a>
|
||||
<a class="button is-danger is-disabled">Disabled</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_disabled_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_disabled_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-bold"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-italic"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-underline"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
<span>Save</span>
|
||||
</a>
|
||||
<a class="button is-danger is-outlined">
|
||||
<span>Delete</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-times"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
<span class="icon">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
<span>Save</span>
|
||||
</a>
|
||||
<a class="button is-danger">
|
||||
<span>Delete</span>
|
||||
<span class="icon">
|
||||
<i class="fa fa-times"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-danger is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fa fa-times"></i>
|
||||
</span>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
</p>
|
||||
<p>
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="control">
|
||||
<a class="button is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-large">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture button_fa_example %}
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-bold"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-italic"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-underline"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
<span>Save</span>
|
||||
</a>
|
||||
<a class="button is-danger is-outlined">
|
||||
<span>Delete</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-times"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-large">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-header"></i>
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_fa_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_fa_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
</p>
|
||||
<p>
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{% capture button_only_icon_example %}
|
||||
<p class="control">
|
||||
<a class="button is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-large">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
{{button_only_icon_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_only_icon_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
@ -502,26 +405,7 @@ doc-subtab: button
|
||||
<div class="content">
|
||||
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
Save changes
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
Cancel
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-danger">
|
||||
Delete post
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{% capture button_group_example %}
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
@ -539,6 +423,12 @@ doc-subtab: button
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_group_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{button_group_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -547,29 +437,7 @@ doc-subtab: button
|
||||
<div class="content">
|
||||
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-center"></i>
|
||||
</span>
|
||||
<span>Center</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-right"></i>
|
||||
</span>
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{% capture button_addons_example %}
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
@ -590,6 +458,12 @@ doc-subtab: button
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{button_addons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -598,71 +472,55 @@ doc-subtab: button
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="control is-grouped">
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-bold"></i>
|
||||
</span>
|
||||
<span>Bold</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-italic"></i>
|
||||
</span>
|
||||
<span>Italic</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-underline"></i>
|
||||
</span>
|
||||
<span>Underline</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-center"></i>
|
||||
</span>
|
||||
<span>Center</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-right"></i>
|
||||
</span>
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% capture button_group_addons_example %}
|
||||
<div class="control is-grouped">
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-bold"></i>
|
||||
</span>
|
||||
<span>Bold</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-italic"></i>
|
||||
</span>
|
||||
<span>Italic</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-underline"></i>
|
||||
</span>
|
||||
<span>Underline</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-center"></i>
|
||||
</span>
|
||||
<span>Center</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-right"></i>
|
||||
</span>
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_group_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-center"></i>
|
||||
</span>
|
||||
<span>Center</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-right"></i>
|
||||
</span>
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</p>
|
||||
{{button_group_addons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
$nav-height: 50px !default
|
||||
$nav-height: 3rem !default
|
||||
|
||||
// Components
|
||||
|
||||
@ -14,19 +14,19 @@ $nav-height: 50px !default
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
padding: 10px
|
||||
padding: 0.5rem 0.75rem
|
||||
a
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
img
|
||||
max-height: 24px
|
||||
max-height: 1.5rem
|
||||
.button + .button
|
||||
margin-left: 10px
|
||||
margin-left: 0.75rem
|
||||
.tag
|
||||
&:first-child
|
||||
margin-right: 5px
|
||||
margin-right: 0.25rem
|
||||
&:last-child
|
||||
margin-left: 5px
|
||||
margin-left: 0.25rem
|
||||
// Responsiveness
|
||||
+mobile
|
||||
justify-content: flex-start
|
||||
@ -66,11 +66,11 @@ a.nav-item
|
||||
position: absolute
|
||||
.nav-item
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
padding: 10px
|
||||
padding: 0.75rem
|
||||
&.is-active
|
||||
display: block
|
||||
+tablet-only
|
||||
padding-right: 20px
|
||||
padding-right: 1.5rem
|
||||
|
||||
.nav-left
|
||||
align-items: stretch
|
||||
@ -137,4 +137,4 @@ a.nav-item
|
||||
.container > &
|
||||
& > .nav-left
|
||||
& > .nav-item.is-brand:first-child
|
||||
padding-left: 20px
|
||||
padding-left: 1.5rem
|
||||
|
||||
@ -23,31 +23,53 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
||||
// $button-height = $horizontal-padding + $icon-width + $x
|
||||
$x: $button-height - $horizontal-padding - $icon-width
|
||||
// We divide by 2 to apply this margin on both the left and right sides
|
||||
$negative-margin: abs($x) / 2
|
||||
// We need to remove 1px for the border as well
|
||||
@return calc(-1px - #{$negative-margin})
|
||||
@return abs($x) / 2
|
||||
|
||||
=button-icon($button-size)
|
||||
$small-spacing: buttonIconSpacing($button-size, 1rem)
|
||||
$normal-spacing: buttonIconSpacing($button-size, 1.5rem)
|
||||
$medium-spacing: buttonIconSpacing($button-size, 2rem)
|
||||
$large-spacing: buttonIconSpacing($button-size, 3rem)
|
||||
.icon
|
||||
&:first-child
|
||||
margin-left: buttonIconSpacing($button-size, 1.5rem)
|
||||
&:last-child
|
||||
margin-right: buttonIconSpacing($button-size, 1.5rem)
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: -$normal-spacing / 2
|
||||
margin-right: $normal-spacing
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: $normal-spacing
|
||||
margin-right: -$normal-spacing / 2
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-1px - #{$normal-spacing})
|
||||
margin-right: calc(-1px - #{$normal-spacing})
|
||||
&.is-small
|
||||
&:first-child
|
||||
margin-left: buttonIconSpacing($button-size, 1rem)
|
||||
&:last-child
|
||||
margin-right: buttonIconSpacing($button-size, 1rem)
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: -$small-spacing / 2
|
||||
margin-right: $small-spacing
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: $small-spacing
|
||||
margin-right: -$small-spacing / 2
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-1px - #{$small-spacing})
|
||||
margin-right: calc(-1px - #{$small-spacing})
|
||||
&.is-medium
|
||||
&:first-child
|
||||
margin-left: buttonIconSpacing($button-size, 2rem)
|
||||
&:last-child
|
||||
margin-right: buttonIconSpacing($button-size, 2rem)
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: -$medium-spacing / 2
|
||||
margin-right: $medium-spacing
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: $medium-spacing
|
||||
margin-right: -$medium-spacing / 2
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-1px - #{$medium-spacing})
|
||||
margin-right: calc(-1px - #{$medium-spacing})
|
||||
&.is-large
|
||||
&:first-child
|
||||
margin-left: buttonIconSpacing($button-size, 3rem)
|
||||
&:last-child
|
||||
margin-right: buttonIconSpacing($button-size, 3rem)
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: -$large-spacing / 2
|
||||
margin-right: $large-spacing
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: $large-spacing
|
||||
margin-right: -$large-spacing / 2
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-1px - #{$large-spacing})
|
||||
margin-right: calc(-1px - #{$large-spacing})
|
||||
|
||||
// The button sizes use mixins so they can be used at different breakpoints
|
||||
=button-small
|
||||
@ -76,11 +98,6 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
||||
strong
|
||||
color: inherit
|
||||
+button-icon($size-normal)
|
||||
.icon
|
||||
&:first-child:not(:last-child)
|
||||
margin-right: 0.25rem !important
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.25rem !important
|
||||
// States
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.icon
|
||||
background: $background
|
||||
+fa(21px, 1.5rem)
|
||||
.fa
|
||||
font-size: inherit
|
||||
|
||||
Loading…
Reference in New Issue
Block a user