perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modifs in global attribute flexbox alternativ implementation

Browse Source
This commit is contained in:
asus
2023-11-17 17:49:44 +01:00
parent 5a443e6672
commit 7e0cb01352
4 changed files with 210 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
styles/global.css
View File

@@ -6,7 +6,6 @@
/*
[-] horizontal [/] content [/] left [/]-pack [ ]-fit
[-] vertical [/]-parent [/] right [/] grow [ ] stretch
[/] top [/] space
@@ -14,38 +13,36 @@
[/]-center
*/
[class*="child-"] { border: 1px solid blue; }
.horizontal, .vertical { display: flex; justify-content: center; align-items: center; width: auto; }
.horizontal { flex-direction: row; }
.vertical { flex-direction: column; }
.horizontal > *, .vertical > * { margin: 0px; flex-grow: 0; }
[class*="horizontal"], [class*="vertical"] { display: flex; justify-content: center; align-items: center; width: auto; }
[class*="horizontal"] { flex-direction: row; }
[class*="vertical"] { flex-direction: column; }
[class*="horizontal"] > *, [class*="vertical"] > * { margin: 0px; flex-grow: 0; }
.width-parent { width: auto; }
.width-content { width: fit-content; }
[class*="-parent"] { width: auto; }
[class*="-content"] { width: fit-content; }
.horizontal.child-left { justify-content: flex-start; }
.horizontal.child-center { }
.horizontal.child-right { justify-content: flex-end; }
.horizontal.child-top { align-items: flex-start; }
.horizontal.child-bottom { align-items: flex-end; }
.vertical.child-left { align-items: flex-start; }
.vertical.child-center { align-items: center; }
.vertical.child-right { align-items: flex-end; }
.vertical.child-top { justify-content: flex-start; }
.vertical.child-bottom { justify-content: flex-end; }
[class*="horizontal"][class*="-left"] { justify-content: flex-start; }
[class*="horizontal"][class*="-center"] { }
[class*="horizontal"][class*="-right"] { justify-content: flex-end; }
[class*="horizontal"][class*="-top"] { align-items: flex-start; }
[class*="horizontal"][class*="-bottom"] { align-items: flex-end; }
[class*="vertical"][class*="-left"] { align-items: flex-start; }
[class*="vertical"][class*="-center"] { align-items: center; }
[class*="vertical"][class*="-right"] { align-items: flex-end; }
[class*="vertical"][class*="-top"] { justify-content: flex-start; }
[class*="vertical"][class*="-bottom"] { justify-content: flex-end; }
.horizontal.child-pack > * { flex-grow: 0; }
.horizontal.child-space { justify-content: space-around; }
.horizontal.child-spread { justify-content: space-between; }
.horizontal.child-grow > * { flex-grow: 1; }
.vertical.child-pack > * { flex-grow: 0; }
.vertical.child-space { justify-content: space-around; }
.vertical.child-spread { justify-content: space-between; }
.vertical.child-grow > * { flex-grow: 1; }
[class*="horizontal"][class*="-pack"] > * { flex-grow: 0; }
[class*="horizontal"][class*="-space"] { justify-content: space-around; }
[class*="horizontal"][class*="-spread"] { justify-content: space-between; }
[class*="horizontal"][class*="-grow"] > * { flex-grow: 1; }
[class*="vertical"][class*="-pack"] > * { flex-grow: 0; }
[class*="vertical"][class*="-space"] { justify-content: space-around; }
[class*="vertical"][class*="-spread"] { justify-content: space-between; }
[class*="vertical"][class*="-grow"] > * { flex-grow: 1; }
[class*="horizontal"][class*="-fit"], [class*="vertical"][class*="-fit"] { }
[class*="horizontal"][class*="-stretch"], [class*="vertical"][class*="-stretch"] { align-items: stretch; }
.horizontal.child-fit, .vertical.child-fit { }
.horizontal.child-stretch, .vertical.child-stretch { align-items: stretch; }
.horizontal {
@@ -56,4 +53,23 @@
display: flex;
flex-direction: column;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
[class*="gap"] { display: flex; gap: 10px; }
.gap-small { gap: var(--small-space); }
.gap-medium { gap: var(--medium-space); }
.gap-big { gap: var(--big-space); }
[class*="margin"] { margin: 0px; --margin-size: var(--small-space); }
.margin-small { --margin-size: var(--small-space); }
.margin-medium { --margin-size: var(--medium-space); }
.margin-big { --margin-size: var(--big-space); }
.margin { margin: var(--margin-size); }
.margin-left { margin-left: var(--margin-size); }
.margin-right { margin-right: var(--margin-size); }
.margin-top { margin-top: var(--margin-size); }
.margin-bottom { margin-bottom: var(--margin-size); }