Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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...
commit 2f385701aef33f047c4a1b6036294d0330bc4054 1 parent 32df8a7
@jayj authored
View
2  js/script.js
@@ -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
174 less/forms.less
@@ -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
21 less/navigation.less
@@ -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
18 searchform.php
@@ -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 -->
View
95 style.dev.css
@@ -861,6 +861,14 @@ table caption {
width: 100%;
margin: 0 auto;
}
+.main-navigation:before,
+.main-navigation:after {
+ content: "";
+ display: table;
+}
+.main-navigation:after {
+ clear: both;
+}
.main-navigation .menu {
list-style: none;
margin: 0;
@@ -883,17 +891,10 @@ table caption {
color: #ececec;
}
.main-navigation .menu-list-container,
-.main-navigation .search,
+.main-navigation .search-form,
.main-navigation .sep {
display: none;
}
-#topbar .search {
- border: 1px solid #222222;
- border-width: 1px 0;
- float: none;
- padding: 20px;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-}
/* Toggle button */
#menu-toggle {
background-color: #4e4e4e;
@@ -926,7 +927,8 @@ table caption {
.main-navigation {
width: 1080px;
margin: 0 auto;
- padding: 0 25px;
+ padding: 0 40px 0 25px;
+ position: relative;
/* Separator */
}
@@ -936,7 +938,7 @@ table caption {
padding: 0;
}
.main-navigation .menu-list-container,
- .main-navigation .search {
+ .main-navigation .search-form {
display: block !important;
}
.main-navigation .menu-item {
@@ -953,7 +955,7 @@ table caption {
font-size: 15px;
font-weight: bold;
line-height: normal;
- padding: 20px 15px;
+ padding: 21px 15px;
text-shadow: 1px 1px 0 #222222;
-webkit-transition: all 150ms;
-moz-transition: all 150ms;
@@ -1021,7 +1023,7 @@ table caption {
}
/* 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;
}
.no-js #menu-toggle {
@@ -2596,14 +2598,65 @@ html .btn-inverse:hover {
#submit:active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
+/* =============================================================================
+ Layout: Search form
+ ========================================================================== */
+.search-form label {
+ display: inline-block;
+ margin-right: 5px;
+}
+.search-form .search-text {
+ background: #ffffff url(images/search.png) no-repeat 5px center;
+ padding-left: 27px;
+}
+.search-form .search-text[results] {
+ background-image: none;
+ padding-left: 6px;
+}
+/* Search form in the topbar */
+.main-navigation .search-form {
+ padding: 0;
+}
+.main-navigation .search-form label {
+ margin-right: 0;
+}
+.main-navigation .search-form .search-text {
+ background-color: #555555;
+ background-color: rgba(255, 255, 255, 0.3);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.3);
+ border: 1px solid #000000;
+ color: #ffffff;
+ color: rgba(255, 255, 255, 0.8);
+}
+.main-navigation .search-form .search-text:-moz-placeholder {
+ color: #b3b3b3;
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+}
+.main-navigation .search-form .search-text::-webkit-input-placeholder {
+ color: #b3b3b3;
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+}
+.main-navigation .search-form .search-submit {
+ padding: 3px 14px;
+ margin-left: 5px;
+}
+@media screen and (max-width: 980px) {
+ .main-navigation .search-form {
+ border: 1px solid #222222;
+ border-width: 1px 0;
+ float: none;
+ padding: 20px;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+ }
+}
@media screen and (min-width: 980px) {
- #topbar .search {
- background: #262626 url(less/less/images/topbar.png) repeat;
- border: none;
- box-shadow: none;
- float: right;
- margin-top: 12px;
- padding: 0;
+ .main-navigation .search-form {
+ position: absolute;
+ top: 13px;
+ right: 40px;
+ }
+ .main-navigation .search-form .search-submit {
+ display: none;
}
}
/* =============================================================================
@@ -2939,10 +2992,6 @@ html .btn-inverse:hover {
/* Make the Recent Posts one column */
/* Make the Category Headlines list two columns */
/* Add a background to the search inputs */
- #topbar .search-form .search-text,
- #topbar .search-form .search-submit {
- background-color: #666;
- }
/* Attachment page */
#image-info .image-info dt {
border-bottom: none;
View
8 style.dev.less
@@ -1310,10 +1310,10 @@ sub {
// }
/* Add a background to the search inputs */
- #topbar .search-form .search-text,
- #topbar .search-form .search-submit {
- background-color: #666;
- }
+ // #topbar .search-form .search-text,
+ // #topbar .search-form .search-submit {
+ // background-color: #666;
+ // }
/* Attachment page */
#image-info .image-info dt {
Please sign in to comment.
Something went wrong with that request. Please try again.