steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2025-01-03 00:54:20 +00:00
Code Activity

🔧 Reorganize separators and forms

Browse source
This commit is contained in:
Steffo 2021-07-27 04:04:18 +02:00 committed by Stefano Pigozzi
parent ecbc736d6e
commit 35b6e43643
16 changed files with 293 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

218
index.html
View file

@ -41,10 +41,10 @@
</h2>
<section>
<h3>
Panel
Box
</h3>
<p>
This is a panel.
This is a box.
</p>
<p>
It usually represents a section of text about a topic described by the title above.
@ -73,48 +73,18 @@
a panel.
</p>
</aside>
<h2>
Close containers
</h2>
<section>
<p>
Here's what two panels next to each other look like:
</p>
<aside>
<p>
STONKS
</p>
</aside>
<aside>
<p>
STINKS
</p>
</aside>
</section>
<h2>
Nesting containers
</h2>
<section>
<h3>
Level one
Nesting panels
</h3>
<p>
Containers can be nested effortlessly!
</p>
<p>
Drop one outside of any paragraphs and they will nest automatically.
Panels can be nested, as you are about to see:
</p>
<section>
<h3>
Level two
</h3>
<p>
You can add text above...
Nested panels are exactly as regular panels, and they can have text as well.
</p>
<section>
<h3>
Level three
</h3>
<p>
How deep does the rabbit hole go?
</p>
@ -131,50 +101,139 @@
</aside>
</blockquote>
</section>
<p>
...or below!
</p>
</section>
</section>
<section>
<h3>
Panel margins
</h3>
<p>
In most cases, panels adjust their margins automatically.
</p>
<p>
Here's what three blockquotes next to each other look like:
</p>
<blockquote>
<p>
Snake?
</p>
</blockquote>
<blockquote>
<p>
Snake!
</p>
</blockquote>
<blockquote>
<p>
SNAAAAKE!!!
</p>
</blockquote>
</section>
<h2>
Layout
Splits
</h2>
<section>
<h3>
Split
</h3>
<p>
You can split elements into multiple columns.
</p>
<p>
The columns will grow automatically to on the height of the tallest.
You can split panels into multiple columns.
</p>
<div class="split">
<section>
<h3>
Shorter panel
</h3>
<p>
That's it.
</p>
<h3>Left</h3>
</section>
<section>
<h3>
Taller panel
</h3>
<p><a href="https://bit.ly/3ou3jzG">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Giro in barca ma teme che le diverse e
grandi prestazioni morbide. Per essere sempre un letto posuere posuere velit, ac lacinia ai
bordi di un lago. Vestibulum vehicles, metus blandit fringilla of life, volutpat arcu lorem mi,
eget porttitor augue turpis vitae libero. Laghi che ora hanno bisogno solo di proteine presenti
membri del calcio. Nessuna temperatura libera UE. Attualmente le forze dell'ordine sono libere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Calcio scommesse chili ricette
calcio taccuino, con un morbido banane.
</a></p>
<h3>Right</h3>
</section>
</div>
</section>
<section>
<h3>
Split heights
</h3>
<div class="split">
<section>
<h3>
What's happening?
</h3>
<p>
Split panels inherit the height of the tallest.
</p>
</section>
<aside>
<h3>
It's time to waste some space.
</h3>
<p>
Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It’s not a story the Jedi would tell you. It’s a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so wise he could use the Force to influence the midichlorians to create life… He had such a knowledge of the dark side that he could even keep the ones he cared about from dying. The dark side of the Force is a pathway to many abilities some consider to be unnatural. He became so powerful… the only thing he was afraid of was losing his power, which eventually, of course, he did. Unfortunately, he taught his apprentice everything he knew, then his apprentice killed him in his sleep. Ironic. He could save others from death, but not himself.
</p>
</aside>
<section>
<h3>
Split panel types
</h3>
<p>
As you have just seen, splits can include panels of different types.
</p>
</section>
</div>
</section>
<section>
<h3>
Wrapping
</h3>
<p>
You can force a split to wrap:
Splits will automatically wrap if one of their contents won't fit on the screen.
</p>
<div class="split">
<section>
<h3>First</h3>
</section>
<section>
<h3>Second</h3>
</section>
<section>
<h3>Third</h3>
</section>
<section>
<h3>Fourth</h3>
</section>
<section>
<h3>Fifth</h3>
</section>
<section>
<h3>Sixth</h3>
</section>
<section>
<h3>Seventh</h3>
</section>
<section>
<h3>Eigth</h3>
</section>
<section>
<h3>Ninth</h3>
</section>
<section>
<h3>Tenth</h3>
</section>
<section>
<h3>Eleventh</h3>
</section>
<section>
<h3>Twelfth</h3>
</section>
<section>
<h3>Thirtheenth</h3>
</section>
</div>
</section>
<section>
<h3>
Force-wrapping
</h3>
<p>
You can manually force a split to wrap, fixing the vertical gap between the panels.
</p>
<div class="split">
<section>
@ -212,18 +271,47 @@
</section>
</div>
</section>
<h2>
Separators
</h2>
<section>
<h3>
Horizonal rows
Separator
</h3>
<p>
You can add horizontal rows to the page:
Bluelib provides separators, horizontal lines that can be used to separate elements.
</p>
<hr>
<p>
They are very useful as separators!
That was one of them.
</p>
</section>
<div class="split">
<section>
<h3>
Light separator
</h3>
<p>
A lighter separator is available, if the regular color is too much distracting.
</p>
<hr class="separator-light">
<p>
That was one of them.
</p>
</section>
<section>
<h3>
Heavy separator
</h3>
<p>
A heavier separator is available, if the regular color isn't apparent enough.
</p>
<hr class="separator-heavy">
<p>
That was one of them.
</p>
</section>
</div>
<h2>
Formatting
</h2>

