dlegr250_material_design 0.6.05 → 0.6.06
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/lib/dlegr250_material_design/version.rb +1 -1
- data/vendor/assets/javascripts/components/dialog.coffee +1 -1
- data/vendor/assets/javascripts/extensions/jquery/binary_insert.coffee +4 -1
- data/vendor/assets/stylesheets/components/dialogs.scss +116 -93
- data/vendor/assets/stylesheets/components/tabs.scss +0 -14
- 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: 35a8c13741f8d345a001951845e93f34f2306ddb
|
|
4
|
+
data.tar.gz: 38ed4115bb32058908c620ef42c0d1a120174a07
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 866e1a8c70eabcc7baa72cce572866c68cb142c6a1712645f6c3352770e301b47b726bca965a1885a04c7e46ee451d626e1462ed48f098762a2e55de64f06b40
|
|
7
|
+
data.tar.gz: 7d23088406aefca8f06ad242c63bbbc9b48dc3333c8e13ef35efe9b4bd47a972764f6f100e14f1ad13186ef801766fabd66dd9b41edc2032bcccfaed22897341
|
|
@@ -53,7 +53,7 @@ class App.MD.Dialog
|
|
|
53
53
|
element.find("input[autofocus]").focus()
|
|
54
54
|
|
|
55
55
|
# Add shadow on scroll
|
|
56
|
-
element.find(".dialog-scrollable").on "scroll", (e) ->
|
|
56
|
+
element.find(".dialog-content, .dialog-scrollable").on "scroll", (e) ->
|
|
57
57
|
$scrollContainer = $(this)
|
|
58
58
|
$header = element.find(".dialog-toolbar")
|
|
59
59
|
if $scrollContainer.scrollTop()
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
jQuery.extend jQuery.fn,
|
|
2
|
-
binaryInsert: (element) ->
|
|
2
|
+
binaryInsert: (element, options = {}) ->
|
|
3
3
|
@each ->
|
|
4
4
|
$list = $(this)
|
|
5
5
|
|
|
@@ -11,6 +11,9 @@ jQuery.extend jQuery.fn,
|
|
|
11
11
|
$childrenValues = $childrenWithValues.map (i, e) ->
|
|
12
12
|
$(e).attr("data-sort")
|
|
13
13
|
|
|
14
|
+
if options["reverse"] == true
|
|
15
|
+
$childrenValues = $childrenValues.reverse()
|
|
16
|
+
|
|
14
17
|
listLength = $children.length
|
|
15
18
|
|
|
16
19
|
# New element to insert
|
|
@@ -35,6 +35,8 @@
|
|
|
35
35
|
.dialog {
|
|
36
36
|
background: color("white");
|
|
37
37
|
cursor: default;
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
38
40
|
max-height: 100%;
|
|
39
41
|
max-width: 90%;
|
|
40
42
|
min-width: 280px;
|
|
@@ -61,29 +63,29 @@
|
|
|
61
63
|
.dialog,
|
|
62
64
|
.dialog-full-screen,
|
|
63
65
|
.dialog[data-fullscreen="true"] {
|
|
64
|
-
height: auto;
|
|
66
|
+
// height: auto;
|
|
65
67
|
max-height: 90%;
|
|
66
68
|
max-width: 90%;
|
|
67
69
|
position: relative;
|
|
68
|
-
width: auto;
|
|
70
|
+
// width: auto;
|
|
69
71
|
@include rounded-corners();
|
|
70
72
|
}
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
// Sizes
|
|
74
|
-
@media (min-width: $device-small) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
76
|
+
// @media (min-width: $device-small) {
|
|
77
|
+
// .dialog-xsmall { width: $dialog-width-xsmall !important; }
|
|
78
|
+
// .dialog-small { width: $dialog-width-small !important; }
|
|
79
|
+
// .dialog-normal { width: $dialog-width-normal !important; }
|
|
80
|
+
// .dialog-large { width: $dialog-width-large !important; }
|
|
81
|
+
// .dialog-xlarge { width: $dialog-width-xlarge !important; }
|
|
82
|
+
// }
|
|
81
83
|
|
|
82
|
-
.dialog-xsmall { width: $dialog-width-xsmall; }
|
|
83
|
-
.dialog-small { width: $dialog-width-small; }
|
|
84
|
-
.dialog-normal { width: $dialog-width-normal; }
|
|
85
|
-
.dialog-large { width: $dialog-width-large; }
|
|
86
|
-
.dialog-xlarge { width: $dialog-width-xlarge; }
|
|
84
|
+
.dialog-xsmall { width: $dialog-width-xsmall !important; }
|
|
85
|
+
.dialog-small { width: $dialog-width-small !important; }
|
|
86
|
+
.dialog-normal { width: $dialog-width-normal !important; }
|
|
87
|
+
.dialog-large { width: $dialog-width-large !important; }
|
|
88
|
+
.dialog-xlarge { width: $dialog-width-xlarge !important; }
|
|
87
89
|
|
|
88
90
|
// Dialog - title (header without toolbar actions)
|
|
89
91
|
//----------------------------------------------------------------------
|
|
@@ -100,7 +102,11 @@
|
|
|
100
102
|
|
|
101
103
|
.dialog-toolbar {
|
|
102
104
|
border-bottom: 1px solid color("divider");
|
|
105
|
+
flex: none;
|
|
103
106
|
height: $toolbar-height-device-small;
|
|
107
|
+
justify-content: flex-start;
|
|
108
|
+
min-height: $toolbar-height-device-small;
|
|
109
|
+
overflow: visible;
|
|
104
110
|
padding: 0 $spacing-small;
|
|
105
111
|
position: relative; // Allow box-shadow to cover children
|
|
106
112
|
@include elevation(4);
|
|
@@ -112,24 +118,6 @@
|
|
|
112
118
|
@include list-item-primary-subtext();
|
|
113
119
|
}
|
|
114
120
|
|
|
115
|
-
@media (min-width: $device-medium) {
|
|
116
|
-
.dialog-toolbar {
|
|
117
|
-
height: $toolbar-height-device-medium;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
@media (min-width: $device-large) {
|
|
122
|
-
.dialog-toolbar {
|
|
123
|
-
height: $toolbar-height-device-large;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
@media (min-width: $device-xlarge) {
|
|
128
|
-
.dialog-toolbar {
|
|
129
|
-
height: $toolbar-height-device-xlarge;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
121
|
// Line up buttons with content
|
|
134
122
|
.dialog-toolbar .button {
|
|
135
123
|
margin-right: $spacing-small;
|
|
@@ -152,9 +140,10 @@
|
|
|
152
140
|
//----------------------------------------------------------------------
|
|
153
141
|
|
|
154
142
|
.dialog-toolbar-actions {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
143
|
+
display: flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
justify-content: flex-end;
|
|
146
|
+
min-height: $toolbar-height-device-small;
|
|
158
147
|
}
|
|
159
148
|
|
|
160
149
|
// .dialog-header
|
|
@@ -192,64 +181,68 @@
|
|
|
192
181
|
// Dialogs - scrollable
|
|
193
182
|
//----------------------------------------------------------------------
|
|
194
183
|
|
|
184
|
+
// TODO remove .dialog-scrollable eventually and just use .dialog-content
|
|
185
|
+
.dialog-content,
|
|
195
186
|
.dialog-scrollable {
|
|
196
|
-
max-height: calc(100vh - #{$toolbar-height-device-small});
|
|
187
|
+
// max-height: calc(100vh - #{$toolbar-height-device-small});
|
|
188
|
+
flex: 1 1 auto;
|
|
197
189
|
overflow-y: auto;
|
|
198
190
|
}
|
|
199
191
|
|
|
200
|
-
@media (min-width: $device-medium) {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
@media (min-width: $device-large) {
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
@media (min-width: $device-xlarge) {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
}
|
|
192
|
+
// @media (min-width: $device-medium) {
|
|
193
|
+
// .dialog-scrollable {
|
|
194
|
+
// // max-height: calc(90vh - #{$toolbar-height-device-medium});
|
|
195
|
+
// }
|
|
196
|
+
// }
|
|
197
|
+
//
|
|
198
|
+
// @media (min-width: $device-large) {
|
|
199
|
+
// .dialog-scrollable {
|
|
200
|
+
// // max-height: calc(90vh - #{$toolbar-height-device-large});
|
|
201
|
+
// }
|
|
202
|
+
// }
|
|
203
|
+
//
|
|
204
|
+
// @media (min-width: $device-xlarge) {
|
|
205
|
+
// .dialog-scrollable {
|
|
206
|
+
// // max-height: calc(90vh - #{$toolbar-height-device-xlarge});
|
|
207
|
+
// }
|
|
208
|
+
// }
|
|
217
209
|
|
|
218
210
|
// Dialogs - scrollable with actions
|
|
219
211
|
//----------------------------------------------------------------------
|
|
220
212
|
|
|
221
|
-
.dialog-scrollable-with-actions {
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
@media (min-width: $device-medium) {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
@media (min-width: $device-large) {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
@media (min-width: $device-xlarge) {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
}
|
|
213
|
+
// .dialog-scrollable-with-actions {
|
|
214
|
+
// max-height: calc(100vh - #{$toolbar-height-device-small * 1});
|
|
215
|
+
// overflow-y: auto;
|
|
216
|
+
// }
|
|
217
|
+
//
|
|
218
|
+
// @media (min-width: $device-medium) {
|
|
219
|
+
// .dialog-scrollable-with-actions {
|
|
220
|
+
// max-height: calc(90vh - #{$toolbar-height-device-medium * 2});
|
|
221
|
+
// }
|
|
222
|
+
// }
|
|
223
|
+
//
|
|
224
|
+
// @media (min-width: $device-large) {
|
|
225
|
+
// .dialog-scrollable-with-actions {
|
|
226
|
+
// max-height: calc(90vh - #{$toolbar-height-device-large * 2});
|
|
227
|
+
// }
|
|
228
|
+
// }
|
|
229
|
+
//
|
|
230
|
+
// @media (min-width: $device-xlarge) {
|
|
231
|
+
// .dialog-scrollable-with-actions {
|
|
232
|
+
// max-height: calc(90vh - #{$toolbar-height-device-xlarge * 2});
|
|
233
|
+
// }
|
|
234
|
+
// }
|
|
243
235
|
|
|
244
236
|
// Dialogs - actions
|
|
245
237
|
//----------------------------------------------------------------------
|
|
246
238
|
|
|
247
239
|
.dialog-actions {
|
|
248
|
-
|
|
240
|
+
align-items: center;
|
|
241
|
+
display: flex;
|
|
249
242
|
height: $toolbar-height-device-small;
|
|
243
|
+
justify-content: flex-end;
|
|
244
|
+
min-height: $toolbar-height-device-small;
|
|
250
245
|
padding: 0 $spacing-normal;
|
|
251
|
-
@include flex-parent();
|
|
252
|
-
@include flex-align-right();
|
|
253
246
|
}
|
|
254
247
|
|
|
255
248
|
@media (min-width: $device-medium) {
|
|
@@ -277,21 +270,21 @@
|
|
|
277
270
|
// Dialog - full height
|
|
278
271
|
//----------------------------------------------------------------------
|
|
279
272
|
|
|
280
|
-
.dialog-full-height .dialog-scrollable {
|
|
281
|
-
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
@media (min-width: $device-medium) {
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
@media (min-width: $device-large) {
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
}
|
|
273
|
+
// .dialog-full-height .dialog-scrollable {
|
|
274
|
+
// height: calc(100vh - #{$toolbar-height-device-small});
|
|
275
|
+
// }
|
|
276
|
+
//
|
|
277
|
+
// @media (min-width: $device-medium) {
|
|
278
|
+
// .dialog-full-height .dialog-scrollable {
|
|
279
|
+
// height: calc(90vh - #{$toolbar-height-device-medium});
|
|
280
|
+
// }
|
|
281
|
+
// }
|
|
282
|
+
//
|
|
283
|
+
// @media (min-width: $device-large) {
|
|
284
|
+
// .dialog-full-height .dialog-scrollable {
|
|
285
|
+
// height: calc(90vh - #{$toolbar-height-device-large});
|
|
286
|
+
// }
|
|
287
|
+
// }
|
|
295
288
|
|
|
296
289
|
// Dialog - full width
|
|
297
290
|
//----------------------------------------------------------------------
|
|
@@ -306,6 +299,12 @@
|
|
|
306
299
|
}
|
|
307
300
|
}
|
|
308
301
|
|
|
302
|
+
// Dialog - full height
|
|
303
|
+
//----------------------------------------------------------------------
|
|
304
|
+
|
|
305
|
+
.dialog-full-height {
|
|
306
|
+
height: 100%;
|
|
307
|
+
}
|
|
309
308
|
|
|
310
309
|
|
|
311
310
|
// .dialog-full-height {
|
|
@@ -330,6 +329,30 @@
|
|
|
330
329
|
// }
|
|
331
330
|
// }
|
|
332
331
|
|
|
332
|
+
// Responsive toolbars/actions
|
|
333
|
+
//----------------------------------------------------------------------
|
|
334
|
+
|
|
335
|
+
@media (min-width: $device-medium) {
|
|
336
|
+
.dialog-toolbar,
|
|
337
|
+
.dialog-actions {
|
|
338
|
+
height: $toolbar-height-device-medium;
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
@media (min-width: $device-large) {
|
|
343
|
+
.dialog-toolbar,
|
|
344
|
+
.dialog-actions {
|
|
345
|
+
height: $toolbar-height-device-large;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
@media (min-width: $device-xlarge) {
|
|
350
|
+
.dialog-toolbar,
|
|
351
|
+
.dialog-actions {
|
|
352
|
+
height: $toolbar-height-device-xlarge;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
|
|
333
356
|
// Dialogs - simple
|
|
334
357
|
//----------------------------------------------------------------------
|
|
335
358
|
|
|
@@ -72,20 +72,6 @@
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
@each $color-name, $color in $colors {
|
|
76
|
-
.tabs-#{$color-name} {
|
|
77
|
-
.tab {
|
|
78
|
-
&:hover {
|
|
79
|
-
border-color: lighten($color, 30%);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
&:active {
|
|
83
|
-
background-color: lighten($color, 40%);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
75
|
// Tabs - bordered
|
|
90
76
|
//----------------------------------------------------------------------
|
|
91
77
|
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: dlegr250_material_design
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.6.
|
|
4
|
+
version: 0.6.06
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Daniel LeGrand
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-
|
|
11
|
+
date: 2018-04-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description: 'WARNING: ALPHA CODE, NOT PRODUCTION READY. ACTIVELY UNDER DEVELOPMENT
|
|
14
14
|
AS OF AUG 2016. Implement Google Material Design spec with modern browsers in mind
|