index.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .footer-style(@theme, @color) {
  4. &--@{theme} &__chip--link {
  5. color: @color;
  6. background-color: lighten(@color, 30%);
  7. }
  8. &--@{theme} &__links {
  9. color: @color;
  10. }
  11. }
  12. .@{wux-prefix}-footer {
  13. display: flex;
  14. flex-direction: column;
  15. align-items: center;
  16. background-color: @component-background;
  17. color: @text-color;
  18. font-size: @font-size-sm + 1;
  19. &__label {
  20. width: 100%;
  21. }
  22. &__links {
  23. margin: @margin-component-lg 0;
  24. color: @balanced;
  25. white-space: nowrap;
  26. }
  27. &__link {
  28. display: inline-block;
  29. text-decoration: none;
  30. cursor: pointer;
  31. }
  32. &__content {
  33. display: flex;
  34. align-items: center;
  35. margin: @margin-component-lg 0;
  36. color: @text-color-secondary;
  37. }
  38. &__chips {
  39. display: flex;
  40. align-items: center;
  41. white-space: nowrap;
  42. margin: @margin-component-lg 0;
  43. }
  44. &__chip {
  45. white-space: nowrap;
  46. margin-right: @spacing-base * 2;
  47. font-size: @font-size-sm;
  48. background-color: @background-color-base;
  49. color: @text-color-secondary;
  50. padding: @margin-component-sm + 2 @margin-component-lg + 2;
  51. border-radius: 100px;
  52. &--link {
  53. cursor: pointer;
  54. background-color: lighten(@balanced, 30%);
  55. color: @balanced;
  56. }
  57. }
  58. .footer-style(light, @light-inverse);
  59. .footer-style(stable, @stable-inverse);
  60. .footer-style(positive, @positive);
  61. .footer-style(calm, @calm);
  62. .footer-style(assertive, @assertive);
  63. .footer-style(balanced, @balanced);
  64. .footer-style(energized, @energized);
  65. .footer-style(royal, @royal);
  66. .footer-style(dark, @dark);
  67. }