anc 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/_sass/anc.scss +9 -0
  3. data/_sass/anc/_base.scss +144 -0
  4. data/_sass/anc/_layout.scss +0 -0
  5. data/_sass/anc/_materialize.scss +42 -0
  6. data/_sass/anc/_syntax-highlighting.scss +78 -0
  7. data/_sass/anc/components/_variables.scss +343 -0
  8. data/_sass/materialize/components/_badges.scss +47 -0
  9. data/_sass/materialize/components/_buttons.scss +291 -0
  10. data/_sass/materialize/components/_cards.scss +196 -0
  11. data/_sass/materialize/components/_carousel.scss +90 -0
  12. data/_sass/materialize/components/_chips.scss +89 -0
  13. data/_sass/materialize/components/_collapsible.scss +84 -0
  14. data/_sass/materialize/components/_color.scss +412 -0
  15. data/_sass/materialize/components/_dropdown.scss +68 -0
  16. data/_sass/materialize/components/_global.scss +734 -0
  17. data/_sass/materialize/components/_grid.scss +156 -0
  18. data/_sass/materialize/components/_icons-material-design.scss +5 -0
  19. data/_sass/materialize/components/_materialbox.scss +43 -0
  20. data/_sass/materialize/components/_modal.scss +90 -0
  21. data/_sass/materialize/components/_navbar.scss +208 -0
  22. data/_sass/materialize/components/_normalize.scss +424 -0
  23. data/_sass/materialize/components/_preloader.scss +334 -0
  24. data/_sass/materialize/components/_pulse.scss +34 -0
  25. data/_sass/materialize/components/_roboto.scss +39 -0
  26. data/_sass/materialize/components/_sideNav.scss +214 -0
  27. data/_sass/materialize/components/_slider.scss +92 -0
  28. data/_sass/materialize/components/_table_of_contents.scss +33 -0
  29. data/_sass/materialize/components/_tabs.scss +93 -0
  30. data/_sass/materialize/components/_tapTarget.scss +103 -0
  31. data/_sass/materialize/components/_toast.scss +59 -0
  32. data/_sass/materialize/components/_tooltip.scss +31 -0
  33. data/_sass/materialize/components/_transitions.scss +13 -0
  34. data/_sass/materialize/components/_typography.scss +61 -0
  35. data/_sass/materialize/components/_variables.scss +343 -0
  36. data/_sass/materialize/components/_waves.scss +114 -0
  37. data/_sass/materialize/components/date_picker/_default.date.scss +456 -0
  38. data/_sass/materialize/components/date_picker/_default.scss +212 -0
  39. data/_sass/materialize/components/date_picker/_default.time.scss +267 -0
  40. data/_sass/materialize/components/forms/_checkboxes.scss +210 -0
  41. data/_sass/materialize/components/forms/_file-input.scss +44 -0
  42. data/_sass/materialize/components/forms/_forms.scss +22 -0
  43. data/_sass/materialize/components/forms/_input-fields.scss +333 -0
  44. data/_sass/materialize/components/forms/_radio-buttons.scss +115 -0
  45. data/_sass/materialize/components/forms/_range.scss +160 -0
  46. data/_sass/materialize/components/forms/_select.scss +182 -0
  47. data/_sass/materialize/components/forms/_switches.scss +89 -0
  48. data/_sass/materialize/materialize.scss +42 -0
  49. metadata +48 -1
