uniapp - sunui.css

/* 
	sunUI(轻便、简洁、易扩展)
	
	Q. 为什么不把具体的样式写进sunUI.css
	A. 为了方便轻便、简介性、扩展性方便大家的“使用”,sunUI.css仅提供基础样式
	
	Q. 为什么仅仅提供了示例,而非完整的样式?
	A. 方便大家学习并了解其中的原理; 授人以鱼不如授人以渔
	
	Q. 我能为sunUI提供一些组件和样式以及需求吗?
	A. 非常感谢大家能提供样式、组件、模板和bug以及需求,如果提供了版本迭代时就会贴上对应的署名
	
	Tips:
	1.如果样式被flex布局影响了,直接修改display属性为block或其它就可以避免所有布局影响.
	2.公共样式最好不要写上最大权限值important
	3.关于脱离文档流(position:absolute,fixed...)和文档流(font-size、color)要分清顺序(可以减少dom操作影响)
	4.z-index仅当前样式有position属性才生效,z-index:9999
	5.使用别套UI要参考ui前缀,譬如:sunui-xx
	6.样式最好分离管理(最后利用一些工具,例如webpack合成)
	7.button、view、navigator支持hover-class;其余标签则不支持
	8.uniapp 特别是最外层page最好不要使用外边距(margin),最好使用内边距(padding)
	9.元素透明:transparent
	10.currentColor表示“当前的标签所继承的文字颜色”
 */


view {
	font-size: 28rpx;
	line-height: 2em;
	font-family: -apple-system-font, Helvetica Neue, sans-serif;
	/* 会对样式造成非常大的影响 */
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}


button,
button:after,
button:before {
	border-radius: 0;
	border: 0;
	position: relative;
}

image,
video,
progress,
textarea,
input {
	width: 100%;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
	display: none !important;
}


/* button禁用样式 */
button[disabled] {
	color: #fff !important;
	background: #cdcdcd !important;
	border: transparent !important;
	cursor: not-allowed !important;
}

