fortitude-sass 0.4.9 → 0.5.0

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 (64) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +6 -5
  3. data/Gemfile.lock +1 -1
  4. data/app/assets/stylesheets/fortitude/base/_hr.scss +7 -7
  5. data/app/assets/stylesheets/fortitude/base/_images.scss +10 -12
  6. data/app/assets/stylesheets/fortitude/base/_lists.scss +6 -8
  7. data/app/assets/stylesheets/fortitude/base/_page.scss +14 -10
  8. data/app/assets/stylesheets/fortitude/blocks/_badge.scss +28 -137
  9. data/app/assets/stylesheets/fortitude/blocks/_bare-list.scss +0 -12
  10. data/app/assets/stylesheets/fortitude/blocks/_block-list.scss +20 -74
  11. data/app/assets/stylesheets/fortitude/blocks/_box.scss +1 -27
  12. data/app/assets/stylesheets/fortitude/blocks/_button.scss +38 -219
  13. data/app/assets/stylesheets/fortitude/blocks/_container.scss +2 -50
  14. data/app/assets/stylesheets/fortitude/blocks/_flag.scss +113 -397
  15. data/app/assets/stylesheets/fortitude/blocks/_flashbar.scss +0 -18
  16. data/app/assets/stylesheets/fortitude/blocks/_fluid-container.scss +2 -11
  17. data/app/assets/stylesheets/fortitude/blocks/_inline-list.scss +3 -15
  18. data/app/assets/stylesheets/fortitude/blocks/_input.scss +14 -355
  19. data/app/assets/stylesheets/fortitude/blocks/_layout.scss +77 -263
  20. data/app/assets/stylesheets/fortitude/blocks/_list-navigation.scss +6 -29
  21. data/app/assets/stylesheets/fortitude/blocks/_media.scss +104 -265
  22. data/app/assets/stylesheets/fortitude/blocks/_modal.scss +2 -2
  23. data/app/assets/stylesheets/fortitude/blocks/_navigationbar.scss +26 -43
  24. data/app/assets/stylesheets/fortitude/blocks/_shade.scss +2 -21
  25. data/app/assets/stylesheets/fortitude/blocks/_table.scss +11 -21
  26. data/app/assets/stylesheets/fortitude/blocks/_tabs-navigation.scss +8 -51
  27. data/app/assets/stylesheets/fortitude/blocks/_tabs.scss +1 -13
  28. data/app/assets/stylesheets/fortitude/blocks/_text.scss +7 -7
  29. data/app/assets/stylesheets/fortitude/blocks/_tooltip.scss +1 -171
  30. data/app/assets/stylesheets/fortitude/blocks/_ui-list.scss +20 -88
  31. data/app/assets/stylesheets/fortitude/blocks/_wings.scss +27 -28
  32. data/app/assets/stylesheets/fortitude/generic/_box-sizing.scss +8 -11
  33. data/app/assets/stylesheets/fortitude/generic/_clearfix.scss +1 -1
  34. data/app/assets/stylesheets/fortitude/generic/_normalize.scss +2 -4
  35. data/app/assets/stylesheets/fortitude/generic/_reset.scss +5 -32
  36. data/app/assets/stylesheets/fortitude/settings/_defaults.scss +15 -33
  37. data/app/assets/stylesheets/fortitude/tools/_functions.scss +57 -60
  38. data/app/assets/stylesheets/fortitude/tools/_mixins.scss +38 -35
  39. data/app/assets/stylesheets/fortitude/trumps/_responsive-border.scss +25 -32
  40. data/app/assets/stylesheets/fortitude/trumps/_responsive-column.scss +18 -19
  41. data/app/assets/stylesheets/fortitude/trumps/_responsive-display.scss +2 -9
  42. data/app/assets/stylesheets/fortitude/trumps/_responsive-float.scss +10 -10
  43. data/app/assets/stylesheets/fortitude/trumps/_responsive-font.scss +11 -9
  44. data/app/assets/stylesheets/fortitude/trumps/_responsive-height.scss +8 -6
  45. data/app/assets/stylesheets/fortitude/trumps/_responsive-line-height.scss +11 -10
  46. data/app/assets/stylesheets/fortitude/trumps/_responsive-margin.scss +88 -127
  47. data/app/assets/stylesheets/fortitude/trumps/_responsive-padding.scss +45 -62
  48. data/app/assets/stylesheets/fortitude/trumps/_responsive-text.scss +12 -13
  49. data/app/assets/stylesheets/fortitude/trumps/_screen-lock.scss +1 -1
  50. data/app/assets/stylesheets/fortitude.scss +24 -0
  51. data/bower.json +1 -1
  52. data/lib/fortitude-sass/version.rb +1 -1
  53. metadata +2 -13
  54. data/app/assets/stylesheets/fortitude/theme/base/_page.scss +0 -19
  55. data/app/assets/stylesheets/fortitude/theme/extensions/_badge.scss +0 -7
  56. data/app/assets/stylesheets/fortitude/theme/extensions/_box.scss +0 -13
  57. data/app/assets/stylesheets/fortitude/theme/extensions/_button.scss +0 -7
  58. data/app/assets/stylesheets/fortitude/theme/extensions/_flashbar.scss +0 -6
  59. data/app/assets/stylesheets/fortitude/theme/extensions/_navigationbar.scss +0 -50
  60. data/app/assets/stylesheets/fortitude/theme/extensions/_text.scss +0 -5
  61. data/app/assets/stylesheets/fortitude/theme/extensions/_wings.scss +0 -9
  62. data/app/assets/stylesheets/fortitude/theme/settings/_colors.scss +0 -53
  63. data/app/assets/stylesheets/fortitude/theme/settings/_defaults.scss +0 -5
  64. data/app/assets/stylesheets/fortitude/theme.scss +0 -11
