index.less 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. @import '../style/var';
  2. .van-nav-bar {
  3. position: relative;
  4. z-index: @nav-bar-z-index;
  5. line-height: @line-height-lg;
  6. text-align: center;
  7. background-color: @nav-bar-background-color;
  8. user-select: none;
  9. &--fixed {
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. }
  15. &--safe-area-inset-top {
  16. padding-top: constant(safe-area-inset-top);
  17. padding-top: env(safe-area-inset-top);
  18. }
  19. .van-icon {
  20. color: @nav-bar-icon-color;
  21. }
  22. &__content {
  23. position: relative;
  24. display: flex;
  25. align-items: center;
  26. height: @nav-bar-height;
  27. }
  28. &__arrow {
  29. margin-right: @padding-base;
  30. font-size: @nav-bar-arrow-size;
  31. }
  32. &__title {
  33. max-width: 60%;
  34. margin: 0 auto;
  35. color: @nav-bar-title-text-color;
  36. font-weight: @font-weight-bold;
  37. font-size: @nav-bar-title-font-size;
  38. }
  39. &__left,
  40. &__right {
  41. position: absolute;
  42. top: 0;
  43. bottom: 0;
  44. display: flex;
  45. align-items: center;
  46. padding: 0 @padding-md;
  47. font-size: @font-size-md;
  48. cursor: pointer;
  49. &:active {
  50. opacity: @active-opacity;
  51. }
  52. }
  53. &__left {
  54. left: 0;
  55. }
  56. &__right {
  57. right: 0;
  58. }
  59. &__text {
  60. color: @nav-bar-text-color;
  61. }
  62. }