javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added panels

Browse Source
This commit is contained in:
Max Lynch
2013-08-31 22:35:47 -05:00
parent a2bf7f014b
commit b8213934a4
10 changed files with 345 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
dist/ionic.css vendored
View File

@@ -1075,9 +1075,137 @@ a.list-item {
transition: transform 200ms ease; }
.panel {
margin: 10px;
background-color: #fff; }
margin-bottom: 20px;
background-color: white;
border: 1px solid transparent;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
.panel-body {
padding: 15px;
*zoom: 1; }
.panel-body:before, .panel-body:after {
display: table;
content: "";
line-height: 0; }
.panel-body:after {
clear: both; }
.panel > .list-group {
margin-bottom: 0; }
.panel > .list-group .list-group-item {
border-width: 1px 0; }
.panel > .list-group .list-group-item:first-child {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0; }
.panel > .list-group .list-group-item:last-child {
border-bottom: 0; }
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0; }
.panel {
/*
> .panel-body + .table {
border-top: 1px solid @table-border-color;
}
*/ }
.panel > .table {
margin-bottom: 0; }
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topright: 1px;
border-top-right-radius: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topleft: 1px;
border-top-left-radius: 1px; }
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px; }
.panel-title > a {
color: inherit; }
.panel-footer {
padding: 10px 15px;
background-color: whitesmoke;
border-top: 1px solid #dddddd;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomright: 1px;
border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-left-radius: 1px; }
.panel-group .panel {
margin-bottom: 0;
border-radius: 2px;
overflow: hidden; }
.panel-group .panel + .panel {
margin-top: 5px; }
.panel-group .panel-heading {
border-bottom: 0; }
.panel-group .panel-heading + .panel-collapse .panel-body {
border-top: 1px solid #dddddd; }
.panel-group .panel-footer {
border-top: 0; }
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd; }
.panel-default {
border-color: #dddddd; }
.panel-default > .panel-heading {
color: #333333;
background-color: whitesmoke;
border-color: #dddddd; }
.panel-default > .panel-heading + .panel-collapse .panel-body {
border-top-color: #dddddd; }
.panel-default > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #dddddd; }
.panel-primary {
border-color: #428bca; }
.panel-primary > .panel-heading {
color: white;
background-color: #428bca;
border-color: #428bca; }
.panel-primary > .panel-heading + .panel-collapse .panel-body {
border-top-color: #428bca; }
.panel-primary > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #428bca; }
.panel-success {
border-color: #5cb85c; }
.panel-success > .panel-heading {
color: white;
background-color: #5cb85c;
border-color: #5cb85c; }
.panel-success > .panel-heading + .panel-collapse .panel-body {
border-top-color: #5cb85c; }
.panel-success > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #5cb85c; }
/*
.panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
*/
.ptr-capable {
-webkit-user-drag: element; }
@@ -1374,8 +1502,7 @@ a.list-item {
color: #333333; }
.ion-panel {
background: #eeeeee;
width: 270px; }
background: #eeeeee; }
.ion-panel-left .ion-panel {
border-right: 1px solid #bbbbbb; }

8
example/menu_controller.html
View File

@@ -27,9 +27,13 @@
</header>
<main class="content content-padded has-header">
<div class="panel">
<h2 class="title">What</h2>
<div class="panel panel-default">
<div class="panel-heading"><h2 class="title">What</h2></div>
<div class="panel-body">
Is this
</div>
</div>
</main>
<footer class="bar bar-footer bar-dark">

2
scss/ionic-structure.scss
View File

@@ -19,7 +19,7 @@
"ionic/structure/img",
"ionic/structure/listview",
"ionic/structure/menu",
"ionic/structure/panel",
"ionic/structure/panels",
"ionic/structure/pull-to-refresh",
"ionic/structure/table",
"ionic/structure/tabs";

18
scss/ionic/_mixins.scss
View File

@@ -732,3 +732,21 @@
@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
}
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
border-color: $border;
& > .panel-heading {
color: $heading-text-color;
background-color: $heading-bg-color;
border-color: $heading-border;
+ .panel-collapse .panel-body {
border-top-color: $border;
}
}
& > .panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: $border;
}
}
}

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

@@ -6,8 +6,14 @@ $fontSizeLarge: ceil($baseFontSize * 1.25);
$baseLineHeight: 1.428571429; // 20/14
$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
$lineHeightComputed: $baseLineHeightComputed;
$baseBorderRadius: 2px !default;
$brandPrimary: #428bca;
$brandSuccess: #5cb85c;
$brandWarning: #f0ad4e;
$brandDanger: #d9534f;
$brandInfo: #5bc0de;
// Grays
// -------------------------
@@ -76,9 +82,29 @@ $listItemBorder: 1px solid #ddd;
// Panels
$panelBg: #fff;
$panelBorderRadius: 2px;
$panelInnerBorder: #ddd;
$panelFooterBg: #f5f5f5;
$panelDefaultText: $grayDark;
$panelDefaultBorder: #ddd;
$panelDefaultHeadingBg: #f5f5f5;
$panelPrimaryText: #fff;
$panelPrimaryBorder: $brandPrimary;
$panelPrimaryHeadingBg: $brandPrimary;
$panelSuccessText: #fff;
$panelSuccessBorder: $brandSuccess;
$panelSuccessHeadingBg: $brandSuccess;
// Menus
// -------------------------
$panelWidth: 270px;
$panelAnimationSpeed: 200ms;
$menuWidth: 270px;
$menuAnimationSpeed: 200ms;
$menuBackgroundColor: #eee;
$menuInsetBorderColor: #bbb;
// GRID

4
scss/ionic/_theme-variables.scss
View File

@@ -121,5 +121,5 @@ $infoBorder: darken(adjust-hue($infoBackground, -10), 7%);
// Panels
// -------------------------------
$panelBackgroundColor: #eee;
$panelInsetBorderColor: #bbb;
$menuBackgroundColor: #eee;
$menuInsetBorderColor: #bbb;

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

@@ -6,7 +6,7 @@
display: none;
min-height: 100%;
max-height: 100%;
width: $panelWidth;
width: $menuWidth;
position: absolute;
top: 0;
bottom: 0;
@@ -22,7 +22,7 @@
.menu-right { right: 0; }
.menu-animated {
-webkit-transition: -webkit-transform $panelAnimationSpeed ease;
-moz-transition: -moz-transform $panelAnimationSpeed ease;
transition: transform $panelAnimationSpeed ease;
-webkit-transition: -webkit-transform $menuAnimationSpeed ease;
-moz-transition: -moz-transform $menuAnimationSpeed ease;
transition: transform $menuAnimationSpeed ease;
}

4
scss/ionic/structure/_panel.scss
View File

@@ -1,4 +0,0 @@
.panel {
margin: $contentPadding;
background-color: #fff;
}

152
scss/ionic/structure/_panels.scss Normal file
View File

@@ -0,0 +1,152 @@
//
// Panels
// --------------------------------------------------
// Base class
.panel {
margin-bottom: $lineHeightComputed;
background-color: $panelBg;
border: 1px solid transparent;
border-radius: $panelBorderRadius;
@include box-shadow(#{0 1px 1px rgba(0,0,0,.05)});
}
// Panel contents
.panel-body {
padding: 15px;
@include clearfix();
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
> .list-group {
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
@include border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
border-top-width: 0;
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table {
margin-bottom: 0;
}
/*
> .panel-body + .table {
border-top: 1px solid @table-border-color;
}
*/
}
// Optional heading
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
@include border-top-radius($panelBorderRadius - 1);
}
// Within heading, strip any `h*` tag of it's default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: ceil(($baseFontSize * 1.125));
> a {
color: inherit;
}
}
// Optional footer (stays gray in every modifier class)
.panel-footer {
padding: 10px 15px;
background-color: $panelFooterBg;
border-top: 1px solid $panelInnerBorder;
@include border-bottom-radius($panelBorderRadius - 1);
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.
.panel-group {
// Tighten up margin so it's only between panels
.panel {
margin-bottom: 0;
border-radius: $panelBorderRadius;
overflow: hidden; // crop contents when collapsed
+ .panel {
margin-top: 5px;
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid $panelInnerBorder;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid $panelInnerBorder;
}
}
// New subcomponent for wrapping collapsable content for proper animations
.panel-collapse {
}
}
// Contextual variations
.panel-default {
@include panel-variant($panelDefaultBorder, $panelDefaultText, $panelDefaultHeadingBg, $panelDefaultBorder);
}
.panel-primary {
@include panel-variant($panelPrimaryBorder, $panelPrimaryText, $panelPrimaryHeadingBg, $panelPrimaryBorder);
}
.panel-success {
@include panel-variant($panelSuccessBorder, $panelSuccessText, $panelSuccessHeadingBg, $panelSuccessBorder);
}
/*
.panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
*/

7
scss/ionic/theme/_menu.scss
View File

@@ -1,13 +1,12 @@
.ion-panel {
background: $panelBackgroundColor;
width: $panelWidth;
background: $menuBackgroundColor;
}
.ion-panel-left .ion-panel {
border-right: 1px solid $panelInsetBorderColor;
border-right: 1px solid $menuInsetBorderColor;
}
.ion-panel-right .ion-panel {
border-left: 1px solid $panelInsetBorderColor;
border-left: 1px solid $menuInsetBorderColor;
}