Get rid of all in-canvas !important

Since the push support for nested elements got reverted the height doesn't have to fight inline CSS anymore. Box shadow and transform override work with a increased CSS specificity now.

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index ab4a068da745c7b41a8273b6e572c77f7c599b56..0a12e4738c7bfd63d322290a96bc043edfe6d636 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -341,15 +341,22 @@ $content: $maincontent-class
 
 /// Overrides the off-canvas styles
 @mixin in-canvas() {
-  transform: none !important;
   visibility: visible;
-  height: auto !important;
-  box-shadow: none !important;
+  height: auto;
   position: static;
   background: inherit;
   width: inherit;
   overflow: inherit;
   transition: inherit;
+
+  // Increase CSS specificity
+  &.position-left,
+  &.position-right,
+  &.position-top,
+  &.position-bottom {
+    box-shadow: none;
+    transform: none;
+  }
 }
 
 @mixin foundation-off-canvas {