123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- // Foundation for Sites by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- // sass-lint:disable no-color-literals, no-qualifying-elements
- ////
- /// @group global
- ////
- @import 'util/util';
- /// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
- /// @type Number
- $global-font-size: 100% !default;
- /// Global width of your site. Used by the grid to determine row width.
- /// @type Number
- $global-width: rem-calc(1200) !default;
- /// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
- /// @type Number
- $global-lineheight: 1.5 !default;
- /// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
- /// @type Map
- $foundation-palette: (
- primary: #1779ba,
- secondary: #767676,
- success: #3adb76,
- warning: #ffae00,
- alert: #cc4b37,
- ) !default;
- /// Color used for light gray UI items.
- /// @type Color
- $light-gray: #e6e6e6 !default;
- /// Color used for medium gray UI items.
- /// @type Color
- $medium-gray: #cacaca !default;
- /// Color used for dark gray UI items.
- /// @type Color
- $dark-gray: #8a8a8a !default;
- /// Color used for black ui items.
- /// @type Color
- $black: #0a0a0a !default;
- /// Color used for white ui items.
- /// @type Color
- $white: #fefefe !default;
- /// Background color of the body.
- /// @type Color
- $body-background: $white !default;
- /// Text color of the body.
- /// @type Color
- $body-font-color: $black !default;
- /// Font stack of the body.
- /// @type List
- $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
- /// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
- /// @type Boolean
- $body-antialiased: true !default;
- /// Global value used for margin on components.
- /// @type Number
- $global-margin: 1rem !default;
- /// Global value used for padding on components.
- /// @type Number
- $global-padding: 1rem !default;
- /// Global value used for positioning on components.
- /// @type Number
- $global-position: 1rem !default;
- /// Global font weight used for normal type.
- /// @type Keyword | Number
- $global-weight-normal: normal !default;
- /// Global font weight used for bold type.
- /// @type Keyword | Number
- $global-weight-bold: bold !default;
- /// Global value used for all elements that have a border radius.
- /// @type Number
- $global-radius: 0 !default;
- /// Global value used for all menu styles. Can be overwritten at individual menu component level.
- /// @type Number
- $global-menu-padding: 0.7rem 1rem !default;
- /// Global value used for all menu styles. Nested margin for submenu.
- $global-menu-nested-margin: 1rem !default;
- /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
- /// @type Keyword
- $global-text-direction: ltr !default;
- /// Enables flexbox for components that support it.
- /// @type Boolean
- $global-flexbox: true !default;
- /// Enabled responsive breakpoints for prototypes if applicable
- /// @type Boolean
- $global-prototype-breakpoints: false !default;
- /// Button cursor's value, `auto` by default
- /// @type Keyword
- $global-button-cursor: auto !default;
- @if not map-has-key($foundation-palette, primary) {
- @error 'In $foundation-palette, you must have a color named "primary".';
- }
- // Internal variables used for text direction
- $global-left: if($global-text-direction == rtl, right, left);
- $global-right: if($global-text-direction == rtl, left, right);
- // Internal variable that contains the flex justifying options
- $-zf-flex-justify: -zf-flex-justify($global-text-direction);
- /// Global tolerance for color pick contrast.
- /// @type Number
- $global-color-pick-contrast-tolerance: 0 !default;
- // Internal variables used for colors
- @include add-foundation-colors;
- @mixin foundation-global-styles {
- @include foundation-normalize;
- // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
- .foundation-mq {
- font-family: '#{-zf-bp-serialize($breakpoints)}';
- }
- html {
- box-sizing: border-box;
- font-size: $global-font-size;
- }
- // Set box-sizing globally to handle padding and border widths
- *,
- *::before,
- *::after {
- box-sizing: inherit;
- }
- // Default body styles
- body {
- margin: 0;
- padding: 0;
- background: $body-background;
- font-family: $body-font-family;
- font-weight: $global-weight-normal;
- line-height: $global-lineheight;
- color: $body-font-color;
- @if ($body-antialiased) {
- -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
- -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
- }
- }
- img {
- // Get rid of gap under images by making them display: inline-block; by default
- display: inline-block;
- vertical-align: middle;
- // Grid defaults to get images and embeds to work properly
- max-width: 100%;
- height: auto;
- -ms-interpolation-mode: bicubic;
- }
- // Make sure textarea takes on height automatically
- textarea {
- height: auto;
- min-height: 50px;
- border-radius: $global-radius;
- }
- // Make select elements are 100% width by default
- select {
- box-sizing: border-box;
- width: 100%;
- border-radius: $global-radius;
- }
- // Styles Google Maps and MapQuest embeds properly
- // sass-lint:disable-line no-ids
- .map_canvas,
- .mqa-display {
- img,
- embed,
- object {
- max-width: none !important;
- }
- }
- // Reset <button> styles created by most browsers
- button {
- @include disable-mouse-outline;
- padding: 0;
- appearance: none;
- border: 0;
- border-radius: $global-radius;
- background: transparent;
- line-height: 1;
- cursor: $global-button-cursor;
- }
- // Prevent text overflow on pre
- pre {
- overflow: auto;
- }
- // Make reset inherit font-family instead of settings sans-serif
- button,
- input,
- optgroup,
- select,
- textarea {
- font-family: inherit;
- }
- // Internal classes to show/hide elements in JavaScript
- .is-visible {
- display: block !important;
- }
- .is-hidden {
- display: none !important;
- }
- }
|