fortitude-sass 0.5.0 → 0.5.1

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.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +0 -1
  3. data/Gemfile.lock +1 -1
  4. data/app/assets/stylesheets/fortitude/api/blocks/_badge.scss +97 -0
  5. data/app/assets/stylesheets/fortitude/api/blocks/_bare-list.scss +11 -0
  6. data/app/assets/stylesheets/fortitude/api/blocks/_block-list.scss +41 -0
  7. data/app/assets/stylesheets/fortitude/api/blocks/_box.scss +23 -0
  8. data/app/assets/stylesheets/fortitude/api/blocks/_button.scss +163 -0
  9. data/app/assets/stylesheets/fortitude/api/blocks/_container.scss +38 -0
  10. data/app/assets/stylesheets/fortitude/api/blocks/_flag.scss +198 -0
  11. data/app/assets/stylesheets/fortitude/api/blocks/_flashbar.scss +17 -0
  12. data/app/assets/stylesheets/fortitude/api/blocks/_fluid-container.scss +8 -0
  13. data/app/assets/stylesheets/fortitude/api/blocks/_inline-list.scss +11 -0
  14. data/app/assets/stylesheets/fortitude/api/blocks/_input.scss +344 -0
  15. data/app/assets/stylesheets/fortitude/api/blocks/_layout.scss +118 -0
  16. data/app/assets/stylesheets/fortitude/api/blocks/_list-navigation.scss +22 -0
  17. data/app/assets/stylesheets/fortitude/api/blocks/_media.scss +86 -0
  18. data/app/assets/stylesheets/fortitude/api/blocks/_modal.scss +1 -0
  19. data/app/assets/stylesheets/fortitude/api/blocks/_navigationbar.scss +1 -0
  20. data/app/assets/stylesheets/fortitude/api/blocks/_shade.scss +18 -0
  21. data/app/assets/stylesheets/fortitude/api/blocks/_table.scss +1 -0
  22. data/app/assets/stylesheets/fortitude/api/blocks/_tabs-navigation.scss +45 -0
  23. data/app/assets/stylesheets/fortitude/api/blocks/_tabs.scss +11 -0
  24. data/app/assets/stylesheets/fortitude/api/blocks/_text.scss +1 -0
  25. data/app/assets/stylesheets/fortitude/api/blocks/_tooltip.scss +149 -0
  26. data/app/assets/stylesheets/fortitude/api/blocks/_ui-list.scss +50 -0
  27. data/app/assets/stylesheets/fortitude/api/blocks/_wings.scss +1 -0
  28. data/bower.json +1 -1
  29. data/lib/fortitude-sass/version.rb +1 -1
  30. metadata +25 -1
