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.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +2 -2
  3. data/app/assets/stylesheets/fortitude/api/blocks/_badge.scss +32 -54
  4. data/app/assets/stylesheets/fortitude/api/blocks/_bare-list.scss +1 -5
  5. data/app/assets/stylesheets/fortitude/api/blocks/_block-list.scss +17 -19
  6. data/app/assets/stylesheets/fortitude/api/blocks/_box.scss +13 -12
  7. data/app/assets/stylesheets/fortitude/api/blocks/_button.scss +28 -79
  8. data/app/assets/stylesheets/fortitude/api/blocks/_container.scss +11 -7
  9. data/app/assets/stylesheets/fortitude/api/blocks/_flag.scss +67 -140
  10. data/app/assets/stylesheets/fortitude/api/blocks/_flashbar.scss +2 -2
  11. data/app/assets/stylesheets/fortitude/api/blocks/_fluid-container.scss +1 -1
  12. data/app/assets/stylesheets/fortitude/api/blocks/_inline-list.scss +2 -2
  13. data/app/assets/stylesheets/fortitude/api/blocks/_input.scss +178 -160
  14. data/app/assets/stylesheets/fortitude/api/blocks/_layout.scss +103 -62
  15. data/app/assets/stylesheets/fortitude/api/blocks/_list-navigation.scss +3 -3
  16. data/app/assets/stylesheets/fortitude/api/blocks/_media.scss +74 -32
  17. data/app/assets/stylesheets/fortitude/api/blocks/_modal.scss +0 -1
  18. data/app/assets/stylesheets/fortitude/api/blocks/_navigationbar.scss +0 -1
  19. data/app/assets/stylesheets/fortitude/api/blocks/_shade.scss +1 -7
  20. data/app/assets/stylesheets/fortitude/api/blocks/_tabs-navigation.scss +9 -24
  21. data/app/assets/stylesheets/fortitude/api/blocks/_tabs.scss +8 -2
  22. data/app/assets/stylesheets/fortitude/api/blocks/_text.scss +0 -1
  23. data/app/assets/stylesheets/fortitude/api/blocks/_tooltip.scss +52 -21
  24. data/app/assets/stylesheets/fortitude/api/blocks/_ui-list.scss +17 -22
  25. data/app/assets/stylesheets/fortitude/api/blocks/_wings.scss +0 -1
  26. data/app/assets/stylesheets/fortitude/base/_lists.scss +2 -9
  27. data/app/assets/stylesheets/fortitude/blocks/_box.scss +0 -4
  28. data/app/assets/stylesheets/fortitude/blocks/_flag.scss +67 -59
  29. data/app/assets/stylesheets/fortitude/blocks/_input.scss +10 -7
  30. data/app/assets/stylesheets/fortitude/blocks/_layout.scss +8 -8
  31. data/app/assets/stylesheets/fortitude/blocks/_media.scss +36 -27
  32. data/app/assets/stylesheets/fortitude/blocks/_navigationbar.scss +22 -0
  33. data/app/assets/stylesheets/fortitude/blocks/_ui-list.scss +2 -2
  34. data/app/assets/stylesheets/fortitude/tools/_functions.scss +4 -0
  35. data/bower.json +1 -1
  36. data/lib/fortitude-sass/version.rb +1 -1
  37. metadata +2 -2
@@ -2,17 +2,9 @@
2
2
  #LAYOUT
3
3
  \*------------------------------------*/
4
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;
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($fortitude-extension: null) {
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
- @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] */
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--small {
63
- margin-left: -$fortitude-layout-gutter--small;
56
+ @mixin fortitude-layout--flush {
57
+ margin-left: 0;
64
58
  }
65
59
 
66
- @mixin fortitude-layout--small__item {
67
- padding-left: $fortitude-layout-gutter--small;
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--large__item {
75
- padding-left: $fortitude-layout-gutter--large;
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--flush__item {
83
- padding-left: 0;
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-layout--rev__item {
92
- direction: ltr;
93
- text-align: left;
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-layout--middle__item {
97
- vertical-align: middle;
128
+ @mixin fortitude-layout__item--flush {
129
+ padding-left: 0;
98
130
  }
99
131
 
100
- @mixin fortitude-layout--bottom__item {
101
- vertical-align: bottom;
132
+ @mixin fortitude-layout__item--small {
133
+ padding-left: $fortitude-layout-gutter--small;
102
134
  }
103
135
 
104
- @mixin fortitude-layout--right {
105
- text-align: right;
136
+ @mixin fortitude-layout__item--large {
137
+ padding-left: $fortitude-layout-gutter--large;
106
138
  }
107
139
 
108
- @mixin fortitude-layout--right__item {
140
+ @mixin fortitude-layout__item--center {
109
141
  text-align: left;
110
142
  }
111
143
 
112
- @mixin fortitude-layout--center {
113
- text-align: center;
144
+ @mixin fortitude-layout__item--right {
145
+ text-align: left;
114
146
  }
115
147
 
116
- @mixin fortitude-layout--center__item {
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
- margin-right: $fortitude-media-gutter;
30
- > img {
31
- display: block;
32
- margin-left: auto;
33
- margin-right: auto;
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
- @mixin fortitude-media__body {
38
- overflow: hidden;
39
- display: block;
40
- }
42
+ @if $is-responsive {
43
+ @include fortitude-media__object--responsive;
41
44
 
42
- @mixin fortitude-media--small__object {
43
- margin-right: $fortitude-media-gutter--small;
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-media--small--rev__object {
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-media--large__object {
52
- margin-right: $fortitude-media-gutter--large;
71
+ @mixin fortitude-media__object--small {
72
+ margin-right: $fortitude-media-gutter--small;
53
73
  }
54
74
 
55
- @mixin fortitude-media--large--rev__object {
56
- margin-right: 0;
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-media--rev__object {
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-media--flush__object {
85
+ @mixin fortitude-media__object--rev--flush {
67
86
  margin-right: 0;
68
87
  margin-left: 0;
69
88
  }
70
89
 
71
- @mixin fortitude-media--responsive__object {
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-media--responsive--small__object {
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-media--responsive--large__object {
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
+ }
@@ -2,17 +2,11 @@
2
2
  #SHADE
3
3
  \*------------------------------------*/
4
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 {
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
- * 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
- **/
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
  }