index.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. @import '../style/var';
  2. @import "../style/mixins/hairline";
  3. .van-cell {
  4. position: relative;
  5. display: flex;
  6. width: 100%;
  7. overflow: hidden;
  8. box-sizing: border-box;
  9. color: @cell-text-color;
  10. font-size: @cell-font-size;
  11. line-height: @cell-line-height;
  12. background-color: @cell-background-color;
  13. padding: @cell-vertical-padding @cell-horizontal-padding;
  14. &:not(:last-child)::after {
  15. .hairline-bottom(@cell-border-color, 15px);
  16. }
  17. &--borderless::after {
  18. display: none;
  19. }
  20. &__label {
  21. color: @cell-label-color;
  22. font-size: @cell-label-font-size;
  23. margin-top: @cell-label-margin-top;
  24. line-height: @cell-label-line-height;
  25. }
  26. &__title,
  27. &__value {
  28. flex: 1;
  29. }
  30. &__value {
  31. color: @cell-value-color;
  32. overflow: hidden;
  33. text-align: right;
  34. position: relative;
  35. vertical-align: middle;
  36. &--alone {
  37. color: @text-color;
  38. text-align: left;
  39. }
  40. }
  41. &__left-icon,
  42. &__right-icon {
  43. min-width: 1em;
  44. height: @cell-line-height;
  45. font-size: @cell-icon-size;
  46. line-height: @cell-line-height;
  47. }
  48. &__left-icon {
  49. margin-right: 5px;
  50. }
  51. &__right-icon {
  52. margin-left: 5px;
  53. color: @cell-right-icon-color;
  54. }
  55. &--clickable {
  56. &:active {
  57. background-color: @cell-active-color;
  58. }
  59. }
  60. &--required {
  61. overflow: visible;
  62. &::before {
  63. content: '*';
  64. position: absolute;
  65. left: 7px;
  66. font-size: @cell-font-size;
  67. color: @cell-required-color;
  68. }
  69. }
  70. &--center {
  71. align-items: center;
  72. }
  73. &--large {
  74. padding-top: @cell-large-vertical-padding;
  75. padding-bottom: @cell-large-vertical-padding;
  76. .van-cell__title {
  77. font-size: @cell-large-title-font-size;
  78. }
  79. .van-cell__label {
  80. font-size: @cell-large-label-font-size;
  81. }
  82. }
  83. }