material-sass 4.0.0.beta2 → 4.0.0.beta3

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 (60) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/README.md +3 -3
  4. data/Rakefile +11 -9
  5. data/assets/javascripts/material.js +3278 -825
  6. data/assets/javascripts/material.min.js +17 -1
  7. data/assets/javascripts/material/{initializers/picker.js → addons/pickadate.js} +5 -23
  8. data/assets/javascripts/material/components/expansion-panel.js +9 -18
  9. data/assets/javascripts/material/components/floating-label.js +21 -24
  10. data/assets/javascripts/material/components/{navdrawer.js → nav-drawer.js} +51 -55
  11. data/assets/javascripts/material/components/selection-control-focus.js +15 -21
  12. data/assets/javascripts/material/components/tab-switch.js +13 -20
  13. data/assets/javascripts/material/components/util.js +31 -41
  14. data/assets/stylesheets/material/_functions.scss +1 -1
  15. data/assets/stylesheets/material/_print.scss +13 -2
  16. data/assets/stylesheets/material/_utilities.scss +0 -1
  17. data/assets/stylesheets/material/_variables.scss +0 -1
  18. data/assets/stylesheets/material/base/_base.scss +1 -16
  19. data/assets/stylesheets/material/bootstrap/_close.scss +4 -0
  20. data/assets/stylesheets/material/bootstrap/_code.scss +6 -0
  21. data/assets/stylesheets/material/bootstrap/_custom-form.scss +26 -28
  22. data/assets/stylesheets/material/bootstrap/_form.scss +7 -36
  23. data/assets/stylesheets/material/bootstrap/_pagination.scss +7 -2
  24. data/assets/stylesheets/material/bootstrap/_popover.scss +18 -14
  25. data/assets/stylesheets/material/material.scss +0 -1
  26. data/assets/stylesheets/material/material/_button-flat.scss +8 -8
  27. data/assets/stylesheets/material/material/_button-group.scss +26 -63
  28. data/assets/stylesheets/material/material/_button.scss +18 -18
  29. data/assets/stylesheets/material/material/_dialog.scss +6 -6
  30. data/assets/stylesheets/material/material/_expansion-panel.scss +4 -4
  31. data/assets/stylesheets/material/material/_menu.scss +2 -2
  32. data/assets/stylesheets/material/material/_picker.scss +3 -3
  33. data/assets/stylesheets/material/material/_progress.scss +2 -1
  34. data/assets/stylesheets/material/material/_selection-control.scss +88 -67
  35. data/assets/stylesheets/material/material/_text-field-input-group.scss +49 -82
  36. data/assets/stylesheets/material/material/_text-field.scss +36 -6
  37. data/assets/stylesheets/material/material/_toolbar.scss +4 -0
  38. data/assets/stylesheets/material/material/_tooltip.scss +1 -1
  39. data/assets/stylesheets/material/mixins/_breakpoint.scss +1 -1
  40. data/assets/stylesheets/material/mixins/_form.scss +79 -17
  41. data/assets/stylesheets/material/mixins/_grid-framework.scss +9 -3
  42. data/assets/stylesheets/material/mixins/_grid.scss +3 -1
  43. data/assets/stylesheets/material/mixins/_hover.scss +14 -55
  44. data/assets/stylesheets/material/mixins/_material-icons.scss +2 -4
  45. data/assets/stylesheets/material/mixins/_text-alignment.scss +2 -2
  46. data/assets/stylesheets/material/mixins/_text-hide.scss +1 -1
  47. data/assets/stylesheets/material/utilities/_border.scss +20 -0
  48. data/assets/stylesheets/material/variables/_palette.scss +2 -0
  49. data/assets/stylesheets/material/variables/_variable-bootstrap.scss +17 -0
  50. data/assets/stylesheets/material/variables/_variable-material.scss +2 -6
  51. data/lib/material-sass/version.rb +1 -1
  52. metadata +4 -12
  53. data/assets/javascripts/material/addons/picker.date.js +0 -234
  54. data/assets/javascripts/material/addons/picker.js +0 -172
  55. data/assets/javascripts/material/addons/textarea-autosize.js +0 -23
  56. data/assets/javascripts/material/addons/waves.js +0 -127
  57. data/assets/javascripts/material/initializers/textarea-autosize.js +0 -10
  58. data/assets/javascripts/material/initializers/waves.js +0 -13
  59. data/assets/stylesheets/material/material/_text-field-textarea.scss +0 -15
  60. data/assets/stylesheets/material/utilities/_waves.scss +0 -41
