Home Explore Help
Register Sign In
jeje
/
HomeWebPublic
0
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Ajout d'un thème/couleur css material personnalisé.

jeje 7 years ago
parent
a290a6eabe
commit
d542e17290
8 changed files with 176 additions and 24 deletions
Split View Show Diff Stats
  1. 1 1
      .angular-cli.json
  2. 3 1
      package.json
  3. 25 0
      src/app/app.component.css
  4. 69 19
      src/app/app.component.html
  5. 30 3
      src/app/app.module.ts
  6. 1 0
      src/index.html
  7. 11 0
      src/styles.css
  8. 36 0
      src/stylesPerso.scss

+ 1 - 1
.angular-cli.json
View File 

@@ -19,7 +19,7 @@
 
       "testTsconfig": "tsconfig.spec.json",
 
       "prefix": "app",
 
       "styles": [
 
-        "styles.css"
 
+        "stylesPerso.scss"
 
       ],
 
       "scripts": [],
 
       "environmentSource": "environments/environment.ts",

+ 3 - 1
package.json
View File 

@@ -12,12 +12,14 @@
 
   },
 
   "private": true,
 
   "dependencies": {
 
-    "@angular/animations": "^5.0.0",
 
+    "@angular/animations": "^5.0.5",
 
+    "@angular/cdk": "^5.0.0-rc.2",
 
     "@angular/common": "^5.0.0",
 
     "@angular/compiler": "^5.0.0",
 
     "@angular/core": "^5.0.0",
 
     "@angular/forms": "^5.0.0",
 
     "@angular/http": "^5.0.0",
 
+    "@angular/material": "^5.0.0-rc.2",
 
     "@angular/platform-browser": "^5.0.0",
 
     "@angular/platform-browser-dynamic": "^5.0.0",
 
     "@angular/router": "^5.0.0",

+ 25 - 0
src/app/app.component.css
View File 

@@ -0,0 +1,25 @@
 
+
 
+.dark-primary-color    { background: #0097A7; }
 
+.default-primary-color { background: #00BCD4; }
 
+.light-primary-color   { background: #B2EBF2; }
 
+.text-primary-color    { color: #FFFFFF; }
 
+.accent-color          { background: #009688; }
 
+.primary-text-color    { color: #212121; }
 
+.secondary-text-color  { color: #757575; }
 
+.divider-color         { border-color: #BDBDBD; }
 
+
 
+/*.body{*/
 
+  /*height: 100%;*/
 
+  /*font-family: Roboto,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;*/
 
+  /*margin: 0;*/
 
+  /*color: #333;*/
 
+  /*font-size: 14px;*/
 
+  /*-webkit-font-smoothing: antialiased;*/
 
+  /*-moz-osx-font-smoothing: grayscale;*/
 
+/*}*/
 
+
 
+/*html, body, material-app, mat-sidenav-container, .my-content {*/
 
+  /*margin: 0px;*/
 
+  /*width: 100%;*/
 
+  /*height: 100%;*/
 
+/*}*/

File diff suppressed because it is too large
+ 69 - 19
src/app/app.component.html


+ 30 - 3
src/app/app.module.ts
View File 

@@ -1,16 +1,43 @@
 
 import { BrowserModule } from '@angular/platform-browser';
 
 import { NgModule } from '@angular/core';
 
-
 
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 
 import { AppComponent } from './app.component';
 
+import {
 
+  MatButtonModule, MatCardModule, MatGridListModule, MatIconModule, MatListModule, MatMenuModule, MatSidenavModule,
 
+  MatToolbarModule
 
+} from "@angular/material";
 
+import {RouterModule, Routes} from "@angular/router";
 
+import { HomeComponent } from './home/home.component';
 
+import { RouterLinkWithHref } from '@angular/router';
 
 
+const routes: Routes =[
 
+  {path: 'home', component: HomeComponent},
 
+  { path: '',   redirectTo: '/home', pathMatch: 'full' }
 
+ /* {path: 'dashboard', component: DashboardComponent},
 
+  {path: 'capteur-ht', component: CapteurHtComponent},
 
+  {path: 'todolist', component: TodoDashboardComponent},
 
+  { path: '',   redirectTo: '/dashboard', pathMatch: 'full' },
 
+   { path: '**', component: PageNotFoundComponent }*/
 
+]
 
 
 @NgModule({
 
   declarations: [
 
-    AppComponent
 
+    AppComponent,
 
+    HomeComponent
 
   ],
 
   imports: [
 
-    BrowserModule
 
+    BrowserModule,
 
+    BrowserAnimationsModule,
 
+    MatGridListModule,
 
+    MatCardModule,
 
+    MatMenuModule,
 
+    MatToolbarModule,
 
+    MatButtonModule,
 
+    MatIconModule,
 
+    MatSidenavModule,
 
+    MatListModule,
 
+    RouterModule.forRoot(routes)
 
   ],
 
   providers: [],
 
   bootstrap: [AppComponent]

+ 1 - 0
src/index.html
View File 

@@ -7,6 +7,7 @@
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 </head>
 
 <body>
 
   <app-root></app-root>

+ 11 - 0
src/styles.css
View File 

@@ -1 +1,12 @@
 
 /* You can add global styles to this file, and also import other style files */
 
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
 
+html, body {
 
+  margin: 0px;
 
+  /*padding: 15px;*/
 
+}
 
+
 
+body {
 
+  margin-top: 50px;
 
+  background-color: #00BCD4;
 
+}
 
+

+ 36 - 0
src/stylesPerso.scss
View File 

@@ -0,0 +1,36 @@
 
+@import '~@angular/material/theming';
 
+// Plus imports for other components in your app.
 
+
 
+// Include the common styles for Angular Material. We include this here so that you only
 
+// have to load a single css file for Angular Material in your app.
 
+// Be sure that you only ever include this mixin once!
 
+@include mat-core();
 
+
 
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
 
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
 
+// hue.
 
+$candy-app-primary: mat-palette($mat-blue-grey);
 
+$candy-app-accent:  mat-palette($mat-light-blue, A200, A100, A400);
 
+
 
+// The warn palette is optional (defaults to red).
 
+$candy-app-warn:    mat-palette($mat-red);
 
+
 
+// Create the theme object (a Sass map containing all of the palettes).
 
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
 
+
 
+// Include theme styles for core and each component used in your app.
 
+// Alternatively, you can import and @include the theme mixins for each component
 
+// that you are using.
 
+@include angular-material-theme($candy-app-theme);
 
+html, body {
 
+  margin: 0px;
 
+}
 
+
 
+.mat-sidenav {
 
+  /*background-color: mat-color($candy-app-accent, $hue: 200, $opacity: null);*/
 
+  background-color: mat-color($candy-app-accent, $hue: 100, $opacity: null);
 
+}
 
+
 
+.mat-grid-tile {
 
+  background-color: mat-color($candy-app-accent, $hue: 50, $opacity: null);
 
+}