mirror of
https://github.com/Steffo99/bluelib.git
synced 2025-01-03 00:54:20 +00:00
🚧 Define editor regions to collapse in the skeleton file
This commit is contained in:
parent
9cd397cb69
commit
912398ce00
6 changed files with 160 additions and 116 deletions
160
src/rules/skeleton.less
vendored
160
src/rules/skeleton.less
vendored
|
|
@ -3,6 +3,7 @@
|
||||||
/// Elements outside the root won't be styled at all, allowing Bluelib's styling to be contained in components or modules of a website.
|
/// Elements outside the root won't be styled at all, allowing Bluelib's styling to be contained in components or modules of a website.
|
||||||
|
|
||||||
@{bluelib} {
|
@{bluelib} {
|
||||||
|
// Get
|
||||||
|
|
||||||
// Set the background defined in the palette
|
// Set the background defined in the palette
|
||||||
background-color: @hex-background;
|
background-color: @hex-background;
|
||||||
|
|
@ -12,13 +13,130 @@
|
||||||
// By default, text should use the main font
|
// By default, text should use the main font
|
||||||
.font-text();
|
.font-text();
|
||||||
|
|
||||||
// Define the color macros used through all the stylesheet
|
/// ===== Macros =====
|
||||||
.define-bluelib-color-macros();
|
/// Less allows defining variables to reduce the amount of boilerplate code to write while defining the rules.
|
||||||
|
/// In Bluelib, these are called macros.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Macros">
|
||||||
|
|
||||||
|
@b0: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.025
|
||||||
|
);
|
||||||
|
@b1: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.100
|
||||||
|
);
|
||||||
|
@b2: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.200
|
||||||
|
);
|
||||||
|
@b3: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.300
|
||||||
|
);
|
||||||
|
@b4: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.400
|
||||||
|
);
|
||||||
|
@b5: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.500
|
||||||
|
);
|
||||||
|
@b6: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.600
|
||||||
|
);
|
||||||
|
@b7: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.700
|
||||||
|
);
|
||||||
|
@b8: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.800
|
||||||
|
);
|
||||||
|
@b9: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
0.900
|
||||||
|
);
|
||||||
|
@bA: rgba(
|
||||||
|
var(--bluelib-color-r),
|
||||||
|
var(--bluelib-color-g),
|
||||||
|
var(--bluelib-color-b),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@bB: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@bC: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@bD: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@bE: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 40)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 40)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 40)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@bF: rgba(
|
||||||
|
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)),
|
||||||
|
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)),
|
||||||
|
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
|
||||||
|
@bL: rgba(
|
||||||
|
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
||||||
|
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
||||||
|
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
@bT: rgba(
|
||||||
|
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
||||||
|
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
||||||
|
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
||||||
|
1.000
|
||||||
|
);
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== All =====
|
/// ===== All =====
|
||||||
/// By default, browsers style elements with some weird rules.
|
/// By default, browsers style elements with some weird rules.
|
||||||
/// This is an attempt to correct them, and to implement some Bluelib magic.
|
/// This is an attempt to correct them, and to implement some Bluelib magic.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: All">
|
||||||
|
|
||||||
&, @{all} {
|
&, @{all} {
|
||||||
|
|
||||||
// Globally set the box-sizing to border-box, as content-box is completely insane
|
// Globally set the box-sizing to border-box, as content-box is completely insane
|
||||||
|
|
@ -33,11 +151,15 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Layouts =====
|
/// ===== Layouts =====
|
||||||
/// Layouts arrange the content displayed inside the root.
|
/// Layouts arrange the content displayed inside the root.
|
||||||
/// Layouts are the second element in the Bluelib hierarchy, immediately following the root.
|
/// Layouts are the second element in the Bluelib hierarchy, immediately following the root.
|
||||||
/// Ideally, a single layout should be used per page.
|
/// Ideally, a single layout should be used per page.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Layouts">
|
||||||
|
|
||||||
// The base layout class.
|
// The base layout class.
|
||||||
@{layout} {
|
@{layout} {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -118,11 +240,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Panels =====
|
/// ===== Panels =====
|
||||||
/// Panels are the main sectioning elements available in Bluelib.
|
/// Panels are the main sectioning elements available in Bluelib.
|
||||||
/// Many instance of them should be present on the page!
|
/// Many instance of them should be present on the page!
|
||||||
/// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page.
|
/// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Panels">
|
||||||
|
|
||||||
// The base panel class.
|
// The base panel class.
|
||||||
@{panel} {
|
@{panel} {
|
||||||
// Panels have a margin to separate them from other elements
|
// Panels have a margin to separate them from other elements
|
||||||
|
|
@ -168,9 +294,13 @@
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
|
|
||||||
/// ===== Split =====
|
//</editor-fold>
|
||||||
|
|
||||||
|
/// ===== Splits =====
|
||||||
/// A split is an element which splits everything contained inside in multiple columns of equal width.
|
/// A split is an element which splits everything contained inside in multiple columns of equal width.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Splits">
|
||||||
|
|
||||||
@{split} {
|
@{split} {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -197,9 +327,13 @@
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Separators =====
|
/// ===== Separators =====
|
||||||
/// Separators are horizontal lines separating elements.
|
/// Separators are horizontal lines separating elements.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Separators">
|
||||||
|
|
||||||
@{separator} {
|
@{separator} {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
@ -214,9 +348,13 @@
|
||||||
border-color: @bA;
|
border-color: @bA;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Images =====
|
/// ===== Images =====
|
||||||
/// Images are changed to block elements and are automatically centered.
|
/// Images are changed to block elements and are automatically centered.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Images">
|
||||||
|
|
||||||
@{image} {
|
@{image} {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|
@ -236,8 +374,12 @@
|
||||||
max-height: max(14.1vw, 25vh);
|
max-height: max(14.1vw, 25vh);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Status =====
|
/// ===== Status =====
|
||||||
/// Statuses are classes that can be applied to elements to indicate that special interactions are available.
|
/// Status are classes that can be applied to elements to indicate that special interactions are available.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Status">
|
||||||
|
|
||||||
@{status-disabled} {
|
@{status-disabled} {
|
||||||
opacity: 50%;
|
opacity: 50%;
|
||||||
|
|
@ -248,9 +390,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Inputs =====
|
/// ===== Inputs =====
|
||||||
/// Inputs are the interactable parts of a website.
|
/// Inputs are the interactable parts of a website.
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Inputs">
|
||||||
|
|
||||||
@{input} {
|
@{input} {
|
||||||
// Disable the browser font override
|
// Disable the browser font override
|
||||||
font: inherit;
|
font: inherit;
|
||||||
|
|
@ -499,6 +645,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
/// ===== Forms =====
|
/// ===== Forms =====
|
||||||
/// Forms are containers where interactable elements are contained.
|
/// Forms are containers where interactable elements are contained.
|
||||||
/// Every interactable is split in two parts: a label on the left and the control on the right.
|
/// Every interactable is split in two parts: a label on the left and the control on the right.
|
||||||
|
|
@ -512,6 +660,8 @@
|
||||||
///
|
///
|
||||||
/// [Submit]
|
/// [Submit]
|
||||||
|
|
||||||
|
//<editor-fold desc="Rules: Forms">
|
||||||
|
|
||||||
@{form} {
|
@{form} {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
|
|
@ -593,6 +743,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//</editor-fold>
|
||||||
|
|
||||||
// --- Elements ---
|
// --- Elements ---
|
||||||
|
|
||||||
@{element-title} {
|
@{element-title} {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,113 +5,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.define-bluelib-color-macros() {
|
.define-bluelib-color-macros() {
|
||||||
@b0: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.025
|
|
||||||
);
|
|
||||||
@b1: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.100
|
|
||||||
);
|
|
||||||
@b2: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.200
|
|
||||||
);
|
|
||||||
@b3: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.300
|
|
||||||
);
|
|
||||||
@b4: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.400
|
|
||||||
);
|
|
||||||
@b5: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.500
|
|
||||||
);
|
|
||||||
@b6: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.600
|
|
||||||
);
|
|
||||||
@b7: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.700
|
|
||||||
);
|
|
||||||
@b8: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.800
|
|
||||||
);
|
|
||||||
@b9: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
0.900
|
|
||||||
);
|
|
||||||
@bA: rgba(
|
|
||||||
var(--bluelib-color-r),
|
|
||||||
var(--bluelib-color-g),
|
|
||||||
var(--bluelib-color-b),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bB: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bC: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bD: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bE: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 40)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 40)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 40)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bF: rgba(
|
|
||||||
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)),
|
|
||||||
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)),
|
|
||||||
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
|
|
||||||
@bL: rgba(
|
|
||||||
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
|
||||||
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
|
||||||
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
@bT: rgba(
|
|
||||||
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
|
||||||
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
|
||||||
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
|
|
||||||
1.000
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue