Newer
Older
KaiFengPC / src / assets / styles / variables.module.scss
@zhangdeliang zhangdeliang on 24 Jun 2 KB update
  1. // base color
  2. $blue: #324157;
  3. $light-blue: #3a71a8;
  4. $red: #ff4545;
  5. $pink: #e65d6e;
  6. $green: #18e87a;
  7. $tiffany: #4ab7bd;
  8. $yellow: #fec171;
  9. $panGreen: #30b08f;
  10.  
  11. $--color-primary: #00c7f2;
  12. $--color-success: #67c23a;
  13. $--color-warning: #e6a23c;
  14. $--color-danger: #f56c6c;
  15. $--color-info: #8bd1f5;
  16.  
  17. //默认头部loto主题风格
  18. $base-menu-logo-color: #ffffff;
  19. $base-menu-logo-color-active: #f4f4f5;
  20. $base-menu-logo-background: #0f69ff;
  21. $base-logo-logo-title-color: #ffffff;
  22. // 默认菜单主题风格
  23. $base-menu-color: #ffffff;
  24. $base-menu-color-active: #f4f4f5;
  25. $base-menu-background: #4285f4;
  26. $base-menu-background-active: #ffffff;
  27. $base-logo-title-color: #ffffff;
  28.  
  29. $base-menu-light-color: rgba(0, 0, 0, 0.7);
  30. $base-menu-light-background: #ffffff;
  31. $base-logo-light-title-color: #001529;
  32.  
  33. $base-sub-menu-background: #4285f4;
  34. $base-sub-menu-back-hover: #ffffff;
  35. $base-sub-menu-clolor-hover: #4285f4;
  36.  
  37. // 项目主色系
  38. $mainBg: #00314e; //主背景色
  39. $mainColor1: #004565; //搭配色1
  40. $mainColor2: #066592; //搭配色2
  41.  
  42. // 项目头部logo主题风格
  43. $base-menu-logo-color: #ffffff;
  44. $base-menu-logo-color-active: #f4f4f5;
  45. $base-menu-logo-background: $mainColor1;
  46. $base-logo-logo-title-color: #ffffff;
  47. // 项目菜单风格
  48. $base-menu-color: $mainColor2;
  49. $base-menu-color-active: #fff;
  50. $base-menu-background: $mainBg;
  51. $base-menu-background-active: $mainColor1;
  52. $base-logo-title-color: #ffffff;
  53.  
  54. $base-menu-light-color: rgba(0, 0, 0, 0.7);
  55. $base-menu-light-background: $mainColor1;
  56. $base-logo-light-title-color: #001529;
  57.  
  58. $base-sub-menu-background: $mainBg;
  59. $base-sub-menu-back-hover: $mainColor1;
  60. $base-sub-menu-clolor-hover: #ffffff;
  61.  
  62. svg {
  63. path {
  64. fill: #fff !important;
  65. }
  66. }
  67.  
  68. $base-sidebar-width: 240px;
  69.  
  70. // the :export directive is the magic sauce for webpack
  71. // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
  72. :export {
  73. menuColor: $base-menu-color;
  74. menuLightColor: $base-menu-light-color;
  75. menuColorActive: $base-menu-color-active;
  76. menuBackground: $base-menu-background;
  77. menuLightBackground: $base-menu-light-background;
  78. subMenuBackground: $base-sub-menu-background;
  79. subMenuHover: $base-sub-menu-back-hover;
  80. sideBarWidth: $base-sidebar-width;
  81. logoTitleColor: $base-logo-title-color;
  82. logoLightTitleColor: $base-logo-light-title-color;
  83. primaryColor: $--color-primary;
  84. successColor: $--color-success;
  85. dangerColor: $--color-danger;
  86. infoColor: $--color-info;
  87. warningColor: $--color-warning;
  88. menuLogoBackground: $base-menu-logo-background;
  89. }