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

🔧 Rename .element-title to .heading

Browse source
This commit is contained in:
Steffo 2021-07-31 16:01:37 +02:00 committed by Stefano Pigozzi
parent 96db002545
commit 7217c882ee
10 changed files with 30 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
index.html
View file

@ -510,207 +510,27 @@
</section> </section>
</div> </div>
<h2> <h2>
Formatting Various elements
</h2> </h2>
<div class="split"> <div class="split">
<section> <section>
<h3> <h3>
Colors Headings
</h3> </h3>
<p> <p>
You can use colored text: Bluelib (and HTML) supports up to 6 levels of headings:
</p> </p>
<ul> <section>
<li><span class="color-red">Red</span></li> <h1>Level-1</h1>
<li><span class="color-orange">Orange</span></li> <h2>Level-2</h2>
<li><span class="color-yellow">Yellow</span></li> <h3>Level-3</h3>
<li><span class="color-lime">Lime</span></li> <h4>Level-4</h4>
<li><span class="color-cyan">Cyan</span></li> <h5>Level-5</h5>
<li><span class="color-blue">Blue</span></li> <h6>Level-6</h6>
<li><span class="color-magenta">Magenta</span></li>
<li><span class="color-gray">Gray</span></li>
</ul>
</section>
<section>
<h3>
Size
</h3>
<p>
You can set the text size:
</p>
<ul>
<li><span class="size-xxl">XXL</span></li>
<li><span class="size-xl">XL</span></li>
<li><span class="size-l">L</span></li>
<li><span class="size-m">M</span></li>
<li><span class="size-s">S</span></li>
<li><span class="size-xs">XS</span></li>
<li><span class="size-xxs">XXS</span></li>
</ul>
</section>
<section>
<h3>
Alignment
</h3>
<p>
You can set the text alignment (<i>only in block elements</i> such as div):
</p>
<div class="align-left">Left</div>
<div class="align-center">Center</div>
<div class="align-right">Right</div>
</section>
<section>
<h3>
Style
</h3>
<p>
You can use all the usual text styles:
</p>
<ul>
<li>Regular</li>
<li><b>Bold</b></li>
<li><i>Italic</i></li>
<li><u>Underlined</u></li>
<li><s>Struck</s></li>
<li><code>Code</code></li>
<li><b><i><u><s><code>All of them together</code></s></u></i></b></li>
</ul>
</section>
</div>
<h2>
Elements
</h2>
<div class="split">
<section>
<h3>
Buttons
</h3>
<p>
Bluelib supports buttons:
</p>
<p>
<button>
Hi, I'm a inline default button!
</button>
&nbsp;or&nbsp;
<input class="color-lime" type="submit" value="Hi, I'm a lime submit button!"/>
</p>
<p>
<button class="button-fill-width color-orange">
I'm stretched horizontally!
</button>
</p>
<p>
<button disabled class="button-fill-width">
Can't click on this!
</button>
</p>
</section>
<section>
<h3>
Toggle buttons
</h3>
<p>
Bluelib supports buttons that can be toggled on and off:
</p>
<p>
<button class="button-toggle button-toggle-off">
Toggled off
</button>
&nbsp;
<button class="button-toggle button-toggle-on">
Toggled on
</button>
</p>
<p>
<button class="button-toggle button-toggle-off color-red">
Colored off
</button>
&nbsp;
<button class="button-toggle button-toggle-on color-lime">
Colored on
</button>
</p>
<p>
<button disabled class="button-toggle button-toggle-off">
Disabled off
</button>
&nbsp;
<button disabled class="button-toggle button-toggle-on">
Disabled on
</button>
</p>
</section>
</div>
<h2>
Coloring panels
</h2>
<div class="split">
<section class="color-red">
<h3>
Panels can be recolored!
</h3>
<p>
Elements contained inside will be recolored accordingly.
</p>
</section>
<blockquote class="color-lime">
<h3>
It works on all types of panels!
</h3>
<p>
This blockquote should be green!
</p>
<hr/>
<p>
And so should be the separator above.
</p>
</blockquote>
<aside class="color-blue">
<h3>
Smol blue aside
</h3>
<p>
The buttons below should be automatically colored blue.
</p>
<button>
Blue button
</button>
<button class="button-toggle button-toggle-off">
Blue toggle off
</button>
<button class="button-toggle button-toggle-on">
Blue toggle on
</button>
</aside>
</div>
<h2>
Interactivity
</h2>
<div class="split">
<section>
<h3>
Tooltips
</h3>
<p>
Text <abbr title="Hello world!">with a tooltip</abbr> is underlined and has a "help" cursor if
hovered.
</p>
</section>
<section>
<h3>
Disabled
</h3>
<p>
Elements can be <span class="status-disabled">disabled</span> to reduce their opacity and display a
"not allowed" cursor if hovered.
</p>
<p>
It also works with <a disabled class="status-disabled">links</a>!
</p>
<section class="status-disabled">
And panels!
</section> </section>
<p>
Generally, panels look nicer if they start with a level-3 heading, but you may use whichever you want, as Bluelib will automatically handle the margin.
</p>
</section> </section>
</div> </div>
</main> </main>

