Skip to content

valencia
valencia
Commit 9f48ec98 authored by Mattia Migliorini's avatar Mattia Migliorini
Browse files
Options

Style search form

parent 7c6525a7
Show whitespace changes
Inline Side-by-side
Showing with 72 additions and 4 deletions
css/style.css
View file @ 9f48ec98
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);::selection{background:#ed6637}a::selection,a *::selection{background:#77216f}.logo{position:absolute;top:0;left:0;z-index:10}body.toolbar .logo{top:30px}header.banner{margin-bottom:0}header.banner.inverted{background:#f7f7f7;margin-bottom:20px;margin-top:-3px}header.banner.inverted .nav-primary ul{border-color:#fff}header.banner.inverted .nav-primary ul li,header.banner.inverted .nav-primary ul li:last-child{border-color:#eaeaea}header.banner.inverted .nav-primary ul li a:link,header.banner.inverted .nav-primary ul li a:visited{border-color:#fff;color:#978e83}header.banner.inverted .nav-primary ul li a:hover{background:#eaeaea;color:#454545}header.banner.inverted .nav-primary a.active,header.banner.inverted .nav-primary a:active{border-color:#eaeaea;background:#eaeaea}header.banner .site-name{float:right}header.banner .site-name .logo-ubuntuit{font-size:2.25em;margin-bottom:0.33333em;margin-bottom:0;position:relative;text-transform:lowercase;margin:0;display:inline-block;margin-left:20px} @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);::selection{background:#ed6637}a::selection,a *::selection{background:#77216f}.logo{position:absolute;top:0;left:0;z-index:10}body.toolbar .logo{top:30px}header.banner{margin-bottom:0}header.banner.inverted{background:#f7f7f7;margin-bottom:20px;margin-top:-4px}header.banner.inverted .nav-primary ul{border-color:#fff}header.banner.inverted .nav-primary ul li,header.banner.inverted .nav-primary ul li:last-child{border-color:#eaeaea}header.banner.inverted .nav-primary ul li a:link,header.banner.inverted .nav-primary ul li a:visited{border-color:#fff;color:#978e83}header.banner.inverted .nav-primary ul li a:hover{background:#eaeaea;color:#454545}header.banner.inverted .nav-primary a.active,header.banner.inverted .nav-primary a:active{border-color:#eaeaea;background:#eaeaea}header.banner.inverted .header-search{overflow:hidden;padding:7px 0 7px 14px;max-width:240px;float:right}header.banner.inverted .header-search input[type="search"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;float:left;display:block;font-size:1em;margin-bottom:0.75em;height:2.1em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:100%;border:none;margin-bottom:0;background-color:#aea79f;-moz-box-shadow:inset 0 1px 4px rgba(0,0,0,0.2);-webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,0.2);box-shadow:inset 0 1px 4px rgba(0,0,0,0.2);-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;padding:.5em 2.5em .5em .5em;color:#fff}header.banner.inverted .header-search input[type="search"]:focus{background:#333}header.banner.inverted .header-search input[type="search"]::-webkit-input-placeholder{color:#fff}header.banner.inverted .header-search input[type="search"]:-moz-placeholder{color:#fff}header.banner.inverted .header-search input[type="search"]::-moz-placeholder{color:#fff}header.banner.inverted .header-search input[type="search"]:-ms-input-placeholder{color:#fff}header.banner.inverted .header-search button[type="submit"]{padding:3px 2px;line-height:0;float:left;margin-left:-40px;display:block;background:none;overflow:visible}header.banner .site-name{float:right}header.banner .site-name .logo-ubuntuit{font-size:2.25em;margin-bottom:0.33333em;margin-bottom:0;position:relative;text-transform:lowercase;margin:0;display:inline-block;margin-left:20px;font-weight:300}
sass/mixins.scss 0 → 100644
View file @ 9f48ec98
/**
* mixins
*
* @section mixins
*/
@mixin transition($transition: all .5s) {
-webkit-transition:$transition;
-moz-transition:$transition;
transition:$transition;
}
@mixin placeholder($color) {
&::-webkit-input-placeholder {
color: $color;
}
&:-moz-placeholder { // Firefox 18-
color: $color;
}
&::-moz-placeholder { // Firefox 19+
color: $color;
}
&:-ms-input-placeholder {
color: $color;
}
}
\ No newline at end of file
sass/style.scss
View file @ 9f48ec98
@import 'core/core-constants.scss'; @import 'core/core-constants.scss';
@import 'core/core-mixins.scss'; @import 'core/core-mixins.scss';
@import 'mixins.scss';
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic); @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);
// Override default text selection color // Override default text selection color
...@@ -30,7 +31,7 @@ header.banner { ...@@ -30,7 +31,7 @@ header.banner {
&.inverted { &.inverted {
background: $light_grey; background: $light_grey;
margin-bottom:20px; margin-bottom:20px;
margin-top:-3px; // Ugly fix for gap between navbar margin-top:-4px; // Ugly fix for gap between navbar
.nav-primary { .nav-primary {
ul { ul {
...@@ -61,6 +62,46 @@ header.banner { ...@@ -61,6 +62,46 @@ header.banner {
} }
} }
} }
.header-search {
overflow:hidden;
padding:7px 0 7px 14px;
max-width:240px;
float:right;
input[type="search"] {
@include box_sizing(border-box);
-webkit-appearance:none;
float:left;
display:block;
@include font_size(16);
height:2.1em;
@include rounded_corners(4px);
width:100%;
border:none;
margin-bottom:0;
background-color:$warm_grey;
@include box_shadow(inset 0 1px 4px rgba(0,0,0,.2));
@include transition(); // Use defaults
padding:.5em 2.5em .5em .5em;
color:#fff;
&:focus {
background:$cool_grey;
}
@include placeholder(#fff);
}
button[type="submit"] {
padding:3px 2px;
line-height:0;
float:left;
margin-left:-40px;
display:block;
background:none;
overflow:visible;
}
}
} }
.site-name { .site-name {
...@@ -73,6 +114,7 @@ header.banner { ...@@ -73,6 +114,7 @@ header.banner {
margin:0; margin:0;
display:inline-block; display:inline-block;
margin-left:20px; margin-left:20px;
font-weight:300;
} }
} }
} }
\ No newline at end of file
tpl/page.tpl.php
View file @ 9f48ec98
...@@ -102,8 +102,8 @@ ...@@ -102,8 +102,8 @@
<ul> <ul>
<li><a href="#">Somewhere</a></li> <li><a href="#">Somewhere</a></li>
</ul> </ul>
<form action="/search" id="google-appliance-search-form" class="header-search"> <form action="/search" id="search-form" class="header-search">
<input type="search" maxlength="255" name="s" id="edit-keys" class="form-text" placeholder="Search&hellip;" value="" /> <input type="search" maxlength="255" name="q" id="edit-keys" class="form-text" placeholder="Search&hellip;" value="" />
<button type="submit"> <button type="submit">
<img src="http://assets.ubuntu.com/sites/ubuntu/1044/u/img/search-white.svg" alt="Search" height="28" /> <img src="http://assets.ubuntu.com/sites/ubuntu/1044/u/img/search-white.svg" alt="Search" height="28" />
</button> </button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment