materialize-sass 0.95.3 → 0.95.3.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,707 +1,665 @@
1
- @charset "UTF-8";
2
-
3
-
4
- //Default styles
5
-
6
- html {
7
- box-sizing: border-box;
8
- }
9
- *, *:before, *:after {
10
- box-sizing: inherit;
11
- }
12
-
13
- body {
14
- // display: flex;
15
- // min-height: 100vh;
16
- // flex-direction: column;
17
- }
18
-
19
- main {
20
- // flex: 1 0 auto;
21
- }
22
-
23
- ul {
24
- list-style-type: none;
25
- }
26
-
27
- a {
28
- color: $link-color;
29
- text-decoration: none;
30
- -webkit-tap-highlight-color: transparent;
31
- }
32
-
33
-
34
- // Positioning
35
- .valign-wrapper {
36
- @include flexbox();
37
- @include align(center);
38
- align-items: center;
39
- // @include justify-content(center);
40
-
41
- .valign {
42
- display: block;
43
- }
44
- }
45
-
46
-
47
- ul {
48
- padding: 0;
49
- li {
50
- list-style-type: none;
51
- }
52
- }
53
-
54
- // classic clearfix
55
- .clearfix {
56
- clear: both;
57
- }
58
-
59
-
60
- // Z-levels
61
-
62
- .z-depth-1{
63
- @include box-shadow-2(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12));
64
- }
65
- .z-depth-1-half{
66
- @include box-shadow-2(0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15));
67
- }
68
- .z-depth-2{
69
- @include box-shadow-2(0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19));
70
- }
71
- .z-depth-3{
72
- @include box-shadow-2(0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19));
73
- }
74
- .z-depth-4{
75
- @include box-shadow-2(0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21));
76
- }
77
- .z-depth-5{
78
- @include box-shadow-2(0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22));
79
- }
80
-
81
- // Dividers
82
-
83
- .divider {
84
- height: 1px;
85
- overflow: hidden;
86
- background-color: color("grey", "lighten-2");
87
- }
88
-
89
-
90
- // Blockquote
91
-
92
- blockquote {
93
- margin: 20px 0;
94
- padding-left: 1.5rem;
95
- border-left: 5px solid color("red", "lighten-3");
96
- }
97
-
98
- // Icon Styles
99
-
100
- i {
101
- line-height: inherit;
102
-
103
- &.left {
104
- float: left;
105
- margin-right: 15px;
106
- }
107
- &.right {
108
- float: right;
109
- margin-left: 15px;
110
- }
111
- &.tiny {
112
- font-size: 1rem;
113
- }
114
- &.small {
115
- font-size: 2rem;
116
- }
117
- &.medium {
118
- font-size: 4rem;
119
- }
120
- &.large {
121
- font-size: 6rem;
122
- }
123
- }
124
-
125
- // Images
126
- img.responsive-img,
127
- video.responsive-video {
128
- max-width: 100%;
129
- height: auto;
130
- }
131
-
132
-
133
-
134
-
135
- // parallax
136
- .parallax-container {
137
- position: relative;
138
- overflow: hidden;
139
- height: 500px;
140
- }
141
-
142
- .parallax {
143
- position: absolute;
144
- top: 0;
145
- left: 0;
146
- right: 0;
147
- bottom: 0;
148
- z-index: -1;
149
-
150
- img {
151
- display: none;
152
- position: absolute;
153
- bottom: 0;
154
- width: 100%;
155
- min-height: 100%;
156
- background-position: center;
157
- }
158
- }
159
- @media #{$medium-and-down} {
160
- .parallax-container {
161
- height: auto;
162
- }
163
- .parallax {
164
- position: relative;
165
- width: 100%;
166
-
167
- img {
168
- position: relative;
169
- }
170
- }
171
- }
172
-
173
-
174
- // Pushpin
175
- .pin-top, .pin-bottom {
176
- position: relative;
177
- }
178
- .pinned {
179
- position: fixed !important;
180
- }
181
-
182
- /*********************
183
- Transition Classes
184
- **********************/
185
-
186
- ul.staggered-list li {
187
- @include opacity(0);
188
- }
189
-
190
- .fade-in {
191
- @include opacity(0);
192
- transform-origin: 0 50%;
193
- }
194
-
195
-
196
- /*********************
197
- Media Query Classes
198
- **********************/
199
- .hide-on-small-only, .hide-on-small-and-down {
200
- @media #{$small-and-down} {
201
- display: none !important;
202
- }
203
- }
204
- .hide-on-med-and-down {
205
- @media #{$medium-and-down} {
206
- display: none !important;
207
- }
208
- }
209
- .hide-on-med-and-up {
210
- @media #{$medium-and-up} {
211
- display: none !important;
212
- }
213
- }
214
- .hide-on-med-only {
215
- @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
216
- display: none !important;
217
- }
218
- }
219
- .hide-on-large-only {
220
- @media #{$large-and-up} {
221
- display: none !important;
222
- }
223
- }
224
- .show-on-large {
225
- @media #{$large-and-up} {
226
- display: initial !important;
227
- }
228
- }
229
- .show-on-medium {
230
- @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
231
- display: initial !important;
232
- }
233
- }
234
- .show-on-small {
235
- @media #{$small-and-down} {
236
- display: initial !important;
237
- }
238
- }
239
- .show-on-medium-and-up {
240
- @media #{$medium-and-up} {
241
- display: initial !important;
242
- }
243
- }
244
- .show-on-medium-and-down {
245
- @media #{$medium-and-down} {
246
- display: initial !important;
247
- }
248
- }
249
-
250
-
251
- // Center text on mobile
252
- .center-on-small-only {
253
- @media #{$small-and-down} {
254
- text-align: center;
255
- }
256
- }
257
-
258
- // Footer
259
- footer.page-footer {
260
- margin-top: 20px;
261
- padding-top: 20px;
262
- background-color: $footer-bg-color;
263
-
264
- .footer-copyright {
265
- overflow: hidden;
266
- height: 50px;
267
- line-height: 50px;
268
- color: rgba(255,255,255,.8);
269
- background-color: rgba(51,51,51,.08);;
270
- @extend .light;
271
- }
272
- }
273
-
274
- // Tables
275
- table, th, td {
276
- border: none;
277
- }
278
-
279
- table {
280
- width:100%;
281
- display: table;
282
-
283
- &.bordered tr {
284
- border-bottom: 1px solid $table-border-color;
285
- }
286
-
287
- &.striped {
288
- tbody tr:nth-child(odd) {
289
- background-color: $table-striped-color;
290
- }
291
- }
292
-
293
- &.hoverable {
294
-
295
- tbody tr {
296
- @include transition(background-color .25s ease);
297
- &:hover {
298
- background-color: $table-striped-color;
299
- }
300
- }
301
- }
302
-
303
- &.centered {
304
- thead tr th, tbody tr td {
305
- text-align: center;
306
-
307
- }
308
- }
309
-
310
- }
311
-
312
- thead {
313
- border-bottom: 1px solid $table-border-color;
314
- }
315
-
316
- td, th {
317
- padding: 15px 5px;
318
- display: table-cell;
319
- text-align: left;
320
- vertical-align: middle;
321
- border-radius: 2px;
322
- -webkit-border-radius: 2px;
323
- -moz-border-radius: 2px;
324
- border-radius: 2px;
325
- background-clip: padding-box;
326
- }
327
-
328
- // Responsive Table
329
- @media #{$medium-and-down} {
330
-
331
- table.responsive-table {
332
- width: 100%;
333
- border-collapse: collapse;
334
- border-spacing: 0;
335
- display: block;
336
- position: relative;
337
-
338
- th,
339
- td {
340
- margin: 0;
341
- vertical-align: top;
342
- }
343
-
344
- th { text-align: left; }
345
- thead {
346
- display: block;
347
- float: left;
348
-
349
- tr {
350
- display: block;
351
- padding: 0 10px 0 0;
352
- }
353
- }
354
- tbody {
355
- display: block;
356
- width: auto;
357
- position: relative;
358
- overflow-x: auto;
359
- white-space: nowrap;
360
-
361
- tr {
362
- display: inline-block;
363
- vertical-align: top;
364
- }
365
- }
366
- th {
367
- display: block;
368
- text-align: right;
369
- }
370
- td {
371
- display: block;
372
- min-height: 1.25em;
373
- text-align: left;
374
- }
375
- tr { padding: 0 10px; }
376
-
377
- /* sort out borders */
378
- thead {
379
- border: 0;
380
- border-right: 1px solid $table-border-color;
381
- }
382
-
383
- &.bordered {
384
- th { border-bottom: 0; border-left: 0; }
385
- td { border-left: 0; border-right: 0; border-bottom: 0; }
386
- tr { border: 0; }
387
- tbody tr { border-right: 1px solid $table-border-color; }
388
- }
389
-
390
- }
391
-
392
- }
393
-
394
-
395
- // Collections
396
- .collection {
397
- background-color: $collection-bg-color;
398
- margin: $element-top-margin 0 $element-bottom-margin 0;
399
- border: 1px solid $collection-border-color;
400
- border-radius: 2px;
401
- -webkit-border-radius: 2px;
402
- -moz-border-radius: 2px;
403
- background-clip: padding-box;
404
- overflow: hidden;
405
-
406
- .collection-item {
407
- background-color: $collection-item-color;
408
- line-height: 1.5rem;
409
- padding: 10px 20px;
410
- margin: 0px;
411
- border-bottom: 1px solid $collection-border-color;
412
- &.avatar {
413
- height: 84px;
414
- padding-left: 72px;
415
- position: relative;
416
- .circle {
417
- position: absolute;
418
- width: 42px;
419
- height: 42px;
420
- overflow: hidden;
421
- left: 15px;
422
- display: inline-block;
423
- vertical-align: middle;
424
- }
425
- i.circle {
426
- font-size: 18px;
427
- line-height: 42px;
428
- color: #fff;
429
- background-color: #999;
430
- text-align: center;
431
- }
432
- .title {
433
- font-size: 16px;
434
- }
435
- p {
436
- margin: 0;
437
- }
438
- .secondary-content {
439
- position: absolute;
440
- top: 16px;
441
- right: 16px;
442
- }
443
- }
444
- &:last-child {
445
- border-bottom: none;
446
- }
447
-
448
- &.active {
449
- background-color: $collection-active-bg-color;
450
- color: $collection-active-color;
451
- }
452
- }
453
- a.collection-item{
454
- display: block;
455
- @include transition(.25s);
456
- color: $secondary-color;
457
- &:not(.active) {
458
- &:hover {
459
- background-color: $collection-hover-bg-color;
460
- }
461
- }
462
- }
463
-
464
- &.with-header {
465
- .collection-header {
466
- background-color: $collection-header-color;
467
- border-bottom: 1px solid $collection-border-color;
468
- padding: 10px 20px;
469
- }
470
- .collection-item {
471
- padding-left: 30px;
472
- }
473
- }
474
-
475
-
476
-
477
- //Pagination
478
- // &.pagination {
479
- // display: inline-block;
480
-
481
- // ul{
482
- // background-color: transparent;
483
- // font-size: 0;
484
- // display: inline-block;
485
- // }
486
- // li {
487
- // // display: inline;
488
- // // font-weight: 500;
489
- // // margin: 0px;
490
- // // padding: 0px;
491
- // // font-size: 1rem;
492
-
493
- // font-size: 1.2rem;
494
- // float: left;
495
- // width: 30px;
496
- // height: 30px;
497
- // margin: 0 10px;
498
- // -webkit-border-radius: 2px;
499
- // -moz-border-radius: 2px;
500
- // border-radius: 2px;
501
- // background-clip: padding-box;
502
- // text-align: center;
503
-
504
- // a {
505
- // color: #444;
506
- // }
507
- // &.active a {
508
- // color: #fff;
509
- // }
510
- // &.active {
511
- // background-color: #ee6e73;
512
- // }
513
- // &.disabled a {
514
- // color: #999;
515
- // }
516
- // i {
517
- // font-size: 2rem;
518
- // line-height: 1.8rem;
519
- // }
520
- // }
521
-
522
- // a {
523
- // padding: 0px 5px;
524
- // }
525
- // &.active {
526
- // background-color: color('light-blue', 'base');
527
- // color: #FFF;
528
- // }
529
- // &:hover {
530
- // background-color: color('light-blue', 'lighten-5');
531
- // }
532
- // }
533
- // }
534
- }
535
-
536
- // Made less specific to allow easier overriding
537
- .secondary-content {
538
- float: right;
539
- color: $secondary-color;
540
- }
541
-
542
-
543
- // Badges
544
- span.badge {
545
- min-width: 3rem;
546
- padding: 0 6px;
547
- text-align: center;
548
- font-size: 1rem;
549
- line-height: inherit;
550
- color: color('grey', 'darken-1');
551
- float: right;
552
- @include box-sizing(border-box);
553
-
554
- &.new {
555
- font-weight: 300;
556
- font-size: 0.8rem;
557
- color: #fff;
558
- background-color: $badge-bg-color;
559
- @include border-radius(2px);
560
- }
561
- &.new:after {
562
- content: " new";
563
- }
564
- }
565
-
566
- // Responsive Videos
567
- .video-container {
568
- position: relative;
569
- padding-bottom: 56.25%;
570
- padding-top: 30px;
571
- height: 0;
572
- overflow: hidden;
573
-
574
- iframe, object, embed {
575
- position: absolute;
576
- top: 0;
577
- left: 0;
578
- width: 100%;
579
- height: 100%;
580
- }
581
- }
582
-
583
- // Progress Bar
584
- .progress {
585
- position: relative;
586
- height: 4px;
587
- display: block;
588
- width: 100%;
589
- background-color: lighten($progress-bar-color, 40%);
590
- @include border-radius(2px);
591
- margin: $element-top-margin 0 $element-bottom-margin 0;
592
- overflow: hidden;
593
- .determinate {
594
- position: absolute;
595
- background-color: inherit;
596
- top: 0;
597
- bottom: 0;
598
- background-color: $progress-bar-color;
599
- @include transition(width .3s linear);
600
- }
601
- .indeterminate {
602
- background-color: $progress-bar-color;
603
- &:before {
604
- content: '';
605
- position: absolute;
606
- background-color: inherit;
607
- top: 0;
608
- left:0;
609
- bottom: 0;
610
- will-change: left, right;
611
- // Custom bezier
612
- @include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite);
613
-
614
- }
615
- &:after {
616
- content: '';
617
- position: absolute;
618
- background-color: inherit;
619
- top: 0;
620
- left:0;
621
- bottom: 0;
622
- will-change: left, right;
623
- // Custom bezier
624
- @include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
625
- @include animation-delay(1.15s);
626
- }
627
- }
628
- }
629
- @include keyframes(indeterminate) {
630
- 0% {
631
- left: -35%;
632
- right:100%;
633
- }
634
- 60% {
635
- left: 100%;
636
- right: -90%;
637
- }
638
- 100% {
639
- left: 100%;
640
- right: -90%;
641
- }
642
- }
643
-
644
- @include keyframes(indeterminate-short) {
645
- 0% {
646
- left: -200%;
647
- right: 100%;
648
- }
649
- 60% {
650
- left: 107%;
651
- right: -8%;
652
- }
653
- 100% {
654
- left: 107%;
655
- right: -8%;
656
- }
657
- }
658
-
659
-
660
- /*******************
661
- Utility Classes
662
- *******************/
663
-
664
- // Text Align
665
- .left-align {
666
- text-align: left;
667
- }
668
- .right-align {
669
- text-align: right
670
- }
671
- .center, .center-align {
672
- text-align: center;
673
- }
674
-
675
- .left {
676
- float: left !important;
677
- }
678
- .right {
679
- float: right !important;
680
- }
681
-
682
- // No Text Select
683
- .no-select {
684
- -webkit-touch-callout: none;
685
- -webkit-user-select: none;
686
- -khtml-user-select: none;
687
- -moz-user-select: none;
688
- -ms-user-select: none;
689
- user-select: none;
690
- }
691
-
692
- // Circle
693
- .circle {
694
- @include border-radius(50%);
695
- }
696
-
697
- .center-block {
698
- display: block;
699
- margin-left: auto;
700
- margin-right: auto;
701
- }
702
-
703
- .truncate {
704
- white-space: nowrap;
705
- overflow: hidden;
706
- text-overflow: ellipsis;
707
- }
1
+ @charset "UTF-8";
2
+
3
+
4
+ //Default styles
5
+
6
+ html {
7
+ box-sizing: border-box;
8
+ }
9
+ *, *:before, *:after {
10
+ box-sizing: inherit;
11
+ }
12
+
13
+ body {
14
+ // display: flex;
15
+ // min-height: 100vh;
16
+ // flex-direction: column;
17
+ }
18
+
19
+ main {
20
+ // flex: 1 0 auto;
21
+ }
22
+
23
+ ul {
24
+ list-style-type: none;
25
+ }
26
+
27
+ a {
28
+ color: $link-color;
29
+ text-decoration: none;
30
+
31
+ // Gets rid of tap active state
32
+ -webkit-tap-highlight-color: transparent;
33
+ }
34
+
35
+
36
+ // Positioning
37
+ .valign-wrapper {
38
+ @include flexbox();
39
+ @include align(center);
40
+
41
+ .valign {
42
+ display: block;
43
+ }
44
+ }
45
+
46
+
47
+ ul {
48
+ padding: 0;
49
+ li {
50
+ list-style-type: none;
51
+ }
52
+ }
53
+
54
+ // classic clearfix
55
+ .clearfix {
56
+ clear: both;
57
+ }
58
+
59
+
60
+ // Z-levels
61
+
62
+ .z-depth-1{
63
+ @include box-shadow-2(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12));
64
+ }
65
+ .z-depth-1-half{
66
+ @include box-shadow-2(0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15));
67
+ }
68
+ .z-depth-2{
69
+ @include box-shadow-2(0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19));
70
+ }
71
+ .z-depth-3{
72
+ @include box-shadow-2(0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19));
73
+ }
74
+ .z-depth-4{
75
+ @include box-shadow-2(0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21));
76
+ }
77
+ .z-depth-5{
78
+ @include box-shadow-2(0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22));
79
+ }
80
+
81
+ // Dividers
82
+
83
+ .divider {
84
+ height: 1px;
85
+ overflow: hidden;
86
+ background-color: color("grey", "lighten-2");
87
+ }
88
+
89
+
90
+ // Blockquote
91
+
92
+ blockquote {
93
+ margin: 20px 0;
94
+ padding-left: 1.5rem;
95
+ border-left: 5px solid color("red", "lighten-3");
96
+ }
97
+
98
+ // Icon Styles
99
+
100
+ i {
101
+ line-height: inherit;
102
+
103
+ &.left {
104
+ float: left;
105
+ margin-right: 15px;
106
+ }
107
+ &.right {
108
+ float: right;
109
+ margin-left: 15px;
110
+ }
111
+ &.tiny {
112
+ font-size: 1rem;
113
+ }
114
+ &.small {
115
+ font-size: 2rem;
116
+ }
117
+ &.medium {
118
+ font-size: 4rem;
119
+ }
120
+ &.large {
121
+ font-size: 6rem;
122
+ }
123
+ }
124
+
125
+ // Images
126
+ img.responsive-img,
127
+ video.responsive-video {
128
+ max-width: 100%;
129
+ height: auto;
130
+ }
131
+
132
+
133
+ // Pagination
134
+
135
+ .pagination {
136
+
137
+ li {
138
+ font-size: 1.2rem;
139
+ float: left;
140
+ width: 30px;
141
+ height: 30px;
142
+ margin: 0 10px;
143
+ @include border-radius(2px);
144
+ text-align: center;
145
+
146
+ a { color: #444; }
147
+
148
+ &.active a { color: #fff; }
149
+
150
+ &.active { background-color: $primary-color; }
151
+
152
+ &.disabled a { color: #999; }
153
+
154
+ i {
155
+ font-size: 2rem;
156
+ line-height: 1.8rem;
157
+ }
158
+ }
159
+ }
160
+
161
+
162
+ // Parallax
163
+ .parallax-container {
164
+ position: relative;
165
+ overflow: hidden;
166
+ height: 500px;
167
+ }
168
+
169
+ .parallax {
170
+ position: absolute;
171
+ top: 0;
172
+ left: 0;
173
+ right: 0;
174
+ bottom: 0;
175
+ z-index: -1;
176
+
177
+ img {
178
+ display: none;
179
+ position: absolute;
180
+ bottom: 0;
181
+ width: 100%;
182
+ min-height: 100%;
183
+ background-size: 100% auto;
184
+ background-position: center;
185
+ background-repeat: no-repeat;
186
+ }
187
+ }
188
+
189
+ // Pushpin
190
+ .pin-top, .pin-bottom {
191
+ position: relative;
192
+ }
193
+ .pinned {
194
+ position: fixed !important;
195
+ }
196
+
197
+ /*********************
198
+ Transition Classes
199
+ **********************/
200
+
201
+ ul.staggered-list li {
202
+ @include opacity(0);
203
+ }
204
+
205
+ .fade-in {
206
+ @include opacity(0);
207
+ transform-origin: 0 50%;
208
+ }
209
+
210
+
211
+ /*********************
212
+ Media Query Classes
213
+ **********************/
214
+ .hide-on-small-only, .hide-on-small-and-down {
215
+ @media #{$small-and-down} {
216
+ display: none !important;
217
+ }
218
+ }
219
+ .hide-on-med-and-down {
220
+ @media #{$medium-and-down} {
221
+ display: none !important;
222
+ }
223
+ }
224
+ .hide-on-med-and-up {
225
+ @media #{$medium-and-up} {
226
+ display: none !important;
227
+ }
228
+ }
229
+ .hide-on-med-only {
230
+ @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
231
+ display: none !important;
232
+ }
233
+ }
234
+ .hide-on-large-only {
235
+ @media #{$large-and-up} {
236
+ display: none !important;
237
+ }
238
+ }
239
+ .show-on-large {
240
+ @media #{$large-and-up} {
241
+ display: initial !important;
242
+ }
243
+ }
244
+ .show-on-medium {
245
+ @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
246
+ display: initial !important;
247
+ }
248
+ }
249
+ .show-on-small {
250
+ @media #{$small-and-down} {
251
+ display: initial !important;
252
+ }
253
+ }
254
+ .show-on-medium-and-up {
255
+ @media #{$medium-and-up} {
256
+ display: initial !important;
257
+ }
258
+ }
259
+ .show-on-medium-and-down {
260
+ @media #{$medium-and-down} {
261
+ display: initial !important;
262
+ }
263
+ }
264
+
265
+
266
+ // Center text on mobile
267
+ .center-on-small-only {
268
+ @media #{$small-and-down} {
269
+ text-align: center;
270
+ }
271
+ }
272
+
273
+ // Footer
274
+ footer.page-footer {
275
+ margin-top: 20px;
276
+ padding-top: 20px;
277
+ background-color: $footer-bg-color;
278
+
279
+ .footer-copyright {
280
+ overflow: hidden;
281
+ height: 50px;
282
+ line-height: 50px;
283
+ color: rgba(255,255,255,.8);
284
+ background-color: rgba(51,51,51,.08);;
285
+ @extend .light;
286
+ }
287
+ }
288
+
289
+ // Tables
290
+ table, th, td {
291
+ border: none;
292
+ }
293
+
294
+ table {
295
+ width:100%;
296
+ display: table;
297
+
298
+ &.bordered tr {
299
+ border-bottom: 1px solid $table-border-color;
300
+ }
301
+
302
+ &.striped {
303
+ tbody tr:nth-child(odd) {
304
+ background-color: $table-striped-color;
305
+ }
306
+ }
307
+
308
+ &.hoverable {
309
+
310
+ tbody tr {
311
+ @include transition(background-color .25s ease);
312
+ &:hover {
313
+ background-color: $table-striped-color;
314
+ }
315
+ }
316
+ }
317
+
318
+ &.centered {
319
+ thead tr th, tbody tr td {
320
+ text-align: center;
321
+
322
+ }
323
+ }
324
+
325
+ }
326
+
327
+ thead {
328
+ border-bottom: 1px solid $table-border-color;
329
+ }
330
+
331
+ td, th{
332
+ padding: 15px 5px;
333
+ display: table-cell;
334
+ text-align: left;
335
+ vertical-align: middle;
336
+ @include border-radius(2px);
337
+ }
338
+
339
+ // Responsive Table
340
+ @media #{$medium-and-down} {
341
+
342
+ table.responsive-table {
343
+ width: 100%;
344
+ border-collapse: collapse;
345
+ border-spacing: 0;
346
+ display: block;
347
+ position: relative;
348
+
349
+ th,
350
+ td {
351
+ margin: 0;
352
+ vertical-align: top;
353
+ }
354
+
355
+ th { text-align: left; }
356
+ thead {
357
+ display: block;
358
+ float: left;
359
+
360
+ tr {
361
+ display: block;
362
+ padding: 0 10px 0 0;
363
+ }
364
+ }
365
+ tbody {
366
+ display: block;
367
+ width: auto;
368
+ position: relative;
369
+ overflow-x: auto;
370
+ white-space: nowrap;
371
+
372
+ tr {
373
+ display: inline-block;
374
+ vertical-align: top;
375
+ }
376
+ }
377
+ th {
378
+ display: block;
379
+ text-align: right;
380
+ }
381
+ td {
382
+ display: block;
383
+ min-height: 1.25em;
384
+ text-align: left;
385
+ }
386
+ tr { padding: 0 10px; }
387
+
388
+ /* sort out borders */
389
+ thead {
390
+ border: 0;
391
+ border-right: 1px solid $table-border-color;
392
+ }
393
+
394
+ &.bordered {
395
+ th { border-bottom: 0; border-left: 0; }
396
+ td { border-left: 0; border-right: 0; border-bottom: 0; }
397
+ tr { border: 0; }
398
+ tbody tr { border-right: 1px solid $table-border-color; }
399
+ }
400
+
401
+ }
402
+
403
+ }
404
+
405
+
406
+ // Collections
407
+ .collection {
408
+ background-color: #999;
409
+ margin: $element-top-margin 0 $element-bottom-margin 0;
410
+ border: 1px solid $collection-border-color;
411
+ @include border-radius(2px);
412
+ overflow: hidden;
413
+
414
+ .collection-item {
415
+ background-color: $collection-bg-color;
416
+ line-height: 1.5rem;
417
+ padding: 10px 20px;
418
+ margin: 0px;
419
+ border-bottom: 1px solid $collection-border-color;
420
+
421
+ // Avatar Collection
422
+ &.avatar {
423
+ height: 84px;
424
+ padding-left: 72px;
425
+ position: relative;
426
+
427
+ .circle {
428
+ position: absolute;
429
+ width: 42px;
430
+ height: 42px;
431
+ overflow: hidden;
432
+ left: 15px;
433
+ display: inline-block;
434
+ vertical-align: middle;
435
+ }
436
+ i.circle {
437
+ font-size: 18px;
438
+ line-height: 42px;
439
+ color: #fff;
440
+ background-color: #999;
441
+ text-align: center;
442
+ }
443
+
444
+
445
+ .title {
446
+ font-size: 16px;
447
+ }
448
+
449
+ p {
450
+ margin: 0;
451
+ }
452
+
453
+ .secondary-content {
454
+ position: absolute;
455
+ top: 16px;
456
+ right: 16px;
457
+ }
458
+
459
+ }
460
+
461
+
462
+ &:last-child {
463
+ border-bottom: none;
464
+ }
465
+
466
+ &.active {
467
+ background-color: $collection-active-bg-color;
468
+ color: $collection-active-color;
469
+ }
470
+ }
471
+ a.collection-item{
472
+ display: block;
473
+ @include transition(.25s);
474
+ color: $secondary-color;
475
+ &:not(.active) {
476
+ &:hover {
477
+ background-color: $collection-hover-bg-color;
478
+ }
479
+ }
480
+ }
481
+
482
+ &.with-header {
483
+ .collection-header {
484
+ background-color: $collection-bg-color;
485
+ border-bottom: 1px solid $collection-border-color;
486
+ padding: 10px 20px;
487
+ }
488
+ .collection-item {
489
+ padding-left: 30px;
490
+ }
491
+ }
492
+
493
+ }
494
+ // Made less specific to allow easier overriding
495
+ .secondary-content {
496
+ float: right;
497
+ color: $secondary-color;
498
+ }
499
+
500
+
501
+ // Badges
502
+ span.badge {
503
+ min-width: 3rem;
504
+ padding: 0 6px;
505
+ text-align: center;
506
+ font-size: 1rem;
507
+ line-height: inherit;
508
+ color: color('grey', 'darken-1');
509
+ float: right;
510
+ @include box-sizing(border-box);
511
+
512
+ &.new {
513
+ font-weight: 300;
514
+ font-size: 0.8rem;
515
+ color: #fff;
516
+ background-color: $badge-bg-color;
517
+ @include border-radius(2px);
518
+ }
519
+ &.new:after {
520
+ content: " new";
521
+ }
522
+ }
523
+
524
+ // Responsive Videos
525
+ .video-container {
526
+ position: relative;
527
+ padding-bottom: 56.25%;
528
+ padding-top: 30px;
529
+ height: 0;
530
+ overflow: hidden;
531
+
532
+ iframe, object, embed {
533
+ position: absolute;
534
+ top: 0;
535
+ left: 0;
536
+ width: 100%;
537
+ height: 100%;
538
+ }
539
+ }
540
+
541
+ // Progress Bar
542
+ .progress {
543
+ position: relative;
544
+ height: 4px;
545
+ display: block;
546
+ width: 100%;
547
+ background-color: lighten($progress-bar-color, 40%);
548
+ @include border-radius(2px);
549
+ margin: $element-top-margin 0 $element-bottom-margin 0;
550
+ overflow: hidden;
551
+ .determinate {
552
+ position: absolute;
553
+ background-color: inherit;
554
+ top: 0;
555
+ bottom: 0;
556
+ background-color: $progress-bar-color;
557
+ @include transition(width .3s linear);
558
+ }
559
+ .indeterminate {
560
+ background-color: $progress-bar-color;
561
+ &:before {
562
+ content: '';
563
+ position: absolute;
564
+ background-color: inherit;
565
+ top: 0;
566
+ left:0;
567
+ bottom: 0;
568
+ will-change: left, right;
569
+ // Custom bezier
570
+ @include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite);
571
+
572
+ }
573
+ &:after {
574
+ content: '';
575
+ position: absolute;
576
+ background-color: inherit;
577
+ top: 0;
578
+ left:0;
579
+ bottom: 0;
580
+ will-change: left, right;
581
+ // Custom bezier
582
+ @include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
583
+ @include animation-delay(1.15s);
584
+ }
585
+ }
586
+ }
587
+ @include keyframes(indeterminate) {
588
+ 0% {
589
+ left: -35%;
590
+ right:100%;
591
+ }
592
+ 60% {
593
+ left: 100%;
594
+ right: -90%;
595
+ }
596
+ 100% {
597
+ left: 100%;
598
+ right: -90%;
599
+ }
600
+ }
601
+
602
+ @include keyframes(indeterminate-short) {
603
+ 0% {
604
+ left: -200%;
605
+ right: 100%;
606
+ }
607
+ 60% {
608
+ left: 107%;
609
+ right: -8%;
610
+ }
611
+ 100% {
612
+ left: 107%;
613
+ right: -8%;
614
+ }
615
+ }
616
+
617
+
618
+ /*******************
619
+ Utility Classes
620
+ *******************/
621
+
622
+ // Text Align
623
+ .left-align {
624
+ text-align: left;
625
+ }
626
+ .right-align {
627
+ text-align: right
628
+ }
629
+ .center, .center-align {
630
+ text-align: center;
631
+ }
632
+
633
+ .left {
634
+ float: left !important;
635
+ }
636
+ .right {
637
+ float: right !important;
638
+ }
639
+
640
+ // No Text Select
641
+ .no-select {
642
+ -webkit-touch-callout: none;
643
+ -webkit-user-select: none;
644
+ -khtml-user-select: none;
645
+ -moz-user-select: none;
646
+ -ms-user-select: none;
647
+ user-select: none;
648
+ }
649
+
650
+ // Circle
651
+ .circle {
652
+ @include border-radius(50%);
653
+ }
654
+
655
+ .center-block {
656
+ display: block;
657
+ margin-left: auto;
658
+ margin-right: auto;
659
+ }
660
+
661
+ .truncate {
662
+ white-space: nowrap;
663
+ overflow: hidden;
664
+ text-overflow: ellipsis;
665
+ }