glhcp/pc/assets/css/common.scss

223 lines
3.5 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/** 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;
}