Pull&Refresh improved

example/static/sections/pull.html

@@ -1,30 +1,20 @@
 <section id="pull" data-pull="normal" data-transition="slide">
+    <div class="normal" data-control="pull" data-icon="arrow-down" data-loading="black">
+        <strong>title</strong>
+    </div>
+
+
+
     <header data-title="Pull & Refresh" data-back="home"></header>
 
     <article class="active list indented">
         <ul>
-             <li class="dark" data-icon="help">
+             <li class="contrast" data-icon="ok">
                     <strong>
                     Test this featury only drag down.
                 </strong>
                 <small>This element has an associated event</small>
             </li>
-            <li data-icon="brand html5" class="feature">
-                <strong>HTML5 Optimized Apps</strong>
-                Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
-            </li>
-            <li data-icon="brand github-2" class="feature">
-                <strong>Open Source Project</strong>
-                Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-            </li>
-            <li data-icon="book" class="feature">
-                <strong>Powerfull JavaScript API</strong>
-                Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-            </li>
-            <li data-icon="brand branch" class="feature">
-                <strong>Multi-Device full support</strong>
-                Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
-            </li>
         </ul>
     </article>
 

src/element/Lungo.Element.Pull.coffee

@@ -11,7 +11,7 @@ Creates a instance of Pull & Refresh Element
 
 
 Lungo.Element.Pull = (element_selector, config_data) ->
-  REFRESHING_HEIGHT = 60
+  REFRESHING_HEIGHT = 68
   MAX_HEIGHT = 80
   ANIMATION_TIME = 300
   CURRENT_DISTANCE = 0
@@ -36,7 +36,7 @@ Lungo.Element.Pull = (element_selector, config_data) ->
 
   _moveElementTo = (posY, animate) ->
     newPos = (if posY > MAX_HEIGHT then MAX_HEIGHT else posY)
-    ELEMENT.addClass "pull"  if animate
+    ELEMENT.addClass "pull" if animate
     ELEMENT.style "-webkit-transform", "translate(0, " + (newPos) + "px)"
     if animate
       setTimeout (->

src/stylesheets/lungo.widget.pull.styl

@@ -1,47 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Pull
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "__init.styl"
-
-body > section.show > [data-control="pull"]
-  position: absolute
-  z-index: -1
-  top: HEADER_HEIGHT
-  width: 100%
-  height: 80px
-  padding: 10px 0
-  text-align: center
-
-  & > .icon
-    display: inline-block
-    width: 48px
-    height: 48px
-    font-size: 44px
-    line-height: 48px
-    transition( all 300ms @defaultTrasition )
-
-  & > .loading
-    display: none
-    left: 0%
-
-  & > strong
-    position: relative
-    top: -16px
-    margin-left: 4px
-    font-size: 1.1em
-
-  &.rotate
-    & > .icon
-      transform( rotate(180deg) )
-
-  &.refresh
-    & > .icon
-      display: none
-    & > .loading
-      display: inline-block

src/stylesheets/lungo.widget.styl

@@ -165,6 +165,47 @@ size = 5px
   list-style: none
   margin: 0
 
+/* ==================================  PULL  ================================== */
+body > section.show > [data-control="pull"]
+  position: absolute
+  z-index: -1
+  top: HEADER_HEIGHT
+  width: 100%
+  height: 80px
+  padding: 10px 0
+  text-align: center
+
+  & > .icon
+    display: inline-block
+    width: S = 52px
+    height: S
+    font-size: S
+    line-height: S
+    transition-property rotate, color
+    transition-duration TRANSITION_TIME
+    transition-timing-function DEFAULT_TRANSITION
+    backface-visibility hidden
+
+  & > .loading
+    display: none
+    left: 0%
+
+  & > strong
+    position: relative
+    top: -16px
+    margin-left: 4px
+    font-size: FONT_SIZE_NORMAL
+
+  &.rotate
+    & > .icon
+      transform( rotate(180deg) )
+
+  &.refresh
+    & > .icon
+      display: none
+    & > .loading
+      display: inline-block
+
 
 /* ================================  SPLASH  ================================ */
 body > section > article.splash

src/stylesheets/theme/theme.layout.styl

@@ -32,6 +32,9 @@ body > section
     &.right
       box-shadow 1px 0 2px rgba(0,0,0,0.2)
 
+  &[data-pull] > article.active
+    box-shadow: 0 -1px 0 rgba(0,0,0,0.05)
+
 body > aside
   background-color: COLOR_contrast
   color: #fff

src/stylesheets/theme/theme.widget.styl

@@ -9,9 +9,6 @@
 
 @import "__init.styl"
 
-[data-control="pull"]
-    text-shadow: 0 1px 0 #fff
-
 /* =================================  TAG  ================================= */
 .tag:not(.icon)
   color: #fff
@@ -32,3 +29,14 @@ body > section > article > .empty
     color: darken(BACKGROUND, 20%)
   & > strong
     color: darken(BACKGROUND, 40%)
+
+/* =================================  PULL  =============================== */
+body > section > [data-control="pull"]
+  background-color: darken(BACKGROUND, 15%)
+  color: darken(BACKGROUND, 50%)
+  text-shadow: 0 1px 1px BACKGROUND
+  & > strong
+    font-weight: 700
+  &.rotate
+    color: darken(BACKGROUND, 75%)
+