refactor: use css BEM-selectors

Author: loktionov129

.ToDo

@@ -2,9 +2,12 @@ mpgp.github.io:
     https://github.com/mpgp/mpgp.github.io/projects/1
 
     In Progress:
-        
-        @high @refactoring 
-        ☐ refactor: use css BEM-selectors @created(18-06-12 21:35:58)
+
+        @low @refactoring
+        ☐ refactor(docs): split chapters by mat-card in docs-root.component.html @created(18-06-12 20:44:45)
+
+        @low @refactoring
+        ☐ refactor(spec): decomposite spec-root to small components @created(18-06-12 20:44:43)
 
         @low
         ☐ read the angular guides https://angular.io/guide/security @created(18-06-12 21:41:03)
@@ -14,12 +17,6 @@ mpgp.github.io:
 
     To Do:
 
-        @low @refactoring
-        ☐ refactor(docs): split chapters by mat-card in docs-root.component.html @created(18-06-12 20:44:45)
-
-        @low @refactoring
-        ☐ refactor(spec): decomposite spec-root to small components @created(18-06-12 20:44:43)
-
         @high @feature 
         ☐ feat(editor): add json editor for HUMAN @created(18-06-12 20:51:30)
         https://pp.userapi.com/c847122/v847122522/4b395/Fw0nCxQ4Yv4.jpg

README.md

@@ -21,15 +21,15 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Development server
 
-Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `yarn run start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `npm run build` to build the project. The build artifacts will be stored in the `dist` directory.
+Run `yarn run build` to build the project. The build artifacts will be stored in the `dist` directory.
 
 ## Further help
 

src/app/components/app-sidenav/app-sidenav.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">Menu</mat-toolbar>
-<mat-nav-list>
+<mat-nav-list class="nav-list">
   <a mat-list-item routerLink="/docs" routerLinkActive="active">Docs</a>
   <a mat-list-item routerLink="/spec" routerLinkActive="active" class="cursive">Spec</a>
   <mat-divider></mat-divider>

src/app/components/app-sidenav/app-sidenav.component.scss

@@ -1,10 +1,10 @@
-app-sidenav {
+.nav-list {
   .mat-list-item {
     &.active {
       background: #eee;
     }
-  }
-  .cursive {
-    font-family: cursive;
+    &.cursive {
+      font-family: cursive;
+    }
   }
 }

src/app/features/docs/containers/docs-root/docs-root.component.html

@@ -1,19 +1,23 @@
-docs-root {
-  .mat-nav-list {
+.docs {
+  &-list {
+    .docs-list {
+      margin-left: 15px;
+    }
+    
     .mat-list-item {
       height: 30px;
     }
-    .mat-nav-list {
-      margin-left: 15px;
-    }
   }
-  .mat-card {
+
+  &-card {
     font-family: sans-serif;
-    h2 a {
-      color: black;
-    }
-    .mat-card-subtitle a {
-      color: rgba(0,0,0,.54);
-    }
+  }
+
+  &-subtitle {
+    color: rgba(0,0,0,.54);
+  }
+
+  &-nav-link {
+    color: black;
   }
 }

src/app/features/docs/containers/docs-root/docs-root.component.scss

@@ -1,7 +1,5 @@
 spec-chip {
-  .mat-chip {
-    width: 65px;
-    justify-content: center;
-    margin-right: 15px !important;
-  }
+  width: 65px;
+  justify-content: center;
+  margin-right: 15px !important;
 }

src/app/features/spec/components/spec-chip/spec-chip.component.scss

@@ -1,7 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
-html, body {margin:0;padding:0}
-app-root {
-  .mat-card:not([class*=mat-elevation-z]) {
-    box-shadow: inset 0 3px 1px -2px rgba(0,0,0,.2), inset 0 2px 2px 0 rgba(0,0,0,.14), inset 0 1px 5px 0 rgba(0,0,0,.12);
-  }
-}
+html, body {margin:0;padding:0}