Extract file with CSS for budget phases table

app/assets/stylesheets/admin.scss

@@ -1160,38 +1160,6 @@ table {
   }
 }
 
-.budget-phase-enabled {
-  font-weight: bold;
-  padding-left: rem-calc(20);
-  position: relative;
-  text-decoration: none;
-
-  &.enabled::before,
-  &.disabled::before {
-    font-family: "icons";
-    left: 0;
-    position: absolute;
-  }
-
-  &.enabled {
-    color: $check;
-
-    &::before {
-      color: $check;
-      content: "\6c";
-    }
-  }
-
-  &.disabled {
-    color: #000;
-
-    &::before {
-      color: #000;
-      content: "\76";
-    }
-  }
-}
-
 .columns-selector {
 
   [class^="icon-"] {

app/assets/stylesheets/admin/budget_phases/phases.css

@@ -0,0 +1,34 @@
+.budget-phases-table {
+
+  .budget-phase-enabled {
+    font-weight: bold;
+    padding-left: rem-calc(20);
+    position: relative;
+    text-decoration: none;
+
+    &.enabled::before,
+    &.disabled::before {
+      font-family: "icons";
+      left: 0;
+      position: absolute;
+    }
+
+    &.enabled {
+      color: $check;
+
+      &::before {
+        color: $check;
+        content: "\6c";
+      }
+    }
+
+    &.disabled {
+      color: #000;
+
+      &::before {
+        color: #000;
+        content: "\76";
+      }
+    }
+  }
+}

app/components/admin/budget_phases/phases_component.html.erb

@@ -1,5 +1,5 @@
 <% if phases.present? %>
-  <table id="budget-phases-table" class="table-for-mobile">
+  <table id="budget-phases-table" class="budget-phases-table table-for-mobile">
     <thead>
       <tr>
         <th><%= t("admin.budgets.edit.phase") %></th>