pusher-chameleon 1.4.3 → 1.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cf66ca301d57b0e7e97e1f67885be714bd93bfff
-  data.tar.gz: 6de3cc8d191060150f2b09c75c42bb3ac312f98a
+  metadata.gz: 78648560b78ca0e085d979957cbadd3a0abf1227
+  data.tar.gz: 553d1dbebed36d3013ea3964c52df712ea800657
 SHA512:
-  metadata.gz: 96c1f52a0dfa20cda1da39d68008bded3b1e23d07720640c4486ddbf678d9f40179690dcdb8f7204fbd1465c91594cf5ac6b5944be6f01cadeec4a0403b68068
-  data.tar.gz: 78e2d1fede8202a5652cc8767c739bcb815d3bc62587dfc780eeb7d89cf54c86a74f22cebed11cffbb8c86e61b39752b91290f111dceaa0014c082497250bbad
+  metadata.gz: c9cd05678ce3a22d03bad2f49ed577c26535e4bf8deec580198e4029c76f2d2021cb7d0e53359e39e19cca7f2c5e5ab51f2db50add355ac121b112be221614db
+  data.tar.gz: 3e8d202fdad4ac56320fbae1aefd0980c8f3226a9df583d945786b5791b9982c12009dfc3f320a46a6e8ca482b23d35c22da49967a6af12c28aee9ece988d583

data/Gemfile

@@ -1,5 +1,3 @@
 source 'https://rubygems.org'
 
 gemspec
-
-gem 'jekyll'

data/Gemfile.lock

@@ -1,58 +1,23 @@
 PATH
   remote: .
   specs:
-    pusher-chameleon (1.4.3)
+    pusher-chameleon (1.4.4)
       sass (>= 3.2.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.5.0)
-      public_suffix (~> 2.0, >= 2.0.2)
-    colorator (1.1.0)
-    ffi (1.9.14)
-    forwardable-extended (2.6.0)
     gem_publisher (1.3.1)
-    jekyll (3.3.1)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 1.1)
-      kramdown (~> 1.3)
-      liquid (~> 3.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (~> 1.7)
-      safe_yaml (~> 1.0)
-    jekyll-sass-converter (1.5.0)
-      sass (~> 3.4)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
-    kramdown (1.13.1)
-    liquid (3.0.6)
-    listen (3.0.8)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    mercenary (0.3.6)
-    pathutil (0.14.0)
-      forwardable-extended (~> 2.6)
-    public_suffix (2.0.4)
     rake (0.9.2.2)
-    rb-fsevent (0.9.8)
-    rb-inotify (0.9.7)
-      ffi (>= 0.5.0)
-    rouge (1.11.1)
-    safe_yaml (1.0.4)
-    sass (3.4.22)
+    sass (3.4.23)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   gem_publisher (= 1.3.1)
-  jekyll
   pusher-chameleon!
   rake (= 0.9.2.2)
 
 BUNDLED WITH
-   1.13.6
+   1.14.3

data/docs/_posts/2016-03-17-forms.md

@@ -37,6 +37,24 @@ As well as classes to indicate status:
 <input type="password" class="error" placeholder="Password">
 ```
 
+## Inline Validation Alerts
+
+These inline alerts can be used to display form validation notices to users. Note that these require the input to be wrapped in a `form__field` container. The alert can be animated in by toggling the `has-validation-alert` class on the `form__field` wrapper.
+
+<div class="pattern">
+  <div class="form__field has-validation-alert">
+    <input type="email" placeholder="Email address">
+    <span class="input-validation-alert input-validation-alert--error">Sorry, we were unable to subscribe you</span>
+  </div>
+</div>
+
+``` html
+<div class="form__field has-validation-alert">
+  <input type="email" placeholder="Email address">
+  <span class="input-validation-alert input-validation-alert--error">Sorry, we were unable to subscribe you</span>
+</div>
+```
+
 ## Select
 <div class="pattern">
   <select>
@@ -63,4 +81,4 @@ As well as classes to indicate status:
 
 ```html
 <input type="checkbox" value="1" checked="checked" name="hello" id="hello">
-```
+```

data/docs/_sass/_base.scss

@@ -32,5 +32,5 @@ hr {
   border: 0;
   border-top: 1px solid #ddd;
   margin: 30px 0;
-  padding: 0; 
+  padding: 0;
 }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pusher-chameleon",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "A collection of front-end patterns used across Pusher.",
   "repository": "https://github.com/pusher/chameleon",
   "keywords": [

data/stylesheets/components/_statistic.scss

@@ -59,4 +59,4 @@
       padding-left: 10px;
     }
   }
-}
+}

data/stylesheets/forms/_fieldset.scss

@@ -15,4 +15,4 @@
       width: auto;
     }
   }
-}
+}

data/stylesheets/forms/_forms.scss

@@ -8,6 +8,7 @@
 @import 'input';
 @import 'textarea';
 @import 'checkbox';
+@import 'validation_alert';
 
 @mixin CHAMELEON-forms {
   @include CHAMELEON-forms-buttons;
@@ -18,4 +19,5 @@
   @include CHAMELEON-forms-input;
   @include CHAMELEON-forms-textarea;
   @include CHAMELEON-forms-checkbox;
-}
+  @include CHAMELEON-forms-validation-alert;
+}

data/stylesheets/forms/_input.scss

@@ -11,4 +11,4 @@
   input[type="phone"] {
     @include base-input();
   }
-}
+}

data/stylesheets/forms/_validation_alert.scss

@@ -0,0 +1,57 @@
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+// Input Validation Alerts
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+@mixin CHAMELEON-forms-validation-alert {
+  .input-validation-alert {
+    display: block;
+    font-size: rem-calc(14px);
+    font-weight: 400;
+    opacity: 0;
+    padding: 12px 5px;
+    position: absolute;
+    text-align: center;
+    transform: translateY(20px);
+    transition: all 180ms ease-in-out;
+    width: 100%;
+    z-index: 10;
+
+    &:before {
+      border-bottom: 8px solid transparent;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      content: '';
+      display: block;
+      height: 0;
+      left: 50%;
+      position: absolute;
+      top: -7px;
+      transform: translate(-50%, 0);
+      width: 0;
+    }
+
+    .form__field.has-validation-alert & {
+      opacity: 1;
+      // Negative Y position in order to overlay the input border
+      transform: translateY(-1px);
+    }
+  }
+
+  .input-validation-alert--information {
+    background-color: $color-information;
+    color: #fff;
+
+    &::before {
+      border-bottom-color: $color-information;
+    }
+  }
+
+  .input-validation-alert--error {
+    background-color: $color-danger;
+    color: #fff;
+
+    &::before {
+      border-bottom-color: $color-danger;
+    }
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pusher-chameleon
 version: !ruby/object:Gem::Version
-  version: 1.4.3
+  version: 1.4.4
 platform: ruby
 authors:
 - Alex Pate
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-01-17 00:00:00.000000000 Z
+date: 2017-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -149,6 +149,7 @@ files:
 - stylesheets/forms/_range.scss
 - stylesheets/forms/_select.scss
 - stylesheets/forms/_textarea.scss
+- stylesheets/forms/_validation_alert.scss
 - stylesheets/grid/_classes.scss
 - stylesheets/grid/_column.scss
 - stylesheets/grid/_flex-grid.scss
@@ -198,7 +199,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.8
+rubygems_version: 2.6.10
 signing_key: 
 specification_version: 4
 summary: Pusher Chameleon front-end asset library