[#00] fix (styles) -> fix a:focus colors and format date strings as d…

…d.MM.yyyy

assets/app/authenticated/project/project.show.template.html

@@ -7,7 +7,7 @@ <h4 class="client">{{ project?.client }}</h4>
       <h1 class="project-title">{{project?.title}}</h1>
       <div class="g-tag type">{{ project?.type }}</div>
       <ul class="meta-list">
-        <li><b>Period:</b> {{ project?.start | date:"dd/MM/yyyy" }} - {{ project?.end | date:"dd/MM/yyyy"}}</li>
+        <li><b>Period:</b> {{ project?.start | date:"dd.MM.yyyy" }} – {{ project?.end | date:"dd.MM.yyyy"}}</li>
         <li><b>Created by:</b> {{ project?.creator.firstName }} {{ project?.creator.lastName }}</li>
         <li><b>Budget:</b> {{ project?.budget }} €</li>
         <li><b>Expense Budget:</b> {{ project?.expBudget }} €</li>

assets/app/authenticated/userProfile/user-profile.template.html

@@ -73,7 +73,7 @@ <h5 class="g-card-title project-title">
             </h5>
             <div class="g-card-content project-content">
               <p>{{ project?.client }}</p>
-              <p>{{ project?.start | date:"dd/MM/yy" }} - {{ project?.end | date:"dd/MM/yy"}}</p>
+              <p>{{ project?.start | date:"dd.MM.yyyy" }} – {{ project?.end | date:"dd.MM.yyyy"}}</p>
             </div>
           </div>
         </div>

assets/app/nav/nav.style.scss

@@ -38,6 +38,12 @@
   width: 120px;
   text-align: right;
   margin-left: auto;
+
+  a:hover,
+  a:focus,
+  a:active {
+    color: $danger-light;
+  }
 }
 
 
@@ -59,7 +65,9 @@
   color: $grey-extralight;
   padding: 0;
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
     border-bottom: 0;
     color: $primary-lighter;
   }

assets/styles/_base.scss

@@ -61,10 +61,18 @@ body ::selection {
 a {
   color: $primary-darker;
   text-decoration: none;
+  transition: all 0.1s ease-in-out;
+  transition-property: color, border; // override
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: $primary-darker;
     border-bottom: 1px solid $primary-darker;
     text-decoration: none;
   }
+
+  &:active {
+    color: $primary;
+    border-color: $primary;
+  }
 }