@@ -1,288 +1,102 @@
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
-
27
-
28
-
29
-
30
- // Here we set a variable assuming that `box-sizing: border-box;` is not set
31
- // globally. If it has been previously been defined, the following variable will
32
- // be overriden and will be set to `true`.
33
- $fortitude-global-border-box: false !default;
34
-
35
-
36
-
37
-
38
-
39
- @mixin fortitude-layout($extension: null) {
40
- list-style: none;
41
- display: block;
42
- margin: 0;
43
- padding: 0;
44
- margin-left: -$fortitude-layout-gutter;
45
- }
46
-
47
- @mixin fortitude-layout__item($extension: null) {
48
- /**
49
- * 1. Cause columns to stack side-by-side.
50
- * 2. Space columns apart.
51
- * 3. Align columns to the tops of each other.
52
- * 4. Full-width unless told to behave otherwise.
53
- * 5. Required to combine fluid widths and fixed gutters.
54
- */
55
- display: inline-block; /* [1] */
56
- padding-left: $fortitude-layout-gutter; /* [2] */
57
- vertical-align: top; /* [3] */
58
- width: 100%; /* [4] */
59
- position: relative;
60
-
61
- @if $fortitude-global-border-box == false {
62
- box-sizing: border-box; /* [5] */
63
- }
64
- }
65
-
66
- @mixin fortitude-layout--small {
67
- margin-left: -($fortitude-layout-gutter--small);
68
- }
69
-
70
- @mixin fortitude-layout--small__item {
71
- padding-left: $fortitude-layout-gutter--small;
72
- }
73
-
74
- @mixin fortitude-layout--large {
75
- margin-left: -($fortitude-layout-gutter--large);
76
- }
77
-
78
- @mixin fortitude-layout--large__item {
79
- padding-left: $fortitude-layout-gutter--large;
80
- }
81
-
82
- @mixin fortitude-layout--flush {
83
- margin-left: 0;
84
- }
85
-
86
- @mixin fortitude-layout--flush__item {
87
- padding-left: 0;
88
- }
89
-
90
- @mixin fortitude-layout--rev {
91
- direction: rtl;
92
- text-align: left;
93
- }
94
-
95
- @mixin fortitude-layout--rev__item {
96
- direction: ltr;
97
- text-align: left;
98
- }
99
-
100
- @mixin fortitude-layout--middle__item {
101
- vertical-align: middle;
102
- }
103
-
104
- @mixin fortitude-layout--bottom__item {
105
- vertical-align: bottom;
106
- }
107
-
108
- @mixin fortitude-layout--right {
109
- text-align: right;
110
- }
111
-
112
- @mixin fortitude-layout--right__item {
113
- text-align: left;
114
- }
115
-
116
- @mixin fortitude-layout--center {
117
- text-align: center;
118
- }
119
-
120
- @mixin fortitude-layout--center__item {
121
- text-align: left;
122
- }
123
-
124
- /**
125
- * Begin a layout group.
126
- */
127
-
128
1
  .#{$fortitude-namespace}layout {
