Merge pull request #433 from opensafely-core/fix-nesting

Remove nested CSS
opensafely-core · Jun 28, 2024 · b25af4a · b25af4a
2 parents f82e26e + 5ae2a26
commit b25af4a
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 67 deletions.
diff --git a/airlock/static/assets/datatable.css b/airlock/static/assets/datatable.css
@@ -8,17 +8,19 @@
 #customTable.datatable-table th:first-child,
 #customTable.datatable-table td:first-child {
   padding-inline-start: 1.25rem;
+}
 
-  button {
-    padding-inline-start: 0;
-  }
+#customTable.datatable-table th:first-child button,
+#customTable.datatable-table td:first-child button {
+  padding-inline-start: 0;
 }
 
 #customTable.datatable-table th:last-child,
 #customTable.datatable-table td:last-child {
   padding-inline-end: 1.25rem;
+}
 
-  button {
-    padding-inline-end: 0;
-  }
+#customTable.datatable-table th:last-child button,
+#customTable.datatable-table td:last-child button {
+  padding-inline-end: 0;
 }
diff --git a/airlock/static/assets/file_browser/tree.css b/airlock/static/assets/file_browser/tree.css
@@ -21,11 +21,11 @@
 .tree__folder {
   --arrows-url: url("/static/icons/keyboard_arrow_right.svg");
   --folders-url: url("/static/icons/folder.svg");
+}
 
-  &[open] {
-    --arrows-url: url("/static/icons/keyboard_arrow_down.svg");
-    --folders-url: url("/static/icons/folder_open.svg");
-  }
+.tree__folder[open] {
+  --arrows-url: url("/static/icons/keyboard_arrow_down.svg");
+  --folders-url: url("/static/icons/folder_open.svg");
 }
 
 .tree__folder-name {
@@ -118,63 +118,53 @@
   margin-left: 0.25rem;
   width: 14px;
 }
-
-[data-workspace] {
-  .workspace_under_review {
-    --file-bg: var(--color-cyan-50);
-    --file-border: var(--color-cyan-500);
-    --file-name: var(--color-cyan-900);
-    --icon-filter: invert(25%) sepia(27%) saturate(1303%) hue-rotate(151deg)
-      brightness(91%) contrast(89%);
-    --icon-url: url("/static/icons/add_circle_outline.svg");
-  }
-}
-
-[data-request] {
-  .tree__file.withdrawn {
-    --file-bg: var(--color-orange-50) !important;
-    --file-border: var(--color-orange-700) !important;
-    --file-name: var(--color-orange-800) !important;
-    --icon-filter: invert(25%) sepia(6%) saturate(7490%) hue-rotate(333deg)
-      brightness(115%) contrast(111%) !important;
-    --icon-url: url("/static/icons/cancel_circle_outline.svg") !important;
-  }
-
-  .tree__file.supporting {
-    --file-bg: var(--color-slate-50);
-    --file-border: var(--color-slate-50);
-    --file-name: var(--color-slate-800);
-    --icon-filter: invert(10%) sepia(9%) saturate(3595%) hue-rotate(178deg)
-      brightness(93%) contrast(85%);
-    --icon-url: url("/static/icons/attach_file.svg");
-  }
-}
-
-[data-output-checker][data-request]:not([data-author]) {
-  .tree__file.output {
-    --file-bg: var(--color-yellow-50);
-    --file-border: var(--color-yellow-500);
-    --file-name: var(--color-yellow-800);
-    --icon-filter: invert(30%) sepia(79%) saturate(491%) hue-rotate(351deg)
-      brightness(95%) contrast(99%);
-    --icon-url: url("/static/icons/unknown.svg");
-  }
-
+[data-workspace] .workspace_under_review {
+  --file-bg: var(--color-cyan-50);
+  --file-border: var(--color-cyan-500);
+  --file-name: var(--color-cyan-900);
+  --icon-filter: invert(25%) sepia(27%) saturate(1303%) hue-rotate(151deg)
+    brightness(91%) contrast(89%);
+  --icon-url: url("/static/icons/add_circle_outline.svg");
+}
+[data-request] .tree__file.withdrawn {
+  --file-bg: var(--color-orange-50) !important;
+  --file-border: var(--color-orange-700) !important;
+  --file-name: var(--color-orange-800) !important;
+  --icon-filter: invert(25%) sepia(6%) saturate(7490%) hue-rotate(333deg)
+    brightness(115%) contrast(111%) !important;
+  --icon-url: url("/static/icons/cancel_circle_outline.svg") !important;
+}
+[data-request] .tree__file.supporting {
+  --file-bg: var(--color-slate-50);
+  --file-border: var(--color-slate-50);
+  --file-name: var(--color-slate-800);
+  --icon-filter: invert(10%) sepia(9%) saturate(3595%) hue-rotate(178deg)
+    brightness(93%) contrast(85%);
+  --icon-url: url("/static/icons/attach_file.svg");
+}
+[data-output-checker][data-request]:not([data-author]) .tree__file.output {
+  --file-bg: var(--color-yellow-50);
+  --file-border: var(--color-yellow-500);
+  --file-name: var(--color-yellow-800);
+  --icon-filter: invert(30%) sepia(79%) saturate(491%) hue-rotate(351deg)
+    brightness(95%) contrast(99%);
+  --icon-url: url("/static/icons/unknown.svg");
+}
+[data-output-checker][data-request]:not([data-author])
   .tree__file.user_approved {
-    --file-bg: var(--color-emerald-50);
-    --file-border: var(--color-emerald-500);
-    --file-name: var(--color-emerald-800);
-    --icon-filter: invert(18%) sepia(77%) saturate(1712%) hue-rotate(142deg)
-      brightness(102%) contrast(95%);
-    --icon-url: url("/static/icons/check_circle_outline.svg");
-  }
-
+  --file-bg: var(--color-emerald-50);
+  --file-border: var(--color-emerald-500);
+  --file-name: var(--color-emerald-800);
+  --icon-filter: invert(18%) sepia(77%) saturate(1712%) hue-rotate(142deg)
+    brightness(102%) contrast(95%);
+  --icon-url: url("/static/icons/check_circle_outline.svg");
+}
+[data-output-checker][data-request]:not([data-author])
   .tree__file.user_rejected {
-    --file-bg: var(--color-fuchsia-50);
-    --file-border: var(--color-fuchsia-500);
-    --file-name: var(--color-fuchsia-800);
-    --icon-filter: invert(17%) sepia(40%) saturate(5736%) hue-rotate(284deg)
-      brightness(89%) contrast(98%);
-    --icon-url: url("/static/icons/help_circle_outline.svg");
-  }
+  --file-bg: var(--color-fuchsia-50);
+  --file-border: var(--color-fuchsia-500);
+  --file-name: var(--color-fuchsia-800);
+  --icon-filter: invert(17%) sepia(40%) saturate(5736%) hue-rotate(284deg)
+    brightness(89%) contrast(98%);
+  --icon-url: url("/static/icons/help_circle_outline.svg");
 }