nfg_ui 0.12.13 → 0.12.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_redactor.scss +7 -3
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/application.scss +8 -2
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_alignment.scss +16 -23
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_grid.scss +236 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_typography.scss +379 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_backgrounds.scss +8 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_borders.scss +2 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_content_sections.scss +10 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_layout.scss +8 -10
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_spacers.scss +25 -49
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_text_colors.scss +26 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_typography.scss +1 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss +4 -4
- data/lib/nfg_ui/version.rb +1 -1
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 60875d5aa3ea456c24da466c6a9c424697bf2ead1cafc1ea2fc75e98fbc8e485
|
|
4
|
+
data.tar.gz: 7bc521886ce98d98619f3739493dd7efa2018f24309de68d641eae3b29f50398
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d5a81f8a7c78e15e311efeaa54fe2563267390243a9d6e7c7c9f3c2e40e3331648ddd51d93c5c841223f54b411e83bad435b1f0c7b24e1d887b6bca0f95c50d9
|
|
7
|
+
data.tar.gz: 1ff27c8b7276506d41987310bbc84618a4a9fe9fab5ccc86024e73db8be820d2f0e2a764c5862e8f134baab07112220ef3926dcbb1d5cd89a62896af6848ede5
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
}
|
|
10
10
|
.redactor-toolbar {
|
|
11
11
|
position: relative;
|
|
12
|
-
background-color: $
|
|
12
|
+
background-color: $white;
|
|
13
13
|
box-shadow: none;
|
|
14
14
|
border-bottom: $border-width solid $border-color;
|
|
15
15
|
&.redactor-toolbar-external {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
&:after {
|
|
31
31
|
border-color: rgba(255, 255, 255, 0);
|
|
32
|
-
border-top-color: $
|
|
32
|
+
border-top-color: $white;
|
|
33
33
|
border-width: 6px;
|
|
34
34
|
margin-left: -6px;
|
|
35
35
|
}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
li a {
|
|
44
|
-
color:
|
|
44
|
+
color: $body-color !important;
|
|
45
45
|
&.re-icon {
|
|
46
46
|
.body-text { font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif !important; }
|
|
47
47
|
}
|
|
@@ -52,6 +52,10 @@
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
.redactor-editor, .redactor-box, .redactor-box textarea { z-index: auto; }
|
|
55
|
+
.redactor-editor {
|
|
56
|
+
min-height: ($spacer * 5);
|
|
57
|
+
border: none;
|
|
58
|
+
}
|
|
55
59
|
.redactor-box .redactor-toolbar { z-index: $zindex-dropdown - 10 !important; }
|
|
56
60
|
#redactor-modal-close {
|
|
57
61
|
border: none;
|
|
@@ -2,13 +2,19 @@
|
|
|
2
2
|
@import "foundation-emails";
|
|
3
3
|
@import "foundation_emails/alignment";
|
|
4
4
|
@import "foundation_emails/button";
|
|
5
|
+
@import "foundation_emails/typography";
|
|
6
|
+
|
|
5
7
|
|
|
6
8
|
// NFG Theme specific
|
|
7
|
-
@import "nfg_theme/
|
|
9
|
+
@import "nfg_theme/backgrounds";
|
|
10
|
+
@import "nfg_theme/borders";
|
|
11
|
+
@import "nfg_theme/content_sections";
|
|
8
12
|
@import "nfg_theme/layout";
|
|
9
13
|
@import "nfg_theme/rainbow_bar";
|
|
14
|
+
@import "nfg_theme/spacers";
|
|
15
|
+
@import "foundation_emails/grid"; // listed after spacers to utilize variables
|
|
16
|
+
@import "nfg_theme/text_colors";
|
|
10
17
|
@import "nfg_theme/typography";
|
|
11
|
-
@import "nfg_theme/backgrounds";
|
|
12
18
|
|
|
13
19
|
|
|
14
20
|
// App Utilities
|
|
@@ -6,29 +6,22 @@
|
|
|
6
6
|
/// @group alignment
|
|
7
7
|
////
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// text-align: left;
|
|
26
|
-
// }
|
|
27
|
-
|
|
28
|
-
// &.text-right {
|
|
29
|
-
// text-align: right;
|
|
30
|
-
// }
|
|
31
|
-
// }
|
|
9
|
+
div,
|
|
10
|
+
table,
|
|
11
|
+
th,
|
|
12
|
+
td,
|
|
13
|
+
h1,
|
|
14
|
+
h2,
|
|
15
|
+
h3,
|
|
16
|
+
h4,
|
|
17
|
+
h5,
|
|
18
|
+
h6,
|
|
19
|
+
p,
|
|
20
|
+
span {
|
|
21
|
+
&.text-center { text-align: center; }
|
|
22
|
+
&.text-left { text-align: left; }
|
|
23
|
+
&.text-right { text-align: right; }
|
|
24
|
+
}
|
|
32
25
|
.text-center { text-align: center; }
|
|
33
26
|
.text-left { text-align: left; }
|
|
34
27
|
.text-right { text-align: right; }
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
// Foundation for Emails by ZURB
|
|
2
|
+
// zurb.com/ink/
|
|
3
|
+
// Licensed under MIT Open Source
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @group grid
|
|
7
|
+
////
|
|
8
|
+
|
|
9
|
+
/// Default number of columns for an email.
|
|
10
|
+
/// @type Number
|
|
11
|
+
// $grid-column-count: 12 !default;
|
|
12
|
+
|
|
13
|
+
/// Default padding for the bottom of a column.
|
|
14
|
+
/// @type Number
|
|
15
|
+
// $column-padding-bottom: $global-padding !default;
|
|
16
|
+
|
|
17
|
+
/// Default border radius for the container. Use a px value
|
|
18
|
+
/// @type Number
|
|
19
|
+
// $container-radius: 0 !default;
|
|
20
|
+
|
|
21
|
+
// For viewing email in browser
|
|
22
|
+
@media only screen {
|
|
23
|
+
html {
|
|
24
|
+
min-height: 100%;
|
|
25
|
+
background: $body-background;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
table {
|
|
30
|
+
&.body {
|
|
31
|
+
background: $body-background;
|
|
32
|
+
// height: 100%;
|
|
33
|
+
// width: 100%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.container {
|
|
37
|
+
// background: $container-background;
|
|
38
|
+
width: $global-width;
|
|
39
|
+
// margin: 0 auto;
|
|
40
|
+
// Margin: 0 auto;
|
|
41
|
+
// text-align: inherit;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&.row {
|
|
45
|
+
margin: 0;
|
|
46
|
+
// padding: 0;
|
|
47
|
+
// width: 100%;
|
|
48
|
+
// position: relative;
|
|
49
|
+
flex-wrap: initial; // clears flex-wrap property in DMS BS4 .row styles
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// &.spacer {
|
|
53
|
+
// width: 100%;
|
|
54
|
+
// td {
|
|
55
|
+
// mso-line-height-rule: exactly;
|
|
56
|
+
// }
|
|
57
|
+
// }
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// table.container table.row {
|
|
61
|
+
// display: table;
|
|
62
|
+
// }
|
|
63
|
+
|
|
64
|
+
td.columns,
|
|
65
|
+
td.column,
|
|
66
|
+
th.columns,
|
|
67
|
+
th.column {
|
|
68
|
+
// margin: 0 auto;
|
|
69
|
+
// Margin: 0 auto;
|
|
70
|
+
// padding-left: $global-gutter;
|
|
71
|
+
// padding-bottom: $column-padding-bottom;
|
|
72
|
+
|
|
73
|
+
// // Prevents Nested columns from double the padding
|
|
74
|
+
// .column,
|
|
75
|
+
// .columns {
|
|
76
|
+
// padding-left: 0 !important;
|
|
77
|
+
// padding-right: 0 !important;
|
|
78
|
+
|
|
79
|
+
// center {
|
|
80
|
+
// min-width: none !important;
|
|
81
|
+
// }
|
|
82
|
+
// }
|
|
83
|
+
|
|
84
|
+
@each $prop, $abbrev in (margin: m, padding: p) {
|
|
85
|
+
@each $size, $length in $spacers {
|
|
86
|
+
&.#{$abbrev}-all-#{$size} { #{$prop}: $length !important; } // a = All sides
|
|
87
|
+
&.#{$abbrev}-top-#{$size} { #{$prop}-top: $length !important; }
|
|
88
|
+
&.#{$abbrev}-right-#{$size} { #{$prop}-right: $length !important; }
|
|
89
|
+
&.#{$abbrev}-bottom-#{$size} { #{$prop}-bottom: $length !important; }
|
|
90
|
+
&.#{$abbrev}-left-#{$size} { #{$prop}-left: $length !important; }
|
|
91
|
+
|
|
92
|
+
// Axes
|
|
93
|
+
&.#{$abbrev}-x-axis-#{$size} {
|
|
94
|
+
#{$prop}-right: $length !important;
|
|
95
|
+
#{$prop}-left: $length !important;
|
|
96
|
+
}
|
|
97
|
+
&.#{$abbrev}-y-axis-#{$size} {
|
|
98
|
+
#{$prop}-top: $length !important;
|
|
99
|
+
#{$prop}-bottom: $length !important;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// td.columns.last,
|
|
106
|
+
// td.column.last,
|
|
107
|
+
// th.columns.last,
|
|
108
|
+
// th.column.last {
|
|
109
|
+
// padding-right: $global-gutter;
|
|
110
|
+
// }
|
|
111
|
+
|
|
112
|
+
// //makes sure nested tables are 100% width
|
|
113
|
+
// td.columns,
|
|
114
|
+
// td.column,
|
|
115
|
+
// th.columns,
|
|
116
|
+
// th.column {
|
|
117
|
+
// table:not(.button) {
|
|
118
|
+
// width: 100%;
|
|
119
|
+
// }
|
|
120
|
+
// }
|
|
121
|
+
|
|
122
|
+
@for $i from 1 through $grid-column-count {
|
|
123
|
+
// td.large-#{$i},
|
|
124
|
+
// th.large-#{$i} {
|
|
125
|
+
// width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
|
|
126
|
+
// padding-left: $global-gutter / 2;
|
|
127
|
+
// padding-right: $global-gutter / 2;
|
|
128
|
+
// }
|
|
129
|
+
|
|
130
|
+
// td.large-#{$i}.first,
|
|
131
|
+
// th.large-#{$i}.first {
|
|
132
|
+
// padding-left: $global-gutter;
|
|
133
|
+
// }
|
|
134
|
+
|
|
135
|
+
// td.large-#{$i}.last,
|
|
136
|
+
// th.large-#{$i}.last {
|
|
137
|
+
// padding-right: $global-gutter;
|
|
138
|
+
// }
|
|
139
|
+
|
|
140
|
+
// Collapsed logic
|
|
141
|
+
.collapse {
|
|
142
|
+
> tbody > tr > td.large-#{$i},
|
|
143
|
+
> tbody > tr > th.large-#{$i} {
|
|
144
|
+
padding-right: 0;
|
|
145
|
+
padding-left: 0;
|
|
146
|
+
width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
//Gotta give it that extra love for the first and last columns.
|
|
150
|
+
td.large-#{$i}.first,
|
|
151
|
+
th.large-#{$i}.first,
|
|
152
|
+
td.large-#{$i}.last,
|
|
153
|
+
th.large-#{$i}.last {
|
|
154
|
+
width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// Expanded logic
|
|
159
|
+
.expanded {
|
|
160
|
+
> tbody > tr {
|
|
161
|
+
> td.large-#{$i}.first,
|
|
162
|
+
> th.large-#{$i}.first {
|
|
163
|
+
padding-left: 0 !important;
|
|
164
|
+
width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
|
|
165
|
+
@media only screen and (max-width: 624px) { padding-right: 0 !important; }
|
|
166
|
+
}
|
|
167
|
+
> td.large-#{$i}.last,
|
|
168
|
+
> th.large-#{$i}.last {
|
|
169
|
+
padding-right: 0 !important;
|
|
170
|
+
width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
|
|
171
|
+
@media only screen and (max-width: 624px) { padding-left: 0 !important; }
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Nested columns need gutters
|
|
176
|
+
td.columns,
|
|
177
|
+
td.column,
|
|
178
|
+
th.columns,
|
|
179
|
+
th.column {
|
|
180
|
+
.column,
|
|
181
|
+
.columns {
|
|
182
|
+
padding-left: $global-gutter !important;
|
|
183
|
+
padding-right: $global-gutter !important;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
// td.large-#{$i} center,
|
|
190
|
+
// th.large-#{$i} center {
|
|
191
|
+
// min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
|
|
192
|
+
// }
|
|
193
|
+
|
|
194
|
+
// .body .columns td.large-#{$i},
|
|
195
|
+
// .body .column td.large-#{$i},
|
|
196
|
+
// .body .columns th.large-#{$i},
|
|
197
|
+
// .body .column th.large-#{$i} {
|
|
198
|
+
// width: -zf-grid-calc-pct($i, $grid-column-count);
|
|
199
|
+
// }
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// @for $i from 1 through ($grid-column-count - 1) {
|
|
203
|
+
// td.large-offset-#{$i},
|
|
204
|
+
// td.large-offset-#{$i}.first,
|
|
205
|
+
// td.large-offset-#{$i}.last,
|
|
206
|
+
// th.large-offset-#{$i},
|
|
207
|
+
// th.large-offset-#{$i}.first,
|
|
208
|
+
// th.large-offset-#{$i}.last {
|
|
209
|
+
// //1.5 takes in effect a whole empty cell.
|
|
210
|
+
// padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
|
|
211
|
+
// }
|
|
212
|
+
// }
|
|
213
|
+
|
|
214
|
+
// td.expander,
|
|
215
|
+
// th.expander {
|
|
216
|
+
// visibility: hidden;
|
|
217
|
+
// width: 0;
|
|
218
|
+
// padding: 0 !important;
|
|
219
|
+
// }
|
|
220
|
+
|
|
221
|
+
// // adds radius to container
|
|
222
|
+
// table.container.radius {
|
|
223
|
+
// border-radius: $container-radius;
|
|
224
|
+
// border-collapse: separate;
|
|
225
|
+
// }
|
|
226
|
+
|
|
227
|
+
// Specific calendar table on layout_12 (event - 2)
|
|
228
|
+
.calendar {
|
|
229
|
+
td.columns,
|
|
230
|
+
td.column,
|
|
231
|
+
th.columns,
|
|
232
|
+
th.column {
|
|
233
|
+
padding-left: $global-gutter !important;
|
|
234
|
+
padding-right: $global-gutter !important;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
@@ -0,0 +1,379 @@
|
|
|
1
|
+
// // Foundation for Emails by ZURB
|
|
2
|
+
// // zurb.com/ink/
|
|
3
|
+
// // Licensed under MIT Open Source
|
|
4
|
+
|
|
5
|
+
// ////
|
|
6
|
+
// /// @group typography
|
|
7
|
+
// ////
|
|
8
|
+
|
|
9
|
+
/// Global font color.
|
|
10
|
+
/// @type Color
|
|
11
|
+
$global-font-color: #313A3E;
|
|
12
|
+
|
|
13
|
+
// /// Global font family.
|
|
14
|
+
// /// @type Font
|
|
15
|
+
// $body-font-family: Helvetica, Arial, sans-serif !default;
|
|
16
|
+
|
|
17
|
+
// /// Global font weight.
|
|
18
|
+
// /// @type Keyword
|
|
19
|
+
// $global-font-weight: normal !default;
|
|
20
|
+
|
|
21
|
+
// /// Header color
|
|
22
|
+
// /// @type Color
|
|
23
|
+
// $header-color: inherit !default;
|
|
24
|
+
|
|
25
|
+
/// Global line height.
|
|
26
|
+
/// @type Number
|
|
27
|
+
$global-line-height: 1.4;
|
|
28
|
+
|
|
29
|
+
/// Font size of body text.
|
|
30
|
+
/// @type Number
|
|
31
|
+
$global-font-size: 14px;
|
|
32
|
+
|
|
33
|
+
/// Line height of body text.
|
|
34
|
+
/// @type Number
|
|
35
|
+
$body-line-height: 1.5;
|
|
36
|
+
|
|
37
|
+
// /// Font family of headings.
|
|
38
|
+
// /// @type List
|
|
39
|
+
// $header-font-family: $body-font-family !default;
|
|
40
|
+
|
|
41
|
+
// /// Font family of headings.
|
|
42
|
+
// /// @type List
|
|
43
|
+
$header-font-weight: bold;
|
|
44
|
+
|
|
45
|
+
/// Font size of `<h1>` elements.
|
|
46
|
+
/// @type Number
|
|
47
|
+
$h1-font-size: 30px;
|
|
48
|
+
|
|
49
|
+
/// Font size of `<h2>` elements.
|
|
50
|
+
/// @type Number
|
|
51
|
+
$h2-font-size: 27px;
|
|
52
|
+
|
|
53
|
+
/// Font size of `<h3>` elements.
|
|
54
|
+
/// @type Number
|
|
55
|
+
$h3-font-size: 24px;
|
|
56
|
+
|
|
57
|
+
/// Font size of `<h4>` elements.
|
|
58
|
+
/// @type Number
|
|
59
|
+
$h4-font-size: 20px;
|
|
60
|
+
|
|
61
|
+
/// Font size of `<h5>` elements.
|
|
62
|
+
/// @type Number
|
|
63
|
+
$h5-font-size: 17px;
|
|
64
|
+
|
|
65
|
+
/// Font size of `<h6>` elements.
|
|
66
|
+
/// @type Number
|
|
67
|
+
$h6-font-size: 14px;
|
|
68
|
+
|
|
69
|
+
/// Margin bottom of `<h1>` through `<h6>` elements.
|
|
70
|
+
/// @type Number
|
|
71
|
+
$header-margin-bottom: 0;
|
|
72
|
+
|
|
73
|
+
/// Margin bottom of paragraphs.
|
|
74
|
+
/// @type Number
|
|
75
|
+
$paragraph-margin-bottom: 0;
|
|
76
|
+
|
|
77
|
+
// /// Default font size for `<small>`.
|
|
78
|
+
// /// @type Number
|
|
79
|
+
$small-font-size: 12px;
|
|
80
|
+
|
|
81
|
+
// /// Color of `<small>` elements when placed inside headers.
|
|
82
|
+
// /// @type Color
|
|
83
|
+
// $small-font-color: $medium-gray !default;
|
|
84
|
+
|
|
85
|
+
// /// Font size of lead paragraphs.
|
|
86
|
+
// /// @type Number
|
|
87
|
+
// $lead-font-size: $global-font-size * 1.25 !default;
|
|
88
|
+
|
|
89
|
+
// /// Line height of lead paragraphs.
|
|
90
|
+
// /// @type Number
|
|
91
|
+
// $lead-line-height: 160% !default;
|
|
92
|
+
|
|
93
|
+
// /// Padding inside paragraphs.
|
|
94
|
+
// /// @type Number
|
|
95
|
+
// $text-padding: 10px !default;
|
|
96
|
+
|
|
97
|
+
// /// Default line height for subheaders.
|
|
98
|
+
// /// @type Number
|
|
99
|
+
// $subheader-lineheight: 1.4 !default;
|
|
100
|
+
|
|
101
|
+
// /// Default font color for subheaders.
|
|
102
|
+
// /// @type Color
|
|
103
|
+
// $subheader-color: $dark-gray !default;
|
|
104
|
+
|
|
105
|
+
// /// Default font weight for subheaders.
|
|
106
|
+
// /// @type String
|
|
107
|
+
// $subheader-font-weight: $global-font-weight !default;
|
|
108
|
+
|
|
109
|
+
// /// Default top margin for subhheaders.
|
|
110
|
+
// /// @type Number
|
|
111
|
+
// $subheader-margin-top: 4px !default;
|
|
112
|
+
|
|
113
|
+
// /// Default bottom margin for subheaders.
|
|
114
|
+
// /// @type Number
|
|
115
|
+
// $subheader-margin-bottom: 8px !default;
|
|
116
|
+
|
|
117
|
+
/// Maximum width of a divider.
|
|
118
|
+
/// @type Number
|
|
119
|
+
$hr-width: 100% !default;
|
|
120
|
+
|
|
121
|
+
/// Default border for a divider.
|
|
122
|
+
/// @type List
|
|
123
|
+
$hr-border: 1px solid $medium-gray;
|
|
124
|
+
|
|
125
|
+
/// Default margin for a divider.
|
|
126
|
+
/// @type Number | List
|
|
127
|
+
$hr-margin: $global-gutter auto;
|
|
128
|
+
|
|
129
|
+
// /// Text decoration for anchors.
|
|
130
|
+
// /// @type Keyword
|
|
131
|
+
// $anchor-text-decoration: none !default;
|
|
132
|
+
|
|
133
|
+
// /// Text color of anchors.
|
|
134
|
+
// /// @type Color
|
|
135
|
+
$anchor-color: $primary-color;
|
|
136
|
+
|
|
137
|
+
// /// Text color of anchors to visited links.
|
|
138
|
+
// /// @type Color
|
|
139
|
+
$anchor-color-visited: $anchor-color;
|
|
140
|
+
|
|
141
|
+
// /// Text color of anchors on hover.
|
|
142
|
+
// /// @type Color
|
|
143
|
+
$anchor-color-hover: lighten($primary-color, 10%);
|
|
144
|
+
|
|
145
|
+
// /// Text color of active anchors.
|
|
146
|
+
// /// @type Color
|
|
147
|
+
// $anchor-color-active: $anchor-color-hover !default;
|
|
148
|
+
|
|
149
|
+
// /// Default font size for statistic numbers.
|
|
150
|
+
// /// @type Number
|
|
151
|
+
// $stat-font-size: 40px !default;
|
|
152
|
+
|
|
153
|
+
// /// Removing the iOS telephone and address styling
|
|
154
|
+
// /// @type Boolean
|
|
155
|
+
// $remove-ios-blue: true !default;
|
|
156
|
+
|
|
157
|
+
body,
|
|
158
|
+
table.body,
|
|
159
|
+
h1,
|
|
160
|
+
h2,
|
|
161
|
+
h3,
|
|
162
|
+
h4,
|
|
163
|
+
h5,
|
|
164
|
+
h6,
|
|
165
|
+
p,
|
|
166
|
+
td,
|
|
167
|
+
th {
|
|
168
|
+
color: $global-font-color;
|
|
169
|
+
font-family: $body-font-family;
|
|
170
|
+
font-weight: $global-font-weight;
|
|
171
|
+
// padding-top: 0;
|
|
172
|
+
// padding-right: 0;
|
|
173
|
+
// padding-bottom: 0;
|
|
174
|
+
// padding-left: 0;
|
|
175
|
+
// margin: 0;
|
|
176
|
+
// Margin: 0;
|
|
177
|
+
// text-align: left;
|
|
178
|
+
line-height: $global-line-height;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
h1,
|
|
182
|
+
h2,
|
|
183
|
+
h3,
|
|
184
|
+
h4,
|
|
185
|
+
h5,
|
|
186
|
+
h6 {
|
|
187
|
+
color: $header-color;
|
|
188
|
+
// word-wrap: normal;
|
|
189
|
+
font-family: $header-font-family;
|
|
190
|
+
font-weight: $header-font-weight;
|
|
191
|
+
margin-bottom: $header-margin-bottom;
|
|
192
|
+
Margin-bottom: $header-margin-bottom;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
h1 {
|
|
196
|
+
font-size: $h1-font-size;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
h2 {
|
|
200
|
+
font-size: $h2-font-size;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
h3 {
|
|
204
|
+
font-size: $h3-font-size;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
h4 {
|
|
208
|
+
font-size: $h4-font-size;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
h5 {
|
|
212
|
+
font-size: $h5-font-size;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
h6 {
|
|
216
|
+
font-size: $h6-font-size;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
body,
|
|
220
|
+
table.body,
|
|
221
|
+
p,
|
|
222
|
+
td,
|
|
223
|
+
th {
|
|
224
|
+
font-size: $global-font-size;
|
|
225
|
+
line-height: $body-line-height;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
p {
|
|
229
|
+
margin-bottom: $paragraph-margin-bottom;
|
|
230
|
+
Margin-bottom: $paragraph-margin-bottom;
|
|
231
|
+
|
|
232
|
+
&.lead {
|
|
233
|
+
font-size: $lead-font-size;
|
|
234
|
+
line-height: $lead-line-height;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
&.subheader {
|
|
238
|
+
margin-top: $subheader-margin-top;
|
|
239
|
+
margin-bottom: $subheader-margin-bottom;
|
|
240
|
+
Margin-top: $subheader-margin-top;
|
|
241
|
+
Margin-bottom: $subheader-margin-bottom;
|
|
242
|
+
font-weight: $subheader-font-weight;
|
|
243
|
+
line-height: $subheader-lineheight;
|
|
244
|
+
color: $subheader-color;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
small, .small{
|
|
249
|
+
font-size: $small-font-size;
|
|
250
|
+
color: inherit;
|
|
251
|
+
line-height: inherit;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
a {
|
|
255
|
+
color: $anchor-color;
|
|
256
|
+
text-decoration: $anchor-text-decoration;
|
|
257
|
+
font-family: $body-font-family;
|
|
258
|
+
font-weight: $global-font-weight;
|
|
259
|
+
// padding: 0;
|
|
260
|
+
// text-align: left;
|
|
261
|
+
line-height: $global-line-height;
|
|
262
|
+
|
|
263
|
+
&:hover {
|
|
264
|
+
color: $anchor-color-hover;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&:active {
|
|
268
|
+
color: $anchor-color-active;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
&:visited {
|
|
272
|
+
color: $anchor-color-visited;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
h1 a,
|
|
277
|
+
h1 a:visited,
|
|
278
|
+
h2 a,
|
|
279
|
+
h2 a:visited,
|
|
280
|
+
h3 a,
|
|
281
|
+
h3 a:visited,
|
|
282
|
+
h4 a,
|
|
283
|
+
h4 a:visited,
|
|
284
|
+
h5 a,
|
|
285
|
+
h5 a:visited,
|
|
286
|
+
h6 a,
|
|
287
|
+
h6 a:visited {
|
|
288
|
+
color: $anchor-color;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
pre {
|
|
292
|
+
background: $light-gray;
|
|
293
|
+
// margin: 30px 0;
|
|
294
|
+
// Margin: 30px 0;
|
|
295
|
+
|
|
296
|
+
code {
|
|
297
|
+
color: $medium-gray;
|
|
298
|
+
|
|
299
|
+
span.callout {
|
|
300
|
+
color: $dark-gray;
|
|
301
|
+
// font-weight: bold;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
span.callout-strong {
|
|
305
|
+
color: $pre-color;
|
|
306
|
+
// font-weight: bold;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
// Horizontal rule -- used for a break and division between content sections
|
|
312
|
+
table.hr {
|
|
313
|
+
// width: 100%;
|
|
314
|
+
|
|
315
|
+
th {
|
|
316
|
+
height: 1px;
|
|
317
|
+
max-width: $hr-width;
|
|
318
|
+
// border-top: 0;
|
|
319
|
+
// border-right: 0;
|
|
320
|
+
border-bottom: $hr-border;
|
|
321
|
+
// border-left: 0;
|
|
322
|
+
// margin: $hr-margin;
|
|
323
|
+
// Margin: $hr-margin;
|
|
324
|
+
// clear: both;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
// // Use to style a large number to display a statistic
|
|
332
|
+
.stat {
|
|
333
|
+
font-size: $stat-font-size;
|
|
334
|
+
// line-height: 1;
|
|
335
|
+
|
|
336
|
+
// p + & {
|
|
337
|
+
// margin-top: -16px;
|
|
338
|
+
// Margin-top: -16px;
|
|
339
|
+
// }
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
// // preheader styles
|
|
343
|
+
span.preheader {
|
|
344
|
+
// display: none !important;
|
|
345
|
+
// visibility: hidden;
|
|
346
|
+
// mso-hide: all !important;
|
|
347
|
+
// font-size: 1px;
|
|
348
|
+
color: $body-background; // needs to match background color of it's container
|
|
349
|
+
// line-height: 1px;
|
|
350
|
+
// max-height: 0px;
|
|
351
|
+
// max-width: 0px;
|
|
352
|
+
// opacity: 0;
|
|
353
|
+
// overflow: hidden;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
ul, ol{
|
|
357
|
+
margin-bottom: $paragraph-margin-bottom;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
blockquote{
|
|
361
|
+
margin-left: $paragraph-margin-bottom;
|
|
362
|
+
color: $global-font-color;
|
|
363
|
+
font-style: italic;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
// // Removing the iOS colors put in for telephone and addresses
|
|
367
|
+
// @if $remove-ios-blue {
|
|
368
|
+
// // Wrapping in a media only screen to have inline-css respect the styling
|
|
369
|
+
// @media only screen {
|
|
370
|
+
// a[x-apple-data-detectors] {
|
|
371
|
+
// color: inherit !important;
|
|
372
|
+
// text-decoration: none !important;
|
|
373
|
+
// font-size: inherit !important;
|
|
374
|
+
// font-family: inherit !important;
|
|
375
|
+
// font-weight: inherit !important;
|
|
376
|
+
// line-height: inherit !important;
|
|
377
|
+
// }
|
|
378
|
+
// }
|
|
379
|
+
// }
|
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
.bg-success { background-color: $success-color; }
|
|
4
4
|
.bg-warning { background-color: $warning-color; }
|
|
5
5
|
.bg-alert { background-color: $alert-color; }
|
|
6
|
+
.bg-white { background: $white !important; }
|
|
7
|
+
.bg-secondary { background: $medium-gray !important; }
|
|
8
|
+
.bg-tertiary { background: $dark-gray !important; }
|
|
6
9
|
.bg-light-gray { background-color: $light-gray !important; }
|
|
10
|
+
.bg-transparent { background: transparent !important; }
|
|
11
|
+
.bg-black {
|
|
12
|
+
background: $black !important;
|
|
13
|
+
color: inherit;
|
|
14
|
+
}
|
|
7
15
|
|
|
8
16
|
// Images
|
|
9
17
|
.bg-image {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// Styles specific for content section links
|
|
2
|
+
.cs-edit, .cs-rm-group, .cs-add-group {
|
|
3
|
+
padding: 4px 6px !important;
|
|
4
|
+
font-weight: $bold-font-weight;
|
|
5
|
+
font-size: 12px !important;
|
|
6
|
+
line-height: 1;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// Override white text
|
|
10
|
+
.redactor-box .text-white { color: $global-font-color !important; }
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
// Extra layout styles
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
.wrapper-inner {
|
|
11
|
-
@media only screen and (max-width: #{$global-breakpoint}) { padding: 24px !important; }
|
|
2
|
+
.wrapper {
|
|
3
|
+
&.strict { // Strict mode: Wrap with zero impact on nested components
|
|
4
|
+
width: 100% !important;
|
|
5
|
+
padding: 0 !important;
|
|
6
|
+
.wrapper-inner {
|
|
7
|
+
width: 100% !important;
|
|
8
|
+
padding: 0 !important;
|
|
9
|
+
}
|
|
12
10
|
}
|
|
13
11
|
}
|
|
14
12
|
|
|
@@ -1,60 +1,36 @@
|
|
|
1
|
-
$spacer
|
|
2
|
-
$
|
|
3
|
-
|
|
4
|
-
$spacers: (
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
$spacer: 24px;
|
|
2
|
+
$spacers: ();
|
|
3
|
+
// stylelint-disable-next-line scss/dollar-variable-default
|
|
4
|
+
$spacers: map-merge(
|
|
5
|
+
(
|
|
6
|
+
0: 0,
|
|
7
|
+
quarter: ($spacer * .25),
|
|
8
|
+
half: ($spacer * .5),
|
|
9
|
+
base: $spacer,
|
|
10
|
+
base-half: ($spacer * 1.5),
|
|
11
|
+
double: ($spacer * 2),
|
|
12
|
+
double-half: ($spacer * 2.5),
|
|
13
|
+
triple: ($spacer * 3)
|
|
8
14
|
),
|
|
9
|
-
|
|
10
|
-
x : ($spacer-x * 0.25),
|
|
11
|
-
y : ($spacer-y * 0.25)
|
|
12
|
-
),
|
|
13
|
-
half: (
|
|
14
|
-
x : ($spacer-x * 0.5),
|
|
15
|
-
y : ($spacer-y * 0.5)
|
|
16
|
-
),
|
|
17
|
-
base: (
|
|
18
|
-
x : $spacer-x,
|
|
19
|
-
y : $spacer-y
|
|
20
|
-
),
|
|
21
|
-
base-half: (
|
|
22
|
-
x : $spacer-x * 1.5,
|
|
23
|
-
y : $spacer-y * 1.5
|
|
24
|
-
),
|
|
25
|
-
double: (
|
|
26
|
-
x : ($spacer-x * 2),
|
|
27
|
-
y : ($spacer-y * 2)
|
|
28
|
-
),
|
|
29
|
-
double-half: (
|
|
30
|
-
x : ($spacer-x * 2.5),
|
|
31
|
-
y : ($spacer-y * 2.5)
|
|
32
|
-
),
|
|
33
|
-
triple: (
|
|
34
|
-
x : ($spacer-x * 3),
|
|
35
|
-
y : ($spacer-y * 3)
|
|
36
|
-
)
|
|
15
|
+
$spacers
|
|
37
16
|
);
|
|
38
17
|
|
|
39
18
|
@each $prop, $abbrev in (margin: m, padding: p) {
|
|
40
|
-
@each $size, $
|
|
41
|
-
$
|
|
42
|
-
$
|
|
43
|
-
|
|
44
|
-
.#{$abbrev}-
|
|
45
|
-
.#{$abbrev}-
|
|
46
|
-
.#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; }
|
|
47
|
-
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
|
|
48
|
-
.#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; }
|
|
19
|
+
@each $size, $length in $spacers {
|
|
20
|
+
.#{$abbrev}-a-#{$size} { #{$prop}: $length !important; } // a = All sides
|
|
21
|
+
.#{$abbrev}-t-#{$size} { #{$prop}-top: $length !important; }
|
|
22
|
+
.#{$abbrev}-r-#{$size} { #{$prop}-right: $length !important; }
|
|
23
|
+
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length !important; }
|
|
24
|
+
.#{$abbrev}-l-#{$size} { #{$prop}-left: $length !important; }
|
|
49
25
|
|
|
50
26
|
// Axes
|
|
51
27
|
.#{$abbrev}-x-#{$size} {
|
|
52
|
-
#{$prop}-right: $length
|
|
53
|
-
#{$prop}-left: $length
|
|
28
|
+
#{$prop}-right: $length !important;
|
|
29
|
+
#{$prop}-left: $length !important;
|
|
54
30
|
}
|
|
55
31
|
.#{$abbrev}-y-#{$size} {
|
|
56
|
-
#{$prop}-top: $length
|
|
57
|
-
#{$prop}-bottom: $length
|
|
32
|
+
#{$prop}-top: $length !important;
|
|
33
|
+
#{$prop}-bottom: $length !important;
|
|
58
34
|
}
|
|
59
35
|
}
|
|
60
|
-
}
|
|
36
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@mixin text-color-variant($color){
|
|
2
|
+
&h1,
|
|
3
|
+
&h2,
|
|
4
|
+
&h3,
|
|
5
|
+
&h4,
|
|
6
|
+
&h5,
|
|
7
|
+
&h6,
|
|
8
|
+
&p,
|
|
9
|
+
&td,
|
|
10
|
+
&th,
|
|
11
|
+
&small,
|
|
12
|
+
& h1,
|
|
13
|
+
& h2,
|
|
14
|
+
& h3,
|
|
15
|
+
& h4,
|
|
16
|
+
& h5,
|
|
17
|
+
& h6,
|
|
18
|
+
& p,
|
|
19
|
+
& td,
|
|
20
|
+
& th,
|
|
21
|
+
& small {
|
|
22
|
+
color: $color !important;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.text-black { @include text-color-variant($black); }
|
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
// ---------
|
|
18
18
|
|
|
19
19
|
$primary-color: #25aceb;
|
|
20
|
-
$secondary-color: #
|
|
20
|
+
$secondary-color: #70787C;
|
|
21
21
|
$success-color: #59bf22;
|
|
22
22
|
$warning-color: #ffaa00;
|
|
23
23
|
$alert-color: #ff6d33;
|
|
24
|
-
$light-gray: #
|
|
25
|
-
$medium-gray: #
|
|
26
|
-
$dark-gray: #
|
|
24
|
+
$light-gray: #F3F6F8;
|
|
25
|
+
$medium-gray: #C9CED1;
|
|
26
|
+
$dark-gray: #313A3E;
|
|
27
27
|
$black: #000000;
|
|
28
28
|
$white: #ffffff;
|
|
29
29
|
$pre-color: #ff6908;
|
data/lib/nfg_ui/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: nfg_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.12.
|
|
4
|
+
version: 0.12.14
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jonathan Roehm
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2021-09-
|
|
12
|
+
date: 2021-09-23 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: bootstrap
|
|
@@ -550,10 +550,15 @@ files:
|
|
|
550
550
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/application.scss
|
|
551
551
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_alignment.scss
|
|
552
552
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_button.scss
|
|
553
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_grid.scss
|
|
554
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_typography.scss
|
|
553
555
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_backgrounds.scss
|
|
556
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_borders.scss
|
|
557
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_content_sections.scss
|
|
554
558
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_layout.scss
|
|
555
559
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_rainbow_bar.scss
|
|
556
560
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_spacers.scss
|
|
561
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_text_colors.scss
|
|
557
562
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_typography.scss
|
|
558
563
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss
|
|
559
564
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/application.scss
|