129
- @include fortitude-layout;
2
+ @include fortitude-layout;
130
3
  }
131
4
 
132
- .#{$fortitude-namespace}layout__item {
133
- @include fortitude-layout__item;
134
- }
135
-
136
-
137
-
138
-
139
-
140
- @if ($fortitude-enable-layout--small == true) {
141
-
142
- /**
143
- * Layouts with small gutters.
144
- */
145
-
146
- .#{$fortitude-namespace}layout--small {
147
- @include fortitude-layout--small;
148
- > .#{$fortitude-namespace}layout__item {
149
- @include fortitude-layout--small__item;
150
- }
151
-
152
- }
153
-
5
+ .#{$fortitude-namespace}layout__item {
6
+ @include fortitude-layout__item;
154
7
  }
155
8
 
156
- @if ($fortitude-enable-layout--large == true) {
157
-
158
- /**
159
- * Layouts with large gutters.
160
- */
161
-
162
- .#{$fortitude-namespace}layout--large {
163
- @include fortitude-layout--large;
164
-
165
- > .#{$fortitude-namespace}layout__item {
166
- @include fortitude-layout--large__item;
167
- }
168
-
9
+ @if $fortitude-enable-layout--small == true {
10
+ /**
11
+ * Layouts with small gutters.
12
+ **/
13
+ .#{$fortitude-namespace}layout--small {
14
+ @include fortitude-layout--small;
15
+ > .#{$fortitude-namespace}layout__item {
16
+ @include fortitude-layout--small__item;
169
17
  }
170
-
18
+ }
171
19
  }
172
20
 
173
-
174
-
175
-
176
-
177
- @if ($fortitude-enable-layout--flush == true) {
178
-
179
- /**
180
- * Layouts with no gutters.
181
- */
182
-
183
- .#{$fortitude-namespace}layout--flush {
184
- @include fortitude-layout--flush;
185
-
186
- > .#{$fortitude-namespace}layout__item {
187
- @include fortitude-layout--flush__item;
188
- }
189
-
21
+ @if $fortitude-enable-layout--large == true {
22
+ /**
23
+ * Layouts with large gutters.
24
+ **/
25
+ .#{$fortitude-namespace}layout--large {
26
+ @include fortitude-layout--large;
27
+ > .#{$fortitude-namespace}layout__item {
28
+ @include fortitude-layout--large__item;
190
29
  }
191
-
30
+ }
192
31
  }
193
32
 
194
-
195
-
196
-
197
-
198
- @if ($fortitude-enable-layout--rev == true) {
199
-
200
- /**
201
- * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
202
- * markup will display in order 4, 3, 2, 1 on your page.
203
- */
204
-
205
- .#{$fortitude-namespace}layout--rev {
206
- @include fortitude-layout--rev;
207
-
208
- > .#{$fortitude-namespace}layout__item {
209
- @include fortitude-layout--rev__item;
210
- }
211
-
33
+ @if $fortitude-enable-layout--flush == true {
34
+ /**
35
+ * Layouts with no gutters.
36
+ **/
37
+ .#{$fortitude-namespace}layout--flush {
38
+ @include fortitude-layout--flush;
39
+ > .#{$fortitude-namespace}layout__item {
40
+ @include fortitude-layout--flush__item;
212
41
  }
