pusher-chameleon 1.4.1 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. checksums.yaml +4 -4
  2. data/.ruby-version +1 -1
  3. data/Gemfile.lock +3 -3
  4. data/docs/_posts/2016-03-17-forms.md +19 -1
  5. data/docs/_sass/_base.scss +1 -1
  6. data/package.json +1 -1
  7. data/stylesheets/_global.scss +7 -9
  8. data/stylesheets/components/_statistic.scss +1 -1
  9. data/stylesheets/forms/_base.scss +12 -1
  10. data/stylesheets/forms/_buttons.scss +2 -1
  11. data/stylesheets/forms/_checkbox.scss +2 -1
  12. data/stylesheets/forms/_fieldset.scss +1 -1
  13. data/stylesheets/forms/_forms.scss +3 -1
  14. data/stylesheets/forms/_input.scss +1 -1
  15. data/stylesheets/forms/_validation_alert.scss +57 -0
  16. metadata +4 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 6df41512bc95d88db45bab8875d66f287a7cb0af
4
- data.tar.gz: b81f64591cff98a1f49b5df1106b965ecddc3fcb
3
+ metadata.gz: d7731a1fe6a6663cad4eb751e7b41804499db014
4
+ data.tar.gz: c9125d650c9c006837fecea53074d3546f58ec8d
5
5
  SHA512:
6
- metadata.gz: b058b03fd9e35e32337b5f549b1d95a393b92440ad4ccd14da90e8cafc51505922010b3efc72a46b088c7b44eccdab062daba541d01672a7982000bee04482ed
7
- data.tar.gz: de74e51f4fbd813ea3a504416c2307f605236651771a3f31dc33ed775ec6156c912a820278b63922203d34006377b3d1fe598fc83dfd49e9dcd4014442b9494a
6
+ metadata.gz: 74e907bc9ec1ebdde6bb4ab3c8913fcc36f9ca0cefd5f66de4e5fd9c1c220b513dad12864b5a3b40d2f066edfb86327805b3be0eef4b8a2e04ca3d3fbf25dfa6
7
+ data.tar.gz: 3abac4f22ef619f409d8fdaab3f4b0f927d09f0180c77119cb679e12c99b8d4d4e4e2b6dcd7aa8aca698bfbcc5e11639ac578204e217dbf7fc6a816190c11a8a
data/.ruby-version CHANGED
@@ -1 +1 @@
1
- 2.2
1
+ 2.2.10
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- pusher-chameleon (0.5.5)
4
+ pusher-chameleon (1.4.4)
5
5
  sass (>= 3.2.0)
6
6
 
7
7
  GEM
@@ -9,7 +9,7 @@ GEM
9
9
  specs:
10
10
  gem_publisher (1.3.1)
11
11
  rake (0.9.2.2)
12
- sass (3.4.22)
12
+ sass (3.4.23)
13
13
 
14
14
  PLATFORMS
15
15
  ruby
@@ -20,4 +20,4 @@ DEPENDENCIES
20
20
  rake (= 0.9.2.2)
21
21
 
22
22
  BUNDLED WITH
23
- 1.11.2
23
+ 1.14.3
data/docs/_posts/2016-03-17-forms.md CHANGED
@@ -37,6 +37,24 @@ As well as classes to indicate status:
37
37
  <input type="password" class="error" placeholder="Password">
38
38
  ```
39
39
 
40
+ ## Inline Validation Alerts
41
+
42
+ 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.
43
+
44
+ <div class="pattern">
45
+ <div class="form__field has-validation-alert">
46
+ <input type="email" placeholder="Email address">
47
+ <span class="input-validation-alert input-validation-alert--error">Sorry, we were unable to subscribe you</span>
48
+ </div>
49
+ </div>
50
+
51
+ ``` html
52
+ <div class="form__field has-validation-alert">
53
+ <input type="email" placeholder="Email address">
54
+ <span class="input-validation-alert input-validation-alert--error">Sorry, we were unable to subscribe you</span>
55
+ </div>
56
+ ```
57
+
40
58
  ## Select
41
59
  <div class="pattern">
42
60
  <select>
@@ -63,4 +81,4 @@ As well as classes to indicate status:
63
81
 
64
82
  ```html
65
83
  <input type="checkbox" value="1" checked="checked" name="hello" id="hello">
