Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Adding markup for demo menu overlay component.
- Loading branch information
Showing
6 changed files
with
186 additions
and
0 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 |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
|
|
||
| /* General styles */ | ||
|
|
||
| @font-face { | ||
| font-family: "Icons"; | ||
| src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), | ||
| url('../fonts/icons.eot'), | ||
| url('../fonts/icons.ttf'); | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Fluid-star"; | ||
| src:url('../fonts/fluid-star.eot?#iefix') format('embedded-opentype'), | ||
| url('../fonts/fluid-star.eot'), | ||
| url('../fonts/fluid-star.ttf'); | ||
| } | ||
|
|
||
| .fl-demoMenu { | ||
| font-family: 'Open Sans', sans-serif; | ||
| color: #fff; | ||
| background-color: rgba(51,51,51,.8); | ||
| } | ||
|
|
||
|
|
||
| .fl-demoMenu h1, | ||
| .fl-demoMenu h2 { | ||
| margin: 0; | ||
|
|
||
| } | ||
|
|
||
| .fl-demoMenu .fl-demoMenu-body { | ||
| margin: 1rem; | ||
| } | ||
|
|
||
| .fl-demoMenu a { | ||
| color: #FFCC00; | ||
| } | ||
|
|
||
| /* Header area with title */ | ||
| .fl-demoMenu-title { | ||
| background-color: #333333; | ||
| font-family: 'Roboto Slab', serif; | ||
| color: #fff; | ||
| padding: 0.5rem; | ||
| } | ||
|
|
||
| .fl-demoMenu-title h1 { | ||
| display: inline-block; | ||
| padding: 0.5rem; | ||
| } | ||
|
|
||
| .fl-demoMenu-title .fl-fluid-star { | ||
| text-decoration: none; | ||
| color: #fff; | ||
| font-size: 1.5rem; | ||
| font-family: "Fluid-star"; | ||
| padding: 0.2rem 0.7rem; | ||
| } | ||
|
|
||
| .fl-demoMenu-title .fl-fluid-star:before{ | ||
| content: "\e600"; | ||
| } | ||
|
|
||
| /* Description of the component */ | ||
| .fl-demoMenu-description { | ||
|
|
||
| } | ||
|
|
||
| /* Instruction text */ | ||
| .fl-demoMenu-instructions { | ||
| border: 0.2rem solid #FFCC00; | ||
| padding: 1rem; | ||
| } | ||
|
|
||
|
|
||
| /* Icon links to code, API, and designs. */ | ||
| .fl-demoMenu-links ul li { | ||
| display: inline-block; | ||
| list-style: none outside none; | ||
| margin: 2rem 0.5rem 2rem 0; | ||
| } | ||
|
|
||
| .fl-demoMenu-links ul li a { | ||
| color: #fff; | ||
| text-decoration: none; | ||
| text-transform:lowercase; | ||
| } | ||
|
|
||
| .fl-demoMenu-links ul li .fl-icon { | ||
| display: inline-block; | ||
| background-color: #fff; | ||
| width: 2rem; | ||
| height: 2rem; | ||
| border-radius: 50rem; | ||
| font-family: icons; | ||
| color: #333333; | ||
| } | ||
|
|
||
| .fl-demoMenu-links ul li .fl-icon:before{ | ||
| position: relative; | ||
| top: 0.35rem; | ||
| left: 0.41rem; | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .fl-icon-api:before{ | ||
| content: "\e602"; | ||
| } | ||
|
|
||
| .fl-icon-github:before { | ||
| content: "\e601"; | ||
| } | ||
|
|
||
| .fl-icon-design:before { | ||
| content: "\e603"; | ||
| } | ||
|
|
||
| .fl-demo-links-feedback a{ | ||
| display:block; | ||
| } | ||
|
|
||
| /* Footer / Close button */ | ||
| .fl-demoMenu-footer { | ||
| margin: 1rem; | ||
| } | ||
|
|
||
| .fl-demoMenu-footer a { | ||
| background-color: #fff; | ||
| border-radius: 0.3rem; | ||
| padding: 0.3rem 1rem; | ||
| color: #333333; | ||
| text-decoration: none; | ||
| text-transform: lowercase; | ||
| display: inline-block; | ||
| margin: 1rem 0; | ||
| } | ||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
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,49 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
| <html lang="en" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>Demo Menu</title> | ||
| <link rel="stylesheet" type="text/css" href="../css/styles.css" /> | ||
|
|
||
| <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css' /> | ||
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css' /> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="fl-demoMenu"> | ||
| <div class="fl-demoMenu-title"> | ||
| <a class="fl-fluid-star" href="#"></a> | ||
| <h1>A fluid project component demo</h1> | ||
| </div> | ||
| <div class="fl-demoMenu-body"> | ||
| <div class="fl-demoMenu-description"> | ||
| A description of the component should appear here. It should say: | ||
| <ul> | ||
| <li>What the component does.</li> | ||
| <li>Why it is interesting / useful.</li> | ||
| </ul> | ||
| </div> | ||
| <div class="fl-demoMenu-instructions"> | ||
| <h2>Instructions</h2> | ||
| <p> | ||
| Do this to do this. | ||
| Do that to do that. | ||
| </p> | ||
| </div> | ||
| <div class="fl-demoMenu-links"> | ||
| <ul> | ||
| <li><a href="#"><span class="fl-icon fl-icon-github"></span> code</a></li> | ||
| <li><a href="#"><span class="fl-icon fl-icon-api"></span> API</a></li> | ||
| <li><a href="#"><span class="fl-icon fl-icon-design"></span> design</a></li> | ||
| </ul> | ||
| <div class="fl-demo-links-feedback"> | ||
| Feedback statement and link | ||
| <a href="#">Link text</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="fl-demoMenu-footer"> | ||
| <a href="#">close</a> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |