Subtle USP modifier, resolves #253

uswitch · Feb 2, 2018 · 17db930 · 17db930
1 parent 9cea924
commit 17db930
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 5 deletions.
diff --git a/.ruby-version b/.ruby-version
@@ -1 +1 @@
-2.2.3
+2.3.4
diff --git a/dist/ustyle-content.css b/dist/ustyle-content.css
diff --git a/dist/ustyle-latest.css b/dist/ustyle-latest.css
diff --git a/dist/ustyle.json b/dist/ustyle.json
diff --git a/vendor/assets/stylesheets/ustyle/components/_tabs.scss b/vendor/assets/stylesheets/ustyle/components/_tabs.scss
@@ -202,11 +202,11 @@ $tab-active-color: $tab-border-color;
   display: flex;
   -webkit-box-align: center;
   -webkit-box-pack: center;
+  -webkit-align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -ms-flex-align: center;
   -ms-flex-pack: center;
-  -webkit-align-items: center;
   align-items: center;
 }
 // scss-lint:enable Comment, MergeableSelector

diff --git a/vendor/assets/stylesheets/ustyle/components/_usp.scss b/vendor/assets/stylesheets/ustyle/components/_usp.scss
@@ -17,6 +17,7 @@
 // @state .us-usp--red - Generic vertical specific USP.
 //
 // @markup
+//   <div class='us-usp us-usp--subtle {$modifiers}'>Subtle USP</div>
 //   <div class='us-usp {$modifiers}'>Shortened USP</div>
 //   <div class='us-usp us-usp--annotated'>
 //     <div class='us-usp {$modifiers}'>Annotated USP</div>
@@ -54,6 +55,10 @@ $variants: (
       color: #{nth($colour, 3)};
     }
   }
+
+  .us-usp--subtle.us-usp--#{nth($colour, 1)} {
+    color: #{nth($colour, 2)};
+  }
 }
 
 .us-usp--annotated {
@@ -67,3 +72,32 @@ $variants: (
     margin-left: -10px;
   }
 }
+
+.us-usp--subtle {
+  width: 100%;
+  padding: 0;
+  font-size: 1em;
+  color: $c-typecyan;
+  background-color: transparent;
+
+  @include respond-to(tablet) {
+    width: auto;
+  }
+
+  &:after {
+    @include respond-to(tablet) {
+      position: relative;
+      top: -1px;
+      right: 0;
+      margin-right: 3px;
+      font-weight: normal;
+      line-height: 0;
+      color: $c-bordergrey;
+      content: " | ";
+    }
+  }
+
+  &:last-child:after {
+    display: none;
+  }
+}