Configure material theme, add material button and input examples

src/app/@theme/styles/material/_material-dark.scss

@@ -4,8 +4,8 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
- @import '~@nebular/theme/styles/core/functions';
- @import '~@nebular/theme/styles/core/mixins';
+@import '~@nebular/theme/styles/core/functions';
+@import '~@nebular/theme/styles/core/mixins';
 
 $theme: (
   color-primary-100: #fff2f7,

src/app/@theme/styles/material/_material.scss

@@ -1,9 +1,19 @@
-@import './ripple';
+@import '~@angular/material/theming';
 
 @include nb-install() {
-  @include ngx-ripple();
+  @include nb-for-theme(material-dark) {
+    $custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey));
+    @include angular-material-theme($custom-dark-theme);
+  }
+
+  @include nb-for-theme(material-light) {
+    $custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink));
+    @include angular-material-theme($custom-light-theme);
+  }
 
   @include nb-for-themes(material-dark, material-light) {
+    @include mat-core();
+
     nb-layout-header {
       box-shadow: nb-theme(header-shadow) !important;
       background-color: nb-theme(color-primary-default) !important;

src/app/@theme/styles/material/_ripple.scss

@@ -1,25 +0,0 @@
-@mixin ngx-ripple() {
-  .mat-ripple {
-    overflow: hidden;
-    position: relative;
-
-    &:not(:empty) {
-      transform: translateZ(0);
-    }
-
-    &.mat-ripple-unbounded{
-      overflow: visible;
-    }
-  }
-
-  .mat-ripple-element {
-    position: absolute;
-    border-radius: 50%;
-    pointer-events: none;
-    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
-    transform: scale(0);
-    // switch ripple color depending on selected theme
-    background-color: nb-theme(background-alternative-color-4);
-    opacity: .1;
-  }
-}

src/app/@theme/theme.module.ts

@@ -39,6 +39,8 @@ import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
 import { DARK_THEME } from './styles/theme.dark';
+import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light';
+import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
 
 const NB_MODULES = [
   NbLayoutModule,
@@ -85,7 +87,7 @@ export class ThemeModule {
           {
             name: 'default',
           },
-          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
+          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ],
         ).providers,
       ],
     };