1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
/*
GLOBAL
------
Global styles and settings for Foundation for Apps are stored here. This file must always
be imported, no matter what.
Includes:
-
*/
/// @Foundation.settings
// Global Styles
// This sets 1rem to be 16px
$rem-base: 16px;
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: 100% !default;
// $base-line-height is 24px while $base-font-size is 16px
$base-line-height: 1.5 !default;
// Text selector helpers
$headers: "h1,h2,h3,h4,h5,h6";
// We use these to define default font weights
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
// We use these to control various global styles
$body-background: #fff !default;
$body-font-color: #222 !default;
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
$body-font-weight: $font-weight-normal !default;
$body-font-style: normal !default;
$body-antialiased: true;
// Application Colors
$primary-color: #00558b !default;
$secondary-color: #f1f1f1 !default;
$alert-color: #F04124 !default;
$info-color: #A0D3E8 !default;
$success-color: #43AC6A !default;
$warning-color: #F08A24 !default;
$dark-color: #232323 !default;
$gray: #dfdfdf !default;
$gray-dark: darken($gray, 8) !default;
$gray-light: lighten($gray, 8) !default;
// We use these to make sure border radius matches unless we want it different.
$global-radius: 4px !default;
$global-rounded: 1000px !default;
// We use this for default spacing
$global-padding: 1rem !default;
$global-spacing: rem-calc(15) !default;
///
// For internal use: a color map
$foundation-colors: (
primary: $primary-color,
success: $success-color,
warning: $warning-color,
alert: $alert-color,
dark: $dark-color,
);
@include exports(global) {
// Make extra sure we're using the whole window
html, body {
height: 100%;
font-size: $base-font-size;
}
// Set box-sizing globally to handle padding and border widths
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
// Default body styles
body {
background: $body-background;
color: $body-font-color;
padding: 0;
margin: 0;
font-family: $body-font-family;
font-weight: $body-font-weight;
font-style: $body-font-style;
line-height: 1;
position: relative;
@if $body-antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
img {
// Grid Defaults to get images and embeds to work properly
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
// Get rid of gap under images by making them display: inline-block; by default
display: inline-block;
vertical-align: middle;
}
// Give all anchors and interactive directives the hover cusor
a, [ui-sref], [zf-open], [zf-close], [zf-toggle] {
cursor: pointer;
}
#map_canvas,
.map_canvas {
img,
embed,
object { max-width: none !important; }
}
.padding {
padding: $global-padding;
}
}
|
