Merge pull request #1254 from primer/tobiasahlin/add-common-utilities

Add common marketing utilities to primer/marketing

Author: jonrohan

.changeset/nervous-plants-smell.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add common marketing utilities to primer/marketing

src/marketing/support/variables.scss

@@ -8,6 +8,7 @@ $h000-size-mobile: 48px !default;
 
 // Animations
 $transition-time: 0.4s !default;
+$ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;
 
 // Increases the core spacing scale first by 8px for $spacer-7, then by 16px
 // increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,

src/marketing/utilities/animations.scss

@@ -0,0 +1,9 @@
+// Animation utilities for marketing
+
+.hover-grow-mktg {
+  transition: transform 0.4s $ease-mktg;
+
+  &:hover {
+    transform: scale3d(1.025, 1.025, 1.025);
+  }
+}

src/marketing/utilities/index.scss

@@ -1,7 +1,8 @@
 @import "../support/index.scss";
 // utilities
-@import "./filters.scss";
+@import "./animations.scss";
 @import "./borders.scss";
+@import "./filters.scss";
 @import "./layout.scss";
 @import "./margin.scss";
 @import "./misc.scss";

src/marketing/utilities/layout.scss

@@ -27,3 +27,20 @@
     }
   }
 }
+
+// Width and height utilities, especially needed when the
+// dimensions of an image are set in HTML
+.width-auto { width: auto !important; }
+.height-auto { height: auto !important; }
+
+// Make an object fill its parent
+.object-fit-cover { object-fit: cover !important; }
+
+// Handling z-index
+.z-1 { z-index: 1 !important; }
+.z-2 { z-index: 2 !important; }
+.z-3 { z-index: 3 !important; }
+
+// Negative z-index
+.z-n1 { z-index: -1 !important; }
+.z-n2 { z-index: -2 !important; }

src/marketing/utilities/margin.scss

@@ -8,10 +8,19 @@
       .mt#{$variant}-#{$scale} { margin-top: $size !important; }
       .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
 
+      .mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
+      .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
+
       .my#{$variant}-#{$scale} {
         margin-top: $size !important;
         margin-bottom: $size !important;
       }
     }
   }
 }
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.m-auto { margin: auto !important; }