Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added recipe for search input

  • Loading branch information...
commit 60fef80ef9a390d3cfbb03d095b00375d6da92bd 1 parent 12f9479
@jlong jlong authored
View
368 css-arrow/css-arrow-example.css
@@ -1,152 +1,187 @@
+/* line 3, css-arrow-example.sass */
body {
font-family: "Helvetica Neue", Arial, san-serif;
- font-size: 12px; }
+ font-size: 12px;
+}
+/* line 7, css-arrow-example.sass */
.arrow {
border: 1px solid #456eb9;
background: #e7eff4;
height: 100px;
width: 500px;
padding: 10px;
- margin-bottom: 10px; }
- .arrow.east {
- margin-right: 50px;
- position: relative; }
- .arrow.east:before {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 0;
- left: 520px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent transparent transparent #456eb9; }
- .arrow.east:after {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 0;
- left: 519px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent transparent transparent #e7eff4; }
- .arrow.south {
- margin-bottom: 50px;
- position: relative; }
- .arrow.south:before {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 120px;
- left: 0;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: #456eb9 transparent transparent transparent; }
- .arrow.south:after {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 119px;
- left: 0;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: #e7eff4 transparent transparent transparent; }
- .arrow.north {
- margin-top: -15px;
- position: relative; }
- .arrow.north:before {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: -50px;
- left: 400px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent transparent #456eb9 transparent; }
- .arrow.north:after {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: -49px;
- left: 400px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent transparent #e7eff4 transparent; }
- .arrow.west {
- margin-left: 50px;
- width: 450px;
- position: relative; }
- .arrow.west:before {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 0;
- left: -50px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent #456eb9 transparent transparent; }
- .arrow.west:after {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 0;
- left: -49px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent #e7eff4 transparent transparent; }
- .arrow.borderless {
- border: none;
- margin-right: 50px;
- position: relative; }
- .arrow.borderless:before {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 0;
- left: 520px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent transparent transparent #456eb9; }
- .arrow.borderless:after {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 0;
- left: 520px;
- bottom: auto;
- border-width: 25px;
- border-style: solid;
- border-color: transparent transparent transparent #e7eff4; }
+ margin-bottom: 10px;
+}
+/* line 18, css-arrow-example.sass */
+.arrow.east {
+ margin-right: 50px;
+ position: relative;
+}
+/* line 13, _css-arrow.sass */
+.arrow.east:before {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 0;
+ left: 520px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent transparent transparent #456eb9;
+}
+/* line 38, _css-arrow.sass */
+.arrow.east:after {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 0;
+ left: 519px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent transparent transparent #e7eff4;
+}
+/* line 21, css-arrow-example.sass */
+.arrow.south {
+ margin-bottom: 50px;
+ position: relative;
+}
+/* line 13, _css-arrow.sass */
+.arrow.south:before {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 120px;
+ left: 0;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: #456eb9 transparent transparent transparent;
+}
+/* line 38, _css-arrow.sass */
+.arrow.south:after {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 119px;
+ left: 0;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: #e7eff4 transparent transparent transparent;
+}
+/* line 24, css-arrow-example.sass */
+.arrow.north {
+ margin-top: -15px;
+ position: relative;
+}
+/* line 13, _css-arrow.sass */
+.arrow.north:before {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -50px;
+ left: 400px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent transparent #456eb9 transparent;
+}
+/* line 38, _css-arrow.sass */
+.arrow.north:after {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -49px;
+ left: 400px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent transparent #e7eff4 transparent;
+}
+/* line 27, css-arrow-example.sass */
+.arrow.west {
+ margin-left: 50px;
+ width: 450px;
+ position: relative;
+}
+/* line 13, _css-arrow.sass */
+.arrow.west:before {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 0;
+ left: -50px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent #456eb9 transparent transparent;
+}
+/* line 38, _css-arrow.sass */
+.arrow.west:after {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 0;
+ left: -49px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent #e7eff4 transparent transparent;
+}
+/* line 31, css-arrow-example.sass */
+.arrow.borderless {
+ border: none;
+ margin-right: 50px;
+ position: relative;
+}
+/* line 13, _css-arrow.sass */
+.arrow.borderless:before {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 0;
+ left: 520px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent transparent transparent #456eb9;
+}
+/* line 38, _css-arrow.sass */
+.arrow.borderless:after {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 0;
+ left: 520px;
+ bottom: auto;
+ border-width: 25px;
+ border-style: solid;
+ border-color: transparent transparent transparent #e7eff4;
+}
+/* line 37, css-arrow-example.sass */
blockquote {
border: 5px solid #333333;
background: #cccccc;
@@ -155,28 +190,33 @@ blockquote {
padding: 10px;
margin-bottom: 30px;
margin-left: 0;
- position: relative; }
- blockquote:before {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 110px;
- left: 450px;
- bottom: auto;
- border-width: 15px;
- border-style: solid;
- border-color: #333333 transparent transparent transparent; }
- blockquote:after {
- content: "\00a0";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 105px;
- left: 450px;
- bottom: auto;
- border-width: 15px;
- border-style: solid;
- border-color: #cccccc transparent transparent transparent; }
+ position: relative;
+}
+/* line 13, _css-arrow.sass */
+blockquote:before {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 110px;
+ left: 450px;
+ bottom: auto;
+ border-width: 15px;
+ border-style: solid;
+ border-color: #333333 transparent transparent transparent;
+}
+/* line 38, _css-arrow.sass */
+blockquote:after {
+ content: "\00a0";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 105px;
+ left: 450px;
+ bottom: auto;
+ border-width: 15px;
+ border-style: solid;
+ border-color: #cccccc transparent transparent transparent;
+}
View
BIN  images/search.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
11 search-input/_search-input.sass
@@ -0,0 +1,11 @@
+=search-input($font-size: 11px)
+ font-size: $font-size
+ +border-radius(100px)
+ border: 1px solid #ccc
+ border-top-color: #999
+ border-left-color: #b0b0b0
+ border-right-color: #bbb
+ background: white image-url('search.png') 4px center no-repeat
+ +box-shadow(rgba(black, 0.2), 0, 1px, 0, inset)
+ width: 180px
+ padding: 2px 8px 2px 20px
View
21 search-input/search-input.css
@@ -0,0 +1,21 @@
+/* line 4, search-input.sass */
+input[type=search], input.search {
+ font-size: 11px;
+ -moz-border-radius: 100px;
+ -webkit-border-radius: 100px;
+ -o-border-radius: 100px;
+ -ms-border-radius: 100px;
+ -khtml-border-radius: 100px;
+ border-radius: 100px;
+ border: 1px solid #cccccc;
+ border-top-color: #999999;
+ border-left-color: #b0b0b0;
+ border-right-color: #bbbbbb;
+ background: white url('/images/search.png?1287280523') 4px center no-repeat;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
+ -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
+ width: 180px;
+ padding: 2px 8px 2px 20px;
+}
View
10 search-input/search-input.haml
@@ -0,0 +1,10 @@
+!!! 5
+%html
+ %head
+ %title Search Input
+ %link(rel="stylesheet" href="search-input.css")/
+ %body
+ %p
+ The search box below should look similar on Firefox, Safari, and other browsers that support CSS3.
+ %form
+ %input(type="search" name="q" results=0)/
View
15 search-input/search-input.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Search Input</title>
+ <link href='search-input.css' rel='stylesheet' />
+ </head>
+ <body>
+ <p>
+ The search box below should look similar on Firefox, Safari, and other browsers that support CSS3.
+ </p>
+ <form>
+ <input name='q' results='0' type='search' />
+ </form>
+ </body>
+</html>
View
5 search-input/search-input.sass
@@ -0,0 +1,5 @@
+@import compass
+@import search-input
+
+input[type=search], input.search
+ +search-input
Please sign in to comment.
Something went wrong with that request. Please try again.