mui-sass 0.2.1 → 0.2.2
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/CHANGELOG.md +6 -0
- data/lib/mui/sass/version.rb +1 -1
- data/vendor/assets/javascripts/mui.js +159 -40
- data/vendor/assets/stylesheets/mui/_buttons.scss +28 -11
- data/vendor/assets/stylesheets/mui/_forms.scss +6 -0
- data/vendor/assets/stylesheets/mui/_helpers.scss +8 -0
- data/vendor/assets/stylesheets/mui/_panel.scss +10 -2
- data/vendor/assets/stylesheets/mui/_tabs.scss +1 -0
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3a4272e0e52e983333bf417400980642c0b03e7b
|
4
|
+
data.tar.gz: 98a3cbf642c51b9efd3a9928c78dc8bb5395ac97
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 43dff835385fe5d7788173893eca604fb16345cf44ea74aea259873ac9fe3c594dce03f20e408ec8ec70481fd6f4769473ede4cf64483688c1f79025fb65dc90
|
7
|
+
data.tar.gz: e05c667c0e919277f35a882bf1a7aca472c4d2551c2a52b54bedd89e9c3c9eac3eeae9ae8fb91f9b26e6f66f2f349fbab749ee73c78684f91377173f557b0814
|
data/CHANGELOG.md
CHANGED
data/lib/mui/sass/version.rb
CHANGED
@@ -138,11 +138,14 @@ var jqLite = require('../lib/jqLite.js'),
|
|
138
138
|
wrapperClass = 'mui-select',
|
139
139
|
cssSelector = '.mui-select > select',
|
140
140
|
menuClass = 'mui-select__menu',
|
141
|
+
wrapperPadding = 15, // from CSS
|
142
|
+
inputHeight = 32, // from CSS
|
141
143
|
optionHeight = 42, // from CSS
|
142
144
|
menuPadding = 8, // from CSS
|
143
145
|
doc = document,
|
144
146
|
win = window;
|
145
147
|
|
148
|
+
|
146
149
|
/**
|
147
150
|
* Initialize select element.
|
148
151
|
* @param {Element} selectEl - The select element.
|
@@ -261,7 +264,7 @@ Select.prototype.renderMenu = function() {
|
|
261
264
|
// check and reset flag
|
262
265
|
if (this.useDefault === true) return this.useDefault = false;
|
263
266
|
|
264
|
-
new Menu(this.selectEl);
|
267
|
+
new Menu(this.wrapperEl, this.selectEl);
|
265
268
|
}
|
266
269
|
|
267
270
|
|
@@ -269,18 +272,22 @@ Select.prototype.renderMenu = function() {
|
|
269
272
|
* Creates a new Menu
|
270
273
|
* @class
|
271
274
|
*/
|
272
|
-
function Menu(selectEl) {
|
275
|
+
function Menu(wrapperEl, selectEl) {
|
276
|
+
// add scroll lock
|
277
|
+
util.enableScrollLock();
|
278
|
+
|
273
279
|
// instance variables
|
274
280
|
this.origIndex = null;
|
275
281
|
this.currentIndex = null;
|
276
282
|
this.selectEl = selectEl;
|
277
|
-
this.menuEl = this._createMenuEl(selectEl);
|
283
|
+
this.menuEl = this._createMenuEl(wrapperEl, selectEl);
|
278
284
|
this.clickCallbackFn = util.callback(this, 'clickHandler');
|
279
285
|
this.keydownCallbackFn = util.callback(this, 'keydownHandler');
|
280
286
|
this.destroyCallbackFn = util.callback(this, 'destroy');
|
281
287
|
|
282
288
|
// add to DOM
|
283
|
-
|
289
|
+
wrapperEl.appendChild(this.menuEl);
|
290
|
+
jqLite.scrollTop(this.menuEl, this.menuEl._muiScrollTop);
|
284
291
|
|
285
292
|
// blur active element
|
286
293
|
setTimeout(function() {
|
@@ -289,7 +296,7 @@ function Menu(selectEl) {
|
|
289
296
|
doc.activeElement.blur();
|
290
297
|
}
|
291
298
|
}, 0);
|
292
|
-
|
299
|
+
|
293
300
|
// attach event handlers
|
294
301
|
jqLite.on(this.menuEl, 'click', this.clickCallbackFn);
|
295
302
|
jqLite.on(doc, 'keydown', this.keydownCallbackFn);
|
@@ -305,15 +312,14 @@ function Menu(selectEl) {
|
|
305
312
|
* Create menu element
|
306
313
|
* @param {Element} selectEl - The select element
|
307
314
|
*/
|
308
|
-
Menu.prototype._createMenuEl = function(selectEl) {
|
315
|
+
Menu.prototype._createMenuEl = function(wrapperEl, selectEl) {
|
309
316
|
var optionEl, itemEl, i, minTop, maxTop, top;
|
310
317
|
|
311
318
|
var menuEl = doc.createElement('div'),
|
312
319
|
optionList = selectEl.children,
|
313
320
|
m = optionList.length,
|
314
321
|
selectedPos = 0,
|
315
|
-
|
316
|
-
|
322
|
+
initTop = (menuPadding + optionHeight) - (wrapperPadding + inputHeight);
|
317
323
|
|
318
324
|
// create element
|
319
325
|
menuEl.className = menuClass;
|
@@ -341,26 +347,43 @@ Menu.prototype._createMenuEl = function(selectEl) {
|
|
341
347
|
var viewHeight = doc.documentElement.clientHeight;
|
342
348
|
|
343
349
|
// set height (use viewport as maximum height)
|
344
|
-
var height = m * optionHeight + 2 * menuPadding
|
350
|
+
var height = m * optionHeight + 2 * menuPadding,
|
351
|
+
isOverflow = height > viewHeight;
|
352
|
+
|
345
353
|
height = Math.min(height, viewHeight);
|
346
354
|
jqLite.css(menuEl, 'height', height + 'px');
|
347
355
|
|
348
356
|
// ideal position
|
349
|
-
|
350
|
-
idealTop = -1 * idealTop;
|
357
|
+
initTop -= selectedPos * optionHeight;
|
351
358
|
|
352
359
|
// minimum position
|
353
|
-
minTop = -1 *
|
360
|
+
minTop = -1 * wrapperEl.getBoundingClientRect().top;
|
354
361
|
|
355
362
|
// maximium position
|
356
363
|
maxTop = (viewHeight - height) + minTop;
|
357
364
|
|
358
365
|
// prevent overflow-y
|
359
|
-
top = Math.max(
|
366
|
+
top = Math.max(initTop, minTop);
|
360
367
|
top = Math.min(top, maxTop);
|
361
368
|
|
362
369
|
jqLite.css(menuEl, 'top', top + 'px');
|
363
370
|
|
371
|
+
// set menu scroll position
|
372
|
+
if (isOverflow) {
|
373
|
+
var scrollIdeal, scrollMax;
|
374
|
+
|
375
|
+
scrollIdeal = (menuPadding + (selectedPos + 1) * optionHeight) -
|
376
|
+
(-1 * top + wrapperPadding + inputHeight);
|
377
|
+
|
378
|
+
scrollMax = m * optionHeight + 2 * menuPadding - height;
|
379
|
+
|
380
|
+
menuEl._muiHasOverflow = true;
|
381
|
+
menuEl._muiScrollTop = Math.min(scrollIdeal, scrollMax);
|
382
|
+
} else {
|
383
|
+
menuEl._muiHasOverflow = false;
|
384
|
+
menuEl._muiScrollTop = 0;
|
385
|
+
}
|
386
|
+
|
364
387
|
return menuEl;
|
365
388
|
}
|
366
389
|
|
@@ -460,7 +483,10 @@ Menu.prototype.destroy = function() {
|
|
460
483
|
// remove element and focus element
|
461
484
|
this.menuEl.parentNode.removeChild(this.menuEl);
|
462
485
|
this.selectEl.focus();
|
463
|
-
|
486
|
+
|
487
|
+
// remove scroll lock
|
488
|
+
util.disableScrollLock();
|
489
|
+
|
464
490
|
// remove event handlers
|
465
491
|
jqLite.off(this.menuEl, 'click', this.clickCallbackFn);
|
466
492
|
jqLite.off(doc, 'keydown', this.keydownCallbackFn);
|
@@ -596,6 +622,11 @@ module.exports = {
|
|
596
622
|
|
597
623
|
'use strict';
|
598
624
|
|
625
|
+
// Global vars
|
626
|
+
var gDoc = document,
|
627
|
+
gDocEl = gDoc.documentElement,
|
628
|
+
gWin = window;
|
629
|
+
|
599
630
|
|
600
631
|
/**
|
601
632
|
* Add a class to an element.
|
@@ -765,23 +796,63 @@ function jqLiteOne(element, type, callback, useCapture) {
|
|
765
796
|
}
|
766
797
|
|
767
798
|
|
799
|
+
/**
|
800
|
+
* Get or set horizontal scroll position
|
801
|
+
* @param {Element} element - The DOM element
|
802
|
+
* @param {number} [value] - The scroll position
|
803
|
+
*/
|
804
|
+
function jqLiteScrollLeft(element, value) {
|
805
|
+
// get
|
806
|
+
if (value === undefined) {
|
807
|
+
if (element === gWin) {
|
808
|
+
var t = (gWin.pageXOffset || gDocEl.scrollLeft)
|
809
|
+
return t - (gDocEl.clientLeft || 0);
|
810
|
+
} else {
|
811
|
+
return element.scrollLeft;
|
812
|
+
}
|
813
|
+
}
|
814
|
+
|
815
|
+
// set
|
816
|
+
if (element === gWin) gWin.scrollTo(value, jqLiteScrollTop(gWin));
|
817
|
+
else element.scrollLeft = value;
|
818
|
+
}
|
819
|
+
|
820
|
+
|
821
|
+
/**
|
822
|
+
* Get or set vertical scroll position
|
823
|
+
* @param {Element} element - The DOM element
|
824
|
+
* @param {number} value - The scroll position
|
825
|
+
*/
|
826
|
+
function jqLiteScrollTop(element, value) {
|
827
|
+
//return _scrollPos(element, 'top', value);
|
828
|
+
|
829
|
+
// get
|
830
|
+
if (value === undefined) {
|
831
|
+
if (element === gWin) {
|
832
|
+
return (gWin.pageYOffset || gDocEl.scrollTop) - (gDocEl.clientTop || 0);
|
833
|
+
} else {
|
834
|
+
return element.scrollTop;
|
835
|
+
}
|
836
|
+
}
|
837
|
+
|
838
|
+
// set
|
839
|
+
if (element === gWin) gWin.scrollTo(jqLiteScrollLeft(gWin), value);
|
840
|
+
else element.scrollTop = value;
|
841
|
+
}
|
842
|
+
|
843
|
+
|
768
844
|
/**
|
769
845
|
* Return object representing top/left offset and element height/width.
|
770
846
|
* @param {Element} element - The DOM element.
|
771
847
|
*/
|
772
848
|
function jqLiteOffset(element) {
|
773
|
-
var
|
774
|
-
|
775
|
-
|
776
|
-
viewLeft,
|
777
|
-
viewTop;
|
778
|
-
|
779
|
-
viewLeft = (win.pageXOffset || docEl.scrollLeft) - (docEl.clientLeft || 0);
|
780
|
-
viewTop = (win.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
|
849
|
+
var rect = element.getBoundingClientRect(),
|
850
|
+
scrollTop = jqLiteScrollTop(gWin),
|
851
|
+
scrollLeft = jqLiteScrollLeft(gWin);
|
781
852
|
|
782
853
|
return {
|
783
|
-
top: rect.top +
|
784
|
-
left: rect.left +
|
854
|
+
top: rect.top + scrollTop,
|
855
|
+
left: rect.left + scrollLeft,
|
785
856
|
height: rect.height,
|
786
857
|
width: rect.width
|
787
858
|
};
|
@@ -938,7 +1009,13 @@ module.exports = {
|
|
938
1009
|
removeClass: jqLiteRemoveClass,
|
939
1010
|
|
940
1011
|
/** Check JavaScript variable instance type */
|
941
|
-
type: jqLiteType
|
1012
|
+
type: jqLiteType,
|
1013
|
+
|
1014
|
+
/** Get or set horizontal scroll position */
|
1015
|
+
scrollLeft: jqLiteScrollLeft,
|
1016
|
+
|
1017
|
+
/** Get or set vertical scroll position */
|
1018
|
+
scrollTop: jqLiteScrollTop
|
942
1019
|
};
|
943
1020
|
|
944
1021
|
},{}],6:[function(require,module,exports){
|
@@ -953,12 +1030,14 @@ module.exports = {
|
|
953
1030
|
var config = require('../config.js'),
|
954
1031
|
jqLite = require('./jqLite.js'),
|
955
1032
|
win = window,
|
956
|
-
doc =
|
1033
|
+
doc = document,
|
957
1034
|
nodeInsertedCallbacks = [],
|
1035
|
+
scrollLock = 0,
|
1036
|
+
scrollLockPos,
|
1037
|
+
scrollLockEl,
|
958
1038
|
head,
|
959
1039
|
_supportsPointerEvents;
|
960
1040
|
|
961
|
-
|
962
1041
|
head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElement;
|
963
1042
|
|
964
1043
|
|
@@ -982,18 +1061,16 @@ function logFn() {
|
|
982
1061
|
* @param {string} cssText - The css text.
|
983
1062
|
*/
|
984
1063
|
function loadStyleFn(cssText) {
|
985
|
-
|
986
|
-
|
987
|
-
} else {
|
988
|
-
var e = doc.createElement('style');
|
989
|
-
e.type = 'text/css';
|
990
|
-
|
991
|
-
if (e.styleSheet) e.styleSheet.cssText = cssText;
|
992
|
-
else e.appendChild(doc.createTextNode(cssText));
|
1064
|
+
var e = doc.createElement('style');
|
1065
|
+
e.type = 'text/css';
|
993
1066
|
|
994
|
-
|
995
|
-
|
996
|
-
|
1067
|
+
if (e.styleSheet) e.styleSheet.cssText = cssText;
|
1068
|
+
else e.appendChild(doc.createTextNode(cssText));
|
1069
|
+
|
1070
|
+
// add to document
|
1071
|
+
head.insertBefore(e, head.firstChild);
|
1072
|
+
|
1073
|
+
return e;
|
997
1074
|
}
|
998
1075
|
|
999
1076
|
|
@@ -1106,6 +1183,41 @@ function dispatchEventFn(element, eventType, bubbles, cancelable, data) {
|
|
1106
1183
|
}
|
1107
1184
|
|
1108
1185
|
|
1186
|
+
/**
|
1187
|
+
* Turn on window scroll lock.
|
1188
|
+
*/
|
1189
|
+
function enableScrollLockFn() {
|
1190
|
+
// increment counter
|
1191
|
+
scrollLock += 1
|
1192
|
+
|
1193
|
+
// add lock
|
1194
|
+
if (scrollLock === 1) {
|
1195
|
+
scrollLockPos = {left: jqLite.scrollLeft(win), top: jqLite.scrollTop(win)};
|
1196
|
+
scrollLockEl = loadStyleFn('body{overflow:hidden!important;}');
|
1197
|
+
win.scrollTo(scrollLockPos.left, scrollLockPos.top);
|
1198
|
+
}
|
1199
|
+
}
|
1200
|
+
|
1201
|
+
|
1202
|
+
/**
|
1203
|
+
* Turn off window scroll lock.
|
1204
|
+
*/
|
1205
|
+
function disableScrollLockFn() {
|
1206
|
+
// ignore
|
1207
|
+
if (scrollLock === 0) return;
|
1208
|
+
|
1209
|
+
// decrement counter
|
1210
|
+
scrollLock -= 1
|
1211
|
+
|
1212
|
+
// remove lock
|
1213
|
+
if (scrollLock === 0) {
|
1214
|
+
scrollLockEl.parentNode.removeChild(scrollLockEl);
|
1215
|
+
win.scrollTo(scrollLockPos.left, scrollLockPos.top);
|
1216
|
+
scrollLockEl = null;
|
1217
|
+
}
|
1218
|
+
}
|
1219
|
+
|
1220
|
+
|
1109
1221
|
/**
|
1110
1222
|
* Define the module API
|
1111
1223
|
*/
|
@@ -1116,9 +1228,15 @@ module.exports = {
|
|
1116
1228
|
/** Classnames object to string */
|
1117
1229
|
classNames: classNamesFn,
|
1118
1230
|
|
1231
|
+
/** Disable scroll lock */
|
1232
|
+
disableScrollLock: disableScrollLockFn,
|
1233
|
+
|
1119
1234
|
/** Dispatch event */
|
1120
1235
|
dispatchEvent: dispatchEventFn,
|
1121
1236
|
|
1237
|
+
/** Enable scroll lock */
|
1238
|
+
enableScrollLock: enableScrollLockFn,
|
1239
|
+
|
1122
1240
|
/** Log messages to the console when debug is turned on */
|
1123
1241
|
log: logFn,
|
1124
1242
|
|
@@ -1244,7 +1362,8 @@ function overlayOn(options, childElement) {
|
|
1244
1362
|
overlayEl = document.getElementById(overlayId);
|
1245
1363
|
|
1246
1364
|
// add overlay
|
1247
|
-
|
1365
|
+
util.enableScrollLock();
|
1366
|
+
//jqLite.addClass(bodyEl, bodyClass);
|
1248
1367
|
|
1249
1368
|
if (!overlayEl) {
|
1250
1369
|
// create overlayEl
|
@@ -1301,7 +1420,7 @@ function overlayOff() {
|
|
1301
1420
|
callbackFn = overlayEl.muiOptions.onclose;
|
1302
1421
|
}
|
1303
1422
|
|
1304
|
-
|
1423
|
+
util.disableScrollLock();
|
1305
1424
|
|
1306
1425
|
// remove option handlers
|
1307
1426
|
removeKeyupHandler();
|
@@ -2,15 +2,31 @@
|
|
2
2
|
* MUI Buttons
|
3
3
|
*/
|
4
4
|
|
5
|
-
|
6
|
-
0 0px 2px rgba(mui-color('black'), 0.12),
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
5
|
+
@mixin x-btn-box-shadow-raised() {
|
6
|
+
box-shadow: 0 0px 2px rgba(mui-color('black'), 0.12),
|
7
|
+
0 2px 2px rgba(mui-color('black'), 0.20);
|
8
|
+
|
9
|
+
// IE10+
|
10
|
+
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
11
|
+
box-shadow: 0 -1px 2px rgba(mui-color('black'), 0.12),
|
12
|
+
-1px 0px 2px rgba(mui-color('black'), 0.12),
|
13
|
+
0 0px 2px rgba(mui-color('black'), 0.12),
|
14
|
+
0 2px 2px rgba(mui-color('black'), 0.20);
|
15
|
+
}
|
16
|
+
}
|
12
17
|
|
18
|
+
@mixin x-btn-box-shadow-active() {
|
19
|
+
box-shadow: 0 10px 20px rgba(mui-color('black'), 0.19),
|
20
|
+
0 6px 6px rgba(mui-color('black'), 0.23);
|
13
21
|
|
22
|
+
// IE10+
|
23
|
+
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
24
|
+
box-shadow: 0 -1px 2px rgba(mui-color('black'), 0.12),
|
25
|
+
-1px 0px 2px rgba(mui-color('black'), 0.12),
|
26
|
+
0 10px 20px rgba(mui-color('black'), 0.19),
|
27
|
+
0 6px 6px rgba(mui-color('black'), 0.23);
|
28
|
+
}
|
29
|
+
}
|
14
30
|
|
15
31
|
// ============================================================================
|
16
32
|
// DEFAULT-BUTTON
|
@@ -67,11 +83,12 @@ $mui-btn-box-shadow-active:
|
|
67
83
|
|
68
84
|
&:hover,
|
69
85
|
&:focus {
|
70
|
-
|
86
|
+
@include x-btn-box-shadow-raised();
|
87
|
+
|
71
88
|
}
|
72
89
|
|
73
90
|
&:active {
|
74
|
-
|
91
|
+
@include x-btn-box-shadow-active();
|
75
92
|
}
|
76
93
|
|
77
94
|
&:disabled,
|
@@ -115,10 +132,10 @@ $mui-btn-box-shadow-active:
|
|
115
132
|
// ----------------------------------------------------------------------------
|
116
133
|
|
117
134
|
.mui-btn--raised {
|
118
|
-
|
135
|
+
@include x-btn-box-shadow-raised();
|
119
136
|
|
120
137
|
&:active {
|
121
|
-
|
138
|
+
@include x-btn-box-shadow-active();
|
122
139
|
}
|
123
140
|
}
|
124
141
|
|
@@ -342,6 +342,12 @@ input[type="checkbox"]:disabled {
|
|
342
342
|
background-color: mui-color('white');
|
343
343
|
font-size: $mui-input-font-size;
|
344
344
|
|
345
|
+
// IE10+ bugfix
|
346
|
+
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
347
|
+
border-left: 1px solid mui-color('black-alpha-12');
|
348
|
+
border-top: 1px solid mui-color('black-alpha-12');
|
349
|
+
}
|
350
|
+
|
345
351
|
> div {
|
346
352
|
padding: 0 22px;
|
347
353
|
height: $mui-input-font-size + 26px;
|
@@ -196,6 +196,14 @@
|
|
196
196
|
overflow: hidden !important;
|
197
197
|
}
|
198
198
|
|
199
|
+
.mui--overflow-hidden-x {
|
200
|
+
overflow-x: hidden !important;
|
201
|
+
}
|
202
|
+
|
203
|
+
.mui--overflow-hidden-y {
|
204
|
+
overflow-y: hidden !important;
|
205
|
+
}
|
206
|
+
|
199
207
|
|
200
208
|
|
201
209
|
// ============================================================================
|
@@ -9,6 +9,14 @@
|
|
9
9
|
margin-bottom: $mui-base-line-height-computed;
|
10
10
|
border-radius: $mui-panel-border-radius;
|
11
11
|
background-color: $mui-panel-bg-color;
|
12
|
-
box-shadow: 0 2px 2px 0 rgba(
|
13
|
-
0 0px 2px 0 rgba(
|
12
|
+
box-shadow: 0 2px 2px 0 rgba(mui-color('black'), 0.16),
|
13
|
+
0 0px 2px 0 rgba(mui-color('black'), 0.12);
|
14
|
+
|
15
|
+
// IE10+ bugfix
|
16
|
+
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
17
|
+
box-shadow: 0 -1px 2px 0 rgba(mui-color('black'), 0.12),
|
18
|
+
-1px 0px 2px 0 rgba(mui-color('black'), 0.12),
|
19
|
+
0 2px 2px 0 rgba(mui-color('black'), 0.16),
|
20
|
+
0 0px 2px 0 rgba(mui-color('black'), 0.12);
|
21
|
+
}
|
14
22
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: mui-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.2.
|
4
|
+
version: 0.2.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dmitriy Tarasov
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-
|
11
|
+
date: 2015-11-22 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|