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

Added Bootstrap 3 style panels

Browse Source
This commit is contained in:
Max Lynch
2013-09-01 10:25:47 -05:00
parent 344f69cc5f
commit 69fb09316a
7 changed files with 142 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
dist/ionic.css vendored
View File

@ -1052,7 +1052,6 @@ a.list-item {
line-height: 1.3; } line-height: 1.3; }
.menu { .menu {
display: none;
min-height: 100%; min-height: 100%;
max-height: 100%; max-height: 100%;
width: 270px; width: 270px;
@ -1195,17 +1194,39 @@ a.list-item {
.panel-success > .panel-footer + .panel-collapse .panel-body { .panel-success > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #5cb85c; } border-bottom-color: #5cb85c; }
/*
.panel-warning { .panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); border-color: #f0ad4e; }
} .panel-warning > .panel-heading {
color: white;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.panel-warning > .panel-heading + .panel-collapse .panel-body {
border-top-color: #f0ad4e; }
.panel-warning > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #f0ad4e; }
.panel-danger { .panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); border-color: #d9534f; }
} .panel-danger > .panel-heading {
color: white;
background-color: #d9534f;
border-color: #d9534f; }
.panel-danger > .panel-heading + .panel-collapse .panel-body {
border-top-color: #d9534f; }
.panel-danger > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #d9534f; }
.panel-info { .panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); border-color: #5bc0de; }
} .panel-info > .panel-heading {
*/ color: white;
background-color: #5bc0de;
border-color: #5bc0de; }
.panel-info > .panel-heading + .panel-collapse .panel-body {
border-top-color: #5bc0de; }
.panel-info > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #5bc0de; }
.ptr-capable { .ptr-capable {
-webkit-user-drag: element; } -webkit-user-drag: element; }

16
example/menu_controller.html
View File

@ -36,6 +36,22 @@
</div> </div>
</div> </div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Is this
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Is this
</div>
</div>
</main> </main>
<footer class="bar bar-footer bar-dark"> <footer class="bar bar-footer bar-dark">

77
example/panels.html Normal file
View File

@ -0,0 +1,77 @@
<html>
<head>
<meta charset="utf-8">
<title>Panels</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../dist/ionic.css">
</head>
<body>
<section id="page" class="full-section menu-animated">
<header class="bar bar-header bar-dark">
<div class="buttons">
<a id="left-button" class="button button-dark" href="#">
<i class="icon-reorder"></i>
</a>
</div>
<h1 class="title">Chats</h1>
<div class="buttons">
<button id="right-button" class="button button-dark">
<i class="icon-cog"></i>
</button>
</div>
</header>
<main class="content content-padded has-header">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Is this
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Is this
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Is this
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Is this
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Is this
</div>
</div>
</main>
<footer class="bar bar-footer bar-dark">
<h3 class="title"></h3>
</footer>
</section>
</body>
</html>

8
js/controllers/ionic-leftrightmenu.js
View File

@ -103,13 +103,13 @@
if(amount >= 0) { if(amount >= 0) {
this._leftShowing = true; this._leftShowing = true;
this._rightShowing = false; this._rightShowing = false;
this.right.style.display = 'none'; this.right.style.zIndex = -1;
this.left.style.display = 'block'; this.left.style.zIndex = 0;
} else { } else {
this._rightShowing = true; this._rightShowing = true;
this._leftShowing = false; this._leftShowing = false;
this.right.style.display = 'block'; this.right.style.zIndex = 0;
this.left.style.display = 'none'; this.left.style.zIndex = -1;
} }
}, },
snapToRest: function(e) { snapToRest: function(e) {

12
scss/ionic/_structure-variables.scss
View File

@ -98,6 +98,18 @@ $panelSuccessText: #fff;
$panelSuccessBorder: $brandSuccess; $panelSuccessBorder: $brandSuccess;
$panelSuccessHeadingBg: $brandSuccess; $panelSuccessHeadingBg: $brandSuccess;
$panelWarningText: #fff;
$panelWarningBorder: $brandWarning;
$panelWarningHeadingBg: $brandWarning;
$panelDangerText: #fff;
$panelDangerBorder: $brandDanger;
$panelDangerHeadingBg: $brandDanger;
$panelInfoText: #fff;
$panelInfoBorder: $brandInfo;
$panelInfoHeadingBg: $brandInfo;
// Menus // Menus
// ------------------------- // -------------------------

1
scss/ionic/structure/_menu.scss
View File

@ -3,7 +3,6 @@
// Author: Adam Bradley <adam@drifty.com> // Author: Adam Bradley <adam@drifty.com>
.menu { .menu {
display: none;
min-height: 100%; min-height: 100%;
max-height: 100%; max-height: 100%;
width: $menuWidth; width: $menuWidth;

8
scss/ionic/structure/_panels.scss
View File

@ -139,14 +139,12 @@
.panel-success { .panel-success {
@include panel-variant($panelSuccessBorder, $panelSuccessText, $panelSuccessHeadingBg, $panelSuccessBorder); @include panel-variant($panelSuccessBorder, $panelSuccessText, $panelSuccessHeadingBg, $panelSuccessBorder);
} }
/*
.panel-warning { .panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); @include panel-variant($panelWarningBorder, $panelWarningText, $panelWarningHeadingBg, $panelWarningBorder);
} }
.panel-danger { .panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); @include panel-variant($panelDangerBorder, $panelDangerText, $panelDangerHeadingBg, $panelDangerBorder);
} }
.panel-info { .panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); @include panel-variant($panelInfoBorder, $panelInfoText, $panelInfoHeadingBg, $panelInfoBorder);
} }
*/