Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 
 

130 rader
2.9 KiB

  1. ////
  2. //// Typography
  3. ////
  4. //$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
  5. //$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
  6. //$root-font-size: 16px; // Base font-size for rems
  7. //$body-line-height: 1.4;
  8. //$content-line-height: 1.5;
  9. //$body-heading-line-height: 1.15;
  10. ////
  11. //// Colors
  12. ////
  13. //$white: #fff;
  14. //$grey-dk-000: #959396;
  15. //$grey-dk-100: #5c5962;
  16. //$grey-dk-200: #44434d;
  17. //$grey-dk-250: #302d36;
  18. //$grey-dk-300: #27262b;
  19. //$grey-lt-000: #f5f6fa;
  20. //$grey-lt-100: #eeebee;
  21. //$grey-lt-200: #ecebed;
  22. //$grey-lt-300: #e6e1e8;
  23. //$purple-000: #7253ed;
  24. //$purple-100: #5e41d0;
  25. //$purple-200: #4e26af;
  26. //$purple-300: #381885;
  27. //$blue-000: #2c84fa;
  28. //$blue-100: #2869e6;
  29. //$blue-200: #264caf;
  30. //$blue-300: #183385;
  31. //$green-000: #41d693;
  32. //$green-100: #11b584;
  33. //$green-200: #009c7b;
  34. //$green-300: #026e57;
  35. //$yellow-000: #ffeb82;
  36. //$yellow-100: #fadf50;
  37. //$yellow-200: #f7d12e;
  38. //$yellow-300: #e7af06;
  39. //$red-000: #f77e7e;
  40. //$red-100: #f96e65;
  41. //$red-200: #e94c4c;
  42. //$red-300: #dd2e2e;
  43. //$body-background-color: $white;
  44. //$sidebar-color: $grey-lt-000;
  45. //$search-background-color: $white;
  46. //$table-background-color: $white;
  47. //$code-background-color: $grey-lt-000;
  48. //$body-text-color: $grey-dk-100;
  49. //$body-heading-color: $grey-dk-300;
  50. //$search-result-preview-color: $grey-dk-000;
  51. //$nav-child-link-color: $grey-dk-100;
  52. //$link-color: $purple-000;
  53. //$btn-primary-color: $purple-100;
  54. //$base-button-color: #f7f7f7;
  55. ////
  56. //// Spacing
  57. ////
  58. //$spacing-unit: 1rem; // 1rem == 16px
  59. //$spacers: (
  60. //sp-0: 0,
  61. //sp-1: $spacing-unit * 0.25,
  62. //sp-2: $spacing-unit * 0.5,
  63. //sp-3: $spacing-unit * 0.75,
  64. //sp-4: $spacing-unit,
  65. //sp-5: $spacing-unit * 1.5,
  66. //sp-6: $spacing-unit * 2,
  67. //sp-7: $spacing-unit * 2.5,
  68. //sp-8: $spacing-unit * 3,
  69. //sp-9: $spacing-unit * 3.5,
  70. //sp-10: $spacing-unit * 4
  71. //);
  72. //$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
  73. //$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
  74. //$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
  75. //$sp-4: map-get($spacers, sp-4); // 1 rem == 16px
  76. //$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
  77. //$sp-6: map-get($spacers, sp-6); // 2 rem == 32px
  78. //$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
  79. //$sp-8: map-get($spacers, sp-8); // 3 rem == 48px
  80. //$sp-9: map-get($spacers, sp-9); // 4 rem == 48px
  81. //$sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
  82. ////
  83. //// Borders
  84. ////
  85. //$border: 1px solid;
  86. //$border-radius: 4px;
  87. //$border-color: $grey-lt-100;
  88. ////
  89. //// Grid system
  90. ////
  91. //$gutter-spacing: $sp-6;
  92. //$gutter-spacing-sm: $sp-4;
  93. //$nav-width: 264px;
  94. //$nav-width-md: 248px;
  95. //$content-width: 800px;
  96. //$header-height: 60px;
  97. //$search-results-width: 500px;
  98. ////
  99. //// Media queries in pixels
  100. ////
  101. //$media-queries: (
  102. //xs: 320px,
  103. //sm: 500px,
  104. //md: $content-width,
  105. //lg: $content-width + $nav-width,
  106. //xl: 1400px
  107. //);