mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
✨ Add @list
elements
This commit is contained in:
parent
da18e9ba73
commit
db2eecb26a
9 changed files with 169 additions and 49 deletions
117
index.html
117
index.html
|
@ -346,6 +346,61 @@
|
|||
</table>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-lists">
|
||||
<h2>
|
||||
Lists
|
||||
</h2>
|
||||
<section class="panel panel-box" id="panel-list-unordered">
|
||||
<h3>
|
||||
Unordered lists
|
||||
</h3>
|
||||
<p>
|
||||
An <dfn id="dfn-list-unordered">unordered list</dfn> displays a series of items whose order is irrelevant.
|
||||
</p>
|
||||
<ul>
|
||||
<li>This</li>
|
||||
<li>That</li>
|
||||
<li>Wooper</li>
|
||||
<li>Quagsire</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="panel panel-box" id="panel-list-ordered">
|
||||
<h3>
|
||||
Ordered lists
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-list-ordered">ordered list</dfn> displays a series of items whose order is relevant.
|
||||
</p>
|
||||
<ol>
|
||||
<li>Gold</li>
|
||||
<li>Silver</li>
|
||||
<li>Bronze</li>
|
||||
<li>Iron</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="panel panel-box" id="panel-list-description">
|
||||
<h3>
|
||||
Description lists
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-list-description">description list</dfn> displays a series of name-description pairs.
|
||||
</p>
|
||||
<dl>
|
||||
<dt>
|
||||
Key
|
||||
</dt>
|
||||
<dd>
|
||||
Value
|
||||
</dd>
|
||||
<dt>
|
||||
Other key
|
||||
</dt>
|
||||
<dd>
|
||||
Other value
|
||||
</dd>
|
||||
</dl>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-status">
|
||||
<h2>
|
||||
Status
|
||||
|
@ -793,81 +848,51 @@
|
|||
<p>
|
||||
Here's the full list of them:
|
||||
</p>
|
||||
<ul>
|
||||
<ul class="list-gap-large">
|
||||
<li>
|
||||
<p>
|
||||
<abbr>Abbreviation</abbr>
|
||||
</p>
|
||||
<abbr>Abbreviation</abbr>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<b>Bring Attention</b>
|
||||
</p>
|
||||
<b>Bring Attention</b>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<cite>Citation</cite>
|
||||
</p>
|
||||
<cite>Citation</cite>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<code>Inline Code with <var>variable</var></code>
|
||||
</p>
|
||||
<code>Inline Code with <var>variable</var></code>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<dfn>Definition</dfn>
|
||||
</p>
|
||||
<dfn>Definition</dfn>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<em>Emphasis</em>
|
||||
</p>
|
||||
<em>Emphasis</em>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<i>Idiomatic Text</i>
|
||||
</p>
|
||||
<i>Idiomatic Text</i>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<mark>Mark Text</mark>
|
||||
</p>
|
||||
<mark>Mark Text</mark>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<q>Inline Quotation</q>
|
||||
</p>
|
||||
<q>Inline Quotation</q>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<s>Strikethrough</s>
|
||||
</p>
|
||||
<s>Strikethrough</s>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<samp>Sample Output</samp>
|
||||
</p>
|
||||
<samp>Sample Output</samp>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<small>Side Comment</small>
|
||||
</p>
|
||||
<small>Side Comment</small>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<strong>Strong Importance</strong>
|
||||
</p>
|
||||
<strong>Strong Importance</strong>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<u>Unarticulated Annotation</u>
|
||||
</p>
|
||||
<u>Unarticulated Annotation</u>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<var>Variable</var>
|
||||
</p>
|
||||
<var>Variable</var>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
35
src/rules/skeleton.less
vendored
35
src/rules/skeleton.less
vendored
|
@ -656,6 +656,41 @@
|
|||
color: @cF;
|
||||
}
|
||||
|
||||
/// ===== Lists =====
|
||||
|
||||
@{list} {
|
||||
|
||||
}
|
||||
|
||||
@{list-unordered} {
|
||||
|
||||
}
|
||||
|
||||
@{list-ordered} {
|
||||
|
||||
}
|
||||
|
||||
@{list-item} {
|
||||
margin: 0.35rem 0;
|
||||
|
||||
&::marker {
|
||||
color: @c5;
|
||||
}
|
||||
}
|
||||
|
||||
@{list-description-key} {
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.35rem;
|
||||
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
@{list-description-value} {
|
||||
margin-top: 0.35rem;
|
||||
margin-bottom: 0.7rem;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
/// ===== Status =====
|
||||
/// Status are classes that can be applied to elements to indicate that special interactions are available.
|
||||
|
||||
|
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib2/src/rules/paper.less","/mnt/tera/ext4/code/bluelib2/src/utils/mixins.less"],"names":[],"mappings":"AAAC;AAAM;ECCH,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.root.css"}
|
||||
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib2/src/utils/mixins.less","/mnt/tera/ext4/code/bluelib2/src/rules/paper.less"],"names":[],"mappings":"AAAC;AAAM;EACH,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.root.css"}
|
|
@ -287,6 +287,22 @@
|
|||
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 .list-item {
|
||||
margin: 0.35rem 0;
|
||||
}
|
||||
.bluelib .list-item::marker {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.505);
|
||||
}
|
||||
.bluelib .list-description-key {
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: larger;
|
||||
}
|
||||
.bluelib .list-description-value {
|
||||
margin-top: 0.35rem;
|
||||
margin-bottom: 0.7rem;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.bluelib .status-disabled {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -393,6 +393,34 @@ body .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 li,
|
||||
.bluelib li,
|
||||
body .list-item,
|
||||
.bluelib .list-item {
|
||||
margin: 0.35rem 0;
|
||||
}
|
||||
body li::marker,
|
||||
.bluelib li::marker,
|
||||
body .list-item::marker,
|
||||
.bluelib .list-item::marker {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.505);
|
||||
}
|
||||
body dt,
|
||||
.bluelib dt,
|
||||
body .list-description-key,
|
||||
.bluelib .list-description-key {
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: larger;
|
||||
}
|
||||
body dd,
|
||||
.bluelib dd,
|
||||
body .list-description-value,
|
||||
.bluelib .list-description-value {
|
||||
margin-top: 0.35rem;
|
||||
margin-bottom: 0.7rem;
|
||||
margin-left: 16px;
|
||||
}
|
||||
body [disabled],
|
||||
.bluelib [disabled],
|
||||
body .status-disabled,
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -37,6 +37,14 @@
|
|||
@table-head: ~".table-head";
|
||||
@table-mark: ~".table-mark";
|
||||
|
||||
@list: ~".list";
|
||||
@list-unordered: ~".list-unordered";
|
||||
@list-ordered: ~".list-ordered";
|
||||
@list-definition: ~".list-definition";
|
||||
@list-item: ~".list-item";
|
||||
@list-description-key: ~".list-description-key";
|
||||
@list-description-value: ~".list-description-value";
|
||||
|
||||
@status-disabled: ~".status-disabled";
|
||||
|
||||
@input: ~'.input';
|
||||
|
|
|
@ -38,6 +38,14 @@
|
|||
@table-head: ~"table th, .table-head";
|
||||
@table-mark: ~".table-mark";
|
||||
|
||||
@list: ~"ol, ul, dl, .list";
|
||||
@list-unordered: ~"ul, .list-unordered";
|
||||
@list-ordered: ~"ol, .list-ordered";
|
||||
@list-description: ~"dl, .list-description";
|
||||
@list-item: ~"li, .list-item";
|
||||
@list-description-key: ~"dt, .list-description-key";
|
||||
@list-description-value: ~"dd, .list-description-value";
|
||||
|
||||
@status-disabled: ~"[disabled], .status-disabled";
|
||||
|
||||
@input: ~'@{input-field}, @{input-area}, @{input-select}, @{input-multiselect}, @{input-button}, @{input-checkbox}, @{input-radio}, .input';
|
||||
|
|
Loading…
Reference in a new issue