active_frontend 14.1.12 → 14.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bb7d2e2dc38ec29f446a3b87fbec04a382c8d2ba
-  data.tar.gz: 0bbac34d846d4cdaabf1a5fd07fef2ce826baf39
+  metadata.gz: 5fe72a00b18afdd4c9f5826c9b12c6e939a440ce
+  data.tar.gz: c6289815947b25fe9a9a18c93ef6134f698acab9
 SHA512:
-  metadata.gz: fcf96c088c8603aa652764fc33d72246463f5d69a2173a3ad2e34b493caec54312fe46014a0de368ad0ff973ad9c484ae7711a31a608f3b458fed676ab7e9b94
-  data.tar.gz: 5f4520a7dea9addf6c4531f5dfbe2be3314b06e6ef5313c24afa4cce5f38c5ca6b56d9bc568fcaa4f5d0e7806d5739f926379ddf2cc8892451e62fff9af72a60
+  metadata.gz: 4af5fbb0fd4e5386384e48d23f81d5118eddb9112eb6d9e19c87e5b6eeaf08ec05760ec72c7ac5350394a4fe8f9c8115eadfec2d74785f50a83d7f4ce179190c
+  data.tar.gz: 8c9bc7cd7737ff136f855adf04cd444d19670649fcdf81467543bf571bd56c4a2f7bb28f8b3bac9fbec9511cd889447642acb3aa148c08ee887e0cc895c8975c

data/lib/active_frontend/version.rb

@@ -1,3 +1,3 @@
 module ActiveFrontend
-  VERSION = '14.1.12'.freeze
+  VERSION = '14.1.13'.freeze
 end

data/vendor/assets/javascripts/base/_tag.js

@@ -18,6 +18,7 @@
     this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
     this.$element.before(this.$container);
     this.build(options);
+    this.moveLabel();
     this.isInit = false;
   };
 
@@ -34,13 +35,13 @@
     },
     onTagExists: function(item, $tag) {},
     tagClass: function(item) {
-      return 'label';
+      return 'label label-color-primary label-color-inverted';
     },
     addOnBlur: true,
     allowDuplicates: false,
     cancelConfirmKeysOnEmpty: false,
     confirmKeys: [13, 44],
-    delimiter: ',',
+    delimiter: ', ',
     delimiterRegex: null,
     focusClass: 'focus',
     freeInput: true,
@@ -293,6 +294,12 @@
     if (_self.options.triggerChange) _self.$element.trigger('change');
   };
 
