js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix specificity of gap and align-items in layout utilities

Browse Source
This commit is contained in:
lindsaym-fa
2024-12-19 16:51:55 -05:00
parent 52c0fdf6de
commit f5b8f2257d
1 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/styles/utilities/layout.css
View File

@@ -11,22 +11,33 @@
margin-inline: 0;
}
:where(
[class*='wa-cluster'],
[class*='wa-flank'],
[class*='wa-frame'],
[class*='wa-grid'],
[class*='wa-stack'],
[class*='wa-split']
) {
gap: var(--wa-space-m);
}
/* #region Cluster */
[class*='wa-cluster'] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wa-space-m);
justify-content: flex-start;
}
:where([class*='wa-cluster']) {
align-items: center;
}
/* #endregion */
/* #region Flank */
[class*='wa-flank'] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wa-space-m);
--content-percentage: initial;
--flank-size: initial;
@@ -53,12 +64,15 @@
flex-grow: 999;
min-inline-size: var(--content-percentage, 50%);
}
:where([class*='wa-flank']) {
align-items: center;
}
/* #endregion */
/* #region Frame */
[class*='wa-frame'] {
display: flex;
align-items: center;
aspect-ratio: 1 / 1;
justify-content: center;
overflow: hidden;
@@ -80,12 +94,15 @@
[class*='wa-frame'][class*='\:portrait'] {
aspect-ratio: 9 / 16;
}
:where([class*='wa-frame']) {
align-items: center;
}
/* #endregion */
/* #region Grid */
[class*='wa-grid'] {
display: grid;
gap: var(--wa-space-m);
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
--min-column-size: initial;
@@ -99,9 +116,7 @@
/* #region Split */
[class*='wa-split'] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wa-space-m);
justify-content: space-between;
}
@@ -123,14 +138,20 @@
align-self: stretch;
}
:where([class*='wa-split']) {
align-items: center;
}
/* #endregion */
/* #region Stack */
[class*='wa-stack'] {
display: flex;
align-items: stretch;
flex-direction: column;
gap: var(--wa-space-m);
justify-content: flex-start;
}
:where([class*='wa-stack']) {
align-items: stretch;
}
/* #endregion */