223 lines
3.5 KiB
SCSS
223 lines
3.5 KiB
SCSS
|
||
|
||
/** S 背景颜色 **/
|
||
.bg-primary { background-color: $--color-primary; }
|
||
|
||
.bg-white { background-color: $--color-white; }
|
||
|
||
.bg-body { background-color: $--background-color-base; }
|
||
/** E 背景颜色 **/
|
||
|
||
|
||
/** S 字体颜色 **/
|
||
.primary { color: $--color-primary; }
|
||
|
||
.black { color: $--color-black; }
|
||
|
||
.white { color: $--color-white; }
|
||
|
||
.normal { color: $--color-text-primary; }
|
||
|
||
.lighter { color: $--color-text-regular; }
|
||
|
||
.muted { color: $--color-text-secondary; }
|
||
/** E 字体颜色 **/
|
||
|
||
|
||
.border-bottom {
|
||
border-bottom: $--border-base;
|
||
}
|
||
.border-top {
|
||
border-top: $--border-base;
|
||
}
|
||
|
||
.border-left {
|
||
border-left: $--border-base;
|
||
}
|
||
.border-right {
|
||
border-right: $--border-base;
|
||
}
|
||
|
||
.border {
|
||
border: $--border-base;
|
||
}
|
||
|
||
// 字体字重
|
||
@for $i from 100 through 900 {
|
||
@if $i % 100 == 0 {
|
||
.weight-#{$i} {
|
||
font-weight: $i;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/** S 字体大小 **/
|
||
.xxl { font-size: 18px; }
|
||
|
||
.xl { font-size: 17px; }
|
||
|
||
.lg { font-size: 16px; }
|
||
|
||
.md { font-size: 15px; }
|
||
|
||
.nr { font-size: 14px; }
|
||
|
||
.sm { font-size: 13px; }
|
||
|
||
.xs { font-size: 12px; }
|
||
|
||
.xxs { font-size: 11px; }
|
||
|
||
// 字体大小[19-40]
|
||
@for $i from 19 through 50 {
|
||
.font-size-#{$i} {
|
||
font-size: $i + px;
|
||
}
|
||
}
|
||
/** E 字体大小 **/
|
||
|
||
|
||
// 内、外边距[1-60]
|
||
@for $i from 0 through 60 {
|
||
// 只要偶数和能被5整除的数
|
||
@if $i % 2 == 0 or $i % 5 == 0 {
|
||
// 如:m-30
|
||
.m-#{$i} {
|
||
margin: $i + px;
|
||
}
|
||
|
||
// 如:p-30
|
||
.p-#{$i} {
|
||
padding: $i + px;
|
||
}
|
||
|
||
@each $short, $long in l left, t top, r right, b bottom {
|
||
//如: m-l-6
|
||
// 外边距
|
||
.m-#{$short}-#{$i} {
|
||
margin-#{$long}: $i + px;
|
||
}
|
||
|
||
//如: p-l-30
|
||
// 内边距
|
||
.p-#{$short}-#{$i} {
|
||
padding-#{$long}: $i + px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 行内块元素
|
||
.inline { display: inline-block; }
|
||
|
||
// 块元素
|
||
.block { display: block; }
|
||
|
||
// 触手
|
||
.pointer { cursor: pointer }
|
||
|
||
|
||
/** S 弹性布局 **/
|
||
.flex {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-col {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
}
|
||
|
||
// 定义flex等分
|
||
@for $i from 0 through 5 {
|
||
.flex-#{$i} {
|
||
flex: $i;
|
||
}
|
||
}
|
||
|
||
.flex-none { flex: none; }
|
||
|
||
.flex-wrap { flex-wrap: wrap; }
|
||
|
||
.flex-nowrap { flex-wrap: nowrap; }
|
||
|
||
.col-baseline { align-items: baseline; }
|
||
|
||
.col-center { align-items: center; }
|
||
|
||
.col-top { align-items: flex-start; }
|
||
|
||
.col-bottom { align-items: flex-end; }
|
||
|
||
.col-stretch { align-items:stretch; }
|
||
|
||
.row-center { justify-content: center; }
|
||
|
||
.row-left { justify-content: flex-start; }
|
||
|
||
.row-right { justify-content: flex-end; }
|
||
|
||
.row-between { justify-content: space-between; }
|
||
|
||
.row-around { justify-content: space-around; }
|
||
|
||
/** E 弹性布局 **/
|
||
|
||
|
||
/** S 内容排序方式 **/
|
||
.text-left { text-align: left; }
|
||
|
||
.text-center { text-align: center; }
|
||
|
||
.text-right { text-align: right; }
|
||
/** E 内容排序方式 **/
|
||
|
||
|
||
/** S 文本行数限制 **/
|
||
.line-1 {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.line-2 { -webkit-line-clamp: 2; }
|
||
|
||
.line-3 { -webkit-line-clamp: 3; }
|
||
|
||
.line-4 { -webkit-line-clamp: 4; }
|
||
|
||
.line-5 { -webkit-line-clamp: 5; }
|
||
|
||
.line-2, .line-3, .line-4, .line-5 {
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box; // 弹性伸缩盒
|
||
-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
|
||
}
|
||
/** E 文本行数限制 **/
|
||
|
||
|
||
|
||
/* 中划线 */
|
||
.line-through {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.clearfix:after{
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.wrapper1180 {
|
||
width: 1180px;
|
||
margin: 0 auto;
|
||
} |