Arreglar nombres de clases y estilos

Debido a los cambios major en las dependencias, algunos nombres de clases CSS cambiaron, rompiendo así algunos estilos que previamente funcionaban sobre dichos nombres de clases CSS.

Frontend Angular 4/src/app/layout/matefun/matefun.component.html

@@ -36,7 +36,7 @@
                   />
 
                   <button
-                    style="margin-left: 5px; float: right"
+                    style="float: right"
                     id="shortcutsPopover"
                     class="btn btn-sm btn-secondary"
                     placement="bottom"
@@ -52,7 +52,7 @@
                   <button
                     id="downloadFileButton"
                     (click)="downloadFile()"
-                    style="margin-left: 5px; float: right"
+                    style="float: right"
                     class="btn btn-sm btn-secondary"
                     placement="bottom"
                     ngbPopover="{{
@@ -66,7 +66,7 @@
                   <button
                     id="uploadFileButton"
                     (click)="seleccionarDirectorio(true)"
-                    style="margin-left: 5px; float: right"
+                    style="float: right"
                     class="btn btn-sm btn-secondary"
                     placement="bottom"
                     ngbPopover="{{
@@ -78,7 +78,7 @@
                     <i class="fa fa-upload"></i>
                   </button>
                   <button
-                    style="margin-left: 5px; float: right"
+                    style="float: right"
                     id="popover"
                     class="btn btn-sm btn-secondary"
                     placement="bottom"
@@ -92,7 +92,7 @@
                     <i class="fa fa-gear"></i>
                   </button>
                   <div
-                    style="margin-left: 5px; float: right"
+                    style="float: right"
                     ngbPopover="{{
                       'i18n.action.save' | translate | titleCase
                     }} {{
@@ -110,7 +110,7 @@
                     </button>
                   </div>
                   <button
-                    style="margin-left: 5px; float: right"
+                    style="float: right"
                     (click)="mostrandoDefinicion = false; reiniciarInterprete()"
                     class="btn btn-sm btn-secondary"
                     ngbPopover="{{
@@ -124,7 +124,7 @@
                     <i class="fa fa-refresh"></i>
                   </button>
                   <button
-                    style="margin-left: 5px; float: right"
+                    style="float: right"
                     (click)="mostrandoDefinicion = false; runCode()"
                     class="btn btn-sm btn-secondary"
                     ngbPopover="{{

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss

 // Buttons Control
 .buttons-control {
-    .btn-zoom-increase, .btn-zoom-decrease, .btn-zoom-center, .btn-trash, .btn-download, .btn-setting {
-        float: right;
+  display: flex;
+  justify-content: flex-end;
   margin-top: -34px;
-    }
-    .btn-zoom-increase {
-        margin-right: 165px;
-    }
-    .btn-zoom-decrease {
-        margin-right: 132px;
-    }
-    .btn-zoom-center {
-        margin-right: 99px;
-    }
-    .btn-trash {
-        margin-right: 66px;
-    }
-    .btn-download {
-        margin-right: 33px;
-    }
+  margin-bottom: 7px;
 }
 
 // Settings Popover
@@ -46,7 +31,8 @@
     }
     &.disabled {
       color: #ccc;
-            i.fa, span {
+      i.fa,
+      span {
         color: #ccc;
       }
     }
@@ -60,7 +46,8 @@
 
 // Animation
 .animation {
-    .btn-play, .btn-pause {
+  .btn-play,
+  .btn-pause {
     float: left;
     margin-top: -5px;
     margin-right: 5px;
@@ -75,5 +62,3 @@
   height: 100%;
   width: 100%;
 }
-
-

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss

 .controls {
-	margin-top: -40px;
-	height: 35px;
-	padding: 4px;
+  display: flex;
+  justify-content: flex-end;
   align-self: flex-end;
+  width: fit-content;
+  margin: -35px -1px 7px 0;
 
   .button {
     float: right;
     margin-right: 165px;
-		margin-top: -55px
+    margin-top: -55px;
   }
 
   .ddown {

Frontend Angular 4/src/styles/bootstrap/_popover.scss

@@ -18,7 +18,6 @@
   @include border-radius($border-radius-lg);
   @include box-shadow($popover-box-shadow);
 
-
   // Popover directions
 
   &.popover-top,
@@ -67,7 +66,7 @@
     }
   }
 
-  &.popover-bottom,
+  &.bs-popover-bottom,
   &.bs-tether-element-attached-top {
     margin-top: $popover-arrow-width;
 
@@ -90,7 +89,7 @@
     }
 
     // This will remove the popover-title's border just below the arrow
-    .popover-title::before {
+    .popover-header::before {
       position: absolute;
       top: 0;
       left: 50%;
@@ -126,9 +125,8 @@
   }
 }
 
-
 // Offset the popover to account for the popover arrow
-.popover-title {
+.popover-header {
   padding: $popover-title-padding-y $popover-title-padding-x;
   margin-bottom: 0; // Reset the default from Reboot
   font-size: $font-size-base;
@@ -142,11 +140,10 @@
   }
 }
 
-.popover-content {
+.popover-body {
   padding: $popover-content-padding-y $popover-content-padding-x;
 }
 
-
 // Arrows
 //
 // .popover-arrow is outer, .popover-arrow::after is inner
@@ -169,3 +166,7 @@
   content: "";
   border-width: $popover-arrow-width;
 }
+
+.btn.btn-sm.btn-secondary {
+  margin-inline-start: 4px;
+}