mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 03:24:20 +00:00
🔧 Rename .element-title to .heading
This commit is contained in:
parent
96db002545
commit
7217c882ee
10 changed files with 30 additions and 219 deletions
200
index.html
200
index.html
|
|
@ -510,207 +510,27 @@
|
|||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Formatting
|
||||
Various elements
|
||||
</h2>
|
||||
<div class="split">
|
||||
<section>
|
||||
<h3>
|
||||
Colors
|
||||
Headings
|
||||
</h3>
|
||||
<p>
|
||||
You can use colored text:
|
||||
Bluelib (and HTML) supports up to 6 levels of headings:
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="color-red">Red</span></li>
|
||||
<li><span class="color-orange">Orange</span></li>
|
||||
<li><span class="color-yellow">Yellow</span></li>
|
||||
<li><span class="color-lime">Lime</span></li>
|
||||
<li><span class="color-cyan">Cyan</span></li>
|
||||
<li><span class="color-blue">Blue</span></li>
|
||||
<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>
|
||||
<h1>Level-1</h1>
|
||||
<h2>Level-2</h2>
|
||||
<h3>Level-3</h3>
|
||||
<h4>Level-4</h4>
|
||||
<h5>Level-5</h5>
|
||||
<h6>Level-6</h6>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Alignment
|
||||
</h3>
|
||||
<p>
|
||||
You can set the text alignment (<i>only in block elements</i> such as div):
|
||||
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>
|
||||
<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>
|
||||
or
|
||||
<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>
|
||||
|
||||
<button class="button-toggle button-toggle-on">
|
||||
Toggled on
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="button-toggle button-toggle-off color-red">
|
||||
Colored off
|
||||
</button>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
11
src/rules/skeleton.less
vendored
11
src/rules/skeleton.less
vendored
|
|
@ -890,17 +890,16 @@
|
|||
|
||||
//</editor-fold>
|
||||
|
||||
// --- Elements ---
|
||||
/// ===== Headings =====
|
||||
/// Headings are titles with a block display.
|
||||
|
||||
@{element-title} {
|
||||
@{heading} {
|
||||
text-align: center;
|
||||
.map-var-rgb(bluelib-color, bluelib-accent);
|
||||
.use-var-font(bluelib-title)
|
||||
.use-var-font(bluelib-title);
|
||||
}
|
||||
|
||||
@{element-paragraph} {
|
||||
|
||||
}
|
||||
// --- Elements ---
|
||||
|
||||
@{element-list-item} {
|
||||
margin: 10px 0;
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
@ -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"}
|
||||
|
|
@ -425,7 +425,7 @@
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bluelib .element-title {
|
||||
.bluelib .heading {
|
||||
text-align: center;
|
||||
--bluelib-color-r: var(--bluelib-accent-r);
|
||||
--bluelib-color-g: var(--bluelib-accent-g);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1976,8 +1976,6 @@ body .form .form-row,
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
body .element-title,
|
||||
.bluelib .element-title,
|
||||
body h1,
|
||||
.bluelib h1,
|
||||
body h2,
|
||||
|
|
@ -1989,7 +1987,9 @@ body h4,
|
|||
body h5,
|
||||
.bluelib h5,
|
||||
body h6,
|
||||
.bluelib h6 {
|
||||
.bluelib h6,
|
||||
body .heading,
|
||||
.bluelib .heading {
|
||||
text-align: center;
|
||||
--bluelib-color-r: var(--bluelib-accent-r);
|
||||
--bluelib-color-g: var(--bluelib-accent-g);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -46,12 +46,8 @@
|
|||
@form-group-label: ~'.form-group-label';
|
||||
@form-group-row: ~'.form-group-row';
|
||||
|
||||
@button: ~':not()';
|
||||
@button-fill-width: ~'.button-fill-width';
|
||||
@button-toggle: ~'.button-toggle';
|
||||
@button-toggle-off: ~'.button-toggle-off';
|
||||
@button-toggle-on: ~'.button-toggle-on';
|
||||
@spoiler: ~".spoiler";
|
||||
@heading: ~".heading";
|
||||
|
||||
@element-title: ~".element-title";
|
||||
@element-paragraph: ~".element-paragraph";
|
||||
@element-list-item: ~".element-list-item";
|
||||
|
|
|
|||
|
|
@ -47,12 +47,8 @@
|
|||
@form-group-label: ~'> label, .form-group-label';
|
||||
@form-group-row: ~'.form-group-row';
|
||||
|
||||
@button: ~':not()';
|
||||
@button-fill-width: ~':not()';
|
||||
@button-toggle: ~':not()';
|
||||
@button-toggle-off: ~':not()';
|
||||
@button-toggle-on: ~':not()';
|
||||
@spoiler: ~".spoiler";
|
||||
@heading: ~"h1, h2, h3, h4, h5, h6, .heading";
|
||||
|
||||
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
|
||||
@element-paragraph: ~".element-paragraph, p";
|
||||
@element-list-item: ~".element-list-item, li";
|
||||
|
|
|
|||
Loading…
Reference in a new issue