diff --git a/.codeclimate.yml b/.codeclimate.yml
index 477ed33ac..234037195 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -27,7 +27,7 @@ exclude_paths:
- dev-scripts
- scripts
- src/app
-- src/scss-mdl
+- src/scss
- typings
- angular-cli.json
- angular-cli-build.js
diff --git a/README.md b/README.md
index dec609338..240531929 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ Do not take a red flag to serious. Most of the time this is a sauce lab issue an
### Status of the npm package version 1.7 (mdl version 1.2.1; angular 2.0 final)
- Badges
-- Buttons
+- Buttons
- Cards
- Chips
- Icons
@@ -74,7 +74,7 @@ export class Angular2MdlAppModule {
}
```
-There are still a lot of bugs in angular2 rc5. For example: https://github.com/angular/angular/issues/10618.
+There are still a lot of bugs in angular2 rc5. For example: https://github.com/angular/angular/issues/10618.
This means that prod builds are broken. You need to disable some minification options. See the comments in the mentioned ticket.
### Installation
@@ -95,7 +95,7 @@ Just use it. Add the MdlModule to your NgModule imports and you are done!
### How to use the mdl components with the angular cli system js version
-You need to extend the `angular-cli-build.js` file to include `angular2-mdl` as a vendor package:
+You need to extend the `angular-cli-build.js` file to include `angular2-mdl` as a vendor package:
```JavaScript
return new Angular2App(defaults, {
@@ -142,7 +142,7 @@ You may include the material-deisgn-lite css in your html and you're done!
Under https://getmdl.io/customize/index.html you'll find a customizing tool to change the theme colors.
### How to use the scss files from material-design-lite
-But there is also another way. This package includes the scss files from material-design-lite.
+But there is also another way. This package includes the scss files from material-design-lite.
With these files you are able to change the colors and other variables in your own scss files:
First of all you need to install node-sass for your project:
@@ -151,7 +151,7 @@ First of all you need to install node-sass for your project:
npm install node-sass --save-dev
```
-After that you need to configure the sass compiler to use the sass files from the angular2-mdl package.
+After that you need to configure the sass compiler to use the sass files from the angular2-mdl package.
For that the file `angular-cli-build.js` needs to be extended:
```JavaScript
@@ -159,7 +159,7 @@ return new Angular2App(defaults, {
sassCompiler: {
includePaths: [
- `${__dirname}/node_modules/angular2-mdl/src/scss-mdl`
+ `${__dirname}/node_modules/angular2-mdl/src/scss`
]
},
vendorNpmFiles: [
@@ -184,3 +184,17 @@ $color-accent-contrast: $color-dark-contrast;
[comment]: <> (in angular-cli/lib/broccoli/angular-broccoli-bundle.js set { minify: true, mangle: false })
+
+
+# Contributing
+
+*The contributing section is a work in progress, please be aware that changes are still being suggested and your PR may need to go through a couple revisions prior to acceptance*
+
+* This package should only provide what is provided by material design lite so far (to keep it clean, maintainable and predictable what is included)
+* Any extensions need to be things that the packaging of mdl into @angular makes it very hard to extend (to be reviewed and accepted/rejected based on merit by the owners of this repository).
+
+## SCSS
+
+* This package must work with the CSS from [the CDN](https://code.getmdl.io/1.2.1/material.indigo-pink.min.css)
+ * We pull the source directly with a script into app/scss/mdl
+ * All extensions must exist outside of the mdl directory or they will be overwritten the next time we pull from mdl
diff --git a/angular-cli-build.js b/angular-cli-build.js
index 058dcf8c5..c18a704b1 100644
--- a/angular-cli-build.js
+++ b/angular-cli-build.js
@@ -39,7 +39,7 @@ module.exports = function(defaults) {
tsCompiler: {},
sassCompiler: {
includePaths: [
- 'src/scss-mdl'
+ 'src/scss'
]
},
vendorNpmFiles: [
diff --git a/dev-scripts/generate-scss-from-mdl-scss.js b/dev-scripts/generate-scss-from-mdl-scss.js
index 79f07bc81..a0b930ae4 100644
--- a/dev-scripts/generate-scss-from-mdl-scss.js
+++ b/dev-scripts/generate-scss-from-mdl-scss.js
@@ -1,7 +1,7 @@
#!/usr/bin/env node
'use strict';
-// extract scss files and put them into scss-mdl folder. Run: npm run generate-scss-from-mdl-scss
+// extract scss files and put them into scss/mdl folder. Run: npm run generate-scss-from-mdl-scss
const fs = require('fs');
const path = require('path');
@@ -10,10 +10,10 @@ const ncp = require('ncp').ncp;
var basePath = process.cwd();
var source = path.resolve(basePath, 'node_modules/material-design-lite/src');
-var dest = path.resolve(basePath, 'src/scss-mdl');
+var dest = path.resolve(basePath, 'src/scss/mdl');
-fs.mkdirSync('src/scss-mdl');
+fs.mkdirSync('src/scss/mdl');
ncp(source, dest, {filter: function(fileName){
if(fileName.endsWith('snippets')){
@@ -29,4 +29,3 @@ ncp(source, dest, {filter: function(fileName){
}
console.log('done!');
});
-
diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html
index d79c0601b..cedd860ce 100644
--- a/src/app/tabs/tabs.component.html
+++ b/src/app/tabs/tabs.component.html
@@ -3,78 +3,108 @@