213
-
42
+ }
43
+ }
44
+
45
+ @if $fortitude-enable-layout--rev == true {
46
+ /**
47
+ * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
48
+ * markup will display in order 4, 3, 2, 1 on your page.
49
+ **/
50
+ .#{$fortitude-namespace}layout--rev {
51
+ @include fortitude-layout--rev;
52
+ > .#{$fortitude-namespace}layout__item {
53
+ @include fortitude-layout--rev__item;
54
+ }
55
+ }
214
56
  }
215
57
 
216
-
217
-
218
-
219
-
220
- @if ($fortitude-enable-layout--middle == true) {
221
-
222
- /**
223
- * Align layout items to the vertical centers of each other.
224
- */
225
-
226
- .#{$fortitude-namespace}layout--middle {
227
-
228
- > .#{$fortitude-namespace}layout__item {
229
- @include fortitude-layout--middle__item;
230
- }
231
-
58
+ @if $fortitude-enable-layout--middle == true {
59
+ /**
60
+ * Align layout items to the vertical centers of each other.
61
+ **/
62
+ .#{$fortitude-namespace}layout--middle {
63
+ > .#{$fortitude-namespace}layout__item {
64
+ @include fortitude-layout--middle__item;
232
65
  }
233
-
66
+ }
234
67
  }
235
68
 
236
- @if ($fortitude-enable-layout--bottom == true) {
237
-
238
- /**
239
- * Align layout items to the vertical bottoms of each other.
240
- */
241
-
242
- .#{$fortitude-namespace}layout--bottom {
243
-
244
- > .#{$fortitude-namespace}layout__item {
245
- @include fortitude-layout--bottom__item;
246
- }
247
-
69
+ @if $fortitude-enable-layout--bottom == true {
70
+ /**
71
+ * Align layout items to the vertical bottoms of each other.
72
+ **/
73
+ .#{$fortitude-namespace}layout--bottom {
74
+ > .#{$fortitude-namespace}layout__item {
75
+ @include fortitude-layout--bottom__item;
248
76
  }
249
-
77
+ }
250
78
  }
251
79
 
252
-
253
-
254
-
255
-
256
- @if ($fortitude-enable-layout--right == true) {
257
-
258
- /**
259
- * Make the layout items fill up from the right hand side.
260
- */
261
-
262
- .#{$fortitude-namespace}layout--right {
263
- @include fortitude-layout--right;
264
-
265
- > .#{$fortitude-namespace}layout__item {
266
- @include fortitude-layout--right__item;
267
- }
268
-
80
+ @if $fortitude-enable-layout--right == true {
81
+ /**
82
+ * Make the layout items fill up from the right hand side.
83
+ **/
84
+ .#{$fortitude-namespace}layout--right {
85
+ @include fortitude-layout--right;
86
+ > .#{$fortitude-namespace}layout__item {
87
+ @include fortitude-layout--right__item;
269
88
  }
270
-
89
+ }
271
90
  }
272
91
 
273
- @if ($fortitude-enable-layout--center == true) {
274
-
275
- /**
276
- * Make the layout items fill up from the center outward.
277
- */
278
-
279
- .#{$fortitude-namespace}layout--center {
280
- @include fortitude-layout--center;
281
-
282
- > .#{$fortitude-namespace}layout__item {
283
- @include fortitude-layout--center__item;
284
- }
285
-
92
+ @if $fortitude-enable-layout--center == true {
93
+ /**
94
+ * Make the layout items fill up from the center outward.
95
+ **/
96
+ .#{$fortitude-namespace}layout--center {
97
+ @include fortitude-layout--center;
98
+ > .#{$fortitude-namespace}layout__item {
99
+ @include fortitude-layout--center__item;
286
100
  }
