index.less 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .navbar-style(@theme, @bg-color, @color) {
  4. &--@{theme} {
  5. background-color: @bg-color;
  6. color: @color;
  7. }
  8. }
  9. .@{wux-prefix}-navbar {
  10. display: flex;
  11. align-items: center;
  12. height: @navbar-size;
  13. background-color: @navbar-light-bg;
  14. color: @navbar-default-color;
  15. &__left,
  16. &__title,
  17. &__right {
  18. display: flex;
  19. align-items: center;
  20. flex: 1;
  21. height: 100%;
  22. }
  23. &__left {
  24. padding-left: @navbar-margin;
  25. font-size: @navbar-font-size;
  26. }
  27. &__title {
  28. justify-content: center;
  29. font-size: @navbar-font-size + 2px;
  30. white-space: nowrap;
  31. }
  32. &__right {
  33. justify-content: flex-end;
  34. font-size: @navbar-font-size;
  35. margin-right: @navbar-margin;
  36. }
  37. .navbar-style(light, @navbar-light-bg, @navbar-default-color);
  38. .navbar-style(stable, @navbar-stable-bg, @navbar-default-color);
  39. .navbar-style(positive, @navbar-positive-bg, @navbar-active-color);
  40. .navbar-style(calm, @navbar-calm-bg, @navbar-active-color);
  41. .navbar-style(assertive, @navbar-assertive-bg, @navbar-active-color);
  42. .navbar-style(balanced, @navbar-balanced-bg, @navbar-active-color);
  43. .navbar-style(energized, @navbar-energized-bg, @navbar-active-color);
  44. .navbar-style(royal, @navbar-royal-bg, @navbar-active-color);
  45. .navbar-style(dark, @navbar-dark-bg, @navbar-active-color);
  46. }