-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First pass at adding a decent UI. Prototype ready
Signed-off-by: Kaustav Das Modak <[email protected]>
- Loading branch information
Kaustav Das Modak
committed
Oct 3, 2014
1 parent
3081884
commit 9df9e50
Showing
8 changed files
with
317 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,107 @@ | ||
| body { | ||
| font-family: "Fira Sans", "Open Sans", sans; | ||
| font-family: "Fira Sans", "Open Sans", "Helvetica Neue", sans-serif; | ||
| background-color: #fff; | ||
| overflow: hidden; | ||
| text-rendering: optimizeLegibility; | ||
| } | ||
|
|
||
| .main-section { | ||
| margin-top: 15px; | ||
| min-height: 100vh; | ||
| x-appbar.sticky { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| x-flipbox { | ||
| position: absolute; | ||
| height: calc(100vh - 45px); | ||
| padding: 20px; | ||
| top: 45px; | ||
| left: 0; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| #searchform-inner { | ||
| width: 100%; | ||
| height: 45px; | ||
| position: relative; | ||
| } | ||
|
|
||
| #searchbox-wrapper { | ||
| width: 80%; | ||
| margin: 0; | ||
| padding: 0; | ||
| float: left; | ||
| } | ||
|
|
||
| #searchsubmit-wrapper { | ||
| width: 20%; | ||
| margin: 0; | ||
| padding: 0; | ||
| float: left; | ||
| } | ||
|
|
||
| #searchbox { | ||
| width: 100%; | ||
| height: 45px; | ||
| outline: 0; | ||
| border: 1px solid #999; | ||
| padding: 0; | ||
| margin: 0; | ||
| box-shadow: 0; | ||
| border-radius: 0; | ||
| text-indent: 10px; | ||
| } | ||
|
|
||
| #searchsubmit { | ||
| display: block; | ||
| width: 100%; | ||
| height: 45px; | ||
| line-height: 45px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background-color: #04B309; | ||
| color: #fff; | ||
| outline: 0; | ||
| border: 1px solid #038207; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| #resultsbox { | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .resultitem { | ||
| word-wrap: break-word; | ||
| background-color: #f2f2f2; | ||
| border: 1px solid #ebebeb; | ||
| margin: 0.3em; | ||
| padding: 0.3em; | ||
| } | ||
|
|
||
| .resultitem:focus { | ||
| border-color: #0095DD; | ||
| } | ||
|
|
||
| .resultitem h4 { | ||
| padding: 0; | ||
| margin: 0; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| .wobblebar { | ||
| transition: opacity .25s ease-in-out; | ||
| opacity: 0.9; | ||
| padding-top: 5px; | ||
| animation-iteration-count: infinite; | ||
| } | ||
|
|
||
| .wobblebar.hide { | ||
| opacity: 0; | ||
| animation-iteration-count: 0; | ||
| } | ||
|
|
||
| small { | ||
| color: #707070; | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| @keyframes wobblebar { | ||
| 0% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 3% { | ||
| left: 95%; | ||
| } | ||
|
|
||
| 6% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 9% { | ||
| left: 95%; | ||
| } | ||
|
|
||
| 12% { | ||
| left: 25%; | ||
| } | ||
|
|
||
| 15% { | ||
| left: 75%; | ||
| } | ||
|
|
||
| 18% { | ||
| left: 25%; | ||
| } | ||
|
|
||
| 27% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 30% { | ||
| left: 95%; | ||
| } | ||
|
|
||
| 33% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 36% { | ||
| left: 95%; | ||
| } | ||
|
|
||
| 39% { | ||
| left: 25%; | ||
| } | ||
|
|
||
| 42% { | ||
| left: 75%; | ||
| } | ||
|
|
||
| 45% { | ||
| left: 25%; | ||
| } | ||
|
|
||
| 48% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 51% { | ||
| left: 95%; | ||
| } | ||
|
|
||
| 63% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 66% { | ||
| left: 95%; | ||
| } | ||
|
|
||
| 69% { | ||
| left: 25%; | ||
| } | ||
|
|
||
| 72% { | ||
| left: 75%; | ||
| } | ||
|
|
||
| 75% { | ||
| left: 25%; | ||
| } | ||
|
|
||
| 78% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 81% { | ||
| left: 95%; | ||
| } | ||
|
|
||
| 84% { | ||
| left: 5%; | ||
| } | ||
|
|
||
| 94% { | ||
| left: 75%; | ||
| } | ||
|
|
||
| 97% { | ||
| left: 25%; | ||
| } | ||
| } | ||
|
|
||
| /* Styles for old versions of IE */ | ||
| .wobblebar { | ||
| font-family: sans-serif; | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| /* :not(:required) hides this rule from IE9 and below */ | ||
| .wobblebar:not(:required) { | ||
| background: #999; | ||
| display: inline-block; | ||
| overflow: hidden; | ||
| text-indent: -9999px; | ||
| width: 100%; | ||
| height: 10px; | ||
| position: relative; | ||
| } | ||
| .wobblebar:not(:required)::after { | ||
| animation: wobblebar 15000ms infinite ease; | ||
| background: white; | ||
| border-radius: 5px; | ||
| display: block; | ||
| content: ''; | ||
| position: absolute; | ||
| top: 3.55556px; | ||
| left: 4px; | ||
| width: 21.33333px; | ||
| height: 5px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.