fortitude-sass 0.6.1 → 0.6.3
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/Gemfile.lock +2 -2
- data/app/assets/stylesheets/fortitude/api/blocks/_badge.scss +32 -54
- data/app/assets/stylesheets/fortitude/api/blocks/_bare-list.scss +1 -5
- data/app/assets/stylesheets/fortitude/api/blocks/_block-list.scss +17 -19
- data/app/assets/stylesheets/fortitude/api/blocks/_box.scss +13 -12
- data/app/assets/stylesheets/fortitude/api/blocks/_button.scss +28 -79
- data/app/assets/stylesheets/fortitude/api/blocks/_container.scss +11 -7
- data/app/assets/stylesheets/fortitude/api/blocks/_flag.scss +67 -140
- data/app/assets/stylesheets/fortitude/api/blocks/_flashbar.scss +2 -2
- data/app/assets/stylesheets/fortitude/api/blocks/_fluid-container.scss +1 -1
- data/app/assets/stylesheets/fortitude/api/blocks/_inline-list.scss +2 -2
- data/app/assets/stylesheets/fortitude/api/blocks/_input.scss +178 -160
- data/app/assets/stylesheets/fortitude/api/blocks/_layout.scss +103 -62
- data/app/assets/stylesheets/fortitude/api/blocks/_list-navigation.scss +3 -3
- data/app/assets/stylesheets/fortitude/api/blocks/_media.scss +74 -32
- data/app/assets/stylesheets/fortitude/api/blocks/_modal.scss +0 -1
- data/app/assets/stylesheets/fortitude/api/blocks/_navigationbar.scss +0 -1
- data/app/assets/stylesheets/fortitude/api/blocks/_shade.scss +1 -7
- data/app/assets/stylesheets/fortitude/api/blocks/_tabs-navigation.scss +9 -24
- data/app/assets/stylesheets/fortitude/api/blocks/_tabs.scss +8 -2
- data/app/assets/stylesheets/fortitude/api/blocks/_text.scss +0 -1
- data/app/assets/stylesheets/fortitude/api/blocks/_tooltip.scss +52 -21
- data/app/assets/stylesheets/fortitude/api/blocks/_ui-list.scss +17 -22
- data/app/assets/stylesheets/fortitude/api/blocks/_wings.scss +0 -1
- data/app/assets/stylesheets/fortitude/base/_lists.scss +2 -9
- data/app/assets/stylesheets/fortitude/blocks/_box.scss +0 -4
- data/app/assets/stylesheets/fortitude/blocks/_flag.scss +67 -59
- data/app/assets/stylesheets/fortitude/blocks/_input.scss +10 -7
- data/app/assets/stylesheets/fortitude/blocks/_layout.scss +8 -8
- data/app/assets/stylesheets/fortitude/blocks/_media.scss +36 -27
- data/app/assets/stylesheets/fortitude/blocks/_navigationbar.scss +22 -0
- data/app/assets/stylesheets/fortitude/blocks/_ui-list.scss +2 -2
- data/app/assets/stylesheets/fortitude/tools/_functions.scss +4 -0
- data/bower.json +1 -1
- data/lib/fortitude-sass/version.rb +1 -1
- metadata +2 -2
@@ -2,17 +2,9 @@
|
|
2
2
|
#LAYOUT
|
3
3
|
\*------------------------------------*/
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
|
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;
|
5
|
+
$fortitude-layout-gutter--default: $fortitude-base-spacing-unit !default;
|
6
|
+
$fortitude-layout-gutter--small: halve($fortitude-layout-gutter--default) !default;
|
7
|
+
$fortitude-layout-gutter--large: double($fortitude-layout-gutter--default) !default;
|
16
8
|
|
17
9
|
$fortitude-enable-layout--small: false !default;
|
18
10
|
$fortitude-enable-layout--large: false !default;
|
@@ -23,64 +15,62 @@ $fortitude-enable-layout--bottom: false !default;
|
|
23
15
|
$fortitude-enable-layout--right: false !default;
|
24
16
|
$fortitude-enable-layout--center: false !default;
|
25
17
|
|
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
18
|
$fortitude-global-border-box: false !default;
|
30
19
|
|
31
|
-
@mixin fortitude-layout($
|
20
|
+
@mixin fortitude-layout($extensions: ()) {
|
21
|
+
$is-flush: fortitude-contains($extensions, flush);
|
22
|
+
$is-small: fortitude-contains($extensions, small);
|
23
|
+
$is-large: fortitude-contains($extensions, large);
|
24
|
+
$is-center: fortitude-contains($extensions, center);
|
25
|
+
$is-right: fortitude-contains($extensions, right);
|
26
|
+
$is-rev: fortitude-contains($extensions, rev);
|
27
|
+
|
32
28
|
list-style: none;
|
33
29
|
display: block;
|
34
30
|
margin: 0;
|
35
31
|
padding: 0;
|
36
|
-
margin-left: -$fortitude-layout-gutter;
|
37
|
-
}
|
38
32
|
|
39
|
-
@
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
33
|
+
@if $is-flush {
|
34
|
+
@include fortitude-layout--flush;
|
35
|
+
} @else if $is-small {
|
36
|
+
@include fortitude-layout--small;
|
37
|
+
} @else if $is-large {
|
38
|
+
@include fortitude-layout--large;
|
39
|
+
} @else {
|
40
|
+
margin-left: -$fortitude-layout-gutter--default;
|
41
|
+
}
|
42
|
+
|
43
|
+
@if $is-center {
|
44
|
+
@include fortitude-layout--center;
|
45
|
+
} @else if $is-right {
|
46
|
+
@include fortitude-layout--right;
|
47
|
+
} @else {
|
48
|
+
text-align: left;
|
49
|
+
}
|
50
|
+
|
51
|
+
@if $is-rev {
|
52
|
+
@include fortitude-layout--rev;
|
59
53
|
}
|
60
54
|
}
|
61
55
|
|
62
|
-
@mixin fortitude-layout--
|
63
|
-
margin-left:
|
56
|
+
@mixin fortitude-layout--flush {
|
57
|
+
margin-left: 0;
|
64
58
|
}
|
65
59
|
|
66
|
-
@mixin fortitude-layout--
|
67
|
-
|
60
|
+
@mixin fortitude-layout--small {
|
61
|
+
margin-left: -$fortitude-layout-gutter--small;
|
68
62
|
}
|
69
63
|
|
70
64
|
@mixin fortitude-layout--large {
|
71
65
|
margin-left: -$fortitude-layout-gutter--large;
|
72
66
|
}
|
73
67
|
|
74
|
-
@mixin fortitude-layout--
|
75
|
-
|
76
|
-
}
|
77
|
-
|
78
|
-
@mixin fortitude-layout--flush {
|
79
|
-
margin-left: 0;
|
68
|
+
@mixin fortitude-layout--center {
|
69
|
+
text-align: center;
|
80
70
|
}
|
81
71
|
|
82
|
-
@mixin fortitude-layout--
|
83
|
-
|
72
|
+
@mixin fortitude-layout--right {
|
73
|
+
text-align: right;
|
84
74
|
}
|
85
75
|
|
86
76
|
@mixin fortitude-layout--rev {
|
@@ -88,31 +78,82 @@ $fortitude-global-border-box: false !default;
|
|
88
78
|
text-align: left;
|
89
79
|
}
|
90
80
|
|
91
|
-
@mixin fortitude-
|
92
|
-
|
93
|
-
|
81
|
+
@mixin fortitude-layout__item($extensions: ()) {
|
82
|
+
$is-flush: fortitude-contains($extensions, flush);
|
83
|
+
$is-small: fortitude-contains($extensions, small);
|
84
|
+
$is-large: fortitude-contains($extensions, large);
|
85
|
+
$is-center: fortitude-contains($extensions, center);
|
86
|
+
$is-right: fortitude-contains($extensions, right);
|
87
|
+
$is-middle: fortitude-contains($extensions, middle);
|
88
|
+
$is-bottom: fortitude-contains($extensions, bottom);
|
89
|
+
$is-rev: fortitude-contains($extensions, rev);
|
90
|
+
|
91
|
+
display: inline-block;
|
92
|
+
width: 100%;
|
93
|
+
position: relative;
|
94
|
+
|
95
|
+
@if $is-middle {
|
96
|
+
@include fortitude-layout__item--middle;
|
97
|
+
} @else if $is-bottom {
|
98
|
+
@include fortitude-layout__item--bottom;
|
99
|
+
} @else {
|
100
|
+
vertical-align: top;
|
101
|
+
}
|
102
|
+
|
103
|
+
@if $is-flush {
|
104
|
+
@include fortitude-layout__item--flush;
|
105
|
+
} @else if $is-small {
|
106
|
+
@include fortitude-layout__item--small;
|
107
|
+
} @else if $is-large {
|
108
|
+
@include fortitude-layout__item--large;
|
109
|
+
} @else {
|
110
|
+
padding-left: $fortitude-layout-gutter--default;
|
111
|
+
}
|
112
|
+
|
113
|
+
@if $is-center {
|
114
|
+
@include fortitude-layout__item--center;
|
115
|
+
} @else if $is-right {
|
116
|
+
@include fortitude-layout__item--right;
|
117
|
+
}
|
118
|
+
|
119
|
+
@if $is-rev {
|
120
|
+
@include fortitude-layout__item--rev;
|
121
|
+
}
|
122
|
+
|
123
|
+
@if $fortitude-global-border-box == false {
|
124
|
+
box-sizing: border-box;
|
125
|
+
}
|
94
126
|
}
|
95
127
|
|
96
|
-
@mixin fortitude-
|
97
|
-
|
128
|
+
@mixin fortitude-layout__item--flush {
|
129
|
+
padding-left: 0;
|
98
130
|
}
|
99
131
|
|
100
|
-
@mixin fortitude-
|
101
|
-
|
132
|
+
@mixin fortitude-layout__item--small {
|
133
|
+
padding-left: $fortitude-layout-gutter--small;
|
102
134
|
}
|
103
135
|
|
104
|
-
@mixin fortitude-
|
105
|
-
|
136
|
+
@mixin fortitude-layout__item--large {
|
137
|
+
padding-left: $fortitude-layout-gutter--large;
|
106
138
|
}
|
107
139
|
|
108
|
-
@mixin fortitude-
|
140
|
+
@mixin fortitude-layout__item--center {
|
109
141
|
text-align: left;
|
110
142
|
}
|
111
143
|
|
112
|
-
@mixin fortitude-
|
113
|
-
text-align:
|
144
|
+
@mixin fortitude-layout__item--right {
|
145
|
+
text-align: left;
|
114
146
|
}
|
115
147
|
|
116
|
-
@mixin fortitude-
|
148
|
+
@mixin fortitude-layout__item--middle {
|
149
|
+
vertical-align: middle;
|
150
|
+
}
|
151
|
+
|
152
|
+
@mixin fortitude-layout__item--bottom {
|
153
|
+
vertical-align: bottom;
|
154
|
+
}
|
155
|
+
|
156
|
+
@mixin fortitude-layout__item--rev {
|
157
|
+
direction: ltr;
|
117
158
|
text-align: left;
|
118
159
|
}
|
@@ -7,16 +7,16 @@
|
|
7
7
|
* and sets the list-navigation__link to `display: block;`
|
8
8
|
**/
|
9
9
|
|
10
|
-
@mixin fortitude-list-navigation {
|
10
|
+
@mixin fortitude-list-navigation($extensions: ()) {
|
11
11
|
margin: 0;
|
12
12
|
padding: 0;
|
13
13
|
list-style: none;
|
14
14
|
}
|
15
15
|
|
16
|
-
@mixin fortitude-list-navigation__item {
|
16
|
+
@mixin fortitude-list-navigation__item($extensions: ()) {
|
17
17
|
display: block;
|
18
18
|
}
|
19
19
|
|
20
|
-
@mixin fortitude-list-navigation__link {
|
20
|
+
@mixin fortitude-list-navigation__link($extensions: ()) {
|
21
21
|
display: block;
|
22
22
|
}
|
@@ -2,12 +2,6 @@
|
|
2
2
|
#MEDIA
|
3
3
|
\*------------------------------------*/
|
4
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
5
|
$fortitude-media-gutter: $fortitude-base-spacing-unit !default;
|
12
6
|
$fortitude-media-gutter--small: halve($fortitude-media-gutter) !default;
|
13
7
|
$fortitude-media-gutter--large: double($fortitude-media-gutter) !default;
|
@@ -19,68 +13,116 @@ $fortitude-enable-media--flush: false !default;
|
|
19
13
|
$fortitude-enable-media--responsive: false !default;
|
20
14
|
$fortitude-media-collapse-at: 720px !default;
|
21
15
|
|
22
|
-
@mixin fortitude-media {
|
16
|
+
@mixin fortitude-media($extensions: ()) {
|
23
17
|
@include fortitude-clearfix;
|
24
18
|
display: block;
|
25
19
|
}
|
26
20
|
|
27
|
-
@mixin fortitude-media__object {
|
21
|
+
@mixin fortitude-media__object($extensions: ()) {
|
22
|
+
$is-flush: fortitude-contains($extensions, flush);
|
23
|
+
$is-small: fortitude-contains($extensions, small);
|
24
|
+
$is-large: fortitude-contains($extensions, large);
|
25
|
+
$is-rev: fortitude-contains($extensions, rev);
|
26
|
+
$is-responsive: fortitude-contains($extensions, responsive);
|
27
|
+
|
28
28
|
float: left;
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
29
|
+
|
30
|
+
@if $is-rev {
|
31
|
+
@include fortitude-media__object--rev;
|
32
|
+
|
33
|
+
@if $is-flush {
|
34
|
+
@include fortitude-media__object--rev--flush;
|
35
|
+
} @else if $is-small {
|
36
|
+
@include fortitude-media__object--rev--small;
|
37
|
+
} @else if $is-large {
|
38
|
+
@include fortitude-media__object--rev--large;
|
39
|
+
}
|
34
40
|
}
|
35
|
-
}
|
36
41
|
|
37
|
-
@
|
38
|
-
|
39
|
-
display: block;
|
40
|
-
}
|
42
|
+
@if $is-responsive {
|
43
|
+
@include fortitude-media__object--responsive;
|
41
44
|
|
42
|
-
@
|
43
|
-
|
45
|
+
@if $is-flush {
|
46
|
+
@include fortitude-media__object--responsive--flush;
|
47
|
+
} @else if $is-small {
|
48
|
+
@include fortitude-media__object--responsive--small;
|
49
|
+
} @else if $is-large {
|
50
|
+
@include fortitude-media__object--responsive--large;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
@if not $is-responsive or not $is-flush {
|
55
|
+
@if $is-flush {
|
56
|
+
@include fortitude-media__object--flush;
|
57
|
+
} @else if $is-small {
|
58
|
+
@include fortitude-media__object--small;
|
59
|
+
} @else if $is-large {
|
60
|
+
@include fortitude-media__object--large;
|
61
|
+
} @else {
|
62
|
+
margin-right: $fortitude-media-gutter;
|
63
|
+
}
|
64
|
+
}
|
44
65
|
}
|
45
66
|
|
46
|
-
@mixin fortitude-
|
67
|
+
@mixin fortitude-media__object--flush {
|
47
68
|
margin-right: 0;
|
48
|
-
margin-left: $fortitude-media-gutter--small;
|
49
69
|
}
|
50
70
|
|
51
|
-
@mixin fortitude-
|
52
|
-
margin-right: $fortitude-media-gutter--
|
71
|
+
@mixin fortitude-media__object--small {
|
72
|
+
margin-right: $fortitude-media-gutter--small;
|
53
73
|
}
|
54
74
|
|
55
|
-
@mixin fortitude-
|
56
|
-
margin-right:
|
57
|
-
margin-left: $fortitude-media-gutter--large;
|
75
|
+
@mixin fortitude-media__object--large {
|
76
|
+
margin-right: $fortitude-media-gutter--large;
|
58
77
|
}
|
59
78
|
|
60
|
-
@mixin fortitude-
|
79
|
+
@mixin fortitude-media__object--rev {
|
61
80
|
float: right;
|
62
81
|
margin-right: 0;
|
63
82
|
margin-left: $fortitude-media-gutter;
|
64
83
|
}
|
65
84
|
|
66
|
-
@mixin fortitude-
|
85
|
+
@mixin fortitude-media__object--rev--flush {
|
67
86
|
margin-right: 0;
|
68
87
|
margin-left: 0;
|
69
88
|
}
|
70
89
|
|
71
|
-
@mixin fortitude-
|
90
|
+
@mixin fortitude-media__object--rev--small {
|
91
|
+
margin-right: 0;
|
92
|
+
margin-left: $fortitude-media-gutter--small;
|
93
|
+
}
|
94
|
+
|
95
|
+
@mixin fortitude-media__object--rev--large {
|
96
|
+
margin-right: 0;
|
97
|
+
margin-left: $fortitude-media-gutter--large;
|
98
|
+
}
|
99
|
+
|
100
|
+
@mixin fortitude-media__object--responsive {
|
72
101
|
float: none;
|
73
102
|
margin-right: 0;
|
74
103
|
margin-bottom: $fortitude-media-gutter;
|
75
104
|
margin-left: 0;
|
76
105
|
}
|
77
106
|
|
78
|
-
@mixin fortitude-
|
107
|
+
@mixin fortitude-media__object--responsive--small {
|
79
108
|
margin-right: 0;
|
109
|
+
margin-bottom: $fortitude-media-gutter--small;
|
80
110
|
margin-left: 0;
|
81
111
|
}
|
82
112
|
|
83
|
-
@mixin fortitude-
|
113
|
+
@mixin fortitude-media__object--responsive--large {
|
84
114
|
margin-right: 0;
|
115
|
+
margin-bottom: $fortitude-media-gutter--large;
|
85
116
|
margin-left: 0;
|
86
117
|
}
|
118
|
+
|
119
|
+
@mixin fortitude-media__object__content($extensions: ()) {
|
120
|
+
display: block;
|
121
|
+
margin-left: auto;
|
122
|
+
margin-right: auto;
|
123
|
+
}
|
124
|
+
|
125
|
+
@mixin fortitude-media__body($extensions: ()) {
|
126
|
+
overflow: hidden;
|
127
|
+
display: block;
|
128
|
+
}
|
@@ -1 +0,0 @@
|
|
1
|
-
|
@@ -1 +0,0 @@
|
|
1
|
-
|
@@ -2,17 +2,11 @@
|
|
2
2
|
#SHADE
|
3
3
|
\*------------------------------------*/
|
4
4
|
|
5
|
-
|
6
|
-
$fortitude-shade-transition-speed: 0.3s !default;
|
7
|
-
|
8
|
-
@mixin fortitude-shade {
|
5
|
+
@mixin fortitude-shade($extensions: ()) {
|
9
6
|
display: none;
|
10
7
|
position: fixed;
|
11
8
|
top: 0;
|
12
9
|
right: 0;
|
13
10
|
bottom: 0;
|
14
11
|
left: 0;
|
15
|
-
@if $fortitude-shade-background-color {
|
16
|
-
background-color: $fortitude-shade-background-color;
|
17
|
-
}
|
18
12
|
}
|
@@ -2,44 +2,29 @@
|
|
2
2
|
#TABS NAVIGATION
|
3
3
|
\*------------------------------------*/
|
4
4
|
|
5
|
-
@mixin fortitude-tabs-navigation {
|
6
|
-
|
7
|
-
|
8
|
-
*
|
9
|
-
* 1. Reset any residual styles (most likely from lists).
|
10
|
-
* 2. Tables for layout!
|
11
|
-
**/
|
5
|
+
@mixin fortitude-tabs-navigation($extensions: ()) {
|
6
|
+
$is-fixed: fortitude-contains($extensions, fixed);
|
7
|
+
|
12
8
|
margin: 0;
|
13
|
-
/* [1] */
|
14
9
|
padding: 0;
|
15
|
-
/* [1] */
|
16
10
|
list-style: none;
|
17
|
-
/* [1] */
|
18
11
|
display: table;
|
19
|
-
/* [2] */
|
20
12
|
text-align: center;
|
13
|
+
|
14
|
+
@if $is-fixed {
|
15
|
+
@include fortitude-tabs-navigation--fixed;
|
16
|
+
}
|
21
17
|
}
|
22
18
|
|
23
19
|
@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
20
|
table-layout: fixed;
|
30
|
-
/* [1] */
|
31
21
|
width: 100%;
|
32
|
-
/* [2] */
|
33
22
|
}
|
34
23
|
|
35
|
-
@mixin fortitude-tabs-navigation__item {
|
36
|
-
/**
|
37
|
-
* 1. Tables for layout!
|
38
|
-
**/
|
24
|
+
@mixin fortitude-tabs-navigation__item($extensions: ()) {
|
39
25
|
display: table-cell;
|
40
|
-
/* [1] */
|
41
26
|
}
|
42
27
|
|
43
|
-
@mixin fortitude-tabs-navigation__link {
|
28
|
+
@mixin fortitude-tabs-navigation__link($extensions: ()) {
|
44
29
|
display: block;
|
45
30
|
}
|