mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add color helpers
This commit is contained in:
Jeremy Thomas
parent
7f03c86c1e
commit
7ece5f5156
@ -8,6 +8,7 @@
|
||||
|
||||
### Improvements
|
||||
|
||||
* #1628 Add `.has-background` helpers for block background colors, like `.has-text`
|
||||
* #1767 Added minified bundle with cleancss
|
||||
|
||||
### Bug fixes
|
||||
@ -15,10 +16,6 @@
|
||||
* #1707 Disable table hover in `.content` by default
|
||||
* #1428 Fix `media-content` overflow
|
||||
|
||||
### Improvements
|
||||
|
||||
* Add `.has-bg` helpers for block background colors, like `.has-text`.
|
||||
|
||||
## 0.6.2
|
||||
|
||||
### New features
|
||||
|
||||
@ -10,11 +10,11 @@
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
|
||||
Responsive helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'color-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/color-helpers/">
|
||||
Color helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'typography-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/typography-helpers/">
|
||||
Typography helpers
|
||||
<span class="tag is-success" style="margin-left: 1em;">
|
||||
New!
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -33,5 +33,3 @@ $bleeding-red: #CA1F26
|
||||
@import "./_sass/sponsors"
|
||||
@import "./_sass/book"
|
||||
@import "./_sass/native"
|
||||
|
||||
@debug $colors
|
||||
|
||||
@ -691,6 +691,10 @@ a.has-text-white:hover, a.has-text-white:focus {
|
||||
color: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
.has-background-white {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.has-text-black {
|
||||
color: #0a0a0a !important;
|
||||
}
|
||||
@ -699,6 +703,10 @@ a.has-text-black:hover, a.has-text-black:focus {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.has-background-black {
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
.has-text-light {
|
||||
color: whitesmoke !important;
|
||||
}
|
||||
@ -707,6 +715,10 @@ a.has-text-light:hover, a.has-text-light:focus {
|
||||
color: #dbdbdb !important;
|
||||
}
|
||||
|
||||
.has-background-light {
|
||||
background-color: whitesmoke !important;
|
||||
}
|
||||
|
||||
.has-text-dark {
|
||||
color: #363636 !important;
|
||||
}
|
||||
@ -715,6 +727,10 @@ a.has-text-dark:hover, a.has-text-dark:focus {
|
||||
color: #1c1c1c !important;
|
||||
}
|
||||
|
||||
.has-background-dark {
|
||||
background-color: #363636 !important;
|
||||
}
|
||||
|
||||
.has-text-primary {
|
||||
color: #00d1b2 !important;
|
||||
}
|
||||
@ -723,6 +739,10 @@ a.has-text-primary:hover, a.has-text-primary:focus {
|
||||
color: #009e86 !important;
|
||||
}
|
||||
|
||||
.has-background-primary {
|
||||
background-color: #00d1b2 !important;
|
||||
}
|
||||
|
||||
.has-text-link {
|
||||
color: #3273dc !important;
|
||||
}
|
||||
@ -731,6 +751,10 @@ a.has-text-link:hover, a.has-text-link:focus {
|
||||
color: #205bbc !important;
|
||||
}
|
||||
|
||||
.has-background-link {
|
||||
background-color: #3273dc !important;
|
||||
}
|
||||
|
||||
.has-text-info {
|
||||
color: #209cee !important;
|
||||
}
|
||||
@ -739,6 +763,10 @@ a.has-text-info:hover, a.has-text-info:focus {
|
||||
color: #0f81cc !important;
|
||||
}
|
||||
|
||||
.has-background-info {
|
||||
background-color: #209cee !important;
|
||||
}
|
||||
|
||||
.has-text-success {
|
||||
color: #23d160 !important;
|
||||
}
|
||||
@ -747,6 +775,10 @@ a.has-text-success:hover, a.has-text-success:focus {
|
||||
color: #1ca64c !important;
|
||||
}
|
||||
|
||||
.has-background-success {
|
||||
background-color: #23d160 !important;
|
||||
}
|
||||
|
||||
.has-text-warning {
|
||||
color: #ffdd57 !important;
|
||||
}
|
||||
@ -755,6 +787,10 @@ a.has-text-warning:hover, a.has-text-warning:focus {
|
||||
color: #ffd324 !important;
|
||||
}
|
||||
|
||||
.has-background-warning {
|
||||
background-color: #ffdd57 !important;
|
||||
}
|
||||
|
||||
.has-text-danger {
|
||||
color: #ff3860 !important;
|
||||
}
|
||||
@ -763,6 +799,10 @@ a.has-text-danger:hover, a.has-text-danger:focus {
|
||||
color: #ff0537 !important;
|
||||
}
|
||||
|
||||
.has-background-danger {
|
||||
background-color: #ff3860 !important;
|
||||
}
|
||||
|
||||
.has-text-black-bis {
|
||||
color: #121212 !important;
|
||||
}
|
||||
|
||||
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -327,8 +327,6 @@ doc-subtab: dropdown
|
||||
|
||||
{% include anchor.html name="Dropup" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.5.4" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
|
||||
@ -467,8 +467,6 @@ doc-subtab: table
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/new-tag.html version="0.5.4" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>You can add a <strong>hover effect</strong> on each row</p>
|
||||
|
||||
104
docs/documentation/modifiers/color-helpers.html
Normal file
104
docs/documentation/modifiers/color-helpers.html
Normal file
@ -0,0 +1,104 @@
|
||||
---
|
||||
title: Color helpers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: color-helpers
|
||||
---
|
||||
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Color helpers</h1>
|
||||
<h2 class="subtitle">
|
||||
Change the <strong>color</strong> of the text and/or background
|
||||
</h2>
|
||||
|
||||
{% include anchor.html name="Text color" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Background color" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Background color
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@ -100,7 +100,7 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
|
||||
&:hover,
|
||||
&:focus
|
||||
color: darken($color, 10%) !important
|
||||
.has-bg-#{$name}
|
||||
.has-background-#{$name}
|
||||
background-color: $color !important
|
||||
|
||||
@each $name, $shade in $shades
|
||||
|
||||
Loading…
Reference in New Issue
Block a user