@primer/css 20.0.0-rc.58205059 → 20.0.0-rc.f8eae025

package/support/mixins/misc.scss

@@ -24,3 +24,27 @@
     background-color: $border;
   }
 }
+
+// global focus styles
+
+@mixin focusOutline {
+  z-index: 1;
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}
+
+// if min-width is undefined, return only min-height
+@mixin minTouchTarget($min-height: 32px, $min-width: '') {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: $min-height;
+  content: '';
+  transform: translateX(-50%) translateY(-50%);
+
+  @if $min-width != '' {
+    min-width: $min-width;
+  }
+}

package/support/mixins/typography.scss

@@ -47,7 +47,6 @@
 
   // 32px on desktop
   @include breakpoint(md) { font-size: $h1-size; }
-
 }
 
 @mixin f2-responsive {
@@ -62,7 +61,6 @@
 
   // 20px on desktop
   @include breakpoint(md) { font-size: $h3-size; }
-
 }
 
 // These use the mixins from above for responsive heading sizes.
@@ -70,15 +68,18 @@
 // couple the responsive font-size with the font-weight.
 @mixin h1-responsive {
   @include f1-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h2-responsive {
   @include f2-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h3-responsive {
   @include f3-responsive;
+
   font-weight: $font-weight-bold;
 }