@@ -0,0 +1,114 @@
1
+
2
+ /*!
3
+ * Waves v0.6.0
4
+ * http://fian.my.id/Waves
5
+ *
6
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
7
+ * Released under the MIT license
8
+ * https://github.com/fians/Waves/blob/master/LICENSE
9
+ */
10
+
11
+
12
+ .waves-effect {
13
+ position: relative;
14
+ cursor: pointer;
15
+ display: inline-block;
16
+ overflow: hidden;
17
+ user-select: none;
18
+ -webkit-tap-highlight-color: transparent;
19
+ vertical-align: middle;
20
+ z-index: 1;
21
+ transition: .3s ease-out;
22
+
23
+ .waves-ripple {
24
+ position: absolute;
25
+ border-radius: 50%;
26
+ width: 20px;
27
+ height: 20px;
28
+ margin-top:-10px;
29
+ margin-left:-10px;
30
+ opacity: 0;
31
+
32
+ background: rgba(0,0,0,0.2);
33
+ transition: all 0.7s ease-out;
34
+ transition-property: transform, opacity;
35
+ transform: scale(0);
36
+ pointer-events: none;
37
+ }
38
+
39
+ // Waves Colors
40
+ &.waves-light .waves-ripple {
41
+ background-color: rgba(255, 255, 255, 0.45);
42
+ }
43
+ &.waves-red .waves-ripple {
44
+ background-color: rgba(244, 67, 54, .70);
45
+ }
46
+ &.waves-yellow .waves-ripple {
47
+ background-color: rgba(255, 235, 59, .70);
48
+ }
49
+ &.waves-orange .waves-ripple {
50
+ background-color: rgba(255, 152, 0, .70);
51
+ }
52
+ &.waves-purple .waves-ripple {
53
+ background-color: rgba(156, 39, 176, 0.70);
54
+ }
55
+ &.waves-green .waves-ripple {
56
+ background-color: rgba(76, 175, 80, 0.70);
57
+ }
58
+ &.waves-teal .waves-ripple {
59
+ background-color: rgba(0, 150, 136, 0.70);
60
+ }
61
+
62
+ // Style input button bug.
63
+ input[type="button"], input[type="reset"], input[type="submit"] {
64
+ border: 0;
65
+ font-style: normal;
66
+ font-size: inherit;
67
+ text-transform: inherit;
68
+ background: none;
69
+ }
70
+
71
+ img {
72
+ position: relative;
73
+ z-index: -1;
74
+ }
75
+ }
76
+
77
+ .waves-notransition {
78
+ transition: none #{"!important"};
79
+ }
80
+
81
+ .waves-circle {
82
+ transform: translateZ(0);
83
+ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
84
+ }
85
+
86
+ .waves-input-wrapper {
87
+ border-radius: 0.2em;
88
+ vertical-align: bottom;
89
+
90
+ .waves-button-input {
91
+ position: relative;
92
+ top: 0;
93
+ left: 0;
94
+ z-index: 1;
95
+ }
96
+ }
97
+
98
+ .waves-circle {
99
+ text-align: center;
100
+ width: 2.5em;
101
+ height: 2.5em;
102
+ line-height: 2.5em;
103
+ border-radius: 50%;
104
+ -webkit-mask-image: none;
105
+ }
106
+
107
+ .waves-block {
108
+ display: block;
109
+ }
110
+
111
+ /* Firefox Bug: link not triggered */
112
+ .waves-effect .waves-ripple {
113
+ z-index: -1;
114
+ }
@@ -0,0 +1,456 @@
1
+ /* ==========================================================================
2
+ $BASE-DATE-PICKER
3
+ ========================================================================== */
4
+ /**
5
+ * The picker box.
6
+ */
7
+ .picker__box {
8
+ padding: 0;
9
+ border-radius: 2px;
10
+ overflow: hidden;
11
+ }
12
+ /**
13
+ * The header containing the month and year stuff.
14
+ */
15
+ .picker__header {
16
+ text-align: center;
17
+ position: relative;
18
+ margin-top: .75em;
19
+ }
20
+ /**
21
+ * The month and year labels.
22
+ */
23
+ .picker__month,
24
+ .picker__year {
25
+ // font-weight: 500;
26
+ display: inline-block;
27
+ margin-left: .25em;
28
+ margin-right: .25em;
29
+ }
30
+ /**
31
+ * The month and year selectors.
32
+ */
33
+ .picker__select--month,
34
+ .picker__select--year {
35
+
36
+ height: 2em;
37
+ padding: 0;
38
+ margin-left: .25em;
39
+ margin-right: .25em;
40
+ }
41
+
42
+ // Modified
43
+ .picker__select--month.browser-default {
44
+ display: inline;
45
+ background-color: #FFFFFF;
46
+ width: 40%;
47
+ }
48
+ .picker__select--year.browser-default {
49
+ display: inline;
50
+ background-color: #FFFFFF;
51
+ width: 26%;
52
+ }
53
+ .picker__select--month:focus,
54
+ .picker__select--year:focus {
55
+ border-color: $datepicker-focus;
56
+ }
57
+ /**
58
+ * The month navigation buttons.
59
+ */
60
+ .picker__nav--prev,
61
+ .picker__nav--next {
62
+ position: absolute;
63
+ padding: .5em 1.25em;
64
+ width: 1em;
65
+ height: 1em;
66
+ box-sizing: content-box;
67
+ top: -0.25em;
68
+ }
69
+ //@media (min-width: 24.5em) {
70
+ // .picker__nav--prev,
71
+ // .picker__nav--next {
72
+ // top: -0.33em;
73
+ // }
74
+ //}
75
+ .picker__nav--prev {
76
+ left: -1em;
77
+ padding-right: 1.25em;
78
+ }
79
+ //@media (min-width: 24.5em) {
80
+ // .picker__nav--prev {
81
+ // padding-right: 1.5em;
82
+ // }
83
+ //}
84
+ .picker__nav--next {
85
+ right: -1em;
86
+ padding-left: 1.25em;
87
+ }
88
+ //@media (min-width: 24.5em) {
89
+ // .picker__nav--next {
90
+ // padding-left: 1.5em;
91
+ // }
92
+ //}
93
+
94
+ .picker__nav--disabled,
95
+ .picker__nav--disabled:hover,
96
+ .picker__nav--disabled:before,
97
+ .picker__nav--disabled:before:hover {
98
+ cursor: default;
99
+ background: none;
100
+ border-right-color: #f5f5f5;
101
+ border-left-color: #f5f5f5;
102
+ }
103
+ /**
104
+ * The calendar table of dates
105
+ */
106
+ .picker__table {
107
+ text-align: center;
108
+ border-collapse: collapse;
109
+ border-spacing: 0;
110
+ table-layout: fixed;
111
+ font-size: 1rem;
112
+ width: 100%;
113
+ margin-top: .75em;
114
+ margin-bottom: .5em;
115
+ }
116
+
117
+
118
+
119
+ .picker__table th, .picker__table td {
120
+ text-align: center;
121
+ }
122
+
123
+
124
+
125
+
126
+
127
+
128
+ .picker__table td {
129
+ margin: 0;
130
+ padding: 0;
131
+ }
132
+ /**
133
+ * The weekday labels
134
+ */
135
+ .picker__weekday {
136
+ width: 14.285714286%;
137
+ font-size: .75em;
138
+ padding-bottom: .25em;
139
+ color: #999999;
140
+ font-weight: 500;
141
+ /* Increase the spacing a tad */
142
+ }
143
+ @media (min-height: 33.875em) {
144
+ .picker__weekday {
145
+ padding-bottom: .5em;
146
+ }
147
+ }
148
+ /**
149
+ * The days on the calendar
150
+ */
151
+
152
+ .picker__day--today {
153
+ position: relative;
154
+ color: #595959;
155
+ letter-spacing: -.3;
156
+ padding: .75rem 0;
157
+ font-weight: 400;
158
+ border: 1px solid transparent;
159
+
160
+ }
161
+
162
+ //.picker__day--today:before {
163
+ // content: " ";
164
+ // position: absolute;
165
+ // top: 2px;
166
+ // right: 2px;
167
+ // width: 0;
168
+ // height: 0;
169
+ // border-top: 0.5em solid #0059bc;
170
+ // border-left: .5em solid transparent;
171
+ //}
172
+ .picker__day--disabled:before {
173
+ border-top-color: #aaaaaa;
174
+ }
175
+
176
+
177
+ .picker__day--infocus:hover{
178
+ cursor: pointer;
179
+ color: #000;
180
+ font-weight: 500;
181
+ }
182
+
183
+ .picker__day--outfocus {
184
+ display: none;
185
+ padding: .75rem 0;
186
+ color: #fff;
187
+
188
+ }
189
+ .picker__day--outfocus:hover {
190
+ cursor: pointer;
191
+ color: #dddddd;
192
+ // background: #b1dcfb;
193
+ font-weight: 500;
194
+ }
195
+
196
+
197
+ .picker__day--highlighted {
198
+ // border-color: #0089ec;
199
+ }
200
+ .picker__day--highlighted:hover,
201
+ .picker--focused .picker__day--highlighted {
202
+ cursor: pointer;
203
+ // color: #000000;
204
+ // background: #b1dcfb;
205
+ // font-weight: 500;
206
+ }
207
+ .picker__day--selected,
208
+ .picker__day--selected:hover,
209
+ .picker--focused .picker__day--selected {
210
+
211
+
212
+ // Circle background
213
+ border-radius: 50%;
214
+ transform: scale(.75);
215
+ background: #0089ec;
216
+ color: #ffffff;
217
+ }
218
+ .picker__day--disabled,
219
+ .picker__day--disabled:hover,
220
+ .picker--focused .picker__day--disabled {
221
+ background: #f5f5f5;
222
+ border-color: #f5f5f5;
223
+ color: #dddddd;
224
+ cursor: default;
225
+ }
226
+ .picker__day--highlighted.picker__day--disabled,
227
+ .picker__day--highlighted.picker__day--disabled:hover {
228
+ background: #bbbbbb;
229
+ }
230
+ /**
231
+ * The footer containing the "today", "clear", and "close" buttons.
232
+ */
233
+ .picker__footer {
234
+ text-align: right;
235
+ }
236
+ .picker__button--today,
237
+ .picker__button--clear,
238
+ .picker__button--close {
239
+ border: 1px solid #ffffff;
240
+ background: #ffffff;
241
+ font-size: .8em;
242
+ padding: .66em 0;
243
+ font-weight: bold;
244
+ width: 33%;
245
+ display: inline-block;
246
+ vertical-align: bottom;
247
+ }
248
+ .picker__button--today:hover,
249
+ .picker__button--clear:hover,
250
+ .picker__button--close:hover {
251
+ cursor: pointer;
252
+ color: #000000;
253
+ background: #b1dcfb;
254
+ border-bottom-color: #b1dcfb;
255
+ }
256
+ .picker__button--today:focus,
257
+ .picker__button--clear:focus,
258
+ .picker__button--close:focus {
259
+ background: #b1dcfb;
260
+ border-color: $datepicker-focus;
261
+ outline: none;
262
+ }
263
+ .picker__button--today:before,
264
+ .picker__button--clear:before,
265
+ .picker__button--close:before {
266
+ position: relative;
267
+ display: inline-block;
268
+ height: 0;
269
+ }
270
+ .picker__button--today:before,
271
+ .picker__button--clear:before {
272
+ content: " ";
273
+ margin-right: .45em;
274
+ }
275
+ .picker__button--today:before {
276
+ top: -0.05em;
277
+ width: 0;
278
+ border-top: 0.66em solid #0059bc;
279
+ border-left: .66em solid transparent;
280
+ }
281
+ .picker__button--clear:before {
282
+ top: -0.25em;
283
+ width: .66em;
284
+ border-top: 3px solid #ee2200;
285
+ }
286
+ .picker__button--close:before {
287
+ content: "\D7";
288
+ top: -0.1em;
289
+ vertical-align: top;
290
+ font-size: 1.1em;
291
+ margin-right: .35em;
292
+ color: #777777;
293
+ }
294
+ .picker__button--today[disabled],
295
+ .picker__button--today[disabled]:hover {
296
+ background: #f5f5f5;
297
+ border-color: #f5f5f5;
298
+ color: #dddddd;
299
+ cursor: default;
300
+ }
301
+ .picker__button--today[disabled]:before {
302
+ border-top-color: #aaaaaa;
303
+ }
304
+
305
+ /* ==========================================================================
306
+ CUSTOM MATERIALIZE STYLES
307
+ ========================================================================== */
308
+ /*.picker__box {
309
+ border-radius: 2px;
310
+ overflow: hidden;
311
+ }*/
312
+
313
+ .picker__date-display {
314
+ text-align: left;
315
+ background-color: $datepicker-date-bg;
316
+ color: #fff;
317
+ padding: 18px;
318
+ font-weight: 300;
319
+ }
320
+
321
+ @media only screen and (min-width: 601px) {
322
+ .picker__date-display {
323
+ flex:1;
324
+ }
325
+ .picker__weekday-display {
326
+ display:block;
327
+ }
328
+ .picker__container__wrapper {
329
+ flex:2
330
+ }
331
+ }
332
+
333
+ .picker__nav--prev:hover,
334
+ .picker__nav--next:hover {
335
+ cursor: pointer;
336
+ color: #000000;
337
+ background: $datepicker-selected-outfocus;
338
+ }
339
+
340
+ .picker__weekday-display {
341
+ font-weight: 500;
342
+ font-size: $datepicker-display-font-size;
343
+ margin-right: 5px;
344
+ margin-top: 4px;
345
+ }
346
+
347
+ .picker__month-display {
348
+ //text-transform: uppercase;
349
+ font-size: $datepicker-display-font-size;
350
+ font-weight: 500;
351
+ }
352
+ .picker__day-display {
353
+ font-size: $datepicker-display-font-size;
354
+ font-weight: 500;
355
+ margin-right: 5px;
356
+ }
357
+ .picker__year-display {
358
+ font-size: 1.5rem;
359
+ font-weight: 500;
360
+ color: $datepicker-year;
361
+ }
362
+
363
+ /*.picker__box {
364
+ padding: 0;
365
+ }*/
366
+ .picker__calendar-container {
367
+ padding: 0 1rem;
368
+
369
+ thead {
370
+ border: none;
371
+ }
372
+ }
373
+
374
+ // Calendar
375
+ .picker__table {
376
+ margin-top: 0;
377
+ margin-bottom: .5em;
378
+ }
379
+
380
+ .picker__day--infocus {
381
+ color: $datepicker-weekday-color;
382
+ letter-spacing: -.3px;
383
+ padding: 0.75rem 0;
384
+ font-weight: 400;
385
+ border: 1px solid transparent;
386
+ }
387
+ @media only screen and (min-width: 601px) {
388
+ .picker__day--infocus {
389
+ padding: 1.1rem 0;
390
+ }
391
+ }
392
+
393
+
394
+ //Today style
395
+ .picker__day.picker__day--today {
396
+ color: $datepicker-selected;
397
+ }
398
+
399
+ .picker__day.picker__day--today.picker__day--selected {
400
+ color: #fff;
401
+ }
402
+
403
+ // Table Header
404
+ .picker__weekday {
405
+ font-size: .9rem;
406
+ }
407
+
408
+
409
+ .picker__day--selected,
410
+ .picker__day--selected:hover,
411
+ .picker--focused .picker__day--selected {
412
+ // Circle background
413
+ border-radius: 50%;
414
+ transform: scale(.9);
415
+ background-color: $datepicker-selected;
416
+ &.picker__day--outfocus {
417
+ background-color: $datepicker-selected-outfocus;
418
+ }
419
+ color: #ffffff;
420
+ }
421
+
422
+ .picker__footer {
423
+ text-align: right;
424
+ padding: 5px 10px;
425
+ }
426
+
427
+ // Materialize modified
428
+ .picker__close, .picker__today, .picker__clear {
429
+ font-size: 1.1rem;
430
+ padding: 0 1rem;
431
+ color: $datepicker-selected;
432
+ }
433
+ .picker__clear {
434
+ color:#f44336;
435
+ float:left;
436
+ }
437
+
438
+ //month nav buttons
439
+ .picker__nav--prev:before,
440
+ .picker__nav--next:before {
441
+ content: " ";
442
+ border-top: .5em solid transparent;
443
+ border-bottom: .5em solid transparent;
444
+ border-right: 0.75em solid #676767;
445
+ width: 0;
446
+ height: 0;
447
+ display: block;
448
+ margin: 0 auto;
449
+ }
450
+ .picker__nav--next:before {
451
+ border-right: 0;
452
+ border-left: 0.75em solid #676767;
453
+ }
454
+ button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
455
+ background-color: $datepicker-selected-outfocus;
456
+ }