_variables.scss 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. @import "../../dcat/sass/theme/colors";
  2. // stylelint-disable
  3. $spacer: 1rem;
  4. $spacers: ();
  5. // stylelint-disable-next-line scss/dollar-variable-default
  6. $spacers: map-merge((0: 0,
  7. 25: ($spacer * .25),
  8. 50: ($spacer * .5),
  9. 75: ($spacer * .75),
  10. 1: ($spacer),
  11. 2: ($spacer * 1.5),
  12. 3: ($spacer * 3),
  13. 4: ($spacer * 3.5),
  14. 5: ($spacer * 4)),
  15. $spacers);
  16. // Body
  17. // $body-bg: $body-bg;
  18. $body-color: #626262;
  19. // Links
  20. //
  21. // Style anchor elements.
  22. $link-color: darken($primary, 5%);
  23. $link-hover-color: darken($link-color, 10%);
  24. $link-hover-decoration: none;
  25. // Grid columns
  26. $grid-gutter-width: 28px;
  27. // Components
  28. $line-height-lg: 1.25;
  29. $line-height-sm: 1;
  30. $border-width: 1px;
  31. $border-color: $gray-200;
  32. $border-radius: 0.5rem;
  33. $border-radius-lg: 0.6rem;
  34. $border-radius-sm: 0.25rem;
  35. // Typography
  36. //
  37. // Font, line-height, and color for body text, headings, and more.
  38. // stylelint-disable value-keyword-case
  39. $font-family-sans-serif: "Montserrat",
  40. Helvetica,
  41. Arial,
  42. serif;
  43. $font-family-monospace: "Montserrat",
  44. Helvetica,
  45. Arial,
  46. serif;
  47. // stylelint-enable value-keyword-case
  48. $font-size-base: 1rem;
  49. $font-size-sm: ceil($font-size-base * 0.85);
  50. $font-size-lg: ceil($font-size-base * 1.25);
  51. $line-height-base: 1.45;
  52. $h1-font-size: $font-size-base * 2;
  53. $h2-font-size: $font-size-base * 1.74;
  54. $h3-font-size: $font-size-base * 1.51;
  55. $h4-font-size: $font-size-base * 1.32;
  56. $h5-font-size: $font-size-base * 1.14;
  57. $headings-margin-bottom: ($spacer / 2);
  58. $headings-font-family: inherit;
  59. $headings-font-weight: 500;
  60. $headings-color: #2c2c2c;
  61. $small-font-size: smaller;
  62. // Tables
  63. $table-border-color: $body-bg;
  64. // Buttons + Forms
  65. $btn-padding-y: 0.9rem;
  66. $btn-padding-x: 2rem;
  67. $input-btn-padding-y: .75rem;
  68. $input-btn-padding-x: 2rem;
  69. $input-btn-padding-y-sm: 0.5rem;
  70. $input-btn-padding-x-sm: 1.5rem;
  71. $input-btn-font-size-sm: $font-size-base * 0.7;
  72. $input-btn-padding-y-lg: 1rem;
  73. $input-btn-padding-x-lg: 2.5rem;
  74. $input-btn-font-size-lg: $font-size-base * 1.25;
  75. $btn-line-height: 1;
  76. $input-btn-border-width: 0;
  77. $btn-border-radius: .4285rem;
  78. $btn-border-radius-lg: 0.4285rem;
  79. $btn-border-radius-sm: 0.4285rem;
  80. // Forms
  81. $input-padding-y: .7rem !default;
  82. $input-padding-x: .7rem !default;
  83. $input-font-size: .96rem;
  84. $input-line-height: $line-height-lg;
  85. $input-padding-y-sm: .5rem !default;
  86. $input-padding-x-sm: 1.5rem !default;
  87. $input-padding-y-lg: $input-btn-padding-y-lg !default;
  88. $input-padding-x-lg: 2.5rem !default;
  89. $input-disabled-bg: #f5f5f1;
  90. $input-color: $gray-700;
  91. $input-border-color: rgba(0,0,0,.2);
  92. $input-border-width: $border-width;
  93. $input-border-radius: 5px;
  94. $input-border-radius-lg: 6px;
  95. $input-border-radius-sm: 4px;
  96. $input-focus-border-color: $primary;
  97. $input-focus-box-shadow :0 3px 10px 0 rgba(0,0,0,.15);
  98. $input-placeholder-color: rgba(0,0,0,.5);
  99. $input-plaintext-color: $gray-500;
  100. $input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + 1px) !default;
  101. $custom-checkbox-indicator-border-radius: $border-radius-sm;
  102. $custom-select-border-radius:$input-border-radius;
  103. $custom-select-focus-box-shadow: $input-focus-box-shadow;
  104. $custom-file-line-height:1.5rem;
  105. // Dropdowns
  106. //
  107. // Dropdown menu container and contents.
  108. $dropdown-border-radius: 5px;
  109. $dropdown-link-hover-bg: $body-bg;
  110. $dropdown-divider-bg: rgba(0, 0, 0, 0.08);
  111. $dropdown-font-size: .9375rem;
  112. $dropdown-spacer: .5rem;
  113. $zindex-dropdown: 10;
  114. // Pagination
  115. $pagination-padding-y: 0.65rem;
  116. $pagination-padding-x: 0.911rem;
  117. $pagination-padding-y-lg: .5rem;
  118. $pagination-padding-x-lg: 1rem;
  119. $pagination-padding-y-sm: .5rem;
  120. $pagination-padding-x-sm: .75rem;
  121. // Nav tabs
  122. $nav-link-padding-y:0.357rem;
  123. $nav-link-padding-x: 0.5rem;
  124. // Code
  125. $code-font-size: 90% !default;
  126. $kbd-bg: #eee;
  127. $base-font-size: 14px;
  128. $content-padding: 2.2rem;
  129. // ------------------------------
  130. // Colors
  131. // ------------------------------
  132. $pure-black : #565656;
  133. $nav-component-border-color: #ddd;
  134. $custom-border-color: #E4E7ED;
  135. $hover-color: #eee;
  136. // ------------------------------
  137. // Buttons
  138. // ------------------------------
  139. $btn-border-radius-square: 0;
  140. $btn-border-radius: 0.42rem;
  141. $gradient-button-bs: 0 8px 25px -8px #aaa;
  142. // ------------------------------
  143. // Navbar
  144. // ------------------------------
  145. $navbar-height: 4.3rem;
  146. // ------------------------------
  147. // Dropdown
  148. // ------------------------------
  149. $dropdown-btn-padding-x: 1.5rem;
  150. $dropdown-btn-padding-y: .85rem;
  151. $dropdown-btn-split-padding-x: 1rem;
  152. // ------------------------------
  153. // Pagination
  154. // ------------------------------
  155. $pagination-bg-color: #f0f0f0;
  156. $pagination-action-padding-y:0.572rem;
  157. $pagination-action-padding-x:0.651rem;
  158. $pagination-font-size-lg: 1.5rem;
  159. // ------------------------------
  160. // Main Menu
  161. // ------------------------------
  162. // vertical menu
  163. $menu-expanded-width: 260px;
  164. $menu-collapsed-width: 80px;
  165. // ------------------------------
  166. // Sidebar
  167. // -------------------------------
  168. $sidebar-width: 260px;
  169. // -------------------------------
  170. // Form
  171. // -------------------------------
  172. // $input-height, $input-height-lg, $input-height-sm are in variables
  173. $font-size-xs: 0.75rem;
  174. $font-size-xl: ($font-size-base + 0.5);
  175. $line-height-xl: 1.7;
  176. $line-height-xs: 1.5;
  177. $input-padding-y-xl: 0.5rem !default;
  178. $input-padding-x-xl: 0.5rem !default;
  179. $input-padding-y-xs: 0.2rem !default;
  180. $input-padding-x-xs: 0.275rem !default;
  181. $border-radius-xl: 0.35rem !default;
  182. $border-radius-xs: 0.12rem !default;
  183. $input-border-radius-xl: $border-radius-xl;
  184. $input-border-radius-xs: $border-radius-xs;
  185. $input-height-xl: (($font-size-xl * $line-height-xl) + ($input-padding-y-xl * 2)) !default;
  186. $input-height-xs: (($font-size-xs * $line-height-xs) + ($input-padding-y-xs * 2)) !default;
  187. $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
  188. $vs-checkbox-radio-border-width: 2px;
  189. $vs-checkbox-radio-border-color: $gray-600;
  190. $vs-checkbox-box: 20px;
  191. $vs-checkbox-box-sm: 15px;
  192. $vs-checkbox-box-lg: 24px;
  193. $vs-radio-box: 18px;
  194. $vs-radio-box-sm: 13px;
  195. $vs-radio-box-lg: 22px;