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 Table
</h2> </h2>
<div class="content"> <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;thead&#x3E;
&#x3C;tr&#x3E; &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;th&#x3E;A&#x3C;/th&#x3E; &#x3C;th class=&#x22;table__th&#x22;&#x3E;A&#x3C;/th&#x3E;
&#x3C;th&#x3E;B&#x3C;/th&#x3E; &#x3C;th class=&#x22;table__th&#x22;&#x3E;B&#x3C;/th&#x3E;
&#x3C;th&#x3E;C&#x3C;/th&#x3E; &#x3C;th class=&#x22;table__th&#x22;&#x3E;C&#x3C;/th&#x3E;
&#x3C;th&#x3E;D&#x3C;/th&#x3E; &#x3C;th class=&#x22;table__th&#x22;&#x3E;D&#x3C;/th&#x3E;
&#x3C;/tr&#x3E; &#x3C;/tr&#x3E;
&#x3C;/thead&#x3E; &#x3C;/thead&#x3E;
&#x3C;tbody&#x3E; &#x3C;tbody&#x3E;
&#x3C;tr&#x3E; &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E; &#x3C;/tr&#x3E;
&#x3C;tr&#x3E; &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E; &#x3C;/tr&#x3E;
&#x3C;tr&#x3E; &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E; &#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E; &#x3C;/tr&#x3E;
&#x3C;/tbody&#x3E; &#x3C;/tbody&#x3E;
&#x3C;/table&#x3E; &#x3C;/table&#x3E;
</code> </code>
</div> </div>
<table class="table table--striped"> <table class="table table--striped table--hover">
<thead> <thead>
<tr> <tr class="table__tr">
<th>A</th> <th class="table__th">A</th>
<th>B</th> <th class="table__th">B</th>
<th>C</th> <th class="table__th">C</th>
<th>D</th> <th class="table__th">D</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="table__tr">
<td>1</td> <td class="table__td">1</td>
<td>2</td> <td class="table__td">2</td>
<td>3</td> <td class="table__td">3</td>
<td>4</td> <td class="table__td">4</td>
</tr> </tr>
<tr> <tr class="table__tr">
<td>1</td> <td class="table__td">1</td>
<td>2</td> <td class="table__td">2</td>
<td>3</td> <td class="table__td">3</td>
<td>4</td> <td class="table__td">4</td>
</tr> </tr>
<tr> <tr class="table__tr">
<td>1</td> <td class="table__td">1</td>
<td>2</td> <td class="table__td">2</td>
<td>3</td> <td class="table__td">3</td>
<td>4</td> <td class="table__td">4</td>
</tr> </tr>
</tbody> </tbody>
</table> </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 { .table {
width: 100%; width: 100%;
border: 1px solid lighten($color__primary, 55%); border: $border;
background: var(--white); background: var(--white);
&--striped { &--striped {
@ -21,29 +25,31 @@
overflow-x: auto; overflow-x: auto;
} }
td { &__td {
color: var(--text); color: var(--text);
} }
td, &__td,
th { &__th {
text-align: left; text-align: left;
border-bottom: 1px solid lighten($color__primary, 55%); border-bottom: $border;
padding: 0.5em 1.25em; padding: 0.25em 0.75em;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); @include media-breakpoints('padding', $table__padding-breakpoints);
} }
th { &__th {
color: white; color: white;
background-color: $color__primary; background-color: var(--background);
} }
tr:hover { &--hover {
background-color: lighten($color__primary, 10%); .table__tr:hover {
background-color: lighten($color__primary, 10%);
td { .table__td {
color: white; color: white;
}
} }
} }
} }
Write Preview
Loading…
Cancel
Save