287
-
101
+ }
288
102
  }
@@ -1,34 +1,11 @@
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
- }
23
-
24
1
  .#{$fortitude-namespace}list-navigation {
25
2
  @include fortitude-list-navigation;
26
3
  }
27
4
 
28
- .#{$fortitude-namespace}list-navigation__item {
29
- @include fortitude-list-navigation__item;
30
- }
5
+ .#{$fortitude-namespace}list-navigation__item {
6
+ @include fortitude-list-navigation__item;
7
+ }
31
8
 
32
- .#{$fortitude-namespace}list-navigation__link {
33
- @include fortitude-list-navigation__link;
34
- }
9
+ .#{$fortitude-namespace}list-navigation__link {
10
+ @include fortitude-list-navigation__link;
11
+ }
@@ -1,289 +1,128 @@
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
-
23
-
24
-
25
-
26
- @mixin fortitude-media {
27
- @include fortitude-clearfix;
28
- display: block;
29
- }
30
-
31
- @mixin fortitude-media__object {
32
- float: left;
33
- margin-right: $fortitude-media-gutter;
34
-
35
- > img {
36
- display: block;
37
- margin-left: auto;
38
- margin-right: auto;
39
- }
40
- }
41
-
42
- @mixin fortitude-media__body {
43
- overflow: hidden;
44
- display: block;
45
- }
46
-
47
- @mixin fortitude-media--small__object {
48
- margin-right: $fortitude-media-gutter--small;
49
- }
50
-
51
- @mixin fortitude-media--small--rev__object {
52
- margin-right: 0;
53
- margin-left: $fortitude-media-gutter--small;
54
- }
55
-
56
- @mixin fortitude-media--large__object {
57
- margin-right: $fortitude-media-gutter--large;
58
- }
59
-
60
- @mixin fortitude-media--large--rev__object {
61
- margin-right: 0;
62
- margin-left: $fortitude-media-gutter--large;
63
- }
64
-
65
- @mixin fortitude-media--rev__object {
66
- float: right;
67
- margin-right: 0;
68
- margin-left: $fortitude-media-gutter;
69
- }
70
-
71
- @mixin fortitude-media--flush__object {
72
- margin-right: 0;
73
- margin-left: 0;
74
- }
75
-
76
- @mixin fortitude-media--responsive__object {
77
- float: none;
78
- margin-right: 0;
79
- margin-bottom: $fortitude-media-gutter;
80
- margin-left: 0;
81
- }
82
-
83
- @mixin fortitude-media--responsive--small__object {
84
- margin-right: 0;
85
- margin-left: 0;
1
+ .#{$fortitude-namespace}media {
2
+ @include fortitude-media;
86
3
  }
87
4
 
88
- @mixin fortitude-media--responsive--large__object {
89
- margin-right: 0;
90
- margin-left: 0;
5
+ .#{$fortitude-namespace}media__object {
6
+ @include fortitude-media__object;
91
7
  }
92
8
 
93
-
94
-
95
- .#{$fortitude-namespace}media {
96
- @include fortitude-media;
9
+ .#{$fortitude-namespace}media__body {
10
+ @include fortitude-media__body;
97
11
  }
98
12
 
99
- .#{$fortitude-namespace}media__object {
100
- @include fortitude-media__object;
101
- }
102
-
103
- .#{$fortitude-namespace}media__body {
104
- @include fortitude-media__body;
13
+ @if $fortitude-enable-media--small == true {
14
+ /**
15
+ * Small media objects.
16
+ **/
17
+ .#{$fortitude-namespace}media--small {
18
+ > .#{$fortitude-namespace}media__object {
19
+ @include fortitude-media--small__object;
105
20
  }
