From adeaf4d4647ebbdbaa1d4abba58f25da3583fa86 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 10 Apr 2015 16:05:35 -0500 Subject: [PATCH] using material design term instead of android --- src/components/alert/extensions/android.scss | 41 ------------------- src/components/alert/extensions/material.scss | 41 +++++++++++++++++++ .../{android.scss => material.scss} | 9 ++-- src/components/card/extensions/android.scss | 0 src/components/item/extensions/android.scss | 0 src/components/list/extensions/android.scss | 0 src/components/tabs/extensions/android.scss | 33 --------------- src/components/tabs/extensions/material.scss | 33 +++++++++++++++ .../toolbar/extensions/android.scss | 33 --------------- .../toolbar/extensions/material.scss | 33 +++++++++++++++ src/config/component.js | 19 +++++++++ src/ionic.scss | 10 ++--- 12 files changed, 133 insertions(+), 119 deletions(-) delete mode 100644 src/components/alert/extensions/android.scss create mode 100644 src/components/alert/extensions/material.scss rename src/components/button/extensions/{android.scss => material.scss} (87%) delete mode 100644 src/components/card/extensions/android.scss delete mode 100644 src/components/item/extensions/android.scss delete mode 100644 src/components/list/extensions/android.scss delete mode 100644 src/components/tabs/extensions/android.scss create mode 100644 src/components/tabs/extensions/material.scss delete mode 100644 src/components/toolbar/extensions/android.scss create mode 100644 src/components/toolbar/extensions/material.scss diff --git a/src/components/alert/extensions/android.scss b/src/components/alert/extensions/android.scss deleted file mode 100644 index 029d8233be..0000000000 --- a/src/components/alert/extensions/android.scss +++ /dev/null @@ -1,41 +0,0 @@ - -// Android Alert -// -------------------------------------------------- - -$alert-android-content-margin: 24px !default; -$alert-android-background-color: #fff !default; -$alert-android-border-radius: 4px !default; -$alert-android-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default; - - -.alert-android { - - .alert-container { - box-shadow: $alert-android-box-shadow; - border-radius: $alert-android-border-radius; - overflow: hidden; - } - - .alert-header { - margin: $alert-android-content-margin; - font-size: 2rem; - font-weight: 400; - } - - .alert-content { - position: relative; - margin: $alert-android-content-margin; - background: $alert-android-background-color; - } - - .alert-actions { - min-height: 44px; - background: $alert-android-background-color; - margin: $alert-android-content-margin; - - .button { - border: 0; - } - } - -} diff --git a/src/components/alert/extensions/material.scss b/src/components/alert/extensions/material.scss new file mode 100644 index 0000000000..b8142f32a2 --- /dev/null +++ b/src/components/alert/extensions/material.scss @@ -0,0 +1,41 @@ + +// Material Design Alert +// -------------------------------------------------- + +$alert-material-content-margin: 24px !default; +$alert-material-background-color: #fff !default; +$alert-material-border-radius: 4px !default; +$alert-material-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default; + + +.alert-md { + + .alert-container { + box-shadow: $alert-material-box-shadow; + border-radius: $alert-material-border-radius; + overflow: hidden; + } + + .alert-header { + margin: $alert-material-content-margin; + font-size: 2rem; + font-weight: 400; + } + + .alert-content { + position: relative; + margin: $alert-material-content-margin; + background: $alert-material-background-color; + } + + .alert-actions { + min-height: 44px; + background: $alert-material-background-color; + margin: $alert-material-content-margin; + + .button { + border: 0; + } + } + +} diff --git a/src/components/button/extensions/android.scss b/src/components/button/extensions/material.scss similarity index 87% rename from src/components/button/extensions/android.scss rename to src/components/button/extensions/material.scss index edd9a476f0..0ce7f386cc 100644 --- a/src/components/button/extensions/android.scss +++ b/src/components/button/extensions/material.scss @@ -1,5 +1,5 @@ -// Material Design Button Variables +// Material Design Button // -------------------------------------------------- $button-material-font-size: 1.4rem !default; @@ -8,11 +8,7 @@ $button-material-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !defa $button-material-border-radius: 3px !default; -// Material Design Button -// -------------------------------------------------- - - -.button.button-android { +.button.button-md { border: 0; border-radius: $button-material-border-radius; @@ -35,4 +31,5 @@ $button-material-border-radius: 3px !default; &.button-small.button-icon { font-size: $button-small-icon-size; } + } diff --git a/src/components/card/extensions/android.scss b/src/components/card/extensions/android.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/item/extensions/android.scss b/src/components/item/extensions/android.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/list/extensions/android.scss b/src/components/list/extensions/android.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/tabs/extensions/android.scss b/src/components/tabs/extensions/android.scss deleted file mode 100644 index 9e71d4be1b..0000000000 --- a/src/components/tabs/extensions/android.scss +++ /dev/null @@ -1,33 +0,0 @@ - -// Android Toolbar -// -------------------------------------------------- - -$tab-bar-android-min-height: 40px !default; -$tab-bar-android-item-padding: 4px 10px !default; -$tab-bar-android-active-border-width: 3px !default; -$tab-bar-android-active-border-color: red !default; -$tab-bar-android-text-transform: uppercase !default; -$tab-bar-android-text-font-weight: 500 !default; - - -.tabs-android { - - .tab-bar-container { - min-height: $tab-bar-android-min-height; - } - - .tab-bar-item { - padding: $tab-bar-item-padding; - text-transform: $tab-bar-android-text-transform; - font-weight: $tab-bar-android-text-font-weight; - } - - .tab-bar .tab-bar-item { - border-bottom: $tab-bar-android-active-border-width solid transparent; - } - - .tab-bar .tab-active { - border-bottom-color: $tab-bar-android-active-border-color; - } - -} diff --git a/src/components/tabs/extensions/material.scss b/src/components/tabs/extensions/material.scss new file mode 100644 index 0000000000..0bb26f4081 --- /dev/null +++ b/src/components/tabs/extensions/material.scss @@ -0,0 +1,33 @@ + +// Material Design Toolbar +// -------------------------------------------------- + +$tab-bar-material-min-height: 40px !default; +$tab-bar-material-item-padding: 4px 10px !default; +$tab-bar-material-active-border-width: 3px !default; +$tab-bar-material-active-border-color: red !default; +$tab-bar-material-text-transform: uppercase !default; +$tab-bar-material-text-font-weight: 500 !default; + + +.tabs-md { + + .tab-bar-container { + min-height: $tab-bar-material-min-height; + } + + .tab-bar-item { + padding: $tab-bar-material-item-padding; + text-transform: $tab-bar-material-text-transform; + font-weight: $tab-bar-material-text-font-weight; + } + + .tab-bar .tab-bar-item { + border-bottom: $tab-bar-material-active-border-width solid transparent; + } + + .tab-bar .tab-active { + border-bottom-color: $tab-bar-material-active-border-color; + } + +} diff --git a/src/components/toolbar/extensions/android.scss b/src/components/toolbar/extensions/android.scss deleted file mode 100644 index 5faebef4d7..0000000000 --- a/src/components/toolbar/extensions/android.scss +++ /dev/null @@ -1,33 +0,0 @@ - -// Android Toolbar -// -------------------------------------------------- - -$toolbar-android-height: 6.4rem !default; -$toolbar-android-background: #f7f7f8 !default; - -$toolbar-android-title-font-size: 2rem !default; -$toolbar-android-button-font-size: 2rem !default; -$toolbar-android-button-text-color: #007aff !default; - - -.toolbar-android { - height: $toolbar-android-height; - background: $toolbar-android-background; - - .toolbar-title { - font-size: $toolbar-android-title-font-size; - } - - .button { - font-size: $toolbar-android-button-font-size; - color: $toolbar-android-button-text-color; - border: none; - - padding: 0; - margin: 0 10px; - - min-height: $toolbar-android-height; - min-width: 0; - } - -} diff --git a/src/components/toolbar/extensions/material.scss b/src/components/toolbar/extensions/material.scss new file mode 100644 index 0000000000..2dec56d038 --- /dev/null +++ b/src/components/toolbar/extensions/material.scss @@ -0,0 +1,33 @@ + +// Material Design Toolbar +// -------------------------------------------------- + +$toolbar-material-height: 6.4rem !default; +$toolbar-material-background: #f7f7f8 !default; + +$toolbar-material-title-font-size: 2rem !default; +$toolbar-material-button-font-size: 2rem !default; +$toolbar-material-button-text-color: #007aff !default; + + +.toolbar-md { + height: $toolbar-material-height; + background: $toolbar-material-background; + + .toolbar-title { + font-size: $toolbar-material-title-font-size; + } + + .button { + font-size: $toolbar-material-button-font-size; + color: $toolbar-material-button-text-color; + border: none; + + padding: 0; + margin: 0 10px; + + min-height: $toolbar-material-height; + min-width: 0; + } + +} diff --git a/src/config/component.js b/src/config/component.js index 091271c31c..0bbe5c0984 100644 --- a/src/config/component.js +++ b/src/config/component.js @@ -42,6 +42,25 @@ export class IonicComponent { instance.domElement.classList.add(this.componentCssName) instance.domElement.classList.add(`${this.componentCssName}-${platformName}`) + + /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/ + /* + Manually assigning "md" for android platform, but we need + to be able to set which "mode" to use for each platform. + + ios platform == ios mode + android platform == md mode (material design mode) + everything else == core mode + + Uber hack below until we come up with a pretty "mode" API + */ + if (platformName == 'android') { + instance.domElement.classList.add(`${this.componentCssName}-md`) + } + /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/ + + + for (let attrName in this.bind) { let binding = this.bind[attrName] let defaultValue = binding._defaultValue diff --git a/src/ionic.scss b/src/ionic.scss index bad9f4e90d..d5ff635521 100644 --- a/src/ionic.scss +++ b/src/ionic.scss @@ -62,12 +62,10 @@ // Material Design Components @import - "components/alert/extensions/android", - "components/button/extensions/android", - "components/list/extensions/android", - "components/item/extensions/android", - "components/tabs/extensions/android", - "components/toolbar/extensions/android"; + "components/alert/extensions/material", + "components/button/extensions/material", + "components/tabs/extensions/material", + "components/toolbar/extensions/material"; // Icons