Disable no-unknown-animation rule on global animations

Author: Stephanie Hobson

assets/sass/protocol/components/_menu.scss

@@ -179,7 +179,7 @@
         &.mzp-is-animated {
             .mzp-c-menu-panel,
             .mzp-c-menu-title::after {
-                animation: mzp-a-fade-in 80ms ease-in 0ms 1 normal both;
+                animation: mzp-a-fade-in 80ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */
             }
         }
 

assets/sass/protocol/components/_modal.scss

@@ -31,7 +31,7 @@ html.mzp-is-noscroll {
 }
 
 .mzp-c-modal {
-    animation: mzp-a-fade-in 300ms ease-in 0ms 1 normal both;
+    animation: mzp-a-fade-in 300ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */
     background: $color-black;
     background: rgba(0, 0, 0, 0.85);
     bottom: 0;

assets/sass/protocol/components/_sticky-promo.scss

@@ -53,7 +53,7 @@ $logos: (
     }
 
     &.mzp-a-fade-out {
-        animation: mzp-a-fade-out 100ms ease 5ms both;
+        animation: mzp-a-fade-out 100ms ease 5ms both; /* stylelint-disable-line no-unknown-animations */
     }
 
     @media #{$mq-sm} {

assets/sass/protocol/includes/mixins/_details.scss

@@ -5,7 +5,6 @@
 @use '../tokens';
 @use 'bidi';
 @use 'images';
-@use 'utils';
 
 @mixin details {
     .is-summary {
@@ -34,9 +33,9 @@
 
     &::before {
         background: images.$url-image-expand-black top left no-repeat;
-        @include utils.background-size(20px, 20px);
+        background-size: 20px, 20px;
         @include bidi.bidi(((right, 8px, left, auto),));
-        @include utils.transition(transform 100ms ease-in-out);
+        transition: transform 100ms ease-in-out;
         content: '';
         height: 20px;
         margin-top: -8px;
@@ -47,5 +46,5 @@
 }
 
 @mixin summary-open {
-    @include utils.transform(rotate(45deg));
+    transform: rotate(45deg);
 }

assets/sass/protocol/includes/mixins/_grid.scss

@@ -3,7 +3,6 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @use '../tokens';
-@use 'utils';
 
 // Grid columns
 $column-width: 8.333%; // 100% / 12 columns
@@ -13,7 +12,7 @@ $gutter-width: tokens.$layout-sm;
 // Usage:
 //  .foo { @include colspan(4); }
 @mixin colspan($columns) {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: $column-width * $columns;
     padding-left: $gutter-width * 0.5;
     padding-right: $gutter-width * 0.5;
@@ -25,26 +24,26 @@ $gutter-width: tokens.$layout-sm;
 }
 
 @mixin grid-quarter {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 25%;
 }
 
 @mixin grid-third {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 33.333%;
 }
 
 @mixin grid-half {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 50%;
 }
 
 @mixin grid-two-thirds {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 66.666%;
 }
 
 @mixin grid-three-quarters {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 75%;
 }