administrate-materialize-theme 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (81) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +49 -0
  4. data/Rakefile +1 -0
  5. data/app/assets/javascripts/administrate-materialize-theme/anime.min.js +34 -0
  6. data/app/assets/javascripts/administrate-materialize-theme/autocomplete.js +450 -0
  7. data/app/assets/javascripts/administrate-materialize-theme/bin/materialize.js +12374 -0
  8. data/app/assets/javascripts/administrate-materialize-theme/bin/materialize.min.js +6 -0
  9. data/app/assets/javascripts/administrate-materialize-theme/buttons.js +354 -0
  10. data/app/assets/javascripts/administrate-materialize-theme/cards.js +40 -0
  11. data/app/assets/javascripts/administrate-materialize-theme/carousel.js +717 -0
  12. data/app/assets/javascripts/administrate-materialize-theme/cash.js +960 -0
  13. data/app/assets/javascripts/administrate-materialize-theme/characterCounter.js +136 -0
  14. data/app/assets/javascripts/administrate-materialize-theme/chips.js +481 -0
  15. data/app/assets/javascripts/administrate-materialize-theme/collapsible.js +275 -0
  16. data/app/assets/javascripts/administrate-materialize-theme/component.js +44 -0
  17. data/app/assets/javascripts/administrate-materialize-theme/datepicker.js +975 -0
  18. data/app/assets/javascripts/administrate-materialize-theme/dropdown.js +617 -0
  19. data/app/assets/javascripts/administrate-materialize-theme/forms.js +275 -0
  20. data/app/assets/javascripts/administrate-materialize-theme/global.js +427 -0
  21. data/app/assets/javascripts/administrate-materialize-theme/materialbox.js +453 -0
  22. data/app/assets/javascripts/administrate-materialize-theme/modal.js +382 -0
  23. data/app/assets/javascripts/administrate-materialize-theme/parallax.js +138 -0
  24. data/app/assets/javascripts/administrate-materialize-theme/pushpin.js +145 -0
  25. data/app/assets/javascripts/administrate-materialize-theme/range.js +263 -0
  26. data/app/assets/javascripts/administrate-materialize-theme/scrollspy.js +295 -0
  27. data/app/assets/javascripts/administrate-materialize-theme/select.js +432 -0
  28. data/app/assets/javascripts/administrate-materialize-theme/sidenav.js +580 -0
  29. data/app/assets/javascripts/administrate-materialize-theme/slider.js +359 -0
  30. data/app/assets/javascripts/administrate-materialize-theme/tabs.js +402 -0
  31. data/app/assets/javascripts/administrate-materialize-theme/tapTarget.js +314 -0
  32. data/app/assets/javascripts/administrate-materialize-theme/theme.js +6 -0
  33. data/app/assets/javascripts/administrate-materialize-theme/timepicker.js +647 -0
  34. data/app/assets/javascripts/administrate-materialize-theme/toasts.js +310 -0
  35. data/app/assets/javascripts/administrate-materialize-theme/tooltip.js +303 -0
  36. data/app/assets/javascripts/administrate-materialize-theme/waves.js +335 -0
  37. data/app/assets/stylesheets/administrate-materialize-theme/components/_badges.scss +55 -0
  38. data/app/assets/stylesheets/administrate-materialize-theme/components/_buttons.scss +322 -0
  39. data/app/assets/stylesheets/administrate-materialize-theme/components/_cards.scss +195 -0
  40. data/app/assets/stylesheets/administrate-materialize-theme/components/_carousel.scss +90 -0
  41. data/app/assets/stylesheets/administrate-materialize-theme/components/_chips.scss +90 -0
  42. data/app/assets/stylesheets/administrate-materialize-theme/components/_collapsible.scss +91 -0
  43. data/app/assets/stylesheets/administrate-materialize-theme/components/_color-classes.scss +32 -0
  44. data/app/assets/stylesheets/administrate-materialize-theme/components/_color-variables.scss +370 -0
  45. data/app/assets/stylesheets/administrate-materialize-theme/components/_datepicker.scss +191 -0
  46. data/app/assets/stylesheets/administrate-materialize-theme/components/_dropdown.scss +85 -0
  47. data/app/assets/stylesheets/administrate-materialize-theme/components/_global.scss +769 -0
  48. data/app/assets/stylesheets/administrate-materialize-theme/components/_grid.scss +156 -0
  49. data/app/assets/stylesheets/administrate-materialize-theme/components/_icons-material-design.scss +5 -0
  50. data/app/assets/stylesheets/administrate-materialize-theme/components/_materialbox.scss +43 -0
  51. data/app/assets/stylesheets/administrate-materialize-theme/components/_modal.scss +94 -0
  52. data/app/assets/stylesheets/administrate-materialize-theme/components/_navbar.scss +208 -0
  53. data/app/assets/stylesheets/administrate-materialize-theme/components/_normalize.scss +447 -0
  54. data/app/assets/stylesheets/administrate-materialize-theme/components/_preloader.scss +334 -0
  55. data/app/assets/stylesheets/administrate-materialize-theme/components/_pulse.scss +34 -0
  56. data/app/assets/stylesheets/administrate-materialize-theme/components/_sidenav.scss +216 -0
  57. data/app/assets/stylesheets/administrate-materialize-theme/components/_slider.scss +92 -0
  58. data/app/assets/stylesheets/administrate-materialize-theme/components/_table_of_contents.scss +33 -0
  59. data/app/assets/stylesheets/administrate-materialize-theme/components/_tabs.scss +99 -0
  60. data/app/assets/stylesheets/administrate-materialize-theme/components/_tapTarget.scss +103 -0
  61. data/app/assets/stylesheets/administrate-materialize-theme/components/_timepicker.scss +183 -0
  62. data/app/assets/stylesheets/administrate-materialize-theme/components/_toast.scss +58 -0
  63. data/app/assets/stylesheets/administrate-materialize-theme/components/_tooltip.scss +32 -0
  64. data/app/assets/stylesheets/administrate-materialize-theme/components/_transitions.scss +13 -0
  65. data/app/assets/stylesheets/administrate-materialize-theme/components/_typography.scss +60 -0
  66. data/app/assets/stylesheets/administrate-materialize-theme/components/_variables.scss +349 -0
  67. data/app/assets/stylesheets/administrate-materialize-theme/components/_waves.scss +114 -0
  68. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_checkboxes.scss +200 -0
  69. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_file-input.scss +44 -0
  70. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_forms.scss +22 -0
  71. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_input-fields.scss +354 -0
  72. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_radio-buttons.scss +115 -0
  73. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_range.scss +161 -0
  74. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_select.scss +180 -0
  75. data/app/assets/stylesheets/administrate-materialize-theme/components/forms/_switches.scss +89 -0
  76. data/app/assets/stylesheets/administrate-materialize-theme/materialize.scss +41 -0
  77. data/app/assets/stylesheets/administrate-materialize-theme/theme.scss +200 -0
  78. data/lib/administrate-materialize-theme.rb +6 -0
  79. data/lib/administrate-materialize-theme/engine.rb +7 -0
  80. data/lib/administrate-materialize-theme/version.rb +5 -0
  81. metadata +150 -0
