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