index.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. @import './var.less';
  2. :root {
  3. --van-submit-bar-height: @submit-bar-height;
  4. --van-submit-bar-z-index: @submit-bar-z-index;
  5. --van-submit-bar-background-color: @submit-bar-background-color;
  6. --van-submit-bar-button-width: @submit-bar-button-width;
  7. --van-submit-bar-price-color: @submit-bar-price-color;
  8. --van-submit-bar-price-font-size: @submit-bar-price-font-size;
  9. --van-submit-bar-price-integer-font-size: @submit-bar-price-integer-font-size;
  10. --van-submit-bar-price-font-family: @submit-bar-price-font-family;
  11. --van-submit-bar-currency-font-size: @submit-bar-currency-font-size;
  12. --van-submit-bar-text-color: @submit-bar-text-color;
  13. --van-submit-bar-text-font-size: @submit-bar-text-font-size;
  14. --van-submit-bar-tip-padding: @submit-bar-tip-padding;
  15. --van-submit-bar-tip-font-size: @submit-bar-tip-font-size;
  16. --van-submit-bar-tip-line-height: @submit-bar-tip-line-height;
  17. --van-submit-bar-tip-color: @submit-bar-tip-color;
  18. --van-submit-bar-tip-background-color: @submit-bar-tip-background-color;
  19. --van-submit-bar-tip-icon-size: @submit-bar-tip-icon-size;
  20. --van-submit-bar-button-height: @submit-bar-button-height;
  21. --van-submit-bar-padding: @submit-bar-padding;
  22. }
  23. .van-submit-bar {
  24. position: fixed;
  25. bottom: 0;
  26. left: 0;
  27. z-index: var(--van-submit-bar-z-index);
  28. width: 100%;
  29. background: var(--van-submit-bar-background-color);
  30. user-select: none;
  31. &__tip {
  32. padding: var(--van-submit-bar-tip-padding);
  33. color: var(--van-submit-bar-tip-color);
  34. font-size: var(--van-submit-bar-tip-font-size);
  35. line-height: var(--van-submit-bar-tip-line-height);
  36. background: var(--van-submit-bar-tip-background-color);
  37. }
  38. &__tip-icon {
  39. margin-right: var(--van-padding-base);
  40. font-size: var(--van-submit-bar-tip-icon-size);
  41. vertical-align: middle;
  42. }
  43. &__tip-text {
  44. vertical-align: middle;
  45. }
  46. &__bar {
  47. display: flex;
  48. align-items: center;
  49. justify-content: flex-end;
  50. height: var(--van-submit-bar-height);
  51. padding: var(--van-submit-bar-padding);
  52. font-size: var(--van-submit-bar-text-font-size);
  53. }
  54. &__text {
  55. flex: 1;
  56. padding-right: var(--van-padding-sm);
  57. color: var(--van-submit-bar-text-color);
  58. text-align: right;
  59. span {
  60. display: inline-block;
  61. }
  62. }
  63. &__suffix-label {
  64. margin-left: var(--van-padding-base);
  65. font-weight: var(--van-font-weight-bold);
  66. }
  67. &__price {
  68. color: var(--van-submit-bar-price-color);
  69. font-weight: var(--van-font-weight-bold);
  70. font-size: var(--van-submit-bar-price-font-size);
  71. margin-left: var(--van-padding-base);
  72. &-integer {
  73. font-size: var(--van-submit-bar-price-integer-font-size);
  74. font-family: var(--van-submit-bar-price-font-family);
  75. }
  76. }
  77. &__button {
  78. width: var(--van-submit-bar-button-width);
  79. height: var(--van-submit-bar-button-height);
  80. font-weight: var(--van-font-weight-bold);
  81. border: none;
  82. &--danger {
  83. background: var(--van-gradient-red);
  84. }
  85. }
  86. }