3
src/colors/minus.less
View file

@ -14,3 +14,6 @@
@bD: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1.000);
@bE: rgba(calc(var(--bluelib-color-r) - 40), calc(var(--bluelib-color-g) - 40), calc(var(--bluelib-color-b) - 40), 1.000);
@bF: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1.000);
@hex-towards: #000000;
@hex-away: #ffffff;

3
src/colors/plus.less
View file

@ -14,3 +14,6 @@
@bD: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1.000);
@bE: rgba(calc(var(--bluelib-color-r) + 40), calc(var(--bluelib-color-g) + 40), calc(var(--bluelib-color-b) + 40), 1.000);
@bF: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1.000);
@hex-towards: #ffffff;
@hex-away: #000000;

1
src/palettes/paper.less
View file

@ -15,4 +15,3 @@
@hex-link-hover: #006b6b;
@hex-link-active: #004141;
@hex-btn-text: #ffffff;

2
src/palettes/royalblue.less
View file

@ -14,5 +14,3 @@
@hex-link: #00caca;
@hex-link-hover: #00ffff;
@hex-link-active: #a0ffff;
@hex-btn-text: #000000;

51
src/rules/skeleton.less vendored
View file

@ -195,6 +195,23 @@
flex-basis: 100%;
}
/// ===== Separators =====
/// Separators are horizontal lines separating elements.
@{separator} {
border-width: 1px;
border-style: solid;
border-color: @b5;
}
@{separator-light} {
border-color: @b1;
}
@{separator-heavy} {
border-color: @bA;
}
/// --- Images ---
/// Images are changed to block elements and are automatically centered.
@ -220,7 +237,7 @@
max-height: max(37.5vw, 66.6vh);
}
/// --- Forms ---
/// ===== Forms =====
/// Forms are containers where interactable elements are contained.
/// Every interactable is split in two parts: a label on the left and the control on the right
///
@ -276,35 +293,44 @@
margin-bottom: 8px;
}
// --- Buttons ---
/// ===== Buttons =====
/// Buttons are clickable elements which should trigger an action when clicked.
/// Their contents are elements containing either an icon or text, or possibly both.
@{button} {
// Buttons are rendered as inline elements, but should arrange their contents as if they were flex
display: inline-flex;
// Center the button contents both vertically and horizontally
justify-content: center;
align-items: center;
// Disable the operating system appearance for the button
appearance: none;
// Button properties should be set explicitly, as otherwise every browser will display them in a different manner
background-color: @bA;
color: @hex-away;
border: none;
color: @hex-btn-text;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
font-size: inherit;
// Buttons should display a pointer cursor
cursor: pointer;
&:hover {
// Hovered buttons should provide feedback
background-color: @bC;
}
&:focus-visible {
outline: 4px solid @b7 !important;
}
&:active {
// Activated buttons should provide greater feedback
background-color: @bF;
}
// Disabled buttons shouldn't do anything
&@{status-disabled} {
&:hover {
background-color: @bA;
@ -314,6 +340,11 @@
background-color: @bA;
}
}
// If using keyboard navigation, display an outline to make the focused button more evident
&:focus-visible {
outline: 4px solid @b7 !important;
}
}
@{button-fill-width} {
@ -541,12 +572,6 @@
}
@{element-separator} {
border-width: 1px;
border-style: solid;
border-color: @b1;
}
@{element-list-item} {
margin: 10px 0;
}

