index.less 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .tabbar-style(@theme, @color) {
  4. &--@{theme}&--current {
  5. color: @color;
  6. }
  7. }
  8. .@{wux-prefix}-tabbar-item {
  9. flex: 1;
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. flex-direction: column;
  14. text-align: center;
  15. width: 100%;
  16. height: 100%;
  17. color: @tabbar-default-color;
  18. padding: 5px 0;
  19. box-sizing: border-box;
  20. float: left;
  21. &__icon {
  22. display: flex;
  23. justify-content: center;
  24. font-size: 22px;
  25. height: 22px;
  26. line-height: 1;
  27. }
  28. &__title {
  29. font-size: @tabbar-font-size;
  30. margin: 2px 0 0;
  31. line-height: 1;
  32. text-align: center;
  33. }
  34. &--current {
  35. color: @tabbar-balanced-bg;
  36. }
  37. &--disabled {
  38. opacity: @disabled-opacity;
  39. }
  40. .tabbar-style(light, @tabbar-light-bg);
  41. .tabbar-style(stable, @tabbar-stable-bg);
  42. .tabbar-style(positive, @tabbar-positive-bg);
  43. .tabbar-style(calm, @tabbar-calm-bg);
  44. .tabbar-style(assertive, @tabbar-assertive-bg);
  45. .tabbar-style(balanced, @tabbar-balanced-bg);
  46. .tabbar-style(energized, @tabbar-energized-bg);
  47. .tabbar-style(royal, @tabbar-royal-bg);
  48. .tabbar-style(dark, @tabbar-dark-bg);
  49. }