@import './design-tokens.scss';
|
|
/**
|
* 响应式断点
|
*/
|
@mixin respond($target) {
|
@if $target == compact {
|
@media (max-width: $screen-compact) {
|
@content;
|
}
|
} @else if $target == wide {
|
@media (min-width: $screen-wide) {
|
@content;
|
}
|
}
|
}
|
|
/**
|
* 通用文本溢出
|
*/
|
@mixin text-ellipsis($lines: 1) {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: $lines;
|
-webkit-box-orient: vertical;
|
}
|
|
/**
|
* 平滑字体与抗锯齿
|
*/
|
@mixin smooth-font {
|
font-family: $font-family-base;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
/**
|
* 滚动容器
|
*/
|
@mixin scroll-y {
|
overflow-y: auto;
|
overflow-x: hidden;
|
scrollbar-width: thin;
|
|
&::-webkit-scrollbar {
|
width: 6px;
|
height: 6px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background-color: rgba(27, 36, 51, 0.25);
|
border-radius: $radius-sm;
|
}
|
}
|
|
/**
|
* 焦点高亮，提升可操作性
|
*/
|
@mixin focus-ring {
|
outline: none;
|
box-shadow: 0 0 0 2px rgba(27, 127, 233, 0.2);
|
}
|
|
/**
|
* Flex 工具
|
*/
|
@mixin flex-center($direction: row, $gap: $spacing-sm) {
|
display: flex;
|
flex-direction: $direction;
|
align-items: center;
|
justify-content: center;
|
gap: $gap;
|
}
|
