_variables.scss 5.9 KB

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