materialize-sass 1.0.0.alpha3 → 1.0.0.alpha4

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 (32) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -3
  3. data/assets/javascripts/materialize.js +289 -184
  4. data/assets/javascripts/materialize/autocomplete.js +7 -0
  5. data/assets/javascripts/materialize/buttons.js +1 -1
  6. data/assets/javascripts/materialize/chips.js +1 -1
  7. data/assets/javascripts/materialize/component.js +1 -1
  8. data/assets/javascripts/materialize/datepicker.js +30 -7
  9. data/assets/javascripts/materialize/dropdown.js +27 -16
  10. data/assets/javascripts/materialize/extras/nouislider.js +1 -1
  11. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  12. data/assets/javascripts/materialize/forms.js +8 -3
  13. data/assets/javascripts/materialize/global.js +12 -9
  14. data/assets/javascripts/materialize/materialbox.js +34 -13
  15. data/assets/javascripts/materialize/modal.js +16 -10
  16. data/assets/javascripts/materialize/parallax.js +6 -5
  17. data/assets/javascripts/materialize/select.js +26 -19
  18. data/assets/javascripts/materialize/sidenav.js +17 -3
  19. data/assets/javascripts/materialize/timepicker.js +19 -12
  20. data/assets/stylesheets/materialize/components/_badges.scss +8 -0
  21. data/assets/stylesheets/materialize/components/_buttons.scss +35 -37
  22. data/assets/stylesheets/materialize/components/_datepicker.scss +2 -2
  23. data/assets/stylesheets/materialize/components/_dropdown.scss +3 -1
  24. data/assets/stylesheets/materialize/components/_global.scss +11 -1
  25. data/assets/stylesheets/materialize/components/_sidenav.scss +1 -1
  26. data/assets/stylesheets/materialize/components/_timepicker.scss +2 -2
  27. data/assets/stylesheets/materialize/components/_variables.scss +11 -3
  28. data/assets/stylesheets/materialize/components/forms/_input-fields.scss +4 -3
  29. data/assets/stylesheets/materialize/components/forms/_select.scss +3 -2
  30. data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
  31. data/lib/materialize-sass/version.rb +1 -1
  32. metadata +2 -2
@@ -31,9 +31,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
31
31
  * @prop {Number} responsiveThreshold
32
32
  */
33
33
  _this.options = $.extend({}, Parallax.defaults, options);
34
+ _this._enabled = window.innerWidth > _this.options.responsiveThreshold;
34
35
 
35
36
  _this.$img = _this.$el.find('img').first();
36
- _this._enabled = window.innerWidth > _this.options.responsiveThreshold;
37
+ _this.$img.each(function () {
38
+ var el = this;
39
+ if (el.complete) $(el).trigger("load");
40
+ });
41
+
37
42
  _this._updateParallax();
38
43
  _this._setupEventHandlers();
39
44
  _this._setupStyles();
@@ -89,10 +94,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
89
94
  key: '_handleImageLoad',
90
95
  value: function _handleImageLoad() {
91
96
  this._updateParallax();
92
- this.$img.each(function () {
93
- var el = this;
94
- if (el.complete) $(el).trigger("load");
95
- });
96
97
  }
