machines: Fix CSS rule specificity when overwriting PF4 rules

KKoukiou · web-flow · commit 05d59a6ce838 · 2020-11-26T11:15:28.000+01:00
PF4 imports come first, then we import the custom CSS. In SCSS the most recent rule should take effect, when there is not difference in the specificity. Seems that the ordering of the bundled CSS is not very consistent however. When being certain about overwriting default value, increase the specificity, so that we don't rely on the order of the imported CSS. Closes cockpit-project#14965
diff --git a/pkg/machines/components/stateIcon.scss b/pkg/machines/components/stateIcon.scss
@@ -16,6 +16,6 @@
   }
 }
 
-.resource-state--shut-off, .resource-state--inactive {
+.pf-c-label.resource-state--shut-off, .pf-c-label.resource-state--inactive {
   background: transparent;
 }
diff --git a/pkg/machines/components/vm/vmExpandedContent.scss b/pkg/machines/components/vm/vmExpandedContent.scss
@@ -31,7 +31,7 @@
     margin-top: 2rem;
 }
 
-.ct-vm-overview {
+.pf-l-gallery.ct-vm-overview {
   $ctVmBreakpoint: 1000px;
 
   @media screen and (max-width: $ctVmBreakpoint) {

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,6 @@`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`
`19`		`-.resource-state--shut-off, .resource-state--inactive {`
	`19`	`+.pf-c-label.resource-state--shut-off, .pf-c-label.resource-state--inactive {`
`20`	`20`	`background: transparent;`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`margin-top: 2rem;`
`32`	`32`	`}`
`33`	`33`
`34`		`-.ct-vm-overview {`
	`34`	`+.pf-l-gallery.ct-vm-overview {`
`35`	`35`	`$ctVmBreakpoint: 1000px;`
`36`	`36`
`37`	`37`	`@media screen and (max-width: $ctVmBreakpoint) {`