Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Commit

Permalink
added katy button styles, update sprites
Browse files Browse the repository at this point in the history
  • Loading branch information
Gordon Koo committed Mar 2, 2013
1 parent 71393d3 commit d3e40de
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 81 deletions.
Binary file added img/sprite_green_0.2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/sprite_li.png
View file
Binary file not shown.
Binary file added img/sprite_orange_0.2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/sprite_os.png
View file
Binary file not shown.
66 changes: 66 additions & 0 deletions less/buttons.less
View file
@@ -0,0 +1,66 @@
div.hopscotch-bubble .hopscotch-nav-button {
/* borrowed from katy styles */
font-weight:bold;
border-width:1px;
border-style:solid;
cursor:pointer;
margin:0;
overflow:visible;
text-decoration:none !important;
width:auto;
padding:0 10px;
height:26px;
line-height:24px;
font-size:12px;
*zoom:1;
white-space:nowrap;
display:-moz-inline-stack;
display:inline-block;
vertical-align:middle;
*vertical-align:auto;
zoom:1;
*display:inline;
vertical-align:middle;

.round-corners(3px);
.box-sizing();

&:hover {
*zoom:1;
.box-shadow(0, 1px, 3px, rgba(0,0,0,0.25), false);
}

&:active {
.box-shadow(0, 1px, 2px, rgba(0,0,0,0.25), true);
}

&.next {
border-color: #1b5480;
color: #fff;
margin: 0 0 0 10px; /* HS specific*/
text-shadow: 0 1px 1px rgba(0,0,0,0.35);
.gradient(#287bbc, #287bbc, #23639a);

&:hover {
.gradient(#2672ae, #2672ae, #1e4f7e);
}
}

&.prev {
background-color:#f2f2f2;
border-color:#a7a7a7;
color:#444;
text-shadow:0 1px 1px rgba(255,255,255,0.75);
.gradient(#f2f2f2, #f2f2f2, #e9e9e9);

&:hover {
background-color:#e8e8e8;
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE8E8E8', endColorstr='#FFA9A9A9');
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e8e8), color-stop(13%, #e3e3e3), color-stop(32%, #d7d7d7), color-stop(71%, #b9b9b9), color-stop(100%, #a9a9a9));
background-image:-webkit-linear-gradient(top, #e8e8e8 0%,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%);
background-image:-moz-linear-gradient(top, #e8e8e8 0%,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%);
background-image:-o-linear-gradient(top, #e8e8e8 0%,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%);
background-image:linear-gradient(top, #e8e8e8 0%,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%);
}
}
}
82 changes: 1 addition & 81 deletions less/hopscotch.less
View file
@@ -1,6 +1,7 @@
@import "util.less";
@import "vars.less";
@import "fade.less";
@import "buttons.less";

div.hopscotch-bubble {
background-color: @bubbleColor;
Expand Down Expand Up @@ -209,85 +210,4 @@ div.hopscotch-bubble {
margin: 10px 0 0;
text-align: right;
}

input.hopscotch-nav-button {
border-width: 1px;
border-style: solid;
cursor: pointer;
font-size: 12px;
line-height: 1.35;
margin: 0;
overflow: visible;
padding: 3px 10px 2px;
*padding: 2px 10px 1px;
text-decoration: none !important;
vertical-align: top;
width: auto;
.round-corners(3px);
*padding: 3px 10px;

&.next {
background: #FFCF0B;
background: -moz-linear-gradient(top, #FFF5BD 0, #FFF5BD 1px, #FFE976 1px, #FFCF0B 100%);
background: -o-linear-gradient(top, #FFF5BD 0, #FFF5BD 1px, #FFE976 1px, #FFCF0B 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#FFF5BD), color-stop(5%,#FFF5BD), color-stop(5%,#FFE976), color-stop(100%,#FFCF0B));
background: linear-gradient(top, #FFF5BD 0, #FFF5BD 1px, #FFE976 1px, #FFCF0B 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE976', endColorstr='#FFCF0B',GradientType=0 );
border-color: #e8b463;
color: #333;
font-weight: bold;
margin: 0 0 0 10px;
overflow: visible;

&.hide-all {
display: none;
}

&:hover {
background: #F6C408;
background: -moz-linear-gradient(top, #FAEEAE 0, #FAEEAE 1px, #F5DB59 1px, #F6C408 100%);
background: -o-linear-gradient(top, #FAEEAE 0, #FAEEAE 1px, #F5DB59 1px, #F6C408 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#FAEEAE), color-stop(5%,#FAEEAE), color-stop(5%,#F5DB59), color-stop(100%,#F6C408));
background: linear-gradient(top, #FAEEAE 0, #FAEEAE 1px, #F5DB59 1px, #F6C408 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5DB59', endColorstr='#F6C408',GradientType=0 );
}

&:active {
background: #F5DD61;
background: -moz-linear-gradient(top, #F6C202 0, #F5DD61 100%);
background: -o-linear-gradient(top, #F6C202 0, #F5DD61 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F6C202), color-stop(100%,#F5DD61));
background: linear-gradient(top, #F6C202 0, #F5DD61 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6C202', endColorstr='#F5DD61',GradientType=0 );
}
}

&.prev {
background: #CECECE;
background: -moz-linear-gradient(top, #F2F2F2 0, #F2F2F2 1px, #E4E4E4 1px, #CECECE 100%);
background: -o-linear-gradient(top, #F2F2F2 0, #F2F2F2 1px, #E4E4E4 1px, #CECECE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F2F2F2), color-stop(5%,#F2F2F2), color-stop(5%,#E4E4E4), color-stop(100%,#CECECE));
background: linear-gradient(top, #F2F2F2 0, #F2F2F2 1px, #E4E4E4 1px, #CECECE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4', endColorstr='#CECECE',GradientType=0 );
border-color: #999;
color: #666 !important;

&:hover {
background: #B7B7B7;
background: -moz-linear-gradient(top, #E4E4E4 0, #E4E4E4 1px, #C8C8C8 1px, #B7B7B7 100%);
background: -o-linear-gradient(top, #E4E4E4 0, #E4E4E4 1px, #C8C8C8 1px, #B7B7B7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#E4E4E4), color-stop(5%,#E4E4E4), color-stop(5%,#C8C8C8), color-stop(100%,#B7B7B7));
background: linear-gradient(top, #E4E4E4 0, #E4E4E4 1px, #C8C8C8 1px, #B7B7B7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C8C8C8', endColorstr='#B7B7B7',GradientType=0 );
}

&:active { background: #C9C9C9;
background: -moz-linear-gradient(top, #B6B6B6 0, #C9C9C9 100%);
background: -o-linear-gradient(top, #B6B6B6 0, #C9C9C9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#B6B6B6), color-stop(100%,#C9C9C9));
background: linear-gradient(top, #B6B6B6 0, #C9C9C9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B6B6B6', endColorstr='#C9C9C9',GradientType=0 );
}
}
}
}
36 changes: 36 additions & 0 deletions less/util.less
View file
Expand Up @@ -10,3 +10,39 @@
-webkit-background-clip: padding; /* Webkit */
background-clip: padding-box; /* browsers with full support */
}
.box-sizing(@sizing:border-box) {
-webkit-box-sizing: @sizing;
-moz-box-sizing: @sizing;
box-sizing: @sizing;
}
.gradient(@color, @start, @stop) {
background-color: @color;
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='@start', endColorstr='@stop');
background-image:-webkit-gradient(linear,
50% 0%,
50% 100%,
color-stop(0%, @start),
color-stop(100%, @stop));
background-image:-webkit-linear-gradient(top,
@start 0%,
@stop 100%);
background-image:-moz-linear-gradient(top,
@start 0%,
@stop 100%);
background-image:-o-linear-gradient(top,
@start 0%,
@stop 100%);
background-image:linear-gradient(top,
@start 0%,
@stop 100%);
}
.box-shadow(@x, @y, @blur, @color, @inset) when (@inset = true) {
-webkit-box-shadow: @x @y @blur @color inset;
-moz-box-shadow: @x @y @blur @color inset;
box-shadow: @x @y @blur @color inset;
}
.box-shadow(@x, @y, @blur, @color, @inset) when (@inset = false) {
-webkit-box-shadow: @x @y @blur @color;
-moz-box-shadow: @x @y @blur @color;
box-shadow: @x @y @blur @color;
}

0 comments on commit d3e40de

Please sign in to comment.