steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

✨ Add @table element

Browse source
This commit is contained in:
Steffo 2021-08-13 05:03:04 +02:00
parent 14420bbd1b
commit da18e9ba73
Signed by: steffo
GPG key ID: 6965406171929D01
12 changed files with 374 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
index.html
View file

@ -6,8 +6,8 @@
<link rel="stylesheet" href="src/targets/skeleton.root.css"> <link rel="stylesheet" href="src/targets/skeleton.root.css">
<link rel="stylesheet" href="src/targets/paper.root.css"> <link rel="stylesheet" href="src/targets/paper.root.css">
<link rel="stylesheet" href="src/targets/hacker.root.css"> <link rel="stylesheet" href="src/targets/hacker.root.css">
<link rel="stylesheet" href="src/targets/sophon.root.css">
<link rel="stylesheet" href="src/targets/royalblue.root.css"> <link rel="stylesheet" href="src/targets/royalblue.root.css">
<link rel="stylesheet" href="src/targets/sophon.root.css">
<title>Bluelib 2</title> <title>Bluelib 2</title>
<style> <style>
body { body {
@ -248,6 +248,104 @@
</div> </div>
</section> </section>
</section> </section>
<section class="chapter" id="chapter-tables">
<h2>
Tables
</h2>
<section class="panel panel-box" id="panel-table">
<h3>
Table
</h3>
<p>
A <dfn id="dfn-table">table</dfn> is an element displaying data aligned and ordered by rows and columns.
</p>
<table>
<caption class="table-caption-top">What do the brothers think of the following elements?</caption>
<thead>
<tr>
<th></th>
<th>Mario</th>
<th>Luigi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Tables</th>
<td>They're cool and allow you to do cool stuff</td>
<td>They need chairs to be useful</td>
</tr>
<tr>
<th scope="row">Flexboxes</th>
<td>They're very useful</td>
<td>Not enough flexible for me</td>
</tr>
<tr>
<th scope="row">Grids</th>
<td>I love them</td>
<td>Bleargh</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Overall</th>
<td>&lt;3</td>
<td>0/10</td>
</tr>
</tfoot>
</table>
<p>
Elements in tables can be marked to increase their contrast with the rest.
</p>
<table>
<caption class="table-caption-top">
A game of tic-tac-toe.
</caption>
<tbody>
<tr>
<td>O</td>
<td></td>
<td class="table-mark">X</td>
</tr>
<tr>
<td>X</td>
<td class="table-mark">X</td>
<td>O</td>
</tr>
<tr>
<td class="table-mark">X</td>
<td>O</td>
<td></td>
</tr>
</tbody>
</table>
<p>
Captions can are above the table by default, but they can be moved below the table.
</p>
<table>
<caption class="table-caption-bottom">
HTML elements tier list
</caption>
<tbody>
<tr>
<th scope="row">S</th>
<td><code>&lt;span&gt;</code></td>
</tr>
<tr>
<th scope="row">A</th>
<td><code>&lt;a&gt;</code></td>
</tr>
<tr>
<th scope="row">B</th>
<td>&lt;body&gt;</td>
</tr>
<tr>
<th scope="row">C</th>
<td>&lt;caption&gt;</td>
</tr>
</tbody>
</table>
</section>
</section>
<section class="chapter" id="chapter-status"> <section class="chapter" id="chapter-status">
<h2> <h2>
Status Status

88
src/rules/skeleton.less vendored
View file

@ -568,6 +568,94 @@
//</editor-fold> //</editor-fold>
/// ===== Tables =====
@{table} {
display: table;
background-color: @c0;
border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: @c1;
border-radius: 0 0 4px 4px;
border-collapse: collapse;
padding: 8px;
margin: 8px 0;
}
@{table-caption} {
display: table-caption;
background-color: @c0;
padding: 4px;
font-style: italic;
font-size: small;
}
@{table-caption-top} {
caption-side: top;
border-width: 2px 2px 0 2px;
border-style: solid;
border-color: @c1;
border-radius: 4px 4px 0 0;
}
@{table-caption-bottom} {
caption-side: bottom;
border-width: 0 2px 2px 2px;
border-style: solid;
border-color: @c1;
border-radius: 0 0 4px 4px;
}
@{table-header} {
display: table-header-group;
background-color: @c0;
}
@{table-body} {
display: table-row-group;
}
@{table-footer} {
display: table-footer-group;
background-color: @c0;
}
@{table-row} {
display: table-row;
border: 1px solid @c1;
}
@{table-data}, @{table-head} {
display: table-cell;
border: 1px solid @c1;
padding: 8px;
}
@{table-data} {
}
@{table-head} {
color: @rgb-accent;
}
@{table-mark} {
background-color: @c2;
color: @cF;
}
/// ===== Status ===== /// ===== Status =====
/// Status are classes that can be applied to elements to indicate that special interactions are available. /// Status are classes that can be applied to elements to indicate that special interactions are available.

2
src/rules/sophon.less
View file

@ -3,7 +3,7 @@
@{bluelib} { @{bluelib} {
.set-var-rgb(bluelib-background; 0; 0; 20); .set-var-rgb(bluelib-background; 0; 0; 20);
.set-var-rgb(bluelib-foreground; 45; 154; 255); .set-var-rgb(bluelib-foreground; 45; 154; 255);
.set-var-rgb(bluelib-accent; 255; 255; 255); .set-var-rgb(bluelib-accent; 250; 250; 250);
.set-var-rgb(bluelib-link; 0; 202; 202); .set-var-rgb(bluelib-link; 0; 202; 202);
.set-var-rgb(bluelib-broken; 255; 116; 0); .set-var-rgb(bluelib-broken; 255; 116; 0);

2
src/targets/paper.module.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib2/src/vars/module.less","/mnt/tera/ext4/code/bluelib2/src/utils/mixins.less","/mnt/tera/ext4/code/bluelib2/src/rules/paper.less"],"names":[],"mappings":"AAAC;ECCG,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;ECgBA,sBAAA;EDWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"} {"version":3,"sources":["/mnt/tera/ext4/code/bluelib2/src/rules/paper.less","/mnt/tera/ext4/code/bluelib2/src/utils/mixins.less"],"names":[],"mappings":"AAAC;ECCG,2BAAA;EACA,2BAAA;EACA,2BAAA;EAFA,0BAAA;EACA,0BAAA;EACA,0BAAA;EAFA,sBAAA;EACA,sBAAA;EACA,sBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,sBAAA;EACA,wBAAA;EACA,wBAAA;EAFA,uBAAA;EACA,yBAAA;EACA,yBAAA;EAFA,oBAAA;EACA,kBAAA;EACA,kBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,uBAAA;EACA,uBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,mBAAA;EAFA,mBAAA;EACA,qBAAA;EACA,qBAAA;EAFA,mBAAA;EACA,mBAAA;EACA,qBAAA;EAFA,wBAAA;EACA,sBAAA;EACA,wBAAA;EAFA,qBAAA;EACA,qBAAA;EACA,qBAAA;EDgBA,sBAAA;ECWA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"}

60
src/targets/skeleton.module.css
View file

@ -227,6 +227,66 @@
.bluelib .image-limit-quarter { .bluelib .image-limit-quarter {
max-height: max(14.1vw, 25vh); max-height: max(14.1vw, 25vh);
} }
.bluelib .table {
display: table;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
border-radius: 0 0 4px 4px;
border-collapse: collapse;
padding: 8px;
margin: 8px 0;
}
.bluelib .table-caption {
display: table-caption;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
padding: 4px;
font-style: italic;
font-size: small;
}
.bluelib .table-caption-top {
caption-side: top;
border-width: 2px 2px 0 2px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
border-radius: 4px 4px 0 0;
}
.bluelib .table-caption-bottom {
caption-side: bottom;
border-width: 0 2px 2px 2px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
border-radius: 0 0 4px 4px;
}
.bluelib .table-header {
display: table-header-group;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
.bluelib .table-body {
display: table-row-group;
}
.bluelib .table-footer {
display: table-footer-group;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
.bluelib .table-row {
display: table-row;
border: 1px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
.bluelib .table-data,
.bluelib .table-head {
display: table-cell;
border: 1px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
padding: 8px;
}
.bluelib .table-head {
color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
}
.bluelib .table-mark {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.22);
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
}
.bluelib .status-disabled { .bluelib .status-disabled {
opacity: 50%; opacity: 50%;
} }

2
src/targets/skeleton.module.css.map
View file

File diff suppressed because one or more lines are too long

92
src/targets/skeleton.root.css
View file

@ -301,6 +301,98 @@ body .image-limit-quarter,
.bluelib .image-limit-quarter { .bluelib .image-limit-quarter {
max-height: max(14.1vw, 25vh); max-height: max(14.1vw, 25vh);
} }
body table,
.bluelib table,
body .table,
.bluelib .table {
display: table;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
border-radius: 0 0 4px 4px;
border-collapse: collapse;
padding: 8px;
margin: 8px 0;
}
body table caption,
.bluelib table caption,
body .table-caption,
.bluelib .table-caption {
display: table-caption;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
padding: 4px;
font-style: italic;
font-size: small;
}
body table caption,
.bluelib table caption,
body .table-caption-top,
.bluelib .table-caption-top {
caption-side: top;
border-width: 2px 2px 0 2px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
border-radius: 4px 4px 0 0;
}
body .table-caption-bottom,
.bluelib .table-caption-bottom {
caption-side: bottom;
border-width: 0 2px 2px 2px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
border-radius: 0 0 4px 4px;
}
body table thead,
.bluelib table thead,
body .table-header,
.bluelib .table-header {
display: table-header-group;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
body table tbody,
.bluelib table tbody,
body .table-body,
.bluelib .table-body {
display: table-row-group;
}
body table tfoot,
.bluelib table tfoot,
body .table-footer,
.bluelib .table-footer {
display: table-footer-group;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
body table tr,
.bluelib table tr,
body .table-row,
.bluelib .table-row {
display: table-row;
border: 1px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
body table td,
.bluelib table td,
body .table-data,
.bluelib .table-data,
body table th,
.bluelib table th,
body .table-head,
.bluelib .table-head {
display: table-cell;
border: 1px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
padding: 8px;
}
body table th,
.bluelib table th,
body .table-head,
.bluelib .table-head {
color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
}
body .table-mark,
.bluelib .table-mark {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.22);
color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
}
body [disabled], body [disabled],
.bluelib [disabled], .bluelib [disabled],
body .status-disabled, body .status-disabled,

2
src/targets/skeleton.root.css.map
View file

File diff suppressed because one or more lines are too long

6
src/targets/sophon.module.css
View file

@ -138,9 +138,9 @@
--bluelib-foreground-r: 45; --bluelib-foreground-r: 45;
--bluelib-foreground-g: 154; --bluelib-foreground-g: 154;
--bluelib-foreground-b: 255; --bluelib-foreground-b: 255;
--bluelib-accent-r: 255; --bluelib-accent-r: 250;
--bluelib-accent-g: 255; --bluelib-accent-g: 250;
--bluelib-accent-b: 255; --bluelib-accent-b: 250;
--bluelib-link-r: 0; --bluelib-link-r: 0;
--bluelib-link-g: 202; --bluelib-link-g: 202;
--bluelib-link-b: 202; --bluelib-link-b: 202;

6
src/targets/sophon.root.css
View file

@ -139,9 +139,9 @@ body,
--bluelib-foreground-r: 45; --bluelib-foreground-r: 45;
--bluelib-foreground-g: 154; --bluelib-foreground-g: 154;
--bluelib-foreground-b: 255; --bluelib-foreground-b: 255;
--bluelib-accent-r: 255; --bluelib-accent-r: 250;
--bluelib-accent-g: 255; --bluelib-accent-g: 250;
--bluelib-accent-b: 255; --bluelib-accent-b: 250;
--bluelib-link-r: 0; --bluelib-link-r: 0;
--bluelib-link-g: 202; --bluelib-link-g: 202;
--bluelib-link-b: 202; --bluelib-link-b: 202;

12
src/vars/module.less
View file

@ -25,6 +25,18 @@
@image-limit-half: ~".image-limit-half"; @image-limit-half: ~".image-limit-half";
@image-limit-quarter: ~".image-limit-quarter"; @image-limit-quarter: ~".image-limit-quarter";
@table: ~".table";
@table-caption: ~".table-caption";
@table-caption-top: ~".table-caption-top";
@table-caption-bottom: ~".table-caption-bottom";
@table-header: ~".table-header";
@table-body: ~".table-body";
@table-footer: ~".table-footer";
@table-row: ~".table-row";
@table-data: ~".table-data";
@table-head: ~".table-head";
@table-mark: ~".table-mark";
@status-disabled: ~".status-disabled"; @status-disabled: ~".status-disabled";
@input: ~'.input'; @input: ~'.input';

13
src/vars/root.less
View file

@ -13,6 +13,7 @@
@panel-box: ~".panel-box"; @panel-box: ~".panel-box";
@panel-dialog: ~".panel-dialog"; @panel-dialog: ~".panel-dialog";
@panel-parenthesis: ~".panel-parenthesis"; @panel-parenthesis: ~".panel-parenthesis";
@panel-table: ".panel-table";
@chapter: ~".chapter"; @chapter: ~".chapter";
@chapter-forcewrap: ~".chapter-forcewrap"; @chapter-forcewrap: ~".chapter-forcewrap";
@ -25,6 +26,18 @@
@image-limit-half: ~".image-limit-half"; @image-limit-half: ~".image-limit-half";
@image-limit-quarter: ~".image-limit-quarter"; @image-limit-quarter: ~".image-limit-quarter";
@table: ~"table, .table";
@table-caption: ~"table caption, .table-caption";
@table-caption-top: ~"table caption, .table-caption-top";
@table-caption-bottom: ~".table-caption-bottom";
@table-header: ~"table thead, .table-header";
@table-body: ~"table tbody, .table-body";
@table-footer: ~"table tfoot, .table-footer";
@table-row: ~"table tr, .table-row";
@table-data: ~"table td, .table-data";
@table-head: ~"table th, .table-head";
@table-mark: ~".table-mark";
@status-disabled: ~"[disabled], .status-disabled"; @status-disabled: ~"[disabled], .status-disabled";
@input: ~'@{input-field}, @{input-area}, @{input-select}, @{input-multiselect}, @{input-button}, @{input-checkbox}, @{input-radio}, .input'; @input: ~'@{input-field}, @{input-area}, @{input-select}, @{input-multiselect}, @{input-button}, @{input-checkbox}, @{input-radio}, .input';