Merge branch 'master' into ui/tooltips

styles/atat.scss

@@ -17,6 +17,7 @@
 @import 'elements/labels';
 @import 'elements/diff';
 @import 'elements/tooltip';
+@import 'elements/kpi';
 
 @import 'components/topbar';
 @import 'components/global_layout';

styles/elements/_inputs.scss

@@ -79,7 +79,7 @@
       margin-left: $gap;
     }
   }
-
+  
   .usa-input__title {
     display: flex;
     align-items: center;
@@ -90,7 +90,7 @@
       margin-left: $gap/2;
     }
   }
-
+  
   .usa-input__help {
     @include h4;
     font-weight: normal;

styles/elements/_kpi.scss

@@ -0,0 +1,25 @@
+.kpi {
+
+    margin-bottom: $gap;
+
+  .kpi__item {
+    @include panel-base;
+    text-align: center;
+    margin: $gap;
+    padding: $gap * 2;
+
+    &:first-child {
+      margin-left: -$gap;
+    }
+
+    &:last-child {
+      margin-right: -$gap;
+    }
+  }
+
+  .kpi__item__value {
+    @include h1;
+    padding-bottom: $gap / 2;
+  }
+
+}

styles/elements/_panels.scss

@@ -29,6 +29,19 @@
   }
 }
 
+@mixin panel-row {
+  @include grid-row;
+
+  .col {
+    margin: 0 $site-margins-mobile * 2;
+
+    @include media($medium-screen) {
+      margin: 0 $site-margins * 2;
+    }
+  }
+
+}
+
 @mixin panel-actions {
   padding: $gap;
 }