dlegr250_material_design 0.5.30 → 0.5.31
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 +20 -5
- data/vendor/assets/stylesheets/base/variables/dimensions.scss +9 -0
- data/vendor/assets/stylesheets/components/dialogs.scss +29 -18
- data/vendor/assets/stylesheets/components/keyboard_shortcuts.scss +13 -0
- data/vendor/assets/stylesheets/components/lists.scss +6 -0
- data/vendor/assets/stylesheets/components/menus.scss +0 -9
- data/vendor/assets/stylesheets/dlegr250_material_design.scss +1 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 29a7a8821f33f2e14e4008a15b90cf93095b4a6a
|
|
4
|
+
data.tar.gz: 3a65120bb2ff8b23822987ed0a0885799df189b4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 470d35593a2cab9154238518e8a37988cfca464e1e67f56903e18e3412dbfc8da351189682a85ec30b8908dbe93b5b34a88d513af6345139c18094dce1c71cad
|
|
7
|
+
data.tar.gz: df2e85ae8f6a31608668ecbda8573defa9ff0cc7f784ede487af3dfb1b6317547bf8e0d28126b793f9af6b15df5a1a704728ff9f2ef0c20fa867526ce6595b52
|
|
@@ -23,12 +23,22 @@ class App.MD.Dialog
|
|
|
23
23
|
|
|
24
24
|
$("body").on "click", "[role='dialog-close']", (e) ->
|
|
25
25
|
$dialog = $(this).parents(".dialog-container")
|
|
26
|
-
App.MD.Dialog.
|
|
26
|
+
App.MD.Dialog.closeDialog($dialog)
|
|
27
27
|
|
|
28
28
|
$("body").on "click", "[role='dialog-confirm']", (e) ->
|
|
29
29
|
$dialog = $(this).parents(".dialog-container")
|
|
30
30
|
$dialog.find("#dialog-trigger-original-link").click()
|
|
31
|
-
App.MD.Dialog.
|
|
31
|
+
App.MD.Dialog.closeDialog($dialog)
|
|
32
|
+
|
|
33
|
+
$(document).on "click", ".dialog-container", (e) ->
|
|
34
|
+
$target = $(e.target)
|
|
35
|
+
# If explicitely told not to close
|
|
36
|
+
if ($target.attr("data-closable") == "false")
|
|
37
|
+
return false
|
|
38
|
+
|
|
39
|
+
# If clicking ONLY on parent element (not inner dialog)
|
|
40
|
+
if $target.hasClass("dialog-container")
|
|
41
|
+
App.MD.Dialog.closeDialog($target)
|
|
32
42
|
|
|
33
43
|
@call: (html) ->
|
|
34
44
|
$dialog = $(html)
|
|
@@ -43,9 +53,14 @@ class App.MD.Dialog
|
|
|
43
53
|
element.find("input[autofocus]").focus()
|
|
44
54
|
false
|
|
45
55
|
|
|
46
|
-
@
|
|
47
|
-
element
|
|
56
|
+
@closeDialog: (element) ->
|
|
57
|
+
$element = $(element)
|
|
58
|
+
$element.removeClass("visible")
|
|
48
59
|
window.setTimeout =>
|
|
49
|
-
element.remove()
|
|
60
|
+
$element.remove()
|
|
50
61
|
, 500
|
|
51
62
|
false
|
|
63
|
+
|
|
64
|
+
# DEPRECATED: convert code to use @closeDialog() method
|
|
65
|
+
@hideDialog: (element) ->
|
|
66
|
+
App.MD.Dialog.closeDialog(element)
|
|
@@ -45,6 +45,15 @@ $list-three-lines-height: 88px;
|
|
|
45
45
|
// 72px is the specification, but minus 32px for 16px left/right padding.
|
|
46
46
|
$list-item-icon-width: 40px;
|
|
47
47
|
|
|
48
|
+
// Dimensions - dialogs
|
|
49
|
+
//----------------------------------------------------------------------
|
|
50
|
+
|
|
51
|
+
$dialog-width-xsmall: 280px; // From Google Material Design spec, min size
|
|
52
|
+
$dialog-width-small: 360px;
|
|
53
|
+
$dialog-width-normal: 500px;
|
|
54
|
+
$dialog-width-large: 760px;
|
|
55
|
+
$dialog-width-xlarge: 1000px;
|
|
56
|
+
|
|
48
57
|
// Dimensions - menus
|
|
49
58
|
//----------------------------------------------------------------------
|
|
50
59
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
//----------------------------------------------------------------------
|
|
3
3
|
|
|
4
4
|
.dialog-container {
|
|
5
|
-
background-color: rgba(0, 0, 0, 0.
|
|
5
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
height: 100%;
|
|
8
8
|
left: 0;
|
|
@@ -34,13 +34,16 @@
|
|
|
34
34
|
cursor: default;
|
|
35
35
|
max-height: 100%;
|
|
36
36
|
max-width: 90%;
|
|
37
|
+
min-width: $dialog-width-xsmall;
|
|
37
38
|
overflow: hidden;
|
|
39
|
+
width: $dialog-width-xsmall;
|
|
38
40
|
z-index: $dialog-depth;
|
|
39
|
-
@include rounded-corners;
|
|
41
|
+
@include rounded-corners();
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
// Full-screen dialogs take up entire screen on small sizes
|
|
43
|
-
.dialog-full-screen
|
|
45
|
+
.dialog-full-screen,
|
|
46
|
+
.dialog[data-fullscreen="true"] {
|
|
44
47
|
height: 100%;
|
|
45
48
|
left: 0;
|
|
46
49
|
max-width: 100%;
|
|
@@ -54,20 +57,19 @@
|
|
|
54
57
|
.dialog {
|
|
55
58
|
height: auto;
|
|
56
59
|
max-height: 90%;
|
|
57
|
-
max-width: 90%;
|
|
58
|
-
width: 500px;
|
|
59
60
|
position: relative;
|
|
60
61
|
@include box-shadow(0 12px 15px 0 rgba(0,0,0,0.24));
|
|
61
|
-
@include rounded-corners;
|
|
62
|
+
@include rounded-corners();
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
// Sizes
|
|
66
67
|
@media (min-width: $width-small) {
|
|
67
|
-
.dialog-
|
|
68
|
-
.dialog-
|
|
69
|
-
.dialog-
|
|
70
|
-
.dialog-
|
|
68
|
+
.dialog-xsmall { width: $dialog-width-xsmall; }
|
|
69
|
+
.dialog-small { width: $dialog-width-small; }
|
|
70
|
+
.dialog-normal { width: $dialog-width-normal; }
|
|
71
|
+
.dialog-large { width: $dialog-width-large; }
|
|
72
|
+
.dialog-xlarge { width: $dialog-width-xlarge; }
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
// Dialogs - header
|
|
@@ -75,14 +77,11 @@
|
|
|
75
77
|
|
|
76
78
|
.dialog-header {
|
|
77
79
|
@include flex-parent-row();
|
|
80
|
+
border-bottom: 1px solid color("divider");
|
|
78
81
|
height: $appbar-height;
|
|
79
82
|
padding: 0 $spacing-small;
|
|
80
83
|
}
|
|
81
84
|
|
|
82
|
-
.dialog-header-bordered {
|
|
83
|
-
border-bottom: 1px solid color("divider");
|
|
84
|
-
}
|
|
85
|
-
|
|
86
85
|
.dialog-header-icon {
|
|
87
86
|
width: $appbar-button-height;
|
|
88
87
|
|
|
@@ -132,7 +131,6 @@
|
|
|
132
131
|
.dialog-scrollable {
|
|
133
132
|
max-height: calc(100vh - #{$appbar-height}); // For dialog-header
|
|
134
133
|
overflow: scroll;
|
|
135
|
-
// @include force-text-wrap();
|
|
136
134
|
}
|
|
137
135
|
|
|
138
136
|
@media (min-width: $width-small) {
|
|
@@ -145,12 +143,25 @@
|
|
|
145
143
|
//----------------------------------------------------------------------
|
|
146
144
|
|
|
147
145
|
.dialog-actions {
|
|
146
|
+
border-top: 1px solid color("divider");
|
|
148
147
|
height: $appbar-height;
|
|
149
148
|
line-height: $appbar-height;
|
|
150
149
|
padding: 0 $spacing-normal;
|
|
151
|
-
// @include flex-parent-row();
|
|
152
150
|
}
|
|
153
151
|
|
|
154
|
-
|
|
155
|
-
|
|
152
|
+
// Dialogs - simple
|
|
153
|
+
//----------------------------------------------------------------------
|
|
154
|
+
|
|
155
|
+
.dialog-simple {
|
|
156
|
+
.dialog-header {
|
|
157
|
+
border-bottom: 0;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.dialog-content {
|
|
161
|
+
padding-top: 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.dialog-actions {
|
|
165
|
+
border-top: 0;
|
|
166
|
+
}
|
|
156
167
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
//======================================================================
|
|
2
|
+
// Resemble keyboard keys to notify user of keyboard shortcuts.
|
|
3
|
+
//======================================================================
|
|
4
|
+
.keyboard-shortcut {
|
|
5
|
+
background-color: color("white");
|
|
6
|
+
border: 1px solid color("divider");
|
|
7
|
+
color: color("text");
|
|
8
|
+
display: inline-block;
|
|
9
|
+
font-size: $font-size-small;
|
|
10
|
+
margin-left: 2px;
|
|
11
|
+
padding: $spacing-xsmall $spacing-small;
|
|
12
|
+
@include rounded-corners();
|
|
13
|
+
}
|
|
@@ -178,6 +178,12 @@ ol {
|
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
+
// Sizes for component lists
|
|
182
|
+
.component-list.list-one-line .list-item { min-height: $list-one-line-height; }
|
|
183
|
+
.component-list.list-two-lines .list-item { min-height: $list-two-lines-height; }
|
|
184
|
+
.component-list.list-three-lines .list-item { min-height: $list-three-lines-height; }
|
|
185
|
+
|
|
186
|
+
|
|
181
187
|
// List headers
|
|
182
188
|
//----------------------------------------------------------------------
|
|
183
189
|
|
|
@@ -85,23 +85,14 @@
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
// Menus - menu item - icon
|
|
89
|
-
//----------------------------------------------------------------------
|
|
90
|
-
|
|
91
88
|
.menu-item-icon {
|
|
92
89
|
@include list-item-icon();
|
|
93
90
|
}
|
|
94
91
|
|
|
95
|
-
// Menus - menu item - primary
|
|
96
|
-
//----------------------------------------------------------------------
|
|
97
|
-
|
|
98
92
|
.menu-item-primary {
|
|
99
93
|
@include list-item-primary();
|
|
100
94
|
}
|
|
101
95
|
|
|
102
|
-
// Menus - menu item - secondary
|
|
103
|
-
//----------------------------------------------------------------------
|
|
104
|
-
|
|
105
96
|
.menu-item-secondary {
|
|
106
97
|
@include list-item-secondary();
|
|
107
98
|
}
|
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.5.
|
|
4
|
+
version: 0.5.31
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Daniel LeGrand
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-02-
|
|
11
|
+
date: 2017-02-13 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
|
|
@@ -86,6 +86,7 @@ files:
|
|
|
86
86
|
- vendor/assets/stylesheets/components/forms/text_fields.scss
|
|
87
87
|
- vendor/assets/stylesheets/components/forms/toggles.scss
|
|
88
88
|
- vendor/assets/stylesheets/components/grids.scss
|
|
89
|
+
- vendor/assets/stylesheets/components/keyboard_shortcuts.scss
|
|
89
90
|
- vendor/assets/stylesheets/components/lists.scss
|
|
90
91
|
- vendor/assets/stylesheets/components/menus.scss
|
|
91
92
|
- vendor/assets/stylesheets/components/overlay.scss
|