pusher-chameleon 1.4.1 → 1.4.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6df41512bc95d88db45bab8875d66f287a7cb0af
-  data.tar.gz: b81f64591cff98a1f49b5df1106b965ecddc3fcb
+  metadata.gz: d7731a1fe6a6663cad4eb751e7b41804499db014
+  data.tar.gz: c9125d650c9c006837fecea53074d3546f58ec8d
 SHA512:
-  metadata.gz: b058b03fd9e35e32337b5f549b1d95a393b92440ad4ccd14da90e8cafc51505922010b3efc72a46b088c7b44eccdab062daba541d01672a7982000bee04482ed
-  data.tar.gz: de74e51f4fbd813ea3a504416c2307f605236651771a3f31dc33ed775ec6156c912a820278b63922203d34006377b3d1fe598fc83dfd49e9dcd4014442b9494a
+  metadata.gz: 74e907bc9ec1ebdde6bb4ab3c8913fcc36f9ca0cefd5f66de4e5fd9c1c220b513dad12864b5a3b40d2f066edfb86327805b3be0eef4b8a2e04ca3d3fbf25dfa6
+  data.tar.gz: 3abac4f22ef619f409d8fdaab3f4b0f927d09f0180c77119cb679e12c99b8d4d4e4e2b6dcd7aa8aca698bfbcc5e11639ac578204e217dbf7fc6a816190c11a8a

data/.ruby-version

@@ -1 +1 @@
-2.2
+2.2.10

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    pusher-chameleon (0.5.5)
+    pusher-chameleon (1.4.4)
       sass (>= 3.2.0)
 
 GEM
@@ -9,7 +9,7 @@ GEM
   specs:
     gem_publisher (1.3.1)
     rake (0.9.2.2)
-    sass (3.4.22)
+    sass (3.4.23)
 
 PLATFORMS
   ruby
@@ -20,4 +20,4 @@ DEPENDENCIES
   rake (= 0.9.2.2)
 
 BUNDLED WITH
-   1.11.2
+   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.1",
+  "version": "1.4.6",
   "description": "A collection of front-end patterns used across Pusher.",
   "repository": "https://github.com/pusher/chameleon",
   "keywords": [

data/stylesheets/_global.scss

@@ -37,7 +37,7 @@ $color-palette: (
   danger: #b74a48,
   information: #34495e,
   alert: #b74a48,
-  beta: #a57cec
+  beta: #a57cec,
 ) !default;
 
 $color-primary: map-get($color-palette, primary);
@@ -56,7 +56,7 @@ $color-neutrals: (
   slate: #414859,
   silver: #8690a6,
   smoke: #d3dce7,
-  snow: #f4f8fb
+  snow: #f4f8fb,
 ) !default;
 
 $color-white: map-get($color-neutrals, white);
@@ -69,17 +69,15 @@ $color-snow: map-get($color-neutrals, snow);
 $color-off-white: $color-snow;
 $color-grey-one: $color-silver;
 
-
 // Typography
 $global-font-size: 100% !default;
 $global-font-smoothing: false !default;
 
-$font-family-primary: 'pusher-realtime-text', Helmet, Freesans, sans-serif !default;
-$font-family-secondary: 'pusher-proxima-nova', Helmet, Freesans, sans-serif !default;
-$font-family-monospace: Menlo, Consolas, Monaco, 'Andale Mono', monospace !default;
-
-$syntax-highlighting-style: 'light' !default;
+$font-family-primary: "pusher-realtime-text", Helmet, Freesans, sans-serif;
+$font-family-secondary: "pusher-proxima-nova", Helmet, Freesans, sans-serif;
+$font-family-monospace: Menlo, Consolas, Monaco, "Andale Mono", monospace;
 
+$syntax-highlighting-style: "light" !default;
 
 %font-family-primary {
   font-family: $font-family-primary;
@@ -93,4 +91,4 @@ $cdn-url: "https://d2cy1obokpvee9.cloudfront.net";
 
 // Misc
 $border-radius: 0px !default;
-$button-namespace: 'btn' !default;
+$button-namespace: "btn" !default;

data/stylesheets/components/_statistic.scss

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

data/stylesheets/forms/_base.scss

@@ -36,9 +36,20 @@
     border-width: 1px;
   }
 
+  &:disabled {
+    cursor: not-allowed;
+    opacity: .7;
+    background: #d4d4d4;
+    border: 1px solid darken(#d4d4d4, 10%);
+    color: #444444;
+  }
+
+  &.input--light {
+    color: #fff;
+  }
+
   &.input--light:not(.error):not(.valid) {
     border: 1px solid rgba(#ddd, .2);
-    color: #fff;
 
     &:focus {
       border: 1px solid $color-primary;

data/stylesheets/forms/_buttons.scss

@@ -175,7 +175,8 @@
       }
     }
 
-    &--disabled {
+    &--disabled,
+    &:disabled {
       cursor: not-allowed;
       opacity: .7;
       background: #d4d4d4;

data/stylesheets/forms/_checkbox.scss

@@ -3,7 +3,8 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 @mixin CHAMELEON-forms-checkbox {
-  input[type="checkbox"] {
+  // Renaming as conflicting with https://github.com/pusher/dash/blob/c4c48d45172aee35c725d3fd413a767a43c13d3b/app/javascript/css/modules/_switch-checkbox.pcss
+  .chameleon-checkbox {
     width: 20px;
     height: 20px;
     position: relative;

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.1
+  version: 1.4.6
 platform: ruby
 authors:
 - Alex Pate
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-12-20 00:00:00.000000000 Z
+date: 2020-06-01 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.4.5.5
 signing_key: 
 specification_version: 4
 summary: Pusher Chameleon front-end asset library