66
- ```
84
+ ```
data/docs/_sass/_base.scss CHANGED
@@ -32,5 +32,5 @@ hr {
32
32
  border: 0;
33
33
  border-top: 1px solid #ddd;
34
34
  margin: 30px 0;
35
- padding: 0;
35
+ padding: 0;
36
36
  }
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pusher-chameleon",
3
- "version": "1.4.1",
3
+ "version": "1.4.6",
4
4
  "description": "A collection of front-end patterns used across Pusher.",
5
5
  "repository": "https://github.com/pusher/chameleon",
6
6
  "keywords": [
data/stylesheets/_global.scss CHANGED
@@ -37,7 +37,7 @@ $color-palette: (
37
37
  danger: #b74a48,
38
38
  information: #34495e,
39
39
  alert: #b74a48,
40
- beta: #a57cec
40
+ beta: #a57cec,
41
41
  ) !default;
42
42
 
43
43
  $color-primary: map-get($color-palette, primary);
@@ -56,7 +56,7 @@ $color-neutrals: (
56
56
  slate: #414859,
57
57
  silver: #8690a6,
58
58
  smoke: #d3dce7,
59
- snow: #f4f8fb
59
+ snow: #f4f8fb,
60
60
  ) !default;
61
61
 
62
62
  $color-white: map-get($color-neutrals, white);
@@ -69,17 +69,15 @@ $color-snow: map-get($color-neutrals, snow);
69
69
  $color-off-white: $color-snow;
70
70
  $color-grey-one: $color-silver;
71
71
 
72
-
73
72
  // Typography
74
73
  $global-font-size: 100% !default;
75
74
  $global-font-smoothing: false !default;
76
75
 
77
- $font-family-primary: 'pusher-realtime-text', Helmet, Freesans, sans-serif !default;
78
- $font-family-secondary: 'pusher-proxima-nova', Helmet, Freesans, sans-serif !default;
79
- $font-family-monospace: Menlo, Consolas, Monaco, 'Andale Mono', monospace !default;
80
-
81
- $syntax-highlighting-style: 'light' !default;
76
+ $font-family-primary: "pusher-realtime-text", Helmet, Freesans, sans-serif;
77
+ $font-family-secondary: "pusher-proxima-nova", Helmet, Freesans, sans-serif;
78
+ $font-family-monospace: Menlo, Consolas, Monaco, "Andale Mono", monospace;
82
79
 
80
+ $syntax-highlighting-style: "light" !default;
83
81
 
84
82
  %font-family-primary {
85
83
  font-family: $font-family-primary;
@@ -93,4 +91,4 @@ $cdn-url: "https://d2cy1obokpvee9.cloudfront.net";
93
91
 
94
92
  // Misc
95
93
  $border-radius: 0px !default;
96
- $button-namespace: 'btn' !default;
94
+ $button-namespace: "btn" !default;
data/stylesheets/components/_statistic.scss CHANGED
@@ -59,4 +59,4 @@
59
59
  padding-left: 10px;
60
60
  }
61
61
  }
62
- }
62
+ }
data/stylesheets/forms/_base.scss CHANGED
@@ -36,9 +36,20 @@
36
36
  border-width: 1px;
37
37
  }
38
38
 
