77 lines
1.6 KiB
SCSS
77 lines
1.6 KiB
SCSS
// 文本样式
|
|
|
|
@use 'mixins/function' as *;
|
|
@use 'mixins/mixins' as *;
|
|
|
|
/* 文本尺寸 start */
|
|
@include b('text') {
|
|
@each $size in ('default', 'xs', 'sm', 'lg', 'xl', '2xl', '3xl', '4xl') {
|
|
$classname: if($size == 'default', '', '-' + $size);
|
|
&#{$classname} {
|
|
font-size: getCssVar('font-size', if($size == 'default', '', $size));
|
|
}
|
|
}
|
|
}
|
|
/* 文本尺寸 end */
|
|
|
|
// 字体变成大写
|
|
.#{bem('text-uppercase')} {
|
|
text-transform: uppercase;
|
|
}
|
|
// 字体变成小写
|
|
.#{bem('text-lowercase')} {
|
|
text-transform: lowercase;
|
|
}
|
|
// 字体变成首字母大写
|
|
.#{bem('text-capitalize')} {
|
|
text-transform: capitalize;
|
|
}
|
|
// 字体加粗
|
|
.#{bem('text-bold')} {
|
|
font-weight: bold;
|
|
}
|
|
// 字体居中
|
|
.#{bem('text-center')} {
|
|
text-align: center;
|
|
}
|
|
// 字体居左
|
|
.#{bem('text-left')} {
|
|
text-align: left;
|
|
}
|
|
// 字体居右
|
|
.#{bem('text-right')} {
|
|
text-align: right;
|
|
}
|
|
// 如果需要使用用省略号隐藏更多的内容，对应的容器需要设置宽度
|
|
[class*=#{bem('text-ellipsis')}] {
|
|
width: 100%;
|
|
}
|
|
@for $i from 1 through 5 {
|
|
.#{bem('text-ellipsis-' + $i)} {
|
|
@if ($i == '1') {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
} @else {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: break-word;
|
|
-webkit-line-clamp: $i;
|
|
-webkit-box-orient: vertical !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 透明字体
|
|
.#{bem('text-transparent')} {
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent !important;
|
|
}
|
|
|
|
// 换行
|
|
.#{bem('break-word')} {
|
|
word-wrap: break-word;
|
|
}
|