1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-23 20:14:21 +00:00
bluelib/src/rules/skeleton.less

486 lines
8.7 KiB
Text

@{root} {
// --- Root ---
color: @bA;
background-color: @hex-background;
.bluelib-color(@hex-foreground);
.font-text();
&, @{all} {
box-sizing: border-box;
color: @bA;
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
outline: none !important;
}
// --- Containers ---
@{container-main} {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
}
// --- Panels ---
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
// Base panel
@{panel} {
margin: 8px 0;
width: 100%;
> @{element-paragraph}, @{element-title}, @{panel} {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
// A generic content panel
@{panel-box} {
padding: 8px;
border-radius: 4px;
border-width: 2px;
border-style: solid;
background-color: @b0;
border-color: @b1;
}
// A box with a quote-like border
@{panel-blockquote} {
border-left-width: 2px;
border-top-width: 0;
border-bottom-width: 0;
border-right-width: 0;
}
// A box with smaller text and no border
@{panel-aside} {
border-width: 0;
font-size: smaller;
}
// Evenly split the panels contained inside
@{panel-split} {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
> @{all} {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
> @{panel} {
margin: 0;
}
}
// --- Forms ---
@{form} {
display: grid;
align-items: center;
row-gap: 4px;
column-gap: 8px;
grid-template-columns: minmax(auto, 1fr) 5fr;
}
@{form-label} {
grid-column: 1;
justify-self: end;
}
@{form-field} {
grid-column: 2;
justify-self: stretch;
width: 100%;
}
@{form-submit} {
width: auto;
}
@{form-buttons} {
grid-column-start: 1;
grid-column-end: 3;
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
// --- Buttons ---
@{button} {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: @bA;
border: none;
color: @hex-outline;
padding: 6px 16px;
border-radius: 4px;
font-family: inherit;
font-size: inherit;
cursor: pointer;
&:hover {
background-color: @bC;
}
&:active {
background-color: @bF;
}
&@{status-disabled} {
&:hover {
background-color: @bA;
}
&:active {
background-color: @bA;
}
}
}
@{button-fill-width} {
width: 100%;
}
@{button-toggle} {
padding: 4px 14px;
border-width: 2px;
border-style: solid;
&@{status-disabled} {
border-style: dashed;
}
}
@{button-toggle-off} {
border-color: @bA;
color: @bA;
background-color: @b0;
&:hover {
border-color: @bC;
color: @bC;
background-color: @b1;
}
&:active {
border-color: @bF;
color: @bF;
background-color: @b2;
}
&@{status-disabled} {
border-style: dashed;
&:hover {
border-color: @bA;
color: @bA;
background-color: @b0;
}
&:active {
border-color: @bA;
color: @bA;
background-color: @b0;
}
}
}
@{button-toggle-on} {
border-color: @bF;
color: @bF;
background-color: @b2;
&:hover {
border-color: @bC;
color: @bC;
background-color: @b1;
}
&:active {
border-color: @bA;
color: @bA;
background-color: @b0;
}
&@{status-disabled} {
border-style: dashed;
&:hover {
border-color: @bF;
color: @bF;
background-color: @b2;
}
&:active {
border-color: @bF;
color: @bF;
background-color: @b2;
}
}
}
// --- Inputs ---
@{input-field} {
cursor: text;
border-width: 0 0 2px 0;
border-style: solid;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
font-family: inherit;
font-size: inherit;
border-color: @b3;
color: @bA;
background-color: @b0;
&::placeholder {
color: @b4;
opacity: 1;
}
&:optional::placeholder {
font-style: italic;
}
&:invalid:not(:placeholder-shown) {
.bluelib-color(@hex-red);
}
&:hover, &:focus {
border-color: @b6;
color: @bF;
background-color: @b1;
&::placeholder {
color: @b7;
}
}
&@{status-disabled} {
border-style: dashed;
&:hover, &:focus {
border-color: @b3;
color: @bA;
background-color: @b0;
&::placeholder {
color: @b4;
}
}
}
}
// --- Element status ---
@{status-hoverable} {
cursor: help;
}
@{status-clickable} {
cursor: pointer;
}
@{status-disabled} {
cursor: not-allowed !important;
opacity: 50%;
}
// --- Elements ---
@{element-title} {
text-align: center;
.bluelib-color(@hex-accent);
.font-title();
}
@{element-paragraph} {
}
@{element-separator} {
border-width: 1px;
border-style: solid;
border-color: @b1;
}
@{element-list-item} {
margin: 10px 0;
}
@{element-anchor} {
.bluelib-color(@hex-link);
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
&:hover {
.bluelib-color(@hex-link-hover);
}
&:active {
.bluelib-color(@hex-link-active);
}
&@{status-disabled} {
text-decoration-style: dashed;
&:hover {
.bluelib-color(@hex-link);
}
&:active {
.bluelib-color(@hex-link);
}
}
}
// --- Alignment ---
@{align-left} {
text-align: left;
}
@{align-center} {
text-align: center;
}
@{align-right} {
text-align: right;
}
// --- Sizes ---
@{size-xxl} {
font-size: xx-large;
}
@{size-xl} {
font-size: x-large;
}
@{size-l} {
font-size: large;
}
@{size-m} {
font-size: medium;
}
@{size-s} {
font-size: small;
}
@{size-xs} {
font-size: x-small;
}
@{size-xxs} {
font-size: xx-small;
}
// --- Styles ---
@{style-bold} {
font-weight: bold;
.bluelib-color(@hex-accent);
}
@{style-italic} {
font-style: italic;
}
@{style-underline} {
text-decoration-line: underline;
}
@{style-strike} {
text-decoration-line: line-through;
}
@{style-monospace} {
.font-code();
}
@{style-keyboard} {
.font-code();
padding: 2px 4px;
border: 2px outset;
border-radius: 4px;
}
// --- Colors ---
@{color-red} {
.bluelib-color(@hex-red)
}
@{color-orange} {
.bluelib-color(@hex-orange)
}
@{color-yellow} {
.bluelib-color(@hex-yellow)
}
@{color-lime} {
.bluelib-color(@hex-lime)
}
@{color-cyan} {
.bluelib-color(@hex-cyan)
}
@{color-blue} {
.bluelib-color(@hex-blue)
}
@{color-magenta} {
.bluelib-color(@hex-magenta)
}
@{color-gray} {
.bluelib-color(@hex-gray)
}
}