javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

use classnames not header, main, footer

Browse Source
This commit is contained in:
Adam Bradley
2013-08-28 15:30:48 -05:00
parent 75ff9929ce
commit 84ecd1f77d
4 changed files with 9 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dist/framework.css vendored
View File

@ -233,7 +233,7 @@ a.list-item {
display: block; display: block;
width: 270px; } width: 270px; }
header, main, footer { .bar-header, .content, .bar-footer {
z-index: 100; z-index: 100;
left: 0; left: 0;
right: 0; right: 0;
@ -244,9 +244,9 @@ header, main, footer {
-moz-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0); }
.ion-panel-opened > section > header, .ion-panel-opened .bar-header,
.ion-panel-opened > section > main, .ion-panel-opened .content,
.ion-panel-opened > section > footer { .ion-panel-opened .bar-footer {
-webkit-transform: translate3d(270px, 0, 0); -webkit-transform: translate3d(270px, 0, 0);
-moz-transform: translate3d(270px, 0, 0); -moz-transform: translate3d(270px, 0, 0);
transform: translate3d(270px, 0, 0); } transform: translate3d(270px, 0, 0); }

2
example/panels.html
View File

@ -18,7 +18,7 @@
<h1 class="title">Panels</h1> <h1 class="title">Panels</h1>
</header> </header>
<main class="content-padded has-header"> <main class="content content-padded has-header">
<p><button class="button button-primary" data-toggle-panel="my-other-left-panel">Other Left Side Panel</button></p> <p><button class="button button-primary" data-toggle-panel="my-other-left-panel">Other Left Side Panel</button></p>
<p id="event-log"></p> <p id="event-log"></p>
</main> </main>

57
example/panels.html.orig
View File

@ -1,57 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<title>Panels</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">-->
<link rel="stylesheet" href="../../dist/framework.css">
</head>
<body>
<<<<<<< HEAD
<section data-default-panel="my-left-panel">
=======
<section class="panel-page-container">
<section id="this-panel" data-panel="left-panel" class="panel-content">
Panel!
</section>
>>>>>>> 6a7b2a94d30be5df37cff8f6f754e9e987f11163
<header class="bar bar-header bar-dark">
<button class="button" data-toggle-panel="my-left-panel"></button>
<h1 class="title">Panels</h1>
</header>
<main class="content-padded has-header">
<<<<<<< HEAD
<p><button class="button button-primary" data-toggle-panel="my-other-left-panel">Other Left Side Panel</button></p>
<p id="event-log"></p>
=======
<p>A whole bunch of content</p>
<a class="button button-primary" id="open-panel" data-toggle-panel="left-panel" href="#">Panel</a>
>>>>>>> 6a7b2a94d30be5df37cff8f6f754e9e987f11163
</main>
<footer class="bar bar-footer bar-dark">
<h3 class="title">Panels</h3>
</footer>
</section>
<section data-panel="my-left-panel">
This is my default left side panel!
</section>
<section data-panel="my-other-left-panel">
This is my other left side panel!
</section>
<script src="../../js/framework/framework-panel.js"></script>
</body>
</html>

8
scss/framework/structure/_panel.scss
View File

@ -12,7 +12,7 @@
width: $panelOpenWidth; width: $panelOpenWidth;
} }
header, main, footer { .bar-header, .content, .bar-footer {
z-index: 100; z-index: 100;
left: 0; left: 0;
right: 0; right: 0;
@ -26,9 +26,9 @@ header, main, footer {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.ion-panel-opened > section > header, .ion-panel-opened .bar-header,
.ion-panel-opened > section > main, .ion-panel-opened .content,
.ion-panel-opened > section > footer .ion-panel-opened .bar-footer
{ {
-webkit-transform: translate3d($panelOpenWidth, 0,0 ); -webkit-transform: translate3d($panelOpenWidth, 0,0 );
-moz-transform: translate3d($panelOpenWidth, 0,0 ); -moz-transform: translate3d($panelOpenWidth, 0,0 );