You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

725 lines
23 KiB

  1. @use "sass:math";
  2. // =FUNCTIONS
  3. // ---------------------------------------------------------------------------
  4. @function strip-unit($number) {
  5. @if type-of($number) == 'number' and not unitless($number)
  6. {
  7. @return math.div($number , ($number * 0 + 1));
  8. }
  9. @return $number;
  10. }
  11. // =BREAKPOINTS
  12. // ---------------------------------------------------------------------------
  13. $sm: 768px !default;
  14. $md: 1024px !default;
  15. $lg: 1440px !default;
  16. // =WIDTH
  17. // ---------------------------------------------------------------------------
  18. $width-small: 420px !default;
  19. $width-medium: 820px !default;
  20. $width-large: 1000px !default;
  21. // =SPACE
  22. // ---------------------------------------------------------------------------
  23. $space-2: 2px !default;
  24. $space-4: 4px !default;
  25. $space-8: 8px !default;
  26. $space-12: 12px !default;
  27. $space-16: 16px !default;
  28. $space-20: 20px !default;
  29. $space-24: 24px !default;
  30. $space-28: 28px !default;
  31. $space-32: 32px !default;
  32. $space-36: 36px !default;
  33. $space-40: 40px !default;
  34. $space-44: 44px !default;
  35. $space-48: 48px !default;
  36. $space-52: 52px !default;
  37. $space-56: 56px !default;
  38. $space-60: 60px !default;
  39. $space-64: 64px !default;
  40. $space-80: 80px !default;
  41. $space-100: 100px !default;
  42. $space-120: 120px !default;
  43. // map
  44. $map-space: (
  45. 2: $space-2,
  46. 4: $space-4,
  47. 8: $space-8,
  48. 12: $space-12,
  49. 16: $space-16,
  50. 20: $space-20,
  51. 24: $space-24,
  52. 28: $space-28,
  53. 32: $space-32,
  54. 36: $space-36,
  55. 40: $space-40,
  56. 44: $space-44,
  57. 48: $space-48,
  58. 52: $space-52,
  59. 56: $space-56,
  60. 60: $space-60,
  61. 64: $space-64,
  62. 80: $space-80,
  63. 100: $space-100,
  64. 120: $space-120
  65. );
  66. // =ZINDEX
  67. // ---------------------------------------------------------------------------
  68. $z-over-content: 100 !default; // overlays
  69. $z-over-page: 200 !default; // modals/offcanvas
  70. $z-over-control: 300 !default; // dropdowns
  71. $z-over-all: 400 !default; // messages
  72. // =GRID
  73. // ---------------------------------------------------------------------------
  74. $grid-gap: $space-24 !default;
  75. // =FONTFAMILY
  76. // ---------------------------------------------------------------------------
  77. $font-family-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !default;
  78. $font-family-monospace: monospace, monospace !default;
  79. // =COLORS
  80. // ---------------------------------------------------------------------------
  81. // Base
  82. $color-black: #111113 !default;
  83. $color-red: #ee2455 !default;
  84. $color-orange: #ff6951 !default;
  85. $color-yellow: #feb701 !default;
  86. $color-blue: #158df7 !default;
  87. $color-violet: #7b2ed7 !default;
  88. $color-green: #20bc71 !default;
  89. $color-inverted: #fff !default;
  90. // Text
  91. $color-text: #111113 !default;
  92. $color-text-secondary: rgba($color-text, .6) !default;
  93. $color-text-tertiary: rgba($color-text, .5) !default;
  94. $color-text-disabled: rgba($color-text, .4) !default;
  95. // Links
  96. $color-link: #158df7 !default;
  97. $color-link-hover: $color-red !default;
  98. // States
  99. $color-error: $color-red !default;
  100. $color-success: $color-green !default;
  101. $color-focus: $color-blue !default;
  102. $color-warning: $color-orange !default;
  103. // Accent
  104. $color-accent: $color-red !default;
  105. $color-highlight: rgba($color-focus, .1) !default;
  106. // Button
  107. $color-button: #0c3dd7 !default;
  108. // =GLOBALS
  109. // ---------------------------------------------------------------------------
  110. // Font Metrics
  111. $letter-height: math.div(12,16);
  112. $crop-top: 0.49em;
  113. $crop-bottom: 0.49em;
  114. // Font Size
  115. $font-size-smaller: 0.75em !default; // 12px
  116. $font-size-small: 0.875em !default; // 14px
  117. $font-size-default: 1em !default; // 16px
  118. $font-size-big: 1.125em !default; // 18px
  119. $font-size-large: 1.3125em !default; // 22px
  120. $font-size-ui: 0.9375em !default; // 15px
  121. // Baseline
  122. $base-line: 1.5 !default;
  123. $base-line-big: 1.45 !default;
  124. $base-line-large: 1.45 !default;
  125. $base-line-ems: $base-line * 1em !default;
  126. // Box Shadow
  127. $shadow-1: 0 1px 3px rgba($color-black, .15) !default;
  128. $shadow-2: 0 6px 24px rgba($color-black, .12) !default;
  129. $shadow-3: 0 15px 40px rgba($color-black, .2) !default;
  130. // Border
  131. $border-radius: 4px !default;
  132. $border: 1px solid rgba($color-black, .07) !default;
  133. // Input/Buttons Height
  134. $controls-height: ((math.div(40,(strip-unit($font-size-ui)*16))) * 1em) !default; // 40px in ems
  135. $controls-height-small: ((math.div(32,(strip-unit($font-size-small)*16))) * 1em) !default; // 32px in ems
  136. $controls-height-big: ((math.div(44,(strip-unit($font-size-big)*16))) * 1em) !default; // 44px in ems
  137. // Overlay
  138. $overlay-background-color: rgba($color-black, .18) !default;
  139. // =HEADINGS
  140. // ---------------------------------------------------------------------------
  141. // Font Size
  142. $headings-font-size-1: 2.5em !default; // 40
  143. $headings-font-size-2: 1.75em !default; // 28
  144. $headings-font-size-3: 1.5em !default; // 24
  145. $headings-font-size-4: 1.25em !default; // 20
  146. $headings-font-size-5: 1em !default; // 16
  147. $headings-font-size-6: .75em !default; // 12
  148. // Baseline
  149. $headings-base-line: 1.2 !default;
  150. // Weight
  151. $headings-font-weight: bold !default;
  152. // =ELEMENTS
  153. // ---------------------------------------------------------------------------
  154. // code
  155. $code-color-text: rgba($color-black, .75) !default;
  156. $code-background: rgba($color-black, .05) !default;
  157. $code-border-width: 0 !default;
  158. $code-border-style: solid !default;
  159. $code-border-color: transparent !default;
  160. $code-border-radius: $border-radius !default;
  161. // kbd
  162. $kbd-color-text: rgba($color-black, .75) !default;
  163. $kbd-background: none !default;
  164. $kbd-border-width: 1px !default;
  165. $kbd-border-style: solid !default;
  166. $kbd-border-color: rgba($color-black, .2) !default;
  167. $kbd-border-radius: $border-radius !default;
  168. // blockquote
  169. $blockquote-font-size: $font-size-big !default;
  170. $blockquote-font-weight: normal !default;
  171. $blockquote-font-style: italic !default;
  172. $blockquote-line-height: $base-line-big;
  173. $blockquote-color-text: $color-text-secondary !default;
  174. $blockquote-padding: .4em 0 .4em 1rem !default;
  175. $blockquote-border: none !default;
  176. $blockquote-border-left: 3px solid rgba($color-focus, .6) !default;
  177. // pre
  178. $pre-font-size: $font-size-small !default;
  179. $pre-line-height: $base-line !default;
  180. $pre-color-text: $color-black !default;
  181. $pre-background: transparent !default;
  182. $pre-padding: 1rem !default;
  183. $pre-border-width: 1px !default;
  184. $pre-border-style: solid !default;
  185. $pre-border-color: rgba($color-black, .08) !default;
  186. $pre-border-radius: $border-radius !default;
  187. // list
  188. $list-bar-space: 1em !default;
  189. // =ALERT
  190. // ---------------------------------------------------------------------------
  191. $alert-font-family: $font-family-text !default;
  192. $alert-font-size: $font-size-ui !default;
  193. $alert-font-weight: 500 !default;
  194. $alert-text-transform: none !default;
  195. $alert-background: #fff !default;
  196. $alert-color-text: $color-text !default;
  197. $alert-padding: $space-16 $space-32 $space-16 $space-16 !default;
  198. $alert-box-shadow: none !default;
  199. $alert-border-width: 1px !default;
  200. $alert-border-style: solid !default;
  201. $alert-border-color: rgba($color-black, .1) !default;
  202. $alert-border-radius: $border-radius !default;
  203. // link
  204. $alert-link-color-hover: $color-link-hover !default;
  205. // error
  206. $alert-error-background: rgba($color-error, .07) !default;
  207. $alert-error-border-color: rgba($color-error, .3) !default;
  208. $alert-error-color-text: $color-error !default;
  209. $alert-error-link-color-hover: $color-black !default;
  210. // success
  211. $alert-success-background: rgba($color-success, .07) !default;
  212. $alert-success-border-color: rgba($color-success, .3) !default;
  213. $alert-success-color-text: $color-success !default;
  214. $alert-success-link-color-hover: $color-black !default;
  215. // focus
  216. $alert-focus-background: rgba($color-focus, .07) !default;
  217. $alert-focus-border-color: rgba($color-focus, .3) !default;
  218. $alert-focus-color-text: $color-focus !default;
  219. $alert-focus-link-color-hover: $color-black !default;
  220. // inverted
  221. $alert-inverted-background: rgba($color-inverted, .15) !default;
  222. $alert-inverted-border-color: rgba($color-inverted, .4) !default;
  223. $alert-inverted-color-text: $color-inverted !default;
  224. $alert-inverted-link-color-hover: rgba($color-inverted, .6) !default;
  225. // =FORM
  226. // ---------------------------------------------------------------------------
  227. // item
  228. $form-item-margin: $space-16 !default;
  229. $form-item-inline-offset: 150px !default;
  230. // legend
  231. $form-legend-font-size: $font-size-smaller !default;
  232. $form-legend-font-weight: bold !default;
  233. $form-legend-text-transform: uppercase !default;
  234. $form-legend-color-text: rgba($color-black, .5) !default;
  235. // fieldset
  236. $form-fieldset-padding: $space-32 !default;
  237. $form-fieldset-border-width: 1px !default;
  238. $form-fieldset-border-style: solid !default;
  239. $form-fieldset-border-color: rgba($color-black, .1) !default;
  240. $form-fieldset-border-radius: $border-radius !default;
  241. // label
  242. $form-label-font-size: $font-size-ui !default;
  243. $form-label-font-weight: normal !default;
  244. $form-label-text-transform: none !default;
  245. $form-label-color-text: $color-text !default;
  246. // desc
  247. $form-desc-font-size: .75rem !default;
  248. $form-desc-font-weight: normal !default;
  249. $form-desc-text-transform: none !default;
  250. $form-desc-color-text: $color-text-tertiary !default;
  251. // required
  252. $form-req-font-size: 1rem !default;
  253. $form-req-font-weight: bold !default;
  254. $form-req-color-text: $color-error !default;
  255. // =INPUT
  256. // ---------------------------------------------------------------------------
  257. // placeholder
  258. $input-placeholder-text-color: rgba($color-black, .4) !default;
  259. // textarea
  260. $input-textarea-base-line: $base-line !default;
  261. $input-textarea-padding: $space-8 !default;
  262. // default
  263. $input-default-font-size: $font-size-ui !default;
  264. $input-default-font-weight: normal !default;
  265. $input-default-height: $controls-height !default;
  266. $input-default-padding: 0 $space-8 !default;
  267. $input-default-background: #fff !default;
  268. $input-default-color-text: rgba($color-black, .8) !default;
  269. $input-default-border-width: 1px !default;
  270. $input-default-border-style: solid !default;
  271. $input-default-border-color: rgba($color-black, .1) !default;
  272. $input-default-border-radius: $border-radius !default;
  273. $input-default-box-shadow: none !default;
  274. // hover
  275. $input-hover-background: #fff !default;
  276. $input-hover-color-text: inherit !default;
  277. $input-hover-border-width: 1px !default;
  278. $input-hover-border-style: solid !default;
  279. $input-hover-border-color: rgba($color-black, .2) !default;
  280. $input-hover-box-shadow: none !default;
  281. // focus
  282. $input-focus-background: #fff !default;
  283. $input-focus-color-text: inherit !default;
  284. $input-focus-border-width: 1px !default;
  285. $input-focus-border-style: solid !default;
  286. $input-focus-border-color: rgba($color-focus, .5) !default;
  287. $input-focus-box-shadow: 0 0 3px rgba($color-focus, .5) inset !default;
  288. // error
  289. $input-error-background: rgba($color-error, .05) !default;
  290. $input-error-color-text: inherit !default;
  291. $input-error-border-width: 1px !default;
  292. $input-error-border-style: solid !default;
  293. $input-error-border-color: rgba($color-error, .5) !default;
  294. $input-error-box-shadow: none inset !default;
  295. // error focus
  296. $input-error-focus-border-color: rgba($color-error, .75) !default;
  297. $input-error-focus-box-shadow: 0 0 3px rgba($color-error, .5) inset !default;
  298. // success
  299. $input-success-background: rgba($color-success, .05) !default;
  300. $input-success-color-text: inherit !default;
  301. $input-success-border-width: 1px !default;
  302. $input-success-border-style: solid !default;
  303. $input-success-border-color: rgba($color-success, .5) !default;
  304. $input-success-box-shadow: none inset !default;
  305. // success focus
  306. $input-success-focus-border-color: rgba($color-success, .75) !default;
  307. $input-success-focus-box-shadow: 0 0 3px rgba($color-success, .5) inset !default;
  308. // warning
  309. $input-warning-background: rgba($color-warning, .05) !default;
  310. $input-warning-color-text: inherit !default;
  311. $input-warning-border-width: 1px !default;
  312. $input-warning-border-style: solid !default;
  313. $input-warning-border-color: rgba($color-warning, .5) !default;
  314. $input-warning-box-shadow: none inset !default;
  315. // warning focus
  316. $input-warning-focus-border-color: rgba($color-warning, .75) !default;
  317. $input-warning-focus-box-shadow: 0 0 3px rgba($color-warning, .5) inset !default;
  318. // disabled
  319. $input-disabled-opacity: .7 !default;
  320. $input-disabled-color-text: rgba($color-black, .6) !default;
  321. // apppend / prepend
  322. $input-append-font-size: $font-size-small !default;
  323. $input-append-font-weight: normal !default;
  324. $input-append-text-transform: none !default;
  325. $input-append-padding: 0 $space-16 !default;
  326. $input-append-background: #fff !default;
  327. $input-append-color-text: rgba($color-black, .5) !default;
  328. $input-append-border-width: 1px !default;
  329. $input-append-border-style: solid !default;
  330. $input-append-border-color: rgba($color-black, .1) !default;
  331. // =BUTTON
  332. // ---------------------------------------------------------------------------
  333. // default
  334. $button-default-font-size: $font-size-ui !default;
  335. $button-default-font-weight: 500 !default;
  336. $button-default-text-transform: none !default;
  337. $button-default-text-decoration: none !default;
  338. $button-default-height: $controls-height !default;
  339. $button-default-padding: .5em 1.6em !default;
  340. $button-default-background: $color-button !default;
  341. $button-default-color-text: rgba(#fff, .95) !default;
  342. $button-default-border-width: 0 !default;
  343. $button-default-border-style: solid !default;
  344. $button-default-border-color: transparent !default;
  345. $button-default-border-radius: $border-radius !default;
  346. $button-default-box-shadow: none !default;
  347. // secondary
  348. $button-secondary-font-size: $font-size-ui !default;
  349. $button-secondary-font-weight: 500 !default;
  350. $button-secondary-text-transform: none !default;
  351. $button-secondary-text-decoration: none !default;
  352. $button-secondary-height: $controls-height !default;
  353. $button-secondary-padding: .5em 1.6em !default;
  354. $button-secondary-background: none !default;
  355. $button-secondary-color-text: $color-button !default;
  356. $button-secondary-border-width: 2px !default;
  357. $button-secondary-border-style: solid !default;
  358. $button-secondary-border-color: $color-button !default;
  359. $button-secondary-border-radius: $border-radius !default;
  360. $button-secondary-box-shadow: none !default;
  361. // tertiary
  362. $button-tertiary-font-size: $font-size-ui !default;
  363. $button-tertiary-font-weight: 500 !default;
  364. $button-tertiary-text-transform: none !default;
  365. $button-tertiary-text-decoration: none !default;
  366. $button-tertiary-height: $controls-height !default;
  367. $button-tertiary-padding: .5em 0 !default;
  368. $button-tertiary-background: none !default;
  369. $button-tertiary-color-text: $color-button !default;
  370. $button-tertiary-border-width: 0 !default;
  371. $button-tertiary-border-style: solid !default;
  372. $button-tertiary-border-color: transparent !default;
  373. $button-tertiary-border-radius: $border-radius !default;
  374. $button-tertiary-box-shadow: none !default;
  375. // small
  376. $button-small-font-size: $font-size-small !default;
  377. $button-small-height: $controls-height-small !default;
  378. $button-small-padding: .45em 1.15em !default;
  379. // big
  380. $button-big-font-size: $font-size-big !default;
  381. $button-big-height: $controls-height-big !default;
  382. $button-big-padding: .45em 1.45em !default;
  383. // =BREADCRUMB
  384. // ---------------------------------------------------------------------------
  385. $breadcrumb-font-size: $font-size-small !default;
  386. $breadcrumb-font-weight: normal !default;
  387. $breadcrumb-text-transform: none !default;
  388. $breadcrumb-color-text: $color-text !default;
  389. $breadcrumb-active-color-text: rgba($color-black, .55) !default;
  390. // separator
  391. $breadcrumb-separator-content: '/' !default;
  392. $breadcrumb-separator-color-text: rgba($color-black, .4) !default;
  393. // =DROPDOWN
  394. // ---------------------------------------------------------------------------
  395. $dropdown-width: 280px !default;
  396. $dropdown-font-size: $font-size-ui !default;
  397. $dropdown-font-weight: normal !default;
  398. $dropdown-padding: 0 0 $space-2 0 !default;
  399. $dropdown-background: #fff !default;
  400. $dropdown-box-shadow: $shadow-2 !default;
  401. $dropdown-border-width: 0 !default;
  402. $dropdown-border-style: solid !default;
  403. $dropdown-border-color: transparent !default;
  404. $dropdown-border-radius: $border-radius !default;
  405. // item
  406. $dropdown-item-background: none !default;
  407. $dropdown-item-color-text: $color-text !default;
  408. // item hover
  409. $dropdown-item-hover-background: rgba($color-black, .04) !default;
  410. $dropdown-item-hover-color-text: $color-black !default;
  411. // item active
  412. $dropdown-item-active-background: none !default;
  413. $dropdown-item-active-color-text: rgba($color-text, .4) !default;
  414. // separator
  415. $dropdown-separator-border-bottom: 1px solid rgba($color-black, .05) !default;
  416. // =LABEL
  417. // ---------------------------------------------------------------------------
  418. $label-font-size: 13px !default;
  419. $label-font-weight: 500 !default;
  420. $label-text-transform: none !default;
  421. $label-letter-spacing: 0 !default;
  422. $label-line-height: 20px !default;
  423. $label-background: #f3f3f3 !default;
  424. $label-color-text: rgba($color-black, .85) !default;
  425. $label-padding: 0 $space-8 !default;
  426. $label-border-width: 1px !default;
  427. $label-border-style: solid !default;
  428. $label-border-color: transparent !default;
  429. $label-border-radius: $border-radius !default;
  430. // secondary
  431. $label-secondary-font-size: 13px !default;
  432. $label-secondary-font-weight: 500 !default;
  433. $label-secondary-letter-spacing: 0 !default;
  434. $label-secondary-text-transform: none !default;
  435. $label-secondary-background: none !default;
  436. $label-secondary-color-text: rgba($color-black, .85) !default;
  437. $label-secondary-padding: 0 .5em !default;
  438. $label-secondary-border-width: 1px !default;
  439. $label-secondary-border-style: solid !default;
  440. $label-secondary-border-color: rgba($color-black, .2) !default;
  441. $label-secondary-border-radius: $border-radius !default;
  442. // tertiary
  443. $label-tertiary-font-size: 12px !default;
  444. $label-tertiary-font-weight: bold !default;
  445. $label-tertiary-letter-spacing: .035em !default;
  446. $label-tertiary-text-transform: uppercase !default;
  447. $label-tertiary-background: none !default;
  448. $label-tertiary-color-text: $color-text !default;
  449. $label-tertiary-padding: 0 .2em !default;
  450. $label-tertiary-border-width: 1px !default;
  451. $label-tertiary-border-style: solid !default;
  452. $label-tertiary-border-color: transparent !default;
  453. $label-tertiary-border-radius: 0 !default;
  454. // badge
  455. $badge-font-size: 10px !default;
  456. $badge-line-height: 16px !default;
  457. // =MESSAGE
  458. // ---------------------------------------------------------------------------
  459. $message-font-family: $font-family-text !default;
  460. $message-font-size: $font-size-ui !default;
  461. $message-font-weight: normal !default;
  462. $message-text-transform: none !default;
  463. $message-padding: $space-16 !default;
  464. $message-width: 360px !default;
  465. $message-background: #fff !default;
  466. $message-box-shadow: $shadow-2 !default;
  467. $message-color-text: $color-text !default;
  468. $message-border-width: 1px !default;
  469. $message-border-style: solid !default;
  470. $message-border-color: transparent !default;
  471. $message-border-radius: $border-radius !default;
  472. $message-link-color-hover: rgba($color-text, .6) !default;
  473. // error
  474. $message-error-background: $color-error !default;
  475. $message-error-color-text: #fff !default;
  476. $message-error-link-color-hover: rgba(#fff, .7) !default;
  477. $message-error-border-color: transparent !default;
  478. // success
  479. $message-success-background: $color-success !default;
  480. $message-success-color-text: #fff !default;
  481. $message-success-link-color-hover: rgba(#fff, .7) !default;
  482. $message-success-border-color: transparent !default;
  483. // focus
  484. $message-focus-background: $color-focus !default;
  485. $message-focus-color-text: rgba(#fff, .95) !default;
  486. $message-focus-link-color-hover: rgba(#fff, .7) !default;
  487. $message-focus-border-color: transparent !default;
  488. // black
  489. $message-black-background: $color-black !default;
  490. $message-black-color-text: #fff !default;
  491. $message-black-link-color-hover: rgba(#fff, .7) !default;
  492. $message-black-border-color: transparent !default;
  493. // =MODAL
  494. // ---------------------------------------------------------------------------
  495. $modal-font-family: inherit !default;
  496. $modal-background: #fff !default;
  497. $modal-box-shadow: $shadow-3 !default;
  498. $modal-border-radius: $border-radius !default;
  499. $modal-color-text: $color-text !default;
  500. // header
  501. $modal-header-background: none !default;
  502. $modal-header-padding: $space-20 $space-24 !default;
  503. $modal-header-font-size: 1.05rem !default;
  504. $modal-header-font-weight: bold !default;
  505. $modal-header-border-bottom: 1px solid rgba($color-black, .05) !default;
  506. // body
  507. $modal-body-font-size: inherit !default;
  508. $modal-body-background: none !default;
  509. $modal-body-padding: $space-24 !default;
  510. // footer
  511. $modal-footer-font-size: inherit !default;
  512. $modal-footer-font-weight: normal !default;
  513. $modal-footer-background: none !default;
  514. $modal-footer-padding: $space-16 $space-24 !default;
  515. $modal-footer-border-top: 1px solid rgba($color-black, .05) !default;
  516. // =NAVIGATION
  517. // ---------------------------------------------------------------------------
  518. // navbar
  519. $navbar-item-space: $space-28;
  520. // =OFFCANVAS
  521. // ---------------------------------------------------------------------------
  522. $offcanvas-width: 300px;
  523. // =PAGER
  524. // ---------------------------------------------------------------------------
  525. $pager-font-size: $font-size-small !default;
  526. $pager-font-weight: normal !default;
  527. $pager-text-transform: none !default;
  528. $pager-color-text: $color-text !default;
  529. $pager-padding: $space-8 $space-16 !default;
  530. $pager-border-width: 1px !default;
  531. $pager-border-style: solid !default;
  532. $pager-border-color: rgba($color-black, .1) !default;
  533. $pager-border-radius: $border-radius !default;
  534. // hover
  535. $pager-hover-color-text: $color-black !default;
  536. $pager-hover-border-color: $color-black !default;
  537. // current
  538. $pager-current-color-text: rgba($color-black, .9) !default;
  539. $pager-current-border-color: rgba($color-black, .5) !default;
  540. // active
  541. $pager-active-color-text: rgba($color-black, .7) !default;
  542. $pager-active-border-color: rgba($color-black, .2) !default;
  543. // =PROGRESS
  544. // ---------------------------------------------------------------------------
  545. $progress-background-box-color: rgba($color-black, .2) !default;
  546. $progress-background-color: $color-focus !default;
  547. // =TABLE
  548. // ---------------------------------------------------------------------------
  549. $table-font-size: $font-size-ui !default;
  550. $table-color-text: inherit !default;
  551. $table-padding-tb: $space-16 !default;
  552. $table-padding-rl: $space-16 !default;
  553. $table-border: 1px solid #eee !default;
  554. $table-background-striped: #fafafa !default;
  555. $table-th-border-width: 1px !default;
  556. $table-th-border-color: #eee !default;
  557. // head
  558. $table-head-font-weight: 700 !default;
  559. $table-head-color-text: inherit !default;
  560. // caption
  561. $table-caption-font-size: 11px !default;
  562. $table-caption-font-weight: bold !default;
  563. $table-caption-color-text: rgba($color-text, .4) !default;
  564. $table-caption-text-transform: uppercase !default;
  565. $table-caption-letter-spacing: 1px !default;
  566. // =TABS
  567. // ---------------------------------------------------------------------------
  568. $tabs-font-size: $font-size-ui !default;
  569. $tabs-font-weight: normal !default;
  570. $tabs-text-transform: none !default;
  571. $tabs-text-decoration: none !default;
  572. $tabs-padding: 8px 20px !default;
  573. $tabs-background-color: transparent !default;
  574. $tabs-color-text: rgba($color-black, .65) !default;
  575. $tabs-border-width: 2px !default;
  576. $tabs-border-style: solid !default;
  577. $tabs-border-color: transparent !default;
  578. // hover
  579. $tabs-hover-background: none !default;
  580. $tabs-hover-color-text: $color-link !default;
  581. $tabs-hover-text-decoration: none !default;
  582. $tabs-hover-border-width: 2px !default;
  583. $tabs-hover-border-style: solid !default;
  584. $tabs-hover-border-color: $color-link !default;
  585. // active
  586. $tabs-active-background: none !default;
  587. $tabs-active-color-text: $color-black !default;
  588. $tabs-active-text-decoration: none !default;
  589. $tabs-active-border-width: 2px !default;
  590. $tabs-active-border-style: solid !default;
  591. $tabs-active-border-color: $color-black !default;