_variables.scss 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. // ================================================================================================
  2. // File Name: variables.scss
  3. // Description: Custom overrides of Bootstrap variables
  4. // ----------------------------------------------------------------------------------------------
  5. // Item name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  6. // Author: PIXINVENT
  7. // Author URL: http://www.themeforest.net/user/pixinvent
  8. // ================================================================================================
  9. // Color system
  10. $white: #fff;
  11. $body-bg: #f8f8f8;
  12. $gray-100: #babfc7; // $gray-lightest
  13. $gray-200: #ededed; // $gray-lighter
  14. $gray-300: #dae1e7; // $gray-light
  15. $gray-400: #636363;
  16. $gray-500: #adb5bd;
  17. $gray-600: #b8c2cc; // $gray
  18. $gray-700: #4e5154;
  19. $gray-800: #1e1e1e; // $gray-dark
  20. $gray-900: #2a2e30;
  21. $black: #22292f;
  22. //$indigo: #4d5ec1;
  23. $indigo: #5c6bc6;
  24. $blue: #3085d6; //$info
  25. $red: #ea5455; //$danger
  26. $orange: #ff9f43; //$warning
  27. $green: #21b978; //$success
  28. $cyan: #7367f0; //$primary
  29. $primary: $indigo;
  30. $info: $blue;
  31. $warning: $orange;
  32. // Spacing
  33. //
  34. // Control the default styling of most Bootstrap elements by modifying these
  35. // variables. Mostly focused on spacing.
  36. // You can add more entries to the $spacers map, should you need more variation.
  37. // stylelint-disable
  38. $spacer: 1rem;
  39. $spacers: ();
  40. // stylelint-disable-next-line scss/dollar-variable-default
  41. $spacers: map-merge((0: 0,
  42. 25: ($spacer * .25),
  43. 50: ($spacer * .5),
  44. 75: ($spacer * .75),
  45. 1: ($spacer),
  46. 2: ($spacer * 1.5),
  47. 3: ($spacer * 3),
  48. 4: ($spacer * 3.5),
  49. 5: ($spacer * 4)),
  50. $spacers);
  51. // Body
  52. //
  53. // Settings for the `<body>` element.
  54. // $body-bg: $body-bg;
  55. $body-color: #626262;
  56. // Links
  57. //
  58. // Style anchor elements.
  59. $link-color: darken($primary, 5%);
  60. $link-hover-color: darken($link-color, 10%);
  61. $link-hover-decoration: none;
  62. // Grid columns
  63. //
  64. // Set the number of columns and specify the width of the gutters.
  65. $grid-gutter-width: 28px;
  66. // Components
  67. //
  68. // Define common padding and border radius sizes and more.
  69. $line-height-lg: 1.25;
  70. $line-height-sm: 1;
  71. $border-width: 1px;
  72. $border-color: $gray-200;
  73. $border-radius: 0.5rem;
  74. $border-radius-lg: 0.6rem;
  75. $border-radius-sm: 0.25rem;
  76. // Typography
  77. //
  78. // Font, line-height, and color for body text, headings, and more.
  79. // stylelint-disable value-keyword-case
  80. $font-family-sans-serif: "Montserrat",
  81. Helvetica,
  82. Arial,
  83. serif;
  84. $font-family-monospace: "Montserrat",
  85. Helvetica,
  86. Arial,
  87. serif;
  88. // stylelint-enable value-keyword-case
  89. $font-size-base: 1rem;
  90. $font-size-sm: ceil($font-size-base * 0.85);
  91. $font-size-lg: ceil($font-size-base * 1.25);
  92. $line-height-base: 1.45;
  93. $h1-font-size: $font-size-base * 2;
  94. $h2-font-size: $font-size-base * 1.74;
  95. $h3-font-size: $font-size-base * 1.51;
  96. $h4-font-size: $font-size-base * 1.32;
  97. $h5-font-size: $font-size-base * 1.14;
  98. $headings-margin-bottom: ($spacer / 2);
  99. $headings-font-family: inherit;
  100. $headings-font-weight: 500;
  101. $headings-color: #2c2c2c;
  102. $small-font-size: smaller;
  103. // Tables
  104. $table-border-color: $body-bg;
  105. // Buttons + Forms
  106. $btn-padding-y: 0.9rem;
  107. $btn-padding-x: 2rem;
  108. $input-btn-padding-y: .75rem;
  109. $input-btn-padding-x: 2rem;
  110. $input-btn-padding-y-sm: 0.5rem;
  111. $input-btn-padding-x-sm: 1.5rem;
  112. $input-btn-font-size-sm: $font-size-base * 0.7;
  113. $input-btn-padding-y-lg: 1rem;
  114. $input-btn-padding-x-lg: 2.5rem;
  115. $input-btn-font-size-lg: $font-size-base * 1.25;
  116. $btn-line-height: 1;
  117. $input-btn-border-width: 0;
  118. $btn-border-radius: .4285rem;
  119. $btn-border-radius-lg: 0.4285rem;
  120. $btn-border-radius-sm: 0.4285rem;
  121. // Forms
  122. $input-padding-y: .7rem !default;
  123. $input-padding-x: .7rem !default;
  124. $input-font-size: .96rem;
  125. $input-line-height: $line-height-lg;
  126. $input-padding-y-sm: .5rem !default;
  127. $input-padding-x-sm: 1.5rem !default;
  128. $input-padding-y-lg: $input-btn-padding-y-lg !default;
  129. $input-padding-x-lg: 2.5rem !default;
  130. $input-disabled-bg: #f5f5f1;
  131. $input-color: $gray-700;
  132. $input-border-color: rgba(0,0,0,.2);
  133. $input-border-width: $border-width;
  134. $input-border-radius: 5px;
  135. $input-border-radius-lg: 6px;
  136. $input-border-radius-sm: 4px;
  137. $input-focus-border-color: $primary;
  138. $input-focus-box-shadow :0 3px 10px 0 rgba(0,0,0,.15);
  139. $input-placeholder-color: rgba(0,0,0,.5);
  140. $input-plaintext-color: $gray-500;
  141. $input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + 1px) !default;
  142. $custom-checkbox-indicator-border-radius: $border-radius-sm;
  143. $custom-select-border-radius:$input-border-radius;
  144. $custom-select-focus-box-shadow: $input-focus-box-shadow;
  145. $custom-file-line-height:1.5rem;
  146. // Dropdowns
  147. //
  148. // Dropdown menu container and contents.
  149. $dropdown-border-radius: 5px;
  150. $dropdown-link-hover-bg: $body-bg;
  151. $dropdown-divider-bg: rgba(0, 0, 0, 0.08);
  152. $dropdown-font-size: .9375rem;
  153. $dropdown-spacer: .5rem;
  154. $zindex-dropdown: 10;
  155. // Pagination
  156. $pagination-padding-y: 0.65rem;
  157. $pagination-padding-x: 0.911rem;
  158. $pagination-padding-y-lg: .5rem;
  159. $pagination-padding-x-lg: 1rem;
  160. $pagination-padding-y-sm: .5rem;
  161. $pagination-padding-x-sm: .75rem;
  162. // Cards
  163. $card-spacer-y: 1.5rem;
  164. $card-spacer-x: 1.5rem;
  165. //Alerts
  166. $alert-padding-y: 0.71rem;
  167. $alert-padding-x: 0.71rem;
  168. // Nav tabs
  169. $nav-link-padding-y:0.357rem;
  170. $nav-link-padding-x: 0.5rem;
  171. // Tooltips
  172. $tooltip-bg: #323232;
  173. $tooltip-padding-y: .4rem;
  174. $tooltip-padding-x: .775rem;
  175. $tooltip-font-size: .857rem;
  176. $tooltip-border-radius: .428rem;
  177. $tooltip-opacity: 1;
  178. $tooltip-max-width: 220px;
  179. // Popovers
  180. $popover-border-radius: .428rem;
  181. $popover-header-bg: $primary;
  182. $popover-font-size: .857rem;
  183. // Progress
  184. $progress-height: .357rem;
  185. $progress-border-radius: 1.28rem;
  186. // Badges
  187. $badge-font-size: 80%;
  188. $badge-padding-y: .35em;
  189. $badge-padding-x: .4em;
  190. $badge-border-radius: .25rem;
  191. // Code
  192. $code-font-size: 90% !default;
  193. $kbd-bg: #eee;
  194. // Switch
  195. $custom-switch-width: 3rem;
  196. $custom-switch-indicator-border-radius: .857rem;
  197. $custom-switch-indicator-size: 1.286rem;