mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
🔧 Reorganize splits
This commit is contained in:
parent
5ced08e16a
commit
0ed5c57f8a
12 changed files with 303 additions and 198 deletions
52
index.html
52
index.html
|
|
@ -141,7 +141,7 @@
|
||||||
</h2>
|
</h2>
|
||||||
<section>
|
<section>
|
||||||
<h3>
|
<h3>
|
||||||
Splitter and splitted
|
Split
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
You can split elements into multiple columns.
|
You can split elements into multiple columns.
|
||||||
|
|
@ -149,7 +149,7 @@
|
||||||
<p>
|
<p>
|
||||||
The columns will grow automatically to on the height of the tallest.
|
The columns will grow automatically to on the height of the tallest.
|
||||||
</p>
|
</p>
|
||||||
<div class="panel panel-split">
|
<div class="split">
|
||||||
<section>
|
<section>
|
||||||
<h3>
|
<h3>
|
||||||
Shorter panel
|
Shorter panel
|
||||||
|
|
@ -173,6 +173,44 @@
|
||||||
</a></p>
|
</a></p>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
<p>
|
||||||
|
You can force a split to wrap:
|
||||||
|
</p>
|
||||||
|
<div class="split">
|
||||||
|
<section>
|
||||||
|
<h3>First</h3>
|
||||||
|
</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>
|
||||||
<section>
|
<section>
|
||||||
<h3>
|
<h3>
|
||||||
|
|
@ -189,7 +227,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Formatting
|
Formatting
|
||||||
</h2>
|
</h2>
|
||||||
<div class="panel panel-split">
|
<div class="split">
|
||||||
<section>
|
<section>
|
||||||
<h3>
|
<h3>
|
||||||
Colors
|
Colors
|
||||||
|
|
@ -257,7 +295,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Elements
|
Elements
|
||||||
</h2>
|
</h2>
|
||||||
<div class="panel panel-split">
|
<div class="split">
|
||||||
<section>
|
<section>
|
||||||
<h3>
|
<h3>
|
||||||
Buttons
|
Buttons
|
||||||
|
|
@ -322,7 +360,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Coloring panels
|
Coloring panels
|
||||||
</h2>
|
</h2>
|
||||||
<div class="panel panel-split">
|
<div class="split">
|
||||||
<section class="color-red">
|
<section class="color-red">
|
||||||
<h3>
|
<h3>
|
||||||
Panels can be recolored!
|
Panels can be recolored!
|
||||||
|
|
@ -364,7 +402,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Interactivity
|
Interactivity
|
||||||
</h2>
|
</h2>
|
||||||
<div class="panel panel-split">
|
<div class="split">
|
||||||
<section>
|
<section>
|
||||||
<h3>
|
<h3>
|
||||||
Tooltips
|
Tooltips
|
||||||
|
|
@ -393,7 +431,7 @@
|
||||||
<h2>
|
<h2>
|
||||||
Forms
|
Forms
|
||||||
</h2>
|
</h2>
|
||||||
<div class="panel panel-split">
|
<div class="split">
|
||||||
<section>
|
<section>
|
||||||
<h3>
|
<h3>
|
||||||
Inputs
|
Inputs
|
||||||
|
|
|
||||||
25
src/rules/skeleton.less
vendored
25
src/rules/skeleton.less
vendored
|
|
@ -135,7 +135,7 @@
|
||||||
border-color: @b1;
|
border-color: @b1;
|
||||||
|
|
||||||
// The first and last elements of a panel should not have a margin
|
// The first and last elements of a panel should not have a margin
|
||||||
> * {
|
> @{all} {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -166,22 +166,33 @@
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Evenly split the panels contained inside
|
/// ===== Split =====
|
||||||
@{panel-split} {
|
/// A split is an element which splits everything contained inside in multiple columns of equal width.
|
||||||
|
|
||||||
|
@{split} {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 4px 8px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
> @{panel} {
|
||||||
|
// Add a horizontal margin to panels
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Allow contained elements to grow
|
||||||
> @{all} {
|
> @{all} {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> @{panel} {
|
// Force a split to wrap
|
||||||
margin: 0;
|
@{split-forcewrap} {
|
||||||
}
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Images ---
|
// --- Images ---
|
||||||
|
|
|
||||||
|
|
@ -229,10 +229,12 @@
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
}
|
}
|
||||||
.bluelib .panel > *:first-child {
|
.bluelib .panel > *:first-child,
|
||||||
|
.bluelib .panel .all:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.bluelib .panel > *:last-child {
|
.bluelib .panel > *:last-child,
|
||||||
|
.bluelib .panel .all:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.bluelib .panel-box {
|
.bluelib .panel-box {
|
||||||
|
|
@ -249,20 +251,25 @@
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
.bluelib .panel-split {
|
.bluelib .split {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 4px 8px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.bluelib .panel-split > *,
|
.bluelib .split > .panel {
|
||||||
.bluelib .panel-split .all {
|
margin: 0;
|
||||||
|
}
|
||||||
|
.bluelib .split > *,
|
||||||
|
.bluelib .split .all {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
.bluelib .panel-split > .panel {
|
.bluelib .split-forcewrap {
|
||||||
margin: 0;
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
.bluelib .image {
|
.bluelib .image {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -249,66 +249,10 @@ body .layout-threecol-right,
|
||||||
}
|
}
|
||||||
body .panel,
|
body .panel,
|
||||||
.bluelib .panel,
|
.bluelib .panel,
|
||||||
body .panel-box,
|
|
||||||
.bluelib .panel-box,
|
|
||||||
body section,
|
body section,
|
||||||
.bluelib section,
|
.bluelib section,
|
||||||
body .panel-blockquote,
|
|
||||||
.bluelib .panel-blockquote,
|
|
||||||
body blockquote,
|
|
||||||
.bluelib blockquote,
|
|
||||||
body .panel-aside,
|
|
||||||
.bluelib .panel-aside,
|
|
||||||
body aside,
|
|
||||||
.bluelib aside,
|
|
||||||
body .panel-split,
|
|
||||||
.bluelib .panel-split {
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 8px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
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 .panel-box > *:first-child,
|
|
||||||
.bluelib .panel-box > *:first-child,
|
|
||||||
body section > *:first-child,
|
|
||||||
.bluelib section > *: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,
|
|
||||||
body .panel-split > *:first-child,
|
|
||||||
.bluelib .panel-split > *:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
body .panel > *:last-child,
|
|
||||||
.bluelib .panel > *:last-child,
|
|
||||||
body .panel-box > *:last-child,
|
|
||||||
.bluelib .panel-box > *:last-child,
|
|
||||||
body section > *:last-child,
|
|
||||||
.bluelib section > *: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,
|
|
||||||
body .panel-split > *:last-child,
|
|
||||||
.bluelib .panel-split > *:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
body .panel-box,
|
body .panel-box,
|
||||||
.bluelib .panel-box,
|
.bluelib .panel-box,
|
||||||
body section,
|
|
||||||
.bluelib section,
|
|
||||||
body .panel-blockquote,
|
body .panel-blockquote,
|
||||||
.bluelib .panel-blockquote,
|
.bluelib .panel-blockquote,
|
||||||
body blockquote,
|
body blockquote,
|
||||||
|
|
@ -317,6 +261,76 @@ body .panel-aside,
|
||||||
.bluelib .panel-aside,
|
.bluelib .panel-aside,
|
||||||
body aside,
|
body aside,
|
||||||
.bluelib aside {
|
.bluelib aside {
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 8px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
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,
|
||||||
|
body .panel .all:first-child,
|
||||||
|
.bluelib .panel .all:first-child,
|
||||||
|
body section .all:first-child,
|
||||||
|
.bluelib section .all:first-child,
|
||||||
|
body .panel-box .all:first-child,
|
||||||
|
.bluelib .panel-box .all:first-child,
|
||||||
|
body .panel-blockquote .all:first-child,
|
||||||
|
.bluelib .panel-blockquote .all:first-child,
|
||||||
|
body blockquote .all:first-child,
|
||||||
|
.bluelib blockquote .all:first-child,
|
||||||
|
body .panel-aside .all:first-child,
|
||||||
|
.bluelib .panel-aside .all:first-child,
|
||||||
|
body aside .all:first-child,
|
||||||
|
.bluelib aside .all: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,
|
||||||
|
body .panel .all:last-child,
|
||||||
|
.bluelib .panel .all:last-child,
|
||||||
|
body section .all:last-child,
|
||||||
|
.bluelib section .all:last-child,
|
||||||
|
body .panel-box .all:last-child,
|
||||||
|
.bluelib .panel-box .all:last-child,
|
||||||
|
body .panel-blockquote .all:last-child,
|
||||||
|
.bluelib .panel-blockquote .all:last-child,
|
||||||
|
body blockquote .all:last-child,
|
||||||
|
.bluelib blockquote .all:last-child,
|
||||||
|
body .panel-aside .all:last-child,
|
||||||
|
.bluelib .panel-aside .all:last-child,
|
||||||
|
body aside .all:last-child,
|
||||||
|
.bluelib aside .all:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
body section,
|
||||||
|
.bluelib section,
|
||||||
|
body .panel-box,
|
||||||
|
.bluelib .panel-box {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
@ -336,38 +350,42 @@ body aside,
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
body .panel-split,
|
body .split,
|
||||||
.bluelib .panel-split {
|
.bluelib .split {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 4px 8px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
body .panel-split > *,
|
body .split > .panel,
|
||||||
.bluelib .panel-split > *,
|
.bluelib .split > .panel,
|
||||||
body .panel-split .all,
|
body .split section,
|
||||||
.bluelib .panel-split .all {
|
.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 .split .all,
|
||||||
|
.bluelib .split .all {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
body .panel-split > .panel,
|
body .split-forcewrap,
|
||||||
.bluelib .panel-split > .panel,
|
.bluelib .split-forcewrap {
|
||||||
body .panel-split .panel-box,
|
flex-grow: 0;
|
||||||
.bluelib .panel-split .panel-box,
|
flex-shrink: 0;
|
||||||
body .panel-split section,
|
flex-basis: 100%;
|
||||||
.bluelib .panel-split section,
|
|
||||||
body .panel-split .panel-blockquote,
|
|
||||||
.bluelib .panel-split .panel-blockquote,
|
|
||||||
body .panel-split blockquote,
|
|
||||||
.bluelib .panel-split blockquote,
|
|
||||||
body .panel-split .panel-aside,
|
|
||||||
.bluelib .panel-split .panel-aside,
|
|
||||||
body .panel-split aside,
|
|
||||||
.bluelib .panel-split aside,
|
|
||||||
body .panel-split .panel-split,
|
|
||||||
.bluelib .panel-split .panel-split {
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
body img,
|
body img,
|
||||||
.bluelib img,
|
.bluelib img,
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -229,10 +229,12 @@
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||||
}
|
}
|
||||||
.bluelib .panel > *:first-child {
|
.bluelib .panel > *:first-child,
|
||||||
|
.bluelib .panel .all:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.bluelib .panel > *:last-child {
|
.bluelib .panel > *:last-child,
|
||||||
|
.bluelib .panel .all:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.bluelib .panel-box {
|
.bluelib .panel-box {
|
||||||
|
|
@ -249,20 +251,25 @@
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
.bluelib .panel-split {
|
.bluelib .split {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 4px 8px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.bluelib .panel-split > *,
|
.bluelib .split > .panel {
|
||||||
.bluelib .panel-split .all {
|
margin: 0;
|
||||||
|
}
|
||||||
|
.bluelib .split > *,
|
||||||
|
.bluelib .split .all {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
.bluelib .panel-split > .panel {
|
.bluelib .split-forcewrap {
|
||||||
margin: 0;
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
.bluelib .image {
|
.bluelib .image {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -249,66 +249,10 @@ body .layout-threecol-right,
|
||||||
}
|
}
|
||||||
body .panel,
|
body .panel,
|
||||||
.bluelib .panel,
|
.bluelib .panel,
|
||||||
body .panel-box,
|
|
||||||
.bluelib .panel-box,
|
|
||||||
body section,
|
body section,
|
||||||
.bluelib section,
|
.bluelib section,
|
||||||
body .panel-blockquote,
|
|
||||||
.bluelib .panel-blockquote,
|
|
||||||
body blockquote,
|
|
||||||
.bluelib blockquote,
|
|
||||||
body .panel-aside,
|
|
||||||
.bluelib .panel-aside,
|
|
||||||
body aside,
|
|
||||||
.bluelib aside,
|
|
||||||
body .panel-split,
|
|
||||||
.bluelib .panel-split {
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 8px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
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 .panel-box > *:first-child,
|
|
||||||
.bluelib .panel-box > *:first-child,
|
|
||||||
body section > *:first-child,
|
|
||||||
.bluelib section > *: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,
|
|
||||||
body .panel-split > *:first-child,
|
|
||||||
.bluelib .panel-split > *:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
body .panel > *:last-child,
|
|
||||||
.bluelib .panel > *:last-child,
|
|
||||||
body .panel-box > *:last-child,
|
|
||||||
.bluelib .panel-box > *:last-child,
|
|
||||||
body section > *:last-child,
|
|
||||||
.bluelib section > *: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,
|
|
||||||
body .panel-split > *:last-child,
|
|
||||||
.bluelib .panel-split > *:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
body .panel-box,
|
body .panel-box,
|
||||||
.bluelib .panel-box,
|
.bluelib .panel-box,
|
||||||
body section,
|
|
||||||
.bluelib section,
|
|
||||||
body .panel-blockquote,
|
body .panel-blockquote,
|
||||||
.bluelib .panel-blockquote,
|
.bluelib .panel-blockquote,
|
||||||
body blockquote,
|
body blockquote,
|
||||||
|
|
@ -317,6 +261,76 @@ body .panel-aside,
|
||||||
.bluelib .panel-aside,
|
.bluelib .panel-aside,
|
||||||
body aside,
|
body aside,
|
||||||
.bluelib aside {
|
.bluelib aside {
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 8px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
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,
|
||||||
|
body .panel .all:first-child,
|
||||||
|
.bluelib .panel .all:first-child,
|
||||||
|
body section .all:first-child,
|
||||||
|
.bluelib section .all:first-child,
|
||||||
|
body .panel-box .all:first-child,
|
||||||
|
.bluelib .panel-box .all:first-child,
|
||||||
|
body .panel-blockquote .all:first-child,
|
||||||
|
.bluelib .panel-blockquote .all:first-child,
|
||||||
|
body blockquote .all:first-child,
|
||||||
|
.bluelib blockquote .all:first-child,
|
||||||
|
body .panel-aside .all:first-child,
|
||||||
|
.bluelib .panel-aside .all:first-child,
|
||||||
|
body aside .all:first-child,
|
||||||
|
.bluelib aside .all: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,
|
||||||
|
body .panel .all:last-child,
|
||||||
|
.bluelib .panel .all:last-child,
|
||||||
|
body section .all:last-child,
|
||||||
|
.bluelib section .all:last-child,
|
||||||
|
body .panel-box .all:last-child,
|
||||||
|
.bluelib .panel-box .all:last-child,
|
||||||
|
body .panel-blockquote .all:last-child,
|
||||||
|
.bluelib .panel-blockquote .all:last-child,
|
||||||
|
body blockquote .all:last-child,
|
||||||
|
.bluelib blockquote .all:last-child,
|
||||||
|
body .panel-aside .all:last-child,
|
||||||
|
.bluelib .panel-aside .all:last-child,
|
||||||
|
body aside .all:last-child,
|
||||||
|
.bluelib aside .all:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
body section,
|
||||||
|
.bluelib section,
|
||||||
|
body .panel-box,
|
||||||
|
.bluelib .panel-box {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
@ -336,38 +350,42 @@ body aside,
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
body .panel-split,
|
body .split,
|
||||||
.bluelib .panel-split {
|
.bluelib .split {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 4px 8px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
body .panel-split > *,
|
body .split > .panel,
|
||||||
.bluelib .panel-split > *,
|
.bluelib .split > .panel,
|
||||||
body .panel-split .all,
|
body .split section,
|
||||||
.bluelib .panel-split .all {
|
.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 .split .all,
|
||||||
|
.bluelib .split .all {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
body .panel-split > .panel,
|
body .split-forcewrap,
|
||||||
.bluelib .panel-split > .panel,
|
.bluelib .split-forcewrap {
|
||||||
body .panel-split .panel-box,
|
flex-grow: 0;
|
||||||
.bluelib .panel-split .panel-box,
|
flex-shrink: 0;
|
||||||
body .panel-split section,
|
flex-basis: 100%;
|
||||||
.bluelib .panel-split section,
|
|
||||||
body .panel-split .panel-blockquote,
|
|
||||||
.bluelib .panel-split .panel-blockquote,
|
|
||||||
body .panel-split blockquote,
|
|
||||||
.bluelib .panel-split blockquote,
|
|
||||||
body .panel-split .panel-aside,
|
|
||||||
.bluelib .panel-split .panel-aside,
|
|
||||||
body .panel-split aside,
|
|
||||||
.bluelib .panel-split aside,
|
|
||||||
body .panel-split .panel-split,
|
|
||||||
.bluelib .panel-split .panel-split {
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
body img,
|
body img,
|
||||||
.bluelib img,
|
.bluelib img,
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -13,7 +13,10 @@
|
||||||
@panel-box: ~".panel-box";
|
@panel-box: ~".panel-box";
|
||||||
@panel-blockquote: ~".panel-blockquote";
|
@panel-blockquote: ~".panel-blockquote";
|
||||||
@panel-aside: ~".panel-aside";
|
@panel-aside: ~".panel-aside";
|
||||||
@panel-split: ~".panel-split";
|
|
||||||
|
@split: ~".split";
|
||||||
|
@split-forcewrap: ~".split-forcewrap";
|
||||||
|
|
||||||
@status-disabled: ~".status-disabled";
|
@status-disabled: ~".status-disabled";
|
||||||
@status-hoverable: ~".status-hoverable";
|
@status-hoverable: ~".status-hoverable";
|
||||||
@status-clickable: ~".status-clickable";
|
@status-clickable: ~".status-clickable";
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,14 @@
|
||||||
@layout-threecol-center: ~".layout-threecol-center";
|
@layout-threecol-center: ~".layout-threecol-center";
|
||||||
@layout-threecol-right: ~".layout-threecol-right";
|
@layout-threecol-right: ~".layout-threecol-right";
|
||||||
|
|
||||||
@panel: ~".panel, .panel-box, section, .panel-blockquote, blockquote, .panel-aside, aside, .panel-split";
|
@panel: ~".panel, @{panel-box}, @{panel-blockquote}, @{panel-aside}";
|
||||||
@panel-box: ~".panel-box, section, .panel-blockquote, blockquote, .panel-aside, aside";
|
@panel-box: ~"section, .panel-box";
|
||||||
@panel-blockquote: ~".panel-blockquote, blockquote";
|
@panel-blockquote: ~".panel-blockquote, blockquote";
|
||||||
@panel-aside: ~".panel-aside, aside";
|
@panel-aside: ~".panel-aside, aside";
|
||||||
@panel-split: ~".panel-split";
|
|
||||||
|
@split: ~".split";
|
||||||
|
@split-forcewrap: ~".split-forcewrap";
|
||||||
|
|
||||||
@status-disabled: ~"[disabled], .status-disabled";
|
@status-disabled: ~"[disabled], .status-disabled";
|
||||||
@status-hoverable: ~"[title], .status-hoverable";
|
@status-hoverable: ~"[title], .status-hoverable";
|
||||||
@status-clickable: ~"[onclick], .status-clickable";
|
@status-clickable: ~"[onclick], .status-clickable";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue