_variables.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. // Core variables
  2. $version: "0.5.3";
  3. // Core features
  4. $rtl: false !default;
  5. // Core colors
  6. $primary-color: #0074D9 !default;
  7. $primary-color-dark: darken($primary-color, 3%) !default;
  8. $primary-color-light: lighten($primary-color, 3%) !default;
  9. $secondary-color: lighten($primary-color, 37.5%) !default;
  10. $secondary-color-dark: darken($secondary-color, 3%) !default;
  11. $secondary-color-light: lighten($secondary-color, 3%) !default;
  12. // Gray colors
  13. $dark-color: #454d5d !default;
  14. $light-color: #fff !default;
  15. $gray-color: lighten($dark-color, 40%) !default;
  16. $gray-color-dark: darken($gray-color, 25%) !default;
  17. $gray-color-light: lighten($gray-color, 20%) !default;
  18. $border-color: lighten($dark-color, 60%) !default;
  19. $border-color-dark: darken($border-color, 10%) !default;
  20. $bg-color: lighten($dark-color, 66%) !default;
  21. $bg-color-dark: darken($bg-color, 3%) !default;
  22. $bg-color-light: $light-color !default;
  23. // Control colors
  24. $success-color: #2ECC40 !default;
  25. $warning-color: #FF851B !default;
  26. $error-color: #FF4136 !default;
  27. // Other colors
  28. $code-color: #288FED !default;
  29. $highlight-color: #ffe9b3 !default;
  30. $body-bg: $bg-color-light !default;
  31. $body-font-color: lighten($dark-color, 5%) !default;
  32. $link-color: $primary-color !default;
  33. $link-color-dark: darken($link-color, 10%) !default;
  34. $link-color-light: lighten($link-color, 10%) !default;
  35. // Fonts
  36. // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
  37. $base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
  38. $mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
  39. $fallback-font-family: "Helvetica Neue", sans-serif !default;
  40. $cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
  41. $cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
  42. $cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
  43. $cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
  44. $body-font-family: $base-font-family, $fallback-font-family !default;
  45. // Unit sizes
  46. $unit-o: .05rem !default;
  47. $unit-h: .1rem !default;
  48. $unit-1: .2rem !default;
  49. $unit-2: .4rem !default;
  50. $unit-3: .6rem !default;
  51. $unit-4: .8rem !default;
  52. $unit-5: 1rem !default;
  53. $unit-6: 1.2rem !default;
  54. $unit-7: 1.4rem !default;
  55. $unit-8: 1.6rem !default;
  56. $unit-9: 1.8rem !default;
  57. $unit-10: 2rem !default;
  58. $unit-12: 2.4rem !default;
  59. $unit-16: 3.2rem !default;
  60. // Font sizes
  61. $html-font-size: 20px !default;
  62. $html-line-height: 1.5 !default;
  63. $font-size: .8rem !default;
  64. $font-size-sm: .7rem !default;
  65. $font-size-lg: .9rem !default;
  66. $line-height: 1.2rem !default;
  67. // Sizes
  68. $layout-spacing: $unit-2 !default;
  69. $layout-spacing-sm: $unit-1 !default;
  70. $layout-spacing-lg: $unit-4 !default;
  71. $border-radius: $unit-h !default;
  72. $border-width: $unit-o !default;
  73. $border-width-lg: $unit-h !default;
  74. $control-size: $unit-9 !default;
  75. $control-size-sm: $unit-7 !default;
  76. $control-size-lg: $unit-10 !default;
  77. $control-padding-x: $unit-2 !default;
  78. $control-padding-x-sm: $unit-2 * .75 !default;
  79. $control-padding-x-lg: $unit-2 * 1.5 !default;
  80. $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
  81. $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
  82. $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
  83. $control-icon-size: .8rem !default;
  84. $control-width-xs: 180px !default;
  85. $control-width-sm: 320px !default;
  86. $control-width-md: 640px !default;
  87. $control-width-lg: 960px !default;
  88. $control-width-xl: 1280px !default;
  89. // Responsive breakpoints
  90. $size-xs: 480px !default;
  91. $size-sm: 600px !default;
  92. $size-md: 840px !default;
  93. $size-lg: 960px !default;
  94. $size-xl: 1280px !default;
  95. $size-2x: 1440px !default;
  96. $responsive-breakpoint: $size-xs !default;
  97. // Z-index
  98. $zindex-0: 1 !default;
  99. $zindex-1: 100 !default;
  100. $zindex-2: 200 !default;
  101. $zindex-3: 300 !default;
  102. $zindex-4: 400 !default;