diff options
author | connors <connors@pinterest.com> | 2013-01-14 03:27:18 +0400 |
---|---|---|
committer | connors <connors@pinterest.com> | 2013-01-14 03:27:18 +0400 |
commit | 734d869fa1eecfa9ad4d8d9ca7a3940231932938 (patch) | |
tree | fdabae6d37d569f8ac652174faad92bf659dade6 | |
parent | fd486a64003acfe65355cd1df0bc3a7f408051c3 (diff) |
Adjusting the docs to show the modals demo for mobile devices.
-rw-r--r-- | docs/css/docs.css | 19 | ||||
-rw-r--r-- | docs/index.html | 17 |
2 files changed, 30 insertions, 6 deletions
diff --git a/docs/css/docs.css b/docs/css/docs.css index 8cb6847..b4057d4 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -649,10 +649,21 @@ h6 { } /* Modal example */ -.iphone .iphone-content .modal { position: absolute; } -.iphone .iphone-content .modal .content { margin-top: 44px; } -#myModal.active { background: #cecece; } -#modalsInPhone #iwindow > .button { margin: 10px; } +.component-example .modal { + left: 0; + z-index: 10001; +} +.iphone .iphone-content .modal { + position: absolute; +} +.component-example .modal .content, +.iphone .iphone-content .modal .content { + margin-top: 44px; +} +#modalsInPhone #iwindow > .button { + margin: 10px; +} + /* Slider examples */ .component-example-fullbleed .slider, diff --git a/docs/index.html b/docs/index.html index fd2a413..cc3d0cb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -983,9 +983,22 @@ document <h3 class="component-title">Modals</h3> <div class="component-example"> - + <a href="#myModalexample" class="button">Open modal</a> + <div id="myModalexample" class="modal"> + <header class="bar-title"> + <h1 class="title">Modal</h1> + <a class="button" href="#myModalexample"> + Close + </a> + </header> + + <div class="content content-padded"> + <p>The contents of my modal</p> + </div> + </div> </div> + <pre class="prettyprint"> <a href="#myModal" class="button">Open modal</a> @@ -998,7 +1011,7 @@ document </header> <div class="content content-padded"> - <p>The contents of my modal</p> + <p>The contents of my modal.</p> </div> </div> </pre> |