+  Tag.prototype.moveLabel = function () {
+    var label = this.$element.next('label');
+
+    if (label.length) label.insertAfter(this.$container);
+  };
+
   Tag.prototype.build = function(options) {
     var _self = this;
 

data/vendor/assets/javascripts/base/_typeahead.js

@@ -18,7 +18,7 @@
   Typeahead.DEFAULTS = {
     autoSelect: true,
     item: '<li><a href="#"></a></li>',
-    items: 8,
+    items: 5,
     menu: '<ul class="typeahead dropmenu caret"></ul>',
     minLength: 1,
     scrollHeight: 0,

data/vendor/assets/stylesheets/_utility.scss

@@ -48,6 +48,9 @@
 @function color($color) {
   @return map-get($colors, '' + $color);
 }
+@function color-inverted($color) {
+  @return map-get($colors-inversions, '' + $color);
+}
 @function lightish-color($color) {
   @return lighten(color($color), 2.5%);
 }

data/vendor/assets/stylesheets/_variable.scss

@@ -1,5 +1,6 @@
 // Table of Contents
 // ==================================================
+// Functions
 // Animation
 // Color
 // Common
@@ -7,6 +8,23 @@
 // Grid
 // Progress
 
+// Functions
+// ==================================================
+@function map-collect($maps...) {
+  $collection: ();
+
+  @each $map in $maps {
+    $collection: map-merge($collection, $map);
+  }
+
+  @return $collection;
+}
+@function map-global-collect($global-collection, $global-name) {
+  $name: map-get($colors-global, $global-name);
+
+  @return map-get($global-collection, $name);
+}
+
 // Animation
 // ==================================================
 $animation-delays: (
@@ -33,6 +51,12 @@ $animation-durations: (
 
 // Color
 // ==================================================
+$colors-global: (
+  'primary': 'blue',
+  'secondary': 'green',
+  'tertiary': 'red',
+  'quaditiary': 'yellow'
+);
 $colors-brand: (
   'lime': rgba(164,217,111,1),
   'green': rgba(52,208,102,1),
@@ -47,6 +71,32 @@ $colors-brand: (
   'orange': rgba(252,174,70,1),
   'yellow': rgba(248,214,72,1)
 );
+$colors-brand-global: (
+  'primary': map-global-collect($colors-brand, 'primary'),
+  'secondary': map-global-collect($colors-brand, 'secondary'),
+  'tertiary': map-global-collect($colors-brand, 'tertiary'),
+  'quaditiary': map-global-collect($colors-brand, 'quaditiary')
+);
+$colors-inverted: (
+  'lime': rgba(242,250,235,1),
+  'green': rgba(227,249,234,1),
+  'teal': rgba(234,251,248,1),
+  'sky': rgba(235,249,255,1),
+  'blue': rgba(227,241,255,1),
+  'indigo': rgba(245,242,252,1),
+  'purple': rgba(249,236,252,1),
+  'pink': rgba(253,234,236,1),
+  'red': rgba(253,229,228,1),
+  'brown': rgba(250,241,232,1),
+  'orange': rgba(255,242,224,1),
+  'yellow': rgba(254,248,223,1)
+);
+$colors-inverted-global: (
+  'primary': map-global-collect($colors-inverted, 'primary'),
+  'secondary': map-global-collect($colors-inverted, 'secondary'),
+  'tertiary': map-global-collect($colors-inverted, 'tertiary'),
+  'quaditiary': map-global-collect($colors-inverted, 'quaditiary')
+);
 $colors-grayscale: (
   'transparent': rgba(0,0,0,0),
   'dark-black': rgba(37,49,62,1),
@@ -60,13 +110,8 @@ $colors-grayscale: (
   'light-haze': rgba(248,249,253,1),
   'white': rgba(255,255,255,1)
 );
-$colors-global: (
-  'primary': map-get($colors-brand, 'blue'),
-  'secondary': map-get($colors-brand, 'green'),
-  'tertiary': map-get($colors-brand, 'red'),
-  'quaditiary': map-get($colors-brand, 'yellow')
-);
-$colors: map-merge(map-merge($colors-brand, $colors-grayscale), $colors-global);
+$colors: map-collect($colors-brand, $colors-brand-global, $colors-grayscale);
+$colors-inversions: map-collect($colors-inverted, $colors-inverted-global);
 $colors-black-text: 'transparent', 'dark-haze', 'haze', 'light-haze', 'white';
 
 // Common

data/vendor/assets/stylesheets/blocks/_form.scss

@@ -148,7 +148,8 @@ textarea {
 
   &.form-size-l {
     input,
-    textarea {
+    textarea,
+    .form-tags {
       font-size: text-size(l);
       padding: 14px 20px 15px;
     }
@@ -168,7 +169,8 @@ textarea {
   }
   &.form-size-m {
     input,
-    textarea {
+    textarea,
+    .form-tags {
       font-size: text-size(m);
       padding: 11px 20px 12px;
     }
@@ -188,7 +190,8 @@ textarea {
   }
   &.form-size-s {
     input,
-    textarea {
+    textarea,
+    .form-tags {
       font-size: text-size(s);
       margin-bottom: 5px;
       padding: 5px 10px;
@@ -454,7 +457,9 @@ textarea {
     display: inline-block;
     outline: none;
     margin: 0;
-    padding: 0;
+    padding: 0 !important;
+    min-width: auto;
+    vertical-align: top;
     width: auto;
   }
 }
@@ -477,7 +482,8 @@ textarea {
   position: relative;
   vertical-align: top;
 
-  > label {
+  > label,
+  > .form-tags + label {
     @include transition(all 0.3s ease-in-out);
     background: color(haze);
     border-radius: border-radius(s);
@@ -494,7 +500,8 @@ textarea {
 
   &.form-size-l,
   &.form-size-m {
-    > label {
+    > label,
+    > .form-tags + label {
       font-size: text-size(xs);
       left: 21px;
       margin-top: -9px;
@@ -502,7 +509,8 @@ textarea {
     }
   }
   &.form-size-s {
-    > label {
+    > label,
+    > .form-tags + label {
       font-size: text-size(xxs);
       left: 12px;
       margin-top: -6px;
@@ -510,10 +518,12 @@ textarea {
     }
   }
   &.dark {
-    > label { background: color(light-black); }
+    > label,
+    > .form-tags + label { background: color(light-black); }
   }
   &.light {
-    > label { background: color(dark-haze); }
+    > label,
+    > .form-tags + label { background: color(dark-haze); }
   }
 
   input,
@@ -531,6 +541,19 @@ textarea {
       top: 0;
     }
   }
+
+  > .form-tags {
+    &.focus + label {
+       opacity: 1;
+       top: 0;
+     }
+
+    > .tag + input {
+      &::-webkit-input-placeholder { color: color(transparent); }
+      &::-moz-placeholder { color: color(transparent); }
+      &:-ms-input-placeholder { color: color(transparent); }
+    }
+  }
 }
 
 // Addons

data/vendor/assets/stylesheets/components/_label_and_badge.scss

@@ -43,6 +43,19 @@
     &.label-outline { color: color($name); }
   }
 }
+@each $name, $color in map-keys($colors-inversions) {
+  .badge-color-#{$name},
+  .label-color-#{$name} {
+    &.badge-color-inverted,
+    &.label-color-inverted {
+      background: color-inverted($name);
+      border-color: color-inverted($name);
+      color: color($name);
+    }
+    &.badge-outline,
+    &.label-outline { border-color: color($name); }
+  }
+}
 
 // Sizes
 // ==================================================

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_frontend
 version: !ruby/object:Gem::Version
-  version: 14.1.12
+  version: 14.1.13
 platform: ruby
 authors:
 - Juan Gomez
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-07-18 00:00:00.000000000 Z
+date: 2017-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails