mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
🔧 Rework .split (now called .chapter)
This commit is contained in:
parent
7e9b03790d
commit
6245fa9557
8 changed files with 912 additions and 687 deletions
636
index.html
636
index.html
|
|
@ -14,327 +14,217 @@
|
|||
</head>
|
||||
<body class="theme-bluelib">
|
||||
<hgroup>
|
||||
<h1>
|
||||
Bluelib 2
|
||||
</h1>
|
||||
<h2>
|
||||
RYG style, in pure CSS
|
||||
</h2>
|
||||
</hgroup>
|
||||
<div class="layout layout-threecol">
|
||||
<main class="main layout-threecol-center">
|
||||
<section>
|
||||
<h3>
|
||||
Welcome to Bluelib!
|
||||
</h3>
|
||||
<p>
|
||||
This is an example page containing most of the elements present in Bluelib (layouts are obviously missing).
|
||||
</p>
|
||||
<p>
|
||||
This page uses the <code>royalblue.root.css</code> target; other targets are available and may have a different look and/or selector names.
|
||||
</p>
|
||||
<p>
|
||||
To see how an element is constructed, <kbd>Right Click</kbd> it and then press <kbd>Inspect Element</kbd>.
|
||||
</p>
|
||||
<img class="image-limited" src="https://i.imgur.com/M8sFJeO.png" alt="A screenshot showing how to Inspect Element.">
|
||||
</section>
|
||||
<article>
|
||||
<h1>
|
||||
Bluelib 2
|
||||
</h1>
|
||||
<section class="chapter">
|
||||
<h2>
|
||||
Panels
|
||||
</h2>
|
||||
<section>
|
||||
<section class="panel" id="panel-panel">
|
||||
<h3>
|
||||
Panel
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-panel">panel</dfn> is a <b>base container</b> styled with a <b>slight background color</b> and no borders.
|
||||
</p>
|
||||
</section>
|
||||
<section class="panel panel-box" id="panel-box">
|
||||
<h3>
|
||||
Box
|
||||
</h3>
|
||||
<p>
|
||||
This is a box.
|
||||
</p>
|
||||
<p>
|
||||
It usually represents a section of text about a topic described by the title above.
|
||||
A <dfn id="dfn-box">box</dfn> panel is a <b>generic container</b> styled as a <b>box with borders on all four sides</b>.
|
||||
</p>
|
||||
</section>
|
||||
<blockquote>
|
||||
<section class="panel panel-dialog" id="panel-dialog">
|
||||
<h3>
|
||||
Blockquote
|
||||
Dialog
|
||||
</h3>
|
||||
<p>
|
||||
This is a blockquote.
|
||||
A <dfn id="dfn-dialog">dialog</dfn> panel is a <b>container for quotes or dialogues</b>, styled as a box with only the left border.
|
||||
</p>
|
||||
</section>
|
||||
<section class="panel panel-parenthesis" id="panel-parenthesis">
|
||||
<h3>
|
||||
Parenthesis
|
||||
</h3>
|
||||
<p>
|
||||
Blockquotes are specially formatted panels, useful for quotes!
|
||||
A <dfn id="dfn-parenthesis">parenthesis</dfn> panel is a <b>container for text tangentially related to the rest of the document</b>, styled as a box with smaller text and no borders.
|
||||
</p>
|
||||
</section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box" id="panel-dimensions">
|
||||
<h3>
|
||||
Dimensions
|
||||
</h3>
|
||||
<p>
|
||||
Panels always have a <b><code>8px</code> margin</b> and <b><code>8px</code> of padding</b>.
|
||||
</p>
|
||||
<blockquote class="panel panel-dialog">
|
||||
Hi! This is me talking to you, the reader!
|
||||
</blockquote>
|
||||
<aside>
|
||||
<blockquote class="panel panel-dialog">
|
||||
I'm testing panel dimensions!
|
||||
</blockquote>
|
||||
<blockquote class="panel panel-dialog">
|
||||
See? The margin between these dialog panels is consistent!
|
||||
</blockquote>
|
||||
</section>
|
||||
<section class="panel panel-box" id="panel-nesting">
|
||||
<h3>
|
||||
Aside
|
||||
Nesting
|
||||
</h3>
|
||||
<p>
|
||||
This is an aside.
|
||||
Panels of any kind can be <b>infinitely nested</b>.
|
||||
</p>
|
||||
<section class="panel">
|
||||
<p>
|
||||
Asides are panels with no border and smaller text, useful to describe less important things while inside
|
||||
a panel.
|
||||
Like this!
|
||||
</p>
|
||||
</aside>
|
||||
<section>
|
||||
<h3>
|
||||
Nesting panels
|
||||
</h3>
|
||||
<section class="panel">
|
||||
<p>
|
||||
Panels can be nested, as you are about to see:
|
||||
How deep does this rabbit hole go?
|
||||
</p>
|
||||
<section>
|
||||
<section class="panel">
|
||||
<p>
|
||||
Nested panels are exactly as regular panels, and they can have text as well.
|
||||
</p>
|
||||
<section>
|
||||
<p>
|
||||
How deep does the rabbit hole go?
|
||||
</p>
|
||||
<blockquote>
|
||||
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
|
||||
<aside>
|
||||
BWOON.
|
||||
<aside>
|
||||
</p>
|
||||
<section class="panel">
|
||||
<p>
|
||||
BWOON.
|
||||
<aside>
|
||||
</p>
|
||||
<section class="panel">
|
||||
<p>
|
||||
BWOON.
|
||||
</aside>
|
||||
</aside>
|
||||
</aside>
|
||||
</blockquote>
|
||||
</p>
|
||||
<section class="panel">
|
||||
<em>
|
||||
<a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">
|
||||
PANELCEPTION.
|
||||
</a>
|
||||
</em>
|
||||
</section>
|
||||
</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>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-chapters">
|
||||
<h2>
|
||||
Splits
|
||||
Chapters
|
||||
</h2>
|
||||
<section>
|
||||
<section class="panel panel-box" id="panel-chapter">
|
||||
<h3>
|
||||
Split
|
||||
Chapter
|
||||
</h3>
|
||||
<p>
|
||||
You can split panels into multiple columns.
|
||||
A <dfn id="dfn-chapter">chapter</dfn> is a grouping of an heading and multiple panels containing tightly related information.
|
||||
</p>
|
||||
<div class="split">
|
||||
<section>
|
||||
<h3>Left</h3>
|
||||
<blockquote class="panel panel-dialog">
|
||||
You're seeing one right now!
|
||||
</blockquote>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Right</h3>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<section class="panel panel-box" id="panel-panelheights">
|
||||
<h3>
|
||||
Split heights
|
||||
</h3>
|
||||
<div class="split">
|
||||
<section>
|
||||
<h3>
|
||||
What's happening?
|
||||
Panel heights
|
||||
</h3>
|
||||
<p>
|
||||
Split panels inherit the height of the tallest.
|
||||
In a chapter, all panels on a row <b>inherit the height of the tallest panel in it</b>, so that no empty space is left.
|
||||
</p>
|
||||
</section>
|
||||
<aside>
|
||||
<section class="panel panel-box" id="panel-autowrap">
|
||||
<h3>
|
||||
It's time to waste some space.
|
||||
Auto-wrapping
|
||||
</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.
|
||||
Additionaly, panels in a chapter will <b>automatically wrap</b> if their contents won't fit horizontally.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>
|
||||
Wrapping
|
||||
</h3>
|
||||
<p>
|
||||
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>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box" id="panel-forcewrap">
|
||||
<h3>
|
||||
Force-wrapping
|
||||
</h3>
|
||||
<p>
|
||||
You can manually force a split to wrap, fixing the vertical gap between the panels.
|
||||
You can override the automatic wrapping and manually decide where a chapter should wrap by inserting a <dfn id="dfn-forcewrap">force-wrap</dfn> element where you want the chapter to wrap.
|
||||
</p>
|
||||
<div class="split">
|
||||
<section>
|
||||
<h3>First</h3>
|
||||
<section class="panel panel-parenthesis">
|
||||
Due to technical limitations, panels will have a <b><code>16px</code> vertical margin</b> when a chapter is force-wrapped.
|
||||
</section>
|
||||
<section>
|
||||
<h3>Second</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Third</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Fourth</h3>
|
||||
</section>
|
||||
<div class="split-forcewrap"></div>
|
||||
<section>
|
||||
<h3>Fifth</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Sixth</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Seventh</h3>
|
||||
</section>
|
||||
<div class="split-forcewrap"></div>
|
||||
<section>
|
||||
<h3>Eigth</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Ninth</h3>
|
||||
</section>
|
||||
<div class="split-forcewrap"></div>
|
||||
<section>
|
||||
<h3>Tenth</h3>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-separators">
|
||||
<h2>
|
||||
Separators
|
||||
</h2>
|
||||
<section>
|
||||
<section class="panel panel-box" id="panel-separator">
|
||||
<h3>
|
||||
Separator
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib provides separators, horizontal lines that can be used to separate elements.
|
||||
A <dfn id="dfn-separator">separator</dfn> is a <b>horizontal line</b> that fills all the horizontal space available on a panel, forcing a line wrap.
|
||||
</p>
|
||||
<hr>
|
||||
<p>
|
||||
That was one of them.
|
||||
</p>
|
||||
<blockquote class="panel panel-dialog">
|
||||
Top Text
|
||||
</blockquote>
|
||||
</section>
|
||||
<div class="split">
|
||||
<section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box" id="panel-separator-light">
|
||||
<h3>
|
||||
Light separator
|
||||
</h3>
|
||||
<p>
|
||||
A lighter separator is available, if the regular color is too much distracting.
|
||||
A <dfn id="dfn-separator-light">light separator</dfn> is a <b>slightly more transparent separator</b>, to be used if the regular color distracts too much from the flow of the text.
|
||||
</p>
|
||||
<hr class="separator-light">
|
||||
<p>
|
||||
That was one of them.
|
||||
</p>
|
||||
<blockquote class="panel panel-dialog">
|
||||
Bottom Text
|
||||
</blockquote>
|
||||
</section>
|
||||
<section>
|
||||
<section class="panel panel-box" id="panel-separator-heavy">
|
||||
<h3>
|
||||
Heavy separator
|
||||
</h3>
|
||||
<p>
|
||||
A heavier separator is available, if the regular color isn't apparent enough.
|
||||
A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a <b>non-transparent separator</b>, to be used if the regular color isn't apparent enough.
|
||||
</p>
|
||||
<hr class="separator-heavy">
|
||||
<p>
|
||||
That was one of them.
|
||||
</p>
|
||||
<blockquote class="panel panel-dialog">
|
||||
Bottom Text 2: Electric Boogaloo
|
||||
</blockquote>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-images">
|
||||
<h2>
|
||||
Images
|
||||
</h2>
|
||||
<section>
|
||||
<section class="panel panel-box" id="panel-images-default">
|
||||
<h3>
|
||||
Default images
|
||||
Default
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib centers and automatically resizes images to fit the panel they are contained in.
|
||||
Images are <b>automatically centered and resized to fit</b> the panel they are in.
|
||||
</p>
|
||||
<img src="https://i.imgur.com/tpC5y1N.png" alt="Uno reverse card reverses water"/>
|
||||
</section>
|
||||
<section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box" id="panel-limited">
|
||||
<h3>
|
||||
Limited images
|
||||
Limited
|
||||
</h3>
|
||||
<p>
|
||||
Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
|
||||
Images can be <dfn id="dfn-limited">limited</dfn> to <b>prevent them from taking up too much screen space</b>.
|
||||
</p>
|
||||
<div class="split">
|
||||
<section>
|
||||
<div class="chapter">
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Half
|
||||
</h3>
|
||||
|
|
@ -343,7 +233,7 @@
|
|||
</p>
|
||||
<img class="image-limit-half" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
|
||||
</section>
|
||||
<section>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Quarter
|
||||
</h3>
|
||||
|
|
@ -354,40 +244,176 @@
|
|||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-status">
|
||||
<h2>
|
||||
Status
|
||||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Status
|
||||
</h3>
|
||||
<p>
|
||||
Status are classes that can be applied to elements to mark some special interaction property.
|
||||
</p>
|
||||
<div class="split">
|
||||
<section class="status-disabled">
|
||||
<section class="panel panel-box" id="panel-disabled">
|
||||
<h3>
|
||||
Disabled
|
||||
</h3>
|
||||
<p>
|
||||
Disabled elements appear transparent, non-interactable and display a <code>not-allowed</code> cursor if hovered.
|
||||
An element can be <dfn id="dfn-disabled">disabled</dfn> to make it <b>partially transparent</b>, <b>non-interactable</b> and <b>displaying the <code>not-allowed</code> cursor</b> when hovered.
|
||||
</p>
|
||||
<p>
|
||||
Any element, from a <code><span></code> to a chapter, can be disabled.
|
||||
</p>
|
||||
<section class="panel panel-dialog status-disabled">
|
||||
Please re-enable me, I did nothing wrong! I just said "AMOGU—"
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-inputs">
|
||||
<h2>
|
||||
Inputs
|
||||
</h2>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Input
|
||||
</h3>
|
||||
<p>
|
||||
An <dfn id="dfn-input">input</dfn> is an interactive element that allows the reader of the page to interact with it.
|
||||
</p>
|
||||
<p>
|
||||
They come in multiple kinds:
|
||||
</p>
|
||||
<section class="chapter">
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Field
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-input-field">field</dfn> is an input where the user can <b>insert text</b> with their keyboard.
|
||||
</p>
|
||||
<!--suppress HtmlFormInputWithoutLabel -->
|
||||
<input type="text" placeholder="This is called a placeholder, by the way."/>
|
||||
</section>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Select
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-input-select">select</dfn> is an input where the user can select <b>one between multiple options</b>.
|
||||
</p>
|
||||
<!--suppress HtmlFormInputWithoutLabel -->
|
||||
<select>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<optgroup label="3">
|
||||
<option>3.1</option>
|
||||
<option>3.2</option>
|
||||
<option>3.3</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Area
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-input-area">area</dfn> is a <b>resizable</b> input where the user can <b>insert multiple lines of text</b> with their keyboard.
|
||||
</p>
|
||||
<!--suppress HtmlFormInputWithoutLabel -->
|
||||
<textarea placeholder="Write something here!"></textarea>
|
||||
</section>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Multiselect
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-input-multiselect">multiselect</dfn> is an input where the user can select <b>many options from a list</b>.
|
||||
</p>
|
||||
<!--suppress HtmlFormInputWithoutLabel -->
|
||||
<select multiple>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<optgroup label="3">
|
||||
<option>3.1</option>
|
||||
<option>3.2</option>
|
||||
<option>3.3</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Radio
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-input-radio">radio</dfn> is an input which the user can <b>either select or not</b>, deselecting the other radios with the same name.
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="input-radio-example"/> 1
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="input-radio-example"/> 2
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="input-radio-example"/> 3
|
||||
</label>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Checkbox
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-input-checkbox">checkbox</dfn> is an input which the user can <b>either select or not</b>.
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox" name="input-checkbox-example"/> 1
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox" name="input-checkbox-example"/> 2
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox" name="input-checkbox-example"/> 3
|
||||
</label>
|
||||
</p>
|
||||
</section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Button
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-input-button">button</dfn> is an input which the user can <b>interact with to trigger a reaction</b>.
|
||||
</p>
|
||||
<p>
|
||||
<button>
|
||||
Do nothing
|
||||
</button>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter" id="chapter-forms">
|
||||
<h2>
|
||||
Forms
|
||||
</h2>
|
||||
<div class="split">
|
||||
<section>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Inputs
|
||||
Forms, labels and inputs
|
||||
</h3>
|
||||
<p>
|
||||
A <dfn id="dfn-form">form</dfn> is a grouping of <dfn id="dfn-label">labels</dfn> and <i>inputs</i> with the same purpose, with the <b>former describing what should be entered in the latter</b>.
|
||||
</p>
|
||||
<form>
|
||||
<label for="input-text">Text</label>
|
||||
<input id="input-text" type="text" placeholder="All fields have a customizable placeholder" required/>
|
||||
<label for="input-password">Password</label>
|
||||
<input id="input-password" type="password" placeholder="Field type determines how input is displayed" required/>
|
||||
<label for="input-username">Username</label>
|
||||
<input id="input-username" type="text" placeholder="Required fields have regular text" required/>
|
||||
<label for="input-phone">Phone</label>
|
||||
<input id="input-phone" type="tel" placeholder="Optional fields have italic text"/>
|
||||
<label for="input-fax">Fax</label>
|
||||
|
|
@ -417,21 +443,18 @@
|
|||
<option>Cyan</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div class="form-row">
|
||||
<input id="input-reset-1" type="reset" value="Reset"/>
|
||||
<input id="input-submit-1" type="submit" value="Submit"/>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Groups
|
||||
Form groups
|
||||
</h3>
|
||||
<p>
|
||||
Form inputs can be grouped together.
|
||||
Inputs such as <i>radios</i> or <i>checkboxes</i> should be <em>grouped</em> together when inserted in a form.
|
||||
</p>
|
||||
<form>
|
||||
<label for="input-mood">Mood</label>
|
||||
<label for="input-mood">Current mood</label>
|
||||
<div id="input-mood" class="form-group">
|
||||
<label>
|
||||
<input type="radio" name="input-mood" value="happy"/>
|
||||
|
|
@ -448,10 +471,10 @@
|
|||
</div>
|
||||
</form>
|
||||
<p>
|
||||
They automatically wrap if the inputs don't fit on a single line.
|
||||
Groups <b>automatically wrap</b> if the inputs don't fit on a single line.
|
||||
</p>
|
||||
<form>
|
||||
<label for="input-pets">Pets</label>
|
||||
<label for="input-pets">Owned pets</label>
|
||||
<div id="input-pets" class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" name="input-pets" value="cats"/>
|
||||
|
|
@ -483,8 +506,13 @@
|
|||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Row groups
|
||||
</h3>
|
||||
<p>
|
||||
Labels can be made to fill the whole line, forcing a wrap.
|
||||
A <dfn id="dfn-form-groups-row">row group</dfn> is a <b>form group</b> where the <b>inputs are arranged vertically</b> instead of horizontally.
|
||||
</p>
|
||||
<form>
|
||||
<label for="input-roman">Fav. roman numeral</label>
|
||||
|
|
@ -503,70 +531,103 @@
|
|||
</label>
|
||||
<label class="form-group-row">
|
||||
<input type="radio" name="input-roman" value="i" required/>
|
||||
I (1)
|
||||
L (50)
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<div class="chapter-forcewrap"></div>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Form rows
|
||||
</h3>
|
||||
<p>
|
||||
Forms can also contain <dfn id="dfn-form-row">form rows</dfn>, elements which ignore the form columns and instead <b>take up the whole row</b>.
|
||||
</p>
|
||||
<form>
|
||||
<label for="input-email">Email</label>
|
||||
<input id="input-email" type="email" placeholder="Enter your email here" required/>
|
||||
<label for="input-password">Password</label>
|
||||
<input id="input-password" type="text" placeholder="Enter your password here" required/>
|
||||
<div class="form-row">
|
||||
<blockquote class="panel panel-parenthesis">
|
||||
By logging in, you agree to sell your soul to the devil and to be tracked endlessly by all the corporations in the world.
|
||||
</blockquote>
|
||||
</div>
|
||||
<label for="input-consent">Consent</label>
|
||||
<div id="input-consent" class="form-group">
|
||||
<label class="form-group-row">
|
||||
<input type="checkbox" name="input-consent" value="accept"/>
|
||||
I accept the conditions detailed above
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<input id="input-reset-2" type="reset" value="Reset"/>
|
||||
<input id="input-submit-2" type="submit" value="Submit"/>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter">
|
||||
<h2>
|
||||
Various elements
|
||||
</h2>
|
||||
<div class="split">
|
||||
<section>
|
||||
Common elements
|
||||
</h2><section class="panel panel-box">
|
||||
<h3>
|
||||
Headings
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib styles up to 6 levels of headings:
|
||||
An <dfn id="dfn-heading">heading</dfn> is the <b>title</b> of an article, chapter or panel.
|
||||
</p>
|
||||
<section class="panel panel-box">
|
||||
<h1>Level-1</h1>
|
||||
<h2>Level-2</h2>
|
||||
<h3>Level-3</h3>
|
||||
<h4>Level-4</h4>
|
||||
<h5>Level-5</h5>
|
||||
<h6>Level-6</h6>
|
||||
<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>
|
||||
<blockquote class="panel panel-dialog">
|
||||
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.
|
||||
</blockquote>
|
||||
</section>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
Anchors
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib styles anchors, clickable links to different places:
|
||||
An <dfn id="dfn-anchor">anchor</dfn> is a part of text which can be clicked to move to a different page or part of page.
|
||||
</p>
|
||||
<blockquote>
|
||||
This is an <a href="https://example.org" target="_blank">example</a>.
|
||||
</blockquote>
|
||||
<section class="panel panel-box">
|
||||
This is an <a href="https://example.org" target="_blank">example anchor</a>.
|
||||
</section>
|
||||
<p>
|
||||
Visited anchors will have a different color.
|
||||
Visited anchors have a slightly different color.
|
||||
</p>
|
||||
<blockquote>
|
||||
<section class="panel panel-box">
|
||||
Take me to <a href="https://wikipedia.org" target="_blank">Wikipedia</a>!
|
||||
</blockquote>
|
||||
</section>
|
||||
<p>
|
||||
Anchors with no destination have a different style, so that the page author can notice and fix them.
|
||||
Anchors with no destination are colored differently, so that the page author can notice and fix them.
|
||||
</p>
|
||||
<blockquote>
|
||||
<section class="panel panel-box">
|
||||
<a>This link</a> leads nowhere.
|
||||
</blockquote>
|
||||
</section>
|
||||
<p>
|
||||
Anchors which start a download or open an external program will have a different style:
|
||||
Anchors which start a download or open an external program have also have slightly different color.
|
||||
</p>
|
||||
<blockquote>
|
||||
Download <a href="magnet:?xt=urn:btih:377852690518c09acdcdd970068a5eaa47dd0a9d&dn=gimp-2.10.24-setup-3.exe&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2ftracker.coppersurfer.tk%3a6969%2fannounce&tr=udp%3a%2f%2ftracker.leechers-paradise.org%3a6969%2fannounce&tr=https%3a%2f%2fashrise.com%3a443%2fphoenix%2fannounce&tr=udp%3a%2f%2ftracker.openbittorrent.com%3a80%2fannounce&ws=https%3a%2f%2fartfiles.org%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fdownload.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.acc.umu.se%2fpub%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.cc.uoc.gr%2fmirrors%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.fau.de%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.gwdg.de%2fpub%2fmisc%2fgrafik%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.icm.edu.pl%2fpub%2fgraphics%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.lysator.liu.se%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.snt.utwente.nl%2fpub%2fsoftware%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fgimp.ip-connect.info%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.jaleco.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.klaus-uwe.me%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.umd.edu%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.dotsrc.org%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.syringanetworks.net%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.ukfast.co.uk%2fsites%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.xmission.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.mirrorservice.org%2fsites%2fftp.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.nic.funet.fi%2fpub%2fmirrors%2fftp.gimp.org%2fv2.10%2fwindows%2f">
|
||||
<section class="panel panel-box">
|
||||
Download <!--suppress HtmlUnknownTarget -->
|
||||
<a href="magnet:?xt=urn:btih:377852690518c09acdcdd970068a5eaa47dd0a9d&dn=gimp-2.10.24-setup-3.exe&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2ftracker.coppersurfer.tk%3a6969%2fannounce&tr=udp%3a%2f%2ftracker.leechers-paradise.org%3a6969%2fannounce&tr=https%3a%2f%2fashrise.com%3a443%2fphoenix%2fannounce&tr=udp%3a%2f%2ftracker.openbittorrent.com%3a80%2fannounce&ws=https%3a%2f%2fartfiles.org%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fdownload.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.acc.umu.se%2fpub%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.cc.uoc.gr%2fmirrors%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.fau.de%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.gwdg.de%2fpub%2fmisc%2fgrafik%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.icm.edu.pl%2fpub%2fgraphics%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.lysator.liu.se%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.snt.utwente.nl%2fpub%2fsoftware%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fgimp.ip-connect.info%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.jaleco.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.klaus-uwe.me%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.umd.edu%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.dotsrc.org%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.syringanetworks.net%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.ukfast.co.uk%2fsites%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.xmission.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.mirrorservice.org%2fsites%2fftp.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.nic.funet.fi%2fpub%2fmirrors%2fftp.gimp.org%2fv2.10%2fwindows%2f">
|
||||
GIMP 2.10.24
|
||||
</a>
|
||||
</blockquote>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="chapter">
|
||||
<h2>
|
||||
Annotations
|
||||
</h2>
|
||||
<div class="split">
|
||||
<section>
|
||||
<section class="panel panel-box">
|
||||
<h3>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby">Ruby text</a>
|
||||
</h3>
|
||||
|
|
@ -592,18 +653,11 @@
|
|||
</ruby>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<div class="split">
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<nav class="layout-threecol-left">
|
||||
<section>
|
||||
I'm wrong. :(
|
||||
</section>
|
||||
</nav>
|
||||
<nav class="layout-threecol-right">
|
||||
<section>
|
||||
I'm right! ;P
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
src/rules/skeleton.less
vendored
73
src/rules/skeleton.less
vendored
|
|
@ -449,49 +449,74 @@
|
|||
}
|
||||
|
||||
// A panel which encloses its contents with a quote-like border.
|
||||
@{panel-blockquote} {
|
||||
@{panel-dialog} {
|
||||
border-radius: 4px;
|
||||
border-width: 0 0 0 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
// A panel with no border whose contents are made smaller.
|
||||
@{panel-aside} {
|
||||
@{panel-parenthesis} {
|
||||
border-width: 0;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
//</editor-fold>
|
||||
|
||||
/// ===== Splits =====
|
||||
/// A split is an element which splits everything contained inside in multiple columns of equal width.
|
||||
/// ===== Chapters =====
|
||||
/// A chapter is an element represents a larger section of text.
|
||||
|
||||
//<editor-fold desc="Rules: Splits">
|
||||
//<editor-fold desc="Rules: Chapters">
|
||||
|
||||
@{split} {
|
||||
@{chapter} {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
margin: 8px 0;
|
||||
|
||||
> @{all} {
|
||||
// Allow all children to grow
|
||||
flex-grow: 1;
|
||||
// But not to shrink
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@{HEADING} {
|
||||
// Headings should fill up all horizontal space available and force a wrap
|
||||
flex-basis: 100%;
|
||||
|
||||
// They should have a bit of margin to separate them from the other elements
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
// Especially if they are the first or the last children of a chapter, where they have to separate the chapters from each other
|
||||
&:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
> @{panel} {
|
||||
// Add a horizontal margin to panels
|
||||
// Remove the innate margin panels have
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Allow contained elements to grow
|
||||
> @{all} {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
// Have panels split the free space in equal parts
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Force a split to wrap
|
||||
@{split-forcewrap} {
|
||||
@{chapter-forcewrap} {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 100%;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
//</editor-fold>
|
||||
|
|
@ -568,6 +593,9 @@
|
|||
// Disable the browser font override
|
||||
font: inherit;
|
||||
|
||||
// Use the maximum width possible
|
||||
width: 100%;
|
||||
|
||||
// They should have a solid border
|
||||
border-style: solid;
|
||||
// Unless they are disabled, then they should have a dashed one
|
||||
|
|
@ -650,6 +678,14 @@
|
|||
padding: 6px;
|
||||
}
|
||||
|
||||
@{input-area} {
|
||||
cursor: text;
|
||||
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
/// Selects are inputs where one option between many can be selected
|
||||
@{input-select} {
|
||||
cursor: context-menu;
|
||||
|
|
@ -858,7 +894,6 @@
|
|||
grid-column: 2;
|
||||
// They should occupy all the available space
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Groups are similar to form-inputs, but may contain multiple inputs inside them
|
||||
|
|
@ -907,6 +942,10 @@
|
|||
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@{panel} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -161,34 +161,48 @@
|
|||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
.bluelib .panel-blockquote {
|
||||
.bluelib .panel-dialog {
|
||||
border-radius: 4px;
|
||||
border-width: 0 0 0 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
.bluelib .panel-aside {
|
||||
.bluelib .panel-parenthesis {
|
||||
border-width: 0;
|
||||
font-size: smaller;
|
||||
}
|
||||
.bluelib .split {
|
||||
.bluelib .chapter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.bluelib .split > .panel {
|
||||
margin: 0;
|
||||
}
|
||||
.bluelib .split > *,
|
||||
.bluelib .split .all {
|
||||
.bluelib .chapter > *,
|
||||
.bluelib .chapter .all {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bluelib .chapter > .heading {
|
||||
flex-basis: 100%;
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.bluelib .chapter > .heading:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.bluelib .chapter > .heading:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.bluelib .chapter > .panel {
|
||||
margin: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
.bluelib .split-forcewrap {
|
||||
.bluelib .chapter-forcewrap {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.bluelib .separator {
|
||||
border-width: 1px;
|
||||
|
|
@ -225,6 +239,7 @@
|
|||
}
|
||||
.bluelib .input {
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
|
|
@ -276,6 +291,12 @@
|
|||
border-radius: 4px 4px 0 0;
|
||||
padding: 6px;
|
||||
}
|
||||
.bluelib .input-area {
|
||||
cursor: text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 6px;
|
||||
}
|
||||
.bluelib .input-select {
|
||||
cursor: context-menu;
|
||||
border-width: 0 0 2px 0;
|
||||
|
|
@ -399,7 +420,6 @@
|
|||
.bluelib .form .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .form .form-group {
|
||||
grid-column: 2;
|
||||
|
|
@ -435,6 +455,9 @@
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bluelib .form .form-row .panel {
|
||||
margin: 0;
|
||||
}
|
||||
.bluelib .heading {
|
||||
text-align: center;
|
||||
--bluelib-color-r: var(--bluelib-accent-r);
|
||||
|
|
@ -493,6 +516,15 @@
|
|||
--bluelib-color-b: var(--bluelib-download-b);
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
.bluelib .ruby {
|
||||
font-size: xx-large;
|
||||
}
|
||||
.bluelib .ruby-parenthesis {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
.bluelib .ruby-text {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
}
|
||||
.bluelib .color-red {
|
||||
--bluelib-color-r: var(--bluelib-red-r);
|
||||
--bluelib-color-g: var(--bluelib-red-g);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -160,19 +160,7 @@ body .layout-threecol-right,
|
|||
}
|
||||
}
|
||||
body .panel,
|
||||
.bluelib .panel,
|
||||
body section,
|
||||
.bluelib section,
|
||||
body .panel-box,
|
||||
.bluelib .panel-box,
|
||||
body .panel-blockquote,
|
||||
.bluelib .panel-blockquote,
|
||||
body blockquote,
|
||||
.bluelib blockquote,
|
||||
body .panel-aside,
|
||||
.bluelib .panel-aside,
|
||||
body aside,
|
||||
.bluelib aside {
|
||||
.bluelib .panel {
|
||||
margin: 8px 0;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
|
|
@ -180,94 +168,105 @@ body aside,
|
|||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
body .panel > *:first-child,
|
||||
.bluelib .panel > *:first-child,
|
||||
body section > *:first-child,
|
||||
.bluelib section > *:first-child,
|
||||
body .panel-box > *:first-child,
|
||||
.bluelib .panel-box > *:first-child,
|
||||
body .panel-blockquote > *:first-child,
|
||||
.bluelib .panel-blockquote > *:first-child,
|
||||
body blockquote > *:first-child,
|
||||
.bluelib blockquote > *:first-child,
|
||||
body .panel-aside > *:first-child,
|
||||
.bluelib .panel-aside > *:first-child,
|
||||
body aside > *:first-child,
|
||||
.bluelib aside > *:first-child {
|
||||
.bluelib .panel > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
body .panel > *:last-child,
|
||||
.bluelib .panel > *:last-child,
|
||||
body section > *:last-child,
|
||||
.bluelib section > *:last-child,
|
||||
body .panel-box > *:last-child,
|
||||
.bluelib .panel-box > *:last-child,
|
||||
body .panel-blockquote > *:last-child,
|
||||
.bluelib .panel-blockquote > *:last-child,
|
||||
body blockquote > *:last-child,
|
||||
.bluelib blockquote > *:last-child,
|
||||
body .panel-aside > *:last-child,
|
||||
.bluelib .panel-aside > *:last-child,
|
||||
body aside > *:last-child,
|
||||
.bluelib aside > *:last-child {
|
||||
.bluelib .panel > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body section,
|
||||
.bluelib section,
|
||||
body .panel-box,
|
||||
.bluelib .panel-box {
|
||||
border-radius: 4px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
body .panel-blockquote,
|
||||
.bluelib .panel-blockquote,
|
||||
body blockquote,
|
||||
.bluelib blockquote {
|
||||
body .panel-dialog,
|
||||
.bluelib .panel-dialog {
|
||||
border-radius: 4px;
|
||||
border-width: 0 0 0 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
body .panel-aside,
|
||||
.bluelib .panel-aside,
|
||||
body aside,
|
||||
.bluelib aside {
|
||||
body .panel-parenthesis,
|
||||
.bluelib .panel-parenthesis {
|
||||
border-width: 0;
|
||||
font-size: smaller;
|
||||
}
|
||||
body .split,
|
||||
.bluelib .split {
|
||||
body .chapter,
|
||||
.bluelib .chapter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
margin: 8px 0;
|
||||
}
|
||||
body .split > .panel,
|
||||
.bluelib .split > .panel,
|
||||
body .split section,
|
||||
.bluelib .split section,
|
||||
body .split .panel-box,
|
||||
.bluelib .split .panel-box,
|
||||
body .split .panel-blockquote,
|
||||
.bluelib .split .panel-blockquote,
|
||||
body .split blockquote,
|
||||
.bluelib .split blockquote,
|
||||
body .split .panel-aside,
|
||||
.bluelib .split .panel-aside,
|
||||
body .split aside,
|
||||
.bluelib .split aside {
|
||||
margin: 0;
|
||||
}
|
||||
body .split > *,
|
||||
.bluelib .split > * {
|
||||
body .chapter > *,
|
||||
.bluelib .chapter > * {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
body .chapter > h1,
|
||||
.bluelib .chapter > h1,
|
||||
body .chapter > h2,
|
||||
.bluelib .chapter > h2,
|
||||
body .chapter > h3,
|
||||
.bluelib .chapter > h3,
|
||||
body .chapter > h4,
|
||||
.bluelib .chapter > h4,
|
||||
body .chapter > h5,
|
||||
.bluelib .chapter > h5,
|
||||
body .chapter > h6,
|
||||
.bluelib .chapter > h6,
|
||||
body .chapter > .heading,
|
||||
.bluelib .chapter > .heading {
|
||||
flex-basis: 100%;
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
body .chapter > h1:first-child,
|
||||
.bluelib .chapter > h1:first-child,
|
||||
body .chapter > h2:first-child,
|
||||
.bluelib .chapter > h2:first-child,
|
||||
body .chapter > h3:first-child,
|
||||
.bluelib .chapter > h3:first-child,
|
||||
body .chapter > h4:first-child,
|
||||
.bluelib .chapter > h4:first-child,
|
||||
body .chapter > h5:first-child,
|
||||
.bluelib .chapter > h5:first-child,
|
||||
body .chapter > h6:first-child,
|
||||
.bluelib .chapter > h6:first-child,
|
||||
body .chapter > .heading:first-child,
|
||||
.bluelib .chapter > .heading:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
body .chapter > h1:last-child,
|
||||
.bluelib .chapter > h1:last-child,
|
||||
body .chapter > h2:last-child,
|
||||
.bluelib .chapter > h2:last-child,
|
||||
body .chapter > h3:last-child,
|
||||
.bluelib .chapter > h3:last-child,
|
||||
body .chapter > h4:last-child,
|
||||
.bluelib .chapter > h4:last-child,
|
||||
body .chapter > h5:last-child,
|
||||
.bluelib .chapter > h5:last-child,
|
||||
body .chapter > h6:last-child,
|
||||
.bluelib .chapter > h6:last-child,
|
||||
body .chapter > .heading:last-child,
|
||||
.bluelib .chapter > .heading:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
body .chapter > .panel,
|
||||
.bluelib .chapter > .panel {
|
||||
margin: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
body .split-forcewrap,
|
||||
.bluelib .split-forcewrap {
|
||||
body .chapter-forcewrap,
|
||||
.bluelib .chapter-forcewrap {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 100%;
|
||||
position: relative;
|
||||
}
|
||||
body hr,
|
||||
.bluelib hr,
|
||||
|
|
@ -351,6 +350,10 @@ body input[type="url"],
|
|||
.bluelib input[type="url"],
|
||||
body input[type="week"],
|
||||
.bluelib input[type="week"],
|
||||
body textarea,
|
||||
.bluelib textarea,
|
||||
body .input-area,
|
||||
.bluelib .input-area,
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
|
|
@ -378,6 +381,7 @@ body .input-radio,
|
|||
body .input,
|
||||
.bluelib .input {
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
|
|
@ -415,6 +419,10 @@ body input[type="url"][disabled],
|
|||
.bluelib input[type="url"][disabled],
|
||||
body input[type="week"][disabled],
|
||||
.bluelib input[type="week"][disabled],
|
||||
body textarea[disabled],
|
||||
.bluelib textarea[disabled],
|
||||
body .input-area[disabled],
|
||||
.bluelib .input-area[disabled],
|
||||
body select:not([multiple])[disabled],
|
||||
.bluelib select:not([multiple])[disabled],
|
||||
body .input-select[disabled],
|
||||
|
|
@ -473,6 +481,10 @@ body input[type="url"] .status-disabled,
|
|||
.bluelib input[type="url"] .status-disabled,
|
||||
body input[type="week"] .status-disabled,
|
||||
.bluelib input[type="week"] .status-disabled,
|
||||
body textarea .status-disabled,
|
||||
.bluelib textarea .status-disabled,
|
||||
body .input-area .status-disabled,
|
||||
.bluelib .input-area .status-disabled,
|
||||
body select:not([multiple]) .status-disabled,
|
||||
.bluelib select:not([multiple]) .status-disabled,
|
||||
body .input-select .status-disabled,
|
||||
|
|
@ -533,6 +545,10 @@ body input[type="url"]::placeholder,
|
|||
.bluelib input[type="url"]::placeholder,
|
||||
body input[type="week"]::placeholder,
|
||||
.bluelib input[type="week"]::placeholder,
|
||||
body textarea::placeholder,
|
||||
.bluelib textarea::placeholder,
|
||||
body .input-area::placeholder,
|
||||
.bluelib .input-area::placeholder,
|
||||
body select:not([multiple])::placeholder,
|
||||
.bluelib select:not([multiple])::placeholder,
|
||||
body .input-select::placeholder,
|
||||
|
|
@ -594,6 +610,10 @@ body input[type="url"]:hover,
|
|||
.bluelib input[type="url"]:hover,
|
||||
body input[type="week"]:hover,
|
||||
.bluelib input[type="week"]:hover,
|
||||
body textarea:hover,
|
||||
.bluelib textarea:hover,
|
||||
body .input-area:hover,
|
||||
.bluelib .input-area:hover,
|
||||
body select:not([multiple]):hover,
|
||||
.bluelib select:not([multiple]):hover,
|
||||
body .input-select:hover,
|
||||
|
|
@ -656,6 +676,10 @@ body input[type="url"]:hover::placeholder,
|
|||
.bluelib input[type="url"]:hover::placeholder,
|
||||
body input[type="week"]:hover::placeholder,
|
||||
.bluelib input[type="week"]:hover::placeholder,
|
||||
body textarea:hover::placeholder,
|
||||
.bluelib textarea:hover::placeholder,
|
||||
body .input-area:hover::placeholder,
|
||||
.bluelib .input-area:hover::placeholder,
|
||||
body select:not([multiple]):hover::placeholder,
|
||||
.bluelib select:not([multiple]):hover::placeholder,
|
||||
body .input-select:hover::placeholder,
|
||||
|
|
@ -716,6 +740,10 @@ body input[type="url"]:focus,
|
|||
.bluelib input[type="url"]:focus,
|
||||
body input[type="week"]:focus,
|
||||
.bluelib input[type="week"]:focus,
|
||||
body textarea:focus,
|
||||
.bluelib textarea:focus,
|
||||
body .input-area:focus,
|
||||
.bluelib .input-area:focus,
|
||||
body select:not([multiple]):focus,
|
||||
.bluelib select:not([multiple]):focus,
|
||||
body .input-select:focus,
|
||||
|
|
@ -778,6 +806,10 @@ body input[type="url"]:focus::placeholder,
|
|||
.bluelib input[type="url"]:focus::placeholder,
|
||||
body input[type="week"]:focus::placeholder,
|
||||
.bluelib input[type="week"]:focus::placeholder,
|
||||
body textarea:focus::placeholder,
|
||||
.bluelib textarea:focus::placeholder,
|
||||
body .input-area:focus::placeholder,
|
||||
.bluelib .input-area:focus::placeholder,
|
||||
body select:not([multiple]):focus::placeholder,
|
||||
.bluelib select:not([multiple]):focus::placeholder,
|
||||
body .input-select:focus::placeholder,
|
||||
|
|
@ -838,6 +870,10 @@ body input[type="url"][disabled]:hover,
|
|||
.bluelib input[type="url"][disabled]:hover,
|
||||
body input[type="week"][disabled]:hover,
|
||||
.bluelib input[type="week"][disabled]:hover,
|
||||
body textarea[disabled]:hover,
|
||||
.bluelib textarea[disabled]:hover,
|
||||
body .input-area[disabled]:hover,
|
||||
.bluelib .input-area[disabled]:hover,
|
||||
body select:not([multiple])[disabled]:hover,
|
||||
.bluelib select:not([multiple])[disabled]:hover,
|
||||
body .input-select[disabled]:hover,
|
||||
|
|
@ -896,6 +932,10 @@ body input[type="url"] .status-disabled:hover,
|
|||
.bluelib input[type="url"] .status-disabled:hover,
|
||||
body input[type="week"] .status-disabled:hover,
|
||||
.bluelib input[type="week"] .status-disabled:hover,
|
||||
body textarea .status-disabled:hover,
|
||||
.bluelib textarea .status-disabled:hover,
|
||||
body .input-area .status-disabled:hover,
|
||||
.bluelib .input-area .status-disabled:hover,
|
||||
body select:not([multiple]) .status-disabled:hover,
|
||||
.bluelib select:not([multiple]) .status-disabled:hover,
|
||||
body .input-select .status-disabled:hover,
|
||||
|
|
@ -954,6 +994,10 @@ body input[type="url"][disabled]:focus,
|
|||
.bluelib input[type="url"][disabled]:focus,
|
||||
body input[type="week"][disabled]:focus,
|
||||
.bluelib input[type="week"][disabled]:focus,
|
||||
body textarea[disabled]:focus,
|
||||
.bluelib textarea[disabled]:focus,
|
||||
body .input-area[disabled]:focus,
|
||||
.bluelib .input-area[disabled]:focus,
|
||||
body select:not([multiple])[disabled]:focus,
|
||||
.bluelib select:not([multiple])[disabled]:focus,
|
||||
body .input-select[disabled]:focus,
|
||||
|
|
@ -1012,6 +1056,10 @@ body input[type="url"] .status-disabled:focus,
|
|||
.bluelib input[type="url"] .status-disabled:focus,
|
||||
body input[type="week"] .status-disabled:focus,
|
||||
.bluelib input[type="week"] .status-disabled:focus,
|
||||
body textarea .status-disabled:focus,
|
||||
.bluelib textarea .status-disabled:focus,
|
||||
body .input-area .status-disabled:focus,
|
||||
.bluelib .input-area .status-disabled:focus,
|
||||
body select:not([multiple]) .status-disabled:focus,
|
||||
.bluelib select:not([multiple]) .status-disabled:focus,
|
||||
body .input-select .status-disabled:focus,
|
||||
|
|
@ -1074,6 +1122,10 @@ body input[type="url"][disabled]:hover::placeholder,
|
|||
.bluelib input[type="url"][disabled]:hover::placeholder,
|
||||
body input[type="week"][disabled]:hover::placeholder,
|
||||
.bluelib input[type="week"][disabled]:hover::placeholder,
|
||||
body textarea[disabled]:hover::placeholder,
|
||||
.bluelib textarea[disabled]:hover::placeholder,
|
||||
body .input-area[disabled]:hover::placeholder,
|
||||
.bluelib .input-area[disabled]:hover::placeholder,
|
||||
body select:not([multiple])[disabled]:hover::placeholder,
|
||||
.bluelib select:not([multiple])[disabled]:hover::placeholder,
|
||||
body .input-select[disabled]:hover::placeholder,
|
||||
|
|
@ -1132,6 +1184,10 @@ body input[type="url"] .status-disabled:hover::placeholder,
|
|||
.bluelib input[type="url"] .status-disabled:hover::placeholder,
|
||||
body input[type="week"] .status-disabled:hover::placeholder,
|
||||
.bluelib input[type="week"] .status-disabled:hover::placeholder,
|
||||
body textarea .status-disabled:hover::placeholder,
|
||||
.bluelib textarea .status-disabled:hover::placeholder,
|
||||
body .input-area .status-disabled:hover::placeholder,
|
||||
.bluelib .input-area .status-disabled:hover::placeholder,
|
||||
body select:not([multiple]) .status-disabled:hover::placeholder,
|
||||
.bluelib select:not([multiple]) .status-disabled:hover::placeholder,
|
||||
body .input-select .status-disabled:hover::placeholder,
|
||||
|
|
@ -1190,6 +1246,10 @@ body input[type="url"][disabled]:focus::placeholder,
|
|||
.bluelib input[type="url"][disabled]:focus::placeholder,
|
||||
body input[type="week"][disabled]:focus::placeholder,
|
||||
.bluelib input[type="week"][disabled]:focus::placeholder,
|
||||
body textarea[disabled]:focus::placeholder,
|
||||
.bluelib textarea[disabled]:focus::placeholder,
|
||||
body .input-area[disabled]:focus::placeholder,
|
||||
.bluelib .input-area[disabled]:focus::placeholder,
|
||||
body select:not([multiple])[disabled]:focus::placeholder,
|
||||
.bluelib select:not([multiple])[disabled]:focus::placeholder,
|
||||
body .input-select[disabled]:focus::placeholder,
|
||||
|
|
@ -1248,6 +1308,10 @@ body input[type="url"] .status-disabled:focus::placeholder,
|
|||
.bluelib input[type="url"] .status-disabled:focus::placeholder,
|
||||
body input[type="week"] .status-disabled:focus::placeholder,
|
||||
.bluelib input[type="week"] .status-disabled:focus::placeholder,
|
||||
body textarea .status-disabled:focus::placeholder,
|
||||
.bluelib textarea .status-disabled:focus::placeholder,
|
||||
body .input-area .status-disabled:focus::placeholder,
|
||||
.bluelib .input-area .status-disabled:focus::placeholder,
|
||||
body select:not([multiple]) .status-disabled:focus::placeholder,
|
||||
.bluelib select:not([multiple]) .status-disabled:focus::placeholder,
|
||||
body .input-select .status-disabled:focus::placeholder,
|
||||
|
|
@ -1308,6 +1372,10 @@ body input[type="url"]:optional,
|
|||
.bluelib input[type="url"]:optional,
|
||||
body input[type="week"]:optional,
|
||||
.bluelib input[type="week"]:optional,
|
||||
body textarea:optional,
|
||||
.bluelib textarea:optional,
|
||||
body .input-area:optional,
|
||||
.bluelib .input-area:optional,
|
||||
body select:not([multiple]):optional,
|
||||
.bluelib select:not([multiple]):optional,
|
||||
body .input-select:optional,
|
||||
|
|
@ -1366,6 +1434,10 @@ body input[type="url"]:optional::placeholder,
|
|||
.bluelib input[type="url"]:optional::placeholder,
|
||||
body input[type="week"]:optional::placeholder,
|
||||
.bluelib input[type="week"]:optional::placeholder,
|
||||
body textarea:optional::placeholder,
|
||||
.bluelib textarea:optional::placeholder,
|
||||
body .input-area:optional::placeholder,
|
||||
.bluelib .input-area:optional::placeholder,
|
||||
body select:not([multiple]):optional::placeholder,
|
||||
.bluelib select:not([multiple]):optional::placeholder,
|
||||
body .input-select:optional::placeholder,
|
||||
|
|
@ -1426,6 +1498,10 @@ body input[type="url"]:focus-visible,
|
|||
.bluelib input[type="url"]:focus-visible,
|
||||
body input[type="week"]:focus-visible,
|
||||
.bluelib input[type="week"]:focus-visible,
|
||||
body textarea:focus-visible,
|
||||
.bluelib textarea:focus-visible,
|
||||
body .input-area:focus-visible,
|
||||
.bluelib .input-area:focus-visible,
|
||||
body select:not([multiple]):focus-visible,
|
||||
.bluelib select:not([multiple]):focus-visible,
|
||||
body .input-select:focus-visible,
|
||||
|
|
@ -1491,6 +1567,15 @@ body input[type="week"],
|
|||
border-radius: 4px 4px 0 0;
|
||||
padding: 6px;
|
||||
}
|
||||
body textarea,
|
||||
.bluelib textarea,
|
||||
body .input-area,
|
||||
.bluelib .input-area {
|
||||
cursor: text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 6px;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
|
|
@ -1876,6 +1961,14 @@ body form input[type="week"],
|
|||
.bluelib form input[type="week"],
|
||||
body .form input[type="week"],
|
||||
.bluelib .form input[type="week"],
|
||||
body form > textarea,
|
||||
.bluelib form > textarea,
|
||||
body .form > textarea,
|
||||
.bluelib .form > textarea,
|
||||
body form .input-area,
|
||||
.bluelib form .input-area,
|
||||
body .form .input-area,
|
||||
.bluelib .form .input-area,
|
||||
body form > select:not([multiple]),
|
||||
.bluelib form > select:not([multiple]),
|
||||
body .form > select:not([multiple]),
|
||||
|
|
@ -1934,7 +2027,6 @@ body .form .form-input,
|
|||
.bluelib .form .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form .form-group,
|
||||
.bluelib form .form-group,
|
||||
|
|
@ -1986,6 +2078,12 @@ body .form .form-row,
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
body form .form-row .panel,
|
||||
.bluelib form .form-row .panel,
|
||||
body .form .form-row .panel,
|
||||
.bluelib .form .form-row .panel {
|
||||
margin: 0;
|
||||
}
|
||||
body h1,
|
||||
.bluelib h1,
|
||||
body h2,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -11,11 +11,11 @@
|
|||
|
||||
@panel: ~".panel";
|
||||
@panel-box: ~".panel-box";
|
||||
@panel-blockquote: ~".panel-blockquote";
|
||||
@panel-aside: ~".panel-aside";
|
||||
@panel-dialog: ~".panel-dialog";
|
||||
@panel-parenthesis: ~".panel-parenthesis";
|
||||
|
||||
@split: ~".split";
|
||||
@split-forcewrap: ~".split-forcewrap";
|
||||
@chapter: ~".chapter";
|
||||
@chapter-forcewrap: ~".chapter-forcewrap";
|
||||
|
||||
@separator: ~".separator";
|
||||
@separator-light: ~".separator-light";
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
|
||||
@input: ~'.input';
|
||||
@input-field: ~'.input-field';
|
||||
@input-area: ~'.input-area';
|
||||
@input-select: ~'.input-select';
|
||||
@input-multiselect: ~'.input-multiselect';
|
||||
@input-option: ~'.input-option';
|
||||
|
|
@ -47,6 +48,7 @@
|
|||
@form-group-row: ~'.form-group-row';
|
||||
|
||||
@heading: ~".heading";
|
||||
@HEADING: ~"> .heading";
|
||||
|
||||
@anchor: ~"a, .anchor";
|
||||
@anchor-broken: ~'.anchor-broken';
|
||||
|
|
@ -57,14 +59,25 @@
|
|||
@ruby-parenthesis: ~".ruby-parenthesis";
|
||||
@ruby-text: ~".ruby-text";
|
||||
|
||||
@element-paragraph: ~".element-paragraph";
|
||||
@element-list-item: ~".element-list-item";
|
||||
@style-bold: ~".style-bold";
|
||||
@style-italic: ~".style-italic";
|
||||
@style-underline: ~".style-underline";
|
||||
@style-strike: ~".style-strike";
|
||||
@style-monospace: ~".style-monospace";
|
||||
@style-keyboard: ~".style-keyboard";
|
||||
@semantic-abbr: ~"abbr, .semantic-abbr";
|
||||
@semantic-b: ~"b, .semantic-b";
|
||||
@semantic-cite: ~"cite, .semantic-cite";
|
||||
@semantic-code: ~"code, .semantic-code";
|
||||
@semantic-data: ~"data, .semantic-data";
|
||||
@semantic-dfn: ~"dfn, .semantic-dfn";
|
||||
@semantic-em: ~"em, .semantic-em";
|
||||
@semantic-i: ~"i, .semantic-i";
|
||||
@semantic-kbd: ~"kbd, .semantic-kbd";
|
||||
@semantic-mark: ~"mark, .semantic-mark";
|
||||
@semantic-q: ~"q, .semantic-q";
|
||||
@semantic-s: ~"s, .semantic-s";
|
||||
@semantic-samp: ~"samp, .semantic-samp";
|
||||
@semantic-small: ~"small, .semantic-small";
|
||||
@semantic-strong: ~"strong, .semantic-strong";
|
||||
@semantic-time: ~"time, .semantic-time";
|
||||
@semantic-u: ~"u, .semantic-u";
|
||||
@semantic-var: ~"var, .semantic-var";
|
||||
|
||||
@color-red: ~".color-red";
|
||||
@color-orange: ~".color-orange";
|
||||
@color-yellow: ~".color-yellow";
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
@layout-threecol-center: ~".layout-threecol-center";
|
||||
@layout-threecol-right: ~".layout-threecol-right";
|
||||
|
||||
@panel: ~".panel, @{panel-box}, @{panel-blockquote}, @{panel-aside}";
|
||||
@panel-box: ~"section, .panel-box";
|
||||
@panel-blockquote: ~".panel-blockquote, blockquote";
|
||||
@panel-aside: ~".panel-aside, aside";
|
||||
@panel: ~".panel";
|
||||
@panel-box: ~".panel-box";
|
||||
@panel-dialog: ~".panel-dialog";
|
||||
@panel-parenthesis: ~".panel-parenthesis";
|
||||
|
||||
@split: ~".split";
|
||||
@split-forcewrap: ~".split-forcewrap";
|
||||
@chapter: ~".chapter";
|
||||
@chapter-forcewrap: ~".chapter-forcewrap";
|
||||
|
||||
@separator: ~"hr, .separator";
|
||||
@separator-light: ~".separator-light";
|
||||
|
|
@ -27,9 +27,10 @@
|
|||
|
||||
@status-disabled: ~"[disabled], .status-disabled";
|
||||
|
||||
@input: ~'@{input-field}, @{input-select}, @{input-multiselect}, @{input-button}, @{input-checkbox}, @{input-radio}, .input';
|
||||
@INPUT: ~'> @{input-field}, > @{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';
|
||||
@INPUT: ~'> @{input-field}, > @{input-area}, > @{input-select}, > @{input-multiselect}, > @{input-button}, > @{input-checkbox}, > @{input-radio}, > .input';
|
||||
@input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
|
||||
@input-area: ~'textarea, .input-area';
|
||||
@input-select: ~'select:not([multiple]), .input-select';
|
||||
@input-multiselect: ~'select[multiple], .input-multiselect';
|
||||
@input-option: ~'option, .input-option';
|
||||
|
|
@ -48,6 +49,7 @@
|
|||
@form-group-row: ~'.form-group-row';
|
||||
|
||||
@heading: ~"h1, h2, h3, h4, h5, h6, .heading";
|
||||
@HEADING: ~"> h1, > h2, > h3, > h4, > h5, > h6, > .heading";
|
||||
|
||||
@anchor: ~"a, .anchor";
|
||||
@anchor-broken: ~'a:not([href]), a[href=""], .anchor-broken';
|
||||
|
|
@ -77,19 +79,6 @@
|
|||
@semantic-u: ~"u, .semantic-u";
|
||||
@semantic-var: ~"var, .semantic-var";
|
||||
|
||||
|
||||
@style-b: ~"b, .style-bringattention";
|
||||
@style-strong: ~"strong, .style-strong";
|
||||
@style-emphasis: ~".style-italic, i, em";
|
||||
@style-annotated: ~".style-underline, u";
|
||||
@style-strike: ~".style-strike, strike, s, del";
|
||||
@style-monospace: ~".style-monospace, code";
|
||||
@style-keyboard: ~".style-keyboard, kbd";
|
||||
|
||||
@element-paragraph: ~".element-paragraph, p";
|
||||
@element-list-item: ~".element-list-item, li";
|
||||
|
||||
|
||||
@color-red: ~".color-red";
|
||||
@color-orange: ~".color-orange";
|
||||
@color-yellow: ~".color-yellow";
|
||||
|
|
|
|||
Loading…
Reference in a new issue