@@ -0,0 +1,344 @@
1
+ /*------------------------------------*\
2
+ #INPUT
3
+ \*------------------------------------*/
4
+
5
+ $fortitude-field-input-placeholder-color: #a9a9a9 !default;
6
+ $fortitude-field-input-height: double($fortitude-base-spacing-unit) !default;
7
+ $fortitude-field-input-background-color: white !default;
8
+ $fortitude-field-input-border-width: 0.1rem !default;
9
+ $fortitude-field-input-border-style: solid !default;
10
+ $fortitude-field-input-border-color: #a9a9a9 !default;
11
+ $fortitude-field-input-border-radius: 0.2rem !default;
12
+
13
+ $fortitude-text-input-placeholder-color: $fortitude-field-input-placeholder-color !default;
14
+ $fortitude-text-input-height: $fortitude-field-input-height !default;
15
+ $fortitude-text-input-background-color: $fortitude-field-input-background-color !default;
16
+ $fortitude-text-input-border-width: $fortitude-field-input-border-width !default;
17
+ $fortitude-text-input-border-style: $fortitude-field-input-border-style !default;
18
+ $fortitude-text-input-border-color: $fortitude-field-input-border-color !default;
19
+ $fortitude-text-input-border-radius: $fortitude-field-input-border-radius !default;
20
+
21
+ $fortitude-textarea-input-placeholder-color: $fortitude-field-input-placeholder-color !default;
22
+ $fortitude-textarea-input-height: $fortitude-field-input-height !default;
23
+ $fortitude-textarea-input-background-color: $fortitude-field-input-background-color !default;
24
+ $fortitude-textarea-input-border-width: $fortitude-field-input-border-width !default;
25
+ $fortitude-textarea-input-border-style: $fortitude-field-input-border-style !default;
26
+ $fortitude-textarea-input-border-color: $fortitude-field-input-border-color !default;
27
+ $fortitude-textarea-input-border-radius: $fortitude-field-input-border-radius !default;
28
+
29
+ $fortitude-select-input-placeholder-color: $fortitude-field-input-placeholder-color !default;
30
+ $fortitude-select-input-height: $fortitude-field-input-height !default;
31
+ $fortitude-select-input-background-color: $fortitude-field-input-background-color !default;
32
+ $fortitude-select-input-border-width: $fortitude-field-input-border-width !default;
33
+ $fortitude-select-input-border-style: $fortitude-field-input-border-style !default;
34
+ $fortitude-select-input-border-color: $fortitude-field-input-border-color !default;
35
+ $fortitude-select-input-border-radius: $fortitude-field-input-border-radius !default;
36
+
37
+ $fortitude-color-input-placeholder-color: $fortitude-field-input-placeholder-color !default;
38
+ $fortitude-color-input-height: $fortitude-field-input-height !default;
39
+ $fortitude-color-input-background-color: $fortitude-field-input-background-color !default;
40
+ $fortitude-color-input-border-width: $fortitude-field-input-border-width !default;
41
+ $fortitude-color-input-border-style: $fortitude-field-input-border-style !default;
42
+ $fortitude-color-input-border-color: $fortitude-field-input-border-color !default;
43
+ $fortitude-color-input-border-radius: $fortitude-field-input-border-radius !default;
44
+
45
+ $fortitude-range-input-height: $fortitude-field-input-height !default;
46
+ $fortitude-range-input-background-color: false !default;
47
+ $fortitude-range-input-border-width: 0 !default;
48
+ $fortitude-range-input-border-style: $fortitude-field-input-border-style !default;
49
+ $fortitude-range-input-border-color: $fortitude-field-input-border-color !default;
50
+ $fortitude-range-input-border-radius: $fortitude-field-input-border-radius !default;
51
+
52
+ $fortitude-switch-input-size: $fortitude-base-spacing-unit - 0.4rem !default;
53
+ $fortitude-switch-input-background-color: false !default;
54
+ $fortitude-switch-input-border-width: 0.1rem !default;
55
+ $fortitude-switch-input-border-style: solid !default;
56
+ $fortitude-switch-input-border-color: #a9a9a9 !default;
57
+ $fortitude-switch-input-border-radius: 0.2rem !default;
58
+
59
+ $fortitude-checkbox-input-size: $fortitude-switch-input-size !default;
60
+ $fortitude-checkbox-input-background-color: $fortitude-switch-input-background-color !default;
61
+ $fortitude-checkbox-input-border-width: $fortitude-switch-input-border-width !default;
62
+ $fortitude-checkbox-input-border-style: $fortitude-switch-input-border-style !default;
63
+ $fortitude-checkbox-input-border-color: $fortitude-switch-input-border-color !default;
64
+ $fortitude-checkbox-input-border-radius: $fortitude-switch-input-border-radius !default;
65
+
66
+ $fortitude-radio-input-size: $fortitude-switch-input-size !default;
67
+ $fortitude-radio-input-background-color: $fortitude-switch-input-background-color !default;
68
+ $fortitude-radio-input-border-width: $fortitude-switch-input-border-width !default;
69
+ $fortitude-radio-input-border-style: $fortitude-switch-input-border-style !default;
70
+ $fortitude-radio-input-border-color: $fortitude-switch-input-border-color !default;
71
+ $fortitude-radio-input-border-radius: 10rem !default;
72
+
73
+ $fortitude-enable-input--full: false !default;
74
+ $fortitude-enable-input--pill: false !default;
75
+
76
+ // Here we set a variable assuming that `box-sizing: border-box;` is not set
77
+ // globally. If it has been previously been defined, the following variable will
78
+ // be overriden and will be set to `true`.
79
+ $fortitude-global-border-box: false !default;
80
+
81
+ @mixin fortitude-input {
82
+ /**
83
+ * 1. Allow us to style box model properties.
84
+ * 2. Line different sized inputs up a little nicer.
85
+ * 3. Make inputs inherit use their initial styles (fixes zooming on iOS).
86
+ * 4. Fixes odd inner spacing in IE7.
87
+ **/
88
+ @include fortitude-font-size($fortitude-base-font-size);
89
+ /* [3] */
90
+ display: inline-block;
91
+ /* [1] */
92
+ vertical-align: middle;
93
+ /* [2] */
94
+ font: inherit;
95
+ overflow: visible;
96
+ /* [4] */
97
+ max-width: 100%;
98
+ @if $fortitude-global-border-box == false {
99
+ box-sizing: border-box;
100
+ /* [10] */
101
+ }
102
+ }
103
+
104
+ @mixin fortitude-text-input {
105
+ @include fortitude-input;
106
+ /**
107
+ * 5. Reset/normalize some styles.
108
+ * 6. Subtract the border size from the padding value so that inputs do not
109
+ * grow larger as we add borders.
110
+ **/
111
+ height: $fortitude-text-input-height;
112
+ margin: fortitude-block-margin($fortitude-text-input-height, $fortitude-text-input-border-width, $fortitude-base-line-height) 0;
113
+ /* [5] */
114
+ padding: fortitude-block-padding($fortitude-text-input-height, $fortitude-text-input-border-width, $fortitude-base-line-height);
115
+ /* [6] */
116
+ @if $fortitude-text-input-border-width != 0 {
117
+ border: $fortitude-text-input-border-width $fortitude-text-input-border-style $fortitude-text-input-border-color;
118
+ }
119
+ @else {
120
+ border: 0;
121
+ /* [5] */
122
+ }
123
+ @if $fortitude-text-input-border-radius != 0 {
124
+ border-radius: $fortitude-text-input-border-radius;
125
+ }
126
+ @else {
127
+ border-radius: 0;
128
+ /* [5] */
129
+ }
130
+ @if $fortitude-text-input-background-color {
131
+ background-color: $fortitude-text-input-background-color;
132
+ }
133
+ &::placeholder {
134
+ color: $fortitude-text-input-placeholder-color;
135
+ }
136
+ }
137
+
138
+ @mixin fortitude-textarea-input {
139
+ @include fortitude-input;
140
+ /**
141
+ * 5. Reset/normalize some styles.
142
+ * 6. Subtract the border size from the padding value so that inputs do not
143
+ * grow larger as we add borders.
144
+ **/
145
+ min-height: $fortitude-textarea-input-height;
146
+ margin: fortitude-block-margin($fortitude-textarea-input-height, $fortitude-textarea-input-border-width, $fortitude-base-line-height) 0;
147
+ /* [5] */
148
+ padding: fortitude-block-padding($fortitude-textarea-input-height, $fortitude-textarea-input-border-width, $fortitude-base-line-height);
149
+ /* [6] */
150
+ @if $fortitude-textarea-input-border-width != 0 {
151
+ border: $fortitude-textarea-input-border-width $fortitude-textarea-input-border-style $fortitude-textarea-input-border-color;
152
+ }
153
+ @else {
154
+ border: 0;
155
+ /* [5] */
156
+ }
157
+ @if $fortitude-textarea-input-border-radius != 0 {
158
+ border-radius: $fortitude-textarea-input-border-radius;
159
+ }
160
+ @else {
161
+ border-radius: 0;
162
+ /* [5] */
163
+ }
164
+ @if $fortitude-textarea-input-background-color {
165
+ background-color: $fortitude-textarea-input-background-color;
166
+ }
167
+ &::placeholder {
168
+ color: $fortitude-textarea-input-placeholder-color;
169
+ }
170
+ }
171
+
172
+ @mixin fortitude-select-input {
173
+ @include fortitude-input;
174
+ /**
175
+ * 5. Reset/normalize some styles.
176
+ * 6. Subtract the border size from the padding value so that inputs do not
177
+ * grow larger as we add borders.
178
+ **/
179
+ height: $fortitude-select-input-height;
180
+ margin: fortitude-block-margin($fortitude-select-input-height, $fortitude-select-input-border-width, $fortitude-base-line-height) 0;
181
+ /* [5] */
182
+ padding: fortitude-block-padding($fortitude-select-input-height, $fortitude-select-input-border-width, $fortitude-base-line-height);
183
+ /* [6] */
184
+ @if $fortitude-select-input-border-width != 0 {
185
+ border: $fortitude-select-input-border-width $fortitude-select-input-border-style $fortitude-select-input-border-color;
186
+ }
187
+ @else {
188
+ border: 0;
189
+ /* [5] */
190
+ }
191
+ @if $fortitude-select-input-border-radius != 0 {
192
+ border-radius: $fortitude-select-input-border-radius;
193
+ }
194
+ @else {
195
+ border-radius: 0;
196
+ /* [5] */
197
+ }
198
+ @if $fortitude-select-input-background-color {
199
+ background-color: $fortitude-select-input-background-color;
200
+ }
201
+ &.placeholder {
202
+ color: $fortitude-select-input-placeholder-color;
203
+ }
204
+ &[multiple] {
205
+ height: auto;
206
+ }
207
+ }
208
+
209
+ @mixin fortitude-checkbox-input {
210
+ @include fortitude-input;
211
+ /**
212
+ * 5. Reset/normalize some styles.
213
+ * 6. Subtract the border size from the padding value so that inputs do not
214
+ * grow larger as we add borders.
215
+ **/
216
+ width: $fortitude-checkbox-input-size;
217
+ height: $fortitude-checkbox-input-size;
218
+ margin: fortitude-block-margin($fortitude-checkbox-input-size + 0.2rem, $fortitude-checkbox-input-border-width, $fortitude-base-line-height) 0;
219
+ /* [5] */
220
+ padding: fortitude-block-padding($fortitude-checkbox-input-size, $fortitude-checkbox-input-border-width, $fortitude-base-line-height);
221
+ /* [6] */
222
+ @if $fortitude-checkbox-input-border-width != 0 {
223
+ border: $fortitude-checkbox-input-border-width $fortitude-checkbox-input-border-style $fortitude-checkbox-input-border-color;
224
+ }
225
+ @else {
226
+ border: 0;
227
+ /* [5] */
228
+ }
229
+ @if $fortitude-checkbox-input-border-radius != 0 {
230
+ border-radius: $fortitude-checkbox-input-border-radius;
231
+ }
232
+ @else {
233
+ border-radius: 0;
234
+ /* [5] */
235
+ }
236
+ @if $fortitude-checkbox-input-background-color {
237
+ background-color: $fortitude-checkbox-input-background-color;
238
+ }
239
+ }
240
+
241
+ @mixin fortitude-radio-input {
242
+ @include fortitude-input;
243
+ /**
244
+ * 5. Reset/normalize some styles.
245
+ * 6. Subtract the border size from the padding value so that inputs do not
246
+ * grow larger as we add borders.
247
+ **/
248
+ width: $fortitude-radio-input-size;
249
+ height: $fortitude-radio-input-size;
250
+ margin: fortitude-block-margin($fortitude-radio-input-size + 0.4rem, $fortitude-radio-input-border-width, $fortitude-base-line-height) 0;
251
+ /* [5] */
252
+ padding: fortitude-block-padding($fortitude-radio-input-size, $fortitude-radio-input-border-width, $fortitude-base-line-height);
253
+ /* [6] */
254
+ @if $fortitude-radio-input-border-width != 0 {
255
+ border: $fortitude-radio-input-border-width $fortitude-radio-input-border-style $fortitude-radio-input-border-color;
256
+ }
257
+ @else {
258
+ border: 0;
259
+ /* [5] */
260
+ }
261
+ @if $fortitude-radio-input-border-radius != 0 {
262
+ border-radius: $fortitude-radio-input-border-radius;
263
+ }
264
+ @else {
265
+ border-radius: 0;
266
+ /* [5] */
267
+ }
268
+ @if $fortitude-radio-input-background-color {
269
+ background-color: $fortitude-radio-input-background-color;
270
+ }
271
+ }
272
+
273
+ @mixin fortitude-range-input {
274
+ @include fortitude-input;
275
+ /**
276
+ * 5. Reset/normalize some styles.
277
+ * 6. Subtract the border size from the padding value so that inputs do not
278
+ * grow larger as we add borders.
279
+ **/
280
+ height: $fortitude-range-input-height;
281
+ margin: fortitude-block-margin($fortitude-range-input-height, $fortitude-range-input-border-width, $fortitude-base-line-height) 0;
282
+ /* [5] */
283
+ padding: fortitude-block-padding($fortitude-range-input-height, $fortitude-range-input-border-width, $fortitude-base-line-height) 0;
284
+ /* [6] */
285
+ @if $fortitude-range-input-border-width != 0 {
286
+ border: $fortitude-range-input-border-width $fortitude-range-input-border-style $fortitude-range-input-border-color;
287
+ }
288
+ @else {
289
+ border: 0;
290
+ /* [5] */
291
+ }
292
+ @if $fortitude-range-input-border-radius != 0 {
293
+ border-radius: $fortitude-range-input-border-radius;
294
+ }
295
+ @else {
296
+ border-radius: 0;
297
+ /* [5] */
298
+ }
299
+ @if $fortitude-range-input-background-color {
300
+ background-color: $fortitude-range-input-background-color;
301
+ }
302
+ }
303
+
304
+ @mixin fortitude-color-input {
305
+ @include fortitude-input;
306
+ /**
307
+ * 5. Reset/normalize some styles.
308
+ * 6. Subtract the border size from the padding value so that inputs do not
309
+ * grow larger as we add borders.
310
+ **/
311
+ height: $fortitude-color-input-height;
312
+ margin: fortitude-block-margin($fortitude-color-input-height, $fortitude-color-input-border-width, $fortitude-base-line-height) 0;
313
+ /* [5] */
314
+ padding: fortitude-block-padding($fortitude-color-input-height, $fortitude-color-input-border-width, $fortitude-base-line-height);
315
+ /* [6] */
316
+ @if $fortitude-color-input-border-width != 0 {
317
+ border: $fortitude-color-input-border-width $fortitude-color-input-border-style $fortitude-color-input-border-color;
318
+ }
319
+ @else {
320
+ border: 0;
321
+ /* [5] */
322
+ }
323
+ @if $fortitude-color-input-border-radius != 0 {
324
+ border-radius: $fortitude-color-input-border-radius;
325
+ }
326
+ @else {
327
+ border-radius: 0;
328
+ /* [5] */
329
+ }
330
+ @if $fortitude-color-input-background-color {
331
+ background-color: $fortitude-color-input-background-color;
332
+ }
333
+ &::placeholder {
334
+ color: $fortitude-color-input-placeholder-color;
335
+ }
336
+ }
337
+
338
+ @mixin fortitude-input--full {
339
+ width: 100%;
340
+ }
341
+
342
+ @mixin fortitude-input--pill {
343
+ border-radius: 10rem;
344
+ }
@@ -0,0 +1,118 @@
1
+ /*------------------------------------*\
2
+ #LAYOUT
3
+ \*------------------------------------*/
4
+
5
+ /**
6
+ * The Fortitude layout system uses `box-sizing: border-box;` and
7
+ * `display: inline-block;` to create an extremely powerful, flexible
8
+ * alternative to the traditional grid system. Combine the layout items with
9
+ * the widths found in `trumps.widths`.
10
+ **/
11
+
12
+ // Predefine the variables below in order to alter and enable specific features.
13
+ $fortitude-layout-gutter: $fortitude-base-spacing-unit !default;
14
+ $fortitude-layout-gutter--small: halve($fortitude-layout-gutter) !default;
15
+ $fortitude-layout-gutter--large: double($fortitude-layout-gutter) !default;
16
+
17
+ $fortitude-enable-layout--small: false !default;
18
+ $fortitude-enable-layout--large: false !default;
19
+ $fortitude-enable-layout--flush: false !default;
20
+ $fortitude-enable-layout--rev: false !default;
21
+ $fortitude-enable-layout--middle: false !default;
22
+ $fortitude-enable-layout--bottom: false !default;
23
+ $fortitude-enable-layout--right: false !default;
24
+ $fortitude-enable-layout--center: false !default;
25
+
26
+ // Here we set a variable assuming that `box-sizing: border-box;` is not set
27
+ // globally. If it has been previously been defined, the following variable will
28
+ // be overriden and will be set to `true`.
29
+ $fortitude-global-border-box: false !default;
30
+
31
+ @mixin fortitude-layout($fortitude-extension: null) {
32
+ list-style: none;
33
+ display: block;
34
+ margin: 0;
35
+ padding: 0;
36
+ margin-left: -$fortitude-layout-gutter;
37
+ }
38
+
39
+ @mixin fortitude-layout__item($fortitude-extension: null) {
40
+ /**
41
+ * 1. Cause columns to stack side-by-side.
42
+ * 2. Space columns apart.
43
+ * 3. Align columns to the tops of each other.
44
+ * 4. Full-width unless told to behave otherwise.
45
+ * 5. Required to combine fluid widths and fixed gutters.
46
+ **/
47
+ display: inline-block;
48
+ /* [1] */
49
+ padding-left: $fortitude-layout-gutter;
50
+ /* [2] */
51
+ vertical-align: top;
52
+ /* [3] */
53
+ width: 100%;
54
+ /* [4] */
55
+ position: relative;
56
+ @if $fortitude-global-border-box == false {
57
+ box-sizing: border-box;
58
+ /* [5] */
59
+ }
60
+ }
61
+
62
+ @mixin fortitude-layout--small {
63
+ margin-left: -$fortitude-layout-gutter--small;
64
+ }
65
+
66
+ @mixin fortitude-layout--small__item {
67
+ padding-left: $fortitude-layout-gutter--small;
68
+ }
69
+
70
+ @mixin fortitude-layout--large {
71
+ margin-left: -$fortitude-layout-gutter--large;
72
+ }
73
+
74
+ @mixin fortitude-layout--large__item {
75
+ padding-left: $fortitude-layout-gutter--large;
76
+ }
77
+
78
+ @mixin fortitude-layout--flush {
79
+ margin-left: 0;
80
+ }
81
+
82
+ @mixin fortitude-layout--flush__item {
83
+ padding-left: 0;
84
+ }
85
+
86
+ @mixin fortitude-layout--rev {
87
+ direction: rtl;
88
+ text-align: left;
89
+ }
90
+
91
+ @mixin fortitude-layout--rev__item {
92
+ direction: ltr;
93
+ text-align: left;
94
+ }
95
+
96
+ @mixin fortitude-layout--middle__item {
97
+ vertical-align: middle;
98
+ }
99
+
100
+ @mixin fortitude-layout--bottom__item {
101
+ vertical-align: bottom;
102
+ }
103
+
104
+ @mixin fortitude-layout--right {
105
+ text-align: right;
106
+ }
107
+
108
+ @mixin fortitude-layout--right__item {
109
+ text-align: left;
110
+ }
111
+
112
+ @mixin fortitude-layout--center {
113
+ text-align: center;
114
+ }
115
+
116
+ @mixin fortitude-layout--center__item {
117
+ text-align: left;
118
+ }
@@ -0,0 +1,22 @@
1
+ /*------------------------------------*\
2
+ #list-navigation
3
+ \*------------------------------------*/
4
+
5
+ /**
6
+ * The list-navigation object simply removes any indents and bullet points from lists.
7
+ * and sets the list-navigation__link to `display: block;`
8
+ **/
9
+
10
+ @mixin fortitude-list-navigation {
11
+ margin: 0;
12
+ padding: 0;
13
+ list-style: none;
14
+ }
15
+
16
+ @mixin fortitude-list-navigation__item {
17
+ display: block;
18
+ }
19
+
20
+ @mixin fortitude-list-navigation__link {
21
+ display: block;
22
+ }
@@ -0,0 +1,86 @@
1
+ /*------------------------------------*\
2
+ #MEDIA
3
+ \*------------------------------------*/
4
+
5
+ /**
6
+ * Place any image- and text-like content side-by-side, as per:
7
+ * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
8
+ **/
9
+
10
+ // Predefine the variables below in order to alter and enable specific features.
11
+ $fortitude-media-gutter: $fortitude-base-spacing-unit !default;
12
+ $fortitude-media-gutter--small: halve($fortitude-media-gutter) !default;
13
+ $fortitude-media-gutter--large: double($fortitude-media-gutter) !default;
14
+
15
+ $fortitude-enable-media--small: false !default;
16
+ $fortitude-enable-media--large: false !default;
17
+ $fortitude-enable-media--rev: false !default;
18
+ $fortitude-enable-media--flush: false !default;
19
+ $fortitude-enable-media--responsive: false !default;
20
+ $fortitude-media-collapse-at: 720px !default;
21
+
22
+ @mixin fortitude-media {
23
+ @include fortitude-clearfix;
24
+ display: block;
25
+ }
26
+
27
+ @mixin fortitude-media__object {
28
+ float: left;
29
+ margin-right: $fortitude-media-gutter;
30
+ > img {
31
+ display: block;
32
+ margin-left: auto;
33
+ margin-right: auto;
34
+ }
35
+ }
36
+
37
+ @mixin fortitude-media__body {
38
+ overflow: hidden;
39
+ display: block;
40
+ }
41
+
42
+ @mixin fortitude-media--small__object {
43
+ margin-right: $fortitude-media-gutter--small;
44
+ }
45
+
46
+ @mixin fortitude-media--small--rev__object {
47
+ margin-right: 0;
48
+ margin-left: $fortitude-media-gutter--small;
49
+ }
50
+
51
+ @mixin fortitude-media--large__object {
52
+ margin-right: $fortitude-media-gutter--large;
53
+ }
54
+
55
+ @mixin fortitude-media--large--rev__object {
56
+ margin-right: 0;
57
+ margin-left: $fortitude-media-gutter--large;
58
+ }
59
+
60
+ @mixin fortitude-media--rev__object {
61
+ float: right;
62
+ margin-right: 0;
63
+ margin-left: $fortitude-media-gutter;
64
+ }
65
+
66
+ @mixin fortitude-media--flush__object {
67
+ margin-right: 0;
68
+ margin-left: 0;
69
+ }
70
+
71
+ @mixin fortitude-media--responsive__object {
72
+ float: none;
73
+ margin-right: 0;
74
+ margin-bottom: $fortitude-media-gutter;
75
+ margin-left: 0;
76
+ }
77
+
78
+ @mixin fortitude-media--responsive--small__object {
79
+ margin-right: 0;
80
+ margin-left: 0;
81
+ }
82
+
83
+ @mixin fortitude-media--responsive--large__object {
84
+ margin-right: 0;
85
+ margin-left: 0;
86
+ }
@@ -0,0 +1,18 @@
1
+ /*------------------------------------*\
2
+ #SHADE
3
+ \*------------------------------------*/
4
+
5
+ $fortitude-shade-background-color: rgba(0, 0, 0, 0.3) !default;
6
+ $fortitude-shade-transition-speed: 0.3s !default;
7
+
8
+ @mixin fortitude-shade {
9
+ display: none;
10
+ position: fixed;
11
+ top: 0;
12
+ right: 0;
13
+ bottom: 0;
14
+ left: 0;
15
+ @if $fortitude-shade-background-color {
16
+ background-color: $fortitude-shade-background-color;
17
+ }
18
+ }
@@ -0,0 +1,45 @@
1
+ /*------------------------------------*\
2
+ #TABS NAVIGATION
3
+ \*------------------------------------*/
4
+
5
+ @mixin fortitude-tabs-navigation {
6
+ /**
7
+ * A simple abstraction for making equal-width navigation tabs.
8
+ *
9
+ * 1. Reset any residual styles (most likely from lists).
10
+ * 2. Tables for layout!
11
+ **/
12
+ margin: 0;
13
+ /* [1] */
14
+ padding: 0;
15
+ /* [1] */
16
+ list-style: none;
17
+ /* [1] */
18
+ display: table;
19
+ /* [2] */
20
+ text-align: center;
21
+ }
22
+
23
+ @mixin fortitude-tabs-navigation--fixed {
24
+ /**
25
+ * 1. Force all `table-cell` children to have equal widths.
26
+ * 2. Force the object to be the full width of its parent. Combined with [2],
27
+ * this makes the object behave in a quasi-`display: block;` manner.
28
+ **/
29
+ table-layout: fixed;
30
+ /* [1] */
31
+ width: 100%;
32
+ /* [2] */
33
+ }
34
+
35
+ @mixin fortitude-tabs-navigation__item {
36
+ /**
37
+ * 1. Tables for layout!
38
+ **/
39
+ display: table-cell;
40
+ /* [1] */
41
+ }
42
+
43
+ @mixin fortitude-tabs-navigation__link {
44
+ display: block;
45
+ }
@@ -0,0 +1,11 @@
1
+ /*------------------------------------*\
2
+ #TABS
3
+ \*------------------------------------*/
4
+
5
+ @mixin fortitude-tabs__target {
6
+ display: none;
7
+ }
8
+
9
+ @mixin fortitude-tabs__target--is-active {
10
+ display: block;
11
+ }