Permalink
Browse files

Add better themes

  • Loading branch information...
1 parent 31a2f77 commit 8ed517597ab423fe0dd0732a12c0e34c76f6a49e @JamieLottering JamieLottering committed Jul 4, 2011
Showing with 79 additions and 30 deletions.
  1. +5 −12 css/dropkick.css
  2. BIN images/dk_arrows_white.png
  3. +74 −18 index.html
View
@@ -81,14 +81,12 @@
.dk_open .dk_toggle {
background-color: #ececec;
border-color: #8c8c8c;
+ color: #ccc;
box-shadow: inset 0 -2px 5px #ccc;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
- .dk_open .dk_label {
- color: #ccc;
- }
/* The outer container of the options */
.dk_options {
@@ -99,9 +97,7 @@
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
- .dk_options a,
- .dk_options a:link,
- .dk_options a:visited {
+ .dk_options a {
background-color: #fff;
border-bottom: 1px solid #999;
font-weight: bold;
@@ -118,15 +114,9 @@
text-decoration: none;
text-shadow: rgba(0, 0, 0, .5) 0 1px 0;
}
- .dk_options a:active {
- background-color: #333;
- color: #fff;
- text-shadow: rgba(0, 0, 0, 1) 0 -2px 0;
- }
/* Inner container for options, this is what makes the scrollbar possible. */
.dk_options_inner {
- background-color: #fff;
border: 1px solid #8c8c8e;
border-bottom-width: 2px;
border-bottom-color: #999;
@@ -171,6 +161,9 @@
.dk_open .dk_options {
display: block;
}
+ .dk_open .dk_label {
+ color: inherit;
+ }
.dk_options {
display: none;
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -22,9 +22,7 @@
// Using this will automatically take advantage of a fix
// to help prevent flashes of unstyled content
// http://en.wikipedia.org/wiki/Flash_of_unstyled_content
- $('.default').dropkick({
- startSpeed: 1000
- });
+ $('.default').dropkick();
$('.change').dropkick({
change: function (value, label) {
@@ -33,7 +31,7 @@
});
$('.custom_theme').dropkick({
- theme: 'orange',
+ theme: 'black',
change: function (value, label) {
$(this).dropkick('theme', value);
}
@@ -146,7 +144,7 @@
<form action="#" method="post" accept-charset="utf-8" class="example_form">
<div class="section">
<select name="color" class="change dk" tabindex="4">
- <option value="">Pick a color</option>
+ <option value="">Please select a color</option>
<option value="#0084c7">Blue</option>
<option value="#E15A01">Orange</option>
<option value="#604A42">Brown</option>
@@ -161,25 +159,69 @@
<fieldset>
<legend>DropKick is easily themable.</legend>
<style type="text/css">
- .dk_theme_orange .dk_options a:hover,
- .dk_theme_orange .dk_option_current a {
- background-color: #E15A01;
- border-bottom-color: #604A42;
- color: #fff;
- text-shadow: #604A42 0 1px 0;
+ .dk_theme_orange {
+ background: #ffffff; /* Old browsers */
+ background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
}
- .dk_theme_orange.dk_focus .dk_toggle {
- box-shadow: 0 0 5px #E15A01;
- -moz-box-shadow: 0 0 5px #E15A01;
- -webkit-box-shadow: 0 0 5px #E15A01;
+ .dk_theme_orange .dk_options a:hover,
+ .dk_theme_orange .dk_option_current a {
+ background-color: #E15A01;
+ border-bottom-color: #604A42;
+ color: #fff;
+ text-shadow: #604A42 0 1px 0;
+ }
+ .dk_theme_orange .dk_toggle,
+ .dk_theme_orange.dk_open .dk_toggle {
+ background-color: transparent;
+ }
+ .dk_theme_orange.dk_focus .dk_toggle{
+ box-shadow: 0 0 5px #E15A01;
+ -moz-box-shadow: 0 0 5px #E15A01;
+ -webkit-box-shadow: 0 0 5px #E15A01;
+ }
+
+ .dk_theme_black {
+ background: #aebcbf; /* Old browsers */
+ background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
+ background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
}
+ .dk_theme_black .dk_toggle,
+ .dk_theme_black.dk_open .dk_toggle {
+ background-color: transparent;
+ background-image: url('images/dk_arrows_white.png');
+ color: #fff;
+ text-shadow: none;
+ }
+ .dk_theme_black .dk_options a {
+ background-color: #333;
+ color: #fff;
+ text-shadow: none;
+ }
+ .dk_theme_black .dk_options a:hover,
+ .dk_theme_black .dk_option_current a {
+ background-color: #E15A01;
+ color: #fff;
+ text-shadow: #604A42 0 1px 0;
+ }
</style>
<form action="#" method="post" accept-charset="utf-8" class="example_form">
<div class="section">
<select name="theme" class="custom_theme dk" tabindex="5">
- <option value="default">Select a theme</option>
- <option value="default">Blue</option>
- <option value="orange" selected="selected">Orange</option>
+ <option value="">Pick a theme. Any theme</option>
+ <option value="default">Default Theme</option>
+ <option value="black" >Dark Gloss</option>
+ <option value="orange">Light Gloss</option>
</select>
<div style="clear: both;"></div>
</div>
@@ -236,5 +278,19 @@
</div>
</div>
</div>
+
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-24341227-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
</body>
</html>

0 comments on commit 8ed5175

Please sign in to comment.