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 #442

Browse Source
This commit is contained in:
Jeremy Thomas 2017-04-15 17:08:30 +01:00
parent c9c5d89bc5
commit ab286400d1
4 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -25,6 +25,7 @@
* Fix #634 is-grouped control * Fix #634 is-grouped control
* Fix #676 checkbox/radio wrapping * Fix #676 checkbox/radio wrapping
* Feature #479 has-icons placement * Feature #479 has-icons placement
* Fix #442 selected table row
## 0.4.0 ## 0.4.0

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

@ -2973,6 +2973,22 @@ input[type="submit"].button {
background-color: #fafafa; background-color: #fafafa;
} }
.table tr.is-selected {
background-color: #00d1b2;
color: #fff;
}
.table tr.is-selected a,
.table tr.is-selected strong {
color: currentColor;
}
.table tr.is-selected td,
.table tr.is-selected th {
border-color: #fff;
color: currentColor;
}
.table thead td, .table thead td,
.table thead th { .table thead th {
border-width: 0 0 2px; border-width: 0 0 2px;

41
docs/documentation/elements/table.html
View File

@ -13,6 +13,45 @@ doc-subtab: table
<hr> <hr>
<div class="content">
<p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
<ul>
<li>
<code>table</code>
<ul>
<li>
<code>thead</code>
</li>
<li>
<code>tfoot</code>
</li>
<li>
<code>tbody</code>
<ul>
<li>
<code>tr</code>
<ul>
<li>
<code>th</code>
</li>
<li>
<code>td</code>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.2</span>
<br>
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
</p>
</div>
{% capture table_example %} {% capture table_example %}
<table class="table"> <table class="table">
<thead> <thead>
@ -86,7 +125,7 @@ doc-subtab: table
<td>70</td> <td>70</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td> <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
</tr> </tr>
<tr> <tr class="is-selected">
<th>4</th> <th>4</th>
<td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td> <td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
<td>38</td> <td>38</td>

14
sass/elements/table.sass
View File

@ -5,6 +5,10 @@ $table-border: $grey-lighter !default
$table-head: $grey !default $table-head: $grey !default
$table-row-hover-background: $white-bis !default $table-row-hover-background: $white-bis !default
$table-row-active-background: $primary !default
$table-row-active: $primary-invert !default
$table-row-even-background: $white-bis !default $table-row-even-background: $white-bis !default
$table-row-even-hover-background: $white-ter !default $table-row-even-hover-background: $white-ter !default
@ -29,6 +33,16 @@ $table-row-even-hover-background: $white-ter !default
tr tr
&:hover &:hover
background-color: $table-row-hover-background background-color: $table-row-hover-background
&.is-selected
background-color: $table-row-active-background
color: $table-row-active
a,
strong
color: currentColor
td,
th
border-color: $table-row-active
color: currentColor
thead thead
td, td,
th th