_settings.scss 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897
  1. // Foundation for Sites Settings
  2. // -----------------------------
  3. //
  4. // Table of Contents:
  5. //
  6. // 1. Global
  7. // 2. Breakpoints
  8. // 3. The Grid
  9. // 4. Base Typography
  10. // 5. Typography Helpers
  11. // 6. Abide
  12. // 7. Accordion
  13. // 8. Accordion Menu
  14. // 9. Badge
  15. // 10. Breadcrumbs
  16. // 11. Button
  17. // 12. Button Group
  18. // 13. Callout
  19. // 14. Card
  20. // 15. Close Button
  21. // 16. Drilldown
  22. // 17. Dropdown
  23. // 18. Dropdown Menu
  24. // 19. Flexbox Utilities
  25. // 20. Forms
  26. // 21. Label
  27. // 22. Media Object
  28. // 23. Menu
  29. // 24. Meter
  30. // 25. Off-canvas
  31. // 26. Orbit
  32. // 27. Pagination
  33. // 28. Progress Bar
  34. // 29. Prototype Arrow
  35. // 30. Prototype Border-Box
  36. // 31. Prototype Border-None
  37. // 32. Prototype Bordered
  38. // 33. Prototype Display
  39. // 34. Prototype Font-Styling
  40. // 35. Prototype List-Style-Type
  41. // 36. Prototype Overflow
  42. // 37. Prototype Position
  43. // 38. Prototype Rounded
  44. // 39. Prototype Separator
  45. // 40. Prototype Shadow
  46. // 41. Prototype Sizing
  47. // 42. Prototype Spacing
  48. // 43. Prototype Text-Decoration
  49. // 44. Prototype Text-Transformation
  50. // 45. Prototype Text-Utilities
  51. // 46. Responsive Embed
  52. // 47. Reveal
  53. // 48. Slider
  54. // 49. Switch
  55. // 50. Table
  56. // 51. Tabs
  57. // 52. Thumbnail
  58. // 53. Title Bar
  59. // 54. Tooltip
  60. // 55. Top Bar
  61. // 56. Xy Grid
  62. @import 'util/util';
  63. // 1. Global
  64. // ---------
  65. $global-font-size: 100%;
  66. $global-width: 100%; // old value : rem-calc(1200)
  67. $global-lineheight: 1.5;
  68. $foundation-palette: (
  69. primary: #1779ba,
  70. secondary: #767676,
  71. success: #3adb76,
  72. warning: #ffae00,
  73. alert: #cc4b37,
  74. );
  75. $light-gray: #e6e6e6;
  76. $medium-gray: #cacaca;
  77. $dark-gray: #8a8a8a;
  78. $black: #0a0a0a;
  79. $white: #fefefe;
  80. $body-background: $white;
  81. $body-font-color: $black;
  82. $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  83. $body-antialiased: true;
  84. $global-margin: 1rem;
  85. $global-padding: 1rem;
  86. $global-position: 1rem;
  87. $global-weight-normal: normal;
  88. $global-weight-bold: bold;
  89. $global-radius: 0;
  90. $global-menu-padding: 0.7rem 1rem;
  91. $global-menu-nested-margin: 1rem;
  92. $global-text-direction: ltr;
  93. $global-flexbox: true;
  94. $global-prototype-breakpoints: false;
  95. $global-button-cursor: auto;
  96. $global-color-pick-contrast-tolerance: 0;
  97. $print-transparent-backgrounds: true;
  98. $print-hrefs: true;
  99. @include add-foundation-colors;
  100. // 2. Breakpoints
  101. // --------------
  102. $breakpoints: (
  103. small: 0,
  104. medium: 640px,
  105. large: 1024px,
  106. xlarge: 1200px,
  107. xxlarge: 1440px,
  108. );
  109. $breakpoints-hidpi: (
  110. hidpi-1: 1,
  111. hidpi-1-5: 1.5,
  112. hidpi-2: 2,
  113. retina: 2,
  114. hidpi-3: 3
  115. );
  116. $print-breakpoint: large;
  117. $breakpoint-classes: (small medium large);
  118. // 3. The Grid
  119. // -----------
  120. $grid-row-width: $global-width;
  121. $grid-column-count: 12;
  122. $grid-column-gutter: (
  123. small: 20px,
  124. medium: 30px,
  125. );
  126. $grid-column-align-edge: true;
  127. $grid-column-alias: 'columns';
  128. $block-grid-max: 8;
  129. // 4. Base Typography
  130. // ------------------
  131. $header-font-family: $body-font-family;
  132. $header-font-weight: $global-weight-normal;
  133. $header-font-style: normal;
  134. $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
  135. $header-color: inherit;
  136. $header-lineheight: 1.4;
  137. $header-margin-bottom: 0.5rem;
  138. $header-styles: (
  139. small: (
  140. 'h1': ('font-size': 24),
  141. 'h2': ('font-size': 20),
  142. 'h3': ('font-size': 19),
  143. 'h4': ('font-size': 18),
  144. 'h5': ('font-size': 17),
  145. 'h6': ('font-size': 16),
  146. ),
  147. medium: (
  148. 'h1': ('font-size': 48),
  149. 'h2': ('font-size': 40),
  150. 'h3': ('font-size': 31),
  151. 'h4': ('font-size': 25),
  152. 'h5': ('font-size': 20),
  153. 'h6': ('font-size': 16),
  154. ),
  155. );
  156. $header-text-rendering: optimizeLegibility;
  157. $small-font-size: 80%;
  158. $header-small-font-color: $medium-gray;
  159. $paragraph-lineheight: 1.6;
  160. $paragraph-margin-bottom: 1rem;
  161. $paragraph-text-rendering: optimizeLegibility;
  162. $enable-code-inline: true;
  163. $anchor-color: $primary-color;
  164. $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
  165. $anchor-text-decoration: none;
  166. $anchor-text-decoration-hover: none;
  167. $hr-width: $global-width;
  168. $hr-border: 1px solid $medium-gray;
  169. $hr-margin: rem-calc(20) auto;
  170. $list-lineheight: $paragraph-lineheight;
  171. $list-margin-bottom: $paragraph-margin-bottom;
  172. $list-style-type: disc;
  173. $list-style-position: outside;
  174. $list-side-margin: 1.25rem;
  175. $list-nested-side-margin: 1.25rem;
  176. $defnlist-margin-bottom: 1rem;
  177. $defnlist-term-weight: $global-weight-bold;
  178. $defnlist-term-margin-bottom: 0.3rem;
  179. $blockquote-color: $dark-gray;
  180. $blockquote-padding: rem-calc(9 20 0 19);
  181. $blockquote-border: 1px solid $medium-gray;
  182. $enable-cite-block: true;
  183. $keystroke-font: $font-family-monospace;
  184. $keystroke-color: $black;
  185. $keystroke-background: $light-gray;
  186. $keystroke-padding: rem-calc(2 4 0);
  187. $keystroke-radius: $global-radius;
  188. $abbr-underline: 1px dotted $black;
  189. // 5. Typography Helpers
  190. // ---------------------
  191. $lead-font-size: $global-font-size * 1.25;
  192. $lead-lineheight: 1.6;
  193. $subheader-lineheight: 1.4;
  194. $subheader-color: $dark-gray;
  195. $subheader-font-weight: $global-weight-normal;
  196. $subheader-margin-top: 0.2rem;
  197. $subheader-margin-bottom: 0.5rem;
  198. $stat-font-size: 2.5rem;
  199. $cite-color: $dark-gray;
  200. $cite-font-size: rem-calc(13);
  201. $cite-pseudo-content: '\2014 \0020';
  202. $code-color: $black;
  203. $code-font-family: $font-family-monospace;
  204. $code-font-weight: $global-weight-normal;
  205. $code-background: $light-gray;
  206. $code-border: 1px solid $medium-gray;
  207. $code-padding: rem-calc(2 5 1);
  208. $code-block-padding: 1rem;
  209. $code-block-margin-bottom: 1.5rem;
  210. // 6. Abide
  211. // --------
  212. $abide-inputs: true;
  213. $abide-labels: true;
  214. $input-background-invalid: get-color(alert);
  215. $form-label-color-invalid: get-color(alert);
  216. $input-error-color: get-color(alert);
  217. $input-error-font-size: rem-calc(12);
  218. $input-error-font-weight: $global-weight-bold;
  219. // 7. Accordion
  220. // ------------
  221. $accordion-background: $white;
  222. $accordion-plusminus: true;
  223. $accordion-plus-content: '\002B';
  224. $accordion-minus-content: '\2013';
  225. $accordion-title-font-size: rem-calc(12);
  226. $accordion-item-color: $primary-color;
  227. $accordion-item-background-hover: $light-gray;
  228. $accordion-item-padding: 1.25rem 1rem;
  229. $accordion-content-background: $white;
  230. $accordion-content-border: 1px solid $light-gray;
  231. $accordion-content-color: $body-font-color;
  232. $accordion-content-padding: 1rem;
  233. // 8. Accordion Menu
  234. // -----------------
  235. $accordionmenu-padding: $global-menu-padding;
  236. $accordionmenu-nested-margin: $global-menu-nested-margin;
  237. $accordionmenu-submenu-padding: $accordionmenu-padding;
  238. $accordionmenu-arrows: true;
  239. $accordionmenu-arrow-color: $primary-color;
  240. $accordionmenu-item-background: null;
  241. $accordionmenu-border: null;
  242. $accordionmenu-submenu-toggle-background: null;
  243. $accordion-submenu-toggle-border: $accordionmenu-border;
  244. $accordionmenu-submenu-toggle-width: 40px;
  245. $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
  246. $accordionmenu-arrow-size: 6px;
  247. // 9. Badge
  248. // --------
  249. $badge-background: $primary-color;
  250. $badge-color: $white;
  251. $badge-color-alt: $black;
  252. $badge-palette: $foundation-palette;
  253. $badge-padding: 0.3em;
  254. $badge-minwidth: 2.1em;
  255. $badge-font-size: 0.6rem;
  256. // 10. Breadcrumbs
  257. // ---------------
  258. $breadcrumbs-margin: 0 0 $global-margin 0;
  259. $breadcrumbs-item-font-size: rem-calc(11);
  260. $breadcrumbs-item-color: $primary-color;
  261. $breadcrumbs-item-color-current: $black;
  262. $breadcrumbs-item-color-disabled: $medium-gray;
  263. $breadcrumbs-item-margin: 0.75rem;
  264. $breadcrumbs-item-uppercase: true;
  265. $breadcrumbs-item-separator: true;
  266. $breadcrumbs-item-separator-item: '/';
  267. $breadcrumbs-item-separator-item-rtl: '\\';
  268. $breadcrumbs-item-separator-color: $medium-gray;
  269. // 11. Button
  270. // ----------
  271. $button-font-family: inherit;
  272. $button-font-weight: null;
  273. $button-padding: 0.85em 1em;
  274. $button-margin: 0 0 $global-margin 0;
  275. $button-fill: solid;
  276. $button-background: $primary-color;
  277. $button-background-hover: scale-color($button-background, $lightness: -15%);
  278. $button-color: $white;
  279. $button-color-alt: $black;
  280. $button-radius: $global-radius;
  281. $button-border: 1px solid transparent;
  282. $button-hollow-border-width: 1px;
  283. $button-sizes: (
  284. tiny: 0.6rem,
  285. small: 0.75rem,
  286. default: 0.9rem,
  287. large: 1.25rem,
  288. );
  289. $button-palette: $foundation-palette;
  290. $button-opacity-disabled: 0.25;
  291. $button-background-hover-lightness: -20%;
  292. $button-hollow-hover-lightness: -50%;
  293. $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  294. $button-responsive-expanded: false;
  295. // 12. Button Group
  296. // ----------------
  297. $buttongroup-margin: 1rem;
  298. $buttongroup-spacing: 1px;
  299. $buttongroup-child-selector: '.button';
  300. $buttongroup-expand-max: 6;
  301. $buttongroup-radius-on-each: true;
  302. // 13. Callout
  303. // -----------
  304. $callout-background: $white;
  305. $callout-background-fade: 85%;
  306. $callout-border: 1px solid rgba($black, 0.25);
  307. $callout-margin: 0 0 1rem 0;
  308. $callout-sizes: (
  309. small: 0.5rem,
  310. default: 1rem,
  311. large: 3rem,
  312. );
  313. $callout-font-color: $body-font-color;
  314. $callout-font-color-alt: $body-background;
  315. $callout-radius: $global-radius;
  316. $callout-link-tint: 30%;
  317. // 14. Card
  318. // --------
  319. $card-background: $white;
  320. $card-font-color: $body-font-color;
  321. $card-divider-background: $light-gray;
  322. $card-border: 1px solid $light-gray;
  323. $card-shadow: none;
  324. $card-border-radius: $global-radius;
  325. $card-padding: $global-padding;
  326. $card-margin-bottom: $global-margin;
  327. // 15. Close Button
  328. // ----------------
  329. $closebutton-position: right top;
  330. $closebutton-z-index: 10;
  331. $closebutton-default-size: medium;
  332. $closebutton-offset-horizontal: (
  333. small: 0.66rem,
  334. medium: 1rem,
  335. );
  336. $closebutton-offset-vertical: (
  337. small: 0.33em,
  338. medium: 0.5rem,
  339. );
  340. $closebutton-size: (
  341. small: 1.5em,
  342. medium: 2em,
  343. );
  344. $closebutton-lineheight: 1;
  345. $closebutton-color: $dark-gray;
  346. $closebutton-color-hover: $black;
  347. // 16. Drilldown
  348. // -------------
  349. $drilldown-transition: transform 0.15s linear;
  350. $drilldown-arrows: true;
  351. $drilldown-padding: $global-menu-padding;
  352. $drilldown-nested-margin: 0;
  353. $drilldown-background: $white;
  354. $drilldown-submenu-padding: $drilldown-padding;
  355. $drilldown-submenu-background: $white;
  356. $drilldown-arrow-color: $primary-color;
  357. $drilldown-arrow-size: 6px;
  358. // 17. Dropdown
  359. // ------------
  360. $dropdown-padding: 1rem;
  361. $dropdown-background: $body-background;
  362. $dropdown-border: 1px solid $medium-gray;
  363. $dropdown-font-size: 1rem;
  364. $dropdown-width: 300px;
  365. $dropdown-radius: $global-radius;
  366. $dropdown-sizes: (
  367. tiny: 100px,
  368. small: 200px,
  369. large: 400px,
  370. );
  371. // 18. Dropdown Menu
  372. // -----------------
  373. $dropdownmenu-arrows: true;
  374. $dropdownmenu-arrow-color: $anchor-color;
  375. $dropdownmenu-arrow-size: 6px;
  376. $dropdownmenu-arrow-padding: 1.5rem;
  377. $dropdownmenu-min-width: 200px;
  378. $dropdownmenu-background: null;
  379. $dropdownmenu-submenu-background: $white;
  380. $dropdownmenu-padding: $global-menu-padding;
  381. $dropdownmenu-nested-margin: 0;
  382. $dropdownmenu-submenu-padding: $dropdownmenu-padding;
  383. $dropdownmenu-border: 1px solid $medium-gray;
  384. $dropdown-menu-item-color-active: get-color(primary);
  385. $dropdown-menu-item-background-active: transparent;
  386. // 19. Flexbox Utilities
  387. // ---------------------
  388. $flex-source-ordering-count: 6;
  389. $flexbox-responsive-breakpoints: true;
  390. // 20. Forms
  391. // ---------
  392. $fieldset-border: 1px solid $medium-gray;
  393. $fieldset-padding: rem-calc(20);
  394. $fieldset-margin: rem-calc(18 0);
  395. $legend-padding: rem-calc(0 3);
  396. $form-spacing: rem-calc(16);
  397. $helptext-color: $black;
  398. $helptext-font-size: rem-calc(13);
  399. $helptext-font-style: italic;
  400. $input-prefix-color: $black;
  401. $input-prefix-background: $light-gray;
  402. $input-prefix-border: 1px solid $medium-gray;
  403. $input-prefix-padding: 1rem;
  404. $form-label-color: $black;
  405. $form-label-font-size: rem-calc(14);
  406. $form-label-font-weight: $global-weight-normal;
  407. $form-label-line-height: 1.8;
  408. $select-background: $white;
  409. $select-triangle-color: $dark-gray;
  410. $select-radius: $global-radius;
  411. $input-color: $black;
  412. $input-placeholder-color: $medium-gray;
  413. $input-font-family: inherit;
  414. $input-font-size: rem-calc(16);
  415. $input-font-weight: $global-weight-normal;
  416. $input-line-height: $global-lineheight;
  417. $input-background: $white;
  418. $input-background-focus: $white;
  419. $input-background-disabled: $light-gray;
  420. $input-border: 1px solid $medium-gray;
  421. $input-border-focus: 1px solid $dark-gray;
  422. $input-padding: $form-spacing * 0.5;
  423. $input-shadow: inset 0 1px 2px rgba($black, 0.1);
  424. $input-shadow-focus: 0 0 5px $medium-gray;
  425. $input-cursor-disabled: not-allowed;
  426. $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  427. $input-number-spinners: true;
  428. $input-radius: $global-radius;
  429. $form-button-radius: $global-radius;
  430. // 21. Label
  431. // ---------
  432. $label-background: $primary-color;
  433. $label-color: $white;
  434. $label-color-alt: $black;
  435. $label-palette: $foundation-palette;
  436. $label-font-size: 0.8rem;
  437. $label-padding: 0.33333rem 0.5rem;
  438. $label-radius: $global-radius;
  439. // 22. Media Object
  440. // ----------------
  441. $mediaobject-margin-bottom: $global-margin;
  442. $mediaobject-section-padding: $global-padding;
  443. $mediaobject-image-width-stacked: 100%;
  444. // 23. Menu
  445. // --------
  446. $menu-margin: 0;
  447. $menu-nested-margin: $global-menu-nested-margin;
  448. $menu-items-padding: $global-menu-padding;
  449. $menu-simple-margin: 1rem;
  450. $menu-item-color-active: $white;
  451. $menu-item-color-alt-active: $black;
  452. $menu-item-background-active: get-color(primary);
  453. $menu-icon-spacing: 0.25rem;
  454. $menu-state-back-compat: true;
  455. $menu-centered-back-compat: true;
  456. $menu-icons-back-compat: true;
  457. // 24. Meter
  458. // ---------
  459. $meter-height: 1rem;
  460. $meter-radius: $global-radius;
  461. $meter-background: $medium-gray;
  462. $meter-fill-good: $success-color;
  463. $meter-fill-medium: $warning-color;
  464. $meter-fill-bad: $alert-color;
  465. // 25. Off-canvas
  466. // --------------
  467. $offcanvas-sizes: (
  468. small: 250px,
  469. );
  470. $offcanvas-vertical-sizes: (
  471. small: 250px,
  472. );
  473. $offcanvas-background: $light-gray;
  474. $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
  475. $offcanvas-inner-shadow-size: 20px;
  476. $offcanvas-inner-shadow-color: rgba($black, 0.25);
  477. $offcanvas-overlay-zindex: 11;
  478. $offcanvas-push-zindex: 12;
  479. $offcanvas-overlap-zindex: 13;
  480. $offcanvas-reveal-zindex: 12;
  481. $offcanvas-transition-length: 0.5s;
  482. $offcanvas-transition-timing: ease;
  483. $offcanvas-fixed-reveal: true;
  484. $offcanvas-exit-background: rgba($white, 0.25);
  485. $maincontent-class: 'off-canvas-content';
  486. // 26. Orbit
  487. // ---------
  488. $orbit-bullet-background: $medium-gray;
  489. $orbit-bullet-background-active: $dark-gray;
  490. $orbit-bullet-diameter: 1.2rem;
  491. $orbit-bullet-margin: 0.1rem;
  492. $orbit-bullet-margin-top: 0.8rem;
  493. $orbit-bullet-margin-bottom: 0.8rem;
  494. $orbit-caption-background: rgba($black, 0.5);
  495. $orbit-caption-padding: 1rem;
  496. $orbit-control-background-hover: rgba($black, 0.5);
  497. $orbit-control-padding: 1rem;
  498. $orbit-control-zindex: 10;
  499. // 27. Pagination
  500. // --------------
  501. $pagination-font-size: rem-calc(14);
  502. $pagination-margin-bottom: $global-margin;
  503. $pagination-item-color: $black;
  504. $pagination-item-padding: rem-calc(3 10);
  505. $pagination-item-spacing: rem-calc(1);
  506. $pagination-radius: $global-radius;
  507. $pagination-item-background-hover: $light-gray;
  508. $pagination-item-background-current: $primary-color;
  509. $pagination-item-color-current: $white;
  510. $pagination-item-color-disabled: $medium-gray;
  511. $pagination-ellipsis-color: $black;
  512. $pagination-mobile-items: false;
  513. $pagination-mobile-current-item: false;
  514. $pagination-arrows: true;
  515. $pagination-arrow-previous: '\00AB';
  516. $pagination-arrow-next: '\00BB';
  517. // 28. Progress Bar
  518. // ----------------
  519. $progress-height: 1rem;
  520. $progress-background: $medium-gray;
  521. $progress-margin-bottom: $global-margin;
  522. $progress-meter-background: $primary-color;
  523. $progress-radius: $global-radius;
  524. // 29. Prototype Arrow
  525. // -------------------
  526. $prototype-arrow-directions: (
  527. down,
  528. up,
  529. right,
  530. left
  531. );
  532. $prototype-arrow-size: 0.4375rem;
  533. $prototype-arrow-color: $black;
  534. // 30. Prototype Border-Box
  535. // ------------------------
  536. $prototype-border-box-breakpoints: $global-prototype-breakpoints;
  537. // 31. Prototype Border-None
  538. // -------------------------
  539. $prototype-border-none-breakpoints: $global-prototype-breakpoints;
  540. // 32. Prototype Bordered
  541. // ----------------------
  542. $prototype-bordered-breakpoints: $global-prototype-breakpoints;
  543. $prototype-border-width: rem-calc(1);
  544. $prototype-border-type: solid;
  545. $prototype-border-color: $medium-gray;
  546. // 33. Prototype Display
  547. // ---------------------
  548. $prototype-display-breakpoints: $global-prototype-breakpoints;
  549. $prototype-display: (
  550. inline,
  551. inline-block,
  552. block,
  553. table,
  554. table-cell
  555. );
  556. // 34. Prototype Font-Styling
  557. // --------------------------
  558. $prototype-font-breakpoints: $global-prototype-breakpoints;
  559. $prototype-wide-letter-spacing: rem-calc(4);
  560. $prototype-font-normal: $global-weight-normal;
  561. $prototype-font-bold: $global-weight-bold;
  562. // 35. Prototype List-Style-Type
  563. // -----------------------------
  564. $prototype-list-breakpoints: $global-prototype-breakpoints;
  565. $prototype-style-type-unordered: (
  566. disc,
  567. circle,
  568. square
  569. );
  570. $prototype-style-type-ordered: (
  571. decimal,
  572. lower-alpha,
  573. lower-latin,
  574. lower-roman,
  575. upper-alpha,
  576. upper-latin,
  577. upper-roman
  578. );
  579. // 36. Prototype Overflow
  580. // ----------------------
  581. $prototype-overflow-breakpoints: $global-prototype-breakpoints;
  582. $prototype-overflow: (
  583. visible,
  584. hidden,
  585. scroll
  586. );
  587. // 37. Prototype Position
  588. // ----------------------
  589. $prototype-position-breakpoints: $global-prototype-breakpoints;
  590. $prototype-position: (
  591. static,
  592. relative,
  593. absolute,
  594. fixed
  595. );
  596. $prototype-position-z-index: 975;
  597. // 38. Prototype Rounded
  598. // ---------------------
  599. $prototype-rounded-breakpoints: $global-prototype-breakpoints;
  600. $prototype-border-radius: rem-calc(3);
  601. // 39. Prototype Separator
  602. // -----------------------
  603. $prototype-separator-breakpoints: $global-prototype-breakpoints;
  604. $prototype-separator-align: center;
  605. $prototype-separator-height: rem-calc(2);
  606. $prototype-separator-width: 3rem;
  607. $prototype-separator-background: $primary-color;
  608. $prototype-separator-margin-top: $global-margin;
  609. // 40. Prototype Shadow
  610. // --------------------
  611. $prototype-shadow-breakpoints: $global-prototype-breakpoints;
  612. $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
  613. 0 2px 10px 0 rgba(0,0,0,.12);
  614. // 41. Prototype Sizing
  615. // --------------------
  616. $prototype-sizing-breakpoints: $global-prototype-breakpoints;
  617. $prototype-sizing: (
  618. width,
  619. height
  620. );
  621. $prototype-sizes: (
  622. 25: 25%,
  623. 50: 50%,
  624. 75: 75%,
  625. 100: 100%
  626. );
  627. // 42. Prototype Spacing
  628. // ---------------------
  629. $prototype-spacing-breakpoints: $global-prototype-breakpoints;
  630. $prototype-spacers-count: 3;
  631. // 43. Prototype Text-Decoration
  632. // -----------------------------
  633. $prototype-decoration-breakpoints: $global-prototype-breakpoints;
  634. $prototype-text-decoration: (
  635. overline,
  636. underline,
  637. line-through,
  638. );
  639. // 44. Prototype Text-Transformation
  640. // ---------------------------------
  641. $prototype-transformation-breakpoints: $global-prototype-breakpoints;
  642. $prototype-text-transformation: (
  643. lowercase,
  644. uppercase,
  645. capitalize
  646. );
  647. // 45. Prototype Text-Utilities
  648. // ----------------------------
  649. $prototype-utilities-breakpoints: $global-prototype-breakpoints;
  650. $prototype-text-overflow: ellipsis;
  651. // 46. Responsive Embed
  652. // --------------------
  653. $responsive-embed-margin-bottom: rem-calc(16);
  654. $responsive-embed-ratios: (
  655. default: 4 by 3,
  656. widescreen: 16 by 9,
  657. );
  658. // 47. Reveal
  659. // ----------
  660. $reveal-background: $white;
  661. $reveal-width: 600px;
  662. $reveal-max-width: $global-width;
  663. $reveal-padding: $global-padding;
  664. $reveal-border: 1px solid $medium-gray;
  665. $reveal-radius: $global-radius;
  666. $reveal-zindex: 1005;
  667. $reveal-overlay-background: rgba($black, 0.45);
  668. // 48. Slider
  669. // ----------
  670. $slider-width-vertical: 0.5rem;
  671. $slider-transition: all 0.2s ease-in-out;
  672. $slider-height: 0.5rem;
  673. $slider-background: $light-gray;
  674. $slider-fill-background: $medium-gray;
  675. $slider-handle-height: 1.4rem;
  676. $slider-handle-width: 1.4rem;
  677. $slider-handle-background: $primary-color;
  678. $slider-opacity-disabled: 0.25;
  679. $slider-radius: $global-radius;
  680. // 49. Switch
  681. // ----------
  682. $switch-background: $medium-gray;
  683. $switch-background-active: $primary-color;
  684. $switch-height: 2rem;
  685. $switch-height-tiny: 1.5rem;
  686. $switch-height-small: 1.75rem;
  687. $switch-height-large: 2.5rem;
  688. $switch-radius: $global-radius;
  689. $switch-margin: $global-margin;
  690. $switch-paddle-background: $white;
  691. $switch-paddle-offset: 0.25rem;
  692. $switch-paddle-radius: $global-radius;
  693. $switch-paddle-transition: all 0.25s ease-out;
  694. $switch-opacity-disabled: .5;
  695. $switch-cursor-disabled: not-allowed;
  696. // 50. Table
  697. // ---------
  698. $table-background: $white;
  699. $table-color-scale: 5%;
  700. $table-border: 1px solid smart-scale($table-background, $table-color-scale);
  701. $table-padding: rem-calc(8 10 10);
  702. $table-hover-scale: 2%;
  703. $table-row-hover: darken($table-background, $table-hover-scale);
  704. $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
  705. $table-is-striped: true;
  706. $table-striped-background: smart-scale($table-background, $table-color-scale);
  707. $table-stripe: even;
  708. $table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
  709. $table-head-row-hover: darken($table-head-background, $table-hover-scale);
  710. $table-foot-background: smart-scale($table-background, $table-color-scale);
  711. $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
  712. $table-head-font-color: $body-font-color;
  713. $table-foot-font-color: $body-font-color;
  714. $show-header-for-stacked: false;
  715. $table-stack-breakpoint: medium;
  716. // 51. Tabs
  717. // --------
  718. $tab-margin: 0;
  719. $tab-background: $white;
  720. $tab-color: $primary-color;
  721. $tab-background-active: $light-gray;
  722. $tab-active-color: $primary-color;
  723. $tab-item-font-size: rem-calc(12);
  724. $tab-item-background-hover: $white;
  725. $tab-item-padding: 1.25rem 1.5rem;
  726. $tab-content-background: $white;
  727. $tab-content-border: $light-gray;
  728. $tab-content-color: $body-font-color;
  729. $tab-content-padding: 1rem;
  730. // 52. Thumbnail
  731. // -------------
  732. $thumbnail-border: 4px solid $white;
  733. $thumbnail-margin-bottom: $global-margin;
  734. $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
  735. $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
  736. $thumbnail-transition: box-shadow 200ms ease-out;
  737. $thumbnail-radius: $global-radius;
  738. // 53. Title Bar
  739. // -------------
  740. $titlebar-background: $black;
  741. $titlebar-color: $white;
  742. $titlebar-padding: 0.5rem;
  743. $titlebar-text-font-weight: bold;
  744. $titlebar-icon-color: $white;
  745. $titlebar-icon-color-hover: $medium-gray;
  746. $titlebar-icon-spacing: 0.25rem;
  747. // 54. Tooltip
  748. // -----------
  749. $has-tip-cursor: help;
  750. $has-tip-font-weight: $global-weight-bold;
  751. $has-tip-border-bottom: dotted 1px $dark-gray;
  752. $tooltip-background-color: $black;
  753. $tooltip-color: $white;
  754. $tooltip-padding: 0.75rem;
  755. $tooltip-max-width: 10rem;
  756. $tooltip-font-size: $small-font-size;
  757. $tooltip-pip-width: 0.75rem;
  758. $tooltip-pip-height: $tooltip-pip-width * 0.866;
  759. $tooltip-radius: $global-radius;
  760. // 55. Top Bar
  761. // -----------
  762. $topbar-padding: 0.5rem;
  763. $topbar-background: $light-gray;
  764. $topbar-submenu-background: $topbar-background;
  765. $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
  766. $topbar-input-width: 200px;
  767. $topbar-unstack-breakpoint: medium;
  768. // 56. Xy Grid
  769. // -----------
  770. $xy-grid: true;
  771. $grid-container: $global-width;
  772. $grid-columns: 12;
  773. $grid-margin-gutters: (
  774. small: 20px,
  775. medium: 30px
  776. );
  777. $grid-padding-gutters: $grid-margin-gutters;
  778. $grid-container-padding: $grid-padding-gutters;
  779. $grid-container-max: $global-width;
  780. $xy-block-grid-max: 8;