Permalink
Browse files

Clean up theme css

  • Loading branch information...
1 parent 6f52e36 commit fe80caed30c36fdd83ce584eb8b81f6f9c661e2b @JamieLottering JamieLottering committed Jul 4, 2011
Showing with 285 additions and 290 deletions.
  1. +126 −132 css/dropkick.css
  2. +1 −1 css/dropkick.min.css
  3. +2 −154 index.html
  4. +1 −1 jquery.dropkick.min.js
  5. +153 −0 optional/demo.css
  6. +2 −2 src/jquery.dropkick-1.0.0.js
View
@@ -1,182 +1,175 @@
/**
- * Storenvy Dropdown Menus
- * @author Jamie Lottering <jamie@storenvy.com>
+ * Default DropKick theme
+ *
+ * Feel free to edit the default theme
+ * or even add your own.
+ *
+ * See the readme for themeing help
+ *
*/
-/* Feel free to theme this yourself */
-.dk_container {
- display: none;
- font-family: 'Helvetica', Arial, sans-serif;
- font-size: 12px;
- font-weight: bold;
- line-height: 14px;
- margin-bottom: 20px;
- position: relative;
-}
- .dk_container a {
- cursor: pointer;
- text-decoration: none;
- }
-
- .dk_container .dk_toggle {
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
- background: -moz-linear-gradient(top, #fff, #f5f5f5);
- background: -o-linear-gradient(top, #fff, #f5f5f5);
- background-color: #f5f5f5;
- border: 1px solid #ccc;
- color: #333;
- padding: 7px 45px 7px 10px;
- position: relative;
- text-shadow: #fff 1px 1px 0;
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- -webkit-transition: border-color .5s;
- -moz-transition: border-color .5s;
- -o-transition: border-color .5s;
- transition: border-color .5s;
- }
-
- .dk_focus .dk_toggle,
- .dk_open .dk_toggle {
- border-color: #40b5e2;
- box-shadow: 0 0 5px #40b5e2;
- -moz-box-shadow: 0 0 5px #40b5e2;
- -webkit-box-shadow: 0 0 5px #40b5e2;
- }
- .dk_open {
- position: relative;
- z-index: 10;
- }
- .dk_container .dk_toggle:hover {
- border-color: #8c8c8c;
- }
- .dk_container .dk_arrows {
- font-size: 33px;
- padding: 11px 3px 3px;
- text-align: center;
- }
- .dk_open.dk_container .dk_arrows {
- padding-top: 10px;
- padding-bottom: 5px;
- }
- .dk_open.dk_container .dk_toggle {
- background: #ececec;
- border-radius: 5px 5px 0 0;
- -moz-border-radius: 5px 5px 0 0;
- -webkit-border-radius: 5px 5px 0 0;
- }
- .dk_open.dk_container .dk_label {
- color: #ccc;
- }
-
-/* Advise against editing */
-.dk_container {
- clear: both;
- float: left;
- position: relative;
-}
- .dk_container a {
- outline: 0;
+/***** Begin Theme, feel free to edit in here! ******/
+
+/* One container to bind them... */
+ .dk_container {
+ float: left;
+ font-family: 'Helvetica', Arial, sans-serif;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 14px;
+ margin-bottom: 18px;
}
+ .dk_container a {
+ cursor: pointer;
+ text-decoration: none;
+ }
+/* Opens the dropdown and holds the menu label */
.dk_toggle {
- display: -moz-inline-stack;
- display: inline-block;
- *display: inline;
- position: relative;
- zoom: 1;
+ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
+ background: -moz-linear-gradient(top, #fff, #f5f5f5);
+ background: -o-linear-gradient(top, #fff, #f5f5f5);
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ color: #333;
+ padding: 7px 45px 7px 10px;
+ text-shadow: #fff 1px 1px 0;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -webkit-transition: border-color .5s;
+ -moz-transition: border-color .5s;
+ -o-transition: border-color .5s;
+ transition: border-color .5s;
}
+ .dk_toggle:hover {
+ border-color: #8c8c8c;
+ }
.dk_toggle:active {
box-shadow: inset rgba(0, 0, 0, .2) 0 0 10px;
-moz-box-shadow: inset rgba(0, 0, 0, .2) 0 0 10px;
-webkit-box-shadow: inset rgba(0, 0, 0, .2) 0 0 10px;
}
+ /* Applied when the dropdown is focused or openend */
+ .dk_focus .dk_toggle {
+ border-color: #40b5e2;
+ box-shadow: 0 0 5px #40b5e2;
+ -moz-box-shadow: 0 0 5px #40b5e2;
+ -webkit-box-shadow: 0 0 5px #40b5e2;
+ }
-.dk_arrows {
- display: block;
- position: absolute;
- right: 0;
- top: -1px;
-}
- .dk_open .dk_arrows {
- background-color: #fff;
- background-position: center 9px;
- border-left: 1px solid #8c8c8c;
- border-top: 1px solid #8c8c8c;
- border-radius: 5px 5px 0 0;
- -moz-border-radius: 5px 5px 0 0;
- -webkit-border-radius: 5px 5px 0 0;
- box-shadow: rgba(0, 0, 0, .1) -2px -1px 2px;
- -moz-box-shadow: rgba(0, 0, 0, .1) -2px -1px 2px;
- -webkit-box-shadow: rgba(0, 0, 0, .1) -2px -1px 2px;
+ .dk_open {
+ z-index: 10; /* You may need to make this higher if your dropdowns are covered by something else */
}
- .websockets .dk_open .dk_arrows { /* Non-permanent Modernizr fix for WebKit */
- padding-bottom: 9px;
+ .dk_open .dk_toggle {
+ background: #ececec;
+ 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 {
- display: none;
- margin-top: -1px;
- list-style: none;
- position: absolute;
- right: 0;
- width: 100%;
box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
-moz-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
-webkit-box-shadow: rgba(0, 0, 0, .2) 0 2px 8px;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
- .dk_open .dk_options {
- display: block;
- }
.dk_options a,
.dk_options a:link,
.dk_options a:visited {
background-color: #fff;
border-bottom: 1px solid #999;
- color: inherit;
- display: block;
font-weight: bold;
padding: 8px 10px;
- text-shadow: inherit;
}
- .dk_options li:last-child a {
- border-bottom: none;
- }
- .dk_option_current a,
- .dk_options a:hover {
- background-color: #0084c7;
- border-bottom-color: #004c72;
- color: #fff;
- text-decoration: none;
- text-shadow: rgba(0, 0, 0, .5) 0 1px 0;
- }
- .dk_theme_default .dk_options a:active {
- background-color: #333;
- color: #fff;
- text-shadow: rgba(0, 0, 0, 1) 0 -2px 0;
- }
+ .dk_options li:last-child a {
+ border-bottom: none;
+ }
+ .dk_options a:hover,
+ .dk_option_current a {
+ background-color: #0084c7;
+ border-bottom-color: #004c72;
+ color: #fff;
+ 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;
color: #333;
max-height: 250px;
- overflow: auto;
- position: relative;
text-shadow: #fff 0 1px 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
+/* Set a max-height on the options inner */
+.dk_options_inner,
.dk_touch .dk_options {
max-height: 250px;
+}
+
+/****** End Theme ******/
+
+/***** Critical to the continued enjoyment of working dropdowns ******/
+
+.dk_container {
+ display: none;
+ position: relative;
+}
+ .dk_container a {
+ outline: 0;
+ }
+
+.dk_toggle {
+ display: -moz-inline-stack;
+ display: inline-block;
+ *display: inline;
+ position: relative;
+ zoom: 1;
+}
+
+.dk_open {
+ position: relative;
+}
+ .dk_open .dk_options {
+ display: block;
+ }
+
+.dk_options {
+ display: none;
+ margin-top: -1px;
+ position: absolute;
+ right: 0;
+ width: 100%;
+}
+ .dk_options a,
+ .dk_options a:link,
+ .dk_options a:visited {
+ display: block;
+ }
+ .dk_options_inner {
+ overflow: auto;
+ position: relative;
+ }
+
+.dk_touch .dk_options {
overflow: hidden;
}
@@ -187,6 +180,7 @@
select.dk {
position: relative;
- top: -99999px;
+ top: -99999em;
}
+/***** End Critical to the continued enjoyment of working dropdowns ******/
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit fe80cae

Please sign in to comment.