diff --git a/examples/routes/index.html b/examples/routes/index.html index d902ff90..966ce55d 100644 --- a/examples/routes/index.html +++ b/examples/routes/index.html @@ -46,7 +46,7 @@

Installing from NPM

Then import the material directives and providers

- import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from 'ng2-material/all'; + import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "ng2-material/all";

Then reference the styles in your page @@ -57,10 +57,20 @@

Installing from NPM

Or (more preferably) import them into your SCSS files.

- $md-font-url: 'node_modules/ng2-material/dist/'; + $md-font-url: "node_modules/ng2-material/dist/"; @import "node_modules/ng2-material/dist/font"; @import "node_modules/ng2-material/source/all"; +

If you want to use custom theme colors, include the core styles and override the theme variables + before including the components.

+ + $md-font-url: "node_modules/ng2-material/dist/"; + @import "node_modules/ng2-material/dist/font"; + @import "node_modules/ng2-material/source/core"; + $md-primary: md-palette($md-brown, 500, 100, 700, $md-contrast-palettes); + $md-accent: md-palette($md-deep-orange, 500, 300, 700, $md-contrast-palettes); + @import "node_modules/ng2-material/source/components"; + diff --git a/ng2-material/all.scss b/ng2-material/all.scss index de880707..47c3adf1 100644 --- a/ng2-material/all.scss +++ b/ng2-material/all.scss @@ -1,30 +1,2 @@ -@import "core/style/variables"; -@import "core/style/mixins"; -@import "core/style/structure"; -@import "core/style/typography"; -@import "core/style/layout"; -@import "core/style/default-theme"; - - -@import "components/backdrop/backdrop"; -@import "components/button/button"; -@import "components/card/card"; -@import "components/content/content"; -@import "components/checkbox/checkbox"; -@import "components/dialog/dialog"; -@import "components/divider/divider"; -@import "components/icon/icon"; -@import "components/input/input"; -@import "components/list/list"; -@import "components/form/messages"; -@import "components/peekaboo/peekaboo"; -@import "components/progress_circular/progress_circular"; -@import "components/progress_linear/progress_linear"; -@import "components/radio/radio_button"; -@import "components/radio/radio_group"; -@import "components/sidenav/sidenav"; -@import "components/subheader/subheader"; -@import "components/switcher/switch"; -@import "components/toolbar/toolbar"; -@import "components/tabs/tabs"; -@import "components/whiteframe/whiteframe"; +@import "core"; +@import "components"; diff --git a/ng2-material/components.scss b/ng2-material/components.scss new file mode 100644 index 00000000..349195dc --- /dev/null +++ b/ng2-material/components.scss @@ -0,0 +1,22 @@ +@import "components/backdrop/backdrop"; +@import "components/button/button"; +@import "components/card/card"; +@import "components/content/content"; +@import "components/checkbox/checkbox"; +@import "components/dialog/dialog"; +@import "components/divider/divider"; +@import "components/icon/icon"; +@import "components/input/input"; +@import "components/list/list"; +@import "components/form/messages"; +@import "components/peekaboo/peekaboo"; +@import "components/progress_circular/progress_circular"; +@import "components/progress_linear/progress_linear"; +@import "components/radio/radio_button"; +@import "components/radio/radio_group"; +@import "components/sidenav/sidenav"; +@import "components/subheader/subheader"; +@import "components/switcher/switch"; +@import "components/toolbar/toolbar"; +@import "components/tabs/tabs"; +@import "components/whiteframe/whiteframe"; diff --git a/ng2-material/core.scss b/ng2-material/core.scss new file mode 100644 index 00000000..15b3ed3c --- /dev/null +++ b/ng2-material/core.scss @@ -0,0 +1,6 @@ +@import "core/style/variables"; +@import "core/style/mixins"; +@import "core/style/structure"; +@import "core/style/typography"; +@import "core/style/layout"; +@import "core/style/default-theme";