From 6749883b2151adfa106cc19d847eefb5e9111677 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 9 Sep 2013 11:50:22 -0500 Subject: [PATCH] changed panels to cards --- example/css/ionic-structure.css | 244 ------------------------------ example/css/ionic.css | 244 ------------------------------ scss/ionic-structure.scss | 2 +- scss/ionic-theme.scss | 1 + scss/ionic/structure/_card.scss | 0 scss/ionic/structure/_panels.scss | 150 ------------------ scss/ionic/theme/_card.scss | 0 7 files changed, 2 insertions(+), 639 deletions(-) create mode 100644 scss/ionic/structure/_card.scss delete mode 100644 scss/ionic/structure/_panels.scss create mode 100644 scss/ionic/theme/_card.scss diff --git a/example/css/ionic-structure.css b/example/css/ionic-structure.css index 3c590350df..7dfa3c614d 100644 --- a/example/css/ionic-structure.css +++ b/example/css/ionic-structure.css @@ -1472,250 +1472,6 @@ a.list-item:hover, a.list-item:focus { transition: transform 200ms ease; } -/* line 7, ../../scss/ionic/structure/_panels.scss */ -.panel { - 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); -} - -/* line 16, ../../scss/ionic/structure/_panels.scss */ -.panel-body { - padding: 15px; - *zoom: 1; -} -/* line 41, ../../scss/ionic/_mixins.scss */ -.panel-body:before, .panel-body:after { - display: table; - content: ""; - line-height: 0; -} -/* line 48, ../../scss/ionic/_mixins.scss */ -.panel-body:after { - clear: both; -} - -/* line 28, ../../scss/ionic/structure/_panels.scss */ -.panel > .list-group { - margin-bottom: 0; -} -/* line 31, ../../scss/ionic/structure/_panels.scss */ -.panel > .list-group .list-group-item { - border-width: 1px 0; -} -/* line 35, ../../scss/ionic/structure/_panels.scss */ -.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; -} -/* line 39, ../../scss/ionic/structure/_panels.scss */ -.panel > .list-group .list-group-item:last-child { - border-bottom: 0; -} - -/* line 47, ../../scss/ionic/structure/_panels.scss */ -.panel-heading + .list-group .list-group-item:first-child { - border-top-width: 0; -} - -/* line 58, ../../scss/ionic/structure/_panels.scss */ -.panel { - /* - > .panel-body + .table { - border-top: 1px solid @table-border-color; - } - */ -} -/* line 59, ../../scss/ionic/structure/_panels.scss */ -.panel > .table { - margin-bottom: 0; -} - -/* line 71, ../../scss/ionic/structure/_panels.scss */ -.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; -} - -/* line 78, ../../scss/ionic/structure/_panels.scss */ -.panel-title { - margin-top: 0; - margin-bottom: 0; - font-size: 16px; -} -/* line 82, ../../scss/ionic/structure/_panels.scss */ -.panel-title > a { - color: inherit; -} - -/* line 88, ../../scss/ionic/structure/_panels.scss */ -.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; -} - -/* line 103, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel { - margin-bottom: 0; - border-radius: 2px; - overflow: hidden; -} -/* line 107, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel + .panel { - margin-top: 5px; -} -/* line 112, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-heading { - border-bottom: 0; -} -/* line 114, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-heading + .panel-collapse .panel-body { - border-top: 1px solid #dddddd; -} -/* line 118, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-footer { - border-top: 0; -} -/* line 120, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-footer + .panel-collapse .panel-body { - border-bottom: 1px solid #dddddd; -} - -/* line 133, ../../scss/ionic/structure/_panels.scss */ -.panel-default { - border-color: #dddddd; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-default > .panel-heading { - color: #333333; - background-color: whitesmoke; - border-color: #dddddd; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-default > .panel-heading + .panel-collapse .panel-body { - border-top-color: #dddddd; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-default > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #dddddd; -} - -/* line 136, ../../scss/ionic/structure/_panels.scss */ -.panel-primary { - border-color: #428bca; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-primary > .panel-heading { - color: white; - background-color: #428bca; - border-color: #428bca; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-primary > .panel-heading + .panel-collapse .panel-body { - border-top-color: #428bca; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-primary > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #428bca; -} - -/* line 139, ../../scss/ionic/structure/_panels.scss */ -.panel-success { - border-color: #5cb85c; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-success > .panel-heading { - color: white; - background-color: #5cb85c; - border-color: #5cb85c; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-success > .panel-heading + .panel-collapse .panel-body { - border-top-color: #5cb85c; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-success > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #5cb85c; -} - -/* line 142, ../../scss/ionic/structure/_panels.scss */ -.panel-warning { - border-color: #f0ad4e; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-warning > .panel-heading { - color: white; - background-color: #f0ad4e; - border-color: #f0ad4e; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-warning > .panel-heading + .panel-collapse .panel-body { - border-top-color: #f0ad4e; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-warning > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #f0ad4e; -} - -/* line 145, ../../scss/ionic/structure/_panels.scss */ -.panel-danger { - border-color: #d9534f; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-danger > .panel-heading { - color: white; - background-color: #d9534f; - border-color: #d9534f; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-danger > .panel-heading + .panel-collapse .panel-body { - border-top-color: #d9534f; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-danger > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #d9534f; -} - -/* line 148, ../../scss/ionic/structure/_panels.scss */ -.panel-info { - border-color: #5bc0de; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-info > .panel-heading { - color: white; - background-color: #5bc0de; - border-color: #5bc0de; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-info > .panel-heading + .panel-collapse .panel-body { - border-top-color: #5bc0de; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-info > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #5bc0de; -} - /* line 2, ../../scss/ionic/structure/_pull-to-refresh.scss */ .ptr-capable { -webkit-user-drag: element; diff --git a/example/css/ionic.css b/example/css/ionic.css index 1a6ea78af6..12f17932cf 100644 --- a/example/css/ionic.css +++ b/example/css/ionic.css @@ -1472,250 +1472,6 @@ a.list-item:hover, a.list-item:focus { transition: transform 200ms ease; } -/* line 7, ../../scss/ionic/structure/_panels.scss */ -.panel { - 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); -} - -/* line 16, ../../scss/ionic/structure/_panels.scss */ -.panel-body { - padding: 15px; - *zoom: 1; -} -/* line 41, ../../scss/ionic/_mixins.scss */ -.panel-body:before, .panel-body:after { - display: table; - content: ""; - line-height: 0; -} -/* line 48, ../../scss/ionic/_mixins.scss */ -.panel-body:after { - clear: both; -} - -/* line 28, ../../scss/ionic/structure/_panels.scss */ -.panel > .list-group { - margin-bottom: 0; -} -/* line 31, ../../scss/ionic/structure/_panels.scss */ -.panel > .list-group .list-group-item { - border-width: 1px 0; -} -/* line 35, ../../scss/ionic/structure/_panels.scss */ -.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; -} -/* line 39, ../../scss/ionic/structure/_panels.scss */ -.panel > .list-group .list-group-item:last-child { - border-bottom: 0; -} - -/* line 47, ../../scss/ionic/structure/_panels.scss */ -.panel-heading + .list-group .list-group-item:first-child { - border-top-width: 0; -} - -/* line 58, ../../scss/ionic/structure/_panels.scss */ -.panel { - /* - > .panel-body + .table { - border-top: 1px solid @table-border-color; - } - */ -} -/* line 59, ../../scss/ionic/structure/_panels.scss */ -.panel > .table { - margin-bottom: 0; -} - -/* line 71, ../../scss/ionic/structure/_panels.scss */ -.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; -} - -/* line 78, ../../scss/ionic/structure/_panels.scss */ -.panel-title { - margin-top: 0; - margin-bottom: 0; - font-size: 16px; -} -/* line 82, ../../scss/ionic/structure/_panels.scss */ -.panel-title > a { - color: inherit; -} - -/* line 88, ../../scss/ionic/structure/_panels.scss */ -.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; -} - -/* line 103, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel { - margin-bottom: 0; - border-radius: 2px; - overflow: hidden; -} -/* line 107, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel + .panel { - margin-top: 5px; -} -/* line 112, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-heading { - border-bottom: 0; -} -/* line 114, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-heading + .panel-collapse .panel-body { - border-top: 1px solid #dddddd; -} -/* line 118, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-footer { - border-top: 0; -} -/* line 120, ../../scss/ionic/structure/_panels.scss */ -.panel-group .panel-footer + .panel-collapse .panel-body { - border-bottom: 1px solid #dddddd; -} - -/* line 133, ../../scss/ionic/structure/_panels.scss */ -.panel-default { - border-color: #dddddd; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-default > .panel-heading { - color: #333333; - background-color: whitesmoke; - border-color: #dddddd; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-default > .panel-heading + .panel-collapse .panel-body { - border-top-color: #dddddd; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-default > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #dddddd; -} - -/* line 136, ../../scss/ionic/structure/_panels.scss */ -.panel-primary { - border-color: #428bca; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-primary > .panel-heading { - color: white; - background-color: #428bca; - border-color: #428bca; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-primary > .panel-heading + .panel-collapse .panel-body { - border-top-color: #428bca; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-primary > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #428bca; -} - -/* line 139, ../../scss/ionic/structure/_panels.scss */ -.panel-success { - border-color: #5cb85c; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-success > .panel-heading { - color: white; - background-color: #5cb85c; - border-color: #5cb85c; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-success > .panel-heading + .panel-collapse .panel-body { - border-top-color: #5cb85c; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-success > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #5cb85c; -} - -/* line 142, ../../scss/ionic/structure/_panels.scss */ -.panel-warning { - border-color: #f0ad4e; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-warning > .panel-heading { - color: white; - background-color: #f0ad4e; - border-color: #f0ad4e; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-warning > .panel-heading + .panel-collapse .panel-body { - border-top-color: #f0ad4e; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-warning > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #f0ad4e; -} - -/* line 145, ../../scss/ionic/structure/_panels.scss */ -.panel-danger { - border-color: #d9534f; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-danger > .panel-heading { - color: white; - background-color: #d9534f; - border-color: #d9534f; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-danger > .panel-heading + .panel-collapse .panel-body { - border-top-color: #d9534f; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-danger > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #d9534f; -} - -/* line 148, ../../scss/ionic/structure/_panels.scss */ -.panel-info { - border-color: #5bc0de; -} -/* line 745, ../../scss/ionic/_mixins.scss */ -.panel-info > .panel-heading { - color: white; - background-color: #5bc0de; - border-color: #5bc0de; -} -/* line 749, ../../scss/ionic/_mixins.scss */ -.panel-info > .panel-heading + .panel-collapse .panel-body { - border-top-color: #5bc0de; -} -/* line 754, ../../scss/ionic/_mixins.scss */ -.panel-info > .panel-footer + .panel-collapse .panel-body { - border-bottom-color: #5bc0de; -} - /* line 2, ../../scss/ionic/structure/_pull-to-refresh.scss */ .ptr-capable { -webkit-user-drag: element; diff --git a/scss/ionic-structure.scss b/scss/ionic-structure.scss index 65bf9dd272..b0917f397b 100755 --- a/scss/ionic-structure.scss +++ b/scss/ionic-structure.scss @@ -13,13 +13,13 @@ "ionic/structure/bar", "ionic/structure/button", "ionic/structure/button-group", + "ionic/structure/card", "ionic/structure/form", "ionic/structure/grid", "ionic/structure/icon", "ionic/structure/img", "ionic/structure/listview", "ionic/structure/menu", - "ionic/structure/panels", "ionic/structure/pull-to-refresh", "ionic/structure/table", "ionic/structure/tabs"; diff --git a/scss/ionic-theme.scss b/scss/ionic-theme.scss index d131d62258..b052d375c5 100755 --- a/scss/ionic-theme.scss +++ b/scss/ionic-theme.scss @@ -12,6 +12,7 @@ "ionic/theme/alerts", "ionic/theme/bar", "ionic/theme/button", + "ionic/theme/card", "ionic/theme/icon", "ionic/theme/form", "ionic/theme/listview", diff --git a/scss/ionic/structure/_card.scss b/scss/ionic/structure/_card.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/scss/ionic/structure/_panels.scss b/scss/ionic/structure/_panels.scss deleted file mode 100644 index 68d35e062b..0000000000 --- a/scss/ionic/structure/_panels.scss +++ /dev/null @@ -1,150 +0,0 @@ -// -// 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 { - @include panel-variant($panelWarningBorder, $panelWarningText, $panelWarningHeadingBg, $panelWarningBorder); -} -.panel-danger { - @include panel-variant($panelDangerBorder, $panelDangerText, $panelDangerHeadingBg, $panelDangerBorder); -} -.panel-info { - @include panel-variant($panelInfoBorder, $panelInfoText, $panelInfoHeadingBg, $panelInfoBorder); -} diff --git a/scss/ionic/theme/_card.scss b/scss/ionic/theme/_card.scss new file mode 100644 index 0000000000..e69de29bb2