mui-sass 0.1.23 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -0
- data/lib/mui/sass/version.rb +1 -1
- data/vendor/assets/javascripts/mui.js +116 -119
- data/vendor/assets/stylesheets/mui/_appbar.scss +5 -5
- data/vendor/assets/stylesheets/mui/_buttons.scss +16 -23
- data/vendor/assets/stylesheets/mui/_colors.scss +0 -8
- data/vendor/assets/stylesheets/mui/_dividers.scss +4 -4
- data/vendor/assets/stylesheets/mui/_dropdowns.scss +5 -6
- data/vendor/assets/stylesheets/mui/_forms.scss +99 -113
- data/vendor/assets/stylesheets/mui/_grid.scss +9 -6
- data/vendor/assets/stylesheets/mui/_helpers.scss +117 -61
- data/vendor/assets/stylesheets/mui/_layout.scss +3 -4
- data/vendor/assets/stylesheets/mui/_mixins.scss +0 -13
- data/vendor/assets/stylesheets/mui/_overlay.scss +0 -5
- data/vendor/assets/stylesheets/mui/_panel.scss +1 -1
- data/vendor/assets/stylesheets/mui/_ripple.scss +5 -11
- data/vendor/assets/stylesheets/mui/_scaffolding.scss +1 -1
- data/vendor/assets/stylesheets/mui/_semantic-markup.scss +5 -5
- data/vendor/assets/stylesheets/mui/_tables.scss +1 -2
- data/vendor/assets/stylesheets/mui/_tabs.scss +8 -10
- data/vendor/assets/stylesheets/mui/_typography.scss +12 -12
- data/vendor/assets/stylesheets/mui/_variables.scss +0 -3
- data/vendor/assets/stylesheets/mui/mixins/_buttons.scss +1 -2
- data/vendor/assets/stylesheets/mui/mixins/_grid-framework.scss +45 -28
- data/vendor/assets/stylesheets/mui/mixins/_typography.scss +0 -54
- data/vendor/assets/stylesheets/mui/mixins/_util.scss +41 -0
- metadata +2 -32
- data/vendor/assets/stylesheets/bootstrap-3.3.1/LICENSE +0 -21
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_alerts.scss +0 -14
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -11
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -18
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -52
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_center-block.scss +0 -7
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -22
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -88
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -58
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -81
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -122
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_hide-text.scss +0 -21
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_image.scss +0 -33
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_labels.scss +0 -12
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -31
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss +0 -9
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_opacity.scss +0 -8
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -23
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_panels.scss +0 -24
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_progress-bar.scss +0 -10
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_reset-filter.scss +0 -8
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss +0 -21
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_size.scss +0 -10
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_tab-focus.scss +0 -9
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -28
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -11
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_text-overflow.scss +0 -8
- data/vendor/assets/stylesheets/bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss +0 -222
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 28053454a00e1c7a3a64d6fb3a8730d0da3535a9
|
4
|
+
data.tar.gz: a9109a451382a7177256715fa0ff1b016984c2a2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b969a6308bb1573e21881f206a59090a214441dc63ede12679e6ff39eea7ca02e6f5d0d68f03e6aa3531dc8fbc9dd83f12cd5603583ae1a3f986d753f96b54c7
|
7
|
+
data.tar.gz: f6f950034f6c81ab533564ae20ff58540b64eceec0fe079846f37b885bd3e85eb59304c5b0cf84ff85612d9d756c472339936cef008107beb3edbd02cafead30
|
data/CHANGELOG.md
CHANGED
data/lib/mui/sass/version.rb
CHANGED
@@ -23,8 +23,8 @@ var jqLite = require('./lib/jqLite.js'),
|
|
23
23
|
util = require('./lib/util.js'),
|
24
24
|
attrKey = 'data-mui-toggle',
|
25
25
|
attrSelector = '[data-mui-toggle="dropdown"]',
|
26
|
-
openClass = 'mui
|
27
|
-
menuClass = 'mui-
|
26
|
+
openClass = 'mui--is-open',
|
27
|
+
menuClass = 'mui-dropdown__menu';
|
28
28
|
|
29
29
|
|
30
30
|
/**
|
@@ -125,108 +125,6 @@ module.exports = {
|
|
125
125
|
};
|
126
126
|
|
127
127
|
},{"./lib/jqLite.js":5,"./lib/util.js":6}],3:[function(require,module,exports){
|
128
|
-
/**
|
129
|
-
* MUI CSS/JS form-control module
|
130
|
-
* @module forms/form-control
|
131
|
-
*/
|
132
|
-
|
133
|
-
'use strict';
|
134
|
-
|
135
|
-
|
136
|
-
var jqLite = require('../lib/jqLite.js'),
|
137
|
-
util = require('../lib/util.js'),
|
138
|
-
cssSelector = '.mui-form-control',
|
139
|
-
emptyClass = 'mui-empty',
|
140
|
-
notEmptyClass = 'mui-not-empty',
|
141
|
-
dirtyClass = 'mui-dirty',
|
142
|
-
formControlClass = 'mui-form-control',
|
143
|
-
floatingLabelClass = 'mui-form-floating-label';
|
144
|
-
|
145
|
-
|
146
|
-
/**
|
147
|
-
* Initialize input element.
|
148
|
-
* @param {Element} inputEl - The input element.
|
149
|
-
*/
|
150
|
-
function initialize(inputEl) {
|
151
|
-
// check flag
|
152
|
-
if (inputEl._muiFormControl === true) return;
|
153
|
-
else inputEl._muiFormControl = true;
|
154
|
-
|
155
|
-
if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
|
156
|
-
else jqLite.addClass(inputEl, emptyClass);
|
157
|
-
|
158
|
-
jqLite.on(inputEl, 'input', inputHandler);
|
159
|
-
|
160
|
-
// add dirty class on focus
|
161
|
-
jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});
|
162
|
-
}
|
163
|
-
|
164
|
-
|
165
|
-
/**
|
166
|
-
* Handle input events.
|
167
|
-
*/
|
168
|
-
function inputHandler() {
|
169
|
-
var inputEl = this;
|
170
|
-
|
171
|
-
if (inputEl.value.length) {
|
172
|
-
jqLite.removeClass(inputEl, emptyClass);
|
173
|
-
jqLite.addClass(inputEl, notEmptyClass);
|
174
|
-
} else {
|
175
|
-
jqLite.removeClass(inputEl, notEmptyClass);
|
176
|
-
jqLite.addClass(inputEl, emptyClass)
|
177
|
-
}
|
178
|
-
|
179
|
-
jqLite.addClass(inputEl, dirtyClass);
|
180
|
-
}
|
181
|
-
|
182
|
-
|
183
|
-
/** Define module API */
|
184
|
-
module.exports = {
|
185
|
-
/** Initialize input elements */
|
186
|
-
initialize: initialize,
|
187
|
-
|
188
|
-
/** Initialize module listeners */
|
189
|
-
initListeners: function() {
|
190
|
-
var doc = document;
|
191
|
-
|
192
|
-
// markup elements available when method is called
|
193
|
-
var elList = doc.querySelectorAll(cssSelector);
|
194
|
-
for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
|
195
|
-
|
196
|
-
// listen for new elements
|
197
|
-
util.onNodeInserted(function(el) {
|
198
|
-
if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') initialize(el);
|
199
|
-
});
|
200
|
-
|
201
|
-
// add transition css for floating labels
|
202
|
-
setTimeout(function() {
|
203
|
-
var css = '.' + floatingLabelClass + '{' + [
|
204
|
-
'-webkit-transition',
|
205
|
-
'-moz-transition',
|
206
|
-
'-o-transition',
|
207
|
-
'transition',
|
208
|
-
''
|
209
|
-
].join(':all .15s ease-out;') + '}';
|
210
|
-
|
211
|
-
util.loadStyle(css);
|
212
|
-
}, 150);
|
213
|
-
|
214
|
-
// pointer-events shim for floating labels
|
215
|
-
if (util.supportsPointerEvents() === false) {
|
216
|
-
jqLite.on(document, 'click', function(ev) {
|
217
|
-
var targetEl = ev.target;
|
218
|
-
|
219
|
-
if (targetEl.tagName === 'LABEL' &&
|
220
|
-
jqLite.hasClass(targetEl, floatingLabelClass)) {
|
221
|
-
var inputEl = targetEl.previousElementSibling;
|
222
|
-
if (jqLite.hasClass(inputEl, formControlClass)) inputEl.focus();
|
223
|
-
}
|
224
|
-
});
|
225
|
-
}
|
226
|
-
}
|
227
|
-
};
|
228
|
-
|
229
|
-
},{"../lib/jqLite.js":5,"../lib/util.js":6}],4:[function(require,module,exports){
|
230
128
|
/**
|
231
129
|
* MUI CSS/JS select module
|
232
130
|
* @module forms/select
|
@@ -239,7 +137,7 @@ var jqLite = require('../lib/jqLite.js'),
|
|
239
137
|
util = require('../lib/util.js'),
|
240
138
|
wrapperClass = 'mui-select',
|
241
139
|
cssSelector = '.mui-select > select',
|
242
|
-
menuClass = 'mui-
|
140
|
+
menuClass = 'mui-select__menu',
|
243
141
|
optionHeight = 42, // from CSS
|
244
142
|
menuPadding = 8, // from CSS
|
245
143
|
doc = document,
|
@@ -589,6 +487,108 @@ module.exports = {
|
|
589
487
|
}
|
590
488
|
};
|
591
489
|
|
490
|
+
},{"../lib/jqLite.js":5,"../lib/util.js":6}],4:[function(require,module,exports){
|
491
|
+
/**
|
492
|
+
* MUI CSS/JS form-control module
|
493
|
+
* @module forms/form-control
|
494
|
+
*/
|
495
|
+
|
496
|
+
'use strict';
|
497
|
+
|
498
|
+
|
499
|
+
var jqLite = require('../lib/jqLite.js'),
|
500
|
+
util = require('../lib/util.js'),
|
501
|
+
cssSelector = '.mui-textfield__input',
|
502
|
+
emptyClass = 'mui--is-empty',
|
503
|
+
notEmptyClass = 'mui--is-not-empty',
|
504
|
+
dirtyClass = 'mui--is-dirty',
|
505
|
+
formControlClass = 'mui-textfield__input',
|
506
|
+
floatingLabelClass = 'mui-textfield__label--floating';
|
507
|
+
|
508
|
+
|
509
|
+
/**
|
510
|
+
* Initialize input element.
|
511
|
+
* @param {Element} inputEl - The input element.
|
512
|
+
*/
|
513
|
+
function initialize(inputEl) {
|
514
|
+
// check flag
|
515
|
+
if (inputEl._muiTextfield === true) return;
|
516
|
+
else inputEl._muiTextfield = true;
|
517
|
+
|
518
|
+
if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
|
519
|
+
else jqLite.addClass(inputEl, emptyClass);
|
520
|
+
|
521
|
+
jqLite.on(inputEl, 'input', inputHandler);
|
522
|
+
|
523
|
+
// add dirty class on focus
|
524
|
+
jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});
|
525
|
+
}
|
526
|
+
|
527
|
+
|
528
|
+
/**
|
529
|
+
* Handle input events.
|
530
|
+
*/
|
531
|
+
function inputHandler() {
|
532
|
+
var inputEl = this;
|
533
|
+
|
534
|
+
if (inputEl.value.length) {
|
535
|
+
jqLite.removeClass(inputEl, emptyClass);
|
536
|
+
jqLite.addClass(inputEl, notEmptyClass);
|
537
|
+
} else {
|
538
|
+
jqLite.removeClass(inputEl, notEmptyClass);
|
539
|
+
jqLite.addClass(inputEl, emptyClass)
|
540
|
+
}
|
541
|
+
|
542
|
+
jqLite.addClass(inputEl, dirtyClass);
|
543
|
+
}
|
544
|
+
|
545
|
+
|
546
|
+
/** Define module API */
|
547
|
+
module.exports = {
|
548
|
+
/** Initialize input elements */
|
549
|
+
initialize: initialize,
|
550
|
+
|
551
|
+
/** Initialize module listeners */
|
552
|
+
initListeners: function() {
|
553
|
+
var doc = document;
|
554
|
+
|
555
|
+
// markup elements available when method is called
|
556
|
+
var elList = doc.querySelectorAll(cssSelector);
|
557
|
+
for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
|
558
|
+
|
559
|
+
// listen for new elements
|
560
|
+
util.onNodeInserted(function(el) {
|
561
|
+
if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') initialize(el);
|
562
|
+
});
|
563
|
+
|
564
|
+
// add transition css for floating labels
|
565
|
+
setTimeout(function() {
|
566
|
+
var css = '.' + floatingLabelClass + '{' + [
|
567
|
+
'-webkit-transition',
|
568
|
+
'-moz-transition',
|
569
|
+
'-o-transition',
|
570
|
+
'transition',
|
571
|
+
''
|
572
|
+
].join(':all .15s ease-out;') + '}';
|
573
|
+
|
574
|
+
util.loadStyle(css);
|
575
|
+
}, 150);
|
576
|
+
|
577
|
+
// pointer-events shim for floating labels
|
578
|
+
if (util.supportsPointerEvents() === false) {
|
579
|
+
jqLite.on(document, 'click', function(ev) {
|
580
|
+
var targetEl = ev.target;
|
581
|
+
|
582
|
+
if (targetEl.tagName === 'LABEL' &&
|
583
|
+
jqLite.hasClass(targetEl, floatingLabelClass)) {
|
584
|
+
var inputEl = targetEl.previousElementSibling;
|
585
|
+
if (jqLite.hasClass(inputEl, formControlClass)) inputEl.focus();
|
586
|
+
}
|
587
|
+
});
|
588
|
+
}
|
589
|
+
}
|
590
|
+
};
|
591
|
+
|
592
592
|
},{"../lib/jqLite.js":5,"../lib/util.js":6}],5:[function(require,module,exports){
|
593
593
|
/**
|
594
594
|
* MUI CSS/JS jqLite module
|
@@ -1152,7 +1152,7 @@ module.exports = {
|
|
1152
1152
|
// load dependencies
|
1153
1153
|
var jqLite = require('./lib/jqLite.js'),
|
1154
1154
|
util = require('./lib/util.js'),
|
1155
|
-
|
1155
|
+
textfield = require('./forms/textfield.js'),
|
1156
1156
|
select = require('./forms/select.js'),
|
1157
1157
|
ripple = require('./ripple.js'),
|
1158
1158
|
dropdowns = require('./dropdowns.js'),
|
@@ -1167,7 +1167,7 @@ module.exports = {
|
|
1167
1167
|
|
1168
1168
|
// init libraries
|
1169
1169
|
jqLite.ready(function() {
|
1170
|
-
|
1170
|
+
textfield.initListeners();
|
1171
1171
|
select.initListeners();
|
1172
1172
|
ripple.initListeners();
|
1173
1173
|
dropdowns.initListeners();
|
@@ -1175,7 +1175,7 @@ module.exports = {
|
|
1175
1175
|
});
|
1176
1176
|
})(window);
|
1177
1177
|
|
1178
|
-
},{"./dropdowns.js":2,"./forms/
|
1178
|
+
},{"./dropdowns.js":2,"./forms/select.js":3,"./forms/textfield.js":4,"./lib/jqLite.js":5,"./lib/util.js":6,"./overlay.js":8,"./ripple.js":9,"./tabs.js":10}],8:[function(require,module,exports){
|
1179
1179
|
/**
|
1180
1180
|
* MUI CSS/JS overlay module
|
1181
1181
|
* @module overlay
|
@@ -1186,8 +1186,8 @@ module.exports = {
|
|
1186
1186
|
|
1187
1187
|
var util = require('./lib/util.js'),
|
1188
1188
|
jqLite = require('./lib/jqLite.js'),
|
1189
|
-
bodyClass = 'mui-overlay-on',
|
1190
1189
|
overlayId = 'mui-overlay',
|
1190
|
+
bodyClass = 'mui--overflow-hidden',
|
1191
1191
|
iosRegex = /(iPad|iPhone|iPod)/g;
|
1192
1192
|
|
1193
1193
|
|
@@ -1378,8 +1378,7 @@ module.exports = overlayFn;
|
|
1378
1378
|
var jqLite = require('./lib/jqLite.js'),
|
1379
1379
|
util = require('./lib/util.js'),
|
1380
1380
|
btnClass = 'mui-btn',
|
1381
|
-
|
1382
|
-
btnFloatingClass = 'mui-btn-floating',
|
1381
|
+
btnFABClass = 'mui-btn--fab',
|
1383
1382
|
rippleClass = 'mui-ripple-effect',
|
1384
1383
|
animationName = 'mui-btn-inserted';
|
1385
1384
|
|
@@ -1435,13 +1434,8 @@ function eventHandler(ev) {
|
|
1435
1434
|
radius;
|
1436
1435
|
|
1437
1436
|
// get height
|
1438
|
-
|
1439
|
-
|
1440
|
-
buttonEl.getAttribute(btnStyleKey) === 'fab') {
|
1441
|
-
diameter = offset.height / 2;
|
1442
|
-
} else {
|
1443
|
-
diameter = offset.height;
|
1444
|
-
}
|
1437
|
+
if (jqLite.hasClass(buttonEl, btnFABClass)) diameter = offset.height / 2;
|
1438
|
+
else diameter = offset.height;
|
1445
1439
|
|
1446
1440
|
radius = diameter / 2;
|
1447
1441
|
|
@@ -1491,7 +1485,7 @@ var jqLite = require('./lib/jqLite.js'),
|
|
1491
1485
|
attrKey = 'data-mui-toggle',
|
1492
1486
|
attrSelector = '[' + attrKey + '="tab"]',
|
1493
1487
|
controlsAttrKey = 'data-mui-controls',
|
1494
|
-
activeClass = 'mui
|
1488
|
+
activeClass = 'mui--is-active',
|
1495
1489
|
showstartKey = 'mui.tabs.showstart',
|
1496
1490
|
showendKey = 'mui.tabs.showend',
|
1497
1491
|
hidestartKey = 'mui.tabs.hidestart',
|
@@ -1547,6 +1541,9 @@ function activateTab(currToggleEl) {
|
|
1547
1541
|
ev2,
|
1548
1542
|
cssSelector;
|
1549
1543
|
|
1544
|
+
// exit if already active
|
1545
|
+
if (jqLite.hasClass(currTabEl, activeClass)) return;
|
1546
|
+
|
1550
1547
|
// raise error if pane doesn't exist
|
1551
1548
|
if (!currPaneEl) util.raiseError('Tab pane "' + currPaneId + '" not found');
|
1552
1549
|
|
@@ -6,7 +6,7 @@
|
|
6
6
|
// HELPER CLASSES
|
7
7
|
// ============================================================================
|
8
8
|
|
9
|
-
.mui
|
9
|
+
.mui--appbar-height {
|
10
10
|
height: $mui-appbar-height-xs-portrait;
|
11
11
|
|
12
12
|
// mobile landscape
|
@@ -19,7 +19,7 @@
|
|
19
19
|
}
|
20
20
|
}
|
21
21
|
|
22
|
-
.mui
|
22
|
+
.mui--appbar-min-height {
|
23
23
|
min-height: $mui-appbar-height-xs-portrait;
|
24
24
|
|
25
25
|
// mobile landscape
|
@@ -32,7 +32,7 @@
|
|
32
32
|
}
|
33
33
|
}
|
34
34
|
|
35
|
-
.mui
|
35
|
+
.mui--appbar-line-height {
|
36
36
|
line-height: $mui-appbar-height-xs-portrait;
|
37
37
|
|
38
38
|
// mobile landscape
|
@@ -45,7 +45,7 @@
|
|
45
45
|
}
|
46
46
|
}
|
47
47
|
|
48
|
-
.mui
|
48
|
+
.mui--appbar-top {
|
49
49
|
top: $mui-appbar-height-xs-portrait;
|
50
50
|
|
51
51
|
// mobile landscape
|
@@ -65,7 +65,7 @@
|
|
65
65
|
// APPBAR
|
66
66
|
// ============================================================================
|
67
67
|
.mui-appbar {
|
68
|
-
@extend .mui
|
68
|
+
@extend .mui--appbar-min-height;
|
69
69
|
|
70
70
|
background-color: $mui-appbar-bg-color;
|
71
71
|
color: $mui-appbar-font-color;
|
@@ -51,6 +51,7 @@ $mui-btn-box-shadow-active:
|
|
51
51
|
white-space: nowrap;
|
52
52
|
user-select: none;
|
53
53
|
font-size: $mui-btn-font-size;
|
54
|
+
letter-spacing: 0.03em;
|
54
55
|
|
55
56
|
// For ripples
|
56
57
|
position: relative;
|
@@ -74,7 +75,7 @@ $mui-btn-box-shadow-active:
|
|
74
75
|
}
|
75
76
|
|
76
77
|
&:disabled,
|
77
|
-
&.mui
|
78
|
+
&.mui--is-disabled {
|
78
79
|
cursor: $mui-cursor-disabled;
|
79
80
|
pointer-events: none;
|
80
81
|
opacity: 0.60;
|
@@ -89,7 +90,7 @@ $mui-btn-box-shadow-active:
|
|
89
90
|
|
90
91
|
|
91
92
|
// ============================================================================
|
92
|
-
// BUTTON-
|
93
|
+
// BUTTON-TYPES
|
93
94
|
// ============================================================================
|
94
95
|
|
95
96
|
|
@@ -97,8 +98,7 @@ $mui-btn-box-shadow-active:
|
|
97
98
|
// FLAT
|
98
99
|
// ----------------------------------------------------------------------------
|
99
100
|
|
100
|
-
.mui-btn
|
101
|
-
.mui-btn[data-mui-style="flat"] {
|
101
|
+
.mui-btn--flat {
|
102
102
|
background-color: $mui-btn-flat-bg-color;
|
103
103
|
|
104
104
|
&:hover,
|
@@ -114,8 +114,7 @@ $mui-btn-box-shadow-active:
|
|
114
114
|
// RAISED
|
115
115
|
// ----------------------------------------------------------------------------
|
116
116
|
|
117
|
-
.mui-btn
|
118
|
-
.mui-btn[data-mui-style="raised"] {
|
117
|
+
.mui-btn--raised {
|
119
118
|
box-shadow: $mui-btn-box-shadow-raised;
|
120
119
|
|
121
120
|
&:active {
|
@@ -128,9 +127,8 @@ $mui-btn-box-shadow-active:
|
|
128
127
|
// FLOATING-ACTION-BUTTON-(FAB)
|
129
128
|
// ----------------------------------------------------------------------------
|
130
129
|
|
131
|
-
.mui-btn
|
132
|
-
.mui-btn
|
133
|
-
@extend .mui-btn-raised;
|
130
|
+
.mui-btn--fab {
|
131
|
+
@extend .mui-btn--raised;
|
134
132
|
|
135
133
|
// Layout
|
136
134
|
position: relative;
|
@@ -145,11 +143,10 @@ $mui-btn-box-shadow-active:
|
|
145
143
|
|
146
144
|
|
147
145
|
// ============================================================================
|
148
|
-
// BUTTON-
|
146
|
+
// BUTTON-STYLES
|
149
147
|
// ============================================================================
|
150
148
|
|
151
|
-
.mui-btn
|
152
|
-
.mui-btn[data-mui-color="primary"] {
|
149
|
+
.mui-btn--primary {
|
153
150
|
@include button-variant(
|
154
151
|
$mui-btn-primary-font-color,
|
155
152
|
$mui-btn-primary-bg-color);
|
@@ -158,7 +155,7 @@ $mui-btn-box-shadow-active:
|
|
158
155
|
$mui-btn-flat-bg-color-hover);
|
159
156
|
}
|
160
157
|
|
161
|
-
.mui-btn
|
158
|
+
.mui-btn--dark {
|
162
159
|
@include button-variant(
|
163
160
|
$mui-btn-dark-font-color,
|
164
161
|
$mui-btn-dark-bg-color);
|
@@ -167,8 +164,7 @@ $mui-btn-box-shadow-active:
|
|
167
164
|
$mui-btn-flat-bg-color-hover);
|
168
165
|
}
|
169
166
|
|
170
|
-
.mui-btn
|
171
|
-
.mui-btn[data-mui-color="danger"] {
|
167
|
+
.mui-btn--danger {
|
172
168
|
@include button-variant(
|
173
169
|
$mui-btn-danger-font-color,
|
174
170
|
$mui-btn-danger-bg-color);
|
@@ -177,8 +173,7 @@ $mui-btn-box-shadow-active:
|
|
177
173
|
$mui-btn-flat-bg-color-hover);
|
178
174
|
}
|
179
175
|
|
180
|
-
.mui-btn
|
181
|
-
.mui-btn[data-mui-color="accent"] {
|
176
|
+
.mui-btn--accent {
|
182
177
|
@include button-variant(
|
183
178
|
$mui-btn-accent-font-color,
|
184
179
|
$mui-btn-accent-bg-color);
|
@@ -193,29 +188,27 @@ $mui-btn-box-shadow-active:
|
|
193
188
|
// BUTTON-SIZES
|
194
189
|
// ============================================================================
|
195
190
|
|
196
|
-
.mui-btn
|
191
|
+
.mui-btn--small {
|
197
192
|
height: $mui-btn-height-sm;
|
198
193
|
line-height: $mui-btn-height-sm;
|
199
194
|
padding: 0 $mui-btn-padding-horizontal-sm;
|
200
195
|
font-size: $mui-btn-font-size-sm;
|
201
196
|
}
|
202
197
|
|
203
|
-
.mui-btn
|
204
|
-
.mui-btn[data-mui-size="large"] {
|
198
|
+
.mui-btn--large {
|
205
199
|
height: $mui-btn-height-lg;
|
206
200
|
line-height: $mui-btn-height-lg;
|
207
201
|
padding: 0 $mui-btn-padding-horizontal-lg;
|
208
202
|
font-size: $mui-btn-font-size-lg;
|
209
203
|
}
|
210
204
|
|
211
|
-
.mui-btn-
|
212
|
-
.mui-btn[data-mui-size="small"][data-mui-style="fab"] {
|
205
|
+
.mui-btn--fab.mui-btn--small {
|
213
206
|
width: $mui-btn-fab-diameter-sm;
|
214
207
|
height: $mui-btn-fab-diameter-sm;
|
215
208
|
line-height: $mui-btn-fab-diameter-sm;
|
216
209
|
}
|
217
210
|
|
218
|
-
.mui-btn
|
211
|
+
.mui-btn--fab.mui-btn--large {
|
219
212
|
width: $mui-btn-fab-diameter-lg;
|
220
213
|
height: $mui-btn-fab-diameter-lg;
|
221
214
|
line-height: $mui-btn-fab-diameter-lg;
|