File size: 1,683 Bytes
494c9e4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | // Demo列表公共样式 - 被start.scss和compare.scss共享
// Demo列表容器 - 基础布局样式
.demos {
display: flex; // 使用flex布局
flex-direction: column; // 单列竖向排列
overflow-y: auto; // 垂直滚动
overflow-x: auto; // 水平滚动，当内容超出时显示横向滚动条
// 禁用CSS Columns布局
column-count: 1; // 强制单列
column-width: auto; // 取消固定列宽
column-gap: 0; // 取消列间距
}
// Demo项基础样式
.demo-item {
display: flex;
align-items: center;
gap: 4px;
break-inside: avoid; // 防止demo项被分列截断
}
// Demo按钮样式
.demoBtn, .demo-folder-btn {
display: block; // 每个按钮占一行
width: max-content; // 宽度根据内容自适应，确保完整显示文件名
box-sizing: border-box; // 确保padding和border包含在宽度内
border-radius: 3px;
border: none; // 去除外框
padding: 0 6px; // 去掉上下留白以压缩行距
margin-bottom: 0; // 移除按钮之间的额外间隔
font-size: 9pt;
line-height: 1.2; // 紧凑但可读
text-align: center; // 文字居中
white-space: nowrap; // 防止文字换行
background-color: var(--button-bg);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease, border 0.2s ease, box-shadow 0.2s ease;
&:hover {
background-color: var(--button-hover-bg);
}
}
// 选中状态的按钮样式
.demoBtn.demo-selected,
.demo-folder-btn.demo-selected {
border: 1px solid var(--primary-color, #3b82f6);
background-color: rgba(59, 130, 246, 0.12);
color: var(--primary-color, #3b82f6);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}
|