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.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/README.md +3 -3
- data/Rakefile +11 -9
- data/assets/javascripts/material.js +3278 -825
- data/assets/javascripts/material.min.js +17 -1
- data/assets/javascripts/material/{initializers/picker.js → addons/pickadate.js} +5 -23
- data/assets/javascripts/material/components/expansion-panel.js +9 -18
- data/assets/javascripts/material/components/floating-label.js +21 -24
- data/assets/javascripts/material/components/{navdrawer.js → nav-drawer.js} +51 -55
- data/assets/javascripts/material/components/selection-control-focus.js +15 -21
- data/assets/javascripts/material/components/tab-switch.js +13 -20
- data/assets/javascripts/material/components/util.js +31 -41
- data/assets/stylesheets/material/_functions.scss +1 -1
- data/assets/stylesheets/material/_print.scss +13 -2
- data/assets/stylesheets/material/_utilities.scss +0 -1
- data/assets/stylesheets/material/_variables.scss +0 -1
- data/assets/stylesheets/material/base/_base.scss +1 -16
- data/assets/stylesheets/material/bootstrap/_close.scss +4 -0
- data/assets/stylesheets/material/bootstrap/_code.scss +6 -0
- data/assets/stylesheets/material/bootstrap/_custom-form.scss +26 -28
- data/assets/stylesheets/material/bootstrap/_form.scss +7 -36
- data/assets/stylesheets/material/bootstrap/_pagination.scss +7 -2
- data/assets/stylesheets/material/bootstrap/_popover.scss +18 -14
- data/assets/stylesheets/material/material.scss +0 -1
- data/assets/stylesheets/material/material/_button-flat.scss +8 -8
- data/assets/stylesheets/material/material/_button-group.scss +26 -63
- data/assets/stylesheets/material/material/_button.scss +18 -18
- data/assets/stylesheets/material/material/_dialog.scss +6 -6
- data/assets/stylesheets/material/material/_expansion-panel.scss +4 -4
- data/assets/stylesheets/material/material/_menu.scss +2 -2
- data/assets/stylesheets/material/material/_picker.scss +3 -3
- data/assets/stylesheets/material/material/_progress.scss +2 -1
- data/assets/stylesheets/material/material/_selection-control.scss +88 -67
- data/assets/stylesheets/material/material/_text-field-input-group.scss +49 -82
- data/assets/stylesheets/material/material/_text-field.scss +36 -6
- data/assets/stylesheets/material/material/_toolbar.scss +4 -0
- data/assets/stylesheets/material/material/_tooltip.scss +1 -1
- data/assets/stylesheets/material/mixins/_breakpoint.scss +1 -1
- data/assets/stylesheets/material/mixins/_form.scss +79 -17
- data/assets/stylesheets/material/mixins/_grid-framework.scss +9 -3
- data/assets/stylesheets/material/mixins/_grid.scss +3 -1
- data/assets/stylesheets/material/mixins/_hover.scss +14 -55
- data/assets/stylesheets/material/mixins/_material-icons.scss +2 -4
- data/assets/stylesheets/material/mixins/_text-alignment.scss +2 -2
- data/assets/stylesheets/material/mixins/_text-hide.scss +1 -1
- data/assets/stylesheets/material/utilities/_border.scss +20 -0
- data/assets/stylesheets/material/variables/_palette.scss +2 -0
- data/assets/stylesheets/material/variables/_variable-bootstrap.scss +17 -0
- data/assets/stylesheets/material/variables/_variable-material.scss +2 -6
- data/lib/material-sass/version.rb +1 -1
- metadata +4 -12
- data/assets/javascripts/material/addons/picker.date.js +0 -234
- data/assets/javascripts/material/addons/picker.js +0 -172
- data/assets/javascripts/material/addons/textarea-autosize.js +0 -23
- data/assets/javascripts/material/addons/waves.js +0 -127
- data/assets/javascripts/material/initializers/textarea-autosize.js +0 -10
- data/assets/javascripts/material/initializers/waves.js +0 -13
- data/assets/stylesheets/material/material/_text-field-textarea.scss +0 -15
- 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.
|
10
|
-
var EVENT_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:
|
22
|
-
FOCUS:
|
23
|
-
MOUSEDOWN:
|
24
|
-
MOUSEUP:
|
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
|
-
|
25
|
+
};
|
26
|
+
$(document).on("" + Event.BLUR, Selector.INPUT, function (event) {
|
34
27
|
$(event.target).removeClass(ClassName.FOCUS);
|
35
|
-
}).on(
|
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(
|
32
|
+
}).on("" + Event.MOUSEDOWN, Selector.CONTROL, function () {
|
40
33
|
LastInteraction.IS_MOUSEDOWN = true;
|
41
|
-
}).on(
|
34
|
+
}).on("" + Event.MOUSEUP, Selector.CONTROL, function () {
|
42
35
|
setTimeout(function () {
|
43
36
|
LastInteraction.IS_MOUSEDOWN = false;
|
44
37
|
}, 1);
|
45
38
|
});
|
46
|
-
}(
|
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 =
|
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
|
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
|
-
|
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
|
-
}(
|
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
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
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-
|
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
|
-
|
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
|
-
|
74
|
-
|
75
|
-
|
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
|
-
|
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
|
-
|
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 (
|
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() +
|
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
|
-
}(
|
122
|
+
}($);
|
123
|
+
//# sourceMappingURL=util.js.map
|
@@ -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
|
}
|
@@ -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
|
|
@@ -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
|
|