106
-
107
-
108
-
109
-
110
-
111
- @if ($fortitude-enable-media--small == true) {
112
-
113
- /**
114
- * Small media objects.
115
- */
116
-
117
- .#{$fortitude-namespace}media--small {
118
-
21
+ @if $fortitude-enable-media--rev == true {
22
+ /**
23
+ * Small reversed media objects.
24
+ **/
25
+ &.#{$fortitude-namespace}media--rev {
119
26
  > .#{$fortitude-namespace}media__object {
120
- @include fortitude-media--small__object;
121
- }
122
-
123
- @if ($fortitude-enable-media--rev == true) {
124
-
125
- /**
126
- * Small reversed media objects.
127
- */
128
-
129
- &.#{$fortitude-namespace}media--rev {
130
-
131
- > .#{$fortitude-namespace}media__object {
132
- @include fortitude-media--small--rev__object;
133
- }
134
-
135
- }
136
-
27
+ @include fortitude-media--small--rev__object;
137
28
  }
138
-
29
+ }
139
30
  }
140
-
31
+ }
141
32
  }
142
33
 
143
- @if ($fortitude-enable-media--large == true) {
144
-
145
- /**
146
- * Large media objects.
147
- */
148
-
149
- .#{$fortitude-namespace}media--large {
150
-
151
- > .#{$fortitude-namespace}media__object {
152
- @include fortitude-media--large__object;
153
- }
154
-
155
- @if ($fortitude-enable-media--rev == true) {
156
-
157
- /**
158
- * Large reversed media objects.
159
- */
160
-
161
- &.#{$fortitude-namespace}media--rev {
162
-
163
- > .#{$fortitude-namespace}media__object {
164
- @include fortitude-media--large--rev__object;
165
- }
166
-
167
- }
168
-
169
- }
170
-
34
+ @if $fortitude-enable-media--large == true {
35
+ /**
36
+ * Large media objects.
37
+ **/
38
+ .#{$fortitude-namespace}media--large {
39
+ > .#{$fortitude-namespace}media__object {
40
+ @include fortitude-media--large__object;
171
41
  }
172
-
173
- }
174
-
175
-
176
-
177
-
178
-
179
- @if ($fortitude-enable-media--rev == true) {
180
-
181
- /**
182
- * Reversed image location (right instead of left). Extends `.media`.
183
- */
184
-
185
- .#{$fortitude-namespace}media--rev {
186
-
42
+ @if $fortitude-enable-media--rev == true {
43
+ /**
44
+ * Large reversed media objects.
45
+ **/
46
+ &.#{$fortitude-namespace}media--rev {
187
47
  > .#{$fortitude-namespace}media__object {
188
- @include fortitude-media--rev__object;
48
+ @include fortitude-media--large--rev__object;
189
49
  }
190
-
50
+ }
191
51
  }
192
-
52
+ }
193
53
  }
194
54
 
195
-
196
-
197
-
198
-
199
- @if ($fortitude-enable-media--flush == true) {
200
-
201
- /**
202
- * Flush media objects have no space between the image- and text-content.
203
- */
204
-
205
- .#{$fortitude-namespace}media--flush {
206
-
207
- > .#{$fortitude-namespace}media__object {
208
- @include fortitude-media--flush__object;
209
- }
210
-
55
+ @if $fortitude-enable-media--rev == true {
56
+ /**
57
+ * Reversed image location (right instead of left). Extends `.media`.
58
+ **/
59
+ .#{$fortitude-namespace}media--rev {
60
+ > .#{$fortitude-namespace}media__object {
61
+ @include fortitude-media--rev__object;
211
62
  }
212
-
63
+ }
213
64
  }
214
65
 
