From 10d6e8e75a07aa435b6f534c2dc1d3594efe9748 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Sat, 21 Sep 2013 18:26:43 +0200
Subject: [PATCH] [ux] use mixins for avatars, remove unnecessary declarations

---
 public/css/_mixins.styl    | 69 +++-----------------------------------
 public/css/app/chat.styl   |  4 +--
 public/css/app/roster.styl |  4 +--
 public/css/otalk.css       | 12 +++----
 4 files changed, 12 insertions(+), 77 deletions(-)

diff --git a/public/css/_mixins.styl b/public/css/_mixins.styl
index 77ff38a..f37b099 100644
--- a/public/css/_mixins.styl
+++ b/public/css/_mixins.styl
@@ -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()
diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index bba3499..059020a 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -30,9 +30,7 @@
 
     .avatar
       margin-right: 5px
-      roundall(3px)
-      width: 30px
-      height: 30px
+      avatarLarge()
       position: absolute
       top: 11px
       left: 11px
diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index 3270ade..4bfe42b 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -121,9 +121,7 @@
       position: absolute
       left: 10px
       top: 50%
-      width: 20px
-      height: 20px
-      roundall(30px)
+      avatarSmall()
       noselect()
 
     .name
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 99e5e31..45c3964 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -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;