moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-22 17:22:22 -05:00
Code Issues Releases Wiki Activity

[ux] use mixins for avatars, remove unnecessary declarations

Browse Source
This commit is contained in:
karolinaszczur 2013-09-21 18:26:43 +02:00
parent 1721cf593f
commit 10d6e8e75a
4 changed files with 12 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
public/css/_mixins.styl
View File

@ -4,29 +4,6 @@ gotham()
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
font-style: normal
shadow($color, $x, $y, $blur)
-webkit-box-shadow: $color $x $y $blur
-moz-box-shadow: $color $x $y $blur
box-shadow: $color $x $y $blur
innerShadow($color, $x, $y, $blur)
-moz-box-shadow: inset $color $x $y $blur
-webkit-box-shadow: inset $color $x $y $blur
box-shadow: inset $color $x $y $blur
gradient($top, $bottom)
background: $top
background-image: -moz-linear-gradient(top, $top, $bottom)
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $top),color-stop(1, $bottom))
radial($inner, $outer)
background: $inner
background-image: -webkit-radial-gradient(center center, circle cover, $inner, $outer)
background-image: -moz-radial-gradient(center center, circle cover, $inner, $outer)
background-image: -ms-radial-gradient(center center, circle cover, $inner, $outer)
background-image: -o-radial-gradient(center center, circle cover, $inner, $outer)
background-image: radial-gradient(center center, circle cover, $inner, $outer)
roundall($round)
-moz-border-radius: $round
-webkit-border-radius: $round
@ -35,27 +12,6 @@ roundall($round)
-border-radius: $round
border-radius: $round
round($roundtl, $roundtr, $roundbr, $roundbl)
-webkit-border-top-left-radius: $roundtl
-webkit-border-top-right-radius: $roundtr
-webkit-border-bottom-left-radius: $roundbl
-webkit-border-bottom-right-radius: $roundbr
-moz-border-radius-topleft: $roundtl
-moz-border-radius-topright: $roundtr
-moz-border-radius-bottomleft: $roundbl
-moz-border-radius-bottomright: $roundbr
-border-top-left-radius: $roundtl
-border-top-right-radius: $roundtr
-border-bottom-left-radius: $roundbl
-border-bottom-right-radius: $roundbr
border-top-left-radius: $roundtl
border-top-right-radius: $roundtr
border-bottom-left-radius: $roundbl
border-bottom-right-radius: $roundbr
textShadow($color, $x, $y, $blur)
text-shadow: $color $x $y $blur
calc()
if current-property
add-property(current-property[0], s('-webkit-calc(%s)', unquote(arguments)))
@ -130,34 +86,17 @@ borderbox()
box-sizing: border-box
// avatars
avatarLG()
width: 50px
height: 50px
roundall: 3px
avatarMD()
avatarLarge()
width: 30px
height: 30px
roundall: 3px
roundall(50px)
avatarSM()
avatarSmall()
width: 20px
height: 20px
roundall: 3px
roundall(30px)
avatarOverlay()
content: ""
height: 100%
width: 100%
position: absolute
top: 0
left: 0
display: block
z-index: 70
background: -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(247,247,247,.1) 10%, rgba(247,247,247,.1) 94%, rgba(229,229,229,.1) 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(10%,rgba(247,247,247,.1)), color-stop(94%,rgba(247,247,247,.1)), color-stop(100%,rgba(229,229,229,.1)))
background: -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(247,247,247,.1) 10%,rgba(247,247,247,.1) 94%,rgba(229,229,229,.1) 100%)
background: linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(247,247,247,.1) 10%,rgba(247,247,247,.1) 94%,rgba(229,229,229,.1) 100%)
// this if for the content flash and hardware acceleration bugs in webkit
webkit-transition-fix()

4
public/css/app/chat.styl
View File

@ -30,9 +30,7 @@
.avatar
margin-right: 5px
roundall(3px)
width: 30px
height: 30px
avatarLarge()
position: absolute
top: 11px
left: 11px

4
public/css/app/roster.styl
View File

@ -121,9 +121,7 @@
position: absolute
left: 10px
top: 50%
width: 20px
height: 20px
roundall(30px)
avatarSmall()
noselect()
.name

12
public/css/otalk.css
View File

@ -478,14 +478,14 @@ td {
}
.conversation header .avatar {
margin-right: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-o-border-radius: 3px;
-border-radius: 3px;
border-radius: 3px;
width: 30px;
height: 30px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-o-border-radius: 50px;
-border-radius: 50px;
border-radius: 50px;
position: absolute;
top: 11px;
left: 11px;