diff --git a/app/prompts.json b/app/prompts.json index a0371630..e00f8d6f 100644 --- a/app/prompts.json +++ b/app/prompts.json @@ -166,6 +166,13 @@ }, "name": "Angular Material, the reference implementation of the Google's Material Design specification" }, + { + "value": { + "key": "material-design-lite", + "module": null + }, + "name": "Material Design Lite" + }, { "value": { "key": "foundation", diff --git a/app/techs.json b/app/techs.json index a169e1ce..45efbc92 100644 --- a/app/techs.json +++ b/app/techs.json @@ -29,6 +29,12 @@ "description": "The Angular reference implementation of the Google's Material Design specification.", "logo": "angular-material.png" }, + "material-design-lite": { + "title": "Material Design Lite", + "url": "http://www.getmdl.io/", + "description": "Material Design", + "logo": "material-design-lite.png" + }, "browsersync": { "title": "BrowserSync", "url": "http://browsersync.io/", diff --git a/app/templates/_bower.json b/app/templates/_bower.json index 31d6ee2d..32749ddd 100644 --- a/app/templates/_bower.json +++ b/app/templates/_bower.json @@ -40,6 +40,8 @@ "foundation": "~5.5.2", <% } if(props.ui.key === 'angular-material') { -%> "angular-material": "~0.9.7", +<% } if(props.ui.key === 'material-design-lite') { -%> + "material-design-lite": "~1.0.4", <% } if(props.bootstrapComponents.key === 'ui-bootstrap') { -%> "angular-bootstrap": "~0.13.0", <% } if(props.bootstrapComponents.key === 'angular-strap') { -%> diff --git a/app/templates/src/app/_material-design-lite/__material-design-lite-index.css b/app/templates/src/app/_material-design-lite/__material-design-lite-index.css new file mode 100644 index 00000000..1ed41f5b --- /dev/null +++ b/app/templates/src/app/_material-design-lite/__material-design-lite-index.css @@ -0,0 +1,44 @@ +@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700); +@import url(https://fonts.googleapis.com/icon?family=Material+Icons); + +main { + padding: 20px; + background: #fafafa; +} + +.acme-card-wide.mdl-card { + width: 100%; +} +.acme-card-wide > .mdl-card__title { + color: #fff; + height: 176px; + background: url('../assets/images/yeoman.png') center / cover; + background-size: 110px; + background-repeat: no-repeat; +} +.acme-card-wide > .mdl-card__title > .mdl-card__title-text { + color: #000; +} +.acme-card-wide > .mdl-card__menu { + color: #000; +} +.acme-card-wide > .mdl-card__actions { + text-align: center; +} + +.acme-card-square.mdl-card { + width: 100%; + min-height: 200px; +} +.acme-card-square > .mdl-card__title { + color: #fff; + background: #283593; +} +.acme-card-square > .mdl-card__media { + color: #fff; + background: none; + text-align: center; +} +.acme-card-square > .mdl-card__media > img { + height: 100px; +} diff --git a/app/templates/src/app/_material-design-lite/__material-design-lite-index.less b/app/templates/src/app/_material-design-lite/__material-design-lite-index.less new file mode 100644 index 00000000..495e6c24 --- /dev/null +++ b/app/templates/src/app/_material-design-lite/__material-design-lite-index.less @@ -0,0 +1,67 @@ +/** + * Do not remove the comments below. It's the markers used by wiredep to inject + * sass dependencies when defined in the bower.json of your dependencies + */ +// bower:less +// endbower + +@import url(//fonts.googleapis.com/icon?family=Material+Icons); +@import url(//fonts.googleapis.com/css?family=Roboto:300,400,500,700); + +main { + padding: 20px; + background: #fafafa; +} +.acme-card-wide { + &.mdl-card { + width: 100%; + } + + > .mdl-card__title { + color: #fff; + height: 176px; + background: url('../assets/images/yeoman.png') center / cover; + background-size: 110px; + background-repeat: no-repeat; + } + + > .mdl-card__title > .mdl-card__title-text { + color: #000; + } + + > .mdl-card__menu { + color: #000; + } + + > .mdl-card__actions { + text-align: center; + } +} + +.acme-card-square { + &.mdl-card { + width: 100%; + min-height: 200px; + } + + > .mdl-card__title { + color: #fff; + background: #283593; + } + + > .mdl-card__media { + color: #fff; + background: none; + text-align: center; + img { + height: 100px; + } + } +} + +/** + * Do not remove the comment below. It's the markers used by gulp-inject to inject + * all your sass files automatically + */ +// injector +// endinjector diff --git a/app/templates/src/app/_material-design-lite/__material-design-lite-index.scss b/app/templates/src/app/_material-design-lite/__material-design-lite-index.scss new file mode 100644 index 00000000..b4b1e2d8 --- /dev/null +++ b/app/templates/src/app/_material-design-lite/__material-design-lite-index.scss @@ -0,0 +1,67 @@ +/** + * Do not remove the comments below. It's the markers used by wiredep to inject + * sass dependencies when defined in the bower.json of your dependencies + */ +// bower:scss +// endbower + +@import url(http://fonts.googleapis.com/icon?family=Material+Icons); +@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700); + +main { + padding: 20px; + background: #fafafa; +} +.acme-card-wide { + &.mdl-card { + width: 100%; + } + + > .mdl-card__title { + color: #fff; + height: 176px; + background: url('../assets/images/yeoman.png') center / cover; + background-size: 110px; + background-repeat: no-repeat; + } + + > .mdl-card__title > .mdl-card__title-text { + color: #000; + } + + > .mdl-card__menu { + color: #000; + } + + > .mdl-card__actions { + text-align: center; + } +} + +.acme-card-square { + &.mdl-card { + width: 100%; + min-height: 200px; + } + + > .mdl-card__title { + color: #fff; + background: #283593; + } + + > .mdl-card__media { + color: #fff; + background: none; + text-align: center; + img { + height: 100px; + } + } +} + +/** + * Do not remove the comment below. It's the markers used by gulp-inject to inject + * all your sass files automatically + */ +// injector +// endinjector diff --git a/app/templates/src/app/_material-design-lite/__material-design-lite-index.styl b/app/templates/src/app/_material-design-lite/__material-design-lite-index.styl new file mode 100644 index 00000000..1a69911f --- /dev/null +++ b/app/templates/src/app/_material-design-lite/__material-design-lite-index.styl @@ -0,0 +1,58 @@ +/** + * Do not remove the comments below. It's the markers used by wiredep to inject + * sass dependencies when defined in the bower.json of your dependencies + */ +// bower:styl +// endbower + +@import url('//fonts.googleapis.com/icon?family=Material+Icons'); +@import url('//fonts.googleapis.com/css?family=Roboto:300,400,500,700'); + +main + padding: 20px; + background: #fafafa; + +.acme-card-wide + &.mdl-card + width: 100%; + + > .mdl-card__title + color: #fff; + height: 176px; + background: url('../assets/images/yeoman.png') center / cover; + background-size: 110px; + background-repeat: no-repeat; + + > .mdl-card__title > .mdl-card__title-text + color: #000; + + > .mdl-card__menu + color: #000; + + > .mdl-card__actions + text-align: center; + + +.acme-card-square + &.mdl-card + width: 100%; + min-height: 200px; + + > .mdl-card__title + color: #fff; + background: #283593; + + > .mdl-card__media + color: #fff; + background: none; + text-align: center; + img + height: 100px; + + +/** + * Do not remove the comment below. It's the markers used by gulp-inject to inject + * all your sass files automatically + */ +// injector +// endinjector diff --git a/app/templates/src/app/components/navbar/__material-design-lite-navbar.html b/app/templates/src/app/components/navbar/__material-design-lite-navbar.html new file mode 100644 index 00000000..c3e3f368 --- /dev/null +++ b/app/templates/src/app/components/navbar/__material-design-lite-navbar.html @@ -0,0 +1,14 @@ +
+ + Gulp Angular + + + +
+ + Application was created {{ vm.relativeDate }}. +
diff --git a/app/templates/src/app/main/__material-design-lite.html b/app/templates/src/app/main/__material-design-lite.html new file mode 100644 index 00000000..4ad6a7f2 --- /dev/null +++ b/app/templates/src/app/main/__material-design-lite.html @@ -0,0 +1,70 @@ +
+ +
+ +
+ +
+ Title + +
+ +
+
+
+
+

'Allo, 'Allo!

+
+
+ Always a pleasure scaffolding your apps. +
+
+ + Splendid Toastr + +
+
+ +
+
+
+ +
+
+
+

{{ awesomeThing.title }}

+
+
+ {{ awesomeThing.title }} +
+
+ {{ awesomeThing.description }} +
+
+ + Website + +
+
+
+ +
+
+
+ + + +
diff --git a/app/templates/src/assets/images/material-design-lite.png b/app/templates/src/assets/images/material-design-lite.png new file mode 100644 index 00000000..7a85ab90 Binary files /dev/null and b/app/templates/src/assets/images/material-design-lite.png differ