_variables.scss 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764
  1. // Colors
  2. // -------------------------------
  3. $light: #fff !default;
  4. $stable: #f8f8f8 !default;
  5. $positive: #387ef5 !default;
  6. $calm: #11c1f3 !default;
  7. $balanced: #33cd5f !default;
  8. $energized: #ffc900 !default;
  9. $assertive: #ef473a !default;
  10. $royal: #886aea !default;
  11. $dark: #444 !default;
  12. // Base
  13. // -------------------------------
  14. $font-family-sans-serif: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
  15. $font-family-light-sans-serif: '-apple-system', "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
  16. $font-family-serif: serif !default;
  17. $font-family-monospace: monospace !default;
  18. $font-family-base: $font-family-sans-serif !default;
  19. $font-size-base: 14px !default;
  20. $font-size-large: 18px !default;
  21. $font-size-small: 11px !default;
  22. $line-height-base: 1.428571429 !default; // 20/14
  23. $line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px
  24. $line-height-large: 1.33 !default;
  25. $line-height-small: 1.5 !default;
  26. $headings-font-family: $font-family-base !default;
  27. $headings-font-weight: 500 !default;
  28. $headings-line-height: 1.2 !default;
  29. $base-background-color: #fff !default;
  30. $base-color: #000 !default;
  31. $link-color: $positive !default;
  32. $link-hover-color: darken($link-color, 15%) !default;
  33. $content-padding: 10px !default;
  34. $padding-base-vertical: 6px !default;
  35. $padding-base-horizontal: 12px !default;
  36. $padding-large-vertical: 10px !default;
  37. $padding-large-horizontal: 16px !default;
  38. $padding-small-vertical: 5px !default;
  39. $padding-small-horizontal: 10px !default;
  40. $border-radius-base: 4px !default;
  41. $border-radius-large: 6px !default;
  42. $border-radius-small: 3px !default;
  43. // Content
  44. // -------------------------------
  45. $scroll-refresh-icon-color: #666666 !default;
  46. // Buttons
  47. // -------------------------------
  48. $button-color: #222 !default;
  49. $button-block-margin: 10px !default;
  50. $button-clear-padding: 6px !default;
  51. $button-border-radius: 4px !default;
  52. $button-border-width: 1px !default;
  53. $button-font-size: 16px !default;
  54. $button-height: 42px !default;
  55. $button-padding: 12px !default;
  56. $button-icon-size: 24px !default;
  57. $button-large-font-size: 20px !default;
  58. $button-large-height: 54px !default;
  59. $button-large-padding: 16px !default;
  60. $button-large-icon-size: 32px !default;
  61. $button-small-font-size: 12px !default;
  62. $button-small-height: 28px !default;
  63. $button-small-padding: 4px !default;
  64. $button-small-icon-size: 16px !default;
  65. $button-bar-button-font-size: 13px !default;
  66. $button-bar-button-height: 32px !default;
  67. $button-bar-button-padding: 8px !default;
  68. $button-bar-button-icon-size: 20px !default;
  69. $button-default-border: transparent;
  70. $button-default-active-border:null;
  71. $button-light-bg: $light !default;
  72. $button-light-text: #444 !default;
  73. $button-light-border: #ddd !default;
  74. $button-light-active-bg: #fafafa !default;
  75. $button-light-active-border: #ccc !default;
  76. $button-stable-bg: $stable !default;
  77. $button-stable-text: #444 !default;
  78. $button-stable-border: #b2b2b2 !default;
  79. $button-stable-active-bg: #e5e5e5 !default;
  80. $button-stable-active-border: #a2a2a2 !default;
  81. $button-positive-bg: $positive !default;
  82. $button-positive-text: #fff !default;
  83. $button-positive-border: darken($positive, 10%) !default;
  84. $button-positive-active-bg: darken($positive, 10%) !default;
  85. $button-positive-active-border: darken($positive, 10%) !default;
  86. $button-calm-bg: $calm !default;
  87. $button-calm-text: #fff !default;
  88. $button-calm-border: darken($calm, 10%) !default;
  89. $button-calm-active-bg: darken($calm, 10%) !default;
  90. $button-calm-active-border: darken($calm, 10%) !default;
  91. $button-assertive-bg: $assertive !default;
  92. $button-assertive-text: #fff !default;
  93. $button-assertive-border: darken($assertive, 10%) !default;
  94. $button-assertive-active-bg: darken($assertive, 10%) !default;
  95. $button-assertive-active-border: darken($assertive, 10%) !default;
  96. $button-balanced-bg: $balanced !default;
  97. $button-balanced-text: #fff !default;
  98. $button-balanced-border: darken($balanced, 10%) !default;
  99. $button-balanced-active-bg: darken($balanced, 10%) !default;
  100. $button-balanced-active-border: darken($balanced, 10%) !default;
  101. $button-energized-bg: $energized !default;
  102. $button-energized-text: #fff !default;
  103. $button-energized-border: darken($energized, 5%) !default;
  104. $button-energized-active-bg: darken($energized, 5%) !default;
  105. $button-energized-active-border: darken($energized, 5%) !default;
  106. $button-royal-bg: $royal !default;
  107. $button-royal-text: #fff !default;
  108. $button-royal-border: darken($royal, 8%) !default;
  109. $button-royal-active-bg: darken($royal, 8%) !default;
  110. $button-royal-active-border: darken($royal, 8%) !default;
  111. $button-dark-bg: $dark !default;
  112. $button-dark-text: #fff !default;
  113. $button-dark-border: #111 !default;
  114. $button-dark-active-bg: #262626 !default;
  115. $button-dark-active-border: #000 !default;
  116. $button-default-bg: $button-stable-bg !default;
  117. $button-default-text: $button-stable-text !default;
  118. $button-default-border: $button-stable-border !default;
  119. $button-default-active-bg: $button-stable-active-bg !default;
  120. $button-default-active-border: $button-stable-active-border !default;
  121. // Bars
  122. // -------------------------------
  123. $bar-height: 44px !default;
  124. $bar-title-font-size: 17px !default;
  125. $bar-padding-portrait: 5px !default;
  126. $bar-padding-landscape: 5px !default;
  127. $bar-transparency: 1 !default;
  128. $bar-footer-height: $bar-height !default;
  129. $bar-subheader-height: $bar-height !default;
  130. $bar-subfooter-height: $bar-height !default;
  131. $bar-light-bg: rgba($button-light-bg, $bar-transparency) !default;
  132. $bar-light-text: $button-light-text !default;
  133. $bar-light-border: $button-light-border !default;
  134. $bar-light-active-bg: $button-light-active-bg !default;
  135. $bar-light-active-border: $button-light-active-border !default;
  136. $bar-stable-bg: rgba($button-stable-bg, $bar-transparency) !default;
  137. $bar-stable-text: $button-stable-text !default;
  138. $bar-stable-border: $button-stable-border !default;
  139. $bar-stable-active-bg: $button-stable-active-bg !default;
  140. $bar-stable-active-border: $button-stable-active-border !default;
  141. $bar-positive-bg: rgba($button-positive-bg, $bar-transparency) !default;
  142. $bar-positive-text: $button-positive-text !default;
  143. $bar-positive-border: $button-positive-border !default;
  144. $bar-positive-active-bg: $button-positive-active-bg !default;
  145. $bar-positive-active-border: $button-positive-active-border !default;
  146. $bar-calm-bg: rgba($button-calm-bg, $bar-transparency) !default;
  147. $bar-calm-text: $button-calm-text !default;
  148. $bar-calm-border: $button-calm-border !default;
  149. $bar-calm-active-bg: $button-calm-active-bg !default;
  150. $bar-calm-active-border: $button-calm-active-border !default;
  151. $bar-assertive-bg: rgba($button-assertive-bg, $bar-transparency) !default;
  152. $bar-assertive-text: $button-assertive-text !default;
  153. $bar-assertive-border: $button-assertive-border !default;
  154. $bar-assertive-active-bg: $button-assertive-active-bg !default;
  155. $bar-assertive-active-border: $button-assertive-active-border !default;
  156. $bar-balanced-bg: rgba($button-balanced-bg, $bar-transparency) !default;
  157. $bar-balanced-text: $button-balanced-text !default;
  158. $bar-balanced-border: $button-balanced-border !default;
  159. $bar-balanced-active-bg: $button-balanced-active-bg !default;
  160. $bar-balanced-active-border: $button-balanced-active-border !default;
  161. $bar-energized-bg: rgba($button-energized-bg, $bar-transparency) !default;
  162. $bar-energized-text: $button-energized-text !default;
  163. $bar-energized-border: $button-energized-border !default;
  164. $bar-energized-active-bg: $button-energized-active-bg !default;
  165. $bar-energized-active-border: $button-energized-active-border !default;
  166. $bar-royal-bg: rgba($button-royal-bg, $bar-transparency) !default;
  167. $bar-royal-text: $button-royal-text !default;
  168. $bar-royal-border: $button-royal-border !default;
  169. $bar-royal-active-bg: $button-royal-active-bg !default;
  170. $bar-royal-active-border: $button-royal-active-border !default;
  171. $bar-dark-bg: rgba($button-dark-bg, $bar-transparency) !default;
  172. $bar-dark-text: $button-dark-text !default;
  173. $bar-dark-border: $button-dark-border !default;
  174. $bar-dark-active-bg: $button-dark-active-bg !default;
  175. $bar-dark-active-border: $button-dark-active-border !default;
  176. $bar-default-bg: $bar-light-bg !default;
  177. $bar-default-text: $bar-light-text !default;
  178. $bar-default-border: $bar-light-border !default;
  179. $bar-default-active-bg: $bar-light-active-bg !default;
  180. $bar-default-active-border: $bar-light-active-border !default;
  181. // Tabs
  182. // -------------------------------
  183. $tabs-height: 49px !default;
  184. $tabs-text-font-size: 14px !default;
  185. $tabs-text-font-size-side-icon: 10px !default;
  186. $tabs-icon-size: 32px !default;
  187. $tabs-badge-padding: 1px 6px !default;
  188. $tabs-badge-font-size: 12px !default;
  189. $tabs-light-bg: $button-light-bg !default;
  190. $tabs-light-border: $button-light-border !default;
  191. $tabs-light-text: $button-light-text !default;
  192. $tabs-stable-bg: $button-stable-bg !default;
  193. $tabs-stable-border: $button-stable-border !default;
  194. $tabs-stable-text: $button-stable-text !default;
  195. $tabs-positive-bg: $button-positive-bg !default;
  196. $tabs-positive-border: $button-positive-border !default;
  197. $tabs-positive-text: $button-positive-text !default;
  198. $tabs-calm-bg: $button-calm-bg !default;
  199. $tabs-calm-border: $button-calm-border !default;
  200. $tabs-calm-text: $button-calm-text !default;
  201. $tabs-assertive-bg: $button-assertive-bg !default;
  202. $tabs-assertive-border: $button-assertive-border !default;
  203. $tabs-assertive-text: $button-assertive-text !default;
  204. $tabs-balanced-bg: $button-balanced-bg !default;
  205. $tabs-balanced-border: $button-balanced-border !default;
  206. $tabs-balanced-text: $button-balanced-text !default;
  207. $tabs-energized-bg: $button-energized-bg !default;
  208. $tabs-energized-border: $button-energized-border !default;
  209. $tabs-energized-text: $button-energized-text !default;
  210. $tabs-royal-bg: $button-royal-bg !default;
  211. $tabs-royal-border: $button-royal-border !default;
  212. $tabs-royal-text: $button-royal-text !default;
  213. $tabs-dark-bg: $button-dark-bg !default;
  214. $tabs-dark-border: $button-dark-border !default;
  215. $tabs-dark-text: $button-dark-text !default;
  216. $tabs-default-bg: $tabs-stable-bg !default;
  217. $tabs-default-border: $tabs-stable-border !default;
  218. $tabs-default-text: $tabs-stable-text !default;
  219. $tab-item-max-width: 150px !default;
  220. $tabs-off-opacity: 0.4 !default;
  221. $tabs-striped-off-opacity: $tabs-off-opacity !default;
  222. $tabs-striped-off-color: #000 !default;
  223. $tabs-striped-border-width: 2px !default;
  224. // Items
  225. // -------------------------------
  226. $item-font-size: 16px !default;
  227. $item-border-width: 1px !default;
  228. $item-padding: 16px !default;
  229. $item-button-font-size: 18px !default;
  230. $item-button-line-height: 32px !default;
  231. $item-icon-font-size: 32px !default;
  232. $item-icon-fill-font-size: 28px !default;
  233. $item-icon-accessory-color: #ccc !default;
  234. $item-icon-accessory-font-size: 16px !default;
  235. $item-avatar-width: 40px !default;
  236. $item-avatar-height: 40px !default;
  237. $item-avatar-border-radius: 50% !default;
  238. $item-thumbnail-width: 80px !default;
  239. $item-thumbnail-height: 80px !default;
  240. $item-thumbnail-margin: 10px !default;
  241. $item-divider-bg: #f5f5f5 !default;
  242. $item-divider-color: #222 !default;
  243. $item-divider-padding: 5px 15px !default;
  244. $item-light-bg: $button-light-bg !default;
  245. $item-light-border: $button-light-border !default;
  246. $item-light-text: $button-light-text !default;
  247. $item-light-active-bg: $button-light-active-bg !default;
  248. $item-light-active-border: $button-light-active-border !default;
  249. $item-stable-bg: $button-stable-bg !default;
  250. $item-stable-border: $button-stable-border !default;
  251. $item-stable-text: $button-stable-text !default;
  252. $item-stable-active-bg: $button-stable-active-bg !default;
  253. $item-stable-active-border: $button-stable-active-border !default;
  254. $item-positive-bg: $button-positive-bg !default;
  255. $item-positive-border: $button-positive-border !default;
  256. $item-positive-text: $button-positive-text !default;
  257. $item-positive-active-bg: $button-positive-active-bg !default;
  258. $item-positive-active-border: $button-positive-active-border !default;
  259. $item-calm-bg: $button-calm-bg !default;
  260. $item-calm-border: $button-calm-border !default;
  261. $item-calm-text: $button-calm-text !default;
  262. $item-calm-active-bg: $button-calm-active-bg !default;
  263. $item-calm-active-border: $button-calm-active-border !default;
  264. $item-assertive-bg: $button-assertive-bg !default;
  265. $item-assertive-border: $button-assertive-border !default;
  266. $item-assertive-text: $button-assertive-text !default;
  267. $item-assertive-active-bg: $button-assertive-active-bg !default;
  268. $item-assertive-active-border: $button-assertive-active-border !default;
  269. $item-balanced-bg: $button-balanced-bg !default;
  270. $item-balanced-border: $button-balanced-border !default;
  271. $item-balanced-text: $button-balanced-text !default;
  272. $item-balanced-active-bg: $button-balanced-active-bg !default;
  273. $item-balanced-active-border: $button-balanced-active-border !default;
  274. $item-energized-bg: $button-energized-bg !default;
  275. $item-energized-border: $button-energized-border !default;
  276. $item-energized-text: $button-energized-text !default;
  277. $item-energized-active-bg: $button-energized-active-bg !default;
  278. $item-energized-active-border: $button-energized-active-border !default;
  279. $item-royal-bg: $button-royal-bg !default;
  280. $item-royal-border: $button-royal-border !default;
  281. $item-royal-text: $button-royal-text !default;
  282. $item-royal-active-bg: $button-royal-active-bg !default;
  283. $item-royal-active-border: $button-royal-active-border !default;
  284. $item-dark-bg: $button-dark-bg !default;
  285. $item-dark-border: $button-dark-border !default;
  286. $item-dark-text: $button-dark-text !default;
  287. $item-dark-active-bg: $button-dark-active-bg !default;
  288. $item-dark-active-border: $button-dark-active-border !default;
  289. $item-default-bg: $item-light-bg !default;
  290. $item-default-border: $item-light-border !default;
  291. $item-default-text: $item-light-text !default;
  292. $item-default-active-bg: #D9D9D9 !default;
  293. $item-default-active-border: $item-light-active-border !default;
  294. // Item Editing
  295. // -------------------------------
  296. $item-edit-transition-duration: 250ms !default;
  297. $item-edit-transition-function: ease-in-out !default;
  298. $item-remove-transition-duration: 300ms !default;
  299. $item-remove-transition-function: ease-in !default;
  300. $item-remove-descendents-transition-function: cubic-bezier(.25,.81,.24,1) !default;
  301. $item-left-edit-left: 8px !default; // item's left side edit's "left" property
  302. $item-right-edit-open-width: 50px !default;
  303. $item-left-edit-open-width: 50px !default;
  304. $item-delete-icon-size: 24px !default;
  305. $item-delete-icon-color: $assertive !default;
  306. $item-reorder-icon-size: 32px !default;
  307. $item-reorder-icon-color: $dark !default;
  308. // Lists
  309. // -------------------------------
  310. $list-header-bg: transparent !default;
  311. $list-header-color: #222 !default;
  312. $list-header-padding: 5px 15px !default;
  313. $list-header-margin-top: 20px !default;
  314. // Cards
  315. // -------------------------------
  316. $card-header-bg: #F5F5F5 !default;
  317. $card-body-bg: #fff !default;
  318. $card-footer-bg: #F5F5F5 !default;
  319. $card-padding: 10px !default;
  320. $card-border-width: 1px !default;
  321. $card-border-color: #ccc !default;
  322. $card-border-radius: 2px !default;
  323. $card-box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !default;
  324. // Forms
  325. // -------------------------------
  326. $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
  327. $input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
  328. $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
  329. $input-bg: $light !default;
  330. $input-bg-disabled: $stable !default;
  331. $input-color: #111 !default;
  332. $input-border: $item-default-border !default;
  333. $input-border-width: $item-border-width !default;
  334. $input-label-color: $dark !default;
  335. $input-color-placeholder: lighten($dark, 40%) !default;
  336. // Progress
  337. // -------------------------------
  338. $progress-width: 100% !default;
  339. $progress-margin: 15px auto !default;
  340. // Toggle
  341. // -------------------------------
  342. $toggle-width: 51px !default;
  343. $toggle-height: 31px !default;
  344. $toggle-border-width: 2px !default;
  345. $toggle-border-radius: 20px !default;
  346. $toggle-handle-width: $toggle-height - ($toggle-border-width * 2) !default;
  347. $toggle-handle-height: $toggle-handle-width !default;
  348. $toggle-handle-radius: $toggle-handle-width !default;
  349. $toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
  350. $toggle-off-bg-color: #fff !default;
  351. $toggle-off-border-color: #e6e6e6 !default;
  352. $toggle-on-light-bg: $button-light-border !default;
  353. $toggle-on-light-border: $toggle-on-light-bg !default;
  354. $toggle-on-stable-bg: $button-stable-border !default;
  355. $toggle-on-stable-border: $toggle-on-stable-bg !default;
  356. $toggle-on-positive-bg: $positive !default;
  357. $toggle-on-positive-border: $toggle-on-positive-bg !default;
  358. $toggle-on-calm-bg: $calm !default;
  359. $toggle-on-calm-border: $toggle-on-calm-bg !default;
  360. $toggle-on-assertive-bg: $assertive !default;
  361. $toggle-on-assertive-border: $toggle-on-assertive-bg !default;
  362. $toggle-on-balanced-bg: $balanced !default;
  363. $toggle-on-balanced-border: $toggle-on-balanced-bg !default;
  364. $toggle-on-energized-bg: $energized !default;
  365. $toggle-on-energized-border: $toggle-on-energized-bg !default;
  366. $toggle-on-royal-bg: $royal !default;
  367. $toggle-on-royal-border: $toggle-on-royal-bg !default;
  368. $toggle-on-dark-bg: $dark !default;
  369. $toggle-on-dark-border: $toggle-on-dark-bg !default;
  370. $toggle-on-default-bg: #4cd964 !default;
  371. $toggle-on-default-border: $toggle-on-default-bg !default;
  372. $toggle-handle-off-bg-color: $light !default;
  373. $toggle-handle-on-bg-color: $toggle-handle-off-bg-color !default;
  374. $toggle-transition-duration: .3s !default;
  375. $toggle-hit-area-expansion: 5px;
  376. // Checkbox
  377. // -------------------------------
  378. $checkbox-width: 28px !default;
  379. $checkbox-height: 28px !default;
  380. $checkbox-border-radius: $checkbox-width !default;
  381. $checkbox-border-width: 1px !default;
  382. $checkbox-off-bg-color: #fff !default;
  383. $checkbox-off-border-light: $button-light-border !default;
  384. $checkbox-on-bg-light: $button-light-border !default;
  385. $checkbox-off-border-stable: $button-stable-border !default;
  386. $checkbox-on-bg-stable: $button-stable-border !default;
  387. $checkbox-off-border-positive: $positive !default;
  388. $checkbox-on-bg-positive: $positive !default;
  389. $checkbox-off-border-calm: $calm !default;
  390. $checkbox-on-bg-calm: $calm !default;
  391. $checkbox-off-border-assertive: $assertive !default;
  392. $checkbox-on-bg-assertive: $assertive !default;
  393. $checkbox-off-border-balanced: $balanced !default;
  394. $checkbox-on-bg-balanced: $balanced !default;
  395. $checkbox-off-border-energized: $energized !default;
  396. $checkbox-on-bg-energized: $energized !default;
  397. $checkbox-off-border-royal: $royal !default;
  398. $checkbox-on-bg-royal: $royal !default;
  399. $checkbox-off-border-dark: $dark !default;
  400. $checkbox-on-bg-dark: $dark !default;
  401. $checkbox-off-border-default: $button-light-border !default;
  402. $checkbox-on-bg-default: $positive !default;
  403. $checkbox-on-border-default: $positive !default;
  404. $checkbox-check-width: 1px !default;
  405. $checkbox-check-color: #fff !default;
  406. // Range
  407. // -------------------------------
  408. $range-track-height: 2px !default;
  409. $range-slider-width: 28px !default;
  410. $range-slider-height: 28px !default;
  411. $range-slider-border-radius: 50% !default;
  412. $range-icon-size: 24px !default;
  413. $range-slider-box-shadow: 0 0 2px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,0.2) !default;
  414. $range-light-track-bg: $button-light-border !default;
  415. $range-stable-track-bg: $button-stable-border !default;
  416. $range-positive-track-bg: $button-positive-bg !default;
  417. $range-calm-track-bg: $button-calm-bg !default;
  418. $range-balanced-track-bg: $button-balanced-bg !default;
  419. $range-assertive-track-bg: $button-assertive-bg !default;
  420. $range-energized-track-bg: $button-energized-bg !default;
  421. $range-royal-track-bg: $button-royal-bg !default;
  422. $range-dark-track-bg: $button-dark-bg !default;
  423. $range-default-track-bg: #ccc !default;
  424. // Menus
  425. // -------------------------------
  426. $menu-bg: #fff !default;
  427. $menu-width: 275px !default;
  428. $menu-animation-speed: 200ms !default;
  429. $menu-side-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;
  430. // Modals
  431. // -------------------------------
  432. $modal-bg-color: #fff !default;
  433. $modal-backdrop-bg-active: #000 !default;
  434. $modal-backdrop-bg-inactive: rgba(0,0,0,0) !default;
  435. $modal-inset-mode-break-point: 680px !default; // @media min-width
  436. $modal-inset-mode-top: 20% !default;
  437. $modal-inset-mode-right: 20% !default;
  438. $modal-inset-mode-bottom: 20% !default;
  439. $modal-inset-mode-left: 20% !default;
  440. $modal-inset-mode-min-height: 240px !default;
  441. // Popovers
  442. // -------------------------------
  443. $popover-bg-color: $light !default;
  444. $popover-backdrop-bg-active: rgba(0,0,0,0.1) !default;
  445. $popover-backdrop-bg-inactive: rgba(0,0,0,0) !default;
  446. $popover-width: 220px !default;
  447. $popover-height: 280px !default;
  448. $popover-large-break-point: 680px !default;
  449. $popover-large-width: 360px !default;
  450. $popover-box-shadow: 0 1px 3px rgba(0,0,0,0.4) !default;
  451. $popover-border-radius: 2px !default;
  452. $popover-box-shadow-ios: 0 0 40px rgba(0,0,0,0.08) !default;
  453. $popover-border-radius-ios: 10px !default;
  454. $popover-bg-color-android: #fafafa !default;
  455. $popover-box-shadow-android: 0 2px 6px rgba(0,0,0,0.35) !default;
  456. // Grids
  457. // -------------------------------
  458. $grid-padding-width: 10px !default;
  459. $grid-responsive-sm-break: 567px !default; // smaller than landscape phone
  460. $grid-responsive-md-break: 767px !default; // smaller than portrait tablet
  461. $grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet
  462. // Action Sheets
  463. // -------------------------------
  464. $sheet-margin: 8px !default;
  465. $sheet-border-radius: 4px !default;
  466. $sheet-options-bg-color: #f1f2f3 !default;
  467. $sheet-options-bg-active-color: #e4e5e7 !default;
  468. $sheet-options-text-color: #007aff !default;
  469. $sheet-options-border-color: #d1d3d6 !default;
  470. // Popups
  471. // -------------------------------
  472. $popup-width: 250px !default;
  473. $popup-enter-animation: superScaleIn !default;
  474. $popup-enter-animation-duration: 0.2s !default;
  475. $popup-leave-animation-duration: 0.1s !default;
  476. $popup-border-radius: 0px !default;
  477. $popup-background-color: rgba(255,255,255,0.9) !default;
  478. $popup-button-border-radius: 2px !default;
  479. $popup-button-line-height: 20px !default;
  480. $popup-button-min-height: 45px !default;
  481. // Loading
  482. // -------------------------------
  483. $loading-text-color: #fff !default;
  484. $loading-bg-color: rgba(0,0,0,0.7) !default;
  485. $loading-padding: 20px !default;
  486. $loading-border-radius: 5px !default;
  487. $loading-font-size: 15px !default;
  488. $loading-backdrop-fadein-duration:0.1s !default;
  489. $loading-backdrop-bg-color: rgba(0,0,0,0.4) !default;
  490. // Badges
  491. // -------------------------------
  492. $badge-font-size: 14px !default;
  493. $badge-line-height: 16px !default;
  494. $badge-font-weight: bold !default;
  495. $badge-border-radius: 10px !default;
  496. $badge-light-bg: $button-light-bg !default;
  497. $badge-light-text: $button-light-text !default;
  498. $badge-stable-bg: $button-stable-bg !default;
  499. $badge-stable-text: $button-stable-text !default;
  500. $badge-positive-bg: $button-positive-bg !default;
  501. $badge-positive-text: $button-positive-text !default;
  502. $badge-calm-bg: $button-calm-bg !default;
  503. $badge-calm-text: $button-calm-text !default;
  504. $badge-balanced-bg: $button-balanced-bg !default;
  505. $badge-balanced-text: $button-balanced-text !default;
  506. $badge-assertive-bg: $button-assertive-bg !default;
  507. $badge-assertive-text: $button-assertive-text !default;
  508. $badge-energized-bg: $button-energized-bg !default;
  509. $badge-energized-text: $button-energized-text !default;
  510. $badge-royal-bg: $button-royal-bg !default;
  511. $badge-royal-text: $button-royal-text !default;
  512. $badge-dark-bg: $button-dark-bg !default;
  513. $badge-dark-text: $button-dark-text !default;
  514. $badge-default-bg: transparent !default;
  515. $badge-default-text: #AAAAAA !default;
  516. // Spinners
  517. // -------------------------------
  518. $spinner-width: 28px !default;
  519. $spinner-height: 28px !default;
  520. $spinner-light-stroke: $light !default;
  521. $spinner-light-fill: $light !default;
  522. $spinner-stable-stroke: $stable !default;
  523. $spinner-stable-fill: $stable !default;
  524. $spinner-positive-stroke: $positive !default;
  525. $spinner-positive-fill: $positive !default;
  526. $spinner-calm-stroke: $calm !default;
  527. $spinner-calm-fill: $calm !default;
  528. $spinner-balanced-stroke: $balanced !default;
  529. $spinner-balanced-fill: $balanced !default;
  530. $spinner-assertive-stroke: $assertive !default;
  531. $spinner-assertive-fill: $assertive !default;
  532. $spinner-energized-stroke: $energized !default;
  533. $spinner-energized-fill: $energized !default;
  534. $spinner-royal-stroke: $royal !default;
  535. $spinner-royal-fill: $royal !default;
  536. $spinner-dark-stroke: $dark !default;
  537. $spinner-dark-fill: $dark !default;
  538. $spinner-default-stroke: $dark !default;
  539. $spinner-default-fill: $dark !default;
  540. // Z-Indexes
  541. // -------------------------------
  542. $z-index-bar-title: 0 !default;
  543. $z-index-item-drag: 0 !default;
  544. $z-index-item-edit: 0 !default;
  545. $z-index-menu: 0 !default;
  546. $z-index-badge: 1 !default;
  547. $z-index-bar-button: 1 !default;
  548. $z-index-item-options: 1 !default;
  549. $z-index-pane: 1 !default;
  550. $z-index-slider-pager: 1 !default;
  551. $z-index-view: 1 !default;
  552. $z-index-view-below: 2 !default;
  553. $z-index-item: 2 !default;
  554. $z-index-item-checkbox: 3 !default;
  555. $z-index-item-radio: 3 !default;
  556. $z-index-item-reorder: 3 !default;
  557. $z-index-item-toggle: 3 !default;
  558. $z-index-view-above: 3 !default;
  559. $z-index-tabs: 5 !default;
  560. $z-index-item-reordering: 9 !default;
  561. $z-index-bar: 9 !default;
  562. $z-index-bar-above: 10 !default;
  563. $z-index-menu-scroll-content: 10 !default;
  564. $z-index-modal: 10 !default;
  565. $z-index-popover: 10 !default;
  566. $z-index-action-sheet: 11 !default;
  567. $z-index-backdrop: 11 !default;
  568. $z-index-menu-bar-header: 11 !default;
  569. $z-index-scroll-content-false: 11 !default;
  570. $z-index-popup: 12 !default;
  571. $z-index-loading: 13 !default;
  572. $z-index-scroll-bar: 9999 !default;
  573. $z-index-click-block: 99999 !default;
  574. // Platform
  575. // -------------------------------
  576. $ios-statusbar-height: 20px !default;