5 Global styles and settings for Foundation for Apps are stored here. This file must always
6 be imported, no matter what.
12 /// @Foundation.settings
14 // This sets 1rem to be 16px
17 // The default font-size is set to 100% of the browser style sheet (usually 16px)
18 // for compatibility with browser-based text zoom or user-set defaults.
20 // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
21 // If you want your base font-size to be different and not have it affect the grid breakpoints,
22 // set $rem-base to $base-font-size and make sure $base-font-size is a px value.
23 $base-font-size: 100% !default;
25 // $base-line-height is 24px while $base-font-size is 16px
26 $base-line-height: 1.5 !default;
28 // Text selector helpers
29 $headers: "h1,h2,h3,h4,h5,h6";
31 // We use these to define default font weights
32 $font-weight-normal: normal !default;
33 $font-weight-bold: bold !default;
35 // We use these to control various global styles
36 $body-background: #fff !default;
37 $body-font-color: #222 !default;
38 $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
39 $body-font-weight: $font-weight-normal !default;
40 $body-font-style: normal !default;
41 $body-antialiased: true;
44 $primary-color: #00558b !default;
45 $secondary-color: #f1f1f1 !default;
46 $alert-color: #F04124 !default;
47 $info-color: #A0D3E8 !default;
48 $success-color: #43AC6A !default;
49 $warning-color: #F08A24 !default;
50 $dark-color: #232323 !default;
51 $gray: #dfdfdf !default;
52 $gray-dark: darken($gray, 8) !default;
53 $gray-light: lighten($gray, 8) !default;
55 // We use these to make sure border radius matches unless we want it different.
56 $global-radius: 4px !default;
57 $global-rounded: 1000px !default;
59 // We use this for default spacing
60 $global-padding: 1rem !default;
61 $global-spacing: rem-calc(15) !default;
64 // For internal use: a color map
66 primary: $primary-color,
67 success: $success-color,
68 warning: $warning-color,
73 @include exports(global) {
74 // Make extra sure we're using the whole window
77 font-size: $base-font-size;
79 // Set box-sizing globally to handle padding and border widths
81 box-sizing: border-box;
83 *, *:before, *:after {
87 // Default body styles
89 background: $body-background;
90 color: $body-font-color;
93 font-family: $body-font-family;
94 font-weight: $body-font-weight;
95 font-style: $body-font-style;
99 @if $body-antialiased {
100 -webkit-font-smoothing: antialiased;
101 -moz-osx-font-smoothing: grayscale;
106 // Grid Defaults to get images and embeds to work properly
109 -ms-interpolation-mode: bicubic;
111 // Get rid of gap under images by making them display: inline-block; by default
112 display: inline-block;
113 vertical-align: middle;
116 // Give all anchors and interactive directives the hover cusor
117 a, [ui-sref], [zf-open], [zf-close], [zf-toggle] {
125 object { max-width: none !important; }
129 padding: $global-padding;