bedrock_sass 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0f90e261375f45e08e3c1e6a7c0e199cb118655e
-  data.tar.gz: 8f4ac370acc9bf926e23f197c50c9f348fe54378
+  metadata.gz: 4552a8556925d703c51246b6200d92b2d6deaa42
+  data.tar.gz: 3798f5fa2a52616aca57de4d5440701acfc1a06e
 SHA512:
-  metadata.gz: 41a91fdf654733951454717a302804f609419bbd8dfddf2cdabf1e740e636fe997eb5142cb36e5984a5f55364dd00bb1f53b2c2f4edbd0f8454f512f84d8010d
-  data.tar.gz: 5e58e9125f0181284acfd27f81491b498b2bdc09a9a8b53e4eaa5b8ee5e8e10876fae03f095b3dc8ff1134f5a12c6b8e21dbd6d52e6a7683cb0b6c6eb321c27d
+  metadata.gz: 81b8a1d76738272bba2dc0b1677ac7aab2542853999efec09479dcd7795d12fff7d0cc4a8098e10b7952babb127288c0f3445e29d382f80827776bfacdd7959b
+  data.tar.gz: 77e77f6acb25cdb220819ba9cad574ccf8e6bd89aa56e58f0d098b3f63fb9a5c637e6c067bfb5262d9de1b14d8114ef7874f6ee5c64fd27a38be3e7d2e99f2ff

data/assets/bedrock/js/bedrock.js

@@ -63,7 +63,7 @@
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 52);
+/******/ 	return __webpack_require__(__webpack_require__.s = 53);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -15758,9 +15758,9 @@ var _whatInput = __webpack_require__(39);
 
 var _whatInput2 = _interopRequireDefault(_whatInput);
 
-__webpack_require__(51);
+__webpack_require__(52);
 
