From dcd4dbe3b8ed6e8be8dd907d7a53c8f11112d38a Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Fri, 14 Oct 2022 12:51:13 +0000 Subject: [PATCH] `root` ruleset: Rename `.panel-X` to just `.X` --- examples/index.html | 196 ++++++++++++++++++++-------------------- src/selectors/root.less | 6 +- 2 files changed, 101 insertions(+), 101 deletions(-) diff --git a/examples/index.html b/examples/index.html index dc52deb..898b161 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,15 +4,15 @@ - - - - - - - + + + + + + + - Bluelib + Bluelib 5
@@ -27,7 +27,7 @@

Panels

-
+

Panel

@@ -38,40 +38,40 @@ Hello world! I am a Panel!
-
+

Box

A Box is a container adding borders of all four sides to the base appearence of a Panel.

-
+
This Box contains a hidden Snake. 🐍
-
+

Dialog

A Dialog is a container adding a left border to the base appearence of a Panel.

-
+
Snake? Snake??? SNAKEEEEEEE!
-
+

Parenthesis

A Parenthesis is a container styled as a Panel and with smaller text.

-
+
I think we lost the Snake...
-
+

Panel usage

@@ -88,7 +88,7 @@ When used to create forms, they may also be <form> elements.

-
+

Box usage

@@ -99,7 +99,7 @@ To achieve the best visual style, Boxes should always be the outmost panels: you should never place a Box inside a Panel or a Dialog, but you can place one inside another Box.

-
+

Dialog usage

@@ -113,7 +113,7 @@ Like Boxes, Dialogs should never be placed into containers with less borders than them, such as Panels.

-
+

Parenthesis usage

@@ -126,34 +126,34 @@
-
+

Nesting

As you have seen in the sections before, panels can be nested many times (until the text becomes undistinguishable)!

-
+

Like this!

-
+

How deep does this Panel hole go?

-
+

BWOON.

-
+

BWOON.

-
+

BWOON.

-
+
PANELCEPTION. @@ -171,7 +171,7 @@

Chapters

-
+

Chapter

@@ -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.

-
+

Panel heights

@@ -193,7 +193,7 @@ In a chapter, all panels on a row inherit the height of the tallest panel in it, so that no empty space is left.

-
+

Element floats

@@ -204,7 +204,7 @@ For example, if a panel has some empty space, elements can be made to float to the bottom, which can be useful for example for buttons in sibling panels.

-
+

Auto-wrapping

@@ -218,7 +218,7 @@ To have a constant height, one has to be set manually.

-
+

Auto-sizing

@@ -266,22 +266,22 @@

Modifiers

-
+

Fade

The fade modifier reduces the opacity of the elements it is applied to.

-
+

I'm a faded box!

-
+

I'm faded too!

-
+

But they can be faded more.

@@ -289,22 +289,22 @@
-
+

Mark

The mark modifier distinguishes the elements it is applied to from the surrounding ones by applying a strong color contrast.

-
+

Think of it like an highlighter, but for anything!

-
+

Which can be nested to negate its effect.

-
+

Up to 3 times and not any more.

@@ -312,22 +312,22 @@
-
+

To do

The todo modifier emphasises that the contents of the elements it is applied to are not correct or final.

-
+

Like this!

-
+

As with other modifiers, it is inherited.

-
+

And it does nothing if reapplied.

@@ -335,7 +335,7 @@
-
+

Color modifiers

@@ -343,7 +343,7 @@ The color modifiers change the colors of the elements they are applied to.

-
+

Red

@@ -351,7 +351,7 @@ * warns angrily!

-
+

Yellow

@@ -359,7 +359,7 @@ * warns.

-
+

Green

@@ -367,7 +367,7 @@ * is a success!

-
+

Cyan

@@ -375,7 +375,7 @@ * informs...

-
+

Blue

@@ -383,7 +383,7 @@ * annotates

-
+

Magenta

@@ -398,7 +398,7 @@

Separators

-
+

Separator

@@ -406,11 +406,11 @@ A separator is a horizontal line that fills all the horizontal space available on a panel, forcing a line wrap.

-
+
Top Text
-
+

Light separator

@@ -418,11 +418,11 @@ A light separator is a less eye-catching separator, to be used if the regular separator distracts too much from the flow of the text.

-
+
Bottom Text
-
+

