uniapp - sunui.css
CSS uniapp
2023-09-11 14:14:36 时间
sunui.css(v1.0.0) 一般来说,不会影响到你的项目样式(但还是建议先导入).
在设计sunui.css,考虑到了这部分问题;sunui.css可以分为以下
sunui-reset.css
sunui-components.css
sunui-basic.css
reset.css一般用来初始化,basic.css一般内置些样式,components.css这部分会影响到组件但被我替换掉了,我觉得只要简洁实用就行;没必要别人用你一个组件你就把css给人家导入了。
/*
sunUI(轻便、简洁、易扩展) - v1.0(email:1940694428@qq.com)
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%;
}
相关文章
- css样式权重优先级,css样式优先级
- css 迷惑的position
- 【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css
- CSS 动画 : 创建 3D 立方体
- CSS知识总结
- 当当网上书店购物车——CSS源码
- CSS魔法堂:Position定位详解
- [CSS] Purgecss to remove unused css
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- thymeleaf引入公共css、js等
- uni-app:template、js、css中判断平台(hbuilderx 3.6.18)
- CSS选择器笔记
- CSS 小数 处理
- 一个css文件里实际并不存在的class,不能给element layout产生任何影响
- 【CSS】课程网站开发示例 ① ( 文件目录结构准备 | CSS 属性书写顺序 - 重要 )
- 【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )
- 【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )