commonroutesServer/app/www/lib/ionic/scss/_items.scss
app/www/lib/ionic/scss/_items.scssRaw
1/**
2 * Items
3 * --------------------------------------------------
4 */
5
6.item {
7 @include item-style($item-default-bg, $item-default-border, $item-default-text);
8
9 position: relative;
10 z-index: $z-index-item; // Make sure the borders and stuff don't get hidden by children
11 display: block;
12
13 margin: $item-border-width * -1;
14 padding: $item-padding;
15
16 border-width: $item-border-width;
17 border-style: solid;
18 font-size: $item-font-size;
19
20 h2 {
21 margin: 0 0 2px 0;
22 font-size: 16px;
23 font-weight: normal;
24 }
25 h3 {
26 margin: 0 0 4px 0;
27 font-size: 14px;
28 }
29 h4 {
30 margin: 0 0 4px 0;
31 font-size: 12px;
32 }
33 h5, h6 {
34 margin: 0 0 3px 0;
35 font-size: 10px;
36 }
37 p {
38 color: #666;
39 font-size: 14px;
40 margin-bottom: 2px;
41 }
42
43 h1:last-child,
44 h2:last-child,
45 h3:last-child,
46 h4:last-child,
47 h5:last-child,
48 h6:last-child,
49 p:last-child {
50 margin-bottom: 0;
51 }
52
53 // Align badges within items
54 .badge {
55 @include display-flex();
56 position: absolute;
57 top: $item-padding;
58 right: ($item-padding * 2);
59 }
60 &.item-button-right .badge {
61 right: ($item-padding * 2) + 35;
62 }
63 &.item-divider .badge {
64 top: ceil($item-padding / 2);
65 }
66 .badge + .badge {
67 margin-right: 5px;
68 }
69
70 // Different themes for items
71 &.item-light {
72 @include item-style($item-light-bg, $item-light-border, $item-light-text);
73 }
74 &.item-stable {
75 @include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
76 }
77 &.item-positive {
78 @include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
79 }
80 &.item-calm {
81 @include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
82 }
83 &.item-assertive {
84 @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
85 }
86 &.item-balanced {
87 @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
88 }
89 &.item-energized {
90 @include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
91 }
92 &.item-royal {
93 @include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
94 }
95 &.item-dark {
96 @include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
97 }
98
99 &[ng-click]:hover {
100 cursor: pointer;
101 }
102
103}
104
105.list-borderless .item,
106.item-borderless {
107 border-width: 0;
108}
109
110// Link and Button Active States
111.item.active,
112.item.activated,
113.item-complex.active .item-content,
114.item-complex.activated .item-content,
115.item .item-content.active,
116.item .item-content.activated {
117 @include item-active-style($item-default-active-bg, $item-default-active-border);
118
119 // Different active themes for <a> and <button> items
120 &.item-light {
121 @include item-active-style($item-light-active-bg, $item-light-active-border);
122 }
123 &.item-stable {
124 @include item-active-style($item-stable-active-bg, $item-stable-active-border);
125 }
126 &.item-positive {
127 @include item-active-style($item-positive-active-bg, $item-positive-active-border);
128 }
129 &.item-calm {
130 @include item-active-style($item-calm-active-bg, $item-calm-active-border);
131 }
132 &.item-assertive {
133 @include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
134 }
135 &.item-balanced {
136 @include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
137 }
138 &.item-energized {
139 @include item-active-style($item-energized-active-bg, $item-energized-active-border);
140 }
141 &.item-royal {
142 @include item-active-style($item-royal-active-bg, $item-royal-active-border);
143 }
144 &.item-dark {
145 @include item-active-style($item-dark-active-bg, $item-dark-active-border);
146 }
147}
148
149// Handle text overflow
150.item,
151.item h1,
152.item h2,
153.item h3,
154.item h4,
155.item h5,
156.item h6,
157.item p,
158.item-content,
159.item-content h1,
160.item-content h2,
161.item-content h3,
162.item-content h4,
163.item-content h5,
164.item-content h6,
165.item-content p {
166 overflow: hidden;
167 text-overflow: ellipsis;
168 white-space: nowrap;
169}
170
171// Linked list items
172a.item {
173 color: inherit;
174 text-decoration: none;
175
176 &:hover,
177 &:focus {
178 text-decoration: none;
179 }
180}
181
182
183/**
184 * Complex Items
185 * --------------------------------------------------
186 * Adding .item-complex allows the .item to be slidable and
187 * have options underneath the button, but also requires an
188 * additional .item-content element inside .item.
189 * Basically .item-complex removes any default settings which
190 * .item added, so that .item-content looks them as just .item.
191 */
192
193.item-complex,
194a.item.item-complex,
195button.item.item-complex {
196 padding: 0;
197}
198.item-complex .item-content,
199.item-radio .item-content {
200 position: relative;
201 z-index: $z-index-item;
202 padding: $item-padding (ceil( ($item-padding * 3) + ($item-padding / 3) ) - 5) $item-padding $item-padding;
203 border: none;
204 background-color: $item-default-bg;
205}
206
207a.item-content {
208 display: block;
209 color: inherit;
210 text-decoration: none;
211}
212
213.item-text-wrap .item,
214.item-text-wrap .item-content,
215.item-text-wrap,
216.item-text-wrap h1,
217.item-text-wrap h2,
218.item-text-wrap h3,
219.item-text-wrap h4,
220.item-text-wrap h5,
221.item-text-wrap h6,
222.item-text-wrap p,
223.item-complex.item-text-wrap .item-content,
224.item-body h1,
225.item-body h2,
226.item-body h3,
227.item-body h4,
228.item-body h5,
229.item-body h6,
230.item-body p {
231 overflow: visible;
232 white-space: normal;
233}
234.item-complex.item-text-wrap,
235.item-complex.item-text-wrap h1,
236.item-complex.item-text-wrap h2,
237.item-complex.item-text-wrap h3,
238.item-complex.item-text-wrap h4,
239.item-complex.item-text-wrap h5,
240.item-complex.item-text-wrap h6,
241.item-complex.item-text-wrap p {
242 overflow: visible;
243 white-space: normal;
244}
245
246// Link and Button Active States
247
248.item-complex{
249 // Stylized items
250 &.item-light > .item-content{
251 @include item-style($item-light-bg, $item-light-border, $item-light-text);
252 &.active, &:active {
253 @include item-active-style($item-light-active-bg, $item-light-active-border);
254 }
255 }
256 &.item-stable > .item-content{
257 @include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
258 &.active, &:active {
259 @include item-active-style($item-stable-active-bg, $item-stable-active-border);
260 }
261 }
262 &.item-positive > .item-content{
263 @include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
264 &.active, &:active {
265 @include item-active-style($item-positive-active-bg, $item-positive-active-border);
266 }
267 }
268 &.item-calm > .item-content{
269 @include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
270 &.active, &:active {
271 @include item-active-style($item-calm-active-bg, $item-calm-active-border);
272 }
273 }
274 &.item-assertive > .item-content{
275 @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
276 &.active, &:active {
277 @include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
278 }
279 }
280 &.item-balanced > .item-content{
281 @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
282 &.active, &:active {
283 @include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
284 }
285 }
286 &.item-energized > .item-content{
287 @include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
288 &.active, &:active {
289 @include item-active-style($item-energized-active-bg, $item-energized-active-border);
290 }
291 }
292 &.item-royal > .item-content{
293 @include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
294 &.active, &:active {
295 @include item-active-style($item-royal-active-bg, $item-royal-active-border);
296 }
297 }
298 &.item-dark > .item-content{
299 @include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
300 &.active, &:active {
301 @include item-active-style($item-dark-active-bg, $item-dark-active-border);
302 }
303 }
304}
305
306
307/**
308 * Item Icons
309 * --------------------------------------------------
310 */
311
312.item-icon-left .icon,
313.item-icon-right .icon {
314 @include display-flex();
315 @include align-items(center);
316 position: absolute;
317 top: 0;
318 height: 100%;
319 font-size: $item-icon-font-size;
320
321 &:before {
322 display: block;
323 width: $item-icon-font-size;
324 text-align: center;
325 }
326}
327
328.item .fill-icon {
329 min-width: $item-icon-fill-font-size + 2;
330 min-height: $item-icon-fill-font-size + 2;
331 font-size: $item-icon-fill-font-size;
332}
333
334.item-icon-left {
335 padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
336
337 .icon {
338 left: ceil( ($item-padding / 3) * 2);
339 }
340}
341.item-complex.item-icon-left {
342 padding-left: 0;
343
344 .item-content {
345 padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
346 }
347}
348
349.item-icon-right {
350 padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
351
352 .icon {
353 right: ceil( ($item-padding / 3) * 2);
354 }
355}
356.item-complex.item-icon-right {
357 padding-right: 0;
358
359 .item-content {
360 padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
361 }
362}
363
364.item-icon-left.item-icon-right .icon:first-child {
365 right: auto;
366}
367.item-icon-left.item-icon-right .icon:last-child,
368.item-icon-left .item-delete .icon {
369 left: auto;
370}
371
372.item-icon-left .icon-accessory,
373.item-icon-right .icon-accessory {
374 color: $item-icon-accessory-color;
375 font-size: $item-icon-accessory-font-size;
376}
377.item-icon-left .icon-accessory {
378 left: floor($item-padding / 5);
379}
380.item-icon-right .icon-accessory {
381 right: floor($item-padding / 5);
382}
383
384
385/**
386 * Item Button
387 * --------------------------------------------------
388 * An item button is a child button inside an .item (not the entire .item)
389 */
390
391.item-button-left {
392 padding-left: ceil($item-padding * 4.5);
393}
394
395.item-button-left > .button,
396.item-button-left .item-content > .button {
397 @include display-flex();
398 @include align-items(center);
399 position: absolute;
400 top: ceil($item-padding / 2);
401 left: ceil( ($item-padding / 3) * 2);
402 min-width: $item-icon-font-size + ($button-border-width * 2);
403 min-height: $item-icon-font-size + ($button-border-width * 2);
404 font-size: $item-button-font-size;
405 line-height: $item-button-line-height;
406
407 .icon:before {
408 position: relative;
409 left: auto;
410 width: auto;
411 line-height: $item-icon-font-size - 1;
412 }
413
414 > .button {
415 margin: 0px 2px;
416 min-height: $item-icon-font-size + ($button-border-width * 2);
417 font-size: $item-button-font-size;
418 line-height: $item-button-line-height;
419 }
420}
421
422.item-button-right,
423a.item.item-button-right,
424button.item.item-button-right {
425 padding-right: $item-padding * 5;
426}
427
428.item-button-right > .button,
429.item-button-right .item-content > .button,
430.item-button-right > .buttons,
431.item-button-right .item-content > .buttons {
432 @include display-flex();
433 @include align-items(center);
434 position: absolute;
435 top: ceil($item-padding / 2);
436 right: $item-padding;
437 min-width: $item-icon-font-size + ($button-border-width * 2);
438 min-height: $item-icon-font-size + ($button-border-width * 2);
439 font-size: $item-button-font-size;
440 line-height: $item-button-line-height;
441
442 .icon:before {
443 position: relative;
444 left: auto;
445 width: auto;
446 line-height: $item-icon-font-size - 1;
447 }
448
449 > .button {
450 margin: 0px 2px;
451 min-width: $item-icon-font-size + ($button-border-width * 2);
452 min-height: $item-icon-font-size + ($button-border-width * 2);
453 font-size: $item-button-font-size;
454 line-height: $item-button-line-height;
455 }
456}
457
458.item-button-left.item-button-right{
459 .button{
460 &:first-child {
461 right: auto;
462 }
463 &:last-child {
464 left: auto;
465 }
466 }
467}
468
469// Item Avatar
470// -------------------------------
471
472.item-avatar,
473.item-avatar .item-content,
474.item-avatar-left,
475.item-avatar-left .item-content {
476 padding-left: $item-avatar-width + ($item-padding * 2);
477 min-height: $item-avatar-width + ($item-padding * 2);
478
479 > img:first-child,
480 .item-image {
481 position: absolute;
482 top: $item-padding;
483 left: $item-padding;
484 max-width: $item-avatar-width;
485 max-height: $item-avatar-height;
486 width: 100%;
487 height: 100%;
488 border-radius: $item-avatar-border-radius;
489 }
490}
491
492.item-avatar-right,
493.item-avatar-right .item-content {
494 padding-right: $item-avatar-width + ($item-padding * 2);
495 min-height: $item-avatar-width + ($item-padding * 2);
496
497 > img:first-child,
498 .item-image {
499 position: absolute;
500 top: $item-padding;
501 right: $item-padding;
502 max-width: $item-avatar-width;
503 max-height: $item-avatar-height;
504 width: 100%;
505 height: 100%;
506 border-radius: $item-avatar-border-radius;
507 }
508}
509
510
511// Item Thumbnails
512// -------------------------------
513
514.item-thumbnail-left,
515.item-thumbnail-left .item-content {
516 padding-top: $item-padding / 2;
517 padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
518 min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
519
520 > img:first-child,
521 .item-image {
522 position: absolute;
523 top: $item-thumbnail-margin;
524 left: $item-thumbnail-margin;
525 max-width: $item-thumbnail-width;
526 max-height: $item-thumbnail-height;
527 width: 100%;
528 height: 100%;
529 }
530}
531.item-avatar.item-complex,
532.item-avatar-left.item-complex,
533.item-thumbnail-left.item-complex {
534 padding-top: 0;
535 padding-left: 0;
536}
537
538.item-thumbnail-right,
539.item-thumbnail-right .item-content {
540 padding-top: $item-padding / 2;
541 padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
542 min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
543
544 > img:first-child,
545 .item-image {
546 position: absolute;
547 top: $item-thumbnail-margin;
548 right: $item-thumbnail-margin;
549 max-width: $item-thumbnail-width;
550 max-height: $item-thumbnail-height;
551 width: 100%;
552 height: 100%;
553 }
554}
555.item-avatar-right.item-complex,
556.item-thumbnail-right.item-complex {
557 padding-top: 0;
558 padding-right: 0;
559}
560
561
562// Item Image
563// -------------------------------
564
565.item-image {
566 padding: 0;
567 text-align: center;
568
569 img:first-child, .list-img {
570 width: 100%;
571 vertical-align: middle;
572 }
573}
574
575
576// Item Body
577// -------------------------------
578
579.item-body {
580 overflow: auto;
581 padding: $item-padding;
582 text-overflow: inherit;
583 white-space: normal;
584
585 h1, h2, h3, h4, h5, h6, p {
586 margin-top: $item-padding;
587 margin-bottom: $item-padding;
588 }
589}
590
591
592// Item Divider
593// -------------------------------
594
595.item-divider {
596 padding-top: ceil($item-padding / 2);
597 padding-bottom: ceil($item-padding / 2);
598 min-height: 30px;
599 background-color: $item-divider-bg;
600 color: $item-divider-color;
601 font-weight: 500;
602}
603
604.platform-ios .item-divider-platform,
605.item-divider-ios {
606 padding-top: 26px;
607 text-transform: uppercase;
608 font-weight: 300;
609 font-size: 13px;
610 background-color: #efeff4;
611 color: #555;
612}
613
614.platform-android .item-divider-platform,
615.item-divider-android {
616 font-weight: 300;
617 font-size: 13px;
618}
619
620
621// Item Note
622// -------------------------------
623
624.item-note {
625 float: right;
626 color: #aaa;
627 font-size: 14px;
628}
629
630
631// Item Editing
632// -------------------------------
633
634.item-left-editable .item-content,
635.item-right-editable .item-content {
636 // setup standard transition settings
637 @include transition-duration( $item-edit-transition-duration );
638 @include transition-timing-function( $item-edit-transition-function );
639 -webkit-transition-property: -webkit-transform;
640 -moz-transition-property: -moz-transform;
641 transition-property: transform;
642}
643
644.list-left-editing .item-left-editable .item-content,
645.item-left-editing.item-left-editable .item-content {
646 // actively editing the left side of the item
647 @include translate3d($item-left-edit-open-width, 0, 0);
648}
649
650.item-remove-animate {
651 &.ng-leave {
652 @include transition-duration( $item-remove-transition-duration );
653 }
654 &.ng-leave .item-content,
655 &.ng-leave:last-of-type {
656 @include transition-duration( $item-remove-transition-duration );
657 @include transition-timing-function( $item-remove-transition-function );
658 @include transition-property( all );
659 }
660
661 &.ng-leave.ng-leave-active .item-content {
662 opacity:0;
663 -webkit-transform: translate3d(-100%, 0, 0) !important;
664 transform: translate3d(-100%, 0, 0) !important;
665 }
666 &.ng-leave.ng-leave-active:last-of-type {
667 opacity: 0;
668 }
669
670 &.ng-leave.ng-leave-active ~ ion-item:not(.ng-leave) {
671 -webkit-transform: translate3d(0, unquote('-webkit-calc(-100% + 1px)'), 0);
672 transform: translate3d(0, calc(-100% + 1px), 0);
673 @include transition-duration( $item-remove-transition-duration );
674 @include transition-timing-function( $item-remove-descendents-transition-function );
675 @include transition-property( all );
676 }
677}
678
679
680
681// Item Left Edit Button
682// -------------------------------
683
684.item-left-edit {
685 @include transition(all $item-edit-transition-function $item-edit-transition-duration / 2);
686 position: absolute;
687 top: 0;
688 left: 0;
689 z-index: $z-index-item-edit;
690 width: $item-left-edit-open-width;
691 height: 100%;
692 line-height: 100%;
693
694 .button {
695 height: 100%;
696
697 &.icon {
698 @include display-flex();
699 @include align-items(center);
700 position: absolute;
701 top: 0;
702 height: 100%;
703 }
704 }
705
706 display: none;
707 opacity: 0;
708 @include translate3d( ($item-left-edit-left - $item-left-edit-open-width) / 2, 0, 0);
709 &.visible {
710 display: block;
711 &.active {
712 opacity: 1;
713 @include translate3d($item-left-edit-left, 0, 0);
714 }
715 }
716}
717.list-left-editing .item-left-edit {
718 @include transition-delay($item-edit-transition-duration / 2);
719}
720
721// Item Delete (Left side edit button)
722// -------------------------------
723
724.item-delete .button.icon {
725 color: $item-delete-icon-color;
726 font-size: $item-delete-icon-size;
727
728 &:hover {
729 opacity: .7;
730 }
731}
732
733
734// Item Right Edit Button
735// -------------------------------
736
737.item-right-edit {
738 @include transition(all $item-edit-transition-function $item-edit-transition-duration);
739 position: absolute;
740 top: 0;
741 right: 0;
742 z-index: $z-index-item-reorder;
743 width: $item-right-edit-open-width * 1.5;
744 height: 100%;
745 background: inherit;
746 padding-left: 20px;
747
748 .button {
749 min-width: $item-right-edit-open-width;
750 height: 100%;
751
752 &.icon {
753 @include display-flex();
754 @include align-items(center);
755 position: absolute;
756 top: 0;
757 height: 100%;
758 font-size: $item-reorder-icon-size;
759 }
760 }
761
762 display: block;
763 opacity: 0;
764 @include translate3d($item-right-edit-open-width * 1.5, 0, 0);
765 &.visible {
766 display: block;
767 &.active {
768 opacity: 1;
769 @include translate3d(0, 0, 0);
770 }
771 }
772}
773
774
775// Item Reordering (Right side edit button)
776// -------------------------------
777
778.item-reorder .button.icon {
779 color: $item-reorder-icon-color;
780 font-size: $item-reorder-icon-size;
781}
782
783.item-reordering {
784 // item is actively being reordered
785 position: absolute;
786 left: 0;
787 top: 0;
788 z-index: $z-index-item-reordering;
789 width: 100%;
790 box-shadow: 0px 0px 10px 0px #aaa;
791
792 .item-reorder {
793 z-index: $z-index-item-reordering;
794 }
795}
796
797.item-placeholder {
798 // placeholder for the item that's being reordered
799 opacity: 0.7;
800}
801
802
803/**
804 * The hidden right-side buttons that can be exposed under a list item
805 * with dragging.
806 */
807.item-options {
808 position: absolute;
809 top: 0;
810 right: 0;
811 z-index: $z-index-item-options;
812 height: 100%;
813
814 .button {
815 height: 100%;
816 border: none;
817 border-radius: 0;
818 @include display-inline-flex();
819 @include align-items(center);
820
821 &:before{
822 margin: 0 auto;
823 }
824 }
825}