Skip to content

Commit

Permalink
added recipe for search input
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlong
jlong committed Oct 17, 2010
1 parent 12f9479 commit 60fef80
Show file tree
Hide file tree
Showing 7 changed files with 266 additions and 164 deletions.
368 changes: 204 additions & 164 deletions css-arrow/css-arrow-example.css
View file
@@ -1,152 +1,187 @@
/* line 3, css-arrow-example.sass */
body { body {
font-family: "Helvetica Neue", Arial, san-serif; font-family: "Helvetica Neue", Arial, san-serif;
font-size: 12px; } font-size: 12px;
}


/* line 7, css-arrow-example.sass */
.arrow { .arrow {
border: 1px solid #456eb9; border: 1px solid #456eb9;
background: #e7eff4; background: #e7eff4;
height: 100px; height: 100px;
width: 500px; width: 500px;
padding: 10px; padding: 10px;
margin-bottom: 10px; } margin-bottom: 10px;
.arrow.east { }
margin-right: 50px; /* line 18, css-arrow-example.sass */
position: relative; } .arrow.east {
.arrow.east:before { margin-right: 50px;
content: "\00a0"; position: relative;
display: block; }
position: absolute; /* line 13, _css-arrow.sass */
width: 0; .arrow.east:before {
height: 0; content: "\00a0";
top: 0; display: block;
left: 520px; position: absolute;
bottom: auto; width: 0;
border-width: 25px; height: 0;
border-style: solid; top: 0;
border-color: transparent transparent transparent #456eb9; } left: 520px;
.arrow.east:after { bottom: auto;
content: "\00a0"; border-width: 25px;
display: block; border-style: solid;
position: absolute; border-color: transparent transparent transparent #456eb9;
width: 0; }
height: 0; /* line 38, _css-arrow.sass */
top: 0; .arrow.east:after {
left: 519px; content: "\00a0";
bottom: auto; display: block;
border-width: 25px; position: absolute;
border-style: solid; width: 0;
border-color: transparent transparent transparent #e7eff4; } height: 0;
.arrow.south { top: 0;
margin-bottom: 50px; left: 519px;
position: relative; } bottom: auto;
.arrow.south:before { border-width: 25px;
content: "\00a0"; border-style: solid;
display: block; border-color: transparent transparent transparent #e7eff4;
position: absolute; }
width: 0; /* line 21, css-arrow-example.sass */
height: 0; .arrow.south {
top: 120px; margin-bottom: 50px;
left: 0; position: relative;
bottom: auto; }
border-width: 25px; /* line 13, _css-arrow.sass */
border-style: solid; .arrow.south:before {
border-color: #456eb9 transparent transparent transparent; } content: "\00a0";
.arrow.south:after { display: block;
content: "\00a0"; position: absolute;
display: block; width: 0;
position: absolute; height: 0;
width: 0; top: 120px;
height: 0; left: 0;
top: 119px; bottom: auto;
left: 0; border-width: 25px;
bottom: auto; border-style: solid;
border-width: 25px; border-color: #456eb9 transparent transparent transparent;
border-style: solid; }
border-color: #e7eff4 transparent transparent transparent; } /* line 38, _css-arrow.sass */
.arrow.north { .arrow.south:after {
margin-top: -15px; content: "\00a0";
position: relative; } display: block;
.arrow.north:before { position: absolute;
content: "\00a0"; width: 0;
display: block; height: 0;
position: absolute; top: 119px;
width: 0; left: 0;
height: 0; bottom: auto;
top: -50px; border-width: 25px;
left: 400px; border-style: solid;
bottom: auto; border-color: #e7eff4 transparent transparent transparent;
border-width: 25px; }
border-style: solid; /* line 24, css-arrow-example.sass */
border-color: transparent transparent #456eb9 transparent; } .arrow.north {
.arrow.north:after { margin-top: -15px;
content: "\00a0"; position: relative;
display: block; }
position: absolute; /* line 13, _css-arrow.sass */
width: 0; .arrow.north:before {
height: 0; content: "\00a0";
top: -49px; display: block;
left: 400px; position: absolute;
bottom: auto; width: 0;
border-width: 25px; height: 0;
border-style: solid; top: -50px;
border-color: transparent transparent #e7eff4 transparent; } left: 400px;
.arrow.west { bottom: auto;
margin-left: 50px; border-width: 25px;
width: 450px; border-style: solid;
position: relative; } border-color: transparent transparent #456eb9 transparent;
.arrow.west:before { }
content: "\00a0"; /* line 38, _css-arrow.sass */
display: block; .arrow.north:after {
position: absolute; content: "\00a0";
width: 0; display: block;
height: 0; position: absolute;
top: 0; width: 0;
left: -50px; height: 0;
bottom: auto; top: -49px;
border-width: 25px; left: 400px;
border-style: solid; bottom: auto;
border-color: transparent #456eb9 transparent transparent; } border-width: 25px;
.arrow.west:after { border-style: solid;
content: "\00a0"; border-color: transparent transparent #e7eff4 transparent;
display: block; }
position: absolute; /* line 27, css-arrow-example.sass */
width: 0; .arrow.west {
height: 0; margin-left: 50px;
top: 0; width: 450px;
left: -49px; position: relative;
bottom: auto; }
border-width: 25px; /* line 13, _css-arrow.sass */
border-style: solid; .arrow.west:before {
border-color: transparent #e7eff4 transparent transparent; } content: "\00a0";
.arrow.borderless { display: block;
border: none; position: absolute;
margin-right: 50px; width: 0;
position: relative; } height: 0;
.arrow.borderless:before { top: 0;
content: "\00a0"; left: -50px;
display: block; bottom: auto;
position: absolute; border-width: 25px;
width: 0; border-style: solid;
height: 0; border-color: transparent #456eb9 transparent transparent;
top: 0; }
left: 520px; /* line 38, _css-arrow.sass */
bottom: auto; .arrow.west:after {
border-width: 25px; content: "\00a0";
border-style: solid; display: block;
border-color: transparent transparent transparent #456eb9; } position: absolute;
.arrow.borderless:after { width: 0;
content: "\00a0"; height: 0;
display: block; top: 0;
position: absolute; left: -49px;
width: 0; bottom: auto;
height: 0; border-width: 25px;
top: 0; border-style: solid;
left: 520px; border-color: transparent #e7eff4 transparent transparent;
bottom: auto; }
border-width: 25px; /* line 31, css-arrow-example.sass */
border-style: solid; .arrow.borderless {
border-color: transparent transparent transparent #e7eff4; } 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 { blockquote {
border: 5px solid #333333; border: 5px solid #333333;
background: #cccccc; background: #cccccc;
Expand All @@ -155,28 +190,33 @@ blockquote {
padding: 10px; padding: 10px;
margin-bottom: 30px; margin-bottom: 30px;
margin-left: 0; margin-left: 0;
position: relative; } position: relative;
blockquote:before { }
content: "\00a0"; /* line 13, _css-arrow.sass */
display: block; blockquote:before {
position: absolute; content: "\00a0";
width: 0; display: block;
height: 0; position: absolute;
top: 110px; width: 0;
left: 450px; height: 0;
bottom: auto; top: 110px;
border-width: 15px; left: 450px;
border-style: solid; bottom: auto;
border-color: #333333 transparent transparent transparent; } border-width: 15px;
blockquote:after { border-style: solid;
content: "\00a0"; border-color: #333333 transparent transparent transparent;
display: block; }
position: absolute; /* line 38, _css-arrow.sass */
width: 0; blockquote:after {
height: 0; content: "\00a0";
top: 105px; display: block;
left: 450px; position: absolute;
bottom: auto; width: 0;
border-width: 15px; height: 0;
border-style: solid; top: 105px;
border-color: #cccccc transparent transparent transparent; } left: 450px;
bottom: auto;
border-width: 15px;
border-style: solid;
border-color: #cccccc transparent transparent transparent;
}
Binary file added images/search.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions search-input/_search-input.sass
View file
@@ -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

0 comments on commit 60fef80

Please sign in to comment.