material_design_lite-sass 1.0.1 → 1.0.2
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/README.md +3 -0
- data/lib/material_design_lite/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material.js +122 -64
- data/vendor/assets/javascripts/material/checkbox.js +28 -12
- data/vendor/assets/javascripts/material/icon-toggle.js +28 -12
- data/vendor/assets/javascripts/material/layout.js +1 -1
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +2 -2
- data/vendor/assets/javascripts/material/radio.js +35 -23
- data/vendor/assets/javascripts/material/switch.js +28 -14
- data/vendor/assets/stylesheets/material/_layout.scss +6 -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: 2754133d9be43d5084040c7f4d475f5ef58e3f44
|
4
|
+
data.tar.gz: f916bc415128c12110311a57b5db14cf96a992db
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 824f3a9ce55e48112e920bfcd44d3a738b3e85f8f36f0c7b402f513da283aad1635968a4cf84cce18f7b89f42fb45f28c9105adb2a1ee6ec417beaac35411ecd
|
7
|
+
data.tar.gz: 1bbe1f9eaed166493af02f3aaa83adcb503be7ba6961935e34f7c40305ae264364f75ca3588620c91b50f5e9a9d1d14ed6287a483e9ccc0365e5e3fc9c503fb5
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -1,5 +1,8 @@
|
|
1
1
|
# Material Design Lite for Sass
|
2
2
|
|
3
|
+
[![Gem Version](https://badge.fury.io/rb/material_design_lite-sass.svg)](http://badge.fury.io/rb/material_design_lite-sass)
|
4
|
+
[![Build Status](https://travis-ci.org/rubysamurai/material_design_lite-sass.svg?branch=master)](https://travis-ci.org/rubysamurai/material_design_lite-sass)
|
5
|
+
|
3
6
|
`material_design_lite-sass` is a Sass-powered version of [Material Design Lite](http://www.getmdl.io/) by Google for your Ruby applications. It works with Ruby on Rails, Sprockets.
|
4
7
|
|
5
8
|
This project is inspired from [bootstrap-sass](https://github.com/twbs/bootstrap-sass) by Twitter Bootstrap team.
|
@@ -281,11 +281,11 @@ var componentHandler = (function() {
|
|
281
281
|
var componentIndex = createdComponents_.indexOf(component);
|
282
282
|
createdComponents_.splice(componentIndex, 1);
|
283
283
|
|
284
|
-
var upgrades = component.element_.
|
284
|
+
var upgrades = component.element_.getAttribute('data-upgraded').split(',');
|
285
285
|
var componentPlace = upgrades.indexOf(
|
286
286
|
component[componentConfigProperty_].classAsString);
|
287
287
|
upgrades.splice(componentPlace, 1);
|
288
|
-
component.element_.
|
288
|
+
component.element_.setAttribute('data-upgraded', upgrades.join(','));
|
289
289
|
|
290
290
|
var ev = document.createEvent('Events');
|
291
291
|
ev.initEvent('mdl-componentdowngraded', true, true);
|
@@ -633,18 +633,8 @@ MaterialCheckbox.prototype.onMouseUp_ = function(event) {
|
|
633
633
|
*/
|
634
634
|
MaterialCheckbox.prototype.updateClasses_ = function() {
|
635
635
|
'use strict';
|
636
|
-
|
637
|
-
|
638
|
-
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
639
|
-
} else {
|
640
|
-
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
641
|
-
}
|
642
|
-
|
643
|
-
if (this.inputElement_.checked) {
|
644
|
-
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
645
|
-
} else {
|
646
|
-
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
647
|
-
}
|
636
|
+
this.checkDisabled();
|
637
|
+
this.checkToggleState();
|
648
638
|
};
|
649
639
|
|
650
640
|
/**
|
@@ -663,6 +653,32 @@ MaterialCheckbox.prototype.blur_ = function(event) {
|
|
663
653
|
|
664
654
|
// Public methods.
|
665
655
|
|
656
|
+
/**
|
657
|
+
* Check the inputs toggle state and update display.
|
658
|
+
* @public
|
659
|
+
*/
|
660
|
+
MaterialCheckbox.prototype.checkToggleState = function() {
|
661
|
+
'use strict';
|
662
|
+
if (this.inputElement_.checked) {
|
663
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
664
|
+
} else {
|
665
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
666
|
+
}
|
667
|
+
};
|
668
|
+
|
669
|
+
/**
|
670
|
+
* Check the inputs disabled state and update display.
|
671
|
+
* @public
|
672
|
+
*/
|
673
|
+
MaterialCheckbox.prototype.checkDisabled = function() {
|
674
|
+
'use strict';
|
675
|
+
if (this.inputElement_.disabled) {
|
676
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
677
|
+
} else {
|
678
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
679
|
+
}
|
680
|
+
};
|
681
|
+
|
666
682
|
/**
|
667
683
|
* Disable checkbox.
|
668
684
|
* @public
|
@@ -895,18 +911,8 @@ MaterialIconToggle.prototype.onMouseUp_ = function(event) {
|
|
895
911
|
*/
|
896
912
|
MaterialIconToggle.prototype.updateClasses_ = function() {
|
897
913
|
'use strict';
|
898
|
-
|
899
|
-
|
900
|
-
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
901
|
-
} else {
|
902
|
-
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
903
|
-
}
|
904
|
-
|
905
|
-
if (this.inputElement_.checked) {
|
906
|
-
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
907
|
-
} else {
|
908
|
-
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
909
|
-
}
|
914
|
+
this.checkDisabled();
|
915
|
+
this.checkToggleState();
|
910
916
|
};
|
911
917
|
|
912
918
|
/**
|
@@ -925,6 +931,32 @@ MaterialIconToggle.prototype.blur_ = function(event) {
|
|
925
931
|
|
926
932
|
// Public methods.
|
927
933
|
|
934
|
+
/**
|
935
|
+
* Check the inputs toggle state and update display.
|
936
|
+
* @public
|
937
|
+
*/
|
938
|
+
MaterialIconToggle.prototype.checkToggleState = function() {
|
939
|
+
'use strict';
|
940
|
+
if (this.inputElement_.checked) {
|
941
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
942
|
+
} else {
|
943
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
944
|
+
}
|
945
|
+
};
|
946
|
+
|
947
|
+
/**
|
948
|
+
* Check the inputs disabled state and update display.
|
949
|
+
* @public
|
950
|
+
*/
|
951
|
+
MaterialIconToggle.prototype.checkDisabled = function() {
|
952
|
+
'use strict';
|
953
|
+
if (this.inputElement_.disabled) {
|
954
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
955
|
+
} else {
|
956
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
957
|
+
}
|
958
|
+
};
|
959
|
+
|
928
960
|
/**
|
929
961
|
* Disable icon toggle.
|
930
962
|
* @public
|
@@ -1690,8 +1722,6 @@ MaterialRadio.prototype.CssClasses_ = {
|
|
1690
1722
|
MaterialRadio.prototype.onChange_ = function(event) {
|
1691
1723
|
'use strict';
|
1692
1724
|
|
1693
|
-
this.updateClasses_(this.btnElement_, this.element_);
|
1694
|
-
|
1695
1725
|
// Since other radio buttons don't get change events, we need to look for
|
1696
1726
|
// them to update their classes.
|
1697
1727
|
var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
|
@@ -1699,7 +1729,7 @@ MaterialRadio.prototype.onChange_ = function(event) {
|
|
1699
1729
|
var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
|
1700
1730
|
// Different name == different group, so no point updating those.
|
1701
1731
|
if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
|
1702
|
-
|
1732
|
+
radios[i].MaterialRadio.updateClasses_();
|
1703
1733
|
}
|
1704
1734
|
}
|
1705
1735
|
};
|
@@ -1739,24 +1769,12 @@ MaterialRadio.prototype.onMouseup_ = function(event) {
|
|
1739
1769
|
|
1740
1770
|
/**
|
1741
1771
|
* Update classes.
|
1742
|
-
* @param {HTMLElement} button The button whose classes we should update.
|
1743
|
-
* @param {HTMLElement} label The label whose classes we should update.
|
1744
1772
|
* @private
|
1745
1773
|
*/
|
1746
|
-
MaterialRadio.prototype.updateClasses_ = function(
|
1774
|
+
MaterialRadio.prototype.updateClasses_ = function() {
|
1747
1775
|
'use strict';
|
1748
|
-
|
1749
|
-
|
1750
|
-
label.classList.add(this.CssClasses_.IS_DISABLED);
|
1751
|
-
} else {
|
1752
|
-
label.classList.remove(this.CssClasses_.IS_DISABLED);
|
1753
|
-
}
|
1754
|
-
|
1755
|
-
if (button.checked) {
|
1756
|
-
label.classList.add(this.CssClasses_.IS_CHECKED);
|
1757
|
-
} else {
|
1758
|
-
label.classList.remove(this.CssClasses_.IS_CHECKED);
|
1759
|
-
}
|
1776
|
+
this.checkDisabled();
|
1777
|
+
this.checkToggleState();
|
1760
1778
|
};
|
1761
1779
|
|
1762
1780
|
/**
|
@@ -1775,6 +1793,32 @@ MaterialRadio.prototype.blur_ = function(event) {
|
|
1775
1793
|
|
1776
1794
|
// Public methods.
|
1777
1795
|
|
1796
|
+
/**
|
1797
|
+
* Check the components disabled state.
|
1798
|
+
* @public
|
1799
|
+
*/
|
1800
|
+
MaterialRadio.prototype.checkDisabled = function() {
|
1801
|
+
'use strict';
|
1802
|
+
if (this.btnElement_.disabled) {
|
1803
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
1804
|
+
} else {
|
1805
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
1806
|
+
}
|
1807
|
+
};
|
1808
|
+
|
1809
|
+
/**
|
1810
|
+
* Check the components toggled state.
|
1811
|
+
* @public
|
1812
|
+
*/
|
1813
|
+
MaterialRadio.prototype.checkToggleState = function() {
|
1814
|
+
'use strict';
|
1815
|
+
if (this.btnElement_.checked) {
|
1816
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
1817
|
+
} else {
|
1818
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
1819
|
+
}
|
1820
|
+
};
|
1821
|
+
|
1778
1822
|
/**
|
1779
1823
|
* Disable radio.
|
1780
1824
|
* @public
|
@@ -1783,7 +1827,7 @@ MaterialRadio.prototype.disable = function() {
|
|
1783
1827
|
'use strict';
|
1784
1828
|
|
1785
1829
|
this.btnElement_.disabled = true;
|
1786
|
-
this.updateClasses_(
|
1830
|
+
this.updateClasses_();
|
1787
1831
|
};
|
1788
1832
|
|
1789
1833
|
/**
|
@@ -1794,7 +1838,7 @@ MaterialRadio.prototype.enable = function() {
|
|
1794
1838
|
'use strict';
|
1795
1839
|
|
1796
1840
|
this.btnElement_.disabled = false;
|
1797
|
-
this.updateClasses_(
|
1841
|
+
this.updateClasses_();
|
1798
1842
|
};
|
1799
1843
|
|
1800
1844
|
/**
|
@@ -1805,7 +1849,7 @@ MaterialRadio.prototype.check = function() {
|
|
1805
1849
|
'use strict';
|
1806
1850
|
|
1807
1851
|
this.btnElement_.checked = true;
|
1808
|
-
this.updateClasses_(
|
1852
|
+
this.updateClasses_();
|
1809
1853
|
};
|
1810
1854
|
|
1811
1855
|
/**
|
@@ -1816,7 +1860,7 @@ MaterialRadio.prototype.uncheck = function() {
|
|
1816
1860
|
'use strict';
|
1817
1861
|
|
1818
1862
|
this.btnElement_.checked = false;
|
1819
|
-
this.updateClasses_(
|
1863
|
+
this.updateClasses_();
|
1820
1864
|
};
|
1821
1865
|
|
1822
1866
|
/**
|
@@ -1862,7 +1906,7 @@ MaterialRadio.prototype.init = function() {
|
|
1862
1906
|
this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
|
1863
1907
|
this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
|
1864
1908
|
|
1865
|
-
this.updateClasses_(
|
1909
|
+
this.updateClasses_();
|
1866
1910
|
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
1867
1911
|
}
|
1868
1912
|
};
|
@@ -2379,24 +2423,12 @@ MaterialSwitch.prototype.onMouseUp_ = function(event) {
|
|
2379
2423
|
|
2380
2424
|
/**
|
2381
2425
|
* Handle class updates.
|
2382
|
-
* @param {HTMLElement} button The button whose classes we should update.
|
2383
|
-
* @param {HTMLElement} label The label whose classes we should update.
|
2384
2426
|
* @private
|
2385
2427
|
*/
|
2386
2428
|
MaterialSwitch.prototype.updateClasses_ = function() {
|
2387
2429
|
'use strict';
|
2388
|
-
|
2389
|
-
|
2390
|
-
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
2391
|
-
} else {
|
2392
|
-
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
2393
|
-
}
|
2394
|
-
|
2395
|
-
if (this.inputElement_.checked) {
|
2396
|
-
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
2397
|
-
} else {
|
2398
|
-
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
2399
|
-
}
|
2430
|
+
this.checkDisabled();
|
2431
|
+
this.checkToggleState();
|
2400
2432
|
};
|
2401
2433
|
|
2402
2434
|
/**
|
@@ -2415,6 +2447,32 @@ MaterialSwitch.prototype.blur_ = function(event) {
|
|
2415
2447
|
|
2416
2448
|
// Public methods.
|
2417
2449
|
|
2450
|
+
/**
|
2451
|
+
* Check the components disabled state.
|
2452
|
+
* @public
|
2453
|
+
*/
|
2454
|
+
MaterialSwitch.prototype.checkDisabled = function() {
|
2455
|
+
'use strict';
|
2456
|
+
if (this.inputElement_.disabled) {
|
2457
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
2458
|
+
} else {
|
2459
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
2460
|
+
}
|
2461
|
+
};
|
2462
|
+
|
2463
|
+
/**
|
2464
|
+
* Check the components toggled state.
|
2465
|
+
* @public
|
2466
|
+
*/
|
2467
|
+
MaterialSwitch.prototype.checkToggleState = function() {
|
2468
|
+
'use strict';
|
2469
|
+
if (this.inputElement_.checked) {
|
2470
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
2471
|
+
} else {
|
2472
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
2473
|
+
}
|
2474
|
+
};
|
2475
|
+
|
2418
2476
|
/**
|
2419
2477
|
* Disable switch.
|
2420
2478
|
* @public
|
@@ -3126,7 +3184,7 @@ function MaterialLayout(element) {
|
|
3126
3184
|
* @private
|
3127
3185
|
*/
|
3128
3186
|
MaterialLayout.prototype.Constant_ = {
|
3129
|
-
MAX_WIDTH: '(max-width:
|
3187
|
+
MAX_WIDTH: '(max-width: 1024px)',
|
3130
3188
|
TAB_SCROLL_PIXELS: 100,
|
3131
3189
|
|
3132
3190
|
MENU_ICON: 'menu',
|
@@ -114,18 +114,8 @@ MaterialCheckbox.prototype.onMouseUp_ = function(event) {
|
|
114
114
|
*/
|
115
115
|
MaterialCheckbox.prototype.updateClasses_ = function() {
|
116
116
|
'use strict';
|
117
|
-
|
118
|
-
|
119
|
-
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
120
|
-
} else {
|
121
|
-
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
122
|
-
}
|
123
|
-
|
124
|
-
if (this.inputElement_.checked) {
|
125
|
-
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
126
|
-
} else {
|
127
|
-
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
128
|
-
}
|
117
|
+
this.checkDisabled();
|
118
|
+
this.checkToggleState();
|
129
119
|
};
|
130
120
|
|
131
121
|
/**
|
@@ -144,6 +134,32 @@ MaterialCheckbox.prototype.blur_ = function(event) {
|
|
144
134
|
|
145
135
|
// Public methods.
|
146
136
|
|
137
|
+
/**
|
138
|
+
* Check the inputs toggle state and update display.
|
139
|
+
* @public
|
140
|
+
*/
|
141
|
+
MaterialCheckbox.prototype.checkToggleState = function() {
|
142
|
+
'use strict';
|
143
|
+
if (this.inputElement_.checked) {
|
144
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
145
|
+
} else {
|
146
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
147
|
+
}
|
148
|
+
};
|
149
|
+
|
150
|
+
/**
|
151
|
+
* Check the inputs disabled state and update display.
|
152
|
+
* @public
|
153
|
+
*/
|
154
|
+
MaterialCheckbox.prototype.checkDisabled = function() {
|
155
|
+
'use strict';
|
156
|
+
if (this.inputElement_.disabled) {
|
157
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
158
|
+
} else {
|
159
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
160
|
+
}
|
161
|
+
};
|
162
|
+
|
147
163
|
/**
|
148
164
|
* Disable checkbox.
|
149
165
|
* @public
|
@@ -110,18 +110,8 @@ MaterialIconToggle.prototype.onMouseUp_ = function(event) {
|
|
110
110
|
*/
|
111
111
|
MaterialIconToggle.prototype.updateClasses_ = function() {
|
112
112
|
'use strict';
|
113
|
-
|
114
|
-
|
115
|
-
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
116
|
-
} else {
|
117
|
-
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
118
|
-
}
|
119
|
-
|
120
|
-
if (this.inputElement_.checked) {
|
121
|
-
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
122
|
-
} else {
|
123
|
-
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
124
|
-
}
|
113
|
+
this.checkDisabled();
|
114
|
+
this.checkToggleState();
|
125
115
|
};
|
126
116
|
|
127
117
|
/**
|
@@ -140,6 +130,32 @@ MaterialIconToggle.prototype.blur_ = function(event) {
|
|
140
130
|
|
141
131
|
// Public methods.
|
142
132
|
|
133
|
+
/**
|
134
|
+
* Check the inputs toggle state and update display.
|
135
|
+
* @public
|
136
|
+
*/
|
137
|
+
MaterialIconToggle.prototype.checkToggleState = function() {
|
138
|
+
'use strict';
|
139
|
+
if (this.inputElement_.checked) {
|
140
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
141
|
+
} else {
|
142
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
143
|
+
}
|
144
|
+
};
|
145
|
+
|
146
|
+
/**
|
147
|
+
* Check the inputs disabled state and update display.
|
148
|
+
* @public
|
149
|
+
*/
|
150
|
+
MaterialIconToggle.prototype.checkDisabled = function() {
|
151
|
+
'use strict';
|
152
|
+
if (this.inputElement_.disabled) {
|
153
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
154
|
+
} else {
|
155
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
156
|
+
}
|
157
|
+
};
|
158
|
+
|
143
159
|
/**
|
144
160
|
* Disable icon toggle.
|
145
161
|
* @public
|
@@ -281,11 +281,11 @@ var componentHandler = (function() {
|
|
281
281
|
var componentIndex = createdComponents_.indexOf(component);
|
282
282
|
createdComponents_.splice(componentIndex, 1);
|
283
283
|
|
284
|
-
var upgrades = component.element_.
|
284
|
+
var upgrades = component.element_.getAttribute('data-upgraded').split(',');
|
285
285
|
var componentPlace = upgrades.indexOf(
|
286
286
|
component[componentConfigProperty_].classAsString);
|
287
287
|
upgrades.splice(componentPlace, 1);
|
288
|
-
component.element_.
|
288
|
+
component.element_.setAttribute('data-upgraded', upgrades.join(','));
|
289
289
|
|
290
290
|
var ev = document.createEvent('Events');
|
291
291
|
ev.initEvent('mdl-componentdowngraded', true, true);
|
@@ -70,8 +70,6 @@ MaterialRadio.prototype.CssClasses_ = {
|
|
70
70
|
MaterialRadio.prototype.onChange_ = function(event) {
|
71
71
|
'use strict';
|
72
72
|
|
73
|
-
this.updateClasses_(this.btnElement_, this.element_);
|
74
|
-
|
75
73
|
// Since other radio buttons don't get change events, we need to look for
|
76
74
|
// them to update their classes.
|
77
75
|
var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
|
@@ -79,7 +77,7 @@ MaterialRadio.prototype.onChange_ = function(event) {
|
|
79
77
|
var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
|
80
78
|
// Different name == different group, so no point updating those.
|
81
79
|
if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
|
82
|
-
|
80
|
+
radios[i].MaterialRadio.updateClasses_();
|
83
81
|
}
|
84
82
|
}
|
85
83
|
};
|
@@ -119,24 +117,12 @@ MaterialRadio.prototype.onMouseup_ = function(event) {
|
|
119
117
|
|
120
118
|
/**
|
121
119
|
* Update classes.
|
122
|
-
* @param {HTMLElement} button The button whose classes we should update.
|
123
|
-
* @param {HTMLElement} label The label whose classes we should update.
|
124
120
|
* @private
|
125
121
|
*/
|
126
|
-
MaterialRadio.prototype.updateClasses_ = function(
|
122
|
+
MaterialRadio.prototype.updateClasses_ = function() {
|
127
123
|
'use strict';
|
128
|
-
|
129
|
-
|
130
|
-
label.classList.add(this.CssClasses_.IS_DISABLED);
|
131
|
-
} else {
|
132
|
-
label.classList.remove(this.CssClasses_.IS_DISABLED);
|
133
|
-
}
|
134
|
-
|
135
|
-
if (button.checked) {
|
136
|
-
label.classList.add(this.CssClasses_.IS_CHECKED);
|
137
|
-
} else {
|
138
|
-
label.classList.remove(this.CssClasses_.IS_CHECKED);
|
139
|
-
}
|
124
|
+
this.checkDisabled();
|
125
|
+
this.checkToggleState();
|
140
126
|
};
|
141
127
|
|
142
128
|
/**
|
@@ -155,6 +141,32 @@ MaterialRadio.prototype.blur_ = function(event) {
|
|
155
141
|
|
156
142
|
// Public methods.
|
157
143
|
|
144
|
+
/**
|
145
|
+
* Check the components disabled state.
|
146
|
+
* @public
|
147
|
+
*/
|
148
|
+
MaterialRadio.prototype.checkDisabled = function() {
|
149
|
+
'use strict';
|
150
|
+
if (this.btnElement_.disabled) {
|
151
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
152
|
+
} else {
|
153
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
154
|
+
}
|
155
|
+
};
|
156
|
+
|
157
|
+
/**
|
158
|
+
* Check the components toggled state.
|
159
|
+
* @public
|
160
|
+
*/
|
161
|
+
MaterialRadio.prototype.checkToggleState = function() {
|
162
|
+
'use strict';
|
163
|
+
if (this.btnElement_.checked) {
|
164
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
165
|
+
} else {
|
166
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
167
|
+
}
|
168
|
+
};
|
169
|
+
|
158
170
|
/**
|
159
171
|
* Disable radio.
|
160
172
|
* @public
|
@@ -163,7 +175,7 @@ MaterialRadio.prototype.disable = function() {
|
|
163
175
|
'use strict';
|
164
176
|
|
165
177
|
this.btnElement_.disabled = true;
|
166
|
-
this.updateClasses_(
|
178
|
+
this.updateClasses_();
|
167
179
|
};
|
168
180
|
|
169
181
|
/**
|
@@ -174,7 +186,7 @@ MaterialRadio.prototype.enable = function() {
|
|
174
186
|
'use strict';
|
175
187
|
|
176
188
|
this.btnElement_.disabled = false;
|
177
|
-
this.updateClasses_(
|
189
|
+
this.updateClasses_();
|
178
190
|
};
|
179
191
|
|
180
192
|
/**
|
@@ -185,7 +197,7 @@ MaterialRadio.prototype.check = function() {
|
|
185
197
|
'use strict';
|
186
198
|
|
187
199
|
this.btnElement_.checked = true;
|
188
|
-
this.updateClasses_(
|
200
|
+
this.updateClasses_();
|
189
201
|
};
|
190
202
|
|
191
203
|
/**
|
@@ -196,7 +208,7 @@ MaterialRadio.prototype.uncheck = function() {
|
|
196
208
|
'use strict';
|
197
209
|
|
198
210
|
this.btnElement_.checked = false;
|
199
|
-
this.updateClasses_(
|
211
|
+
this.updateClasses_();
|
200
212
|
};
|
201
213
|
|
202
214
|
/**
|
@@ -242,7 +254,7 @@ MaterialRadio.prototype.init = function() {
|
|
242
254
|
this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
|
243
255
|
this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
|
244
256
|
|
245
|
-
this.updateClasses_(
|
257
|
+
this.updateClasses_();
|
246
258
|
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
247
259
|
}
|
248
260
|
};
|
@@ -107,24 +107,12 @@ MaterialSwitch.prototype.onMouseUp_ = function(event) {
|
|
107
107
|
|
108
108
|
/**
|
109
109
|
* Handle class updates.
|
110
|
-
* @param {HTMLElement} button The button whose classes we should update.
|
111
|
-
* @param {HTMLElement} label The label whose classes we should update.
|
112
110
|
* @private
|
113
111
|
*/
|
114
112
|
MaterialSwitch.prototype.updateClasses_ = function() {
|
115
113
|
'use strict';
|
116
|
-
|
117
|
-
|
118
|
-
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
119
|
-
} else {
|
120
|
-
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
121
|
-
}
|
122
|
-
|
123
|
-
if (this.inputElement_.checked) {
|
124
|
-
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
125
|
-
} else {
|
126
|
-
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
127
|
-
}
|
114
|
+
this.checkDisabled();
|
115
|
+
this.checkToggleState();
|
128
116
|
};
|
129
117
|
|
130
118
|
/**
|
@@ -143,6 +131,32 @@ MaterialSwitch.prototype.blur_ = function(event) {
|
|
143
131
|
|
144
132
|
// Public methods.
|
145
133
|
|
134
|
+
/**
|
135
|
+
* Check the components disabled state.
|
136
|
+
* @public
|
137
|
+
*/
|
138
|
+
MaterialSwitch.prototype.checkDisabled = function() {
|
139
|
+
'use strict';
|
140
|
+
if (this.inputElement_.disabled) {
|
141
|
+
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
142
|
+
} else {
|
143
|
+
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
144
|
+
}
|
145
|
+
};
|
146
|
+
|
147
|
+
/**
|
148
|
+
* Check the components toggled state.
|
149
|
+
* @public
|
150
|
+
*/
|
151
|
+
MaterialSwitch.prototype.checkToggleState = function() {
|
152
|
+
'use strict';
|
153
|
+
if (this.inputElement_.checked) {
|
154
|
+
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
155
|
+
} else {
|
156
|
+
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
157
|
+
}
|
158
|
+
};
|
159
|
+
|
146
160
|
/**
|
147
161
|
* Disable switch.
|
148
162
|
* @public
|
@@ -243,6 +243,12 @@
|
|
243
243
|
width: calc(100% - #{$layout-drawer-width});
|
244
244
|
}
|
245
245
|
|
246
|
+
.mdl-layout--fixed-drawer > & {
|
247
|
+
.mdl-layout__header-row {
|
248
|
+
padding-left: 40px;
|
249
|
+
}
|
250
|
+
}
|
251
|
+
|
246
252
|
& > .mdl-layout-icon {
|
247
253
|
position: absolute;
|
248
254
|
left: $layout-header-desktop-indent;
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: material_design_lite-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.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-07-
|
11
|
+
date: 2015-07-29 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|