-__webpack_require__(50);
+__webpack_require__(51);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31082,6 +31082,7 @@ var DropzoneUpload = function (_Plugin) {
   }, {
     key: '_init',
     value: function _init() {
+      this._handleEvents();
       this.dropzone = new _dropzone2.default('#' + this.id, this.options);
     }
 
@@ -31117,6 +31118,31 @@ var DropzoneUpload = function (_Plugin) {
     key: '_events',
     value: function _events() {}
 
+    /**
+     * Handles events from the dropzone.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_handleEvents',
+    value: function _handleEvents() {
+      this.options.queuecomplete = function () {
+        this.$element.trigger('queuecomplete.zf.dropzone.upload');
+      }.bind(this);
+    }
+
+    /**
+     * Removes all uploaded items.
+     * @function
+     */
+
+  }, {
+    key: 'clear',
+    value: function clear() {
+      this.dropzone.removeAllFiles();
+    }
+
     /**
      * Destroys the dropzone-upload plugin.
      * @function
@@ -31142,6 +31168,143 @@ exports.DropzoneUpload = DropzoneUpload;
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileInput = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _jquery = __webpack_require__(0);
+
+var _jquery2 = _interopRequireDefault(_jquery);
+
+var _foundation = __webpack_require__(1);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * FileInput module.
+ * @module fileInput
+ */
+
+var FileInput = function (_Plugin) {
+  _inherits(FileInput, _Plugin);
+
+  function FileInput() {
+    _classCallCheck(this, FileInput);
+
+    return _possibleConstructorReturn(this, (FileInput.__proto__ || Object.getPrototypeOf(FileInput)).apply(this, arguments));
+  }
+
+  _createClass(FileInput, [{
+    key: '_setup',
+
+    /**
+     * Creates a new instance of an file-input.
+     * @class
+     * @name FileInput
+     * @fires FileInput#init
+     * @param {Object} element - jQuery object to initialize.
+     * @param {Object} options - Overrides to the default plugin settings.
+     */
+    value: function _setup(element, options) {
+      this.className = 'FileInput'; // ie9 back compat
+      this.$element = element;
+      this.options = _jquery2.default.extend({}, FileInput.defaults, this.$element.data(), options);
+
+      this._init();
+    }
+
+    /**
+     * Initializes the file-input wrapper.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_init',
+    value: function _init() {
+      this.id = this.$element.attr('id');
+      this.template = (0, _jquery2.default)('#' + this.id + '-preview-template').html();
+      this.$item = (0, _jquery2.default)(this.template);
+      this.$preview = (0, _jquery2.default)(this.options.previewsContainer);
+      this.$empty = this.$element.find('.dz-message');
+      this.$input = this.$element.find('input[type="file"]');
+
+      if (this.$preview.children().length) {
+        this.$empty.hide();
+      }
+
+      this._events();
+    }
+
+    /**
+     * Adds event handlers to the file-input.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_events',
+    value: function _events() {
+      var input = this.$input.get(0);
+
+      this.$input.on('change', function (event) {
+        if (input.files && input.files[0]) {
+          var reader = new FileReader();
+
+          reader.onload = function (e) {
+            var preview = this.$item.clone();
+            preview.find('[dz-thumbnail]').attr('src', e.target.result);
+
+            this.$empty.hide();
+            this.$preview.html(preview);
+          }.bind(this);
+
+          reader.readAsDataURL(input.files[0]);
+        }
+      }.bind(this));
+
+      this.$element.on('click', '[dz-remove]', function (event) {
+        event.preventDefault();
+
+        this.$empty.show();
+        this.$preview.html('');
+      }.bind(this));
+    }
+
+    /**
+     * Destroys the file-input plugin.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_destroy',
+    value: function _destroy() {}
+  }]);
+
+  return FileInput;
+}(_foundation.Plugin);
+
+FileInput.defaults = {};
+
+exports.FileInput = FileInput;
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -31373,7 +31536,7 @@ InlineEditBox.defaults = {};
 exports.InlineEditBox = InlineEditBox;
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -31539,7 +31702,7 @@ ListRemove.defaults = {};
 exports.ListRemove = ListRemove;
 
 /***/ }),
-/* 43 */
+/* 44 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -31807,7 +31970,7 @@ ListSelect.defaults = {};
 exports.ListSelect = ListSelect;
 
 /***/ }),
-/* 44 */
+/* 45 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -32044,7 +32207,7 @@ MediaAttach.defaults = {};
 exports.MediaAttach = MediaAttach;
 
 /***/ }),
