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

root ruleset: Rename .panel-X to just .X

Browse source
This commit is contained in:
Steffo 2022-10-14 12:51:13 +00:00 committed by GitHub
parent c566b5037c
commit dcd4dbe3b8
Signed by: github
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
examples/index.html
View file

@ -4,15 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="../favicon.ico"> <link rel="icon" type="image/x-icon" href="../favicon.ico">
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/base.root.less" id="css-base">
<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less" id="css-colors-royalblue">
<link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less" id="css-fonts-fira-ghpages">
<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less" id="css-classic">
<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less" id="css-glass">
<link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less" id="css-fun">
<link rel="stylesheet" type="text/css" href="./index.css"> <link rel="stylesheet" type="text/css" href="./index.css" id="css-thispage">
<script src="https://cdn.jsdelivr.net/npm/less"></script> <script src="https://cdn.jsdelivr.net/npm/less"></script>
<title>Bluelib</title> <title>Bluelib 5</title>
</head> </head>
<body class="theme-bluelib"> <body class="theme-bluelib">
<hgroup> <hgroup>
@ -27,7 +27,7 @@
<h2> <h2>
Panels Panels
</h2> </h2>
<section class="panel panel-box" id="panel-panel"> <section class="panel box" id="panel-panel">
<h3> <h3>
Panel Panel
</h3> </h3>
@ -38,40 +38,40 @@
Hello world! I am a Panel! Hello world! I am a Panel!
</div> </div>
</section> </section>
<section class="panel panel-box" id="panel-box"> <section class="panel box" id="panel-box">
<h3> <h3>
Box Box
</h3> </h3>
<p> <p>
A <dfn id="dfn-box">Box</dfn> is a <b>container</b> adding <b>borders of all four sides</b> to the base appearence of a Panel. A <dfn id="dfn-box">Box</dfn> is a <b>container</b> adding <b>borders of all four sides</b> to the base appearence of a Panel.
</p> </p>
<div class="panel panel-box float-bottom"> <div class="panel box float-bottom">
This Box contains a hidden Snake. <span style="display: none;">🐍</span> This Box contains a hidden Snake. <span style="display: none;">🐍</span>
</div> </div>
</section> </section>
<section class="panel panel-box" id="panel-dialog"> <section class="panel box" id="panel-dialog">
<h3> <h3>
Dialog Dialog
</h3> </h3>
<p> <p>
A <dfn id="dfn-dialog">Dialog</dfn> is a <b>container</b> adding a <b>left border</b> to the base appearence of a Panel. A <dfn id="dfn-dialog">Dialog</dfn> is a <b>container</b> adding a <b>left border</b> to the base appearence of a Panel.
</p> </p>
<blockquote class="panel panel-dialog float-bottom"> <blockquote class="panel dialog float-bottom">
<q>Snake? Snake??? SNAKEEEEEEE!</q> <q>Snake? Snake??? SNAKEEEEEEE!</q>
</blockquote> </blockquote>
</section> </section>
<section class="panel panel-box" id="panel-parenthesis"> <section class="panel box" id="panel-parenthesis">
<h3> <h3>
Parenthesis Parenthesis
</h3> </h3>
<p> <p>
A <dfn id="dfn-parenthesis">Parenthesis</dfn> is a <b>container</b> styled as a Panel and with smaller text. A <dfn id="dfn-parenthesis">Parenthesis</dfn> is a <b>container</b> styled as a Panel and with smaller text.
</p> </p>
<div class="panel panel-parenthesis float-bottom"> <div class="panel parenthesis float-bottom">
I think we lost the Snake... I think we lost the Snake...
</div> </div>
</section> </section>
<section class="panel panel-box" id="panel-when-panel"> <section class="panel box" id="panel-when-panel">
<h3> <h3>
Panel usage Panel usage
</h3> </h3>
@ -88,7 +88,7 @@
When used to create forms, they may also be <b><code>&lt;form&gt;</code> elements</b>. When used to create forms, they may also be <b><code>&lt;form&gt;</code> elements</b>.
</p> </p>
</section> </section>
<section class="panel panel-box" id="panel-when-box"> <section class="panel box" id="panel-when-box">
<h3> <h3>
Box usage Box usage
</h3> </h3>
@ -99,7 +99,7 @@
To achieve the best visual style, <i>Boxes</i> should always be the outmost panels: you should <b><em>never</em> place a <i>Box</i> inside a Panel or a Dialog</b>, but you can place one inside another <i>Box</i>. To achieve the best visual style, <i>Boxes</i> should always be the outmost panels: you should <b><em>never</em> place a <i>Box</i> inside a Panel or a Dialog</b>, but you can place one inside another <i>Box</i>.
</p> </p>
</section> </section>
<section class="panel panel-box" id="panel-when-dialog"> <section class="panel box" id="panel-when-dialog">
<h3> <h3>
Dialog usage Dialog usage
</h3> </h3>
@ -113,7 +113,7 @@
Like Boxes, <i>Dialogs</i> should <b><em>never</em></b> be placed <b>into containers with less borders</b> than them, such as Panels. Like Boxes, <i>Dialogs</i> should <b><em>never</em></b> be placed <b>into containers with less borders</b> than them, such as Panels.
</p> </p>
</section> </section>
<section class="panel panel-box" id="panel-when-parenthesis"> <section class="panel box" id="panel-when-parenthesis">
<h3> <h3>
Parenthesis usage Parenthesis usage
</h3> </h3>
@ -126,34 +126,34 @@
</section> </section>
</div> </div>
<div class="chapter-2"> <div class="chapter-2">
<section class="panel panel-box" id="panel-nesting"> <section class="panel box" id="panel-nesting">
<h3> <h3>
Nesting Nesting
</h3> </h3>
<p> <p>
As you have seen in the sections before, panels can be <b>nested</b> many times (until the text becomes undistinguishable)! As you have seen in the sections before, panels can be <b>nested</b> many times (until the text becomes undistinguishable)!
</p> </p>
<div class="panel panel-parenthesis"> <div class="panel parenthesis">
<p> <p>
Like this! Like this!
</p> </p>
<div class="panel panel-parenthesis"> <div class="panel parenthesis">
<p> <p>
How deep does this Panel hole go? How deep does this Panel hole go?
</p> </p>
<div class="panel panel-parenthesis"> <div class="panel parenthesis">
<p> <p>
BWOON. BWOON.
</p> </p>
<div class="panel panel-parenthesis"> <div class="panel parenthesis">
<p> <p>
BWOON. BWOON.
</p> </p>
<div class="panel panel-parenthesis"> <div class="panel parenthesis">
<p> <p>
BWOON. BWOON.
</p> </p>
<div class="panel panel-parenthesis"> <div class="panel parenthesis">
<em> <em>
<a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank"> <a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">
PANELCEPTION. PANELCEPTION.
@ -171,7 +171,7 @@
<h2> <h2>
Chapters Chapters
</h2> </h2>
<section class="panel panel-box" id="panel-chapter"> <section class="panel box" id="panel-chapter">
<h3> <h3>
Chapter Chapter
</h3> </h3>
@ -185,7 +185,7 @@
The maximum number of columns in a chapter is 9; beyond that, you'll need to write your own chapter code. The maximum number of columns in a chapter is 9; beyond that, you'll need to write your own chapter code.
</p> </p>
</section> </section>
<section class="panel panel-box" id="panel-panelheights"> <section class="panel box" id="panel-panelheights">
<h3> <h3>
Panel heights Panel heights
</h3> </h3>
@ -193,7 +193,7 @@
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. 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> </p>
</section> </section>
<section class="panel panel-box" id="panel-float"> <section class="panel box" id="panel-float">
<h3> <h3>
Element floats Element floats
</h3> </h3>
@ -204,7 +204,7 @@
For example, if a panel has some empty space, elements can be made to <b>float to the bottom</b>, which can be useful for example for buttons in sibling panels. For example, if a panel has some empty space, elements can be made to <b>float to the bottom</b>, which can be useful for example for buttons in sibling panels.
</p> </p>
</section> </section>
<section class="panel panel-box" id="panel-autowrap"> <section class="panel box" id="panel-autowrap">
<h3> <h3>
Auto-wrapping Auto-wrapping
</h3> </h3>
@ -218,7 +218,7 @@
To have a constant height, one has to be set manually. To have a constant height, one has to be set manually.
</p> </p>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Auto-sizing Auto-sizing
</h3> </h3>
@ -266,22 +266,22 @@
<h2> <h2>
Modifiers Modifiers
</h2> </h2>
<section class="panel panel-box" id="panel-fade"> <section class="panel box" id="panel-fade">
<h3> <h3>
Fade Fade
</h3> </h3>
<p> <p>
The <dfn id="dfn-fade">fade</dfn> modifier <b>reduces the opacity</b> of the elements it is applied to. The <dfn id="dfn-fade">fade</dfn> modifier <b>reduces the opacity</b> of the elements it is applied to.
</p> </p>
<div class="panel panel-box fade float-bottom"> <div class="panel box fade float-bottom">
<p> <p>
I'm a faded box! I'm a faded box!
</p> </p>
<div class="panel panel-box"> <div class="panel box">
<p> <p>
I'm faded too! I'm faded too!
</p> </p>
<div class="panel panel-box fade"> <div class="panel box fade">
<p> <p>
But they can be faded <b>more</b>. But they can be faded <b>more</b>.
</p> </p>
@ -289,22 +289,22 @@
</div> </div>
</div> </div>
</section> </section>
<section class="panel panel-box" id="paenl-mark"> <section class="panel box" id="paenl-mark">
<h3> <h3>
Mark Mark
</h3> </h3>
<p> <p>
The <dfn id="dfn-mark">mark</dfn> modifier <b>distinguishes</b> the elements it is applied to from the surrounding ones by applying a <b>strong color contrast</b>. The <dfn id="dfn-mark">mark</dfn> modifier <b>distinguishes</b> the elements it is applied to from the surrounding ones by applying a <b>strong color contrast</b>.
</p> </p>
<div class="panel panel-box mark float-bottom"> <div class="panel box mark float-bottom">
<p> <p>
Think of it like an <b>highlighter</b>, but for <mark>anything</mark>! Think of it like an <b>highlighter</b>, but for <mark>anything</mark>!
</p> </p>
<div class="panel panel-box mark"> <div class="panel box mark">
<p> <p>
Which can be nested to <mark>negate</mark> its effect. Which can be nested to <mark>negate</mark> its effect.
</p> </p>
<div class="panel panel-box mark"> <div class="panel box mark">
<p> <p>
Up to 3 times and <mark>not any more</mark>. Up to 3 times and <mark>not any more</mark>.
</p> </p>
@ -312,22 +312,22 @@
</div> </div>
</div> </div>
</section> </section>
<section class="panel panel-box" id="panel-todo"> <section class="panel box" id="panel-todo">
<h3> <h3>
To do To do
</h3> </h3>
<p> <p>
The <dfn id="dfn-todo">todo</dfn> modifier emphasises that the contents of the elements it is applied to are not correct or final. The <dfn id="dfn-todo">todo</dfn> modifier emphasises that the contents of the elements it is applied to are not correct or final.
</p> </p>
<div class="panel panel-box todo float-bottom"> <div class="panel box todo float-bottom">
<p> <p>
Like this! Like this!
</p> </p>
<div class="panel panel-box"> <div class="panel box">
<p> <p>
As with other modifiers, it is inherited. As with other modifiers, it is inherited.
</p> </p>
<div class="panel panel-box todo"> <div class="panel box todo">
<p> <p>
And it does nothing if reapplied. And it does nothing if reapplied.
</p> </p>
@ -335,7 +335,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="panel panel-box" id="panel-colors"> <section class="panel box" id="panel-colors">
<h3> <h3>
Color modifiers Color modifiers
</h3> </h3>
@ -343,7 +343,7 @@
The <dfn id="dfn-color">color</dfn> modifiers change the colors of the elements they are applied to. The <dfn id="dfn-color">color</dfn> modifiers change the colors of the elements they are applied to.
</p> </p>
<div class="chapter-6 float-bottom"> <div class="chapter-6 float-bottom">
<div class="panel panel-box red"> <div class="panel box red">
<h4> <h4>
Red Red
</h4> </h4>
@ -351,7 +351,7 @@
* warns angrily! * warns angrily!
</p> </p>
</div> </div>
<div class="panel panel-box yellow"> <div class="panel box yellow">
<h4> <h4>
Yellow Yellow
</h4> </h4>
@ -359,7 +359,7 @@
* warns. * warns.
</p> </p>
</div> </div>
<div class="panel panel-box green"> <div class="panel box green">
<h4> <h4>
Green Green
</h4> </h4>
@ -367,7 +367,7 @@
* is a success! * is a success!
</p> </p>
</div> </div>
<div class="panel panel-box cyan"> <div class="panel box cyan">
<h4> <h4>
Cyan Cyan
</h4> </h4>
@ -375,7 +375,7 @@
* informs... * informs...
</p> </p>
</div> </div>
<div class="panel panel-box blue"> <div class="panel box blue">
<h4> <h4>
Blue Blue
</h4> </h4>
@ -383,7 +383,7 @@
* annotates * annotates
</p> </p>
</div> </div>
<div class="panel panel-box magenta"> <div class="panel box magenta">
<h4> <h4>
Magenta Magenta
</h4> </h4>
@ -398,7 +398,7 @@
<h2> <h2>
Separators Separators
</h2> </h2>
<section class="panel panel-box" id="panel-separator"> <section class="panel box" id="panel-separator">
<h3> <h3>
Separator Separator
</h3> </h3>
@ -406,11 +406,11 @@
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. 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> </p>
<hr class="float-bottom"> <hr class="float-bottom">
<blockquote class="panel panel-dialog"> <blockquote class="panel dialog">
Top Text Top Text
</blockquote> </blockquote>
</section> </section>
<section class="panel panel-box" id="panel-separator-light"> <section class="panel box" id="panel-separator-light">
<h3> <h3>
Light separator Light separator
</h3> </h3>
@ -418,11 +418,11 @@
A <dfn id="dfn-separator-light">light separator</dfn> is a <b>less eye-catching separator</b>, to be used if the regular separator distracts too much from the flow of the text. A <dfn id="dfn-separator-light">light separator</dfn> is a <b>less eye-catching separator</b>, to be used if the regular separator distracts too much from the flow of the text.
</p> </p>
<hr class="separator-light float-bottom"> <hr class="separator-light float-bottom">
<blockquote class="panel panel-dialog"> <blockquote class="panel dialog">
Bottom Text Bottom Text
</blockquote> </blockquote>
</section> </section>
<section class="panel panel-box" id="panel-separator-heavy"> <section class="panel box" id="panel-separator-heavy">
<h3> <h3>
Heavy separator Heavy separator
</h3> </h3>
@ -430,7 +430,7 @@
A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a <b>very eye-catching separator</b>, to be used if the regular separator isn't apparent enough. A <dfn id="dfn-separator-heavy">heavy separator</dfn> is a <b>very eye-catching separator</b>, to be used if the regular separator isn't apparent enough.
</p> </p>
<hr class="separator-heavy float-bottom"> <hr class="separator-heavy float-bottom">
<blockquote class="panel panel-dialog"> <blockquote class="panel dialog">
Bottom Text 2: Electric Boogaloo Bottom Text 2: Electric Boogaloo
</blockquote> </blockquote>
</section> </section>
@ -439,7 +439,7 @@
<h2> <h2>
Lists Lists
</h2> </h2>
<section class="panel panel-box" id="panel-list-ordered"> <section class="panel box" id="panel-list-ordered">
<h3> <h3>
Ordered list Ordered list
</h3> </h3>
@ -461,7 +461,7 @@
<li>Twelfth</li> <li>Twelfth</li>
</ol> </ol>
</section> </section>
<section class="panel panel-box" id="panel-list-unordered"> <section class="panel box" id="panel-list-unordered">
<h3> <h3>
Unordered list Unordered list
</h3> </h3>
@ -488,7 +488,7 @@
<h2> <h2>
Glossaries Glossaries
</h2> </h2>
<section class="panel panel-box" id="panel-list-definition"> <section class="panel box" id="panel-list-definition">
<h3> <h3>
Definition list Definition list
</h3> </h3>
@ -510,7 +510,7 @@
</dd> </dd>
</dl> </dl>
</section> </section>
<section class="panel panel-box" id="panel-details"> <section class="panel box" id="panel-details">
<h3> <h3>
Collapsible details Collapsible details
</h3> </h3>
@ -535,7 +535,7 @@
<h2> <h2>
Text Text
</h2> </h2>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>A</u>nchors <u>A</u>nchors
</h3> </h3>
@ -556,7 +556,7 @@
</section> </section>
</div> </div>
<div class="chapter-4"> <div class="chapter-4">
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>I</u>diomatic expressions <u>I</u>diomatic expressions
</h3> </h3>
@ -569,7 +569,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>Em</u>phasis <u>Em</u>phasis
</h3> </h3>
@ -582,7 +582,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>B</u>ring attention <u>B</u>ring attention
</h3> </h3>
@ -595,7 +595,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>Strong</u> importance <u>Strong</u> importance
</h3> </h3>
@ -608,7 +608,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>U</u>narticulated annotations <u>U</u>narticulated annotations
</h3> </h3>
@ -621,7 +621,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>S</u>trike <u>S</u>trike
</h3> </h3>
@ -634,7 +634,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>Ins</u>erted and <u>del</u>eted text <u>Ins</u>erted and <u>del</u>eted text
</h3> </h3>
@ -651,7 +651,7 @@
</ul> </ul>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
<u>Small</u> comment <u>Small</u> comment
</h3> </h3>
@ -667,7 +667,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Preformatted text Preformatted text
</h3> </h3>
@ -685,7 +685,7 @@
# # "mmm#" "mmm" mm#mm mm#mm</pre> # # "mmm#" "mmm" mm#mm mm#mm</pre>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Code snippets Code snippets
</h3> </h3>
@ -706,7 +706,7 @@
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Sample input and output Sample input and output
</h3> </h3>
@ -725,7 +725,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Variables Variables
</h3> </h3>
@ -738,21 +738,21 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Quotes and citations Quotes and citations
</h3> </h3>
<p> <p>
A <dfn id="dfn-quote">quote</dfn> element indicates an <b>inline quote</b>, and may be optionally include a <dfn id="dfn-citation">citation</dfn> element indicating the <b>source of the quote</b>. A <dfn id="dfn-quote">quote</dfn> element indicates an <b>inline quote</b>, and may be optionally include a <dfn id="dfn-citation">citation</dfn> element indicating the <b>source of the quote</b>.
</p> </p>
<div class="panel panel-dialog float-bottom"> <div class="panel dialog float-bottom">
<p> <p>
<q>Objection!</q><br/> <q>Objection!</q><br/>
—<cite>Phoenix Wright</cite>, Ace Attorney —<cite>Phoenix Wright</cite>, Ace Attorney
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Definitions Definitions
</h3> </h3>
@ -765,7 +765,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Abbreviations Abbreviations
</h3> </h3>
@ -781,7 +781,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Ruby Ruby
</h3> </h3>
@ -814,7 +814,7 @@
<h2> <h2>
Tables Tables
</h2> </h2>
<section class="panel panel-box" id="panel-table"> <section class="panel box" id="panel-table">
<h3> <h3>
Table Table
</h3> </h3>
@ -844,7 +844,7 @@
</tbody> </tbody>
</table> </table>
</section> </section>
<section class="panel panel-box" id="panel-tablecaption"> <section class="panel box" id="panel-tablecaption">
<h3> <h3>
Table caption Table caption
</h3> </h3>
@ -897,7 +897,7 @@
</tfoot> </tfoot>
</table> </table>
</section> </section>
<table class="panel panel-box" id="panel-tablepanel"> <table class="panel box" id="panel-tablepanel">
<caption class="table-caption-top"> <caption class="table-caption-top">
<h3> <h3>
Table panels Table panels
@ -941,7 +941,7 @@
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
<table class="panel panel-dialog" id="panel-tabledialogs"> <table class="panel dialog" id="panel-tabledialogs">
<caption> <caption>
<h3> <h3>
Table dialogs Table dialogs
@ -980,7 +980,7 @@
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
<table class="panel panel-box" id="panel-cellmodifiers"> <table class="panel box" id="panel-cellmodifiers">
<caption class="table-caption-top"> <caption class="table-caption-top">
<h3> <h3>
Cell modifiers Cell modifiers
@ -1015,7 +1015,7 @@
<h2> <h2>
Images Images
</h2> </h2>
<section class="panel panel-box" id="panel-images-default"> <section class="panel box" id="panel-images-default">
<h3> <h3>
Default Default
</h3> </h3>
@ -1024,7 +1024,7 @@
</p> </p>
<img class="float-bottom" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon Ice Cream"/> <img class="float-bottom" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon Ice Cream"/>
</section> </section>
<section class="panel panel-box" id="panel-limited"> <section class="panel box" id="panel-limited">
<h3> <h3>
Limited Limited
</h3> </h3>
@ -1053,7 +1053,7 @@
<h2> <h2>
Inputs Inputs
</h2> </h2>
<section class="panel panel-box" id="panel-input"> <section class="panel box" id="panel-input">
<h3> <h3>
Input Input
</h3> </h3>
@ -1063,7 +1063,7 @@
</section> </section>
</div> </div>
<div class="chapter-2"> <div class="chapter-2">
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Field Field
</h3> </h3>
@ -1148,7 +1148,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Area Area
</h3> </h3>
@ -1164,7 +1164,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Select Select
</h3> </h3>
@ -1191,7 +1191,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Multiselect Multiselect
</h3> </h3>
@ -1231,7 +1231,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Radio Radio
</h3> </h3>
@ -1271,7 +1271,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Checkbox Checkbox
</h3> </h3>
@ -1323,7 +1323,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Color Color
</h3> </h3>
@ -1342,7 +1342,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
File File
</h3> </h3>
@ -1361,7 +1361,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box todo"> <section class="panel box todo">
<h3> <h3>
Range Range
</h3> </h3>
@ -1378,7 +1378,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Button Button
</h3> </h3>
@ -1405,7 +1405,7 @@
<h2> <h2>
Forms Forms
</h2> </h2>
<section class="panel panel-box" id="panel-form"> <section class="panel box" id="panel-form">
<h3> <h3>
Form Form
</h3> </h3>
@ -1413,7 +1413,7 @@
An <dfn id="dfn-form">form</dfn> is a non-interactive element which <b>positions <i>Inputs</i></b> in commonly used ways. An <dfn id="dfn-form">form</dfn> is a non-interactive element which <b>positions <i>Inputs</i></b> in commonly used ways.
</p> </p>
</section> </section>
<section class="panel panel-box"> <section class="panel box">
<h3> <h3>
Flex form Flex form
</h3> </h3>

6
src/selectors/root.less
View file

@ -27,9 +27,9 @@
@header-6: ~"h6"; @header-6: ~"h6";
@panel: ~".panel"; @panel: ~".panel";
@panel-box: ~".panel-box"; @panel-box: ~".box";
@panel-dialog: ~".panel-dialog"; @panel-dialog: ~".dialog";
@panel-parenthesis: ~".panel-parenthesis"; @panel-parenthesis: ~".parenthesis";
@chapter-0: ~".chapter-0"; @chapter-0: ~".chapter-0";
@chapter-1: ~".chapter-1"; @chapter-1: ~".chapter-1";