Fix tab alignment on updated theme

uyuni-project · May 15, 2024 · 10f9810 · 10f9810
1 parent 4234133
commit 10f9810
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 22 deletions.
diff --git a/web/html/src/branding/css/base/fixes.scss b/web/html/src/branding/css/base/fixes.scss
@@ -29,12 +29,17 @@ div.checkbox.icon-wrapper i.fa {
 
 /**
  * This allows us to fix layouts on Bootstrap 5 pages without affecting Bootstrap 3 pages
- * TODO: Remove and replace its usages with just `row` after we finish the migration
+ * TODO: Can we remove and replace its usages with just `row` after we finish the migration?
  */
 .form-group {
   @extend .row;
 }
 
+// TODO: Remove this and squash it into just `row` after the migration is complete.
+.row-0 {
+  @extend .row;
+}
+
 // We use float utilities from Bootstrap 3 in a number of places, this emulates the same behavior. Over time we should be able to refactor these out.
 .pull-right {
   float: right !important;

diff --git a/web/html/src/branding/css/base/theme.less b/web/html/src/branding/css/base/theme.less
@@ -940,15 +940,6 @@ i.spacewalk-help-link {
       padding-bottom: 1px;
     }
   }
-  .nav-tabs-indent(1);
-  .nav-tabs-indent(2);
-  .nav-tabs-indent(3);
-
-  .nav-tabs-indent(@i) {
-    &:nth-child(@{i}) {
-      margin-left: (@i - 1) * 30px;
-    }
-  }
 }
 
 /* Override rules from theme.less that uses

diff --git a/web/html/src/branding/css/base/theme.scss b/web/html/src/branding/css/base/theme.scss
@@ -954,18 +954,6 @@ i.spacewalk-help-link {
       padding-bottom: 1px;
     }
   }
-
-// TODO: Fix
-// See https://stackoverflow.com/a/77366360/1470607
-//  .nav-tabs-indent(1);
-//  .nav-tabs-indent(2);
-//  .nav-tabs-indent(3);
-
-//  .nav-tabs-indent($i) {
-//    &:nth-child(${i}) {
-//      margin-left: ($i - 1) * 30px;
-//    }
-//  }
 }
 
 /* Override rules from theme.less that uses

diff --git a/web/html/src/branding/css/susemanager/components/nav.less b/web/html/src/branding/css/susemanager/components/nav.less
@@ -1,7 +1,17 @@
+@nav-tabs-offset: 30px;
+
 .nav-tabs {
   margin-bottom: 0.25rem;
   border-bottom: 1px solid @eos-bc-gray-100;
 
+  &:nth-child(2) {
+    margin-left: @nav-tabs-offset;
+  }
+
+  &:nth-child(3) {
+    margin-left: 2* @nav-tabs-offset;
+  }
+
   &:last-child {
     margin-bottom: 1rem;
   }

diff --git a/web/html/src/branding/css/susemanager/components/nav.scss b/web/html/src/branding/css/susemanager/components/nav.scss
@@ -1,7 +1,17 @@
+$nav-tabs-offset: 30px;
+
 .nav-tabs {
   margin-bottom: 0.25rem;
   border-bottom: 1px solid $eos-bc-gray-100;
 
+  &:nth-child(2) {
+    margin-left: $nav-tabs-offset;
+  }
+
+  &:nth-child(3) {
+    margin-left: 2* $nav-tabs-offset;
+  }
+
   &:last-child {
     margin-bottom: 1rem;
   }