11
src/rules/skeleton.less vendored
View file

@ -890,17 +890,16 @@
//</editor-fold> //</editor-fold>
// --- Elements --- /// ===== Headings =====
/// Headings are titles with a block display.
@{element-title} { @{heading} {
text-align: center; text-align: center;
.map-var-rgb(bluelib-color, bluelib-accent); .map-var-rgb(bluelib-color, bluelib-accent);
.use-var-font(bluelib-title) .use-var-font(bluelib-title);
} }
@{element-paragraph} { // --- Elements ---
}
@{element-list-item} { @{element-list-item} {
margin: 10px 0; margin: 10px 0;

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

@ -1 +1 @@
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/vars/module.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less","/mnt/tera/ext4/code/bluelib/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,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;ECaA,sBAAA;EDcA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"} {"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/paper.less","/mnt/tera/ext4/code/bluelib/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,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;EDaA,sBAAA;ECcA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.module.css"}

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

@ -1 +1 @@
{"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/rules/paper.less","/mnt/tera/ext4/code/bluelib/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,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;EDaA,sBAAA;ECcA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.root.css"} {"version":3,"sources":["/mnt/tera/ext4/code/bluelib/src/vars/root.less","/mnt/tera/ext4/code/bluelib/src/utils/mixins.less","/mnt/tera/ext4/code/bluelib/src/rules/paper.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,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;ECaA,sBAAA;EDcA,kCAAA;EACA,4BAAA;EADA,iCAAA;EACA,6BAAA;EADA,gCAAA;EACA,6BAAA","file":"paper.root.css"}

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

@ -425,7 +425,7 @@
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.bluelib .element-title { .bluelib .heading {
text-align: center; text-align: center;
--bluelib-color-r: var(--bluelib-accent-r); --bluelib-color-r: var(--bluelib-accent-r);
--bluelib-color-g: var(--bluelib-accent-g); --bluelib-color-g: var(--bluelib-accent-g);

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

File diff suppressed because one or more lines are too long

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

@ -1976,8 +1976,6 @@ body .form .form-row,
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
body .element-title,
.bluelib .element-title,
body h1, body h1,
.bluelib h1, .bluelib h1,
body h2, body h2,
@ -1989,7 +1987,9 @@ body h4,
body h5, body h5,
.bluelib h5, .bluelib h5,
body h6, body h6,
.bluelib h6 { .bluelib h6,
body .heading,
.bluelib .heading {
text-align: center; text-align: center;
--bluelib-color-r: var(--bluelib-accent-r); --bluelib-color-r: var(--bluelib-accent-r);
--bluelib-color-g: var(--bluelib-accent-g); --bluelib-color-g: var(--bluelib-accent-g);

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

File diff suppressed because one or more lines are too long

8
src/vars/module.less
View file

@ -46,12 +46,8 @@
@form-group-label: ~'.form-group-label'; @form-group-label: ~'.form-group-label';
@form-group-row: ~'.form-group-row'; @form-group-row: ~'.form-group-row';
@button: ~':not()'; @heading: ~".heading";
@button-fill-width: ~'.button-fill-width';
@button-toggle: ~'.button-toggle';
@button-toggle-off: ~'.button-toggle-off';
@button-toggle-on: ~'.button-toggle-on';
@spoiler: ~".spoiler";
@element-title: ~".element-title"; @element-title: ~".element-title";
@element-paragraph: ~".element-paragraph"; @element-paragraph: ~".element-paragraph";
@element-list-item: ~".element-list-item"; @element-list-item: ~".element-list-item";

8
src/vars/root.less
View file

@ -47,12 +47,8 @@
@form-group-label: ~'> label, .form-group-label'; @form-group-label: ~'> label, .form-group-label';
@form-group-row: ~'.form-group-row'; @form-group-row: ~'.form-group-row';
@button: ~':not()'; @heading: ~"h1, h2, h3, h4, h5, h6, .heading";
@button-fill-width: ~':not()';
@button-toggle: ~':not()';
@button-toggle-off: ~':not()';
@button-toggle-on: ~':not()';
@spoiler: ~".spoiler";
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6"; @element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
@element-paragraph: ~".element-paragraph, p"; @element-paragraph: ~".element-paragraph, p";
@element-list-item: ~".element-list-item, li"; @element-list-item: ~".element-list-item, li";