Use nested CSS in Tabs

Textualize · Oct 14, 2024 · 83707ad · 83707ad
1 parent 79e42fa
commit 83707ad
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/src/textual/widgets/_tabs.py b/src/textual/widgets/_tabs.py
@@ -95,23 +95,26 @@ class Tab(Static):
         padding: 1 1 0 2;
         text-align: center;
         color: $text-disabled;
-    }
-    Tab.-active {
-        text-style: bold;
-        color: $text;
-    }
-    Tab:hover {
-        text-style: bold;
-    }
-    Tab.-active:hover {
-        color: $text;
-    }
-    Tab:disabled {
-        color: $text-disabled;
-        text-opacity: 50%;
-    }
-    Tab.-hidden {
-        display: none;
+
+        &:hover {
+            text-style: bold;
+        }
+        &:disabled {
+            color: $text-disabled;
+            text-opacity: 50%;
+        }
+
+        &.-active {
+            color: $text;
+            text-style: bold;
+
+            &:hover {
+                color: $text;
+            }
+        }
+        &.-hidden {
+            display: none;
+        }
     }
     """