@@ -0,0 +1,85 @@
1
+ .dropdown-content {
2
+ &:focus {
3
+ outline: 0;
4
+ }
5
+
6
+
7
+ @extend .z-depth-1;
8
+ background-color: $dropdown-bg-color;
9
+ margin: 0;
10
+ display: none;
11
+ min-width: 100px;
12
+ overflow-y: auto;
13
+ opacity: 0;
14
+ position: absolute;
15
+ left: 0;
16
+ top: 0;
17
+ z-index: 9999; // TODO: Check if this doesn't break other things
18
+ transform-origin: 0 0;
19
+
20
+
21
+ li {
22
+ &:hover, &.active {
23
+ background-color: $dropdown-hover-bg-color;
24
+ }
25
+
26
+ &:focus {
27
+ outline: none;
28
+ }
29
+
30
+ &.divider {
31
+ min-height: 0;
32
+ height: 1px;
33
+ }
34
+
35
+ & > a, & > span {
36
+ font-size: 16px;
37
+ color: $dropdown-color;
38
+ display: block;
39
+ line-height: 22px;
40
+ padding: (($dropdown-item-height - 22) / 2) 16px;
41
+ }
42
+
43
+ & > span > label {
44
+ top: 1px;
45
+ left: 0;
46
+ height: 18px;
47
+ }
48
+
49
+ // Icon alignment override
50
+ & > a > i {
51
+ height: inherit;
52
+ line-height: inherit;
53
+ float: left;
54
+ margin: 0 24px 0 0;
55
+ width: 24px;
56
+ }
57
+
58
+
59
+ clear: both;
60
+ color: $off-black;
61
+ cursor: pointer;
62
+ min-height: $dropdown-item-height;
63
+ line-height: 1.5rem;
64
+ width: 100%;
65
+ text-align: left;
66
+ }
67
+ }
68
+
69
+ body.keyboard-focused {
70
+ .dropdown-content li:focus {
71
+ background-color: darken($dropdown-hover-bg-color, 8%);
72
+ }
73
+ }
74
+
75
+ // Input field specificity bugfix
76
+ .input-field.col .dropdown-content [type="checkbox"] + label {
77
+ top: 1px;
78
+ left: 0;
79
+ height: 18px;
80
+ transform: none;
81
+ }
82
+
83
+ .dropdown-trigger {
84
+ cursor: pointer;
85
+ }
@@ -0,0 +1,769 @@
1
+ //Default styles
2
+
3
+ html {
4
+ box-sizing: border-box;
5
+ }
6
+ *, *:before, *:after {
7
+ box-sizing: inherit;
8
+ }
9
+
10
+ body {
11
+ // display: flex;
12
+ // min-height: 100vh;
13
+ // flex-direction: column;
14
+ }
15
+
16
+ main {
17
+ // flex: 1 0 auto;
18
+ }
19
+
20
+ button,
21
+ input,
22
+ optgroup,
23
+ select,
24
+ textarea {
25
+ font-family: $font-stack;
26
+ }
27
+
28
+ ul {
29
+ &:not(.browser-default) {
30
+ padding-left: 0;
31
+ list-style-type: none;
32
+
33
+ & > li {
34
+ list-style-type: none;
35
+ }
36
+ }
37
+ }
38
+
39
+ a {
40
+ color: $link-color;
41
+ text-decoration: none;
42
+
43
+ // Gets rid of tap active state
44
+ -webkit-tap-highlight-color: transparent;
45
+ }
46
+
47
+
48
+ // Positioning
49
+ .valign-wrapper {
50
+ display: flex;
51
+ align-items: center;
52
+ }
53
+
54
+
55
+ // classic clearfix
56
+ .clearfix {
57
+ clear: both;
58
+ }
59
+
60
+
61
+ // Z-levels
62
+ .z-depth-0 {
63
+ box-shadow: none !important;
64
+ }
65
+
66
+ /* 2dp elevation modified*/
67
+ .z-depth-1 {
68
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
69
+ 0 3px 1px -2px rgba(0,0,0,0.12),
70
+ 0 1px 5px 0 rgba(0,0,0,0.2);
71
+ }
72
+ .z-depth-1-half {
73
+ box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
74
+ }
75
+
76
+ /* 6dp elevation modified*/
77
+ .z-depth-2 {
78
+ box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
79
+ 0 1px 10px 0 rgba(0,0,0,0.12),
80
+ 0 2px 4px -1px rgba(0,0,0,0.3);
81
+ }
82
+
83
+ /* 12dp elevation modified*/
84
+ .z-depth-3 {
85
+ box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),
86
+ 0 3px 14px 2px rgba(0,0,0,0.12),
87
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
88
+ }
89
+
90
+ /* 16dp elevation */
91
+ .z-depth-4 {
92
+ box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
93
+ 0 6px 30px 5px rgba(0,0,0,0.12),
94
+ 0 8px 10px -7px rgba(0,0,0,0.2);
95
+ }
96
+
97
+ /* 24dp elevation */
98
+ .z-depth-5 {
99
+ box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
100
+ 0 9px 46px 8px rgba(0,0,0,0.12),
101
+ 0 11px 15px -7px rgba(0,0,0,0.2);
102
+ }
103
+
104
+ .hoverable {
105
+ transition: box-shadow .25s;
106
+
107
+ &:hover {
108
+ box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
109
+ }
110
+ }
111
+
112
+ // Dividers
113
+
114
+ .divider {
115
+ height: 1px;
116
+ overflow: hidden;
117
+ background-color: color("grey", "lighten-2");
118
+ }
119
+
120
+
121
+ // Blockquote
122
+
123
+ blockquote {
124
+ margin: 20px 0;
125
+ padding-left: 1.5rem;
126
+ border-left: 5px solid $primary-color;
127
+ }
128
+
129
+ // Icon Styles
130
+
131
+ i {
132
+ line-height: inherit;
133
+
134
+ &.left {
135
+ float: left;
136
+ margin-right: 15px;
137
+ }
138
+ &.right {
139
+ float: right;
140
+ margin-left: 15px;
141
+ }
142
+ &.tiny {
143
+ font-size: 1rem;
144
+ }
145
+ &.small {
146
+ font-size: 2rem;
147
+ }
148
+ &.medium {
149
+ font-size: 4rem;
150
+ }
151
+ &.large {
152
+ font-size: 6rem;
153
+ }
154
+ }
155
+
156
+ // Images
157
+ img.responsive-img,
158
+ video.responsive-video {
159
+ max-width: 100%;
160
+ height: auto;
161
+ }
162
+
163
+
164
+ // Pagination
165
+
166
+ .pagination {
167
+
168
+ li {
169
+ display: inline-block;
170
+ border-radius: 2px;
171
+ text-align: center;
172
+ vertical-align: top;
173
+ height: 30px;
174
+
175
+ a {
176
+ color: #444;
177
+ display: inline-block;
178
+ font-size: 1.2rem;
179
+ padding: 0 10px;
180
+ line-height: 30px;
181
+ }
182
+
183
+ &.active a { color: #fff; }
184
+
185
+ &.active { background-color: $primary-color; }
186
+
187
+ &.disabled a {
188
+ cursor: default;
189
+ color: #999;
190
+ }
191
+
192
+ i {
193
+ font-size: 2rem;
194
+ }
195
+ }
196
+
197
+
198
+ li.pages ul li {
199
+ display: inline-block;
200
+ float: none;
201
+ }
202
+ }
203
+ @media #{$medium-and-down} {
204
+ .pagination {
205
+ width: 100%;
206
+
207
+ li.prev,
208
+ li.next {
209
+ width: 10%;
210
+ }
211
+
212
+ li.pages {
213
+ width: 80%;
214
+ overflow: hidden;
215
+ white-space: nowrap;
216
+ }
217
+ }
218
+ }
219
+
220
+ // Breadcrumbs
221
+ .breadcrumb {
222
+ font-size: 18px;
223
+ color: rgba(255,255,255, .7);
224
+
225
+ i,
226
+ [class^="mdi-"], [class*="mdi-"],
227
+ i.material-icons {
228
+ display: inline-block;
229
+ float: left;
230
+ font-size: 24px;
231
+ }
232
+
233
+ &:before {
234
+ content: '\E5CC';
235
+ color: rgba(255,255,255, .7);
236
+ vertical-align: top;
237
+ display: inline-block;
238
+ font-family: 'Material Icons';
239
+ font-weight: normal;
240
+ font-style: normal;
241
+ font-size: 25px;
242
+ margin: 0 10px 0 8px;
243
+ -webkit-font-smoothing: antialiased;
244
+ }
245
+
246
+ &:first-child:before {
247
+ display: none;
248
+ }
249
+
250
+ &:last-child {
251
+ color: #fff;
252
+ }
253
+ }
254
+
255
+ // Parallax
256
+ .parallax-container {
257
+ position: relative;
258
+ overflow: hidden;
259
+ height: 500px;
260
+
261
+ .parallax {
262
+ position: absolute;
263
+ top: 0;
264
+ left: 0;
265
+ right: 0;
266
+ bottom: 0;
267
+ z-index: -1;
268
+
269
+ img {
270
+ opacity: 0;
271
+ position: absolute;
272
+ left: 50%;
273
+ bottom: 0;
274
+ min-width: 100%;
275
+ min-height: 100%;
276
+ transform: translate3d(0,0,0);
277
+ transform: translateX(-50%);
278
+ }
279
+ }
280
+ }
281
+
282
+ // Pushpin
283
+ .pin-top, .pin-bottom {
284
+ position: relative;
285
+ }
286
+ .pinned {
287
+ position: fixed !important;
288
+ }
289
+
290
+ /*********************
291
+ Transition Classes
292
+ **********************/
293
+
294
+ ul.staggered-list li {
295
+ opacity: 0;
296
+ }
297
+
298
+ .fade-in {
299
+ opacity: 0;
300
+ transform-origin: 0 50%;
301
+ }
302
+
303
+
304
+ /*********************
305
+ Media Query Classes
306
+ **********************/
307
+ .hide-on-small-only, .hide-on-small-and-down {
308
+ @media #{$small-and-down} {
309
+ display: none !important;
310
+ }
311
+ }
312
+ .hide-on-med-and-down {
313
+ @media #{$medium-and-down} {
314
+ display: none !important;
315
+ }
316
+ }
317
+ .hide-on-med-and-up {
318
+ @media #{$medium-and-up} {
319
+ display: none !important;
320
+ }
321
+ }
322
+ .hide-on-med-only {
323
+ @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
324
+ display: none !important;
325
+ }
326
+ }
327
+ .hide-on-large-only {
328
+ @media #{$large-and-up} {
329
+ display: none !important;
330
+ }
331
+ }
332
+ .hide-on-extra-large-only {
333
+ @media #{$extra-large-and-up} {
334
+ display: none !important;
335
+ }
336
+ }
337
+ .show-on-extra-large {
338
+ @media #{$extra-large-and-up} {
339
+ display: block !important;
340
+ }
341
+ }
342
+ .show-on-large {
343
+ @media #{$large-and-up} {
344
+ display: block !important;
345
+ }
346
+ }
347
+ .show-on-medium {
348
+ @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
349
+ display: block !important;
350
+ }
351
+ }
352
+ .show-on-small {
353
+ @media #{$small-and-down} {
354
+ display: block !important;
355
+ }
356
+ }
357
+ .show-on-medium-and-up {
358
+ @media #{$medium-and-up} {
359
+ display: block !important;
360
+ }
361
+ }
362
+ .show-on-medium-and-down {
363
+ @media #{$medium-and-down} {
364
+ display: block !important;
365
+ }
366
+ }
367
+
368
+
369
+ // Center text on mobile
370
+ .center-on-small-only {
371
+ @media #{$small-and-down} {
372
+ text-align: center;
373
+ }
374
+ }
375
+
376
+ // Footer
377
+ .page-footer {
378
+ padding-top: 20px;
379
+ color: $footer-font-color;
380
+ background-color: $footer-bg-color;
381
+
382
+ .footer-copyright {
383
+ overflow: hidden;
384
+ min-height: 50px;
385
+ display: flex;
386
+ align-items: center;
387
+ justify-content: space-between;
388
+ padding: 10px 0px;
389
+ color: $footer-copyright-font-color;
390
+ background-color: $footer-copyright-bg-color;
391
+ }
392
+ }
393
+
394
+ // Tables
395
+ table, th, td {
396
+ border: none;
397
+ }
398
+
399
+ table {
400
+ width:100%;
401
+ display: table;
402
+ border-collapse: collapse;
403
+ border-spacing: 0;
404
+
405
+ &.striped {
406
+ tr {
407
+ border-bottom: none;
408
+ }
409
+
410
+ > tbody {
411
+ > tr:nth-child(odd) {
412
+ background-color: $table-striped-color;
413
+ }
414
+
415
+ > tr > td {
416
+ border-radius: 0;
417
+ }
418
+ }
419
+ }
420
+
421
+ &.highlight > tbody > tr {
422
+ transition: background-color .25s ease;
423
+ &:hover {
424
+ background-color: $table-striped-color;
425
+ }
426
+ }
427
+
428
+ &.centered {
429
+ thead tr th, tbody tr td {
430
+ text-align: center;
431
+ }
432
+ }
433
+ }
434
+
435
+ tr {
436
+ border-bottom: 1px solid $table-border-color;
437
+ }
438
+
439
+ td, th{
440
+ padding: 15px 5px;
441
+ display: table-cell;
442
+ text-align: left;
443
+ vertical-align: middle;
444
+ border-radius: 2px;
445
+ }
446
+
447
+ // Responsive Table
448
+ @media #{$medium-and-down} {
449
+
450
+ table.responsive-table {
451
+ width: 100%;
452
+ border-collapse: collapse;
453
+ border-spacing: 0;
454
+ display: block;
455
+ position: relative;
456
+
457
+ td:empty:before {
458
+ content: '\00a0';
459
+ }
460
+
461
+ th,
462
+ td {
463
+ margin: 0;
464
+ vertical-align: top;
465
+ }
466
+
467
+ th { text-align: left; }
468
+ thead {
469
+ display: block;
470
+ float: left;
471
+
472
+ tr {
473
+ display: block;
474
+ padding: 0 10px 0 0;
475
+
476
+ th::before {
477
+ content: "\00a0";
478
+ }
479
+ }
480
+ }
481
+ tbody {
482
+ display: block;
483
+ width: auto;
484
+ position: relative;
485
+ overflow-x: auto;
486
+ white-space: nowrap;
487
+
488
+ tr {
489
+ display: inline-block;
490
+ vertical-align: top;
491
+ }
492
+ }
493
+ th {
494
+ display: block;
495
+ text-align: right;
496
+ }
497
+ td {
498
+ display: block;
499
+ min-height: 1.25em;
500
+ text-align: left;
501
+ }
502
+ tr {
503
+ border-bottom: none;
504
+ padding: 0 10px;
505
+ }
506
+
507
+ /* sort out borders */
508
+ thead {
509
+ border: 0;
510
+ border-right: 1px solid $table-border-color;
511
+ }
512
+ }
513
+
514
+ }
515
+
516
+
517
+ // Collections
518
+ .collection {
519
+ margin: $element-top-margin 0 $element-bottom-margin 0;
520
+ border: 1px solid $collection-border-color;
521
+ border-radius: 2px;
522
+ overflow: hidden;
523
+ position: relative;
524
+
525
+ .collection-item {
526
+ background-color: $collection-bg-color;
527
+ line-height: $collection-line-height;
528
+ padding: 10px 20px;
529
+ margin: 0;
530
+ border-bottom: 1px solid $collection-border-color;
531
+
532
+ // Avatar Collection
533
+ &.avatar {
534
+ min-height: 84px;
535
+ padding-left: 72px;
536
+ position: relative;
537
+
538
+ // Don't style circles inside preloader classes.
539
+ &:not(.circle-clipper) > .circle,
540
+ :not(.circle-clipper) > .circle {
541
+ position: absolute;
542
+ width: 42px;
543
+ height: 42px;
544
+ overflow: hidden;
545
+ left: 15px;
546
+ display: inline-block;
547
+ vertical-align: middle;
548
+ }
549
+ i.circle {
550
+ font-size: 18px;
551
+ line-height: 42px;
552
+ color: #fff;
553
+ background-color: #999;
554
+ text-align: center;
555
+ }
556
+
557
+
558
+ .title {
559
+ font-size: 16px;
560
+ }
561
+
562
+ p {
563
+ margin: 0;
564
+ }
565
+
566
+ .secondary-content {
567
+ position: absolute;
568
+ top: 16px;
569
+ right: 16px;
570
+ }
571
+
572
+ }
573
+
574
+
575
+ &:last-child {
576
+ border-bottom: none;
577
+ }
578
+
579
+ &.active {
580
+ background-color: $collection-active-bg-color;
581
+ color: $collection-active-color;
582
+
583
+ .secondary-content {
584
+ color: #fff;
585
+ }
586
+ }
587
+ }
588
+ a.collection-item{
589
+ display: block;
590
+ transition: .25s;
591
+ color: $collection-link-color;
592
+ &:not(.active) {
593
+ &:hover {
594
+ background-color: $collection-hover-bg-color;
595
+ }
596
+ }
597
+ }
598
+
599
+ &.with-header {
600
+ .collection-header {
601
+ background-color: $collection-bg-color;
602
+ border-bottom: 1px solid $collection-border-color;
603
+ padding: 10px 20px;
604
+ }
605
+ .collection-item {
606
+ padding-left: 30px;
607
+ }
608
+ .collection-item.avatar {
609
+ padding-left: 72px;
610
+ }
611
+ }
612
+
613
+ }
614
+ // Made less specific to allow easier overriding
615
+ .secondary-content {
616
+ float: right;
617
+ color: $secondary-color;
618
+ }
619
+ .collapsible .collection {
620
+ margin: 0;
621
+ border: none;
622
+ }
623
+
624
+
625
+
626
+ // Responsive Videos
627
+ .video-container {
628
+ position: relative;
629
+ padding-bottom: 56.25%;
630
+ height: 0;
631
+ overflow: hidden;
632
+
633
+ iframe, object, embed {
634
+ position: absolute;
635
+ top: 0;
636
+ left: 0;
637
+ width: 100%;
638
+ height: 100%;
639
+ }
640
+ }
641
+
642
+ // Progress Bar
643
+ .progress {
644
+ position: relative;
645
+ height: 4px;
646
+ display: block;
647
+ width: 100%;
648
+ background-color: lighten($progress-bar-color, 40%);
649
+ border-radius: 2px;
650
+ margin: $element-top-margin 0 $element-bottom-margin 0;
651
+ overflow: hidden;
652
+ .determinate {
653
+ position: absolute;
654
+ top: 0;
655
+ left: 0;
656
+ bottom: 0;
657
+ background-color: $progress-bar-color;
658
+ transition: width .3s linear;
659
+ }
660
+ .indeterminate {
661
+ background-color: $progress-bar-color;
662
+ &:before {
663
+ content: '';
664
+ position: absolute;
665
+ background-color: inherit;
666
+ top: 0;
667
+ left:0;
668
+ bottom: 0;
669
+ will-change: left, right;
670
+ // Custom bezier
671
+ animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
672
+
673
+ }
674
+ &:after {
675
+ content: '';
676
+ position: absolute;
677
+ background-color: inherit;
678
+ top: 0;
679
+ left:0;
680
+ bottom: 0;
681
+ will-change: left, right;
682
+ // Custom bezier
683
+ animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
684
+ animation-delay: 1.15s;
685
+ }
686
+ }
687
+ }
688
+ @keyframes indeterminate {
689
+ 0% {
690
+ left: -35%;
691
+ right:100%;
692
+ }
693
+ 60% {
694
+ left: 100%;
695
+ right: -90%;
696
+ }
697
+ 100% {
698
+ left: 100%;
699
+ right: -90%;
700
+ }
701
+ }
702
+
703
+ @keyframes indeterminate-short {
704
+ 0% {
705
+ left: -200%;
706
+ right: 100%;
707
+ }
708
+ 60% {
709
+ left: 107%;
710
+ right: -8%;
711
+ }
712
+ 100% {
713
+ left: 107%;
714
+ right: -8%;
715
+ }
716
+ }
717
+
718
+
719
+ /*******************
720
+ Utility Classes
721
+ *******************/
722
+
723
+ .hide {
724
+ display: none !important;
725
+ }
726
+
727
+ // Text Align
728
+ .left-align {
729
+ text-align: left;
730
+ }
731
+ .right-align {
732
+ text-align: right
733
+ }
734
+ .center, .center-align {
735
+ text-align: center;
736
+ }
737
+
738
+ .left {
739
+ float: left !important;
740
+ }
741
+ .right {
742
+ float: right !important;
743
+ }
744
+
745
+ // No Text Select
746
+ .no-select {
747
+ user-select: none;
748
+ }
749
+
750
+ .circle {
751
+ border-radius: 50%;
752
+ }
753
+
754
+ .center-block {
755
+ display: block;
756
+ margin-left: auto;
757
+ margin-right: auto;
758
+ }
759
+
760
+ .truncate {
761
+ display: block;
762
+ white-space: nowrap;
763
+ overflow: hidden;
764
+ text-overflow: ellipsis;
765
+ }
766
+
767
+ .no-padding {
768
+ padding: 0 !important;
769
+ }