@@ -2,45 +2,39 @@
2
2
  * selection control focus
3
3
  * chrome persists the focus style on checkboxes/radio buttons after clicking
4
4
  */
5
-
6
- var ControlFocus = function ($) {
7
-
5
+ var SelectionControlFocus = function ($) {
8
6
  // constants >>>
9
- var DATA_KEY = 'md.controlfocus';
10
- var EVENT_KEY = '.' + DATA_KEY;
11
-
7
+ var DATA_KEY = 'md.selectioncontrolfocus';
8
+ var EVENT_KEY = "." + DATA_KEY;
12
9
  var ClassName = {
13
10
  FOCUS: 'focus'
14
11
  };
15
-
16
12
  var LastInteraction = {
17
13
  IS_MOUSEDOWN: false
18
14
  };
19
-
20
15
  var Event = {
21
- BLUR: 'blur' + EVENT_KEY,
22
- FOCUS: 'focus' + EVENT_KEY,
23
- MOUSEDOWN: 'mousedown' + EVENT_KEY,
24
- MOUSEUP: 'mouseup' + EVENT_KEY
16
+ BLUR: "blur" + EVENT_KEY,
17
+ FOCUS: "focus" + EVENT_KEY,
18
+ MOUSEDOWN: "mousedown" + EVENT_KEY,
19
+ MOUSEUP: "mouseup" + EVENT_KEY
25
20
  };
26
-
27
21
  var Selector = {
28
22
  CONTROL: '.custom-control',
29
- INPUT: '.custom-control-input'
30
- };
31
- // <<< constants
23
+ INPUT: '.custom-control-input' // <<< constants
32
24
 
33
- $(document).on('' + Event.BLUR, Selector.INPUT, function (event) {
25
+ };
26
+ $(document).on("" + Event.BLUR, Selector.INPUT, function (event) {
34
27
  $(event.target).removeClass(ClassName.FOCUS);
35
- }).on('' + Event.FOCUS, Selector.INPUT, function (event) {
28
+ }).on("" + Event.FOCUS, Selector.INPUT, function (event) {
36
29
  if (LastInteraction.IS_MOUSEDOWN === false) {
37
30
  $(event.target).addClass(ClassName.FOCUS);
38
31
  }
39
- }).on('' + Event.MOUSEDOWN, Selector.CONTROL, function () {
32
+ }).on("" + Event.MOUSEDOWN, Selector.CONTROL, function () {
40
33
  LastInteraction.IS_MOUSEDOWN = true;
41
- }).on('' + Event.MOUSEUP, Selector.CONTROL, function () {
34
+ }).on("" + Event.MOUSEUP, Selector.CONTROL, function () {
42
35
  setTimeout(function () {
43
36
  LastInteraction.IS_MOUSEDOWN = false;
44
37
  }, 1);
45
38
  });
46
- }(jQuery);
39
+ }($);
40
+ //# sourceMappingURL=selection-control-focus.js.map
@@ -1,18 +1,13 @@
1
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2
-
3
1
  /*
4
2
  * tab indicator animation
5
3
  * requires bootstrap's (v4.0.0-beta) tab.js
6
4
  */
7
-
8
5
  var TabSwitch = function ($) {
9
-
10
6
  // constants >>>
11
7
  var DATA_KEY = 'md.tabswitch';
12
8
  var NAME = 'tabswitch';
13
9
  var NO_CONFLICT = $.fn[NAME];
14
10
  var TRANSITION_DURATION = 390;
15
-
16
11
  var ClassName = {
17
12
  ANIMATE: 'animate',
18
13
  DROPDOWN_ITEM: 'dropdown-item',
@@ -21,22 +16,20 @@ var TabSwitch = function ($) {
21
16
  SCROLLABLE: 'nav-tabs-scrollable',
22
17
  SHOW: 'show'
23
18
  };
24
-
25
19
  var Event = {
26
20
  SHOW_BS_TAB: 'show.bs.tab'
27
21
  };
28
-
29
22
  var Selector = {
30
23
  DATA_TOGGLE: '.nav-tabs [data-toggle="tab"]',
31
24
  DROPDOWN: '.dropdown',
32
- NAV: '.nav-tabs'
25
+ NAV: '.nav-tabs' // <<< constants
26
+
33
27
  };
34
- // <<< constants
35
28
 
36
- var TabSwitch = function () {
29
+ var TabSwitch =
30
+ /*#__PURE__*/
31
+ function () {
37
32
  function TabSwitch(nav) {
38
- _classCallCheck(this, TabSwitch);
39
-
40
33
  if (typeof $.fn.tab === 'undefined') {
41
34
  throw new Error('Material\'s JavaScript requires Bootstrap\'s tab.js');
42
35
  }
@@ -45,7 +38,9 @@ var TabSwitch = function ($) {
45
38
  this._navindicator = null;
46
39
  }
47
40
 
48
- TabSwitch.prototype.switch = function _switch(element, relatedTarget) {
41
+ var _proto = TabSwitch.prototype;
42
+
43
+ _proto.switch = function _switch(element, relatedTarget) {
49
44
  var _this = this;
50
45
 
51
46
  var navLeft = $(this._nav).offset().left;
@@ -63,7 +58,6 @@ var TabSwitch = function ($) {
63
58
 
64
59
  var elLeft = $(element).offset().left;
65
60
  var elWidth = $(element).outerWidth();
66
-
67
61
  $(this._navindicator).addClass(ClassName.SHOW);
68
62
  Util.reflow(this._navindicator);
69
63
 
@@ -89,19 +83,17 @@ var TabSwitch = function ($) {
89
83
  $(this._navindicator).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
90
84
  };
91
85
 
92
- TabSwitch.prototype._createIndicator = function _createIndicator(navLeft, navScrollLeft, navWidth, relatedTarget) {
86
+ _proto._createIndicator = function _createIndicator(navLeft, navScrollLeft, navWidth, relatedTarget) {
93
87
  this._navindicator = document.createElement('div');
94
-
95
88
  $(this._navindicator).addClass(ClassName.INDICATOR).appendTo(this._nav);
96
89
 
97
- if (relatedTarget !== undefined) {
90
+ if (relatedTarget !== 'undefined') {
98
91
  if ($(relatedTarget).hasClass(ClassName.DROPDOWN_ITEM)) {
99
92
  relatedTarget = $(relatedTarget).closest(Selector.DROPDOWN);
100
93
  }
101
94
 
102
95
  var relatedLeft = $(relatedTarget).offset().left;
103
96
  var relatedWidth = $(relatedTarget).outerWidth();
104
-
105
97
  $(this._navindicator).css({
106
98
  left: relatedLeft + navScrollLeft - navLeft,
107
99
  right: navWidth - (relatedLeft + navScrollLeft - navLeft + relatedWidth)
@@ -136,13 +128,14 @@ var TabSwitch = function ($) {
136
128
  $(document).on(Event.SHOW_BS_TAB, Selector.DATA_TOGGLE, function (event) {
137
129
  TabSwitch._jQueryInterface.call($(event.target), event.relatedTarget);
138
130
  });
139
-
140
131
  $.fn[NAME] = TabSwitch._jQueryInterface;
141
132
  $.fn[NAME].Constructor = TabSwitch;
133
+
142
134
  $.fn[NAME].noConflict = function () {
143
135
  $.fn[NAME] = NO_CONFLICT;
144
136
  return TabSwitch._jQueryInterface;
145
137
  };
146
138
 
147
139
  return TabSwitch;
148
- }(jQuery);
140
+ }($);
141
+ //# sourceMappingURL=tab-switch.js.map
@@ -2,18 +2,14 @@
2
2
  * global util js
3
3
  * based on bootstrap's (v4.0.0-beta) util.js
4
4
  */
5
-
6
5
  var Util = function ($) {
7
-
8
6
  var MAX_UID = 1000000;
9
7
  var transition = false;
10
8
 
11
- var TransitionEndEvent = {
12
- WebkitTransition: 'webkitTransitionEnd',
13
- MozTransition: 'transitionend',
14
- OTransition: 'oTransitionEnd otransitionend',
15
- transition: 'transitionend'
16
- };
9
+ function escapeId(selector) {
10
+ selector = typeof $.escapeSelector === 'function' ? $.escapeSelector(selector).substr(1) : selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
11
+ return selector;
12
+ }
17
13
 
18
14
  function getSpecialTransitionEndEvent() {
19
15
  return {
@@ -21,21 +17,16 @@ var Util = function ($) {
21
17
  delegateType: transition.end,
22
18
  handle: function handle(event) {
23
19
  if ($(event.target).is(this)) {
24
- // eslint-disable-next-line prefer-rest-params
25
- return event.handleObj.handler.apply(this, arguments);
20
+ return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
26
21
  }
27
- return undefined;
22
+
23
+ return undefined; // eslint-disable-line no-undefined
28
24
  }
29
25
  };
30
26
  }
31
27
 
32
- function isElement(obj) {
33
- return (obj[0] || obj).nodeType;
34
- }
35
-
36
28
  function setTransitionEndSupport() {
37
29
  transition = transitionEndTest();
38
-
39
30
  $.fn.emulateTransitionEnd = transitionEndEmulator;
40
31
 
41
32
  if (Util.supportsTransitionEnd()) {
@@ -51,17 +42,14 @@ var Util = function ($) {
51
42
  var _this = this;
52
43
 
53
44
  var called = false;
54
-
55
45
  $(this).one(Util.TRANSITION_END, function () {
56
46
  called = true;
57
47
  });
58
-
59
48
  setTimeout(function () {
60
49
  if (!called) {
61
50
  Util.triggerTransitionEnd(_this);
62
51
  }
63
52
  }, duration);
64
-
65
53
  return this;
66
54
  }
67
55
 
@@ -70,41 +58,44 @@ var Util = function ($) {
70
58
  return false;
71
59
  }
72
60
 
73
- var el = document.createElement('material');
74
-
75
- for (var name in TransitionEndEvent) {
76
- if (el.style[name] !== undefined) {
77
- return {
78
- end: TransitionEndEvent[name]
79
- };
80
- }
81
- }
82
-
83
- return false;
61
+ return {
62
+ end: 'transitionend'
63
+ };
84
64
  }
85
65
 
86
66
  var Util = {
87
67
  TRANSITION_END: 'mdTransitionEnd',
88
-
89
68
  getSelectorFromElement: function getSelectorFromElement(element) {
90
69
  var selector = element.getAttribute('data-target');
91
70
 
92
- if (!selector) {
71
+ if (!selector || selector === '#') {
93
72
  selector = element.getAttribute('href') || '';
94
- selector = /^#[a-z]/i.test(selector) ? selector : null;
95
73
  }
96
74
 
97
- return selector;
75
+ if (selector.charAt(0) === '#') {
76
+ selector = escapeId(selector);
77
+ }
78
+
79
+ try {
80
+ var $selector = $(document).find(selector);
81
+ return $selector.length > 0 ? selector : null;
82
+ } catch (err) {
83
+ return null;
84
+ }
98
85
  },
99
86
  getUID: function getUID(prefix) {
100
87
  do {
101
88
  // eslint-disable-next-line no-bitwise
102
89
  prefix += ~~(Math.random() * MAX_UID);
103
90
  } while (document.getElementById(prefix));
91
+
104
92
  return prefix;
105
93
  },
94
+ isElement: function isElement(obj) {
95
+ return (obj[0] || obj).nodeType;
96
+ },
106
97
  reflow: function reflow(element) {
107
- new Function('md', 'return md')(element.offsetHeight);
98
+ return element.offsetHeight;
108
99
  },
109
100
  supportsTransitionEnd: function supportsTransitionEnd() {
110
101
  return Boolean(transition);
@@ -114,20 +105,19 @@ var Util = function ($) {
114
105
  },
115
106
  typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
116
107
  for (var property in configTypes) {
117
- if (configTypes.hasOwnProperty(property)) {
108
+ if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
118
109
  var expectedTypes = configTypes[property];
119
110
  var value = config[property];
120
- var valueType = value && isElement(value) ? 'element' : toType(value);
111
+ var valueType = value && Util.isElement(value) ? 'element' : toType(value);
121
112
 
122
113
  if (!new RegExp(expectedTypes).test(valueType)) {
123
- throw new Error(componentName.toUpperCase() + ': ' + ('Option "' + property + '" provided type "' + valueType + '" ') + ('but expected type "' + expectedTypes + '".'));
114
+ throw new Error(componentName.toUpperCase() + ": " + ("Option \"" + property + "\" provided type \"" + valueType + "\" ") + ("but expected type \"" + expectedTypes + "\"."));
124
115
  }
125
116
  }
126
117
  }
127
118
  }
128
119
  };
129
-
130
120
  setTransitionEndSupport();
131
-
132
121
  return Util;
133
- }(jQuery);
122
+ }($);
123
+ //# sourceMappingURL=util.js.map
@@ -33,7 +33,7 @@
33
33
 
34
34
  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
35
35
 
36
- @if ($yiq >= 150) {
36
+ @if ($yiq >= $yiq-contrasted-threshold) {
37
37
  @return $black-primary;
38
38
  } @else {
39
39
  @return $white-primary;
@@ -2,6 +2,10 @@
2
2
 
3
3
  @if $enable-print-styles {
4
4
  @media print {
5
+ @page {
6
+ size: $print-page-size;
7
+ }
8
+
5
9
  *,
6
10
  *::after,
7
11
  *::before {
@@ -9,8 +13,7 @@
9
13
  text-shadow: none !important;
10
14
  }
11
15
 
12
- a,
13
- a:visited {
16
+ a:not(.btn) {
14
17
  text-decoration: underline;
15
18
  }
16
19
 
@@ -22,6 +25,10 @@
22
25
  page-break-inside: avoid;
23
26
  }
24
27
 
28
+ body {
29
+ min-width: $print-body-min-width !important;
30
+ }
31
+
25
32
  h2,
26
33
  h3,
27
34
  p {
@@ -55,6 +62,10 @@
55
62
  border: $border-width solid $border-color-solid;
56
63
  }
57
64
 
65
+ .container {
66
+ min-width: $print-body-min-width !important;
67
+ }
68
+
58
69
  .dropdown-menu {
59
70
  border: $border-width solid $border-color-solid;
60
71
  }
@@ -17,4 +17,3 @@
17
17
  // Material
18
18
 
19
19
  @import 'utilities/material-icons';
20
- @import 'utilities/waves';
@@ -1,7 +1,6 @@
1
1
  // Sass option
2
2
 
3
3
  $enable-grid-classes: true !default;
4
- $enable-hover-media-query: false !default;
5
4
  $enable-print-styles: true !default;
6
5
 
7
6
  // Variables
@@ -55,20 +55,6 @@ html {
55
55
  outline: 0 !important;
56
56
  }
57
57
 
58
- // Clickable element
59
-
60
- a,
61
- area,
62
- button,
63
- input,
64
- label,
65
- select,
66
- summary,
67
- textarea,
68
- [role='button'] {
69
- touch-action: manipulation;
70
- }
71
-
72
58
  // Code
73
59
 
74
60
  code,
@@ -137,10 +123,8 @@ select {
137
123
  }
138
124
 
139
125
  button:focus {
140
- // scss-lint:disable DuplicateProperty
141
126
  outline: 1px dotted;
142
127
  outline: 5px auto -webkit-focus-ring-color;
143
- // scss-lint:enable DuplicateProperty
144
128
  }
145
129
 
146
130
  fieldset {
@@ -244,6 +228,7 @@ svg:not(:root) {
244
228
  // Interactive
245
229
 
246
230
  summary {
231
+ cursor: pointer;
247
232
  display: list-item;
248
233
  }
249
234
 
@@ -20,4 +20,8 @@
20
20
  &:focus {
21
21
  outline: 0;
22
22
  }
23
+
24
+ &:not([disabled]):not(.disabled) {
25
+ cursor: pointer;
26
+ }
23
27
  }
@@ -5,6 +5,11 @@ code {
5
5
  color: $code-color;
6
6
  font-size: $code-font-size;
7
7
  padding: $code-padding-y $code-padding-x;
8
+ word-break: break-word;
9
+
10
+ a > & {
11
+ color: inherit;
12
+ }
8
13
  }
9
14
 
10
15
  kbd {
@@ -35,6 +40,7 @@ pre {
35
40
  color: inherit;
36
41
  font-size: inherit;
37
42
  padding: 0;
43
+ word-break: normal;
38
44
  }
39
45
  }
40
46