From 4ef0dc47d11fcb5cf91f135e66149493f97ccc57 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Tue, 17 Nov 2015 16:28:19 -0600 Subject: [PATCH] refactor(demos): give each page its own sass file Closes #376 --- demos/component-docs/app.scss | 69 +++++-------------- .../buttons/components/styles.scss | 12 ++++ demos/component-docs/buttons/fab/styles.scss | 19 +++++ .../cards/advanced-map/styles.scss | 3 + .../cards/advanced-weather/styles.scss | 12 ++-- demos/component-docs/cards/list/styles.scss | 7 ++ demos/component-docs/lists/avatar/styles.scss | 0 demos/component-docs/lists/basic/styles.scss | 0 .../component-docs/lists/headers/styles.scss | 0 demos/component-docs/lists/icon/styles.scss | 0 demos/component-docs/lists/inset/styles.scss | 0 .../lists/multiline/styles.scss | 0 .../component-docs/lists/no-lines/styles.scss | 0 .../lists/thumbnail/styles.scss | 0 14 files changed, 64 insertions(+), 58 deletions(-) create mode 100644 demos/component-docs/buttons/components/styles.scss create mode 100644 demos/component-docs/buttons/fab/styles.scss create mode 100644 demos/component-docs/cards/list/styles.scss create mode 100644 demos/component-docs/lists/avatar/styles.scss create mode 100644 demos/component-docs/lists/basic/styles.scss create mode 100644 demos/component-docs/lists/headers/styles.scss create mode 100644 demos/component-docs/lists/icon/styles.scss create mode 100644 demos/component-docs/lists/inset/styles.scss create mode 100644 demos/component-docs/lists/multiline/styles.scss create mode 100644 demos/component-docs/lists/no-lines/styles.scss create mode 100644 demos/component-docs/lists/thumbnail/styles.scss diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss index 447709ef8f..ff81c955f8 100644 --- a/demos/component-docs/app.scss +++ b/demos/component-docs/app.scss @@ -11,15 +11,30 @@ $font-path: '../../dist/fonts'; @import "../../ionic/ionic"; @import "action-sheets/basic/styles"; +@import "buttons/fab/styles"; +@import "buttons/components/styles"; @import "cards/background/styles"; +@import "cards/list/styles"; @import "cards/advanced-weather/styles"; @import "cards/advanced-map/styles"; @import "grid/basic/styles"; @import "icons/basic/styles"; +@import "lists/avatar/styles"; +@import "lists/basic/styles"; +@import "lists/headers/styles"; +@import "lists/icon/styles"; +@import "lists/inset/styles"; +@import "lists/multiline/styles"; +@import "lists/no-lines/styles"; +@import "lists/thumbnail/styles"; @import "menus/basic/styles"; @import "slides/basic/styles"; +////////////////////////////////// +// Global Styles +////////////////////////////////// + body, body:hover, body a, body button, body media-switch { cursor: url('http://ionicframework.com/img/finger.png') 8 8, auto; } @@ -52,7 +67,6 @@ section.hidden { display: none !important; } - .components-demo h4 { text-align: center; } @@ -70,63 +84,13 @@ section.hidden { width: 100%; margin-bottom: 2.7em; } -#subtle-footer { - background-color: #fff; - border-image-source: url(footer-wireframe.png); - border-image-repeat: repeat; - border-image-width: 100%; - border-bottom: 0; - border-left: 0; - border-right: 0; - position: absolute; - bottom:0; -} -#demo-fab-bottom { - padding-top: 3px; - z-index: 100; -} -#subtle-footer .toolbar-background { - background-color: #fff; - border-bottom: 0; -} + .demo-card { height: 0; } .demo-card button { font-size: 1.3rem; } -ion-card ion-card-content.buttons-in-components { - background-color: #F4F5F8; -} -ion-card ion-card-content.buttons-in-components img { - width: auto; - height: 44px; - display: block; - margin: 20px auto; -} - -ion-card.buttons-in-components { - margin-bottom: 2em; -} - -ion-card.cards-list-demo ion-card-header { - color: #387df5; -} - -ion-card.cards-list-demo a > icon { - color: #444444; -} - -ion-card .advanced-weather-tabs { - position: absolute; - bottom: 0; - width: 100%; - background: transparent; -} - -ion-card.adv-map p { - font-size: 0.7em !important; -} .ios ion-content.cards-bg { background-color: #f4f4f7; @@ -168,4 +132,3 @@ body.ios img#ios-only { height: auto; z-index: 9999; } - diff --git a/demos/component-docs/buttons/components/styles.scss b/demos/component-docs/buttons/components/styles.scss new file mode 100644 index 0000000000..097a5b1847 --- /dev/null +++ b/demos/component-docs/buttons/components/styles.scss @@ -0,0 +1,12 @@ +ion-card ion-card-content.buttons-in-components { + background-color: #F4F5F8; +} +ion-card ion-card-content.buttons-in-components img { + width: auto; + height: 44px; + display: block; + margin: 20px auto; +} +ion-card.buttons-in-components { + margin-bottom: 2em; +} \ No newline at end of file diff --git a/demos/component-docs/buttons/fab/styles.scss b/demos/component-docs/buttons/fab/styles.scss new file mode 100644 index 0000000000..608dcb9b1e --- /dev/null +++ b/demos/component-docs/buttons/fab/styles.scss @@ -0,0 +1,19 @@ +#subtle-footer { + background-color: #fff; + border-image-source: url(footer-wireframe.png); + border-image-repeat: repeat; + border-image-width: 100%; + border-bottom: 0; + border-left: 0; + border-right: 0; + position: absolute; + bottom:0; +} +#demo-fab-bottom { + padding-top: 3px; + z-index: 100; +} +#subtle-footer .toolbar-background { + background-color: #fff; + border-bottom: 0; +} \ No newline at end of file diff --git a/demos/component-docs/cards/advanced-map/styles.scss b/demos/component-docs/cards/advanced-map/styles.scss index 1fb1feb59d..76fddf0a39 100644 --- a/demos/component-docs/cards/advanced-map/styles.scss +++ b/demos/component-docs/cards/advanced-map/styles.scss @@ -1,3 +1,6 @@ +ion-card.adv-map p { + font-size: 0.7em !important; +} p.time-ago { color: #bbbbbb !important; margin-left: 4px !important; diff --git a/demos/component-docs/cards/advanced-weather/styles.scss b/demos/component-docs/cards/advanced-weather/styles.scss index 59f4f1e2dc..9d0ff2b3a6 100644 --- a/demos/component-docs/cards/advanced-weather/styles.scss +++ b/demos/component-docs/cards/advanced-weather/styles.scss @@ -72,11 +72,6 @@ body.ios ion-card p.advanced-background-title-large span { line-height: 1; display: inline-block; } - - - - - ion-card .advanced-weather-tabs tabbar { background: transparent; @@ -124,4 +119,11 @@ body.ios ion-card p.advanced-background-title-large span { color: #fff; } +} + +ion-card .advanced-weather-tabs { + position: absolute; + bottom: 0; + width: 100%; + background: transparent; } \ No newline at end of file diff --git a/demos/component-docs/cards/list/styles.scss b/demos/component-docs/cards/list/styles.scss new file mode 100644 index 0000000000..2a820aa04e --- /dev/null +++ b/demos/component-docs/cards/list/styles.scss @@ -0,0 +1,7 @@ +ion-card.cards-list-demo ion-card-header { + color: #387df5; +} + +ion-card.cards-list-demo a > icon { + color: #444444; +} \ No newline at end of file diff --git a/demos/component-docs/lists/avatar/styles.scss b/demos/component-docs/lists/avatar/styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/lists/basic/styles.scss b/demos/component-docs/lists/basic/styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/lists/headers/styles.scss b/demos/component-docs/lists/headers/styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/lists/icon/styles.scss b/demos/component-docs/lists/icon/styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/lists/inset/styles.scss b/demos/component-docs/lists/inset/styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/lists/multiline/styles.scss b/demos/component-docs/lists/multiline/styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/lists/no-lines/styles.scss b/demos/component-docs/lists/no-lines/styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/component-docs/lists/thumbnail/styles.scss b/demos/component-docs/lists/thumbnail/styles.scss new file mode 100644 index 0000000000..e69de29bb2