_variables.scss 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. // Options
  2. //
  3. // Quickly modify global styling by enabling or disabling optional features.
  4. $enable-flex: false !default;
  5. $enable-rounded: true !default;
  6. $enable-shadows: false !default;
  7. $enable-gradients: false !default;
  8. $enable-transitions: false !default;
  9. $enable-hover-media-query: false !default;
  10. $enable-grid-classes: true !default;
  11. $enable-print-styles: true !default;
  12. // Spacing
  13. //
  14. // Control the default styling of most Bootstrap elements by modifying these
  15. // variables. Mostly focused on spacing.
  16. $spacer: 1rem !default;
  17. $spacer-x: $spacer !default;
  18. $spacer-y: $spacer !default;
  19. $spacers: (
  20. 0: (
  21. x: 0,
  22. y: 0
  23. ),
  24. 1: (
  25. x: $spacer-x,
  26. y: $spacer-y
  27. ),
  28. 2: (
  29. x: ($spacer-x * 1.5),
  30. y: ($spacer-y * 1.5)
  31. ),
  32. 3: (
  33. x: ($spacer-x * 3),
  34. y: ($spacer-y * 3)
  35. )
  36. ) !default;
  37. $border-width: 1px !default;
  38. // Grid breakpoints
  39. //
  40. // Define the minimum and maximum dimensions at which your layout will change,
  41. // adapting to different screen sizes, for use in media queries.
  42. $grid-breakpoints: (
  43. xs: 0,
  44. sm: 544px,
  45. md: 768px,
  46. lg: 992px,
  47. xl: 1200px
  48. ) !default;
  49. // Grid containers
  50. //
  51. // Define the maximum width of `.container` for different screen sizes.
  52. $container-max-widths: (
  53. sm: 576px,
  54. md: 720px,
  55. lg: 940px,
  56. xl: 1140px
  57. ) !default;
  58. // Grid columns
  59. //
  60. // Set the number of columns and specify the width of the gutters.
  61. $grid-columns: 12 !default;
  62. $grid-gutter-width: 30px !default;
  63. $enable-flex: false;
  64. // Typography
  65. // -------------------------
  66. $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  67. $font-family-serif: Georgia, "Times New Roman", Times, serif;
  68. $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
  69. $font-family-base: $font-family-sans-serif !default;
  70. $font-size-root: 14px !default;
  71. $font-size-base: 1rem !default;
  72. $font-size-lg: 1.25rem !default;
  73. $font-size-sm: .875rem !default;
  74. $font-size-xs: .75rem !default;
  75. $line-height-base: 1.5 !default;
  76. $font-weight-semi-bold: 600;
  77. $font-size-h1: 2.0rem !default;
  78. $font-size-h2: 1.75rem !default;
  79. $font-size-h3: 1.50rem !default;
  80. $font-size-h4: 1.30rem !default;
  81. $font-size-h5: 1.20rem !default;
  82. $font-size-h6: 1rem !default;
  83. $display1-size: 6rem !default;
  84. $display2-size: 5.5rem !default;
  85. $display3-size: 4.5rem !default;
  86. $display4-size: 3.5rem !default;
  87. $display1-weight: 400 !default;
  88. $display2-weight: 400 !default;
  89. $display3-weight: 400 !default;
  90. $display4-weight: 400 !default;
  91. $lead-font-size: 1.25rem !default;
  92. $lead-font-weight: 300 !default;
  93. $headings-margin-bottom: ($spacer / 2) !default;
  94. $headings-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  95. $headings-font-weight: 400 !default;
  96. $headings-line-height: 1.1 !default;
  97. $blockquote-font-size: ($font-size-base * 1.25) !default;
  98. $blockquote-border-width: .25rem !default;
  99. $hr-border-width: $border-width !default;
  100. $dt-font-weight: bold !default;
  101. $list-inline-padding: 5px !default;
  102. // Components
  103. //
  104. // Define common padding and border radius sizes and more.
  105. $line-height-lg: (4 / 3) !default;
  106. $line-height-sm: 1.5 !default;
  107. $border-radius: 0.2rem !default;
  108. $border-radius-lg: 0.3rem !default;
  109. $border-radius-sm: 0.1rem !default;
  110. $caret-width: .3em !default;
  111. $caret-width-lg: $caret-width !default;
  112. // Links
  113. // -------------------------
  114. $link-decoration: none !default;
  115. $link-hover-decoration: none !default;
  116. // Tables
  117. //
  118. // Customizes the `.table` component with basic values, each used across all table variations.
  119. $table-cell-padding: .75rem !default;
  120. $table-sm-cell-padding: .3rem !default;
  121. // Forms
  122. $input-padding-x: .75rem !default;
  123. $input-padding-y: .6rem !default;
  124. $input-line-height: 1.35rem !default;
  125. $input-btn-border-width: 1px;
  126. $input-border-radius: 0 $border-radius $border-radius 0 !default;
  127. $input-border-radius-lg: 0 $border-radius-lg $border-radius-lg 0 !default;
  128. $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
  129. $label-border-radius: $border-radius 0 0 $border-radius !default;
  130. $label-border-radius-lg: $border-radius-lg 0 0 $border-radius-lg !default;
  131. $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
  132. $input-padding-x-sm: .5rem !default;
  133. $input-padding-y-sm: .25rem !default;
  134. $input-padding-x-lg: 1.5rem !default;
  135. $input-padding-y-lg: .75rem !default;
  136. $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
  137. $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
  138. $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
  139. $form-group-margin-bottom: $spacer-y !default;
  140. $gf-form-margin: 0.2rem;
  141. $cursor-disabled: not-allowed !default;
  142. // Form validation icons
  143. $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
  144. $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
  145. $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
  146. // Z-index master list
  147. // -------------------------
  148. // Used for a bird's eye view of components dependent on the z-axis
  149. // Try to avoid customizing these :)
  150. $zindex-dropdown: 1000;
  151. $zindex-tooltip: 1020;
  152. $zindex-navbar-fixed: 1030;
  153. $zindex-modal-backdrop: 1040;
  154. $zindex-modal: 1050;
  155. // Buttons
  156. //
  157. $btn-padding-x: 1rem !default;
  158. $btn-padding-y: .6rem !default;
  159. $btn-line-height: 1.25 !default;
  160. $btn-font-weight: normal !default;
  161. $btn-padding-x-sm: .5rem !default;
  162. $btn-padding-y-sm: .25rem !default;
  163. $btn-padding-x-lg: 1.5rem !default;
  164. $btn-padding-y-lg: .75rem !default;
  165. $btn-border-radius: 3px;
  166. // sidemenu
  167. $side-menu-width: 14rem;