From 10992ee53c9a87cf02fac59f765b13f49dc91314 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Thu, 5 Nov 2015 14:10:02 -0600 Subject: [PATCH] refactor(demos): card and icon styles --- demos/component-docs/app.scss | 135 +----------------- .../cards/advanced-map/styles.scss | 25 ++++ .../cards/advanced-weather/styles.scss | 127 ++++++++++++++++ .../cards/advanced-weather/template.html | 2 +- .../cards/background/styles.scss | 54 +++++++ demos/component-docs/icons/basic/styles.scss | 4 + .../component-docs/icons/basic/template.html | 2 +- .../slides/{ => basic}/styles.scss | 0 8 files changed, 217 insertions(+), 132 deletions(-) create mode 100644 demos/component-docs/cards/advanced-map/styles.scss create mode 100644 demos/component-docs/cards/advanced-weather/styles.scss create mode 100644 demos/component-docs/cards/background/styles.scss create mode 100644 demos/component-docs/icons/basic/styles.scss rename demos/component-docs/slides/{ => basic}/styles.scss (100%) diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss index e40ac2bac8..08282644e6 100644 --- a/demos/component-docs/app.scss +++ b/demos/component-docs/app.scss @@ -10,7 +10,11 @@ $colors: ( $font-path: '../../dist/fonts'; @import "../../ionic/ionic"; -@import "slides/styles"; +@import "cards/background/styles"; +@import "cards/advanced-weather/styles"; +@import "cards/advanced-map/styles"; +@import "icons/basic/styles"; +@import "slides/basic/styles"; body, body:hover, body a, body button, body media-switch { @@ -59,17 +63,6 @@ section.hidden { height: 100%; } -.components-icons { - font-size: 2em; - text-align: center; -} - - - - - - - .md .ion-md-share { color: #ED4248; } @@ -140,52 +133,6 @@ ion-card.cards-list-demo a > icon { color: #444444; } -.advanced-background { - position: relative; - text-align: center !important; -} - -ion-card p.advanced-background-title { - position: absolute; - top: 25%; - font-size: 2.0em; - width: 100%; - font-weight: bold; - color: #fff !important; -} - -ion-card p.advanced-background-title-large { - top: 29%; - font-weight: normal; - font-size: 4.4em; - color: #fff !important; -} -ion-card p.advanced-background-title-large span { - vertical-align: top; - padding-top: 5px; - font-size: 72px; - height: 74px; - line-height: 1; - display: inline-block; -} -body.ios ion-card p.advanced-background-title-large span { - font-weight: 300; -} - -ion-card ion-item.advanced-trans.item { - position: absolute; - top: 0; - width: 100%; - padding: 12px 20px !important; - background: transparent; -} -ion-card ion-item.advanced-trans.item p { - font-size: 12px; - letter-spacing: 1.7px; - font-weight: 500; - opacity: 0.7; -} - ion-card .advanced-weather-tabs { position: absolute; bottom: 0; @@ -193,60 +140,6 @@ ion-card .advanced-weather-tabs { background: transparent; } -ion-card .advanced-weather-tabs tabbar { - background: transparent; - border-top: none; -} -body.ios ion-card .advanced-weather-tabs tabbar { - height: 88px; -} -body.md ion-card .advanced-weather-tabs tabbar { - height: 100px; -} -ion-card .advanced-weather-tabs tabbar a { - height: 100%; - border-top: 2px solid transparent !important; - border-bottom: 0px !important; -} -ion-card .advanced-weather-tabs tabbar a icon.tab-button-icon { - color: #fff; - font-size: 2.8em; -} -ion-card .advanced-weather-tabs tabbar a span.tab-button-text { - color: #fff; - font-size: 13px; -} -body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text { - text-transform: uppercase; -} -body.md .cards-bg tab-highlight { - background-color: #fff !important; - top: 0; -} -.cards-weather md-ripple { - background: rgba(255,255,255, 0.15); -} - -ion-content ion-card ion-item.advanced-trans p { - color: #fff; -} - -ion-card p.advanced-background-subtitle { - font-size: 1.0em; - position: absolute; - top: 48%; - width: 100%; - color: #fff !important; -} - -ion-card .icon-avatar { - margin: 10px 8px; - min-width: 2.4rem !important; - color: #444444; - font-size: 1.8em; - text-align: center; -} - ion-card.adv-map p { font-size: 0.7em !important; } @@ -303,22 +196,4 @@ body.ios img#ios-only { .item-subtle:before { padding-right: 5px; } -p.time-ago { - color: #bbbbbb !important; - margin-left: 4px !important; - margin-right: 0px !important; -} - - -button[fab].fab-map { - top: 190px; - z-index: 50; -} -body.ios button[fab].fab-map { - width: 50px; - height: 50px; -} -body.md button[fab].fab-map { - top: 220px; -} diff --git a/demos/component-docs/cards/advanced-map/styles.scss b/demos/component-docs/cards/advanced-map/styles.scss new file mode 100644 index 0000000000..4fee725340 --- /dev/null +++ b/demos/component-docs/cards/advanced-map/styles.scss @@ -0,0 +1,25 @@ +p.time-ago { + color: #bbbbbb !important; + margin-left: 4px !important; + margin-right: 0px !important; + +} +button[fab].fab-map { + top: 190px; + z-index: 50; +} +body.ios button[fab].fab-map { + width: 50px; + height: 50px; +} +body.md button[fab].fab-map { + top: 220px; +} + +ion-card .icon-avatar { + margin: 10px 8px; + min-width: 2.4rem !important; + color: #444444; + font-size: 1.8em; + text-align: center; +} \ No newline at end of file diff --git a/demos/component-docs/cards/advanced-weather/styles.scss b/demos/component-docs/cards/advanced-weather/styles.scss new file mode 100644 index 0000000000..59f4f1e2dc --- /dev/null +++ b/demos/component-docs/cards/advanced-weather/styles.scss @@ -0,0 +1,127 @@ +body.ios ion-card .advanced-weather-tabs tabbar { + height: 88px; +} +body.md ion-card .advanced-weather-tabs tabbar { + height: 100px; +} +body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text { + text-transform: uppercase; +} +body.md .cards-bg tab-highlight { + background-color: #fff !important; + top: 0; +} +body.ios ion-card p.advanced-background-title-large span { + font-weight: 300; +} + + +.preview-weather-cards { + + ion-content ion-card ion-item.advanced-trans p { + color: #fff; + } + + ion-card p.advanced-background-subtitle { + font-size: 1.0em; + position: absolute; + top: 48%; + width: 100%; + color: #fff !important; + } + + .advanced-background { + position: relative; + text-align: center !important; + } + + ion-card ion-item.advanced-trans.item { + position: absolute; + top: 0; + width: 100%; + padding: 12px 20px !important; + background: transparent; + } + ion-card ion-item.advanced-trans.item p { + font-size: 12px; + letter-spacing: 1.7px; + font-weight: 500; + opacity: 0.7; + } + + ion-card p.advanced-background-title { + position: absolute; + top: 25%; + font-size: 2.0em; + width: 100%; + font-weight: bold; + color: #fff !important; + } + + ion-card p.advanced-background-title-large { + top: 29%; + font-weight: normal; + font-size: 4.4em; + color: #fff !important; + } + ion-card p.advanced-background-title-large span { + vertical-align: top; + padding-top: 5px; + font-size: 72px; + height: 74px; + line-height: 1; + display: inline-block; + } + + + + + + + ion-card .advanced-weather-tabs tabbar { + background: transparent; + border-top: none; + } + + ion-card .advanced-weather-tabs tabbar a { + height: 100%; + border-top: 2px solid transparent !important; + border-bottom: 0px !important; + } + ion-card .advanced-weather-tabs tabbar a icon.tab-button-icon { + color: #fff; + font-size: 2.8em; + } + ion-card .advanced-weather-tabs tabbar a span.tab-button-text { + color: #fff; + font-size: 13px; + } + + md-ripple { + background: rgba(255,255,255, 0.15); + } + + ion-card .advanced-weather-tabs { + position: absolute; + bottom: 0; + width: 100%; + background: transparent; + } + ion-card ion-item.advanced-trans.item { + position: absolute; + top: 0; + width: 100%; + padding: 12px 20px !important; + background: transparent; + } + ion-card ion-item.advanced-trans.item p { + font-size: 12px; + letter-spacing: 1.7px; + font-weight: 500; + opacity: 0.7; + } + ion-content ion-card ion-item.advanced-trans p { + color: #fff; + } + +} \ No newline at end of file diff --git a/demos/component-docs/cards/advanced-weather/template.html b/demos/component-docs/cards/advanced-weather/template.html index dae1a51a71..36ce2bab6d 100644 --- a/demos/component-docs/cards/advanced-weather/template.html +++ b/demos/component-docs/cards/advanced-weather/template.html @@ -3,7 +3,7 @@ Weather Card - + diff --git a/demos/component-docs/cards/background/styles.scss b/demos/component-docs/cards/background/styles.scss new file mode 100644 index 0000000000..0910d7a65a --- /dev/null +++ b/demos/component-docs/cards/background/styles.scss @@ -0,0 +1,54 @@ +ion-content ion-card ion-item.advanced-trans p { + color: #fff; +} + +ion-card p.advanced-background-subtitle { + font-size: 1.0em; + position: absolute; + top: 48%; + width: 100%; + color: #fff !important; +} + +.advanced-background { + position: relative; + text-align: center !important; +} + +ion-card ion-item.advanced-trans.item { + position: absolute; + top: 0; + width: 100%; + padding: 12px 20px !important; + background: transparent; +} +ion-card ion-item.advanced-trans.item p { + font-size: 12px; + letter-spacing: 1.7px; + font-weight: 500; + opacity: 0.7; +} + +ion-card p.advanced-background-title { + position: absolute; + top: 25%; + font-size: 2.0em; + width: 100%; + font-weight: bold; + color: #fff !important; +} + +ion-card p.advanced-background-title-large { + top: 29%; + font-weight: normal; + font-size: 4.4em; + color: #fff !important; +} +ion-card p.advanced-background-title-large span { + vertical-align: top; + padding-top: 5px; + font-size: 72px; + height: 74px; + line-height: 1; + display: inline-block; +} \ No newline at end of file diff --git a/demos/component-docs/icons/basic/styles.scss b/demos/component-docs/icons/basic/styles.scss new file mode 100644 index 0000000000..58268ec460 --- /dev/null +++ b/demos/component-docs/icons/basic/styles.scss @@ -0,0 +1,4 @@ +.preview-icons { + font-size: 2em; + text-align: center; +} \ No newline at end of file diff --git a/demos/component-docs/icons/basic/template.html b/demos/component-docs/icons/basic/template.html index 831c3fe8eb..e68e87b4d3 100644 --- a/demos/component-docs/icons/basic/template.html +++ b/demos/component-docs/icons/basic/template.html @@ -3,7 +3,7 @@ Icons - + diff --git a/demos/component-docs/slides/styles.scss b/demos/component-docs/slides/basic/styles.scss similarity index 100% rename from demos/component-docs/slides/styles.scss rename to demos/component-docs/slides/basic/styles.scss