mirror of
https://github.com/Steffo99/bluelib.git
synced 2025-01-03 00:54:20 +00:00
🔧 Reorganize forms
This commit is contained in:
parent
0ed5c57f8a
commit
ecbc736d6e
11 changed files with 90 additions and 174 deletions
40
src/rules/skeleton.less
vendored
40
src/rules/skeleton.less
vendored
|
|
@ -195,7 +195,8 @@
|
|||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
// --- Images ---
|
||||
/// --- Images ---
|
||||
/// Images are changed to block elements and are automatically centered.
|
||||
|
||||
@{image} {
|
||||
display: block;
|
||||
|
|
@ -208,16 +209,29 @@
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
// Allow an image to grow to its real size
|
||||
@{image-free} {
|
||||
max-width: unset;
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
// Limit even further the size of an image based on the size of the screen
|
||||
@{image-limited} {
|
||||
max-height: max(37.5vw, 66.6vh);
|
||||
}
|
||||
|
||||
// --- Forms ---
|
||||
/// --- Forms ---
|
||||
/// 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
|
||||
///
|
||||
/// Example:
|
||||
///
|
||||
/// Username | Steffo
|
||||
/// Email | ste.pigozzi@gmail.com
|
||||
/// Password | ············
|
||||
/// Country | Italy ↓
|
||||
///
|
||||
/// [Submit]
|
||||
|
||||
@{form} {
|
||||
display: grid;
|
||||
|
|
@ -226,25 +240,29 @@
|
|||
row-gap: 4px;
|
||||
column-gap: 8px;
|
||||
|
||||
// Labels should have the greater width between the one they require and 1/6 of the form width.
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
|
||||
@{form-label} {
|
||||
// Labels are on the left column of the grid
|
||||
grid-column: 1;
|
||||
// They should be right-aligned
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@{form-input} {
|
||||
// Inputs are on the right column of the grid
|
||||
grid-column: 2;
|
||||
// They should occupy all the available space
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@{form-submit} {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@{form-buttons} {
|
||||
// An element filling a whole row of a form
|
||||
// Useful for adding buttons or similar flow interruptions
|
||||
@{form-row} {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
|
||||
|
|
@ -256,14 +274,6 @@
|
|||
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Buttons ---
|
||||
|
|
|
|||
|
|
@ -168,7 +168,6 @@
|
|||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.bluelib .layout-fill > main,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
|
|
@ -271,6 +270,7 @@
|
|||
flex-shrink: 0;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.bluelib img,
|
||||
.bluelib .image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -295,16 +295,14 @@
|
|||
.bluelib .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
.bluelib .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .form-submit {
|
||||
width: auto;
|
||||
}
|
||||
.bluelib .form-buttons {
|
||||
.bluelib .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -315,12 +313,6 @@
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bluelib .form-buttons:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bluelib .button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -416,69 +416,36 @@ body .form,
|
|||
column-gap: 8px;
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
body form label,
|
||||
.bluelib form label,
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form label,
|
||||
.bluelib .form label,
|
||||
body .form-label,
|
||||
.bluelib .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
body form .input-field,
|
||||
.bluelib form .input-field,
|
||||
body input[type="color"],
|
||||
.bluelib input[type="color"],
|
||||
body input[type="date"],
|
||||
.bluelib input[type="date"],
|
||||
body input[type="datetime-local"],
|
||||
.bluelib input[type="datetime-local"],
|
||||
body input[type="email"],
|
||||
.bluelib input[type="email"],
|
||||
body input[type="file"],
|
||||
.bluelib input[type="file"],
|
||||
body input[type="image"],
|
||||
.bluelib input[type="image"],
|
||||
body input[type="month"],
|
||||
.bluelib input[type="month"],
|
||||
body input[type="number"],
|
||||
.bluelib input[type="number"],
|
||||
body input[type="password"],
|
||||
.bluelib input[type="password"],
|
||||
body input[type="search"],
|
||||
.bluelib input[type="search"],
|
||||
body input[type="tel"],
|
||||
.bluelib input[type="tel"],
|
||||
body input[type="text"],
|
||||
.bluelib input[type="text"],
|
||||
body input[type="time"],
|
||||
.bluelib input[type="time"],
|
||||
body input[type="url"],
|
||||
.bluelib input[type="url"],
|
||||
body input[type="week"],
|
||||
.bluelib input[type="week"],
|
||||
body form select:not([multiple]),
|
||||
.bluelib form select:not([multiple]),
|
||||
body .input-select,
|
||||
.bluelib .input-select,
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form input,
|
||||
.bluelib .form input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body .form-input,
|
||||
.bluelib .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body .form-submit,
|
||||
.bluelib .form-submit {
|
||||
width: auto;
|
||||
}
|
||||
body .form-buttons,
|
||||
.bluelib .form-buttons {
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form div,
|
||||
.bluelib .form div,
|
||||
body .form-row,
|
||||
.bluelib .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -489,14 +456,6 @@ body .form-buttons,
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
body .form-buttons:first-child,
|
||||
.bluelib .form-buttons:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
body .form-buttons:last-child,
|
||||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body button,
|
||||
.bluelib button,
|
||||
body input[type="submit"],
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -168,7 +168,6 @@
|
|||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.bluelib .layout-fill > main,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
|
|
@ -271,6 +270,7 @@
|
|||
flex-shrink: 0;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.bluelib img,
|
||||
.bluelib .image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -295,16 +295,14 @@
|
|||
.bluelib .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
.bluelib .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .form-submit {
|
||||
width: auto;
|
||||
}
|
||||
.bluelib .form-buttons {
|
||||
.bluelib .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -315,12 +313,6 @@
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bluelib .form-buttons:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bluelib .button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -416,69 +416,36 @@ body .form,
|
|||
column-gap: 8px;
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
body form label,
|
||||
.bluelib form label,
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form label,
|
||||
.bluelib .form label,
|
||||
body .form-label,
|
||||
.bluelib .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
body form .input-field,
|
||||
.bluelib form .input-field,
|
||||
body input[type="color"],
|
||||
.bluelib input[type="color"],
|
||||
body input[type="date"],
|
||||
.bluelib input[type="date"],
|
||||
body input[type="datetime-local"],
|
||||
.bluelib input[type="datetime-local"],
|
||||
body input[type="email"],
|
||||
.bluelib input[type="email"],
|
||||
body input[type="file"],
|
||||
.bluelib input[type="file"],
|
||||
body input[type="image"],
|
||||
.bluelib input[type="image"],
|
||||
body input[type="month"],
|
||||
.bluelib input[type="month"],
|
||||
body input[type="number"],
|
||||
.bluelib input[type="number"],
|
||||
body input[type="password"],
|
||||
.bluelib input[type="password"],
|
||||
body input[type="search"],
|
||||
.bluelib input[type="search"],
|
||||
body input[type="tel"],
|
||||
.bluelib input[type="tel"],
|
||||
body input[type="text"],
|
||||
.bluelib input[type="text"],
|
||||
body input[type="time"],
|
||||
.bluelib input[type="time"],
|
||||
body input[type="url"],
|
||||
.bluelib input[type="url"],
|
||||
body input[type="week"],
|
||||
.bluelib input[type="week"],
|
||||
body form select:not([multiple]),
|
||||
.bluelib form select:not([multiple]),
|
||||
body .input-select,
|
||||
.bluelib .input-select,
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form input,
|
||||
.bluelib .form input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body .form-input,
|
||||
.bluelib .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body .form-submit,
|
||||
.bluelib .form-submit {
|
||||
width: auto;
|
||||
}
|
||||
body .form-buttons,
|
||||
.bluelib .form-buttons {
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form div,
|
||||
.bluelib .form div,
|
||||
body .form-row,
|
||||
.bluelib .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -489,14 +456,6 @@ body .form-buttons,
|
|||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
body .form-buttons:first-child,
|
||||
.bluelib .form-buttons:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
body .form-buttons:last-child,
|
||||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body button,
|
||||
.bluelib button,
|
||||
body input[type="submit"],
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
@layout: ~".layout";
|
||||
@layout-fill: ~".layout-fill";
|
||||
@layout-fill-single: ~"@{layout-fill} > main, .layout-fill-single";
|
||||
@layout-fill-single: ~".layout-fill-single";
|
||||
@layout-threecol: ~".layout-threecol";
|
||||
@layout-threecol-left: ~".layout-threecol-left";
|
||||
@layout-threecol-center: ~".layout-threecol-center";
|
||||
|
|
@ -17,17 +17,19 @@
|
|||
@split: ~".split";
|
||||
@split-forcewrap: ~".split-forcewrap";
|
||||
|
||||
@image: ~"img, .image";
|
||||
@image-free: ~".image-free";
|
||||
@image-limited: ~".image-limited";
|
||||
|
||||
@status-disabled: ~".status-disabled";
|
||||
@status-hoverable: ~".status-hoverable";
|
||||
@status-clickable: ~".status-clickable";
|
||||
@image: ~".image";
|
||||
@image-free: ~".image-free";
|
||||
@image-limited: ~".image-limited";
|
||||
|
||||
@form: ~".form";
|
||||
@form-label: ~".form-label";
|
||||
@form-input: ~".form-input";
|
||||
@form-submit: ~'.form-submit';
|
||||
@form-buttons: ~'.form-buttons';
|
||||
@form-row: ~".form-row";
|
||||
|
||||
@button: ~'.button';
|
||||
@button-fill-width: ~'.button-fill-width';
|
||||
@button-toggle: ~'.button-toggle';
|
||||
|
|
|
|||
|
|
@ -17,17 +17,19 @@
|
|||
@split: ~".split";
|
||||
@split-forcewrap: ~".split-forcewrap";
|
||||
|
||||
@status-disabled: ~"[disabled], .status-disabled";
|
||||
@status-hoverable: ~"[title], .status-hoverable";
|
||||
@status-clickable: ~"[onclick], .status-clickable";
|
||||
@image: ~"img, .image";
|
||||
@image-free: ~".image-free";
|
||||
@image-limited: ~".image-limited";
|
||||
|
||||
@status-disabled: ~"[disabled], .status-disabled";
|
||||
@status-hoverable: ~"[title], .status-hoverable";
|
||||
@status-clickable: ~"[onclick], .status-clickable";
|
||||
|
||||
@form: ~"form, .form";
|
||||
@form-label: ~"form label, .form-label";
|
||||
@form-input: ~"form @{input-field}, form @{input-select}, .form-input";
|
||||
@form-submit: ~'form @{button}, form button, .form-submit';
|
||||
@form-buttons: ~'.form-buttons';
|
||||
@form-label: ~"@{form} label, .form-label";
|
||||
@form-input: ~"@{form} @{input}, .form-input";
|
||||
@form-row: ~"@{form} div, .form-row";
|
||||
|
||||
@button: ~'button, input[type="submit"], .button';
|
||||
@button-fill-width: ~'.button-fill-width';
|
||||
@button-toggle: ~'.button-toggle';
|
||||
|
|
|
|||
Loading…
Reference in a new issue