97
98
  }, {
98
99
  key: '_updateParallax',
@@ -12,7 +12,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
12
12
  'use strict';
13
13
 
14
14
  var _defaults = {
15
- classes: ''
15
+ classes: '',
16
+ dropdownOptions: {}
16
17
  };
17
18
 
18
19
  /**
@@ -20,31 +21,37 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
20
21
  *
21
22
  */
22
23
 
23
- var Select = function (_Component) {
24
- _inherits(Select, _Component);
24
+ var FormSelect = function (_Component) {
25
+ _inherits(FormSelect, _Component);
25
26
 
26
27
  /**
27
- * Construct Select instance
28
+ * Construct FormSelect instance
28
29
  * @constructor
29
30
  * @param {Element} el
30
31
  * @param {Object} options
31
32
  */
32
- function Select(el, options) {
33
- _classCallCheck(this, Select);
33
+ function FormSelect(el, options) {
34
+ _classCallCheck(this, FormSelect);
34
35
 
35
- var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, Select, el, options));
36
+ // Don't init if browser default version
37
+ var _this = _possibleConstructorReturn(this, (FormSelect.__proto__ || Object.getPrototypeOf(FormSelect)).call(this, FormSelect, el, options));
36
38
 
37
- _this.el.M_Select = _this;
39
+ if (_this.$el.hasClass('browser-default')) {
40
+ return _possibleConstructorReturn(_this);
41
+ }
42
+
43
+ _this.el.M_FormSelect = _this;
38
44
 
39
45
  /**
40
46
  * Options for the select
41
- * @member Select#options
47
+ * @member FormSelect#options
42
48
  */
43
- _this.options = $.extend({}, Select.defaults, options);
49
+ _this.options = $.extend({}, FormSelect.defaults, options);
44
50
 
45
51
  _this.isMultiple = _this.$el.prop('multiple');
46
52
 
47
53
  // Setup
54
+ _this.el.tabIndex = -1;
48
55
  _this._keysSelected = {};
49
56
  _this._valueDict = {}; // Maps key to original and generated option element.
50
57
  _this._setupDropdown();
@@ -53,7 +60,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
53
60
  return _this;
54
61
  }
55
62
 
56
- _createClass(Select, [{
63
+ _createClass(FormSelect, [{
57
64
  key: 'destroy',
58
65
 
59
66
 
@@ -63,7 +70,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
63
70
  value: function destroy() {
64
71
  this._removeEventHandlers();
65
72
  this._removeDropdown();
66
- this.el.M_Select = undefined;
73
+ this.el.M_FormSelect = undefined;
67
74
  }
68
75
 
69
76
  /**
@@ -100,7 +107,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
100
107
  });
101
108
  this.el.removeEventListener('change', this._handleSelectChangeBound);
102
109
  this.input.removeEventListener('click', this._handleInputClickBound);
103
- this.input.removeEventListener('focus', this._handleInputFocusBound);
104
110
  }
105
111
 
106
112
  /**
@@ -238,7 +244,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
238
244
 
239
245
  // Initialize dropdown
240
246
  if (!this.el.disabled) {
241
- var dropdownOptions = {};
247
+ var dropdownOptions = $.extend({}, this.options.dropdownOptions);
248
+
242
249
  if (this.isMultiple) {
243
250
  dropdownOptions.closeOnClick = false;
244
251
  }
@@ -425,7 +432,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
425
432
  }], [{
426
433
  key: 'init',
427
434
  value: function init(els, options) {
428
- return _get(Select.__proto__ || Object.getPrototypeOf(Select), 'init', this).call(this, this, els, options);
435
+ return _get(FormSelect.__proto__ || Object.getPrototypeOf(FormSelect), 'init', this).call(this, this, els, options);
429
436
  }
430
437
 
431
438
  /**
@@ -436,7 +443,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
436
443
  key: 'getInstance',
437
444
  value: function getInstance(el) {
438
445
  var domElem = !!el.jquery ? el[0] : el;
439
- return domElem.M_Select;
446
+ return domElem.M_FormSelect;
440
447
  }
441
448
  }, {
442
449
  key: 'defaults',
@@ -445,12 +452,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
445
452
  }
446
453
  }]);
447
454
 
448
- return Select;
455
+ return FormSelect;
449
456
  }(Component);
450
457
 
451
- M.Select = Select;
458
+ M.FormSelect = FormSelect;
452
459
 
453
460
  if (M.jQueryLoaded) {
454
- M.initializeJqueryWrapper(Select, 'select', 'M_Select');
461
+ M.initializeJqueryWrapper(FormSelect, 'formSelect', 'M_FormSelect');
455
462
  }
456
463
  })(cash);
@@ -226,6 +226,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
226
226
  }, {
227
227
  key: '_handleDragTargetDrag',
228
228
  value: function _handleDragTargetDrag(e) {
229
+ // Check if draggable
230
+ if (!this.options.draggable || this._isCurrentlyFixed()) {
231
+ return;
232
+ }
233
+
229
234
  // If not being dragged, set initial drag start variables
230
235
  if (!this.isDragged) {
231
236
  this._startDrag(e);
@@ -293,6 +298,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
293
298
  key: '_handleCloseDrag',
294
299
  value: function _handleCloseDrag(e) {
295
300
  if (this.isOpen) {
301
+ // Check if draggable
302
+ if (!this.options.draggable || this._isCurrentlyFixed()) {
303
+ return;
304
+ }
296
305
 
297
306
  // If not being dragged, set initial drag start variables
298
307
  if (!this.isDragged) {
@@ -389,10 +398,15 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
389
398
  }, {
390
399
  key: '_setupFixed',
391
400
  value: function _setupFixed() {
392
- if (this.isFixed && window.innerWidth > 992) {
401
+ if (this._isCurrentlyFixed()) {
393
402
  this.open();
394
403
  }
395
404
  }
405
+ }, {
406
+ key: '_isCurrentlyFixed',
407
+ value: function _isCurrentlyFixed() {
408
+ return this.isFixed && window.innerWidth > 992;
409
+ }
396
410
  }, {
397
411
  key: '_createDragTarget',
398
412
  value: function _createDragTarget() {
@@ -428,7 +442,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
428
442
  }
429
443
 
430
444
  // Handle fixed Sidenav
431
- if (this.isFixed && window.innerWidth > 992) {
445
+ if (this._isCurrentlyFixed()) {
432
446
  anim.remove(this.el);
433
447
  anim({
434
448
  targets: this.el,
@@ -463,7 +477,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
463
477
  }
464
478
 
465
479
  // Handle fixed Sidenav
466
- if (this.isFixed && window.innerWidth > 992) {
480
+ if (this._isCurrentlyFixed()) {
467
481
  var transformX = this.options.edge === 'left' ? '-105%' : '105%';
468
482
  this.el.style.transform = 'translateX(' + transformX + ')';
469
483
 
@@ -20,9 +20,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
20
20
  container: null,
21
21
  defaultTime: 'now', // default time, 'now' or '13:14' e.g.
22
22
  fromnow: 0, // Millisecond offset from the defaultTime
23
- doneText: 'Ok', // done button text
24
- clearText: 'Clear',
25
- cancelText: 'Cancel',
23
+
24
+ // internationalization
25
+ i18n: {
26
+ done: 'Ok',
27
+ clear: 'Clear',
28
+ cancel: 'Cancel'
29
+ },
30
+
26
31
  autoClose: false, // auto close when minute is selected
27
32
  twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
28
33
  vibrate: true // vibrate the device when dragging clock hand
@@ -148,6 +153,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
148
153
  }, {
149
154
  key: '_handleDocumentClickEnd',
150
155
  value: function _handleDocumentClickEnd(e) {
156
+ var _this2 = this;
157
+
151
158
  e.preventDefault();
152
159
  document.removeEventListener('mouseup', this._handleDocumentClickEndBound);
153
160
  document.removeEventListener('touchend', this._handleDocumentClickEndBound);
@@ -161,9 +168,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
161
168
  if (this.currentView === 'hours') {
162
169
  this.showView('minutes', this.options.duration / 2);
163
170
  } else if (this.options.autoClose) {
164
- this.minutesView.addClass('timepicker-dial-out');
171
+ $(this.minutesView).addClass('timepicker-dial-out');
165
172
  setTimeout(function () {
166
- this.done();
173
+ _this2.done();
167
174
  }, this.options.duration / 2);
168
175
  }
169
176
 
@@ -189,11 +196,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
189
196
  }, {
190
197
  key: '_setupModal',
191
198
  value: function _setupModal() {
192
- var _this2 = this;
199
+ var _this3 = this;
193
200
 
194
201
  this.modal = M.Modal.init(this.modalEl, {
195
202
  onCloseEnd: function () {
196
- _this2.isOpen = false;
203
+ _this3.isOpen = false;
197
204
  }
198
205
  });
199
206
  }
@@ -217,11 +224,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
217
224
  }, {
218
225
  key: '_pickerSetup',
219
226
  value: function _pickerSetup() {
220
- $('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.clearText + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
227
+ $('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.clear + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
221
228
 
222
229
  var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>');
223
- $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.cancelText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this));
224
- $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.doneText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this));
230
+ $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.cancel + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this));
231
+ $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.done + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this));
225
232
  confirmationBtnsContainer.appendTo(this.footer);
226
233
  }
227
234
  }, {
@@ -419,7 +426,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
419
426
  }, {
420
427
  key: 'setHand',
421
428
  value: function setHand(x, y, roundBy5) {
422
- var _this3 = this;
429
+ var _this4 = this;
423
430
 
424
431
  var radian = Math.atan2(x, -y),
425
432
  isHours = this.currentView === 'hours',
@@ -474,7 +481,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
474
481
  if (!this.vibrateTimer) {
475
482
  navigator[this.vibrate](10);
476
483
  this.vibrateTimer = setTimeout(function () {
477
- _this3.vibrateTimer = null;
484
+ _this4.vibrateTimer = null;
478
485
  }, 100);
479
486
  }
480
487
  }
@@ -26,6 +26,8 @@ span.badge {
26
26
  content: " " attr(data-badge-caption);
27
27
  }
28
28
  }
29
+
30
+ // Special cases
29
31
  nav ul a span.badge {
30
32
  display: inline-block;
31
33
  float: none;
@@ -45,3 +47,9 @@ nav ul a span.badge {
45
47
  .sidenav span.badge {
46
48
  margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
47
49
  }
50
+
51
+ table span.badge {
52
+ display: inline-block;
53
+ float: none;
54
+ margin-left: auto;
55
+ }
@@ -9,29 +9,30 @@
9
9
  padding: $button-padding;
10
10
  text-transform: uppercase;
11
11
  vertical-align: middle;
12
- // Gets rid of tap active state
13
- -webkit-tap-highlight-color: transparent;
12
+ -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
14
13
  }
15
14
 
16
15
  // Disabled shared style
17
16
  .btn.disabled,
18
17
  .btn-floating.disabled,
19
18
  .btn-large.disabled,
19
+ .btn-small.disabled,
20
20
  .btn-flat.disabled,
21
21
  .btn:disabled,
22
22
  .btn-floating:disabled,
23
23
  .btn-large:disabled,
24
+ .btn-small:disabled,
24
25
  .btn-flat:disabled,
25
26
  .btn[disabled],
26
27
  .btn-floating[disabled],
27
28
  .btn-large[disabled],
29
+ .btn-small[disabled],
28
30
  .btn-flat[disabled] {
29
31
  pointer-events: none;
30
32
  background-color: $button-disabled-background !important;
31
33
  box-shadow: none;
32
34
  color: $button-disabled-color !important;
33
35
  cursor: default;
34
-
35
36
  &:hover {
36
37
  background-color: $button-disabled-background !important;
37
38
  color: $button-disabled-color !important;
@@ -42,10 +43,10 @@
42
43
  .btn,
43
44
  .btn-floating,
44
45
  .btn-large,
46
+ .btn-small,
45
47
  .btn-flat {
46
48
  font-size: $button-font-size;
47
49
  outline: 0;
48
-
49
50
  i {
50
51
  font-size: $button-icon-font-size;
51
52
  line-height: inherit;
@@ -70,7 +71,6 @@
70
71
  @extend .z-depth-1;
71
72
  transition: background-color .2s ease-out;
72
73
  cursor: pointer;
73
-
74
74
  &:hover {
75
75
  background-color: $button-raised-background-hover;
76
76
  @extend .z-depth-1-half;
@@ -83,34 +83,41 @@
83
83
  background-color: $button-floating-background-hover;
84
84
  @extend .z-depth-1-half;
85
85
  }
86
-
87
86
  &:before {
88
87
  border-radius: 0;
89
88
  }
90
-
91
89
  &.btn-large {
92
90
  &.halfway-fab {
93
91
  bottom: -$button-floating-large-size / 2;
94
92
  }
95
-
96
93
  width: $button-floating-large-size;
97
94
  height: $button-floating-large-size;
95
+ padding: 0;
98
96
  i {
99
97
  line-height: $button-floating-large-size;
100
98
  }
101
99
  }
102
100
 
101
+ &.btn-small {
102
+ &.halfway-fab {
103
+ bottom: -$button-floating-small-size / 2;
104
+ }
105
+ width: $button-floating-small-size;
106
+ height: $button-floating-small-size;
107
+ i {
108
+ line-height: $button-floating-small-size;
109
+ }
110
+ }
111
+
103
112
  &.halfway-fab {
104
113
  &.left {
105
114
  right: auto;
106
115
  left: 24px;
107
116
  }
108
-
109
117
  position: absolute;
110
118
  right: 24px;
111
119
  bottom: -$button-floating-size / 2;
112
120
  }
113
-
114
121
  display: inline-block;
115
122
  color: $button-floating-color;
116
123
  position: relative;
@@ -126,7 +133,6 @@
126
133
  transition: background-color .3s;
127
134
  cursor: pointer;
128
135
  vertical-align: middle;
129
-
130
136
  i {
131
137
  width: inherit;
132
138
  display: inline-block;
@@ -146,7 +152,7 @@ button.btn-floating {
146
152
  .fixed-action-btn {
147
153
  &.active {
148
154
  ul {
149
- visibility: visible;
155
+ visibility: visible;
150
156
  }
151
157
  }
152
158
 
@@ -154,7 +160,6 @@ button.btn-floating {
154
160
  &.direction-left,
155
161
  &.direction-right {
156
162
  padding: 0 0 0 15px;
157
-
158
163
  ul {
159
164
  text-align: right;
160
165
  right: 64px;
@@ -162,68 +167,57 @@ button.btn-floating {
162
167
  transform: translateY(-50%);
163
168
  height: 100%;
164
169
  left: auto;
165
- width: 500px; /*width 100% only goes to width of button container */
166
-
170
+ /*width 100% only goes to width of button container */
171
+ width: 500px;
167
172
  li {
168
173
  display: inline-block;
169
174
  margin: 7.5px 15px 0 0;
170
175
  }
171
176
  }
172
177
  }
173
-
174
178
  &.direction-right {
175
179
  padding: 0 15px 0 0;
176
-
177
180
  ul {
178
181
  text-align: left;
179
182
  direction: rtl;
180
183
  left: 64px;
181
184
  right: auto;
182
-
183
185
  li {
184
186
  margin: 7.5px 0 0 15px;
185
187
  }
186
188
  }
187
189
  }
188
-
189
190
  &.direction-bottom {
190
191
  padding: 0 0 15px 0;
191
-
192
192
  ul {
193
193
  top: 64px;
194
194
  bottom: auto;
195
195
  display: flex;
196
196
  flex-direction: column-reverse;
197
-
198
197
  li {
199
198
  margin: 15px 0 0 0;
200
199
  }
201
200
  }
202
201
  }
203
-
204
202
  &.toolbar {
205
203
  &.active {
206
- & > a i {
204
+ &>a i {
207
205
  opacity: 0;
208
206
  }
209
207
  }
210
-
211
208
  padding: 0;
212
209
  height: $button-floating-large-size;
213
-
214
210
  ul {
215
211
  display: flex;
216
212
  top: 0;
217
213
  bottom: 0;
218
214
  z-index: 1;
219
-
220
215
  li {
221
216
  flex: 1;
222
217
  display: inline-block;
223
218
  margin: 0;
224
219
  height: 100%;
225
220
  transition: none;
226
-
227
221
  a {
228
222
  display: block;
229
223
  overflow: hidden;
@@ -235,7 +229,6 @@ button.btn-floating {
235
229
  color: #fff;
236
230
  line-height: $button-floating-large-size;
237
231
  z-index: 1;
238
-
239
232
  i {
240
233
  line-height: inherit;
241
234
  }
@@ -243,14 +236,12 @@ button.btn-floating {
243
236
  }
244
237
  }
245
238
  }
246
-
247
239
  position: fixed;
248
240
  right: 23px;
249
241
  bottom: 23px;
250
242
  padding-top: 15px;
251
243
  margin-bottom: 0;
252
244
  z-index: 997;
253
-
254
245
  ul {
255
246
  left: 0;
256
247
  right: 0;
@@ -259,16 +250,13 @@ button.btn-floating {
259
250
  bottom: 64px;
260
251
  margin: 0;
261
252
  visibility: hidden;
262
-
263
253
  li {
264
254
  margin-bottom: 15px;
265
255
  }
266
-
267
256
  a.btn-floating {
268
257
  opacity: 0;
269
258
  }
270
259
  }
271
-
272
260
  .fab-backdrop {
273
261
  position: absolute;
274
262
  top: 0;
@@ -289,16 +277,13 @@ button.btn-floating {
289
277
  color: $button-flat-color;
290
278
  cursor: pointer;
291
279
  transition: background-color .2s;
292
-
293
280
  &:focus,
294
281
  &:hover {
295
282
  box-shadow: none;
296
283
  }
297
-
298
284
  &:focus {
299
- background-color: rgba(0,0,0,.1);
285
+ background-color: rgba(0, 0, 0, .1);
300
286
  }
301
-
302
287
  &.disabled {
303
288
  background-color: transparent !important;
304
289
  color: $button-flat-disabled-color !important;
@@ -311,12 +296,25 @@ button.btn-floating {
311
296
  @extend .btn;
312
297
  height: $button-large-height;
313
298
  line-height: $button-large-height;
299
+ font-size: $button-large-font-size;
300
+ padding: 0 28px;
314
301
 
315
302
  i {
316
303
  font-size: $button-large-icon-font-size;
317
304
  }
318
305
  }
319
306
 
307
+ // Small button
308
+ .btn-small {
309
+ @extend .btn;
310
+ height: $button-small-height;
311
+ line-height: $button-small-height;
312
+ font-size: $button-small-font-size;
313
+ i {
314
+ font-size: $button-small-icon-font-size;
315
+ }
316
+ }
317
+
320
318
  // Block button
321
319
  .btn-block {
322
320
  display: block;