-/* 45 */
+/* 46 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -32101,23 +32264,13 @@ var MediaReveal = function (_Plugin) {
     value: function _setup(element, options) {
       this.className = 'MediaReveal'; // ie9 back compat
       this.$element = element;
-      this.id = this.$element.attr('id');
+      this.$dropzone = this.$element.find('[data-dropzone-upload]');
       this.options = _jquery2.default.extend({}, MediaReveal.defaults, this.$element.data(), options);
-      this.template = (0, _jquery2.default)('#' + this.id + '-item-template').html();
+      this.reveal = new Foundation.Reveal(element, this.options);
       this.items = [];
       this.selectedItems = [];
-      this.reveal = new Foundation.Reveal(element, this.options);
-      this.mediaUrl = this.options.mediaUrl;
-      this.mediaKey = this.options.mediaKey;
-      this.$insert = this.$element.find('[data-insert]');
-      this.$grid = this.$element.find('[data-list-select]');
-      this.$item = (0, _jquery2.default)(this.template);
-      this.imageKey = this.$item.find('[data-src]').attr('data-src');
-      this.imageUrl = this.$item.find('[data-url]').attr('data-url') || '[src]';
-      this.titleKey = this.$item.find('[data-text]').attr('data-text');
 
       this._init();
-      this._events();
     }
 
     /**
@@ -32129,7 +32282,21 @@ var MediaReveal = function (_Plugin) {
   }, {
     key: '_init',
     value: function _init() {
+      this.id = this.$element.attr('id');
+      this.template = (0, _jquery2.default)('#' + this.id + '-item-template').html();
+      this.mediaUrl = this.options.mediaUrl;
+      this.mediaKey = this.options.mediaKey;
+      this.uniqueKey = this.options.uniqueKey || 'id';
+      this.$insert = this.$element.find('[data-insert]');
+      this.$grid = this.$element.find('[data-list-select]');
+      this.$item = (0, _jquery2.default)(this.template);
+      this.imageKey = this.$item.find('[data-src]').attr('data-src');
+      this.imageUrl = this.$item.find('[data-url]').attr('data-url') || '[src]';
+      this.titleKey = this.$item.find('[data-text]').attr('data-text');
+
       this.$insert.addClass('disabled');
+
+      this._events();
     }
 
     /**
@@ -32153,6 +32320,10 @@ var MediaReveal = function (_Plugin) {
       this.$insert.off('click').on({
         'click': this.insert.bind(this)
       });
+
+      this.$dropzone.off('.zf.dropzone.upload').on({
+        'queuecomplete.zf.dropzone.upload': this._uploadComplete.bind(this)
+      });
     }
 
     /**
@@ -32198,12 +32369,14 @@ var MediaReveal = function (_Plugin) {
     key: '_buildItem',
     value: function _buildItem(data) {
       var item = this.$item.clone();
+      var key = this._getObjectValue(data, this.uniqueKey);
       var url = this._getObjectValue(data, this.imageKey);
       var title = this._getObjectValue(data, this.titleKey);
 
       item.find('[data-src]').attr('src', this.imageUrl.replace('[src]', url));
       item.find('[data-text]').text(title);
       item.data('imageObject', data);
+      item.data('uniqueKey', key);
 
       return item;
     }
@@ -32226,6 +32399,28 @@ var MediaReveal = function (_Plugin) {
       this.$grid.append(this.items);
     }
 
+    /**
+     * Switches ui elements when uploads are completed.
+     * @param {Object} event - Event object passed from listener.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_uploadComplete',
+    value: function _uploadComplete(event) {
+      var tabs = this.$element.find('[data-tabs]');
+      var tab = this.$grid.parents('.tabs-panel:first');
+
+      tabs.foundation('selectTab', tab);
+      this.$grid.empty();
+
+      this.items = [];
+      this._getItems();
+
+      this.$dropzone.foundation('clear');
+    }
+
     /**
      * Switches multi select mode.
      * @param {Boolean} enable - Enable/disable multiple mode.
@@ -32330,6 +32525,7 @@ var MediaReveal = function (_Plugin) {
       this.$element.off('.zf.reveal');
       this.$grid.off('changed.zf.select.list');
       this.$insert.off('click');
+      this.$dropzone.off('.zf.dropzone.upload');
     }
   }]);
 
@@ -32341,7 +32537,7 @@ MediaReveal.defaults = {};
 exports.MediaReveal = MediaReveal;
 
 /***/ }),
-/* 46 */
+/* 47 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -32619,7 +32815,7 @@ OffCanvasMenu.defaults = {};
 exports.OffCanvasMenu = OffCanvasMenu;
 
 /***/ }),
