_variables.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. // Variables
  2. //
  3. // Variables should follow the `$component-state-property-size` formula for
  4. // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
  5. //
  6. // Color system
  7. //
  8. $white: #fff !default;
  9. $gray-100: #f8f9fa !default;
  10. $gray-200: #e9ecef !default;
  11. $gray-300: #dee2e6 !default;
  12. $gray-400: #ced4da !default;
  13. $gray-500: #adb5bd !default;
  14. $gray-600: #6c757d !default;
  15. $gray-700: #495057 !default;
  16. $gray-800: #343a40 !default;
  17. $gray-900: #212529 !default;
  18. $black: #000 !default;
  19. // stylelint-disable
  20. $grays: () !default;
  21. $grays: map-merge((
  22. "100": $gray-100,
  23. "200": $gray-200,
  24. "300": $gray-300,
  25. "400": $gray-400,
  26. "500": $gray-500,
  27. "600": $gray-600,
  28. "700": $gray-700,
  29. "800": $gray-800,
  30. "900": $gray-900
  31. ), $grays);
  32. // stylelint-enable
  33. $blue: #0d6efd !default;
  34. $indigo: #6610f2 !default;
  35. $purple: #6f42c1 !default;
  36. $pink: #d63384 !default;
  37. $red: #dc3545 !default;
  38. $orange: #fd7e14 !default;
  39. $yellow: #ffc107 !default;
  40. $green: #198754 !default;
  41. $teal: #20c997 !default;
  42. $cyan: #0dcaf0 !default;
  43. // stylelint-disable
  44. $colors: () !default;
  45. $colors: map-merge((
  46. "blue": $blue,
  47. "indigo": $indigo,
  48. "purple": $purple,
  49. "pink": $pink,
  50. "red": $red,
  51. "orange": $orange,
  52. "yellow": $yellow,
  53. "green": $green,
  54. "teal": $teal,
  55. "cyan": $cyan,
  56. "white": $white,
  57. "gray": $gray-600,
  58. "gray-dark": $gray-800
  59. ), $colors);
  60. // stylelint-enable
  61. // Color scheme
  62. $primary: $blue !default;
  63. $secondary: $gray-600 !default;
  64. $success: $green !default;
  65. $info: $cyan !default;
  66. $warning: $yellow !default;
  67. $danger: $red !default;
  68. $light: $gray-100 !default;
  69. $dark: $gray-800 !default;
  70. // stylelint-disable
  71. $theme-colors: () !default;
  72. $theme-colors: map-merge((
  73. "primary": $primary,
  74. "secondary": $secondary,
  75. "success": $success,
  76. "info": $info,
  77. "warning": $warning,
  78. "danger": $danger,
  79. "light": $light,
  80. "dark": $dark
  81. ), $theme-colors);
  82. // stylelint-enable
  83. // Options
  84. //
  85. // Quickly modify global styling by enabling or disabling optional features.
  86. $enable-caret: true !default;
  87. $enable-rounded: true !default;
  88. $enable-shadows: true !default;
  89. $enable-gradients: false !default;
  90. $enable-transitions: true !default;
  91. $enable-reduced-motion: true !default;
  92. $enable-smooth-scroll: true !default;
  93. $enable-grid-classes: true !default;
  94. $enable-button-pointers: true !default;
  95. $enable-rfs: true !default;
  96. $enable-validation-icons: true !default;
  97. $enable-negative-margins: false !default;
  98. $enable-deprecation-messages: true !default;
  99. $enable-important-utilities: true !default;
  100. // Prefix for :root CSS variables
  101. $variable-prefix: bs- !default;
  102. // Body
  103. //
  104. // Settings for the `<body>` element.
  105. $body-bg: $white !default;
  106. $body-color: $gray-900 !default;
  107. $body-text-align: null !default;
  108. // Links
  109. //
  110. // Style anchor elements.
  111. $link-color: $primary !default;
  112. $link-decoration: none !default;
  113. $link-shade-percentage: 20% !default;
  114. $link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
  115. $link-hover-decoration: null !default;
  116. $stretched-link-pseudo-element: after !default;
  117. $stretched-link-z-index: 1 !default;