materialize_timepicker_rails 0.1.0

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.
@@ -0,0 +1,95 @@
1
+ /*!
2
+ * ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/)
3
+ * Copyright 2014 Wang Shenwei.
4
+ * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
5
+ *
6
+ * Further modified
7
+ * Copyright 2015 Ching Yaw Hao.
8
+ *
9
+ * Gemified
10
+ * Shawn Wilson Copyright 2016
11
+ *
12
+ * Bootstrap v3.1.1 (http://getbootstrap.com)
13
+ * Copyright 2011-2014 Twitter, Inc.
14
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
15
+ */
16
+ .darktheme {
17
+ .picker__box {
18
+ background-color: #212121;
19
+ }
20
+
21
+ .picker__date-display {
22
+ background-color: transparent;
23
+ }
24
+
25
+ .clockpicker-display {
26
+ color: white;
27
+ }
28
+
29
+ .clockpicker-span-am-pm {
30
+ color: white;
31
+ }
32
+
33
+ .clockpicker-span-hours,
34
+ .clockpicker-span-minutes,
35
+ #click-am,
36
+ #click-pm {
37
+ &.text-primary {
38
+ color: #ff4081;
39
+ }
40
+ }
41
+
42
+ .clockpicker-plate {
43
+ background-color: transparent;
44
+ }
45
+
46
+ .clockpicker-tick {
47
+ color: white;
48
+ background-color: rgba(255, 64, 129, 0);
49
+ }
50
+
51
+ .clockpicker-tick.active,
52
+ .clockpicker-tick:hover {
53
+ background-color: rgba(255, 64, 129, 0.25);
54
+ }
55
+
56
+ .clockpicker-canvas-bearing {
57
+ fill: white;
58
+ }
59
+
60
+ .clockpicker-canvas-fg {
61
+ fill: rgba(255, 64, 129, 0);
62
+ }
63
+
64
+ .clockpicker-canvas-fg.active {
65
+ fill: rgba(255, 64, 129, 0.5);
66
+ }
67
+
68
+ .clockpicker-canvas-bg {
69
+ fill: rgba(255, 64, 129, 0.25);
70
+ }
71
+
72
+ .clockpicker-canvas-bg-trans {
73
+ fill: rgba(255, 64, 129, 0.25);
74
+ }
75
+
76
+ .clockpicker-canvas line {
77
+ stroke: rgba(255, 64, 129, 0.25);
78
+ }
79
+
80
+ button {
81
+ color: white;
82
+ }
83
+
84
+ .btn-floating.btn-flat.active {
85
+ background-color: rgba(255, 64, 129, 0.25);
86
+ }
87
+
88
+ .btn-floating.btn-flat:active {
89
+ background-color: rgba(255, 64, 129, 0.5);
90
+ }
91
+
92
+ .picker__footer .clockpicker-button:active {
93
+ background-color: rgba(255, 64, 129, 0.25);
94
+ }
95
+ }
@@ -0,0 +1,336 @@
1
+ /*!
2
+ * ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/)
3
+ * Copyright 2014 Wang Shenwei.
4
+ * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
5
+ *
6
+ * Further modified
7
+ * Copyright 2015 Ching Yaw Hao.
8
+ *
9
+ * Gemified
10
+ * Shawn Wilson Copyright 2016
11
+ *
12
+ * Bootstrap v3.1.1 (http://getbootstrap.com)
13
+ * Copyright 2011-2014 Twitter, Inc.
14
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
15
+ */
16
+
17
+ .picker__box {
18
+ background: $clockpicker-picker-box-background;
19
+ }
20
+
21
+ .picker__date-display {
22
+ background-color: $clockpicker-picker-box-date-display-background-color;
23
+ }
24
+
25
+ .clockpicker-display {
26
+ vertical-align: middle;
27
+ display: inline-block;
28
+ margin: auto;
29
+ height: 85px;
30
+ font-size: 70px;
31
+ padding: 10px;
32
+ padding-bottom: 0px;
33
+ color: $clockpicker-primary-color;
34
+ }
35
+
36
+ .clockpicker-display-column {
37
+ float: left;
38
+ }
39
+
40
+ .clockpicker-display-am-pm {
41
+ padding-left: 5px;
42
+ vertical-align: bottom;
43
+ height: 85px;
44
+ }
45
+
46
+ .clockpicker-span-am-pm {
47
+ display: inline-block;
48
+ font-size: 23px;
49
+ line-height: 25px;
50
+ color: $clockpicker-primary-color;
51
+ }
52
+
53
+ .clockpicker-span-hours,
54
+ .clockpicker-span-minutes {
55
+ -webkit-animation-duration: 500ms;
56
+ animation-duration: 500ms;
57
+ -webkit-animation-fill-mode: both;
58
+ animation-fill-mode: both;
59
+ -webkit-transition: color 500ms;
60
+ -moz-transition: color 500ms;
61
+ -ms-transition: color 500ms;
62
+ -o-transition: color 500ms;
63
+ transition: color 500ms;
64
+ cursor: pointer;
65
+ }
66
+
67
+ @-webkit-keyframes pulse {
68
+ from {
69
+ -webkit-transform: scale3d(1, 1, 1);
70
+ transform: scale3d(1, 1, 1);
71
+ }
72
+ 50% {
73
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
74
+ transform: scale3d(1.1, 1.1, 1.1);
75
+ }
76
+ to {
77
+ -webkit-transform: scale3d(1, 1, 1);
78
+ transform: scale3d(1, 1, 1);
79
+ }
80
+ }
81
+
82
+ @-moz-keyframes pulse {
83
+ from {
84
+ -moz-transform: scale3d(1, 1, 1);
85
+ transform: scale3d(1, 1, 1);
86
+ }
87
+ 50% {
88
+ -moz-transform: scale3d(1.1, 1.1, 1.1);
89
+ transform: scale3d(1.1, 1.1, 1.1);
90
+ }
91
+ to {
92
+ -moz-transform: scale3d(1, 1, 1);
93
+ transform: scale3d(1, 1, 1);
94
+ }
95
+ }
96
+
97
+ @-ms-keyframes pulse {
98
+ from {
99
+ -ms-transform: scale3d(1, 1, 1);
100
+ transform: scale3d(1, 1, 1);
101
+ }
102
+ 50% {
103
+ -ms-transform: scale3d(1.1, 1.1, 1.1);
104
+ transform: scale3d(1.1, 1.1, 1.1);
105
+ }
106
+ to {
107
+ -ms-transform: scale3d(1, 1, 1);
108
+ transform: scale3d(1, 1, 1);
109
+ }
110
+ }
111
+
112
+ @-o-keyframes pulse {
113
+ from {
114
+ -o-transform: scale3d(1, 1, 1);
115
+ transform: scale3d(1, 1, 1);
116
+ }
117
+ 50% {
118
+ -o-transform: scale3d(1.1, 1.1, 1.1);
119
+ transform: scale3d(1.1, 1.1, 1.1);
120
+ }
121
+ to {
122
+ -o-transform: scale3d(1, 1, 1);
123
+ transform: scale3d(1, 1, 1);
124
+ }
125
+ }
126
+
127
+ @keyframes pulse {
128
+ from {
129
+ transform: scale3d(1, 1, 1);
130
+ }
131
+ 50% {
132
+ transform: scale3d(1.1, 1.1, 1.1);
133
+ }
134
+ to {
135
+ transform: scale3d(1, 1, 1);
136
+ }
137
+ }
138
+
139
+ #click-am,
140
+ #click-pm {
141
+ cursor: pointer;
142
+ }
143
+
144
+ .clockpicker-span-hours,
145
+ .clockpicker-span-minutes,
146
+ #click-am,
147
+ #click-pm {
148
+ &.text-primary {
149
+ -webkit-animation-name: pulse;
150
+ animation-name: pulse;
151
+ color: white;
152
+ }
153
+ }
154
+
155
+ .clockpicker-moving {
156
+ cursor: move;
157
+ }
158
+
159
+ .clockpicker-plate {
160
+ background-color: #eeeeee;
161
+ border-radius: 50%;
162
+ width: 270px;
163
+ height: 270px;
164
+ overflow: visible;
165
+ position: relative;
166
+ margin: auto;
167
+ margin-top: 20px;
168
+ /* Disable text selection highlighting. Thanks to Hermanya */
169
+ -webkit-touch-callout: none;
170
+ -webkit-user-select: none;
171
+ -khtml-user-select: none;
172
+ -moz-user-select: none;
173
+ -ms-user-select: none;
174
+ user-select: none;
175
+ }
176
+
177
+ .clockpicker-canvas,
178
+ .clockpicker-dial {
179
+ width: 270px;
180
+ height: 270px;
181
+ position: absolute;
182
+ left: -1px;
183
+ top: -1px;
184
+ }
185
+
186
+ .clockpicker-minutes {
187
+ visibility: hidden;
188
+ }
189
+
190
+ .clockpicker-tick {
191
+ border-radius: 50%;
192
+ color: $clockpicker-tick-color;
193
+ line-height: 40px;
194
+ text-align: center;
195
+ width: 40px;
196
+ height: 40px;
197
+ position: absolute;
198
+ cursor: pointer;
199
+ -webkit-transition: background-color 300ms;
200
+ -moz-transition: background-color 300ms;
201
+ -ms-transition: background-color 300ms;
202
+ -o-transition: background-color 300ms;
203
+ transition: background-color 300ms;
204
+ background-color: $clockpicker-tick-background-color;
205
+ &.active,
206
+ &:hover {
207
+ background-color: $clockpicker-tick-background-color-active;
208
+ }
209
+ }
210
+
211
+ .clockpicker-dial {
212
+ -webkit-transition: -webkit-transform 350ms, opacity 350ms;
213
+ -moz-transition: -moz-transform 350ms, opacity 350ms;
214
+ -ms-transition: -ms-transform 350ms, opacity 350ms;
215
+ -o-transition: -o-transform 350ms, opacity 350ms;
216
+ transition: transform 350ms, opacity 350ms;
217
+ }
218
+
219
+ .clockpicker-dial-out {
220
+ opacity: 0;
221
+ }
222
+
223
+ .clockpicker-hours.clockpicker-dial-out {
224
+ -webkit-transform: scale(1.2, 1.2);
225
+ -moz-transform: scale(1.2, 1.2);
226
+ -ms-transform: scale(1.2, 1.2);
227
+ -o-transform: scale(1.2, 1.2);
228
+ transform: scale(1.2, 1.2);
229
+ }
230
+
231
+ .clockpicker-minutes.clockpicker-dial-out {
232
+ -webkit-transform: scale(.8, .8);
233
+ -moz-transform: scale(.8, .8);
234
+ -ms-transform: scale(.8, .8);
235
+ -o-transform: scale(.8, .8);
236
+ transform: scale(.8, .8);
237
+ }
238
+
239
+ .clockpicker-canvas {
240
+ -webkit-transition: opacity 300ms;
241
+ -moz-transition: opacity 300ms;
242
+ -ms-transition: opacity 300ms;
243
+ -o-transition: opacity 300ms;
244
+ transition: opacity 300ms;
245
+ }
246
+
247
+ .clockpicker-canvas-out {
248
+ opacity: 0.25;
249
+ }
250
+
251
+ .clockpicker-canvas-bearing {
252
+ stroke: none;
253
+ fill: $clockpicker-canvas-bearing-fill;
254
+ }
255
+
256
+ .clockpicker-canvas-fg {
257
+ stroke: none;
258
+ fill: rgba($clockpicker-canvas-fg-fill, 0);
259
+ &.active {
260
+ fill: rgba($clockpicker-canvas-fg-fill, 0.5);
261
+ }
262
+ }
263
+
264
+ .clockpicker-canvas-bg {
265
+ stroke: none;
266
+ fill: $clockpicker-canvas-bg-fill;
267
+ }
268
+
269
+ .clockpicker-canvas-bg-trans {
270
+ fill: $clockpicker-canvas-bg-fill;
271
+ }
272
+
273
+ .clockpicker-canvas line {
274
+ stroke: $clockpicker-canvas-bg-stroke;
275
+ stroke-width: 1;
276
+ stroke-linecap: round;
277
+ /*shape-rendering: crispEdges;*/
278
+ }
279
+
280
+ .clockpicker-am-pm-block {
281
+ margin-top: -10px;
282
+ width: 100%;
283
+ height: 50px;
284
+ }
285
+
286
+ //AM PM buttons
287
+ .clockpicker-button {
288
+ &.am-button {
289
+ height: 45px;
290
+ width: 45px;
291
+ float: left;
292
+ }
293
+ &.pm-button {
294
+ height: 45px;
295
+ width: 45px;
296
+ float: right;
297
+ }
298
+ }
299
+
300
+ button {
301
+ color: $clockpicker-button-color;
302
+ }
303
+
304
+ //buttons
305
+ .btn-floating {
306
+ &.btn-flat {
307
+ &:focus,
308
+ &:visited {
309
+ background-color: transparent;
310
+ }
311
+ &:hover {
312
+ box-shadow: none;
313
+ background-color: transparent;
314
+ }
315
+ &.active {
316
+ background-color: rgba($clockpicker-button-background-color, 0.25);
317
+ }
318
+ &:active {
319
+ background-color: rgba($clockpicker-button-background-color, 0.5);
320
+ }
321
+ }
322
+ }
323
+
324
+ //footer
325
+ .picker__footer {
326
+ .clockpicker-button {
327
+ margin: auto;
328
+ margin-top: 15px;
329
+ &:focus {
330
+ background-color: transparent;
331
+ }
332
+ &:active {
333
+ background-color: rgba($clockpicker-button-background-color, 0.25);
334
+ }
335
+ }
336
+ }
@@ -0,0 +1,16 @@
1
+ //box
2
+ $clockpicker-picker-box-background: #fff !default;
3
+ $clockpicker-picker-box-date-display-background-color: color("teal", "lighten-1") !default;
4
+ $clockpicker-primary-color: color("teal", "lighten-4") !default;
5
+ //tick
6
+ $clockpicker-tick-background-color: rgba(color("teal", "base"), 0) !default;
7
+ $clockpicker-tick-background-color-active: rgba(color("teal", "base"), 0.25) !default;
8
+ $clockpicker-tick-color: #666 !default;
9
+ //canvas
10
+ $clockpicker-canvas-bearing-fill: rgba(color("teal", "darken-4"), 0.75) !default;
11
+ $clockpicker-canvas-fg-fill: color("teal", "darken-4") !default;
12
+ $clockpicker-canvas-bg-fill: rgba(color("teal", "base"), 0.25) !default;
13
+ $clockpicker-canvas-bg-stroke: $clockpicker-canvas-bg-fill !default;
14
+ //buttons
15
+ $clockpicker-button-background-color: color("teal", "base") !default;
16
+ $clockpicker-button-color: $button-flat-color !default;
@@ -0,0 +1,19 @@
1
+ @charset "UTF-8";
2
+
3
+ /** Materialize */
4
+ //mixins and colors
5
+ @import "Materialize/sass/components/mixins";
6
+ @import "Materialize/sass/components/color";
7
+
8
+ // Variables;
9
+ @import "Materialize/sass/components/variables";
10
+
11
+ /** clockpicker */
12
+ // Variables;
13
+ @import "components/variables";
14
+
15
+ //primary
16
+ @import "components/primary";
17
+
18
+ //dark
19
+ @import "components/dark";
metadata ADDED
@@ -0,0 +1,88 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: materialize_timepicker_rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Shawn Wilson
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2016-11-29 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.13'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.13'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ description: A simple plugin for MaterializeCss timepicker
42
+ email:
43
+ - swilson@taurenltd.com
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - ".gitignore"
49
+ - CODE_OF_CONDUCT.md
50
+ - Gemfile
51
+ - LICENSE.txt
52
+ - README.md
53
+ - Rakefile
54
+ - bin/console
55
+ - bin/setup
56
+ - lib/materialize_timepicker_rails.rb
57
+ - lib/materialize_timepicker_rails/version.rb
58
+ - materialize_timepicker_rails.gemspec
59
+ - vendor/assets/javascripts/materialize_datepicker.js
60
+ - vendor/assets/stylesheets/components/_dark.scss
61
+ - vendor/assets/stylesheets/components/_primary.scss
62
+ - vendor/assets/stylesheets/components/_variable.scss
63
+ - vendor/assets/stylesheets/materialize_datepicker.scss
64
+ homepage: https://github.com/swilson223/materialize_timepicker_rails
65
+ licenses:
66
+ - MIT
67
+ metadata: {}
68
+ post_install_message:
69
+ rdoc_options: []
70
+ require_paths:
71
+ - lib
72
+ required_ruby_version: !ruby/object:Gem::Requirement
73
+ requirements:
74
+ - - ">="
75
+ - !ruby/object:Gem::Version
76
+ version: '0'
77
+ required_rubygems_version: !ruby/object:Gem::Requirement
78
+ requirements:
79
+ - - ">="
80
+ - !ruby/object:Gem::Version
81
+ version: '0'
82
+ requirements: []
83
+ rubyforge_project:
84
+ rubygems_version: 2.5.1
85
+ signing_key:
86
+ specification_version: 4
87
+ summary: A simple plugin for MaterializeCss timepicker
88
+ test_files: []