25
src/targets/paper.module.css
View file

@ -270,6 +270,17 @@
flex-shrink: 0;
flex-basis: 100%;
}
.bluelib .separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
}
.bluelib .separator-light {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.bluelib .separator-heavy {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
.bluelib img,
.bluelib .image {
display: block;
@ -317,9 +328,10 @@
display: inline-flex;
justify-content: center;
align-items: center;
appearance: none;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
border: none;
color: #ffffff;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
@ -329,9 +341,6 @@
.bluelib .button:hover {
background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
}
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
.bluelib .button:active {
background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
}
@ -341,6 +350,9 @@
.bluelib .button.status-disabled:active {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
.bluelib .button-fill-width {
width: 100%;
}
@ -528,11 +540,6 @@
font-family: "Fira Sans", sans-serif;
font-weight: 500;
}
.bluelib .element-separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.bluelib .element-list-item {
margin: 10px 0;
}

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

File diff suppressed because one or more lines are too long

43
src/targets/paper.root.css
View file

@ -387,6 +387,22 @@ body .split-forcewrap,
flex-shrink: 0;
flex-basis: 100%;
}
body hr,
.bluelib hr,
body .separator,
.bluelib .separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
}
body .separator-light,
.bluelib .separator-light {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
body .separator-heavy,
.bluelib .separator-heavy {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
body img,
.bluelib img,
body .image,
@ -465,9 +481,10 @@ body .button,
display: inline-flex;
justify-content: center;
align-items: center;
appearance: none;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
border: none;
color: #ffffff;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
@ -482,14 +499,6 @@ body .button:hover,
.bluelib .button:hover {
background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
}
body button:focus-visible,
.bluelib button:focus-visible,
body input[type="submit"]:focus-visible,
.bluelib input[type="submit"]:focus-visible,
body .button:focus-visible,
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
body button:active,
.bluelib button:active,
body input[type="submit"]:active,
@ -526,6 +535,14 @@ body .button .status-disabled:active,
.bluelib .button .status-disabled:active {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
body button:focus-visible,
.bluelib button:focus-visible,
body input[type="submit"]:focus-visible,
.bluelib input[type="submit"]:focus-visible,
body .button:focus-visible,
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
body .button-fill-width,
.bluelib .button-fill-width {
width: 100%;
@ -1001,14 +1018,6 @@ body h6,
font-family: "Fira Sans", sans-serif;
font-weight: 500;
}
body .element-separator,
.bluelib .element-separator,
body hr,
.bluelib hr {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
body .element-list-item,
.bluelib .element-list-item,
body li,

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

File diff suppressed because one or more lines are too long

25
src/targets/royalblue.module.css
View file

@ -270,6 +270,17 @@
flex-shrink: 0;
flex-basis: 100%;
}
.bluelib .separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
}
.bluelib .separator-light {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.bluelib .separator-heavy {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
.bluelib img,
.bluelib .image {
display: block;
@ -317,9 +328,10 @@
display: inline-flex;
justify-content: center;
align-items: center;
appearance: none;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
border: none;
color: #000000;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
@ -329,9 +341,6 @@
.bluelib .button:hover {
background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
}
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
.bluelib .button:active {
background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
}
@ -341,6 +350,9 @@
.bluelib .button.status-disabled:active {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
.bluelib .button-fill-width {
width: 100%;
}
@ -528,11 +540,6 @@
font-family: "Fira Sans", sans-serif;
font-weight: 500;
}
.bluelib .element-separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.bluelib .element-list-item {
margin: 10px 0;
}

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

File diff suppressed because one or more lines are too long

43
src/targets/royalblue.root.css
View file

@ -387,6 +387,22 @@ body .split-forcewrap,
flex-shrink: 0;
flex-basis: 100%;
}
body hr,
.bluelib hr,
body .separator,
.bluelib .separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
}
body .separator-light,
.bluelib .separator-light {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
body .separator-heavy,
.bluelib .separator-heavy {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
body img,
.bluelib img,
body .image,
@ -465,9 +481,10 @@ body .button,
display: inline-flex;
justify-content: center;
align-items: center;
appearance: none;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
border: none;
color: #000000;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
@ -482,14 +499,6 @@ body .button:hover,
.bluelib .button:hover {
background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
}
body button:focus-visible,
.bluelib button:focus-visible,
body input[type="submit"]:focus-visible,
.bluelib input[type="submit"]:focus-visible,
body .button:focus-visible,
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
body button:active,
.bluelib button:active,
body input[type="submit"]:active,
@ -526,6 +535,14 @@ body .button .status-disabled:active,
.bluelib .button .status-disabled:active {
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
}
body button:focus-visible,
.bluelib button:focus-visible,
body input[type="submit"]:focus-visible,
.bluelib input[type="submit"]:focus-visible,
body .button:focus-visible,
.bluelib .button:focus-visible {
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
}
body .button-fill-width,
.bluelib .button-fill-width {
width: 100%;
@ -1001,14 +1018,6 @@ body h6,
font-family: "Fira Sans", sans-serif;
font-weight: 500;
}
body .element-separator,
.bluelib .element-separator,
body hr,
.bluelib hr {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
body .element-list-item,
.bluelib .element-list-item,
body li,

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

File diff suppressed because one or more lines are too long

5
src/vars/module.less
View file

@ -17,6 +17,10 @@
@split: ~".split";
@split-forcewrap: ~".split-forcewrap";
@separator: ~".separator";
@separator-light: ~".separator-light";
@separator-heavy: ~".separator-heavy";
@image: ~"img, .image";
@image-free: ~".image-free";
@image-limited: ~".image-limited";
@ -46,7 +50,6 @@
@spoiler: ~".spoiler";
@element-title: ~".element-title";
@element-paragraph: ~".element-paragraph";
@element-separator: ~".element-separator";
@element-list-item: ~".element-list-item";
@element-anchor: ~".element-anchor";
@align-left: ~".align-left";

5
src/vars/root.less
View file

@ -17,6 +17,10 @@
@split: ~".split";
@split-forcewrap: ~".split-forcewrap";
@separator: ~"hr, .separator";
@separator-light: ~".separator-light";
@separator-heavy: ~".separator-heavy";
@image: ~"img, .image";
@image-free: ~".image-free";
@image-limited: ~".image-limited";
@ -46,7 +50,6 @@
@spoiler: ~".spoiler";
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
@element-paragraph: ~".element-paragraph, p";
@element-separator: ~".element-separator, hr";
@element-list-item: ~".element-list-item, li";
@element-anchor: ~".element-anchor, a";
@align-left: ~".align-left";