variables.scss 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /**
  2. * @author chuzhixin 1204505056@qq.com (不想保留author可删除)
  3. * @description 全局主题变量配置
  4. */
  5. /* stylelint-disable */
  6. @charset "utf-8";
  7. //框架默认主题色
  8. $base-color-default: #1890ff;
  9. //默认层级
  10. $base-z-index: 999;
  11. //横向布局纵向布局时菜单背景色
  12. $base-menu-background: rgb(40, 44, 52);
  13. //菜单文字颜色
  14. $base-menu-color: hsla(0, 0%, 100%, 0.95);
  15. //菜单选中文字颜色
  16. $base-menu-color-active: hsla(0, 0%, 100%, 0.95);
  17. //菜单选中背景色
  18. $base-menu-background-active: $base-color-default;
  19. //标题颜色
  20. $base-title-color: #fff;
  21. //字体大小配置
  22. $base-font-size-small: 12px;
  23. $base-font-size-default: 14px;
  24. $base-font-size-big: 16px;
  25. $base-font-size-bigger: 18px;
  26. $base-font-size-max: 22px;
  27. $base-font-color: #606266;
  28. $base-color-blue: $base-color-default;
  29. $base-color-green: #13ce66;
  30. $base-color-white: #fff;
  31. $base-color-black: #000;
  32. $base-color-yellow: #ffba00;
  33. $base-color-orange: #ff6700;
  34. $base-color-red: #ff4d4f;
  35. $base-color-gray: rgba(0, 0, 0, 0.65);
  36. $base-main-width: 1279px;
  37. $base-border-radius: 2px;
  38. $base-border-color: #dcdfe6;
  39. //输入框高度
  40. $base-input-height: 32px;
  41. //默认paddiing
  42. $base-padding: 20px;
  43. //默认阴影
  44. $base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  45. //横向布局时top-bar、logo、一级菜单的高度
  46. $base-top-bar-height: 65px;
  47. //纵向布局时logo的高度
  48. $base-logo-height: 75px;
  49. //顶部nav-bar的高度
  50. $base-nav-bar-height: 60px;
  51. //顶部多标签页tabs-bar的高度
  52. $base-tabs-bar-height: 55px;
  53. //顶部多标签页tabs-bar中每一个item的高度
  54. $base-tag-item-height: 34px;
  55. //菜单li标签的高度
  56. $base-menu-item-height: 50px;
  57. //app-main的高度
  58. $base-app-main-height: calc(
  59. 100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} -
  60. #{$base-padding} - 55px - 55px
  61. );
  62. //纵向布局时左侧导航未折叠时的宽度
  63. $base-left-menu-width: 256px;
  64. //纵向布局时左侧导航未折叠时右侧内容的宽度
  65. $base-right-content-width: calc(100% - #{$base-left-menu-width});
  66. //纵向布局时左侧导航已折叠时的宽度
  67. $base-left-menu-width-min: 65px;
  68. //纵向布局时左侧导航已折叠时右侧内容的宽度
  69. $base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
  70. //默认动画
  71. $base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
  72. background 0s, color 0s;
  73. //默认动画长
  74. $base-transition-time: 0.3s;
  75. :export {
  76. //菜单文字颜色变量导出
  77. menu-color: $base-menu-color;
  78. //菜单选中文字颜色变量导出
  79. menu-color-active: $base-menu-color-active;
  80. //菜单背景色变量导出
  81. menu-background: $base-menu-background;
  82. }