-/* 47 */
+/* 48 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -32680,6 +32876,10 @@ var SelectBox = function (_Plugin) {
       this.$element = element;
       this.options = _jquery2.default.extend({}, SelectBox.defaults, this.$element.data(), options);
 
+      if (this.options.list) {
+        this.options['theme'] = 'list';
+      }
+
       this._init();
     }
 
@@ -32692,13 +32892,14 @@ var SelectBox = function (_Plugin) {
   }, {
     key: '_init',
     value: function _init() {
-      var options = {};
+      this.$element.select2(this.options);
 
-      if (this.options.list) {
-        options['theme'] = 'list';
-      }
+      this.select2 = this.$element.data('select2');
+      this.$container = this.select2.$container;
+      this.$dropdown = this.select2.$dropdown;
 
-      this.$element.select2(options);
+      this._events();
+      this._keepPlaceholder();
     }
 
     /**
@@ -32709,7 +32910,108 @@ var SelectBox = function (_Plugin) {
 
   }, {
     key: '_events',
-    value: function _events() {}
+    value: function _events() {
+      this.$element.off(['select2:select', 'select2:unselect', 'select2:open']).on({
+        'select2:open': this._handleEvent.bind(this),
+        'select2:select': this._handleEvent.bind(this),
+        'select2:unselect': this._handleEvent.bind(this)
+      });
+
+      this.$element.off('.zf.trigger').on({
+        'open.zf.trigger': this.open.bind(this),
+        'select.zf.trigger': this.select.bind(this),
+        'unselect.zf.trigger': this.unselect.bind(this)
+      });
+    }
+
+    /**
+     * Keeps placeholder on search field.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_keepPlaceholder',
+    value: function _keepPlaceholder() {
+      var search = this.$container.find('.select2-search__field');
+
+      if (search.length && this.options.list) {
+        search.attr('placeholder', this.options.placeholder);
+      }
+    }
+
+    /**
+     * Updates position on dropdown.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_updatePosition',
+    value: function _updatePosition() {
+      var search = this.$container.find('.select2-search__field');
+      var dropdown = this.$dropdown.find('.select2-dropdown');
+
+      if (search.length && this.options.list) {
+        if (dropdown.hasClass('select2-dropdown--above')) {
+          var position = this.$container.innerHeight() - search.outerHeight();
+          dropdown.css('margin-top', position);
+        } else {
+          dropdown.css('margin-top', false);
+        }
+      }
+    }
+
+    /**
+     * Handles events on element.
+     * @param {Object} event - Event object passed from listener.
+     * @function
+     * @private
+     */
+
+  }, {
+    key: '_handleEvent',
+    value: function _handleEvent(event) {
+      this.$element.trigger(event.type.replace('select2:', ''));
+      this._keepPlaceholder();
+    }
+
+    /**
+     * Opens the select dropdown.
+     * @param {Object} event - Event object passed from listener.
+     * @function
+     */
+
+  }, {
+    key: 'open',
+    value: function open(event) {
+      this._updatePosition();
+      this.$element.trigger('open.zf.select.box');
+    }
+
+    /**
+     * Selects a list item.
+     * @param {Object} event - Event object passed from listener.
+     * @function
+     */
+
+  }, {
+    key: 'select',
+    value: function select(event) {
+      this.$element.trigger('changed.zf.select.box');
+    }
+
+    /**
+     * Unselects a list item.
+     * @param {Object} event - Event object passed from listener.
+     * @function
+     */
+
+  }, {
+    key: 'unselect',
+    value: function unselect(event) {
+      this.$element.trigger('changed.zf.select.box');
+    }
 
     /**
      * Destroys the select-box plugin.
@@ -32719,7 +33021,11 @@ var SelectBox = function (_Plugin) {
 
   }, {
     key: '_destroy',
-    value: function _destroy() {}
+    value: function _destroy() {
+      this.$element.select2('destroy');
+      this.$element.off(['select2:select', 'select2:unselect', 'select2:open']);
+      this.$element.off('.zf.trigger');
+    }
   }]);
 
   return SelectBox;
@@ -32730,7 +33036,7 @@ SelectBox.defaults = {};
 exports.SelectBox = SelectBox;
 
 /***/ }),
-/* 48 */
+/* 49 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -33051,7 +33357,7 @@ TableCheckbox.defaults = {};
 exports.TableCheckbox = TableCheckbox;
 
 /***/ }),
-/* 49 */
+/* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -33193,31 +33499,33 @@ TinyMceEditor.defaults = {
 exports.TinyMceEditor = TinyMceEditor;
 
 /***/ }),
