administrate-materialize-theme 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (81) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +49 -0
  4. data/Rakefile +1 -0
  5. data/app/assets/javascripts/administrate-materialize-theme/anime.min.js +34 -0
  6. data/app/assets/javascripts/administrate-materialize-theme/autocomplete.js +450 -0
  7. data/app/assets/javascripts/administrate-materialize-theme/bin/materialize.js +12374 -0
  8. data/app/assets/javascripts/administrate-materialize-theme/bin/materialize.min.js +6 -0
  9. data/app/assets/javascripts/administrate-materialize-theme/buttons.js +354 -0
  10. data/app/assets/javascripts/administrate-materialize-theme/cards.js +40 -0
  11. data/app/assets/javascripts/administrate-materialize-theme/carousel.js +717 -0
  12. data/app/assets/javascripts/administrate-materialize-theme/cash.js +960 -0
  13. data/app/assets/javascripts/administrate-materialize-theme/characterCounter.js +136 -0
  14. data/app/assets/javascripts/administrate-materialize-theme/chips.js +481 -0
  15. data/app/assets/javascripts/administrate-materialize-theme/collapsible.js +275 -0
  16. data/app/assets/javascripts/administrate-materialize-theme/component.js +44 -0
  17. data/app/assets/javascripts/administrate-materialize-theme/datepicker.js +975 -0
  18. data/app/assets/javascripts/administrate-materialize-theme/dropdown.js +617 -0
  19. data/app/assets/javascripts/administrate-materialize-theme/forms.js +275 -0
  20. data/app/assets/javascripts/administrate-materialize-theme/global.js +427 -0
  21. data/app/assets/javascripts/administrate-materialize-theme/materialbox.js +453 -0
  22. data/app/assets/javascripts/administrate-materialize-theme/modal.js +382 -0
  23. data/app/assets/javascripts/administrate-materialize-theme/parallax.js +138 -0
  24. data/app/assets/javascripts/administrate-materialize-theme/pushpin.js +145 -0
  25. data/app/assets/javascripts/administrate-materialize-theme/range.js +263 -0
  26. data/app/assets/javascripts/administrate-materialize-theme/scrollspy.js +295 -0
  27. data/app/assets/javascripts/administrate-materialize-theme/select.js +432 -0
  28. data/app/assets/javascripts/administrate-materialize-theme/sidenav.js +580 -0
  29. data/app/assets/javascripts/administrate-materialize-theme/slider.js +359 -0
  30. data/app/assets/javascripts/administrate-materialize-theme/tabs.js +402 -0
  31. data/app/assets/javascripts/administrate-materialize-theme/tapTarget.js +314 -0
  32. data/app/assets/javascripts/administrate-materialize-theme/theme.js +6 -0
  33. data/app/assets/javascripts/administrate-materialize-theme/timepicker.js +647 -0
  34. data/app/assets/javascripts/administrate-materialize-theme/toasts.js +310 -0
  35. data/app/assets/javascripts/administrate-materialize-theme/tooltip.js +303 -0
  36. data/app/assets/javascripts/administrate-materialize-theme/waves.js +335 -0
  37. data/app/assets/stylesheets/administrate-materialize-theme/components/_badges.scss +55 -0
  38. data/app/assets/stylesheets/administrate-materialize-theme/components/_buttons.scss +322 -0
  39. data/app/assets/stylesheets/administrate-materialize-theme/components/_cards.scss +195 -0
  40. data/app/assets/stylesheets/administrate-materialize-theme/components/_carousel.scss +90 -0
  41. data/app/assets/stylesheets/administrate-materialize-theme/components/_chips.scss +90 -0
  42. data/app/assets/stylesheets/administrate-materialize-theme/components/_collapsible.scss +91 -0
  43. data/app/assets/stylesheets/administrate-materialize-theme/components/_color-classes.scss +32 -0
  44. data/app/assets/stylesheets/administrate-materialize-theme/components/_color-variables.scss +370 -0
  45. data/app/assets/stylesheets/administrate-materialize-theme/components/_datepicker.scss +191 -0
  46. data/app/assets/stylesheets/administrate-materialize-theme/components/_dropdown.scss +85 -0
  47. data/app/assets/stylesheets/administrate-materialize-theme/components/_global.scss +769 -0
  48. data/app/assets/stylesheets/administrate-materialize-theme/components/_grid.scss +156 -0
  49. data/app/assets/stylesheets/administrate-materialize-theme/components/_icons-material-design.scss +5 -0
  50. data/app/assets/stylesheets/administrate-materialize-theme/components/_materialbox.scss +43 -0
  51. data/app/assets/stylesheets/administrate-materialize-theme/components/_modal.scss +94 -0
  52. data/app/assets/stylesheets/administrate-materialize-theme/components/_navbar.scss +208 -0
  53. data/app/assets/stylesheets/administrate-materialize-theme/components/_normalize.scss +447 -0
  54. data/app/assets/stylesheets/administrate-materialize-theme/components/_preloader.scss +334 -0
  55. data/app/assets/stylesheets/administrate-materialize-theme/components/_pulse.scss +34 -0
  56. data/app/assets/stylesheets/administrate-materialize-theme/components/_sidenav.scss +216 -0
  57. data/app/assets/stylesheets/administrate-materialize-theme/components/_slider.scss +92 -0
  58. data/app/assets/stylesheets/administrate-materialize-theme/components/_table_of_contents.scss +33 -0
  59. data/app/assets/stylesheets/administrate-materialize-theme/components/_tabs.scss +99 -0
  60. data/app/assets/stylesheets/administrate-materialize-theme/components/_tapTarget.scss +103 -0
  61. data/app/assets/stylesheets/administrate-materialize-theme/components/_timepicker.scss +183 -0
  62. data/app/assets/stylesheets/administrate-materialize-theme/components/_toast.scss +58 -0
  63. data/app/assets/stylesheets/administrate-materialize-theme/components/_tooltip.scss +32 -0
  64. data/app/assets/stylesheets/administrate-materialize-theme/components/_transitions.scss +13 -0
  65. data/app/assets/stylesheets/administrate-materialize-theme/components/_typography.scss +60 -0
  66. data/app/assets/stylesheets/administrate-materialize-theme/components/_variables.scss +349 -0
  67. data/app/assets/stylesheets/administrate-materialize-theme/components/_waves.scss +114 -0
  68. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_checkboxes.scss +200 -0
  69. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_file-input.scss +44 -0
  70. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_forms.scss +22 -0
  71. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_input-fields.scss +354 -0
  72. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_radio-buttons.scss +115 -0
  73. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_range.scss +161 -0
  74. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_select.scss +180 -0
  75. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_switches.scss +89 -0
  76. data/app/assets/stylesheets/administrate-materialize-theme/materialize.scss +41 -0
  77. data/app/assets/stylesheets/administrate-materialize-theme/theme.scss +200 -0
  78. data/lib/administrate-materialize-theme.rb +6 -0
  79. data/lib/administrate-materialize-theme/engine.rb +7 -0
  80. data/lib/administrate-materialize-theme/version.rb +5 -0
  81. metadata +150 -0
