_variables.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. // This file is part of the DITA Open Toolkit project.
  2. //
  3. // Copyright 2016 Roger Sheen
  4. //
  5. // See the accompanying LICENSE file for applicable license.
  6. //
  7. // Variables (based on Bootstrap Sass defaults)
  8. // --------------------------------------------------
  9. //== Colors
  10. //
  11. //## Gray and brand colors
  12. $gray-base: #000 !default;
  13. $gray-darker: lighten($gray-base, 13.5%) !default; // #222
  14. $gray-dark: lighten($gray-base, 20%) !default; // #333
  15. $gray: lighten($gray-base, 33.5%) !default; // #555
  16. $gray-light: lighten($gray-base, 46.7%) !default; // #777
  17. $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
  18. $brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
  19. // Hazard statement colors
  20. //
  21. // Source: https://www.nema.org/Standards/ComplimentaryDocuments/ANSI%20Z535_1-2017%20CONTENTS%20AND%20SCOPE.pdf
  22. $hazard-ansi-red: #c8102e; // danger
  23. $hazard-ansi-orange: #ff8200; // warning
  24. $hazard-ansi-yellow: #ffd100; // caution
  25. $hazard-ansi-green: #007b5f;
  26. $hazard-ansi-blue: #0072ce; // note
  27. $hazard-ansi-purple: #6d2077;
  28. // Source: https://en.wikipedia.org/wiki/ISO_3864
  29. $hazard-iso-red: #9b2423;
  30. $hazard-iso-yellow: #f9a800;
  31. $hazard-iso-green: #237f52;
  32. $hazard-iso-blue: #005387;
  33. // Text color for hazard statements with dark backgrounds: danger (red), note (blue)
  34. $hazard-heading-light: #fff;
  35. //== Scaffolding
  36. //
  37. //## Settings for some of the most global styles.
  38. //** Background color for `<body>`.
  39. $body-bg: #fff !default;
  40. //** Global text color on `<body>`.
  41. $text-color: $gray-base !default;
  42. //** Global textual link color.
  43. $link-color: $brand-primary !default;
  44. //** Link hover color set via `darken()` function.
  45. $link-hover-color: darken($link-color, 15%) !default;
  46. //** Link hover decoration.
  47. $link-hover-decoration: underline !default;
  48. //== Typography
  49. //
  50. //## Font, line-height, and color for body text, headings, and more.
  51. $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
  52. $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
  53. //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
  54. $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
  55. $font-family-base: $font-family-sans-serif !default;
  56. $font-size-base: 14px !default;
  57. $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
  58. $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
  59. $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
  60. $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
  61. $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
  62. $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
  63. $font-size-h5: $font-size-base !default;
  64. $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
  65. //** Unit-less `line-height` for use in components like buttons.
  66. $line-height-base: 1.428571429 !default; // 20/14
  67. //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
  68. $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
  69. //** By default, this inherits from the `<body>`.
  70. $headings-font-family: inherit !default;
  71. $headings-font-weight: 500 !default;
  72. $headings-line-height: 1.1 !default;
  73. $headings-color: inherit !default;
  74. //== Components
  75. //
  76. //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
  77. $padding-base-vertical: 6px !default;
  78. $padding-base-horizontal: 12px !default;
  79. $padding-large-vertical: 10px !default;
  80. $padding-large-horizontal: 16px !default;
  81. $padding-small-vertical: 5px !default;
  82. $padding-small-horizontal: 10px !default;
  83. $padding-xs-vertical: 1px !default;
  84. $padding-xs-horizontal: 5px !default;
  85. $line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
  86. $line-height-small: 1.5 !default;
  87. $border-radius-base: 4px !default;
  88. $border-radius-large: 6px !default;
  89. $border-radius-small: 3px !default;
  90. //== Code
  91. //
  92. //##
  93. $code-color: $gray-light !default;
  94. $code-bg: transparent !default;
  95. $kbd-color: #fff !default;
  96. $kbd-bg: #333 !default;
  97. $pre-bg: #f5f5f5 !default;
  98. $pre-color: $gray-dark !default;
  99. $pre-border-color: #ccc !default;
  100. $screen-bg: $pre-border-color;
  101. //== Type
  102. //
  103. //##
  104. //** Text muted color
  105. $text-muted: $gray-light !default;