-/* 50 */
+/* 51 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _offcanvasMenu = __webpack_require__(46);
+var _offcanvasMenu = __webpack_require__(47);
 
-var _tinyMceEditor = __webpack_require__(49);
+var _tinyMceEditor = __webpack_require__(50);
 
-var _tableCheckbox = __webpack_require__(48);
+var _tableCheckbox = __webpack_require__(49);
 
-var _listSelect = __webpack_require__(43);
+var _listSelect = __webpack_require__(44);
 
-var _listRemove = __webpack_require__(42);
+var _listRemove = __webpack_require__(43);
 
-var _mediaReveal = __webpack_require__(45);
+var _mediaReveal = __webpack_require__(46);
 
-var _mediaAttach = __webpack_require__(44);
+var _mediaAttach = __webpack_require__(45);
 
 var _dropzoneUpload = __webpack_require__(40);
 
-var _inlineEditBox = __webpack_require__(41);
+var _inlineEditBox = __webpack_require__(42);
 
-var _selectBox = __webpack_require__(47);
+var _selectBox = __webpack_require__(48);
+
+var _fileInput = __webpack_require__(41);
 
 Foundation.plugin(_offcanvasMenu.OffCanvasMenu, 'OffCanvasMenu');
 Foundation.plugin(_tinyMceEditor.TinyMceEditor, 'TinyMceEditor');
@@ -33229,9 +33537,10 @@ Foundation.plugin(_mediaAttach.MediaAttach, 'MediaAttach');
 Foundation.plugin(_dropzoneUpload.DropzoneUpload, 'DropzoneUpload');
 Foundation.plugin(_inlineEditBox.InlineEditBox, 'InlineEditBox');
 Foundation.plugin(_selectBox.SelectBox, 'SelectBox');
+Foundation.plugin(_fileInput.FileInput, 'FileInput');
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -33377,7 +33686,7 @@ _foundation.Foundation.plugin(_foundation22.ResponsiveAccordionTabs, 'Responsive
 module.exports = _foundation.Foundation;
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__(22);

data/assets/bedrock/scss/_bedrock-components.scss

@@ -13,6 +13,7 @@
 @import 'components/page-content';
 @import 'components/tiny-mce-editor';
 @import 'components/select-box';
+@import 'components/file-input';
 
 @include bedrock-global-styles;
 @include bedrock-prototype-classes;
@@ -29,3 +30,4 @@
 @include bedrock-page-content;
 @include bedrock-tiny-mce-editor;
 @include bedrock-select-box;
+@include bedrock-file-input;

data/assets/bedrock/scss/_bedrock-settings.scss

@@ -8,7 +8,8 @@
 //   3. Offcanvas Menu
 //   4. Panel
 //   5. No Content
-//   6. Login Box
+//   6. Page Content
+//   7. Login Box
 
 
 // 1. Header
@@ -53,7 +54,16 @@ $panel-radius: $global-radius;
 $no-content-color: $medium-gray;
 
 
-// 6. Login Box
+// 6. Page Content
+// ---------
+
+$page-content-sidebar-sizes: (
+  small: 340px,
+  xlarge: 360px
+);
+
+
+// 7. Login Box
 // ---------
 
 $login-box-width: 26rem;

data/assets/bedrock/scss/_foundation-settings.scss

@@ -795,12 +795,12 @@ $table-stack-breakpoint: medium;
 
 $tab-margin: 0;
 $tab-background: $white;
-$tab-color: $primary-color;
+$tab-color: $body-font-color;
 $tab-background-active: $light-gray;
-$tab-active-color: $primary-color;
-$tab-item-font-size: rem-calc(12);
+$tab-active-color: $body-font-color;
+$tab-item-font-size: 1rem;
 $tab-item-background-hover: $white;
-$tab-item-padding: 1.25rem 1.5rem;
+$tab-item-padding: 1rem;
 $tab-expand-max: 6;
 $tab-content-background: $white;
 $tab-content-border: $light-gray;

data/assets/bedrock/scss/components/dropzone-upload.scss

@@ -57,7 +57,7 @@ $dropzone-upload-active-border-color: $primary-color !default;
 
     .thumbnail {
 
-      .success {
+      .icon-success {
         opacity: 0;
         visibility: visible;
         @include mui-animation(fade(0, 1), slide(out, up), fade(1, 0));
@@ -75,7 +75,7 @@ $dropzone-upload-active-border-color: $primary-color !default;
         visibility: visible;
       }
 
-      .error {
+      .icon-error {
         opacity: 1;
         visibility: visible;
         @include mui-animation(fade(0, 1), wiggle(15deg));
@@ -121,7 +121,7 @@ $dropzone-upload-active-border-color: $primary-color !default;
       visibility: hidden;
     }
 
-    .success, .error {
+    .icon-success, .icon-error {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -138,11 +138,11 @@ $dropzone-upload-active-border-color: $primary-color !default;
       visibility: hidden;
     }
 
-    .success {
+    .icon-success {
       background: $success-color;
     }
 
-    .error {
+    .icon-error {
       background: $alert-color;
     }
   }

data/assets/bedrock/scss/components/file-input.scss

@@ -0,0 +1,28 @@
+// File Input Mixins
+
+@mixin file-input {
+  position: relative;
+
+  input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  label {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+
+// File Input Component
+
+@mixin bedrock-file-input {
+  [data-file-input] {
+    @include file-input;
+  }
+}

data/assets/bedrock/scss/components/page-content.scss

@@ -1,4 +1,7 @@
-$page-content-sidebar-width: 340px !default;
+$page-content-sidebar-sizes: (
+  small: 340px,
+  xlarge: 360px
+) !default;
 
 // Page Content Mixins
 
@@ -35,8 +38,14 @@ $page-content-sidebar-width: 340px !default;
     @include xy-cell(shrink, false);
     @include page-content-gutter;
 
-    @include breakpoint(xlarge) {
-      width: $page-content-sidebar-width;
+    @each $name, $size in $page-content-sidebar-sizes {
+      @include breakpoint($name) {
+        width: $size;
+      }
+    }
+
+    @include breakpoint(xlarge down) {
+      width: 100%;
     }
   }
 }

data/assets/bedrock/scss/components/select-box.scss

@@ -7,9 +7,33 @@
       .select2-selection__choice {
         font-size: inherit;
         margin: 0 0 ($global-margin / 2);
-        padding: $global-margin / 2;
+        padding: $global-padding / 1.5;
         display: block;
         width: 100%;
+        color: $body-font-color;
+        background: $light-gray;
+        position: relative;
+        box-shadow: inset 0 0 0 1px $medium-gray;
+
+        &:hover {
+          padding-right: $global-padding * 2;
+
+          .select2-selection__choice__remove {
+            display: block;
+          }
+        }
+      }
+
+      .select2-selection__choice__remove {
+        color: $white;
+        background: $alert-color;
+        height: 100%;
+        padding: $global-padding / 1.5;
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: none;
+        margin: 0;
       }
 
       .select2-selection__rendered {
@@ -27,6 +51,10 @@
       }
     }
   }
+
+  .select2-dropdown:not(.select2-dropdown--above) {
+    margin-top: 0 !important;
+  }
 }
 
 @mixin select-box-single {
@@ -92,6 +120,9 @@
       @include label;
       background: $label-background;
       color: $label-color;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .select2-selection__choice__remove {

data/lib/bedrock_sass/version.rb

@@ -1,3 +1,3 @@
 module BedrockSass
-  VERSION = '0.1.3'
+  VERSION = '0.1.4'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bedrock_sass
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Jonian Guveli
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-12-12 00:00:00.000000000 Z
+date: 2017-12-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -402,6 +402,7 @@ files:
 - assets/bedrock/scss/bedrock.scss
 - assets/bedrock/scss/components/attachments-grid.scss
 - assets/bedrock/scss/components/dropzone-upload.scss
+- assets/bedrock/scss/components/file-input.scss
 - assets/bedrock/scss/components/global.scss
 - assets/bedrock/scss/components/header.scss
 - assets/bedrock/scss/components/helper-classes.scss