215
-
216
-
217
-
218
-
219
- @if ($fortitude-enable-media--responsive == true) {
220
-
221
- /**
222
- * Responsive media objects.
223
- *
224
- * There is a very pragmatic, simple implementation of a responsive media
225
- * object, which simply places the text-content beneath the image-content.
226
- *
227
- * We use a `max-width` media query because:
228
- *
229
- * a) it is the least verbose method in terms of amount of code required.
230
- * b) the media object’s default state is image-next-to-text, so its stacked
231
- * state is the exception, rather than the rule.
232
- */
233
-
234
- @media screen and (max-width: $fortitude-media-collapse-at) {
235
-
236
- .#{$fortitude-namespace}media--responsive {
237
-
238
- /**
239
- * Rework the spacings on regular media objects.
240
- */
241
- > .#{$fortitude-namespace}media__object {
242
- @include fortitude-media--responsive__object;
243
- }
244
-
245
- @if ($fortitude-enable-media--small == true) {
246
-
247
- /**
248
- * Small responsive media objects.
249
- *
250
- * Take a little more heavy-handed approach to reworking
251
- * spacings on media objects that are also small media objects
252
- * in their regular state.
253
- */
254
-
255
- &.#{$fortitude-namespace}media--small {
256
-
257
- > .#{$fortitude-namespace}media__object {
258
- @include fortitude-media--responsive--small__object;
259
- }
260
-
261
- }
262
-
263
- }
264
-
265
- @if ($fortitude-enable-media--large == true) {
266
-
267
- /**
268
- * Large responsive media objects.
269
- *
270
- * Take a little more heavy-handed approach to reworking
271
- * spacings on media objects that are also large media objects
272
- * in their regular state.
273
- */
274
-
275
- &.#{$fortitude-namespace}media--large {
276
-
277
- > .#{$fortitude-namespace}media__object {
278
- @include fortitude-media--responsive--large__object;
279
- }
280
-
281
- }
282
-
283
- }
284
-
66
+ @if $fortitude-enable-media--flush == true {
67
+ /**
68
+ * Flush media objects have no space between the image- and text-content.
69
+ **/
70
+ .#{$fortitude-namespace}media--flush {
71
+ > .#{$fortitude-namespace}media__object {
72
+ @include fortitude-media--flush__object;
73
+ }
74
+ }
75
+ }
76
+
77
+ @if $fortitude-enable-media--responsive == true {
78
+ /**
79
+ * Responsive media objects.
80
+ *
81
+ * There is a very pragmatic, simple implementation of a responsive media
82
+ * object, which simply places the text-content beneath the image-content.
83
+ *
84
+ * We use a `max-width` media query because:
85
+ *
86
+ * a) it is the least verbose method in terms of amount of code required.
87
+ * b) the media object’s default state is image-next-to-text, so its stacked
88
+ * state is the exception, rather than the rule.
89
+ **/
90
+ @media screen and (max-width: $fortitude-media-collapse-at) {
91
+ .#{$fortitude-namespace}media--responsive {
92
+ /**
93
+ * Rework the spacings on regular media objects.
94
+ **/
95
+ > .#{$fortitude-namespace}media__object {
96
+ @include fortitude-media--responsive__object;
97
+ }
98
+ @if $fortitude-enable-media--small == true {
99
+ /**
100
+ * Small responsive media objects.
101
+ *
102
+ * Take a little more heavy-handed approach to reworking
103
+ * spacings on media objects that are also small media objects
104
+ * in their regular state.
105
+ **/
106
+ &.#{$fortitude-namespace}media--small {
107
+ > .#{$fortitude-namespace}media__object {
108
+ @include fortitude-media--responsive--small__object;
109
+ }
285
110
  }
286
-
111
+ }
112
+ @if $fortitude-enable-media--large == true {
113
+ /**
114
+ * Large responsive media objects.
115
+ *
116
+ * Take a little more heavy-handed approach to reworking
117
+ * spacings on media objects that are also large media objects
118
+ * in their regular state.
119
+ **/
120
+ &.#{$fortitude-namespace}media--large {
121
+ > .#{$fortitude-namespace}media__object {
122
+ @include fortitude-media--responsive--large__object;
123
+ }
124
+ }
125
+ }
287
126
  }
288
-
127
+ }
289
128
  }