_global.scss 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. // Foundation for Sites by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. // sass-lint:disable no-color-literals, no-qualifying-elements
  5. ////
  6. /// @group global
  7. ////
  8. @import 'util/util';
  9. /// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
  10. /// @type Number
  11. $global-font-size: 100% !default;
  12. /// Global width of your site. Used by the grid to determine row width.
  13. /// @type Number
  14. $global-width: rem-calc(1200) !default;
  15. /// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
  16. /// @type Number
  17. $global-lineheight: 1.5 !default;
  18. /// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
  19. /// @type Map
  20. $foundation-palette: (
  21. primary: #1779ba,
  22. secondary: #767676,
  23. success: #3adb76,
  24. warning: #ffae00,
  25. alert: #cc4b37,
  26. ) !default;
  27. /// Color used for light gray UI items.
  28. /// @type Color
  29. $light-gray: #e6e6e6 !default;
  30. /// Color used for medium gray UI items.
  31. /// @type Color
  32. $medium-gray: #cacaca !default;
  33. /// Color used for dark gray UI items.
  34. /// @type Color
  35. $dark-gray: #8a8a8a !default;
  36. /// Color used for black ui items.
  37. /// @type Color
  38. $black: #0a0a0a !default;
  39. /// Color used for white ui items.
  40. /// @type Color
  41. $white: #fefefe !default;
  42. /// Background color of the body.
  43. /// @type Color
  44. $body-background: $white !default;
  45. /// Text color of the body.
  46. /// @type Color
  47. $body-font-color: $black !default;
  48. /// Font stack of the body.
  49. /// @type List
  50. $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
  51. /// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
  52. /// @type Boolean
  53. $body-antialiased: true !default;
  54. /// Global value used for margin on components.
  55. /// @type Number
  56. $global-margin: 1rem !default;
  57. /// Global value used for padding on components.
  58. /// @type Number
  59. $global-padding: 1rem !default;
  60. /// Global value used for positioning on components.
  61. /// @type Number
  62. $global-position: 1rem !default;
  63. /// Global font weight used for normal type.
  64. /// @type Keyword | Number
  65. $global-weight-normal: normal !default;
  66. /// Global font weight used for bold type.
  67. /// @type Keyword | Number
  68. $global-weight-bold: bold !default;
  69. /// Global value used for all elements that have a border radius.
  70. /// @type Number
  71. $global-radius: 0 !default;
  72. /// Global value used for all menu styles. Can be overwritten at individual menu component level.
  73. /// @type Number
  74. $global-menu-padding: 0.7rem 1rem !default;
  75. /// Global value used for all menu styles. Nested margin for submenu.
  76. $global-menu-nested-margin: 1rem !default;
  77. /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
  78. /// @type Keyword
  79. $global-text-direction: ltr !default;
  80. /// Enables flexbox for components that support it.
  81. /// @type Boolean
  82. $global-flexbox: true !default;
  83. /// Enabled responsive breakpoints for prototypes if applicable
  84. /// @type Boolean
  85. $global-prototype-breakpoints: false !default;
  86. /// Button cursor's value, `auto` by default
  87. /// @type Keyword
  88. $global-button-cursor: auto !default;
  89. @if not map-has-key($foundation-palette, primary) {
  90. @error 'In $foundation-palette, you must have a color named "primary".';
  91. }
  92. // Internal variables used for text direction
  93. $global-left: if($global-text-direction == rtl, right, left);
  94. $global-right: if($global-text-direction == rtl, left, right);
  95. // Internal variable that contains the flex justifying options
  96. $-zf-flex-justify: -zf-flex-justify($global-text-direction);
  97. /// Global tolerance for color pick contrast.
  98. /// @type Number
  99. $global-color-pick-contrast-tolerance: 0 !default;
  100. // Internal variables used for colors
  101. @include add-foundation-colors;
  102. @mixin foundation-global-styles {
  103. @include foundation-normalize;
  104. // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
  105. .foundation-mq {
  106. font-family: '#{-zf-bp-serialize($breakpoints)}';
  107. }
  108. html {
  109. box-sizing: border-box;
  110. font-size: $global-font-size;
  111. }
  112. // Set box-sizing globally to handle padding and border widths
  113. *,
  114. *::before,
  115. *::after {
  116. box-sizing: inherit;
  117. }
  118. // Default body styles
  119. body {
  120. margin: 0;
  121. padding: 0;
  122. background: $body-background;
  123. font-family: $body-font-family;
  124. font-weight: $global-weight-normal;
  125. line-height: $global-lineheight;
  126. color: $body-font-color;
  127. @if ($body-antialiased) {
  128. -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
  129. -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
  130. }
  131. }
  132. img {
  133. // Get rid of gap under images by making them display: inline-block; by default
  134. display: inline-block;
  135. vertical-align: middle;
  136. // Grid defaults to get images and embeds to work properly
  137. max-width: 100%;
  138. height: auto;
  139. -ms-interpolation-mode: bicubic;
  140. }
  141. // Make sure textarea takes on height automatically
  142. textarea {
  143. height: auto;
  144. min-height: 50px;
  145. border-radius: $global-radius;
  146. }
  147. // Make select elements are 100% width by default
  148. select {
  149. box-sizing: border-box;
  150. width: 100%;
  151. border-radius: $global-radius;
  152. }
  153. // Styles Google Maps and MapQuest embeds properly
  154. // sass-lint:disable-line no-ids
  155. .map_canvas,
  156. .mqa-display {
  157. img,
  158. embed,
  159. object {
  160. max-width: none !important;
  161. }
  162. }
  163. // Reset <button> styles created by most browsers
  164. button {
  165. @include disable-mouse-outline;
  166. padding: 0;
  167. appearance: none;
  168. border: 0;
  169. border-radius: $global-radius;
  170. background: transparent;
  171. line-height: 1;
  172. cursor: $global-button-cursor;
  173. }
  174. // Prevent text overflow on pre
  175. pre {
  176. overflow: auto;
  177. }
  178. // Make reset inherit font-family instead of settings sans-serif
  179. button,
  180. input,
  181. optgroup,
  182. select,
  183. textarea {
  184. font-family: inherit;
  185. }
  186. // Internal classes to show/hide elements in JavaScript
  187. .is-visible {
  188. display: block !important;
  189. }
  190. .is-hidden {
  191. display: none !important;
  192. }
  193. }