activeadmin_materialize_theme 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (94) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +26 -0
  4. data/Rakefile +34 -0
  5. data/app/assets/config/activeadmin_materialize_theme_manifest.js +1 -0
  6. data/app/assets/javascripts/activeadmin_materialize_theme.js +65 -0
  7. data/app/assets/javascripts/materialize/anime.min.js +34 -0
  8. data/app/assets/javascripts/materialize/autocomplete.js +450 -0
  9. data/app/assets/javascripts/materialize/bin/materialize.js +12374 -0
  10. data/app/assets/javascripts/materialize/bin/materialize.min.js +6 -0
  11. data/app/assets/javascripts/materialize/buttons.js +354 -0
  12. data/app/assets/javascripts/materialize/cards.js +40 -0
  13. data/app/assets/javascripts/materialize/carousel.js +717 -0
  14. data/app/assets/javascripts/materialize/cash.js +960 -0
  15. data/app/assets/javascripts/materialize/characterCounter.js +136 -0
  16. data/app/assets/javascripts/materialize/chips.js +481 -0
  17. data/app/assets/javascripts/materialize/collapsible.js +275 -0
  18. data/app/assets/javascripts/materialize/component.js +44 -0
  19. data/app/assets/javascripts/materialize/datepicker.js +975 -0
  20. data/app/assets/javascripts/materialize/dropdown.js +617 -0
  21. data/app/assets/javascripts/materialize/forms.js +275 -0
  22. data/app/assets/javascripts/materialize/global.js +427 -0
  23. data/app/assets/javascripts/materialize/materialbox.js +453 -0
  24. data/app/assets/javascripts/materialize/modal.js +382 -0
  25. data/app/assets/javascripts/materialize/parallax.js +138 -0
  26. data/app/assets/javascripts/materialize/pushpin.js +145 -0
  27. data/app/assets/javascripts/materialize/range.js +263 -0
  28. data/app/assets/javascripts/materialize/scrollspy.js +295 -0
  29. data/app/assets/javascripts/materialize/select.js +432 -0
  30. data/app/assets/javascripts/materialize/sidenav.js +580 -0
  31. data/app/assets/javascripts/materialize/slider.js +359 -0
  32. data/app/assets/javascripts/materialize/tabs.js +402 -0
  33. data/app/assets/javascripts/materialize/tapTarget.js +314 -0
  34. data/app/assets/javascripts/materialize/timepicker.js +647 -0
  35. data/app/assets/javascripts/materialize/toasts.js +310 -0
  36. data/app/assets/javascripts/materialize/tooltip.js +303 -0
  37. data/app/assets/javascripts/materialize/waves.js +335 -0
  38. data/app/assets/stylesheets/activeadmin_materialize_theme/base.scss +107 -0
  39. data/app/assets/stylesheets/activeadmin_materialize_theme/components/footer.scss +18 -0
  40. data/app/assets/stylesheets/activeadmin_materialize_theme/components/form.scss +140 -0
  41. data/app/assets/stylesheets/activeadmin_materialize_theme/components/header.scss +61 -0
  42. data/app/assets/stylesheets/activeadmin_materialize_theme/components/layout_index.scss +83 -0
  43. data/app/assets/stylesheets/activeadmin_materialize_theme/components/layout_show.scss +56 -0
  44. data/app/assets/stylesheets/activeadmin_materialize_theme/components/sidebar.scss +37 -0
  45. data/app/assets/stylesheets/activeadmin_materialize_theme/components/title_bar.scss +43 -0
  46. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/LICENSE +21 -0
  47. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/README.md +91 -0
  48. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_badges.scss +55 -0
  49. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_buttons.scss +322 -0
  50. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_cards.scss +195 -0
  51. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_carousel.scss +90 -0
  52. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_chips.scss +90 -0
  53. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_collapsible.scss +91 -0
  54. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_color-classes.scss +32 -0
  55. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_color-variables.scss +370 -0
  56. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_datepicker.scss +191 -0
  57. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_dropdown.scss +85 -0
  58. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_global.scss +769 -0
  59. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_grid.scss +156 -0
  60. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_icons-material-design.scss +5 -0
  61. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_materialbox.scss +43 -0
  62. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_modal.scss +94 -0
  63. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_navbar.scss +208 -0
  64. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_normalize.scss +447 -0
  65. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_preloader.scss +334 -0
  66. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_pulse.scss +34 -0
  67. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_sidenav.scss +216 -0
  68. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_slider.scss +92 -0
  69. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_table_of_contents.scss +33 -0
  70. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_tabs.scss +99 -0
  71. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_tapTarget.scss +103 -0
  72. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_timepicker.scss +183 -0
  73. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_toast.scss +58 -0
  74. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_tooltip.scss +32 -0
  75. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_transitions.scss +13 -0
  76. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_typography.scss +60 -0
  77. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_variables.scss +349 -0
  78. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/_waves.scss +114 -0
  79. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_checkboxes.scss +200 -0
  80. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_file-input.scss +44 -0
  81. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_forms.scss +22 -0
  82. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_input-fields.scss +354 -0
  83. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_radio-buttons.scss +115 -0
  84. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_range.scss +161 -0
  85. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_select.scss +180 -0
  86. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/components/forms/_switches.scss +89 -0
  87. data/app/assets/stylesheets/activeadmin_materialize_theme/materialize/materialize.scss +41 -0
  88. data/app/assets/stylesheets/activeadmin_materialize_theme/normalize.css +349 -0
  89. data/app/assets/stylesheets/activeadmin_materialize_theme/theme.scss +13 -0
  90. data/app/assets/stylesheets/activeadmin_materialize_theme/variables.scss +14 -0
  91. data/lib/activeadmin_materialize_theme.rb +6 -0
  92. data/lib/activeadmin_materialize_theme/engine.rb +7 -0
  93. data/lib/activeadmin_materialize_theme/version.rb +5 -0
  94. metadata +149 -0