Heavy separator

@@ -430,7 +430,7 @@ A heavy separator is a very eye-catching separator, to be used if the regular separator isn't apparent enough.

-
+
Bottom Text 2: Electric Boogaloo
@@ -439,7 +439,7 @@

Lists

-
+

Ordered list

@@ -461,7 +461,7 @@
  • Twelfth
    • -
    +

    Unordered list

    @@ -488,7 +488,7 @@

    Glossaries

    -
    +

    Definition list

    @@ -510,7 +510,7 @@
    -
    +

    Collapsible details

    @@ -535,7 +535,7 @@

    Text

    -
    +

    Anchors

    @@ -556,7 +556,7 @@
    -
    +

    Idiomatic expressions

    @@ -569,7 +569,7 @@

    -
    +

    Emphasis

    @@ -582,7 +582,7 @@

    -
    +

    Bring attention

    @@ -595,7 +595,7 @@

    -
    +

    Strong importance

    @@ -608,7 +608,7 @@

    -
    +

    Unarticulated annotations

    @@ -621,7 +621,7 @@

    -
    +

    Strike

    @@ -634,7 +634,7 @@

    -
    +

    Inserted and deleted text

    @@ -651,7 +651,7 @@
    -
    +

    Small comment

    @@ -667,7 +667,7 @@

    -
    +

    Preformatted text

    @@ -685,7 +685,7 @@ # # "mmm#" "mmm" mm#mm mm#mm
    -
    +

    Code snippets

    @@ -706,7 +706,7 @@ </div>
    -
    +

    Sample input and output

    @@ -725,7 +725,7 @@

    -
    +

    Variables

    @@ -738,21 +738,21 @@

    -
    +

    Quotes and citations

    A quote element indicates an inline quote, and may be optionally include a citation element indicating the source of the quote.

    -
    +

    Objection!
    —Phoenix Wright, Ace Attorney

    -
    +

    Definitions

    @@ -765,7 +765,7 @@

    -
    +

    Abbreviations

    @@ -781,7 +781,7 @@

    -
    +

    Ruby

    @@ -814,7 +814,7 @@

    Tables

    -
    +

    Table

    @@ -844,7 +844,7 @@
    -
    +

    Table caption

    @@ -897,7 +897,7 @@
    - +

    Table panels @@ -941,7 +941,7 @@

    - +

    Table dialogs @@ -980,7 +980,7 @@

    - +

    Cell modifiers @@ -1015,7 +1015,7 @@

    Images

    -
    +

    Default

    @@ -1024,7 +1024,7 @@

    Neon Ice Cream
    -
    +

    Limited

    @@ -1053,7 +1053,7 @@

    Inputs

    -
    +

    Input

    @@ -1063,7 +1063,7 @@
    -
    +

    Field

    @@ -1148,7 +1148,7 @@

    -
    +

    Area

    @@ -1164,7 +1164,7 @@

    -
    +

    Select

    @@ -1191,7 +1191,7 @@

    -
    +

    Multiselect

    @@ -1231,7 +1231,7 @@

    -
    +

    Radio

    @@ -1271,7 +1271,7 @@

    -
    +

    Checkbox

    @@ -1323,7 +1323,7 @@

    -
    +

    Color

    @@ -1342,7 +1342,7 @@

    -
    +

    File

    @@ -1361,7 +1361,7 @@

    -
    +

    Range

    @@ -1378,7 +1378,7 @@

    -
    +

    Button

    @@ -1405,7 +1405,7 @@

    Forms

    -
    +

    Form

    @@ -1413,7 +1413,7 @@ An form is a non-interactive element which positions Inputs in commonly used ways.

    -
    +

    Flex form

    diff --git a/src/selectors/root.less b/src/selectors/root.less index 0025adb..c2fcfe1 100644 --- a/src/selectors/root.less +++ b/src/selectors/root.less @@ -27,9 +27,9 @@ @header-6: ~"h6"; @panel: ~".panel"; -@panel-box: ~".panel-box"; -@panel-dialog: ~".panel-dialog"; -@panel-parenthesis: ~".panel-parenthesis"; +@panel-box: ~".box"; +@panel-dialog: ~".dialog"; +@panel-parenthesis: ~".parenthesis"; @chapter-0: ~".chapter-0"; @chapter-1: ~".chapter-1";