UI for Zipcoin Blue

item.scss 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. @import "../../themes/ionic.globals";
  2. // Item
  3. // --------------------------------------------------
  4. // Core structure only, dimensions belong in specific modes
  5. //
  6. // ".item" includes elements:
  7. // ion-item
  8. // [ion-item]
  9. // ion-item-divider
  10. // ion-list-header
  11. //
  12. // ".item-block" includes elements:
  13. // ion-item
  14. // [ion-item]
  15. .item {
  16. contain: content;
  17. }
  18. .item-block {
  19. @include margin(0);
  20. @include padding(0);
  21. @include text-align(initial);
  22. display: flex;
  23. overflow: hidden;
  24. align-items: center;
  25. justify-content: space-between;
  26. width: 100%;
  27. min-height: 4.4rem;
  28. border: 0;
  29. font-weight: normal;
  30. line-height: normal;
  31. text-decoration: none;
  32. color: inherit;
  33. }
  34. .item-inner {
  35. @include margin(0);
  36. @include padding(0);
  37. display: flex;
  38. overflow: hidden;
  39. flex: 1;
  40. flex-direction: inherit;
  41. align-items: inherit;
  42. align-self: stretch;
  43. min-height: inherit;
  44. border: 0;
  45. }
  46. .input-wrapper {
  47. display: flex;
  48. overflow: hidden;
  49. flex: 1;
  50. flex-direction: inherit;
  51. align-items: inherit;
  52. align-self: stretch;
  53. text-overflow: ellipsis;
  54. }
  55. .item[no-lines],
  56. .item.item[no-lines] .item-inner {
  57. border: 0;
  58. }
  59. ion-item-group {
  60. display: block;
  61. }
  62. ion-item-divider {
  63. @include margin(0);
  64. @include padding(0);
  65. z-index: $z-index-item-divider;
  66. display: flex;
  67. overflow: hidden;
  68. align-items: center;
  69. justify-content: space-between;
  70. width: 100%;
  71. min-height: 30px;
  72. }
  73. ion-item-divider[sticky] {
  74. position: sticky;
  75. top: 0;
  76. }
  77. [vertical-align-top],
  78. ion-input.item {
  79. align-items: flex-start;
  80. }