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.
- checksums.yaml +4 -4
- data/.gitignore +6 -5
- data/Gemfile.lock +1 -1
- data/app/assets/stylesheets/fortitude/base/_hr.scss +7 -7
- data/app/assets/stylesheets/fortitude/base/_images.scss +10 -12
- data/app/assets/stylesheets/fortitude/base/_lists.scss +6 -8
- data/app/assets/stylesheets/fortitude/base/_page.scss +14 -10
- data/app/assets/stylesheets/fortitude/blocks/_badge.scss +28 -137
- data/app/assets/stylesheets/fortitude/blocks/_bare-list.scss +0 -12
- data/app/assets/stylesheets/fortitude/blocks/_block-list.scss +20 -74
- data/app/assets/stylesheets/fortitude/blocks/_box.scss +1 -27
- data/app/assets/stylesheets/fortitude/blocks/_button.scss +38 -219
- data/app/assets/stylesheets/fortitude/blocks/_container.scss +2 -50
- data/app/assets/stylesheets/fortitude/blocks/_flag.scss +113 -397
- data/app/assets/stylesheets/fortitude/blocks/_flashbar.scss +0 -18
- data/app/assets/stylesheets/fortitude/blocks/_fluid-container.scss +2 -11
- data/app/assets/stylesheets/fortitude/blocks/_inline-list.scss +3 -15
- data/app/assets/stylesheets/fortitude/blocks/_input.scss +14 -355
- data/app/assets/stylesheets/fortitude/blocks/_layout.scss +77 -263
- data/app/assets/stylesheets/fortitude/blocks/_list-navigation.scss +6 -29
- data/app/assets/stylesheets/fortitude/blocks/_media.scss +104 -265
- data/app/assets/stylesheets/fortitude/blocks/_modal.scss +2 -2
- data/app/assets/stylesheets/fortitude/blocks/_navigationbar.scss +26 -43
- data/app/assets/stylesheets/fortitude/blocks/_shade.scss +2 -21
- data/app/assets/stylesheets/fortitude/blocks/_table.scss +11 -21
- data/app/assets/stylesheets/fortitude/blocks/_tabs-navigation.scss +8 -51
- data/app/assets/stylesheets/fortitude/blocks/_tabs.scss +1 -13
- data/app/assets/stylesheets/fortitude/blocks/_text.scss +7 -7
- data/app/assets/stylesheets/fortitude/blocks/_tooltip.scss +1 -171
- data/app/assets/stylesheets/fortitude/blocks/_ui-list.scss +20 -88
- data/app/assets/stylesheets/fortitude/blocks/_wings.scss +27 -28
- data/app/assets/stylesheets/fortitude/generic/_box-sizing.scss +8 -11
- data/app/assets/stylesheets/fortitude/generic/_clearfix.scss +1 -1
- data/app/assets/stylesheets/fortitude/generic/_normalize.scss +2 -4
- data/app/assets/stylesheets/fortitude/generic/_reset.scss +5 -32
- data/app/assets/stylesheets/fortitude/settings/_defaults.scss +15 -33
- data/app/assets/stylesheets/fortitude/tools/_functions.scss +57 -60
- data/app/assets/stylesheets/fortitude/tools/_mixins.scss +38 -35
- data/app/assets/stylesheets/fortitude/trumps/_responsive-border.scss +25 -32
- data/app/assets/stylesheets/fortitude/trumps/_responsive-column.scss +18 -19
- data/app/assets/stylesheets/fortitude/trumps/_responsive-display.scss +2 -9
- data/app/assets/stylesheets/fortitude/trumps/_responsive-float.scss +10 -10
- data/app/assets/stylesheets/fortitude/trumps/_responsive-font.scss +11 -9
- data/app/assets/stylesheets/fortitude/trumps/_responsive-height.scss +8 -6
- data/app/assets/stylesheets/fortitude/trumps/_responsive-line-height.scss +11 -10
- data/app/assets/stylesheets/fortitude/trumps/_responsive-margin.scss +88 -127
- data/app/assets/stylesheets/fortitude/trumps/_responsive-padding.scss +45 -62
- data/app/assets/stylesheets/fortitude/trumps/_responsive-text.scss +12 -13
- data/app/assets/stylesheets/fortitude/trumps/_screen-lock.scss +1 -1
- data/app/assets/stylesheets/fortitude.scss +24 -0
- data/bower.json +1 -1
- data/lib/fortitude-sass/version.rb +1 -1
- metadata +2 -13
- data/app/assets/stylesheets/fortitude/theme/base/_page.scss +0 -19
- data/app/assets/stylesheets/fortitude/theme/extensions/_badge.scss +0 -7
- data/app/assets/stylesheets/fortitude/theme/extensions/_box.scss +0 -13
- data/app/assets/stylesheets/fortitude/theme/extensions/_button.scss +0 -7
- data/app/assets/stylesheets/fortitude/theme/extensions/_flashbar.scss +0 -6
- data/app/assets/stylesheets/fortitude/theme/extensions/_navigationbar.scss +0 -50
- data/app/assets/stylesheets/fortitude/theme/extensions/_text.scss +0 -5
- data/app/assets/stylesheets/fortitude/theme/extensions/_wings.scss +0 -9
- data/app/assets/stylesheets/fortitude/theme/settings/_colors.scss +0 -53
- data/app/assets/stylesheets/fortitude/theme/settings/_defaults.scss +0 -5
- 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
|
-
|
2
|
+
@include fortitude-layout;
|
130
3
|
}
|
131
4
|
|
132
|
-
|
133
|
-
|
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
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
.#{$fortitude-namespace}
|
163
|
-
|
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
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
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
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
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
|
-
|
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
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
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
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
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
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
.#{$fortitude-namespace}
|
280
|
-
|
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
|
-
|
29
|
-
|
30
|
-
|
5
|
+
.#{$fortitude-namespace}list-navigation__item {
|
6
|
+
@include fortitude-list-navigation__item;
|
7
|
+
}
|
31
8
|
|
32
|
-
|
33
|
-
|
34
|
-
|
9
|
+
.#{$fortitude-namespace}list-navigation__link {
|
10
|
+
@include fortitude-list-navigation__link;
|
11
|
+
}
|
@@ -1,289 +1,128 @@
|
|
1
|
-
|
2
|
-
|
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
|
-
|
89
|
-
|
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
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
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
|
-
|
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
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
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
|
-
|
48
|
+
@include fortitude-media--large--rev__object;
|
189
49
|
}
|
190
|
-
|
50
|
+
}
|
191
51
|
}
|
192
|
-
|
52
|
+
}
|
193
53
|
}
|
194
54
|
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
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
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
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
|
}
|