39
+ &:disabled {
40
+ cursor: not-allowed;
41
+ opacity: .7;
42
+ background: #d4d4d4;
43
+ border: 1px solid darken(#d4d4d4, 10%);
44
+ color: #444444;
45
+ }
46
+
47
+ &.input--light {
48
+ color: #fff;
49
+ }
50
+
39
51
  &.input--light:not(.error):not(.valid) {
40
52
  border: 1px solid rgba(#ddd, .2);
41
- color: #fff;
42
53
 
43
54
  &:focus {
44
55
  border: 1px solid $color-primary;
data/stylesheets/forms/_buttons.scss CHANGED
@@ -175,7 +175,8 @@
175
175
  }
176
176
  }
177
177
 
178
- &--disabled {
178
+ &--disabled,
179
+ &:disabled {
179
180
  cursor: not-allowed;
180
181
  opacity: .7;
181
182
  background: #d4d4d4;
data/stylesheets/forms/_checkbox.scss CHANGED
@@ -3,7 +3,8 @@
3
3
  // - - - - - - - - - - - - - - - - - - - - - - - - -
4
4
 
5
5
  @mixin CHAMELEON-forms-checkbox {
6
- input[type="checkbox"] {
6
+ // Renaming as conflicting with https://github.com/pusher/dash/blob/c4c48d45172aee35c725d3fd413a767a43c13d3b/app/javascript/css/modules/_switch-checkbox.pcss
7
+ .chameleon-checkbox {
7
8
  width: 20px;
8
9
  height: 20px;
9
10
  position: relative;
data/stylesheets/forms/_fieldset.scss CHANGED
@@ -15,4 +15,4 @@
15
15
  width: auto;
16
16
  }
17
17
  }
18
- }
18
+ }
data/stylesheets/forms/_forms.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  @import 'input';
9
9
  @import 'textarea';
10
10
  @import 'checkbox';
11
+ @import 'validation_alert';
11
12
 
12
13
  @mixin CHAMELEON-forms {
13
14
  @include CHAMELEON-forms-buttons;
@@ -18,4 +19,5 @@
18
19
  @include CHAMELEON-forms-input;
19
20
  @include CHAMELEON-forms-textarea;
20
21
  @include CHAMELEON-forms-checkbox;
21
- }
22
+ @include CHAMELEON-forms-validation-alert;
23
+ }
data/stylesheets/forms/_input.scss CHANGED
@@ -11,4 +11,4 @@
11
11
  input[type="phone"] {
12
12
  @include base-input();
13
13
  }
14
- }
14
+ }
data/stylesheets/forms/_validation_alert.scss ADDED
@@ -0,0 +1,57 @@
1
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
2
+ // Input Validation Alerts
3
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
4
+
5
+ @mixin CHAMELEON-forms-validation-alert {
6
+ .input-validation-alert {
7
+ display: block;
8
+ font-size: rem-calc(14px);
9
+ font-weight: 400;
10
+ opacity: 0;
11
+ padding: 12px 5px;
12
+ position: absolute;
13
+ text-align: center;
14
+ transform: translateY(20px);
15
+ transition: all 180ms ease-in-out;
16
+ width: 100%;
17
+ z-index: 10;
18
+
19
+ &:before {
20
+ border-bottom: 8px solid transparent;
21
+ border-left: 8px solid transparent;
22
+ border-right: 8px solid transparent;
23
+ content: '';
24
+ display: block;
25
+ height: 0;
26
+ left: 50%;
27
+ position: absolute;
28
+ top: -7px;
29
+ transform: translate(-50%, 0);
30
+ width: 0;
31
+ }
32
+
33
+ .form__field.has-validation-alert & {
34
+ opacity: 1;
35
+ // Negative Y position in order to overlay the input border
36
+ transform: translateY(-1px);
37
+ }
38
+ }
39
+
40
+ .input-validation-alert--information {
41
+ background-color: $color-information;
42
+ color: #fff;
43
+
44
+ &::before {
45
+ border-bottom-color: $color-information;
46
+ }
47
+ }
48
+
49
+ .input-validation-alert--error {
50
+ background-color: $color-danger;
51
+ color: #fff;
52
+
53
+ &::before {
54
+ border-bottom-color: $color-danger;
55
+ }
56
+ }
57
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: pusher-chameleon
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.4.1
4
+ version: 1.4.6
5
5
  platform: ruby
6
6
  authors:
7
7
  - Alex Pate
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2016-12-20 00:00:00.000000000 Z
13
+ date: 2020-06-01 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: sass
@@ -149,6 +149,7 @@ files:
149
149
  - stylesheets/forms/_range.scss
150
150
  - stylesheets/forms/_select.scss
151
151
  - stylesheets/forms/_textarea.scss
152
+ - stylesheets/forms/_validation_alert.scss
152
153
  - stylesheets/grid/_classes.scss
153
154
  - stylesheets/grid/_column.scss
154
155
  - stylesheets/grid/_flex-grid.scss
@@ -198,7 +199,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
198
199
  version: '0'
199
200
  requirements: []
200
201
  rubyforge_project:
201
- rubygems_version: 2.4.8
202
+ rubygems_version: 2.4.5.5
202
203
  signing_key:
203
204
  specification_version: 4
204
205
  summary: Pusher Chameleon front-end asset library