/* 关于ios安全区域(iphone x,iphone xs ,iphone xs max, iphone xr),详情见：https://blog.csdn.net/qq_42354773/article/details/81018615、https://blog.csdn.net/qq_43071910/article/details/85294434 */
.iphonex {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.sunui {
	padding: 4%;
}

/* 一般用于头像和文字描述隔开 */
.sunui-m-l {
	margin-left: 6rpx;
}

.sunui-margin5 {
	margin: 5rpx;
}

.sunui-margin10 {
	margin: 10rpx;
}

.sunui-margin15 {
	margin: 15rpx;
}

.sunui-margin20 {
	margin: 20rpx;
}

.sunui-padding5 {
	padding: 5rpx;
}

.sunui-padding10 {
	padding: 10rpx;
}

.sunui-padding15 {
	padding: 15rpx;
}

.sunui-padding20 {
	padding: 20rpx;
}

.sunui-text-blue {
	color: #038dd8;
}

.sunui-text-green {
	color: #038dd8;
}

.sunui-text-yellow {
	color: #038dd8;
}

.sunui-text-orange {
	color: #038dd8;
}

.sunui-bg-blue {
	background-color: #038dd8;
}

.sunui-bg-green {
	background-color: #009b4d;
}

.sunui-bg-yellow {
	background-color: #fdd100;
}

.sunui-bg-orange {
	background-color: #f18518;
}

.sunui-lgbg-green {
	background-image: linear-gradient(45deg, #39B55A 0%, #8DC63E 80%);
}

.sunui-show {
	display: block !important;
}

.sunui-hidden {
	display: none !important;
}

.sunui-left {
	text-align: left;
}

.sunui-right {
	text-align: right;
}

.sunui-center {
	text-align: center;
}

.sunui-white {
	color: #fff;
}

.sunui-red {
	color: #e54d42;
}

.sunui-orange {
	color: #f37b1d;
}

.sunui-w100 {
	width: 100%;
}

.sunui-w50 {
	width: 50%;
}

.sunui-w33 {
	width: calc(100% / 3);
}

.sunui-w20 {
	width: 20%;
}

.sunui-redius-small {
	border-radius: 20rpx !important;
}

.sunui-redius-middle {
	border-radius: 30rpx !important;
}

.sunui-redius-big {
	border-radius: 100rpx !important;
}

.sunui-f {
	display: flex;
}

.sunui-f-wrap {
	display: flex;
	flex-wrap: wrap;
}

.sunui-f-flow {
	display: flex;
	flex-flow: row nowrap;
}

.sunui-f-start {
	display: flex;
	justify-content: flex-start;
}

.sunui-f-center {
	display: flex;
	justify-content: center;
}

.sunui-f-end {
	display: flex;
	justify-content: flex-end;
}

.sunui-f-s-a {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.sunui-f-s-b {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sunui-f-align-c {
	display: flex;
	align-items: center;
}

.sunui-f-align-s {
	display: flex;
	align-items: flex-start;
}

.sunui-f-align-e {
	display: flex;
	align-items: flex-end;
}

.sunui-f-algin-b {
	display: flex;
	align-items: baseline;
}

.sunui-f-align-stretch {
	display: flex;
	align-items: stretch;
}

.sunui-f-align-center {
	display: flex;
	align-items: center;
}

.sunui-border-t {
	border-top: 1rpx solid #eee;
}

.sunui-border-l {
	border-left: 1rpx solid #eee;
}

.sunui-border-b {
	border-bottom: 1rpx solid #eee;
}

.sunui-border-r {
	border-right: 1rpx solid #eee;
}

.sunui-text-weight {
	font-weight: bold;
}

/* cell单元格 */
.sunui-cell {
	position: relative;
	display: flex;
	width: 100%;
	padding: 10px 15px;
	font-size: 1em;
	color: #333;
	background-color: #fff;
	box-sizing: border-box;
}

.sunui-cell-label {
	margin-top: 3px;
	font-size: 12px;
	line-height: 18px;
	color: #999;
}

.sunui-cell:after {
	content: ' ';
	position: absolute;
	bottom: 0;
	width: 96%;
	border-bottom: 1px solid #eee;
}

.sunui-cell-title {
	flex: 1;
}

.sunui-cell-value {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
	color: #999;
	text-align: right;
	vertical-align: middle;
}


/* 标题 */
.sunui-title {
	margin: 0;
	margin-bottom: 4%;
	font-weight: 400;
	font-size: 14px;
	color: rgba(69, 90, 100, 0.6);
	padding: 20px 15px 15px;
	border-bottom: 1rpx solid #eee;
}


/* tag标签 */
.sunui-tag {
	color: #fff;
	font-size: 10px;
	padding: .2em .5em;
	line-height: normal;
	border-radius: .2em;
	display: inline-block;
}

.sunui-tag+.sunui-transpaint {
	background-color: transparent;
}


/* text文字 */
.sunui-text {
	width: 25%;
	line-height: 50px;
	border-bottom: 1px solid #F8F8F8;
	border-right: 1px solid #F8F8F8;
}

.sunui-text-ellipsis {
	width: 160rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


/* bg背景 */
.sunui-bg {
	width: 20%;
	line-height: 50px;
	margin: 10px;
	text-align: center;
	border-radius: 5px;
	box-shadow: 0 0 10px 15px inherit;
}

.sunui-box-shadow {
	box-shadow: 0px 0px 8px #D5D6D8;
}

.sunui-shadow {
	position: relative;
}

.sunui-shadow:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: inherit;
	filter: blur(3px);
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: -1;
	opacity: 0.38;
	transform-origin: 0 0;
	border-radius: inherit;
	transform: scale(1, 1);
}

/* hover-class*/
.sunui-hover {
	opacity: .9;
	position: relative;
}

.sunui-hover:after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, .01);
}

.btn.btn-hover {
	transform: translate(1rpx, 1rpx);
}

/* 头像大小 */
.head-avatar-small {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.head-avatar-middle {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
}

.head-avatar-big {
	width: 220rpx;
	height: 220rpx;
	border-radius: 50%;
}