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