molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-07 06:24:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.0.3(修复)

Browse Source 
修复一些样式错误
This commit is contained in:
Weilanwl
2019-01-09 00:53:40 +08:00
parent 70cf39ea1c
commit ace94e4e87
3 changed files with 76 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
demo/colorui.wxss
View File

@@ -148,7 +148,7 @@ item, chat, image {
border-bottom-left-radius: 6rpx;
}
.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text {
.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text[class*="icon"] {
font-size: 52rpx;
position: absolute;
color: #aaa;
@@ -157,6 +157,10 @@ item, chat, image {
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.grid.grid-square view, .grid.grid-square item {
@@ -1669,23 +1673,30 @@ avatar {
background-size: cover;
background-position: center;
vertical-align: middle;
font-size: 0rpx;
}
avatar::first-letter ,avatar text::first-letter{
font-size: 40rpx;
}
avatar text {
position: absolute;
left: 50%;
display: inline-block;
transform-origin: 0 center;
transform: scale(0.75) translateX(-50%);
transform: scale(1) translateX(-50%);
font-size: inherit;
}
avatar.sm {
width: 48rpx;
height: 48rpx;
line-height: 48rpx;
}
avatar > text {
avatar.sm::first-letter ,avatar.sm text::first-letter{
font-size: 30rpx;
}
avatar > text[class*="icon"] {
position: absolute;
left: 50%;
top: 0;
@@ -1695,15 +1706,15 @@ avatar > text {
transform: scale(1.2) translateX(-50%);
}
avatar.sm > text {
avatar.sm > text[class*="icon"] {
transform: scale(0.75) translateX(-50%);
}
avatar.lg > text {
avatar.lg > text[class*="icon"] {
transform: scale(1.75) translateX(-50%);
}
avatar.xl > text {
avatar.xl > text[class*="icon"] {
transform: scale(2.2) translateX(-50%);
}
@@ -1711,14 +1722,20 @@ avatar.lg {
width: 90rpx;
height: 90rpx;
line-height: 90rpx;
font-size: 22rpx;
}
avatar.lg::first-letter ,avatar.lg text::first-letter{
font-size: 36rpx;
}
avatar.xl {
width: 128rpx;
height: 128rpx;
line-height: 128rpx;
font-size: 24rpx;
}
avatar.xl::first-letter ,avatar.xl text::first-letter{
font-size: 40rpx;
}
avatar-group {
direction: rtl;
unicode-bidi: bidi-override;
@@ -2241,6 +2258,10 @@ bar .action>text[class*="icon"] {
font-size: 36rpx;
}
bar .action>text[class*="icon"]::before {
vertical-align: 0.1em;
}
bar .action>text[class*="icon"]+text[class*="icon"] {
margin-left: 0.5em;
}

16
demo/pages/basics/avatar/avatar.wxml
View File

@@ -10,8 +10,8 @@
<text class='icon-title text-blue'></text>头像形状
</view>
</bar>
<view class="padding">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class="padding">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<avatar class="radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
</view>
<bar class="margin-top">
@@ -25,6 +25,18 @@
<avatar class="lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<avatar class="xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
</view>
<view class="padding">
<avatar class="sm round margin-left bg-red" > orange</avatar>
<avatar class="round margin-left bg-red" >orange</avatar>
<avatar class="lg round margin-left bg-red" >orange</avatar>
<avatar class="xl round margin-left bg-red" >orange</avatar>
</view>
<view class="padding">
<avatar class="sm round margin-left bg-red" > 蔚蓝</avatar>
<avatar class="round margin-left bg-red" >蔚蓝</avatar>
<avatar class="lg round margin-left bg-red" >蔚蓝</avatar>
<avatar class="xl round margin-left bg-red" >蔚蓝</avatar>
</view>
<bar class="margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>内嵌文字(图标)

41
template/colorui.wxss
View File

@@ -148,7 +148,7 @@ item, chat, image {
border-bottom-left-radius: 6rpx;
}
.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text {
.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text[class*="icon"] {
font-size: 52rpx;
position: absolute;
color: #aaa;
@@ -157,6 +157,10 @@ item, chat, image {
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.grid.grid-square view, .grid.grid-square item {
@@ -1669,23 +1673,30 @@ avatar {
background-size: cover;
background-position: center;
vertical-align: middle;
font-size: 0rpx;
}
avatar::first-letter ,avatar text::first-letter{
font-size: 40rpx;
}
avatar text {
position: absolute;
left: 50%;
display: inline-block;
transform-origin: 0 center;
transform: scale(0.75) translateX(-50%);
transform: scale(1) translateX(-50%);
font-size: inherit;
}
avatar.sm {
width: 48rpx;
height: 48rpx;
line-height: 48rpx;
}
avatar > text {
avatar.sm::first-letter ,avatar.sm text::first-letter{
font-size: 30rpx;
}
avatar > text[class*="icon"] {
position: absolute;
left: 50%;
top: 0;
@@ -1695,15 +1706,15 @@ avatar > text {
transform: scale(1.2) translateX(-50%);
}
avatar.sm > text {
avatar.sm > text[class*="icon"] {
transform: scale(0.75) translateX(-50%);
}
avatar.lg > text {
avatar.lg > text[class*="icon"] {
transform: scale(1.75) translateX(-50%);
}
avatar.xl > text {
avatar.xl > text[class*="icon"] {
transform: scale(2.2) translateX(-50%);
}
@@ -1711,14 +1722,20 @@ avatar.lg {
width: 90rpx;
height: 90rpx;
line-height: 90rpx;
font-size: 22rpx;
}
avatar.lg::first-letter ,avatar.lg text::first-letter{
font-size: 36rpx;
}
avatar.xl {
width: 128rpx;
height: 128rpx;
line-height: 128rpx;
font-size: 24rpx;
}
avatar.xl::first-letter ,avatar.xl text::first-letter{
font-size: 40rpx;
}
avatar-group {
direction: rtl;
unicode-bidi: bidi-override;
@@ -2241,6 +2258,10 @@ bar .action>text[class*="icon"] {
font-size: 36rpx;
}
bar .action>text[class*="icon"]::before {
vertical-align: 0.1em;
}
bar .action>text[class*="icon"]+text[class*="icon"] {
margin-left: 0.5em;
}