@@ -0,0 +1,32 @@
1
+ // Color Classes
2
+
3
+ @each $color_name, $color in $colors {
4
+ @each $color_type, $color_value in $color {
5
+ @if $color_type == "base" {
6
+ .#{$color_name} {
7
+ background-color: $color_value !important;
8
+ }
9
+ .#{$color_name}-text {
10
+ color: $color_value !important;
11
+ }
12
+ }
13
+ @else if $color_name != "shades" {
14
+ .#{$color_name}.#{$color_type} {
15
+ background-color: $color_value !important;
16
+ }
17
+ .#{$color_name}-text.text-#{$color_type} {
18
+ color: $color_value !important;
19
+ }
20
+ }
21
+ }
22
+ }
23
+
24
+ // Shade classes
25
+ @each $color, $color_value in $shades {
26
+ .#{$color} {
27
+ background-color: $color_value !important;
28
+ }
29
+ .#{$color}-text {
30
+ color: $color_value !important;
31
+ }
32
+ }
@@ -0,0 +1,370 @@
1
+ // Google Color Palette defined: http://www.google.com/design/spec/style/color.html
2
+
3
+ $materialize-red: (
4
+ "base": #e51c23,
5
+ "lighten-5": #fdeaeb,
6
+ "lighten-4": #f8c1c3,
7
+ "lighten-3": #f3989b,
8
+ "lighten-2": #ee6e73,
9
+ "lighten-1": #ea454b,
10
+ "darken-1": #d0181e,
11
+ "darken-2": #b9151b,
12
+ "darken-3": #a21318,
13
+ "darken-4": #8b1014,
14
+ );
15
+
16
+ $red: (
17
+ "base": #F44336,
18
+ "lighten-5": #FFEBEE,
19
+ "lighten-4": #FFCDD2,
20
+ "lighten-3": #EF9A9A,
21
+ "lighten-2": #E57373,
22
+ "lighten-1": #EF5350,
23
+ "darken-1": #E53935,
24
+ "darken-2": #D32F2F,
25
+ "darken-3": #C62828,
26
+ "darken-4": #B71C1C,
27
+ "accent-1": #FF8A80,
28
+ "accent-2": #FF5252,
29
+ "accent-3": #FF1744,
30
+ "accent-4": #D50000
31
+ );
32
+
33
+ $pink: (
34
+ "base": #e91e63,
35
+ "lighten-5": #fce4ec,
36
+ "lighten-4": #f8bbd0,
37
+ "lighten-3": #f48fb1,
38
+ "lighten-2": #f06292,
39
+ "lighten-1": #ec407a,
40
+ "darken-1": #d81b60,
41
+ "darken-2": #c2185b,
42
+ "darken-3": #ad1457,
43
+ "darken-4": #880e4f,
44
+ "accent-1": #ff80ab,
45
+ "accent-2": #ff4081,
46
+ "accent-3": #f50057,
47
+ "accent-4": #c51162
48
+ );
49
+
50
+ $purple: (
51
+ "base": #9c27b0,
52
+ "lighten-5": #f3e5f5,
53
+ "lighten-4": #e1bee7,
54
+ "lighten-3": #ce93d8,
55
+ "lighten-2": #ba68c8,
56
+ "lighten-1": #ab47bc,
57
+ "darken-1": #8e24aa,
58
+ "darken-2": #7b1fa2,
59
+ "darken-3": #6a1b9a,
60
+ "darken-4": #4a148c,
61
+ "accent-1": #ea80fc,
62
+ "accent-2": #e040fb,
63
+ "accent-3": #d500f9,
64
+ "accent-4": #aa00ff
65
+ );
66
+
67
+ $deep-purple: (
68
+ "base": #673ab7,
69
+ "lighten-5": #ede7f6,
70
+ "lighten-4": #d1c4e9,
71
+ "lighten-3": #b39ddb,
72
+ "lighten-2": #9575cd,
73
+ "lighten-1": #7e57c2,
74
+ "darken-1": #5e35b1,
75
+ "darken-2": #512da8,
76
+ "darken-3": #4527a0,
77
+ "darken-4": #311b92,
78
+ "accent-1": #b388ff,
79
+ "accent-2": #7c4dff,
80
+ "accent-3": #651fff,
81
+ "accent-4": #6200ea
82
+ );
83
+
84
+ $indigo: (
85
+ "base": #3f51b5,
86
+ "lighten-5": #e8eaf6,
87
+ "lighten-4": #c5cae9,
88
+ "lighten-3": #9fa8da,
89
+ "lighten-2": #7986cb,
90
+ "lighten-1": #5c6bc0,
91
+ "darken-1": #3949ab,
92
+ "darken-2": #303f9f,
93
+ "darken-3": #283593,
94
+ "darken-4": #1a237e,
95
+ "accent-1": #8c9eff,
96
+ "accent-2": #536dfe,
97
+ "accent-3": #3d5afe,
98
+ "accent-4": #304ffe
99
+ );
100
+
101
+ $blue: (
102
+ "base": #2196F3,
103
+ "lighten-5": #E3F2FD,
104
+ "lighten-4": #BBDEFB,
105
+ "lighten-3": #90CAF9,
106
+ "lighten-2": #64B5F6,
107
+ "lighten-1": #42A5F5,
108
+ "darken-1": #1E88E5,
109
+ "darken-2": #1976D2,
110
+ "darken-3": #1565C0,
111
+ "darken-4": #0D47A1,
112
+ "accent-1": #82B1FF,
113
+ "accent-2": #448AFF,
114
+ "accent-3": #2979FF,
115
+ "accent-4": #2962FF
116
+ );
117
+
118
+ $light-blue: (
119
+ "base": #03a9f4,
120
+ "lighten-5": #e1f5fe,
121
+ "lighten-4": #b3e5fc,
122
+ "lighten-3": #81d4fa,
123
+ "lighten-2": #4fc3f7,
124
+ "lighten-1": #29b6f6,
125
+ "darken-1": #039be5,
126
+ "darken-2": #0288d1,
127
+ "darken-3": #0277bd,
128
+ "darken-4": #01579b,
129
+ "accent-1": #80d8ff,
130
+ "accent-2": #40c4ff,
131
+ "accent-3": #00b0ff,
132
+ "accent-4": #0091ea
133
+ );
134
+
135
+ $cyan: (
136
+ "base": #00bcd4,
137
+ "lighten-5": #e0f7fa,
138
+ "lighten-4": #b2ebf2,
139
+ "lighten-3": #80deea,
140
+ "lighten-2": #4dd0e1,
141
+ "lighten-1": #26c6da,
142
+ "darken-1": #00acc1,
143
+ "darken-2": #0097a7,
144
+ "darken-3": #00838f,
145
+ "darken-4": #006064,
146
+ "accent-1": #84ffff,
147
+ "accent-2": #18ffff,
148
+ "accent-3": #00e5ff,
149
+ "accent-4": #00b8d4
150
+ );
151
+
152
+ $teal: (
153
+ "base": #009688,
154
+ "lighten-5": #e0f2f1,
155
+ "lighten-4": #b2dfdb,
156
+ "lighten-3": #80cbc4,
157
+ "lighten-2": #4db6ac,
158
+ "lighten-1": #26a69a,
159
+ "darken-1": #00897b,
160
+ "darken-2": #00796b,
161
+ "darken-3": #00695c,
162
+ "darken-4": #004d40,
163
+ "accent-1": #a7ffeb,
164
+ "accent-2": #64ffda,
165
+ "accent-3": #1de9b6,
166
+ "accent-4": #00bfa5
167
+ );
168
+
169
+ $green: (
170
+ "base": #4CAF50,
171
+ "lighten-5": #E8F5E9,
172
+ "lighten-4": #C8E6C9,
173
+ "lighten-3": #A5D6A7,
174
+ "lighten-2": #81C784,
175
+ "lighten-1": #66BB6A,
176
+ "darken-1": #43A047,
177
+ "darken-2": #388E3C,
178
+ "darken-3": #2E7D32,
179
+ "darken-4": #1B5E20,
180
+ "accent-1": #B9F6CA,
181
+ "accent-2": #69F0AE,
182
+ "accent-3": #00E676,
183
+ "accent-4": #00C853
184
+ );
185
+
186
+ $light-green: (
187
+ "base": #8bc34a,
188
+ "lighten-5": #f1f8e9,
189
+ "lighten-4": #dcedc8,
190
+ "lighten-3": #c5e1a5,
191
+ "lighten-2": #aed581,
192
+ "lighten-1": #9ccc65,
193
+ "darken-1": #7cb342,
194
+ "darken-2": #689f38,
195
+ "darken-3": #558b2f,
196
+ "darken-4": #33691e,
197
+ "accent-1": #ccff90,
198
+ "accent-2": #b2ff59,
199
+ "accent-3": #76ff03,
200
+ "accent-4": #64dd17
201
+ );
202
+
203
+ $lime: (
204
+ "base": #cddc39,
205
+ "lighten-5": #f9fbe7,
206
+ "lighten-4": #f0f4c3,
207
+ "lighten-3": #e6ee9c,
208
+ "lighten-2": #dce775,
209
+ "lighten-1": #d4e157,
210
+ "darken-1": #c0ca33,
211
+ "darken-2": #afb42b,
212
+ "darken-3": #9e9d24,
213
+ "darken-4": #827717,
214
+ "accent-1": #f4ff81,
215
+ "accent-2": #eeff41,
216
+ "accent-3": #c6ff00,
217
+ "accent-4": #aeea00
218
+ );
219
+
220
+ $yellow: (
221
+ "base": #ffeb3b,
222
+ "lighten-5": #fffde7,
223
+ "lighten-4": #fff9c4,
224
+ "lighten-3": #fff59d,
225
+ "lighten-2": #fff176,
226
+ "lighten-1": #ffee58,
227
+ "darken-1": #fdd835,
228
+ "darken-2": #fbc02d,
229
+ "darken-3": #f9a825,
230
+ "darken-4": #f57f17,
231
+ "accent-1": #ffff8d,
232
+ "accent-2": #ffff00,
233
+ "accent-3": #ffea00,
234
+ "accent-4": #ffd600
235
+ );
236
+
237
+ $amber: (
238
+ "base": #ffc107,
239
+ "lighten-5": #fff8e1,
240
+ "lighten-4": #ffecb3,
241
+ "lighten-3": #ffe082,
242
+ "lighten-2": #ffd54f,
243
+ "lighten-1": #ffca28,
244
+ "darken-1": #ffb300,
245
+ "darken-2": #ffa000,
246
+ "darken-3": #ff8f00,
247
+ "darken-4": #ff6f00,
248
+ "accent-1": #ffe57f,
249
+ "accent-2": #ffd740,
250
+ "accent-3": #ffc400,
251
+ "accent-4": #ffab00
252
+ );
253
+
254
+ $orange: (
255
+ "base": #ff9800,
256
+ "lighten-5": #fff3e0,
257
+ "lighten-4": #ffe0b2,
258
+ "lighten-3": #ffcc80,
259
+ "lighten-2": #ffb74d,
260
+ "lighten-1": #ffa726,
261
+ "darken-1": #fb8c00,
262
+ "darken-2": #f57c00,
263
+ "darken-3": #ef6c00,
264
+ "darken-4": #e65100,
265
+ "accent-1": #ffd180,
266
+ "accent-2": #ffab40,
267
+ "accent-3": #ff9100,
268
+ "accent-4": #ff6d00
269
+ );
270
+
271
+ $deep-orange: (
272
+ "base": #ff5722,
273
+ "lighten-5": #fbe9e7,
274
+ "lighten-4": #ffccbc,
275
+ "lighten-3": #ffab91,
276
+ "lighten-2": #ff8a65,
277
+ "lighten-1": #ff7043,
278
+ "darken-1": #f4511e,
279
+ "darken-2": #e64a19,
280
+ "darken-3": #d84315,
281
+ "darken-4": #bf360c,
282
+ "accent-1": #ff9e80,
283
+ "accent-2": #ff6e40,
284
+ "accent-3": #ff3d00,
285
+ "accent-4": #dd2c00
286
+ );
287
+
288
+ $brown: (
289
+ "base": #795548,
290
+ "lighten-5": #efebe9,
291
+ "lighten-4": #d7ccc8,
292
+ "lighten-3": #bcaaa4,
293
+ "lighten-2": #a1887f,
294
+ "lighten-1": #8d6e63,
295
+ "darken-1": #6d4c41,
296
+ "darken-2": #5d4037,
297
+ "darken-3": #4e342e,
298
+ "darken-4": #3e2723
299
+ );
300
+
301
+ $blue-grey: (
302
+ "base": #607d8b,
303
+ "lighten-5": #eceff1,
304
+ "lighten-4": #cfd8dc,
305
+ "lighten-3": #b0bec5,
306
+ "lighten-2": #90a4ae,
307
+ "lighten-1": #78909c,
308
+ "darken-1": #546e7a,
309
+ "darken-2": #455a64,
310
+ "darken-3": #37474f,
311
+ "darken-4": #263238
312
+ );
313
+
314
+ $grey: (
315
+ "base": #9e9e9e,
316
+ "lighten-5": #fafafa,
317
+ "lighten-4": #f5f5f5,
318
+ "lighten-3": #eeeeee,
319
+ "lighten-2": #e0e0e0,
320
+ "lighten-1": #bdbdbd,
321
+ "darken-1": #757575,
322
+ "darken-2": #616161,
323
+ "darken-3": #424242,
324
+ "darken-4": #212121
325
+ );
326
+
327
+ $shades: (
328
+ "black": #000000,
329
+ "white": #FFFFFF,
330
+ "transparent": transparent
331
+ );
332
+
333
+ $colors: (
334
+ "materialize-red": $materialize-red,
335
+ "red": $red,
336
+ "pink": $pink,
337
+ "purple": $purple,
338
+ "deep-purple": $deep-purple,
339
+ "indigo": $indigo,
340
+ "blue": $blue,
341
+ "light-blue": $light-blue,
342
+ "cyan": $cyan,
343
+ "teal": $teal,
344
+ "green": $green,
345
+ "light-green": $light-green,
346
+ "lime": $lime,
347
+ "yellow": $yellow,
348
+ "amber": $amber,
349
+ "orange": $orange,
350
+ "deep-orange": $deep-orange,
351
+ "brown": $brown,
352
+ "blue-grey": $blue-grey,
353
+ "grey": $grey,
354
+ "shades": $shades
355
+ ) !default;
356
+
357
+
358
+ // usage: color("name_of_color", "type_of_color")
359
+ // to avoid to repeating map-get($colors, ...)
360
+
361
+ @function color($color, $type) {
362
+ @if map-has-key($colors, $color) {
363
+ $curr_color: map-get($colors, $color);
364
+ @if map-has-key($curr_color, $type) {
365
+ @return map-get($curr_color, $type);
366
+ }
367
+ }
368
+ @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
369
+ @return null;
370
+ }
@@ -0,0 +1,191 @@
1
+ /* Modal */
2
+ .datepicker-modal {
3
+ max-width: 325px;
4
+ min-width: 300px;
5
+ max-height: none;
6
+ }
7
+
8
+ .datepicker-container.modal-content {
9
+ display: flex;
10
+ flex-direction: column;
11
+ padding: 0;
12
+ }
13
+
14
+ .datepicker-controls {
15
+ display: flex;
16
+ justify-content: space-between;
17
+ width: 280px;
18
+ margin: 0 auto;
19
+
20
+ .selects-container {
21
+ display: flex;
22
+ }
23
+
24
+ .select-wrapper {
25
+ input {
26
+ &:focus {
27
+ border-bottom: none;
28
+ }
29
+ border-bottom: none;
30
+ text-align: center;
31
+ margin: 0;
32
+ }
33
+
34
+ .caret {
35
+ display: none;
36
+ }
37
+ }
38
+
39
+ .select-year input {
40
+ width: 50px;
41
+ }
42
+
43
+ .select-month input {
44
+ width: 70px;
45
+ }
46
+ }
47
+
48
+ .month-prev, .month-next {
49
+ margin-top: 4px;
50
+ cursor: pointer;
51
+ background-color: transparent;
52
+ border: none;
53
+ }
54
+
55
+
56
+ /* Date Display */
57
+ .datepicker-date-display {
58
+ flex: 1 auto;
59
+ background-color: $secondary-color;
60
+ color: #fff;
61
+ padding: 20px 22px;
62
+ font-weight: 500;
63
+
64
+ .year-text {
65
+ display: block;
66
+ font-size: 1.5rem;
67
+ line-height: 25px;
68
+ color: $datepicker-year;
69
+ }
70
+
71
+ .date-text {
72
+ display: block;
73
+ font-size: 2.8rem;
74
+ line-height: 47px;
75
+ font-weight: 500;
76
+ }
77
+ }
78
+
79
+
80
+ /* Calendar */
81
+ .datepicker-calendar-container {
82
+ flex: 2.5 auto;
83
+ }
84
+
85
+ .datepicker-table {
86
+ width: 280px;
87
+ font-size: 1rem;
88
+ margin: 0 auto;
89
+
90
+ thead {
91
+ border-bottom: none;
92
+ }
93
+
94
+ th {
95
+ padding: 10px 5px;
96
+ text-align: center;
97
+ }
98
+
99
+ tr {
100
+ border: none;
101
+ }
102
+
103
+ abbr {
104
+ text-decoration: none;
105
+ color: $datepicker-calendar-header-color;
106
+ }
107
+
108
+ td {
109
+ &.is-today {
110
+ color: $secondary-color;
111
+ }
112
+
113
+ &.is-selected {
114
+ background-color: $secondary-color;
115
+ color: #fff;
116
+ }
117
+
118
+ &.is-outside-current-month,
119
+ &.is-disabled {
120
+ color: $datepicker-disabled-day-color;
121
+ pointer-events: none;
122
+ }
123
+
124
+ border-radius: 50%;
125
+ padding: 0;
126
+ }
127
+ }
128
+
129
+ .datepicker-day-button {
130
+ &:focus {
131
+ background-color: $datepicker-day-focus;
132
+ }
133
+
134
+ background-color: transparent;
135
+ border: none;
136
+ line-height: 38px;
137
+ display: block;
138
+ width: 100%;
139
+ border-radius: 50%;
140
+ padding: 0 5px;
141
+ cursor: pointer;
142
+ color: inherit;
143
+ }
144
+
145
+
146
+ /* Footer */
147
+ .datepicker-footer {
148
+ width: 280px;
149
+ margin: 0 auto;
150
+ padding-bottom: 5px;
151
+ display: flex;
152
+ justify-content: space-between;
153
+ }
154
+
155
+ .datepicker-cancel,
156
+ .datepicker-clear,
157
+ .datepicker-today,
158
+ .datepicker-done {
159
+ color: $secondary-color;
160
+ padding: 0 1rem;
161
+ }
162
+
163
+ .datepicker-clear {
164
+ color: $error-color;
165
+ }
166
+
167
+
168
+ /* Media Queries */
169
+ @media #{$medium-and-up} {
170
+ .datepicker-modal {
171
+ max-width: 625px;
172
+ }
173
+
174
+ .datepicker-container.modal-content {
175
+ flex-direction: row;
176
+ }
177
+
178
+ .datepicker-date-display {
179
+ flex: 0 1 270px;
180
+ }
181
+
182
+ .datepicker-controls,
183
+ .datepicker-table,
184
+ .datepicker-footer {
185
+ width: 320px;
186
+ }
187
+
188
+ .datepicker-day-button {
189
+ line-height: 44px;
190
+ }
191
+ }