fix(vm-logs): align fab content (#1438)

* fix(vm-logs): align fab content

* vm logs key mock

* refactor fab styles

* remove duplicated css

* Revert "vm logs key mock"

This reverts commit b5a757a.

* refactor mat fab styles

src/app/shared/components/fab/fab.component.scss

@@ -1,4 +1,5 @@
 @import '../../../../style/__variables';
+@import '../../../../style/mat-fab-resize';
 
 :host {
   position: fixed;
@@ -8,21 +9,3 @@
   height: 50px;
   width: 50px;
 }
-
-.mat-fab {
-  width: 50px;
-  height: 50px;
-}
-
-/deep/ .mat-fab .mat-button-wrapper {
-  padding: 14px 0 !important;
-}
-
-/deep/ .mat-mini-fab {
-  width: 36px;
-  height: 36px;
-}
-
-/deep/ .mat-mini-fab .mat-button-wrapper {
-  padding: 7px 0 !important;
-}

src/app/vm-logs/vm-logs/vm-logs.component.scss

@@ -1,4 +1,5 @@
 @import '../../../style/_variables';
+@import '../../../style/mat-fab-resize';
 
 .fab {
   transition: margin 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -9,12 +10,3 @@
   height: 50px;
   width: 50px;
 }
-
-.mat-fab {
-  width: 50px;
-  height: 50px;
-}
-
-/deep/ .mat-fab .mat-button-wrapper {
-  padding: 14px 0 !important;
-}

src/style/mat-fab-resize.scss

@@ -0,0 +1,43 @@
+/deep/ .mat-fab {
+  // original fab size = 56px
+  // original padding = 16px
+  // original line height = 24px
+  // new fab size = 50px
+  // set new values to (50 * 56 / original_size) to scale down
+
+  $mat-fab-ratio: 50 / 56;
+
+  width: 50px;
+  height: 50px;
+
+  & .mat-button-wrapper {
+    padding: $mat-fab-ratio * 16px 0;
+    line-height: $mat-fab-ratio * 24px;
+  }
+
+  & .mat-icon {
+    width: $mat-fab-ratio * 24px;
+    height: $mat-fab-ratio * 24px;
+    line-height: $mat-fab-ratio * 24px;
+    font-size: $mat-fab-ratio * 24px;
+  }
+}
+
+/deep/ .mat-mini-fab {
+  $mat-mini-fab-ratio: 36 / 40;
+
+  width: 36px;
+  height: 36px;
+
+  & .mat-button-wrapper {
+    padding: $mat-mini-fab-ratio * 8px 0;
+    line-height: $mat-mini-fab-ratio * 24px;
+  }
+
+  & .mat-icon {
+    width: $mat-mini-fab-ratio * 24px;
+    height: $mat-mini-fab-ratio * 24px;
+    line-height: $mat-mini-fab-ratio * 24px;
+    font-size: $mat-mini-fab-ratio * 24px;
+  }
+}