Permalink
Browse files

Forms part 3: Search forms

Add styling for search forms, both as widgets and in the topbar

The .search wrapper div has been removed and all references now point to
form.search-form
  • Loading branch information...
1 parent 32df8a7 commit 2f385701aef33f047c4a1b6036294d0330bc4054 @jayj committed Oct 14, 2012
Showing with 153 additions and 165 deletions.
  1. +1 −1 js/script.js
  2. +62 −112 less/forms.less
  3. +7 −14 less/navigation.less
  4. +7 −11 searchform.php
  5. +72 −23 style.dev.css
  6. +4 −4 style.dev.less
View
@@ -5,7 +5,7 @@
*/
var topbar = $( document.getElementById( 'topbar' ) ),
button = $( document.getElementById( 'menu-toggle' ) ),
- search = topbar.find( '.search' );
+ search = topbar.find( '.search-form' );
if ( ! topbar.find( '.menu' ).children().length ) {
button.hide();
View
@@ -342,120 +342,70 @@ html {
.buttonBackground(#08c, spin(#08c, 20%), @white, fade(@black, 40%));
}
+/* =============================================================================
+ Layout: Search form
+ ========================================================================== */
-// /**
-// * Search form
-// */
-// .search-form label {
-// padding-left: 0;
-// }
-
-// .search-form .search-text {
-// background: #fff url(images/search.png) no-repeat 5px center;
-// border: 1px solid #ddd;
-// border-radius: 2px;
-// font-size: 14px;
-// line-height: 1.5;
-// padding: 6px 10px 6px 27px;
-// box-shadow: inset 0 1px 1px rgba(0,0,0, 0.1);
-// -webkit-transition: all 250ms ease-in-out;
-// -moz-transition: all 250ms ease-in-out;
-// -o-transition: all 250ms ease-in-out;
-// -ms-transition: all 250ms ease-in-out;
-// transition: all 250ms ease-in-out;
-// }
-
-// .search-form .search-text:focus {
-// background-color: #f8f8f8;
-// border-color: #F0B03C;
-// box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 0 0 1px 1px #F0B03C;
-// outline: 0;
-// }
-
-// .search-form .search-text::webkit-placeholder { color: #ececec; }
-// .search-form .search-text::moz-placeholder { color: #ececec; }
-// .search-form .search-text::o-placeholder { color: #ececec; }
-// .search-form .search-text::ms-placeholder { color: #ececec; }
-// .search-form .search-text::placeholder { color: #ececec; }
-
-// .search-form .search-submit {
-// margin-left: 10px;
-// }
-
-// /* Search form in sidebar */
-// .widget-search .search-text {
-// margin-left: 10px;
-// width: 77%;
-// }
-
-// .widget-search .search-submit {
-// display: none;
-// }
-
-
-
-// /* Search form in the topbar */
-// // @TODO: Change styling to reflect changes;
-@media screen and (min-width: 980px) {
- #topbar .search {
- background: #262626 url(images/topbar.png) repeat;
- border: none;
- box-shadow: none;
- float: right;
- margin-top: 12px;
- padding: 0;
+.search-form {
+ label {
+ display: inline-block;
+ margin-right: 5px;
+ }
+
+ .search-text {
+ background: #fff ~"url(images/search.png)" no-repeat 5px center;
+ padding-left: 27px;
+
+ &[results] {
+ background-image: none;
+ padding-left: 6px;
+ }
}
}
-// #topbar input {
-// background-color: #666;
-// background-color: rgba(255, 255, 255, 0.3);
-// border: 1px solid #000;
-// border-radius: 4px;
-// color: #ffffff;
-// color: rgba(255, 255, 255, 0.8);
-// line-height: normal;
-// padding: 7px 5px 7px 27px;
-// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.3);
-// }
-
-// #topbar input:hover {
-// background-color: #bfbfbf;
-// background-color: rgba(255, 255, 255, 0.5);
-// color: #ffffff;
-// }
-
-// #topbar input:focus {
-// background-color: #ffffff;
-// box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-// color: #404040;
-// outline: 0;
-// text-shadow: none;
-// }
-
-// #topbar input:-moz-placeholder { color: #e6e6e6; }
-// #topbar input::-webkit-input-placeholder { color: #e6e6e6; }
-
-// #topbar input:focus::-webkit-input-placeholder { color: #ccc; }
-// #topbar input:focus::-moz-placeholder { color: #ccc; }
-
-// #topbar input[type="submit"] {
-// font-size: 14px;
-// padding: 7px 12px;
-// }
-
-// #topbar input[type="submit"]:hover {
-// background: #d54e21;
-// }
-
-// /* IE fixes */
-// .oldie #topbar input[type="text"],
-// .oldie #topbar input[type="search"] {
-// width: auto;
-// }
-
-// .oldie #topbar input[type="submit"] {
-// width: auto;
-// margin-left: 5px;
-// }
+/* Search form in the topbar */
+.main-navigation .search-form {
+ padding: 0;
+
+ label {
+ margin-right: 0;
+ }
+
+ .search-text {
+ background-color: @gray;
+ background-color: fade(@white, 30%);
+ box-shadow: inset 0 1px 2px fade(@black, 10%), 0 1px 0px fade(@white, 30%);
+ border: 1px solid @black;
+ color: @white;
+ color: fade(@white, 80%);
+ .placeholder( lighten(@grayLight, 10%), -1px -1px 0 fade(@black, 30%) );
+ }
+
+ .search-submit {
+ padding: 3px 14px;
+ margin-left: 5px;
+ }
+}
+
+@media screen and (max-width: 980px) {
+ .main-navigation .search-form {
+ border: 1px solid @grayDarker;
+ border-width: 1px 0;
+ float: none;
+ padding: 20px;
+ box-shadow: inset 0 1px 0 fade(@white, 10%), 0 1px 0 fade(@white, 10%);
+ }
+}
+
+@media screen and (min-width: 980px) {
+ .main-navigation .search-form {
+ position: absolute;
+ top: 13px;
+ right: @gutterWidth;
+
+ .search-submit {
+ display: none;
+ }
+ }
+}
View
@@ -3,10 +3,10 @@
// --------------------------------------------------
.main-navigation {
+ .clearfix;
width: 100%;
margin: 0 auto;
-
.menu {
list-style: none;
margin: 0;
@@ -33,20 +33,12 @@
}
.menu-list-container,
- .search,
+ .search-form,
.sep {
display: none;
}
}
-#topbar .search {
- border: 1px solid @grayDarker;
- border-width: 1px 0;
- float: none;
- padding: 20px;
- box-shadow: inset 0 1px 0 fade(@white, 10%), 0 1px 0 fade(@white, 10%);
-}
-
/* Toggle button */
#menu-toggle {
#gradient > .vertical(#555, #444);
@@ -79,7 +71,8 @@
.main-navigation {
width: @siteWidth;
margin: 0 auto;
- padding: 0 @gutterWidth - 15px; // 15px is the padding-left on .menu-item a {}
+ padding: 0 @gutterWidth 0 (@gutterWidth - 15px); // 15px is the padding-left on .menu-item a {}
+ position: relative;
ul {
list-style: none;
@@ -88,7 +81,7 @@
}
.menu-list-container,
- .search {
+ .search-form {
display: block !important;
}
@@ -104,7 +97,7 @@
color: #ccc;
display: inline-block;
#font > .alternative(15px, bold, normal);
- padding: 20px 15px;
+ padding: 21px 15px;
text-shadow: 1px 1px 0 @grayDarker;
.transition(all 150ms);
}
@@ -183,7 +176,7 @@
/* No JS; show the menu */
.no-js .main-navigation .menu-list-container,
-.no-js .main-navigation .search {
+.no-js .main-navigation .search-form {
display: block !important;
}
View
@@ -21,14 +21,10 @@
$value = 'placeholder="' . esc_attr__( 'Search', 'cakifo' ) . '"'; // Or "Search" as placeholder
?>
-<div class="search">
-
- <form method="get" class="search-form" action="<?php echo trailingslashit( home_url() ); ?>" role="search">
- <label>
- <span class="assistive-text"><?php _e( 'Search', 'cakifo' ); ?></span>
- <input class="search-text" type="search" name="s" <?php echo $value; ?> />
- </label>
- <input class="search-submit" type="submit" value="<?php esc_attr_e( 'Search', 'cakifo' ); ?>" />
- </form> <!-- .search-form -->
-
-</div> <!-- .search -->
+<form method="get" class="search-form" action="<?php echo trailingslashit( home_url() ); ?>" role="search">
+ <label>
+ <span class="assistive-text"><?php _e( 'Search', 'cakifo' ); ?></span>
+ <input class="search-text" type="search" name="s" <?php echo $value; ?> />
+ </label>
+ <input class="search-submit" type="submit" value="<?php esc_attr_e( 'Search', 'cakifo' ); ?>" />
+</form> <!-- .search-form -->
Oops, something went wrong.

0 comments on commit 2f38570

Please sign in to comment.