dlegr250_material_design 0.2.02 → 0.2.03
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/base/init.js.coffee +1 -0
- data/vendor/assets/javascripts/components/snackbar.coffee +50 -0
- data/vendor/assets/javascripts/components/snackbar_handler.coffee +13 -10
- data/vendor/assets/javascripts/dlegr250_material_design.js +1 -0
- data/vendor/assets/stylesheets/base/base.scss +1 -0
- data/vendor/assets/stylesheets/components/buttons.scss +1 -1
- data/vendor/assets/stylesheets/components/snackbarlight.scss +89 -50
- 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: 300d53085cfe285f1242ca94f860b9c5c3c5b90b
|
|
4
|
+
data.tar.gz: f3cab3a85fbc270dc785dfc77a98fcf12dfc0bc1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 640c4bb0a029c870fa4124e968ed2db9165dfd9ec4647db70331605418e2226c63e01ec6fbd77aee06ceb632a9174b5b5910b14dc4c345ca87f649b884b998c1
|
|
7
|
+
data.tar.gz: 6cfaabe5641a775632bc74c8528f937e12aa602387e0cae148618affca15e7fbb69585141cb5c0fa773fca25dba17235466e761cc716370267cbcff77b6954f6
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
#======================================================================
|
|
2
|
+
# Implements Google Material Design Snackbar in-app notification.
|
|
3
|
+
#======================================================================
|
|
4
|
+
class App.MD.Snackbar
|
|
5
|
+
@visible: false
|
|
6
|
+
|
|
7
|
+
@init: () ->
|
|
8
|
+
@setEvents()
|
|
9
|
+
|
|
10
|
+
@setEvents: () ->
|
|
11
|
+
$("body").on "click", @element(), =>
|
|
12
|
+
@hide()
|
|
13
|
+
|
|
14
|
+
@create: (text, options = {}) ->
|
|
15
|
+
@text = text
|
|
16
|
+
|
|
17
|
+
# Set options to override defaults
|
|
18
|
+
@duration = options["duration"] || 5000
|
|
19
|
+
|
|
20
|
+
if @visible
|
|
21
|
+
# Force hide current one via animation
|
|
22
|
+
@hide()
|
|
23
|
+
|
|
24
|
+
# Show new one via animation
|
|
25
|
+
setTimeout (=>
|
|
26
|
+
@show()
|
|
27
|
+
), 250
|
|
28
|
+
else
|
|
29
|
+
@visible = true
|
|
30
|
+
@show()
|
|
31
|
+
|
|
32
|
+
# Hide new one after normal delay
|
|
33
|
+
@timeout = setTimeout (=>
|
|
34
|
+
@hide()
|
|
35
|
+
), @duration
|
|
36
|
+
|
|
37
|
+
@show: () ->
|
|
38
|
+
@element().html(@text)
|
|
39
|
+
# @element().css("display", "block")
|
|
40
|
+
@element().addClass("visible")
|
|
41
|
+
$(".fab").addClass("with-snackbar")
|
|
42
|
+
|
|
43
|
+
@hide: () ->
|
|
44
|
+
clearTimeout(@timeout)
|
|
45
|
+
@element().removeClass("visible")
|
|
46
|
+
# @element().css("display", "none")
|
|
47
|
+
$(".fab").removeClass("with-snackbar")
|
|
48
|
+
|
|
49
|
+
@element: () ->
|
|
50
|
+
$("#snackbar")
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
+
# DEPRECATED 2016-06-21 / dan.legrand@gmail.com
|
|
2
|
+
# Using Snackbar class instead of this 3rd-party plugin.
|
|
3
|
+
|
|
1
4
|
#======================================================================
|
|
2
5
|
# Assumes BODY tag will have a data-snackbar="text..." attribute.
|
|
3
6
|
#======================================================================
|
|
4
|
-
class App.MD.SnackbarHandler
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
# class App.MD.SnackbarHandler
|
|
8
|
+
# @init: () ->
|
|
9
|
+
# snackbarText = $("body").data("snackbar")
|
|
10
|
+
# if snackbarText && snackbarText.length > 0
|
|
11
|
+
# new Snackbar(snackbarText)
|
|
12
|
+
#
|
|
13
|
+
# snackbarErrorText = $("body").data("snackbar-error")
|
|
14
|
+
# if snackbarErrorText && snackbarErrorText.length > 0
|
|
15
|
+
# snackbarErrorText = "<span class='color-red'><i class='zmdi zmdi-alert-triangle zmdi-hc-fw'></i> #{snackbarErrorText}</span>"
|
|
16
|
+
# new Snackbar(snackbarErrorText)
|
|
@@ -5,73 +5,112 @@
|
|
|
5
5
|
// Snackbar - container
|
|
6
6
|
//----------------------------------------------------------------------
|
|
7
7
|
|
|
8
|
-
#snackbar-container {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
8
|
+
// #snackbar-container {
|
|
9
|
+
// bottom: 0;
|
|
10
|
+
// left: 0;
|
|
11
|
+
// position: fixed;
|
|
12
|
+
// right: 0;
|
|
13
|
+
// width: 100%;
|
|
14
|
+
// z-index: 99999;
|
|
15
|
+
// }
|
|
16
16
|
|
|
17
17
|
// Snackbar - base
|
|
18
18
|
//----------------------------------------------------------------------
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
background-color:
|
|
22
|
-
|
|
23
|
-
clear: both;
|
|
20
|
+
#snackbar {
|
|
21
|
+
background-color: #323232;
|
|
22
|
+
bottom: 0;
|
|
24
23
|
color: color("white");
|
|
25
24
|
cursor: pointer;
|
|
26
|
-
|
|
27
|
-
min-width: 100%;
|
|
28
|
-
opacity: 0;
|
|
25
|
+
left: 0;
|
|
29
26
|
overflow: hidden;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
padding: $spacing-normal;
|
|
28
|
+
position: absolute;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
right: 0;
|
|
31
|
+
will-change: transform;
|
|
32
|
+
z-index: $layout-depth + 1;
|
|
33
|
+
@include transform(translateY(100%));
|
|
34
|
+
@include transition(transform 0.15s cubic-bezier(0, 0, 0.3, 1));
|
|
34
35
|
|
|
35
|
-
&.
|
|
36
|
-
|
|
37
|
-
margin-bottom: 0;
|
|
38
|
-
padding: 18px 24px;
|
|
36
|
+
&.visible {
|
|
37
|
+
pointer-events: auto;
|
|
39
38
|
@include transform(none);
|
|
40
|
-
@include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s);
|
|
41
|
-
@include transparency(1.0);
|
|
42
|
-
|
|
43
|
-
a {
|
|
44
|
-
color: color("green");
|
|
45
|
-
font-weight: bold;
|
|
46
|
-
line-height: 100%;
|
|
47
|
-
margin-left: 24px;
|
|
48
|
-
text-decoration: none;
|
|
49
|
-
}
|
|
50
39
|
}
|
|
51
40
|
}
|
|
52
41
|
|
|
53
|
-
// Snackbar - media queries for medium and beyond
|
|
54
|
-
//----------------------------------------------------------------------
|
|
55
|
-
|
|
56
42
|
@media (min-width: $medium-width) {
|
|
57
|
-
#snackbar
|
|
43
|
+
#snackbar {
|
|
58
44
|
left: 20px !important;
|
|
45
|
+
margin-bottom: 20px;
|
|
46
|
+
max-width: 568px;
|
|
47
|
+
min-width: 288px;
|
|
59
48
|
right: auto;
|
|
60
49
|
width: auto;
|
|
50
|
+
@include rounded-corners();
|
|
61
51
|
}
|
|
52
|
+
}
|
|
62
53
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
.fab.with-snackbar {
|
|
55
|
+
@include transform(translateY(-48px));
|
|
56
|
+
}
|
|
66
57
|
|
|
67
|
-
&.active {
|
|
68
|
-
margin-bottom: 20px;
|
|
69
|
-
padding: 14px 24px;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
58
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
59
|
+
// .snackbar {
|
|
60
|
+
// background-color: color("snackbar");
|
|
61
|
+
// box-sizing: border-box;
|
|
62
|
+
// clear: both;
|
|
63
|
+
// color: color("white");
|
|
64
|
+
// cursor: pointer;
|
|
65
|
+
// font-size: $font-size-normal;
|
|
66
|
+
// min-width: 100%;
|
|
67
|
+
// opacity: 0;
|
|
68
|
+
// overflow: hidden;
|
|
69
|
+
// @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
|
|
70
|
+
// @include transform(translateY(200%));
|
|
71
|
+
// @include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s);
|
|
72
|
+
// @include rounded-corners(0);
|
|
73
|
+
//
|
|
74
|
+
// &.active {
|
|
75
|
+
// height: auto;
|
|
76
|
+
// margin-bottom: 0;
|
|
77
|
+
// padding: 18px 24px;
|
|
78
|
+
// @include transform(none);
|
|
79
|
+
// @include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s);
|
|
80
|
+
// @include transparency(1.0);
|
|
81
|
+
//
|
|
82
|
+
// a {
|
|
83
|
+
// color: color("green");
|
|
84
|
+
// font-weight: bold;
|
|
85
|
+
// line-height: 100%;
|
|
86
|
+
// margin-left: 24px;
|
|
87
|
+
// text-decoration: none;
|
|
88
|
+
// }
|
|
89
|
+
// }
|
|
90
|
+
// }
|
|
91
|
+
|
|
92
|
+
// Snackbar - media queries for medium and beyond
|
|
93
|
+
//----------------------------------------------------------------------
|
|
94
|
+
|
|
95
|
+
// @media (min-width: $medium-width) {
|
|
96
|
+
// #snackbar-container {
|
|
97
|
+
// left: 20px !important;
|
|
98
|
+
// right: auto;
|
|
99
|
+
// width: auto;
|
|
100
|
+
// }
|
|
101
|
+
//
|
|
102
|
+
// #snackbar-container .snackbar {
|
|
103
|
+
// max-width: 568px;
|
|
104
|
+
// min-width: 288px;
|
|
105
|
+
//
|
|
106
|
+
// &.active {
|
|
107
|
+
// margin-bottom: 20px;
|
|
108
|
+
// padding: 14px 24px;
|
|
109
|
+
// }
|
|
110
|
+
// }
|
|
111
|
+
//
|
|
112
|
+
// #snackbar-container [class="snackbar active"] {
|
|
113
|
+
// @include rounded-corners(2px);
|
|
114
|
+
// margin-bottom: 20px;
|
|
115
|
+
// }
|
|
116
|
+
// }
|
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.2.
|
|
4
|
+
version: 0.2.03
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Daniel LeGrand
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-06-
|
|
11
|
+
date: 2016-06-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -83,6 +83,7 @@ files:
|
|
|
83
83
|
- vendor/assets/javascripts/components/input_masks.coffee
|
|
84
84
|
- vendor/assets/javascripts/components/layout.coffee
|
|
85
85
|
- vendor/assets/javascripts/components/menus.coffee
|
|
86
|
+
- vendor/assets/javascripts/components/snackbar.coffee
|
|
86
87
|
- vendor/assets/javascripts/components/snackbar_handler.coffee
|
|
87
88
|
- vendor/assets/javascripts/components/tabs.coffee
|
|
88
89
|
- vendor/assets/javascripts/components/toggles.coffee
|