@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/flex.css

@@ -0,0 +1,441 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 flex 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-flex {
+    --xh-flex-skin: 1;
+  }
+
+  .xh-scope-flex[data-part='root'] {
+    /* 交叉轴对齐收在两个私有槽里：缺省那一支跟着当档的方向走，写了 align 的档改的是另一支。
+       分两支是因为逐档切方向时，缺省对齐要跟着换，而作者显式写的对齐不能被换掉。
+       每一层都声明一遍，嵌套时内层不吃外层的值 */
+    --xh-_flex-align-default: center;
+    --xh-_flex-align: var(--xh-_flex-align-default);
+
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: var(--xh-_flex-align);
+    /* 不写 gap 档位就不留间距；使用者槽位排在档位之前，写死一个值即盖过所有档 */
+    gap: var(--xh-flex-gap, var(--xh-space-0));
+  }
+
+  /* 行内盒：宽度收到内容，能和文字排在同一行 */
+  .xh-scope-flex[data-part='root'][data-inline] {
+    display: inline-flex;
+  }
+
+  /* 分隔符：夹在两个子项之间的装饰件，样子由放进去的内容决定。
+     这里只兜住两件事——不被主轴挤扁（一条 1px 的竖线会被弹性收缩吃没），
+     交叉轴上不单独发话，跟着容器的对齐走：横排随中线、竖排随拉伸 */
+  .xh-scope-flex[data-part='split'] {
+    flex: none;
+  }
+
+  /* —— 方向与缺省对齐 —— */
+  /* 横排时按中线对齐：一排里混着文字、按钮、标签，高度本就不齐，居中最不容易看出错位 */
+  .xh-scope-flex[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+    --xh-_flex-align-default: center;
+  }
+
+  /* 竖排时拉伸：一列里的块级子项该占满容器宽度 */
+  .xh-scope-flex[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    --xh-_flex-align-default: stretch;
+  }
+
+  /* —— 折行 —— */
+  .xh-scope-flex[data-part='root'][data-wrap] {
+    flex-wrap: wrap;
+  }
+
+  /* —— 交叉轴对齐 —— */
+  /* 写的是显式那一支：特指度比根上那条缺省高，方向怎么换都盖不掉它 */
+  .xh-scope-flex[data-part='root'][data-align='start'] {
+    --xh-_flex-align: flex-start;
+  }
+
+  .xh-scope-flex[data-part='root'][data-align='center'] {
+    --xh-_flex-align: center;
+  }
+
+  .xh-scope-flex[data-part='root'][data-align='end'] {
+    --xh-_flex-align: flex-end;
+  }
+
+  .xh-scope-flex[data-part='root'][data-align='stretch'] {
+    --xh-_flex-align: stretch;
+  }
+
+  .xh-scope-flex[data-part='root'][data-align='baseline'] {
+    --xh-_flex-align: baseline;
+  }
+
+  /* —— 主轴分布 —— */
+  .xh-scope-flex[data-part='root'][data-justify='start'] {
+    justify-content: flex-start;
+  }
+
+  .xh-scope-flex[data-part='root'][data-justify='center'] {
+    justify-content: center;
+  }
+
+  .xh-scope-flex[data-part='root'][data-justify='end'] {
+    justify-content: flex-end;
+  }
+
+  .xh-scope-flex[data-part='root'][data-justify='between'] {
+    justify-content: space-between;
+  }
+
+  .xh-scope-flex[data-part='root'][data-justify='around'] {
+    justify-content: space-around;
+  }
+
+  .xh-scope-flex[data-part='root'][data-justify='evenly'] {
+    justify-content: space-evenly;
+  }
+
+  /* —— 间距档位 —— */
+  /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
+  .xh-scope-flex[data-part='root'][data-gap='xs'] {
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+  }
+
+  .xh-scope-flex[data-part='root'][data-gap='sm'] {
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+  }
+
+  .xh-scope-flex[data-part='root'][data-gap='md'] {
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+  }
+
+  .xh-scope-flex[data-part='root'][data-gap='lg'] {
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+  }
+
+  .xh-scope-flex[data-part='root'][data-gap='xl'] {
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+  }
+
+  /* —— 逐档的方向、对齐、分布与间距 —— */
+  /* 移动优先：先按不带档位的那几个属性排定，视口每宽到一档就换成那一档的取值，没写的档沿用比它窄的那一档。
+     四档自窄到宽依次写，只用 min-width：媒体查询不改选择器权重，宽视口上同时命中好几档时由源码序决定谁生效。
+     宽度写字面量：自定义属性在 @media 条件里不参与求值，令牌变量写在这里等于没写条件。
+     方向换档时只换缺省对齐那一支，作者写过的对齐仍由显式那一支说了算 */
+  @media (min-width: 640px) {
+    .xh-scope-flex[data-part='root'][data-orientation-sm='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-orientation-sm='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-sm='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-sm='center'] {
+      --xh-_flex-align: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-sm='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-sm='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-sm='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-sm='start'] {
+      justify-content: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-sm='center'] {
+      justify-content: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-sm='end'] {
+      justify-content: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-sm='between'] {
+      justify-content: space-between;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-sm='around'] {
+      justify-content: space-around;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-sm='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-sm='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-sm='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-sm='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-sm='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-sm='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
+  @media (min-width: 768px) {
+    .xh-scope-flex[data-part='root'][data-orientation-md='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-orientation-md='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-md='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-md='center'] {
+      --xh-_flex-align: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-md='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-md='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-md='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-md='start'] {
+      justify-content: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-md='center'] {
+      justify-content: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-md='end'] {
+      justify-content: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-md='between'] {
+      justify-content: space-between;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-md='around'] {
+      justify-content: space-around;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-md='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-md='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-md='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-md='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-md='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-md='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .xh-scope-flex[data-part='root'][data-orientation-lg='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-orientation-lg='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-lg='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-lg='center'] {
+      --xh-_flex-align: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-lg='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-lg='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-lg='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-lg='start'] {
+      justify-content: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-lg='center'] {
+      justify-content: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-lg='end'] {
+      justify-content: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-lg='between'] {
+      justify-content: space-between;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-lg='around'] {
+      justify-content: space-around;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-lg='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-lg='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-lg='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-lg='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-lg='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-lg='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .xh-scope-flex[data-part='root'][data-orientation-xl='horizontal'] {
+      flex-direction: row;
+      --xh-_flex-align-default: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-orientation-xl='vertical'] {
+      flex-direction: column;
+      --xh-_flex-align-default: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-xl='start'] {
+      --xh-_flex-align: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-xl='center'] {
+      --xh-_flex-align: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-xl='end'] {
+      --xh-_flex-align: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-xl='stretch'] {
+      --xh-_flex-align: stretch;
+    }
+
+    .xh-scope-flex[data-part='root'][data-align-xl='baseline'] {
+      --xh-_flex-align: baseline;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-xl='start'] {
+      justify-content: flex-start;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-xl='center'] {
+      justify-content: center;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-xl='end'] {
+      justify-content: flex-end;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-xl='between'] {
+      justify-content: space-between;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-xl='around'] {
+      justify-content: space-around;
+    }
+
+    .xh-scope-flex[data-part='root'][data-justify-xl='evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-xl='xs'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-xl='sm'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-xl='md'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-xl='lg'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
+    }
+
+    .xh-scope-flex[data-part='root'][data-gap-xl='xl'] {
+      gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-flex[data-part='root'][hidden] {
+    display: none;
+  }
+}