Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Improve styles for Tick.Scroll

  • Loading branch information...
commit c28cdec012d517dbb444d9a8ffe5f196e09a4124 1 parent c6d6919
@jkintscher jkintscher authored
View
102 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,7 +197,7 @@
/*
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;
@@ -205,89 +205,59 @@
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;
-}
View
68 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;
}
View
2  demo/assets/js/interface.js
@@ -2,7 +2,7 @@ $( document ).ready( function()
{
$( '.tick' ).ticker(
{
- delay : 700,
+ delay : 1000,
separators : true
});
});
Please sign in to comment.
Something went wrong with that request. Please try again.