tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding #27 #28

Browse Source
release/0.2
HerrHase 3 years ago
parent 42b8e01405
commit 61d24b27e6
3 changed files with 62 additions and 56 deletions
Show Stats Download Patch File Download Diff File

84
public/components.html
Unescape View File

@ -603,65 +603,65 @@
Table
</h2>
<div class="content">
<code>&#x3C;table class=&#x22;table table--striped&#x22;&#x3E;
<code>&#x3C;table class=&#x22;table table--striped table--hover&#x22;&#x3E;
&#x3C;thead&#x3E;
&#x3C;tr&#x3E;
&#x3C;th&#x3E;A&#x3C;/th&#x3E;
&#x3C;th&#x3E;B&#x3C;/th&#x3E;
&#x3C;th&#x3E;C&#x3C;/th&#x3E;
&#x3C;th&#x3E;D&#x3C;/th&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;A&#x3C;/th&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;B&#x3C;/th&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;C&#x3C;/th&#x3E;
&#x3C;th class=&#x22;table__th&#x22;&#x3E;D&#x3C;/th&#x3E;
&#x3C;/tr&#x3E;
&#x3C;/thead&#x3E;
&#x3C;tbody&#x3E;
&#x3C;tr&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;tr&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;tr&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E;
&#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;/tbody&#x3E;
&#x3C;/table&#x3E;
</code>
</div>
<table class="table table--striped">
<table class="table table--striped table--hover">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<tr class="table__tr">
<th class="table__th">A</th>
<th class="table__th">B</th>
<th class="table__th">C</th>
<th class="table__th">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr class="table__tr">
<td class="table__td">1</td>
<td class="table__td">2</td>
<td class="table__td">3</td>
<td class="table__td">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr class="table__tr">
<td class="table__td">1</td>
<td class="table__td">2</td>
<td class="table__td">3</td>
<td class="table__td">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr class="table__tr">
<td class="table__td">1</td>
<td class="table__td">2</td>
<td class="table__td">3</td>
<td class="table__td">4</td>
</tr>
</tbody>
</table>

2
public/plain-ui.css
View File

File diff suppressed because one or more lines are too long

32
src/scss/components/_table.scss
Unescape View File

@ -4,9 +4,13 @@
*
*/
$table__padding-breakpoints: (
$breakpoint__md: 0.5em 1.25em
) !default;
.table {
width: 100%;
border: 1px solid lighten($color__primary, 55%);
border: $border;
background: var(--white);
&--striped {
@ -21,29 +25,31 @@
overflow-x: auto;
}
td {
&__td {
color: var(--text);
}
td,
th {
&__td,
&__th {
text-align: left;
border-bottom: 1px solid lighten($color__primary, 55%);
border-bottom: $border;
padding: 0.5em 1.25em;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
padding: 0.25em 0.75em;
@include media-breakpoints('padding', $table__padding-breakpoints);
}
th {
&__th {
color: white;
background-color: $color__primary;
background-color: var(--background);
}
tr:hover {
background-color: lighten($color__primary, 10%);
&--hover {
.table__tr:hover {
background-color: lighten($color__primary, 10%);
td {
color: white;
.table__td {
color: white;
}
}
}
}
Write Preview
Loading…
Cancel
Save