@@ -0,0 +1,335 @@
1
+ /*!
2
+ * Waves v0.6.4
3
+ * http://fian.my.id/Waves
4
+ *
5
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
6
+ * Released under the MIT license
7
+ * https://github.com/fians/Waves/blob/master/LICENSE
8
+ */
9
+
10
+ ;(function(window) {
11
+ 'use strict';
12
+
13
+ var Waves = Waves || {};
14
+ var $$ = document.querySelectorAll.bind(document);
15
+
16
+ // Find exact position of element
17
+ function isWindow(obj) {
18
+ return obj !== null && obj === obj.window;
19
+ }
20
+
21
+ function getWindow(elem) {
22
+ return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
23
+ }
24
+
25
+ function offset(elem) {
26
+ var docElem, win,
27
+ box = {top: 0, left: 0},
28
+ doc = elem && elem.ownerDocument;
29
+
30
+ docElem = doc.documentElement;
31
+
32
+ if (typeof elem.getBoundingClientRect !== typeof undefined) {
33
+ box = elem.getBoundingClientRect();
34
+ }
35
+ win = getWindow(doc);
36
+ return {
37
+ top: box.top + win.pageYOffset - docElem.clientTop,
38
+ left: box.left + win.pageXOffset - docElem.clientLeft
39
+ };
40
+ }
41
+
42
+ function convertStyle(obj) {
43
+ var style = '';
44
+
45
+ for (var a in obj) {
46
+ if (obj.hasOwnProperty(a)) {
47
+ style += (a + ':' + obj[a] + ';');
48
+ }
49
+ }
50
+
51
+ return style;
52
+ }
53
+
54
+ var Effect = {
55
+
56
+ // Effect delay
57
+ duration: 750,
58
+
59
+ show: function(e, element) {
60
+
61
+ // Disable right click
62
+ if (e.button === 2) {
63
+ return false;
64
+ }
65
+
66
+ var el = element || this;
67
+
68
+ // Create ripple
69
+ var ripple = document.createElement('div');
70
+ ripple.className = 'waves-ripple';
71
+ el.appendChild(ripple);
72
+
73
+ // Get click coordinate and element witdh
74
+ var pos = offset(el);
75
+ var relativeY = (e.pageY - pos.top);
76
+ var relativeX = (e.pageX - pos.left);
77
+ var scale = 'scale('+((el.clientWidth / 100) * 10)+')';
78
+
79
+ // Support for touch devices
80
+ if ('touches' in e) {
81
+ relativeY = (e.touches[0].pageY - pos.top);
82
+ relativeX = (e.touches[0].pageX - pos.left);
83
+ }
84
+
85
+ // Attach data to element
86
+ ripple.setAttribute('data-hold', Date.now());
87
+ ripple.setAttribute('data-scale', scale);
88
+ ripple.setAttribute('data-x', relativeX);
89
+ ripple.setAttribute('data-y', relativeY);
90
+
91
+ // Set ripple position
92
+ var rippleStyle = {
93
+ 'top': relativeY+'px',
94
+ 'left': relativeX+'px'
95
+ };
96
+
97
+ ripple.className = ripple.className + ' waves-notransition';
98
+ ripple.setAttribute('style', convertStyle(rippleStyle));
99
+ ripple.className = ripple.className.replace('waves-notransition', '');
100
+
101
+ // Scale the ripple
102
+ rippleStyle['-webkit-transform'] = scale;
103
+ rippleStyle['-moz-transform'] = scale;
104
+ rippleStyle['-ms-transform'] = scale;
105
+ rippleStyle['-o-transform'] = scale;
106
+ rippleStyle.transform = scale;
107
+ rippleStyle.opacity = '1';
108
+
109
+ rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
110
+ rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
111
+ rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
112
+ rippleStyle['transition-duration'] = Effect.duration + 'ms';
113
+
114
+ rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
115
+ rippleStyle['-moz-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
116
+ rippleStyle['-o-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
117
+ rippleStyle['transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
118
+
119
+ ripple.setAttribute('style', convertStyle(rippleStyle));
120
+ },
121
+
122
+ hide: function(e) {
123
+ TouchHandler.touchup(e);
124
+
125
+ var el = this;
126
+ var width = el.clientWidth * 1.4;
127
+
128
+ // Get first ripple
129
+ var ripple = null;
130
+ var ripples = el.getElementsByClassName('waves-ripple');
131
+ if (ripples.length > 0) {
132
+ ripple = ripples[ripples.length - 1];
133
+ } else {
134
+ return false;
135
+ }
136
+
137
+ var relativeX = ripple.getAttribute('data-x');
138
+ var relativeY = ripple.getAttribute('data-y');
139
+ var scale = ripple.getAttribute('data-scale');
140
+
141
+ // Get delay beetween mousedown and mouse leave
142
+ var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
143
+ var delay = 350 - diff;
144
+
145
+ if (delay < 0) {
146
+ delay = 0;
147
+ }
148
+
149
+ // Fade out ripple after delay
150
+ setTimeout(function() {
151
+ var style = {
152
+ 'top': relativeY+'px',
153
+ 'left': relativeX+'px',
154
+ 'opacity': '0',
155
+
156
+ // Duration
157
+ '-webkit-transition-duration': Effect.duration + 'ms',
158
+ '-moz-transition-duration': Effect.duration + 'ms',
159
+ '-o-transition-duration': Effect.duration + 'ms',
160
+ 'transition-duration': Effect.duration + 'ms',
161
+ '-webkit-transform': scale,
162
+ '-moz-transform': scale,
163
+ '-ms-transform': scale,
164
+ '-o-transform': scale,
165
+ 'transform': scale,
166
+ };
167
+
168
+ ripple.setAttribute('style', convertStyle(style));
169
+
170
+ setTimeout(function() {
171
+ try {
172
+ el.removeChild(ripple);
173
+ } catch(e) {
174
+ return false;
175
+ }
176
+ }, Effect.duration);
177
+ }, delay);
178
+ },
179
+
180
+ // Little hack to make <input> can perform waves effect
181
+ wrapInput: function(elements) {
182
+ for (var a = 0; a < elements.length; a++) {
183
+ var el = elements[a];
184
+
185
+ if (el.tagName.toLowerCase() === 'input') {
186
+ var parent = el.parentNode;
187
+
188
+ // If input already have parent just pass through
189
+ if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
190
+ continue;
191
+ }
192
+
193
+ // Put element class and style to the specified parent
194
+ var wrapper = document.createElement('i');
195
+ wrapper.className = el.className + ' waves-input-wrapper';
196
+
197
+ var elementStyle = el.getAttribute('style');
198
+
199
+ if (!elementStyle) {
200
+ elementStyle = '';
201
+ }
202
+
203
+ wrapper.setAttribute('style', elementStyle);
204
+
205
+ el.className = 'waves-button-input';
206
+ el.removeAttribute('style');
207
+
208
+ // Put element as child
209
+ parent.replaceChild(wrapper, el);
210
+ wrapper.appendChild(el);
211
+ }
212
+ }
213
+ }
214
+ };
215
+
216
+
217
+ /**
218
+ * Disable mousedown event for 500ms during and after touch
219
+ */
220
+ var TouchHandler = {
221
+ /* uses an integer rather than bool so there's no issues with
222
+ * needing to clear timeouts if another touch event occurred
223
+ * within the 500ms. Cannot mouseup between touchstart and
224
+ * touchend, nor in the 500ms after touchend. */
225
+ touches: 0,
226
+ allowEvent: function(e) {
227
+ var allow = true;
228
+
229
+ if (e.type === 'touchstart') {
230
+ TouchHandler.touches += 1; //push
231
+ } else if (e.type === 'touchend' || e.type === 'touchcancel') {
232
+ setTimeout(function() {
233
+ if (TouchHandler.touches > 0) {
234
+ TouchHandler.touches -= 1; //pop after 500ms
235
+ }
236
+ }, 500);
237
+ } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
238
+ allow = false;
239
+ }
240
+
241
+ return allow;
242
+ },
243
+ touchup: function(e) {
244
+ TouchHandler.allowEvent(e);
245
+ }
246
+ };
247
+
248
+
249
+ /**
250
+ * Delegated click handler for .waves-effect element.
251
+ * returns null when .waves-effect element not in "click tree"
252
+ */
253
+ function getWavesEffectElement(e) {
254
+ if (TouchHandler.allowEvent(e) === false) {
255
+ return null;
256
+ }
257
+
258
+ var element = null;
259
+ var target = e.target || e.srcElement;
260
+
261
+ while (target.parentNode !== null) {
262
+ if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
263
+ element = target;
264
+ break;
265
+ }
266
+ target = target.parentNode;
267
+ }
268
+ return element;
269
+ }
270
+
271
+ /**
272
+ * Bubble the click and show effect if .waves-effect elem was found
273
+ */
274
+ function showEffect(e) {
275
+ var element = getWavesEffectElement(e);
276
+
277
+ if (element !== null) {
278
+ Effect.show(e, element);
279
+
280
+ if ('ontouchstart' in window) {
281
+ element.addEventListener('touchend', Effect.hide, false);
282
+ element.addEventListener('touchcancel', Effect.hide, false);
283
+ }
284
+
285
+ element.addEventListener('mouseup', Effect.hide, false);
286
+ element.addEventListener('mouseleave', Effect.hide, false);
287
+ element.addEventListener('dragend', Effect.hide, false);
288
+ }
289
+ }
290
+
291
+ Waves.displayEffect = function(options) {
292
+ options = options || {};
293
+
294
+ if ('duration' in options) {
295
+ Effect.duration = options.duration;
296
+ }
297
+
298
+ //Wrap input inside <i> tag
299
+ Effect.wrapInput($$('.waves-effect'));
300
+
301
+ if ('ontouchstart' in window) {
302
+ document.body.addEventListener('touchstart', showEffect, false);
303
+ }
304
+
305
+ document.body.addEventListener('mousedown', showEffect, false);
306
+ };
307
+
308
+ /**
309
+ * Attach Waves to an input element (or any element which doesn't
310
+ * bubble mouseup/mousedown events).
311
+ * Intended to be used with dynamically loaded forms/inputs, or
312
+ * where the user doesn't want a delegated click handler.
313
+ */
314
+ Waves.attach = function(element) {
315
+ //FUTURE: automatically add waves classes and allow users
316
+ // to specify them with an options param? Eg. light/classic/button
317
+ if (element.tagName.toLowerCase() === 'input') {
318
+ Effect.wrapInput([element]);
319
+ element = element.parentNode;
320
+ }
321
+
322
+ if ('ontouchstart' in window) {
323
+ element.addEventListener('touchstart', showEffect, false);
324
+ }
325
+
326
+ element.addEventListener('mousedown', showEffect, false);
327
+ };
328
+
329
+ window.Waves = Waves;
330
+
331
+ document.addEventListener('DOMContentLoaded', function() {
332
+ Waves.displayEffect();
333
+ }, false);
334
+
335
+ })(window);
@@ -0,0 +1,55 @@
1
+ // Badges
2
+ span.badge {
3
+ min-width: 3rem;
4
+ padding: 0 6px;
5
+ margin-left: 14px;
6
+ text-align: center;
7
+ font-size: 1rem;
8
+ line-height: $badge-height;
9
+ height: $badge-height;
10
+ color: color('grey', 'darken-1');
11
+ float: right;
12
+ box-sizing: border-box;
13
+
14
+ &.new {
15
+ font-weight: 300;
16
+ font-size: 0.8rem;
17
+ color: #fff;
18
+ background-color: $badge-bg-color;
19
+ border-radius: 2px;
20
+ }
21
+ &.new:after {
22
+ content: " new";
23
+ }
24
+
25
+ &[data-badge-caption]::after {
26
+ content: " " attr(data-badge-caption);
27
+ }
28
+ }
29
+
30
+ // Special cases
31
+ nav ul a span.badge {
32
+ display: inline-block;
33
+ float: none;
34
+ margin-left: 4px;
35
+ line-height: $badge-height;
36
+ height: $badge-height;
37
+ -webkit-font-smoothing: auto;
38
+ }
39
+
40
+ // Line height centering
41
+ .collection-item span.badge {
42
+ margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
43
+ }
44
+ .collapsible span.badge {
45
+ margin-left: auto;
46
+ }
47
+ .sidenav span.badge {
48
+ margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
49
+ }
50
+
51
+ table span.badge {
52
+ display: inline-block;
53
+ float: none;
54
+ margin-left: auto;
55
+ }
@@ -0,0 +1,322 @@
1
+ // shared styles
2
+ .btn,
3
+ .btn-flat {
4
+ border: $button-border;
5
+ border-radius: $button-radius;
6
+ display: inline-block;
7
+ height: $button-height;
8
+ line-height: $button-height;
9
+ padding: $button-padding;
10
+ text-transform: uppercase;
11
+ vertical-align: middle;
12
+ -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
13
+ }
14
+
15
+ // Disabled shared style
16
+ .btn.disabled,
17
+ .btn-floating.disabled,
18
+ .btn-large.disabled,
19
+ .btn-small.disabled,
20
+ .btn-flat.disabled,
21
+ .btn:disabled,
22
+ .btn-floating:disabled,
23
+ .btn-large:disabled,
24
+ .btn-small:disabled,
25
+ .btn-flat:disabled,
26
+ .btn[disabled],
27
+ .btn-floating[disabled],
28
+ .btn-large[disabled],
29
+ .btn-small[disabled],
30
+ .btn-flat[disabled] {
31
+ pointer-events: none;
32
+ background-color: $button-disabled-background !important;
33
+ box-shadow: none;
34
+ color: $button-disabled-color !important;
35
+ cursor: default;
36
+ &:hover {
37
+ background-color: $button-disabled-background !important;
38
+ color: $button-disabled-color !important;
39
+ }
40
+ }
41
+
42
+ // Shared icon styles
43
+ .btn,
44
+ .btn-floating,
45
+ .btn-large,
46
+ .btn-small,
47
+ .btn-flat {
48
+ font-size: $button-font-size;
49
+ outline: 0;
50
+ i {
51
+ font-size: $button-icon-font-size;
52
+ line-height: inherit;
53
+ }
54
+ }
55
+
56
+ // Shared focus button style
57
+ .btn,
58
+ .btn-floating {
59
+ &:focus {
60
+ background-color: darken($button-raised-background, 10%);
61
+ }
62
+ }
63
+
64
+ // Raised Button
65
+ .btn {
66
+ text-decoration: none;
67
+ color: $button-raised-color;
68
+ background-color: $button-raised-background;
69
+ text-align: center;
70
+ letter-spacing: .5px;
71
+ @extend .z-depth-1;
72
+ transition: background-color .2s ease-out;
73
+ cursor: pointer;
74
+ &:hover {
75
+ background-color: $button-raised-background-hover;
76
+ @extend .z-depth-1-half;
77
+ }
78
+ }
79
+
80
+ // Floating button
81
+ .btn-floating {
82
+ &:hover {
83
+ background-color: $button-floating-background-hover;
84
+ @extend .z-depth-1-half;
85
+ }
86
+ &:before {
87
+ border-radius: 0;
88
+ }
89
+ &.btn-large {
90
+ &.halfway-fab {
91
+ bottom: -$button-floating-large-size / 2;
92
+ }
93
+ width: $button-floating-large-size;
94
+ height: $button-floating-large-size;
95
+ padding: 0;
96
+ i {
97
+ line-height: $button-floating-large-size;
98
+ }
99
+ }
100
+
101
+ &.btn-small {
102
+ &.halfway-fab {
103
+ bottom: -$button-floating-small-size / 2;
104
+ }
105
+ width: $button-floating-small-size;
106
+ height: $button-floating-small-size;
107
+ i {
108
+ line-height: $button-floating-small-size;
109
+ }
110
+ }
111
+
112
+ &.halfway-fab {
113
+ &.left {
114
+ right: auto;
115
+ left: 24px;
116
+ }
117
+ position: absolute;
118
+ right: 24px;
119
+ bottom: -$button-floating-size / 2;
120
+ }
121
+ display: inline-block;
122
+ color: $button-floating-color;
123
+ position: relative;
124
+ overflow: hidden;
125
+ z-index: 1;
126
+ width: $button-floating-size;
127
+ height: $button-floating-size;
128
+ line-height: $button-floating-size;
129
+ padding: 0;
130
+ background-color: $button-floating-background;
131
+ border-radius: $button-floating-radius;
132
+ @extend .z-depth-1;
133
+ transition: background-color .3s;
134
+ cursor: pointer;
135
+ vertical-align: middle;
136
+ i {
137
+ width: inherit;
138
+ display: inline-block;
139
+ text-align: center;
140
+ color: $button-floating-color;
141
+ font-size: $button-large-icon-font-size;
142
+ line-height: $button-floating-size;
143
+ }
144
+ }
145
+
146
+ // button fix
147
+ button.btn-floating {
148
+ border: $button-border;
149
+ }
150
+
151
+ // Fixed Action Button
152
+ .fixed-action-btn {
153
+ &.active {
154
+ ul {
155
+ visibility: visible;
156
+ }
157
+ }
158
+
159
+ // Directions
160
+ &.direction-left,
161
+ &.direction-right {
162
+ padding: 0 0 0 15px;
163
+ ul {
164
+ text-align: right;
165
+ right: 64px;
166
+ top: 50%;
167
+ transform: translateY(-50%);
168
+ height: 100%;
169
+ left: auto;
170
+ /*width 100% only goes to width of button container */
171
+ width: 500px;
172
+ li {
173
+ display: inline-block;
174
+ margin: 7.5px 15px 0 0;
175
+ }
176
+ }
177
+ }
178
+ &.direction-right {
179
+ padding: 0 15px 0 0;
180
+ ul {
181
+ text-align: left;
182
+ direction: rtl;
183
+ left: 64px;
184
+ right: auto;
185
+ li {
186
+ margin: 7.5px 0 0 15px;
187
+ }
188
+ }
189
+ }
190
+ &.direction-bottom {
191
+ padding: 0 0 15px 0;
192
+ ul {
193
+ top: 64px;
194
+ bottom: auto;
195
+ display: flex;
196
+ flex-direction: column-reverse;
197
+ li {
198
+ margin: 15px 0 0 0;
199
+ }
200
+ }
201
+ }
202
+ &.toolbar {
203
+ &.active {
204
+ &>a i {
205
+ opacity: 0;
206
+ }
207
+ }
208
+ padding: 0;
209
+ height: $button-floating-large-size;
210
+ ul {
211
+ display: flex;
212
+ top: 0;
213
+ bottom: 0;
214
+ z-index: 1;
215
+ li {
216
+ flex: 1;
217
+ display: inline-block;
218
+ margin: 0;
219
+ height: 100%;
220
+ transition: none;
221
+ a {
222
+ display: block;
223
+ overflow: hidden;
224
+ position: relative;
225
+ width: 100%;
226
+ height: 100%;
227
+ background-color: transparent;
228
+ box-shadow: none;
229
+ color: #fff;
230
+ line-height: $button-floating-large-size;
231
+ z-index: 1;
232
+ i {
233
+ line-height: inherit;
234
+ }
235
+ }
236
+ }
237
+ }
238
+ }
239
+ position: fixed;
240
+ right: 23px;
241
+ bottom: 23px;
242
+ padding-top: 15px;
243
+ margin-bottom: 0;
244
+ z-index: 997;
245
+ ul {
246
+ left: 0;
247
+ right: 0;
248
+ text-align: center;
249
+ position: absolute;
250
+ bottom: 64px;
251
+ margin: 0;
252
+ visibility: hidden;
253
+ li {
254
+ margin-bottom: 15px;
255
+ }
256
+ a.btn-floating {
257
+ opacity: 0;
258
+ }
259
+ }
260
+ .fab-backdrop {
261
+ position: absolute;
262
+ top: 0;
263
+ left: 0;
264
+ z-index: -1;
265
+ width: $button-floating-size;
266
+ height: $button-floating-size;
267
+ background-color: $button-floating-background;
268
+ border-radius: $button-floating-radius;
269
+ transform: scale(0);
270
+ }
271
+ }
272
+
273
+ // Flat button
274
+ .btn-flat {
275
+ box-shadow: none;
276
+ background-color: transparent;
277
+ color: $button-flat-color;
278
+ cursor: pointer;
279
+ transition: background-color .2s;
280
+ &:focus,
281
+ &:hover {
282
+ box-shadow: none;
283
+ }
284
+ &:focus {
285
+ background-color: rgba(0, 0, 0, .1);
286
+ }
287
+ &.disabled,
288
+ &.btn-flat[disabled] {
289
+ background-color: transparent !important;
290
+ color: $button-flat-disabled-color !important;
291
+ cursor: default;
292
+ }
293
+ }
294
+
295
+ // Large button
296
+ .btn-large {
297
+ @extend .btn;
298
+ height: $button-large-height;
299
+ line-height: $button-large-height;
300
+ font-size: $button-large-font-size;
301
+ padding: 0 28px;
302
+
303
+ i {
304
+ font-size: $button-large-icon-font-size;
305
+ }
306
+ }
307
+
308
+ // Small button
309
+ .btn-small {
310
+ @extend .btn;
311
+ height: $button-small-height;
312
+ line-height: $button-small-height;
313
+ font-size: $button-small-font-size;
314
+ i {
315
+ font-size: $button-small-icon-font-size;
316
+ }
317
+ }
318
+
319
+ // Block button
320
+ .btn-block {
321
+ display: block;
322
+ }