From 599a8f7b2659b9d0c56182a0b11d9a48425cb8ab Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 26 Jul 2018 12:23:50 -0400
Subject: [PATCH] labels and diffs

---
 scss/atat.scss             |  2 ++
 scss/elements/_diff.scss   | 36 ++++++++++++++++++++++++++++++++++++
 scss/elements/_labels.scss | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 scss/elements/_diff.scss
 create mode 100644 scss/elements/_labels.scss

diff --git a/scss/atat.scss b/scss/atat.scss
index 772d5e57..e3ab7868 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -13,6 +13,8 @@
 @import 'elements/tables';
 @import 'elements/sidenav';
 @import 'elements/action_group';
+@import 'elements/labels';
+@import 'elements/diff';
 
 @import 'components/layout';
 @import 'components/topbar';
diff --git a/scss/elements/_diff.scss b/scss/elements/_diff.scss
new file mode 100644
index 00000000..85ac4002
--- /dev/null
+++ b/scss/elements/_diff.scss
@@ -0,0 +1,36 @@
+[class*='diff--'] {
+  border-left-style: solid;
+  border-left-width: ($gap / 2);
+  padding-left: $gap / 2;
+  margin: ($gap / 2) 0;
+
+  &::before {
+    font-weight: bold;
+    padding-right: $gap;
+    display: inline-block;
+    width: 1.8rem;
+    text-align: center;
+  }
+}
+
+.diff--removed {
+  background-color: $color-red-lightest;
+  border-left-color: $color-red-dark;
+  text-decoration: line-through;
+  text-decoration-color: $color-overlay;
+
+  &::before {
+    content: '-';
+    color: $color-red-dark;
+  }
+}
+
+.diff--added {
+  background-color: $color-aqua-lightest;
+  border-left-color: $color-aqua-dark;
+
+  &::before {
+    content: '+';
+    color: $color-aqua-dark;
+  }
+}
diff --git a/scss/elements/_labels.scss b/scss/elements/_labels.scss
new file mode 100644
index 00000000..104894e4
--- /dev/null
+++ b/scss/elements/_labels.scss
@@ -0,0 +1,34 @@
+/*
+ * Labels
+ * @see https://designsystem.digital.gov/components/labels/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
+ */
+
+.label {
+  @include h5;
+  display: inline-block;
+  height: 2.4rem;
+  line-height: 2.4rem;
+  color: $color-white;
+  background-color: $color-gray;
+  vertical-align: middle;
+  margin: 0 $gap;
+  padding: 0 $gap;
+  border-radius: $gap / 2;
+
+  &.label--info {
+    background-color: $color-primary;
+  }
+
+  &.label--warning {
+    background-color: $color-gold;
+  }
+
+  &.label--error {
+    background-color: $color-red;
+  }
+
+  &.label--success {
+    background-color: $color-green;
+  }
+}