list.wp.scss 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. @import "../../themes/ionic.globals.wp";
  2. // Windows List
  3. // --------------------------------------------------
  4. /// @prop - Margin top of the list
  5. $list-wp-margin-top: 16px !default;
  6. // deprecated
  7. $list-wp-margin-right: 0 !default;
  8. /// @prop - Margin end of the list
  9. $list-wp-margin-end: $list-wp-margin-right !default;
  10. /// @prop - Margin bottom of the list
  11. $list-wp-margin-bottom: 16px !default;
  12. // deprecated
  13. $list-wp-margin-left: 0 !default;
  14. /// @prop - Margin start of the list
  15. $list-wp-margin-start: $list-wp-margin-left !default;
  16. /// @prop - Margin top of the inset list
  17. $list-inset-wp-margin-top: 16px !default;
  18. // deprecated
  19. $list-inset-wp-margin-right: 16px !default;
  20. /// @prop - Margin end of the inset list
  21. $list-inset-wp-margin-end: $list-inset-wp-margin-right !default;
  22. /// @prop - Margin bottom of the inset list
  23. $list-inset-wp-margin-bottom: 16px !default;
  24. // deprecated
  25. $list-inset-wp-margin-left: 16px !default;
  26. /// @prop - Margin start of the inset list
  27. $list-inset-wp-margin-start: $list-inset-wp-margin-left !default;
  28. /// @prop - Border radius of the inset list
  29. $list-inset-wp-border-radius: 2px !default;
  30. // deprecated
  31. $list-wp-header-padding-left: $item-wp-padding-start !default;
  32. /// @prop - Padding start of the header in a list
  33. $list-wp-header-padding-start: $list-wp-header-padding-left !default;
  34. /// @prop - Border bottom of the header in a list
  35. $list-wp-header-border-bottom: 1px solid $list-wp-border-color !default;
  36. /// @prop - Font size of the header in a list
  37. $list-wp-header-font-size: 2rem !default;
  38. /// @prop - Text color of the header in a list
  39. $list-wp-header-color: $list-wp-text-color !default;
  40. // Windows Default List
  41. // --------------------------------------------------
  42. .list-wp {
  43. @include margin(0, $list-wp-margin-end, $list-wp-margin-bottom, $list-wp-margin-start);
  44. }
  45. .list-wp .item-block .item-inner {
  46. border-bottom: 1px solid $list-wp-border-color;
  47. }
  48. .list-wp > .item-block:first-child,
  49. .list-wp > .item-wrapper:first-child .item-block {
  50. border-top: 1px solid $list-wp-border-color;
  51. }
  52. .list-wp > .item-block:last-child,
  53. .list-wp > .item-wrapper:last-child .item-block {
  54. border-bottom: 1px solid $list-wp-border-color;
  55. }
  56. .list-wp > .item-block:last-child,
  57. .list-wp > .item-wrapper:last-child {
  58. ion-label,
  59. .item-inner {
  60. border-bottom: 0;
  61. }
  62. }
  63. .list-wp > ion-input:last-child::after {
  64. @include position-horizontal(0, null);
  65. }
  66. .list-wp ion-item-options .button {
  67. @include margin(1px, 0);
  68. @include border-radius(0);
  69. display: inline-flex;
  70. align-items: center;
  71. height: calc(100% - 2px);
  72. border: 0;
  73. box-shadow: none;
  74. box-sizing: border-box;
  75. }
  76. .list-wp ion-item-options .button::before {
  77. @include margin(0, auto);
  78. }
  79. // If the item has the no-lines attribute remove the bottom border from:
  80. // the item itself (for last-child items)
  81. // the item-inner class (if it is not last)
  82. .list-wp .item[no-lines],
  83. .list-wp .item[no-lines] .item-inner {
  84. border-width: 0;
  85. }
  86. .list-wp + ion-list ion-list-header {
  87. @include margin(-$list-wp-margin-top, null, null, null);
  88. @include padding(0, null, null, null);
  89. }
  90. // Windows Insert List
  91. // --------------------------------------------------
  92. .list-wp[inset] {
  93. @include margin($list-inset-wp-margin-top, $list-inset-wp-margin-end, $list-inset-wp-margin-bottom, $list-inset-wp-margin-start);
  94. @include border-radius($list-inset-wp-border-radius);
  95. }
  96. .list-wp[inset] .item:first-child {
  97. @include border-radius($list-inset-wp-border-radius, $list-inset-wp-border-radius, null, null);
  98. border-top-width: 0;
  99. }
  100. .list-wp[inset] .item:last-child {
  101. @include border-radius(null, null, $list-inset-wp-border-radius, $list-inset-wp-border-radius);
  102. border-bottom-width: 0;
  103. }
  104. .list-wp[inset] .item-input {
  105. @include padding-horizontal(0);
  106. }
  107. .list-wp[inset] + ion-list[inset] {
  108. @include margin(0, null, null, null);
  109. }
  110. .list-wp[inset] ion-list-header {
  111. background-color: $list-wp-background-color;
  112. }
  113. // Windows No Lines List
  114. // --------------------------------------------------
  115. .list-wp[no-lines] .item,
  116. .list-wp[no-lines] .item .item-inner {
  117. border-width: 0;
  118. }
  119. // Windows List Header
  120. // --------------------------------------------------
  121. .list-header-wp {
  122. @include padding-horizontal($list-wp-header-padding-start, null);
  123. border-bottom: $list-wp-header-border-bottom;
  124. font-size: $list-wp-header-font-size;
  125. color: $list-wp-header-color;
  126. }
  127. // Generate Windows List Header Colors
  128. // --------------------------------------------------
  129. @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
  130. .list-header-wp-#{$color-name} {
  131. color: $color-contrast;
  132. background-color: $color-base;
  133. }
  134. }