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

Fix button icons

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 10:41:53 +00:00
parent 2e7e1d7c75
commit 7720041292
23 changed files with 840 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.gitignore vendored
View File

@@ -11,5 +11,6 @@ npm-debug.log
.sass-cache
/_sass
/bulma
/fontawesome
/styles/node_modules
_site

1
docs/_config.yml
View File

@@ -8,6 +8,7 @@ description: "Bulma is an open source CSS framework based on Flexbox and built
markdown: kramdown
permalink: pretty
url: http://bulma.io
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
# Variables

2
docs/_includes/head.html
View File

@@ -6,7 +6,7 @@
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="{{ site.fontawesome }}">
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

30
docs/bulma-docs.sass
View File

@@ -20,7 +20,7 @@ body.page-grid .column > .notification
+tablet
.header-item .button + .button
margin-left: 10px
margin-left: 0.75rem
// Additional
svg
@@ -221,13 +221,13 @@ html.route-index #carbon
background: $white
border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
padding: 20px
padding: 1.5rem
#mc_embed_signup
.control
margin-bottom: 0
.notification
margin-top: 10px
margin-top: 0.75rem
#social
align-items: center
@@ -261,12 +261,12 @@ html.route-index #carbon
border: 1px solid $warning
border-top-right-radius: $radius
color: $warning-invert
padding: 15px 20px
padding: 1.25rem 1.5rem
position: relative
&:not(:first-child)
margin-top: 30px
margin-top: 2rem
&:not(:last-child)
margin-bottom: 20px
margin-bottom: 1.5rem
&:before
background: $warning
border-radius: $radius $radius 0 0
@@ -292,11 +292,11 @@ html.route-index #carbon
border: 1px solid $warning
border-radius: 0 0 $radius $radius
border-top: none
margin-top: -20px
margin-top: -1.5rem
pre
max-height: 600px
&:not(:last-child)
margin-bottom: 40px
margin-bottom: 3rem
$structure: $danger
$structure-invert: $danger-invert
@@ -304,7 +304,7 @@ $structure-invert: $danger-invert
.structure
border-color: $structure
border-radius: $radius
padding: 20px
padding: 1.5rem
&:before
background: $structure
color: $structure-invert
@@ -331,11 +331,11 @@ $structure-invert: $danger-invert
padding: 3px 5px
z-index: 2
&.is-structure-container
padding: 20px 10px 10px
padding: 1.5rem 0.75rem 0.75rem
&:after
align-items: flex-start
justify-content: flex-start
padding: 5px 10px
padding: 0.5rem 0.75rem
.highlight
position: relative
@@ -360,11 +360,11 @@ $structure-invert: $danger-invert
+tablet
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
margin-left: 20px
margin-right: 20px
margin-left: 1.5rem
margin-right: 1.5rem
& + .highlight
margin-left: 20px
margin-right: 20px
margin-left: 1.5rem
margin-right: 1.5rem
.section.is-fullwidth
padding: 0 !important

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

File diff suppressed because it is too large Load Diff

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

@@ -256,6 +256,23 @@ doc-subtab: button
<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">
@@ -345,6 +362,140 @@ doc-subtab: button
</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 %}
<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>
{% endhighlight %}
</div>
</div>
<hr>
<h3 class="title">Button group</h3>
@@ -439,6 +590,79 @@ doc-subtab: button
<span>Right</span>
</a>
</p>
{% endhighlight %}
<hr>
<h3 class="title">Button group with addons</h3>
<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>
{% 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>
{% endhighlight %}
</div>

48
docs/documentation/elements/form.html
View File

@@ -77,10 +77,14 @@ doc-subtab: form
No
</label>
</p>
<p class="control">
<button class="button is-primary">Submit</button>
<button class="button is-link">Cancel</button>
</p>
<div class="control is-grouped">
<p class="control">
<button class="button is-primary">Submit</button>
</p>
<p class="control">
<button class="button is-link">Cancel</button>
</p>
</div>
</div>
<div class="column is-half">
{% highlight html %}
@@ -129,10 +133,14 @@ doc-subtab: form
No
</label>
</p>
<p class="control">
<button class="button is-primary">Submit</button>
<button class="button is-link">Cancel</button>
</p>
<div class="control is-grouped">
<p class="control">
<button class="button is-primary">Submit</button>
</p>
<p class="control">
<button class="button is-link">Cancel</button>
</p>
</div>
{% endhighlight %}
</div>
</div>
@@ -363,10 +371,14 @@ doc-subtab: form
No
</label>
</p>
<p class="control">
<button class="button is-primary" disabled>Submit</button>
<button class="button" disabled>Cancel</button>
</p>
<div class="control is-grouped">
<p class="control">
<button class="button is-primary" disabled>Submit</button>
</p>
<p class="control">
<button class="button" disabled>Cancel</button>
</p>
</div>
</div>
<div class="column is-half">
{% highlight html %}
@@ -392,10 +404,14 @@ doc-subtab: form
No
</label>
</p>
<p class="control">
<button class="button is-primary" disabled>Submit</button>
<button class="button" disabled>Cancel</button>
</p>
<div class="control is-grouped">
<p class="control">
<button class="button is-primary" disabled>Submit</button>
</p>
<p class="control">
<button class="button" disabled>Cancel</button>
</p>
</div>
{% endhighlight %}
</div>
</div>

40
docs/documentation/elements/tag.html
View File

@@ -17,7 +17,7 @@ doc-subtab: tag
<div class="columns">
<div class="column is-4">
By default, a <strong>tag</strong> is a 24px high label.
By default, a <strong>tag</strong> is a 1.5rem high label.
</div>
<div class="column is-2">
<span class="tag">
@@ -35,14 +35,29 @@ doc-subtab: tag
<div class="columns">
<div class="column is-4">
There are <strong>6 different colors</strong> available.
Like with buttons, there are <strong>9 different colors</strong> available.
</div>
<div class="column is-2">
<p class="control">
<span class="tag is-black">
Black
</span>
</p>
<p class="control">
<span class="tag is-dark">
Dark
</span>
</p>
<p class="control">
<span class="tag is-light">
Light
</span>
</p>
<p class="control">
<span class="tag is-white">
White
</span>
</p>
<p class="control">
<span class="tag is-primary">
Primary
@@ -69,7 +84,10 @@ doc-subtab: tag
</div>
<div class="column is-6">
{% highlight html %}
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
@@ -81,14 +99,9 @@ doc-subtab: tag
<div class="columns">
<div class="column is-4">
And <strong>3 additional</strong> sizes.
And <strong>2 additional</strong> sizes.
</div>
<div class="column is-2">
<p class="control">
<span class="tag is-dark is-small">
Small
</span>
</p>
<p class="control">
<span class="tag is-primary is-medium">
Medium
@@ -102,7 +115,6 @@ doc-subtab: tag
</div>
<div class="column is-6">
{% highlight html %}
<span class="tag is-dark is-small">Small</span>
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>
{% endhighlight %}
@@ -114,12 +126,6 @@ doc-subtab: tag
You can also append a <strong>delete button</strong>.
</div>
<div class="column is-2">
<p class="control">
<span class="tag is-info is-small">
Foo
<button class="delete is-small"></button>
</span>
</p>
<p class="control">
<span class="tag is-success">
Bar
@@ -141,10 +147,6 @@ doc-subtab: tag
</div>
<div class="column is-6">
{% highlight html %}
<span class="tag is-info is-small">
Foo
<button class="delete is-small"></button>
</span>
<span class="tag is-success">
Bar
<button class="delete is-small"></button>