yinxr
7 years ago
parent
8c9a3c3759
commit
42fb675a05
8 changed files with 363 additions and 156 deletions
@ -0,0 +1,73 @@ |
||||
/* |
||||
*对常见的多行样式进行了方法封装，方便调用，加快开发效率 |
||||
*/ |
||||
|
||||
// 背景图片地址和大小 |
||||
.ms-background(@url) { |
||||
background-image: url(@url); |
||||
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
||||
} |
||||
|
||||
// 圆角 |
||||
.ms-radius(@radius) { |
||||
-webkit-border-radius: @radius; |
||||
-moz-border-radius: @radius; |
||||
-ms-border-radius: @radius; |
||||
-o-border-radius: @radius; |
||||
border-radius: @radius; |
||||
} |
||||
|
||||
//宽高 |
||||
.ms-width-height(@width, @height: @width) { |
||||
width: @width; |
||||
height: @height; |
||||
} |
||||
|
||||
//字体大小，颜色 ，字体粗细 |
||||
.ms-font(@size, @color , @weight:initial) { |
||||
font-weight: @weight; |
||||
font-size: @size; |
||||
color: @color; |
||||
} |
||||
|
||||
//flex 布局和 子元素 对其方式 |
||||
.ms-flex(@type: space-between) { |
||||
display: flex; |
||||
justify-content: @type; |
||||
} |
||||
|
||||
//行级flex 布局和 子元素 对其方式 |
||||
.ms-inline-flex(@type: space-between) { |
||||
display: inline-flex; |
||||
justify-content: @type; |
||||
} |
||||
|
||||
//多行超文本隐藏 |
||||
.ms-ellipsis-clamp(@num) { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: @num; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
|
||||
//行高和高 |
||||
.ms-line-height(@num, @value: @num) { |
||||
height: @num; |
||||
line-height: @value; |
||||
} |
||||
|
||||
//圆角元素 |
||||
.ms-radius-size(@radius, @width, @height: @width) { |
||||
.ms-width-height(@width, @height); |
||||
.ms-radius(@radius); |
||||
text-align: center; |
||||
line-height: @height; |
||||
} |
||||
|
||||
//边距 |
||||
.ms-margin-padding(@margin, @padding: @margin) { |
||||
margin: @margin; |
||||
padding: @padding; |
||||
} |
||||
@ -0,0 +1,63 @@ |
||||
/* |
||||
*这里的值严格按照UI设计图标注值来进行设置 |
||||
*/ |
||||
|
||||
|
||||
/* |
||||
*颜色 |
||||
*/ |
||||
|
||||
//主题颜色 |
||||
@themeColor: #0099ff; |
||||
//背景颜色 |
||||
@backgroundColor: #eee; |
||||
//边框颜色 |
||||
@borderColor: #e6e6e6; |
||||
|
||||
/* |
||||
*页面的边距 |
||||
*/ |
||||
|
||||
//整体区域内边距大小 |
||||
@warpperPadding: 20px; |
||||
//整体区域外边距大小 |
||||
@warpperMargin: 10px; |
||||
//列表内边距大小 |
||||
@listPadding: 20px; |
||||
//列表外边距大小 |
||||
@listMargin: 10px; |
||||
|
||||
/* |
||||
*字体 |
||||
*/ |
||||
|
||||
//标题字体样式 |
||||
//一级标题的样式 |
||||
@h1: 16px; |
||||
//一级标题的样式 |
||||
@h2: 14px; |
||||
@titleColor: #333; |
||||
//内容字体样式 |
||||
@contentSize: 14px; |
||||
@contentColor: #333; |
||||
// 默认字体样式 |
||||
@defalutSize: 14px; |
||||
@defalutColor: #333; |
||||
//辅助性描述样式 |
||||
@auxiliarySize: 12px; |
||||
@auxiliaryColor: #999; |
||||
|
||||
/* |
||||
*头像 |
||||
*/ |
||||
|
||||
//大头像 |
||||
// @bigHead: ; |
||||
//中头像 |
||||
// @midHead: ; |
||||
//小头像 |
||||
@smallHead: 24px; |
||||
|
||||
/* |
||||
* 按钮 |
||||
*/ |
||||
Loading…
Reference in new issue