Improve styles for Tick.Scroll

harvesthq · Mar 19, 2012 · c28cdec · c28cdec
1 parent c6d6919
commit c28cdec
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 121 deletions.
diff --git a/assets/css/tick.css b/assets/css/tick.css
@@ -31,7 +31,7 @@
  width: 100%;
  line-height: 1;
  font-size: 4.75em;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: "Myriad Pro", sans-serif;
  text-align: center;
 }
 
@@ -143,14 +143,14 @@
  background-image: -ms-linear-gradient(top, #ffffff 0%, #b4b4b4 100%);
  background-image: linear-gradient(top, #ffffff 0%, #b4b4b4 100%);
  box-shadow: 0 -4px 4px -3px black;
- transform-origin: bottom left;
- -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
- -ms-transform-origin: bottom left;
+ -webkit-transform-origin: bottom left;
  -o-transform-origin: bottom left;
+ -ms-transform-origin: bottom left;
+ transform-origin: bottom left;
 }
 
-/* line 142, ../scss/tick.scss */
+/* line 138, ../scss/tick.scss */
 .tick-flip .tick-new-move {
  z-index: 997;
  height: 100%;
@@ -167,17 +167,17 @@
  background-image: -ms-linear-gradient(top, #ffffff 40%, #b4b4b4 100%);
  background-image: linear-gradient(top, #ffffff 40%, #b4b4b4 100%);
  box-shadow: 0 4px 4px -3px black;
- transform-origin: top left;
- -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
- -ms-transform-origin: top left;
+ -webkit-transform-origin: top left;
  -o-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
 }
 
 /*
  Tick.tick-scroll
 */
-/* line 167, ../scss/tick.scss */
+/* line 159, ../scss/tick.scss */
 .tick-scroll {
  overflow: hidden;
  position: relative;
@@ -197,97 +197,67 @@
 /*
  Adding depth to the ticker by overlaying some gradients
 */
-/* line 190, ../scss/tick.scss */
+/* line 182, ../scss/tick.scss */
 .tick-scroll:before,
 .tick-scroll:after {
  position: absolute;
  z-index: 999;
  left: 0;
  content: '';
  width: 100%;
- height: 30%;
+ height: 35%;
  border-radius: 5px;
 }
 
-/* line 200, ../scss/tick.scss */
+/* line 192, ../scss/tick.scss */
 .tick-scroll:before {
  *zoom: 1;
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF282828', endColorstr='#00282828');
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #282828), color-stop(20%, #282828), color-stop(100%, rgba(40, 40, 40, 0)));
- background-image: -webkit-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%);
- background-image: -moz-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%);
- background-image: -o-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%);
- background-image: -ms-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%);
- background-image: linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF1E1E1E', endColorstr='#001E1E1E');
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1e1e1e), color-stop(10%, #1e1e1e), color-stop(100%, rgba(30, 30, 30, 0)));
+ background-image: -webkit-linear-gradient(top, #1e1e1e 0%, #1e1e1e 10%, rgba(30, 30, 30, 0) 100%);
+ background-image: -moz-linear-gradient(top, #1e1e1e 0%, #1e1e1e 10%, rgba(30, 30, 30, 0) 100%);
+ background-image: -o-linear-gradient(top, #1e1e1e 0%, #1e1e1e 10%, rgba(30, 30, 30, 0) 100%);
+ background-image: -ms-linear-gradient(top, #1e1e1e 0%, #1e1e1e 10%, rgba(30, 30, 30, 0) 100%);
+ background-image: linear-gradient(top, #1e1e1e 0%, #1e1e1e 10%, rgba(30, 30, 30, 0) 100%);
 }
 
-/* line 204, ../scss/tick.scss */
+/* line 196, ../scss/tick.scss */
 .tick-scroll:after {
  bottom: 0;
  *zoom: 1;
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00282828', endColorstr='#FF282828');
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(40, 40, 40, 0)), color-stop(80%, #282828), color-stop(100%, #282828));
- background-image: -webkit-linear-gradient(top, rgba(40, 40, 40, 0) 0%, #282828 80%, #282828 100%);
- background-image: -moz-linear-gradient(top, rgba(40, 40, 40, 0) 0%, #282828 80%, #282828 100%);
- background-image: -o-linear-gradient(top, rgba(40, 40, 40, 0) 0%, #282828 80%, #282828 100%);
- background-image: -ms-linear-gradient(top, rgba(40, 40, 40, 0) 0%, #282828 80%, #282828 100%);
- background-image: linear-gradient(top, rgba(40, 40, 40, 0) 0%, #282828 80%, #282828 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#001E1E1E', endColorstr='#FF1E1E1E');
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(30, 30, 30, 0)), color-stop(90%, #1e1e1e), color-stop(100%, #1e1e1e));
+ background-image: -webkit-linear-gradient(top, rgba(30, 30, 30, 0) 0%, #1e1e1e 90%, #1e1e1e 100%);
+ background-image: -moz-linear-gradient(top, rgba(30, 30, 30, 0) 0%, #1e1e1e 90%, #1e1e1e 100%);
+ background-image: -o-linear-gradient(top, rgba(30, 30, 30, 0) 0%, #1e1e1e 90%, #1e1e1e 100%);
+ background-image: -ms-linear-gradient(top, rgba(30, 30, 30, 0) 0%, #1e1e1e 90%, #1e1e1e 100%);
+ background-image: linear-gradient(top, rgba(30, 30, 30, 0) 0%, #1e1e1e 90%, #1e1e1e 100%);
 }
 
 /*
  +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 */
-/* line 213, ../scss/tick.scss */
+/* line 205, ../scss/tick.scss */
 .tick-scroll .tick-wheel {
  position: relative;
  display: inline-block;
  width: 50px;
- border-right: 1px solid #969696;
- border-left: 1px solid #969696;
+ border-right: 1px solid #6e6e6e;
+ border-left: 1px solid #6e6e6e;
  margin: 0 2px;
- background-color: white;
+ text-shadow: 0 -1px 0 black;
+ color: white;
+ background-color: #505050;
+ box-shadow: 0 0 3px black;
 }
 
-/* line 224, ../scss/tick.scss */
+/* line 219, ../scss/tick.scss */
 .tick-scroll .tick-wheel span {
  display: block;
  padding: 16px 0;
 }
 
-/* line 229, ../scss/tick.scss */
+/* line 224, ../scss/tick.scss */
 .tick-scroll .tick-seperator {
  font-weight: normal;
 }
-
-/*
- Tick.tick-slide
-*/
-/* line 238, ../scss/tick.scss */
-.tick-slide {
- display: inline-block;
- padding: 10px;
- color: white;
- background-color: #141414;
-}
-
-/* line 245, ../scss/tick.scss */
-.tick-slide span {
- display: inline-block;
- width: 50px;
- height: 65px;
- border-right: 1px solid #787878;
- border-left: 1px solid #787878;
- margin-right: 2px;
- font-size: 1.5em;
- background: url("../img/sprite.gif");
- text-indent: -999em;
-}
-
-/* line 260, ../scss/tick.scss */
-.tick-slide .seperator {
- width: 20px;
- padding-right: 2px;
- padding-left: 0;
- border: 0 none;
- background: url("../img/seperator.gif") no-repeat top center;
-}
diff --git a/assets/scss/tick.scss b/assets/scss/tick.scss
@@ -44,7 +44,7 @@ $move_shadow_color: rgb(0,0,0);
 
  font: {
  size: 4.75em;
- family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ family: "Myriad Pro", sans-serif;
  }
 
  text: {
@@ -133,11 +133,7 @@ $move_shadow_color: rgb(0,0,0);
 
  box-shadow: 0 -4px 4px -3px $move_shadow_color;
 
- transform-origin: bottom left;
- -webkit-transform-origin: bottom left;
- -moz-transform-origin: bottom left;
- -ms-transform-origin: bottom left;
- -o-transform-origin: bottom left;
+ @include transform-origin(bottom, left);
  }
  .tick-flip .tick-new-move {
  z-index: 997;
@@ -152,11 +148,7 @@ $move_shadow_color: rgb(0,0,0);
 
  box-shadow: 0 4px 4px -3px $move_shadow_color;
 
- transform-origin: top left;
- -webkit-transform-origin: top left;
- -moz-transform-origin: top left;
- -ms-transform-origin: top left;
- -o-transform-origin: top left;
+ @include transform-origin(top, left);
  }
 
 
@@ -194,17 +186,17 @@ $move_shadow_color: rgb(0,0,0);
  content: '';
 
  width: 100%;
- height: 30%;
+ height: 35%;
  border-radius: 5px;
  }
  .tick-scroll:before {
- @include filter-gradient(rgb(40,40,40), rgba(40,40,40,0), vertical);
- @include background-image(linear-gradient(top, rgba(40,40,40,1) 0%,rgba(40,40,40,1) 20%,rgba(40,40,40,0) 100%));
+ @include filter-gradient(rgb(30,30,30), rgba(30,30,30,0), vertical);
+ @include background-image(linear-gradient(top, rgba(30,30,30,1) 0%,rgba(30,30,30,1) 10%,rgba(30,30,30,0) 100%));
  }
  .tick-scroll:after {
  bottom: 0;
- @include filter-gradient(rgba(40,40,40,0), rgb(40,40,40), vertical);
- @include background-image(linear-gradient(top, rgba(40,40,40,0) 0%,rgba(40,40,40,1) 80%,rgba(40,40,40,1) 100%));
+ @include filter-gradient(rgba(30,30,30,0), rgb(30,30,30), vertical);
+ @include background-image(linear-gradient(top, rgba(30,30,30,0) 0%,rgba(30,30,30,1) 90%,rgba(30,30,30,1) 100%));
  }
  /*
  +++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -215,11 +207,14 @@ $move_shadow_color: rgb(0,0,0);
  display: inline-block;
  width: 50px;
 
- border-right: 1px solid rgb(150,150,150);
- border-left: 1px solid rgb(150,150,150);
+ border-right: 1px solid rgb(110,110,110);
+ border-left: 1px solid rgb(110,110,110);
  margin: 0 2px;
 
- background-color: rgb(255,255,255);
+ text-shadow: 0 -1px 0 rgb(0,0,0);
+ color: rgb(255,255,255);
+ background-color: rgb(80,80,80);
+ box-shadow: 0 0 3px rgb(0,0,0);
  }
  .tick-scroll .tick-wheel span {
  display: block;
@@ -228,39 +223,4 @@ $move_shadow_color: rgb(0,0,0);
 
  .tick-scroll .tick-seperator {
  font-weight: normal;
- }
-
-
-
-/*
- Tick.tick-slide
-*/
-.tick-slide {
- display: inline-block;
- padding: 10px;
-
- color: rgb(255,255,255);
- background-color: rgb(20,20,20);
-}
- .tick-slide span {
- display: inline-block;
-
- width: 50px;
- height: 65px;
-
- border-right: 1px solid rgb(120,120,120);
- border-left: 1px solid rgb(120,120,120);
- margin-right: 2px;
-
- font-size: 1.5em;
- background: url('../img/sprite.gif');
- text-indent: -999em;
- }
-
- .tick-slide .seperator {
- width: 20px;
- padding-right: 2px;
- padding-left: 0;
- border: 0 none;
- background: url('../img/seperator.gif') no-repeat top center;
  }
diff --git a/demo/assets/js/interface.js b/demo/assets/js/interface.js
@@ -2,7 +2,7 @@ $( document ).ready( function()
 {
  $( '.tick' ).ticker(
  {
- delay : 700,
+ delay : 1000,
  separators : true
  });
 });