Passage en SCSS + globalisation et refactorisation

angular.json

@@ -44,7 +44,7 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": [
               "./node_modules/jquery/dist/jquery.min.js",

src/app/components/agence/agence-edit/agence-edit.component.css

@@ -1,27 +0,0 @@
-label {
-  color: #435960;
-  font-weight: bold;
-}
-input {
-  font-size: 1em;
-  padding: .3rem;
-  margin: .5rem;
-}
-
-button {
-  padding: 5px;
-  text-decoration: none;
-  margin: 2px;
-  display: inline-block;
-  background-color: #E77620;
-  color: white;
-  border-radius: 4px;
-}
-button:hover {
-  background-color: #42545C;
-}
-button:disabled {
-  background-color: #eee;
-  color: #ccc;
-  cursor: auto;
-}

src/app/components/agence/agence-edit/agence-edit.component.ts

@@ -7,7 +7,7 @@ import {Location} from "@angular/common";
 @Component({
   selector: 'app-agence-edit',
   templateUrl: './agence-edit.component.html',
-  styleUrls: ['./agence-edit.component.css']
+  styleUrls: ['./agence-edit.component.scss']
 })
 export class AgenceEditComponent implements OnInit {
   agence : Agence | undefined;

src/app/components/agence/agence.component.scss

@@ -1,61 +1,2 @@
-label {
-  color: #435960;
-  font-weight: bold;
-}
-input {
-  font-size: 1em;
-  padding: .3rem;
-  margin: .5rem;
-}
 
-.agences {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 15em;
-}
-.agences li {
-  position: relative;
-  cursor: pointer;
-}
 
-.agences li:hover {
-  left: .1em;
-}
-
-.agences a, td a {
-  padding: 5px;
-  text-decoration: none;
-  margin: 2px;
-  display: inline-block;
-  background-color: #E77620;
-  color: white;
-  border-radius: 4px;
-
-}
-
-.agences a:hover {
-  background-color: #42545C;
-}
-
-.agences a:active {
-  background-color: #525252;
-  color: #fafafa;
-}
-
-.agences .badge{
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  min-width: 16px;
-  text-align: right;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}

src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.scss

@@ -1,9 +1 @@
-label {
-  color: #435960;
-  font-weight: bold;
-}
-input {
-  font-size: 1em;
-  padding: .3rem;
-  margin: .5rem;
-}
+

src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.scss

@@ -1,27 +0,0 @@
-label {
-  color: #435960;
-  font-weight: bold;
-}
-input {
-  font-size: 1em;
-  padding: .3rem;
-  margin: .5rem;
-}
-
-button {
-  padding: 5px;
-  text-decoration: none;
-  margin: 2px;
-  display: inline-block;
-  background-color: #E77620;
-  color: white;
-  border-radius: 4px;
-}
-button:hover {
-  background-color: #42545C;
-}
-button:disabled {
-  background-color: #eee;
-  color: #ccc;
-  cursor: auto;
-}

src/app/components/collaborateur/collaborateur.component.css

@@ -1,81 +0,0 @@
-/* HeroesComponent's private CSS styles */
-
-label {
-  color: #435960;
-  font-weight: bold;
-}
-input {
-  font-size: 1em;
-  padding: .3rem;
-  margin: .5rem;
-}
-
-.collaborateurs {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 15em;
-}
-.collaborateurs li {
-  position: relative;
-  cursor: pointer;
-}
-
-.collaborateurs li:hover {
-  left: .1em;
-}
-
-.collaborateurs a, td a {
-  padding: 5px;
-  text-decoration: none;
-  margin: 2px;
-  display: inline-block;
-  background-color: #E77620;
-  color: white;
-  border-radius: 4px;
-
-}
-
-.collaborateurs a:hover {
-  background-color: #42545C;
-}
-
-.collaborateurs a:active {
-  background-color: #525252;
-  color: #fafafa;
-}
-
-.collaborateurs .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  min-width: 16px;
-  text-align: right;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-
-button {
-  padding: 5px;
-  text-decoration: none;
-  margin: 2px;
-  display: inline-block;
-  background-color: #E77620;
-  color: white;
-  border-radius: 4px;
-}
-button:hover {
-  background-color: #42545C;
-}
-button:disabled {
-  background-color: #eee;
-  color: #ccc;
-  cursor: auto;
-}

src/app/components/collaborateur/collaborateur.component.scss

@@ -0,0 +1,3 @@
+
+
+

src/app/components/collaborateur/collaborateur.component.ts

@@ -6,7 +6,7 @@ import {Collaborateur} from "../../interfaces/collaborateur";
 @Component({
   selector: 'app-collaborateur',
   templateUrl: './collaborateur.component.html',
-  styleUrls: ['./collaborateur.component.css']
+  styleUrls: ['./collaborateur.component.scss']
 })
 export class CollaborateurComponent implements OnInit {
   collaborateurs : Collaborateur[] = [];

src/styles.scss

@@ -1 +1,73 @@
 /* You can add global styles to this file, and also import other style files */
+
+$primary: #183650;
+$secondary: #e77620;
+$accent: #e1e4e6;
+$error: #b53333;
+$success: #0b7023;
+$info: #fff;
+$warning: #e07612;
+
+label {
+  color: $primary;
+  font-weight: bold;
+}
+input {
+  font-size: 1em;
+  padding: .3rem;
+  margin: .5rem;
+}
+
+button {
+  padding: 5px;
+  text-decoration: none;
+  margin: 2px;
+  display: inline-block;
+  background-color: $secondary;
+  color: white;
+  border-radius: 4px;
+}
+button:hover {
+  background-color: $primary;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc;
+  cursor: auto;
+}
+
+
+
+.entities {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.entities li {
+  position: relative;
+  cursor: pointer;
+}
+
+.entities li:hover {
+  left: .1em;
+}
+
+.entities a, td a {
+  padding: 5px;
+  text-decoration: none;
+  margin: 2px;
+  display: inline-block;
+  background-color: $secondary;
+  color: white;
+  border-radius: 4px;
+}
+
+.entities a:hover {
+  background-color: #42545C;
+}
+
+.entities a:active {
+  background-color: #525252;
+  color: #fafafa;
+}