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;
-        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;
-    }
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -34px;
+  margin-bottom: 7px;
 }
 
 // Settings Popover
 .settings-popover-content {
-    width: 12em;
-    label {
-        display: block;
-        &.disabled {
-            color: #ccc;
-        }
+  width: 12em;
+  label {
+    display: block;
+    &.disabled {
+      color: #ccc;
     }
-    input[type="checkbox"] {
-        width: 15px;
-        display: inline-block;
+  }
+  input[type="checkbox"] {
+    width: 15px;
+    display: inline-block;
+  }
+  .setting-section {
+    margin-bottom: 1em;
+  }
+  .animation-controls {
+    .speed-value {
+      margin-left: 0.5em;
+      font-weight: 900;
+      font-size: 1.2em;
+      vertical-align: middle;
     }
-    .setting-section {
-        margin-bottom: 1em;
+    &.disabled {
+      color: #ccc;
+      i.fa,
+      span {
+        color: #ccc;
+      }
     }
-    .animation-controls {
-        .speed-value {
-            margin-left: 0.5em;
-            font-weight: 900;
-            font-size: 1.2em;
-            vertical-align: middle;
-        }
-        &.disabled {
-            color: #ccc;
-            i.fa, span {
-                color: #ccc;
-            }
-        }
-    }
-    .zoom-control {
-        &>.disabled {
-            color: #ccc;
-        }
+  }
+  .zoom-control {
+    & > .disabled {
+      color: #ccc;
     }
+  }
 }
 
 // Animation
 .animation {
-    .btn-play, .btn-pause {
-        float:left;
-        margin-top: -5px;
-        margin-right: 5px;
-    }
-    .progressbar {
-        float: left;
-        width: 90%;
-    }
+  .btn-play,
+  .btn-pause {
+    float: left;
+    margin-top: -5px;
+    margin-right: 5px;
+  }
+  .progressbar {
+    float: left;
+    width: 90%;
+  }
 }
 
 #graph2D-container {
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
 }
-
-

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

 .controls {
-	margin-top: -40px;
-	height: 35px;
-	padding: 4px;
-	align-self: flex-end;
-
-	.button {
-		float:right; 
-		margin-right: 165px; 
-		margin-top: -55px
-	}
-	
-	.ddown {
-		vertical-align: bottom;
-
-		button {
-			padding: 2.5px 8px 2.5px 3px;
-		}
-	}
-
-	.axes-size {
-		width: 165px;
-
-		.axe {
-			display: flex;
-
-			&:not(:last-child) {
-				margin-bottom: 6px;
-			}
-
-			.less-than {
-				padding: 0 2.5px 0 5px;
-				font-size: 17px; 
-				letter-spacing: 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;
+  }
+
+  .ddown {
+    vertical-align: bottom;
+
+    button {
+      padding: 2.5px 8px 2.5px 3px;
+    }
+  }
+
+  .axes-size {
+    width: 165px;
+
+    .axe {
+      display: flex;
+
+      &:not(:last-child) {
+        margin-bottom: 6px;
+      }
+
+      .less-than {
+        padding: 0 2.5px 0 5px;
+        font-size: 17px;
+        letter-spacing: 4px;
+      }
+    }
+  }
 }
 
-.dropdown-item:disabled{
-	background-color: #f7f7f7;
-	color: #9e9e9e;
+.dropdown-item:disabled {
+  background-color: #f7f7f7;
+  color: #9e9e9e;
 }
 
-.d-block{
-	display: block;
-}
\ No newline at end of file
+.d-block {
+  display: block;
+}

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;
+}