fortitude-sass 0.3.8 → 0.4.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 (32) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/.ruby-gemset +1 -0
  4. data/.ruby-version +1 -0
  5. data/Gemfile.lock +1 -1
  6. data/app/assets/images/icons/hamburger.png +0 -0
  7. data/app/assets/images/icons_2x/hamburger.png +0 -0
  8. data/app/assets/stylesheets/fortitude.scss +4 -1
  9. data/app/assets/stylesheets/fortitude/blocks/_badge.scss +18 -22
  10. data/app/assets/stylesheets/fortitude/blocks/_box.scss +14 -0
  11. data/app/assets/stylesheets/fortitude/blocks/_button.scss +3 -8
  12. data/app/assets/stylesheets/fortitude/blocks/_container.scss +10 -0
  13. data/app/assets/stylesheets/fortitude/blocks/_flashbar.scss +3 -0
  14. data/app/assets/stylesheets/fortitude/blocks/_modal.scss +21 -0
  15. data/app/assets/stylesheets/fortitude/blocks/_navigationbar.scss +206 -0
  16. data/app/assets/stylesheets/fortitude/blocks/_text.scss +6 -46
  17. data/app/assets/stylesheets/fortitude/blocks/_wings.scss +43 -0
  18. data/app/assets/stylesheets/fortitude/theme.scss +10 -0
  19. data/app/assets/stylesheets/fortitude/theme/base/_page.scss +19 -0
  20. data/app/assets/stylesheets/fortitude/theme/extensions/_badge.scss +7 -0
  21. data/app/assets/stylesheets/fortitude/theme/extensions/_box.scss +13 -0
  22. data/app/assets/stylesheets/fortitude/theme/extensions/_button.scss +7 -0
  23. data/app/assets/stylesheets/fortitude/theme/extensions/_flashbar.scss +6 -0
  24. data/app/assets/stylesheets/fortitude/theme/extensions/_navigationbar.scss +50 -0
  25. data/app/assets/stylesheets/fortitude/theme/extensions/_wings.scss +9 -0
  26. data/app/assets/stylesheets/fortitude/theme/settings/_colors.scss +53 -0
  27. data/app/assets/stylesheets/fortitude/theme/settings/_defaults.scss +5 -0
  28. data/app/assets/stylesheets/fortitude/tools/_functions.scss +2 -2
  29. data/app/assets/stylesheets/fortitude/trumps/_responsive-margin.scss +5 -0
  30. data/bower.json +1 -1
  31. data/lib/fortitude-sass/version.rb +1 -1
  32. metadata +19 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c4100b397d4b3a9d5cc0e711e27a46529b99f201
4
- data.tar.gz: 7f8848cad5efa4fa121a7d8790e4ddad94e4fa74
3
+ metadata.gz: 76a31101af3969d6afbc3f29fb1867b2f97621c3
4
+ data.tar.gz: b37d3bec1a18610ccc565808ef1fc82262c39c24
5
5
  SHA512:
6
- metadata.gz: e60ffc1d3724fc3a2738d5285ff900a1914d6f895792798b5dfd36ec2a1c50922f22843628dda39cf70cab34dbbc6b8fd492fe2c18b800565a9076cf248a57dc
7
- data.tar.gz: 3760ae7378885c05e2139f2ce88514dd18d1380b01b7da12447aae05c1185abce27d3d379f64cd453a436a1a716ef0272201a81d2be687d5d84d2653648b993e
6
+ metadata.gz: 8249bba22db5b68b4f7f5986dbfa8c3febdc8fcd48644ffe17cb109534b7cb57dcc783fb8e9e73b5a9b953c73cc7c422fa117432405c460609c7c5a5ad8fa784
7
+ data.tar.gz: c6970f3bbefea6b182d57f28a2fbcbb3cad5d27d579cdb346a2ff8392d02bd81888e3a77a3e77198ca26eaead059db8f76b61399a008e0115c36a53f5f95c27b
data/.gitignore CHANGED
@@ -5,3 +5,4 @@
5
5
  demo/
6
6
  tmp/
7
7
  tags
8
+ .idea
data/.ruby-gemset ADDED
@@ -0,0 +1 @@
1
+ fortitude-sass
data/.ruby-version ADDED
@@ -0,0 +1 @@
1
+ ruby-2.1.4
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- fortitude-sass (0.3.8)
4
+ fortitude-sass (0.4.0)
5
5
  autoprefixer-rails
6
6
  sass (~> 3.3)
7
7
  thor
@@ -23,13 +23,16 @@
23
23
  @import "fortitude/blocks/layout";
24
24
  @import "fortitude/blocks/list-navigation";
25
25
  @import "fortitude/blocks/media";
26
+ @import "fortitude/blocks/modal";
27
+ @import "fortitude/blocks/navigationbar";
26
28
  @import "fortitude/blocks/shade";
27
- @import "fortitude/blocks/tabs-navigation";
28
29
  @import "fortitude/blocks/table";
29
30
  @import "fortitude/blocks/tabs";
31
+ @import "fortitude/blocks/tabs-navigation";
30
32
  @import "fortitude/blocks/text";
31
33
  @import "fortitude/blocks/tooltip";
32
34
  @import "fortitude/blocks/ui-list";
35
+ @import "fortitude/blocks/wings";
33
36
  @import "fortitude/trumps/responsive-border";
34
37
  @import "fortitude/trumps/responsive-column";
35
38
  @import "fortitude/trumps/responsive-display";
@@ -12,7 +12,7 @@ $fortitude-badge-height--small: $fortitude-base-spacing-unit !default;
12
12
  $fortitude-badge-height--large: double($fortitude-base-spacing-unit) !default;
13
13
  $fortitude-badge-font-size: $fortitude-base-font-size !default;
14
14
 
15
- $fortitude-badge-border-width: 0.1rem !default;
15
+ $fortitude-badge-border-width: 0 !default;
16
16
  $fortitude-badge-border-style: solid !default;
17
17
  $fortitude-badge-border-radius: 0 !default;
18
18
 
@@ -27,24 +27,23 @@ $fortitude-enable-badge--pill: false !default;
27
27
  @mixin fortitude-badge($extension: null) {
28
28
  /**
29
29
  * 1. Allow us to style box model properties.
30
- * 2. Line different sized badges up with text.
31
- * 3. Make badges inherit font styles (often necessary when styling `input`s as
30
+ * 2. Make badges inherit font styles (often necessary when styling `input`s as
32
31
  * badges).
33
- * 4. Reset/normalize some styles.
34
- * 6. Fixes odd inner spacing in IE7.
35
- * 7. Subtract the border size from the padding value so that badges do not
32
+ * 3. Reset/normalize some styles.
33
+ * 4. Fixes odd inner spacing in IE7.
34
+ * 5. Subtract the border size from the padding value so that badges do not
36
35
  * grow larger as we add borders.
37
- * 8. Set badge text to nowrap.
36
+ * 6. Set badge text to nowrap.
38
37
  */
38
+ border: $fortitude-badge-border-width $fortitude-badge-border-style transparent;
39
39
  display: inline-block; /* [1] */
40
- vertical-align: middle; /* [2] */
41
- font: inherit; /* [3] */
42
- text-align: center; /* [4] */
40
+ font: inherit; /* [2] */
41
+ background-color: transparent; /* [3] */
42
+ text-align: center; /* [3] */
43
43
  font-size: $fortitude-badge-font-size;
44
- margin: -0.2rem 0 0; /* [4] */
45
44
  height: $fortitude-badge-height;
46
- overflow: visible; /* [6] */
47
- white-space: nowrap; /* [8] */
45
+ overflow: visible; /* [4] */
46
+ white-space: nowrap; /* [6] */
48
47
  line-height: $fortitude-base-line-height;
49
48
 
50
49
  @if ($extension == small) {
@@ -52,13 +51,8 @@ $fortitude-enable-badge--pill: false !default;
52
51
  } @else if ($extension == large) {
53
52
  @include fortitude-badge--large;
54
53
  } @else {
55
- padding: fortitude-block-padding($fortitude-badge-height, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [7] */
56
- }
57
-
58
- @if($fortitude-badge-border-width != 0) {
59
- border: $fortitude-badge-border-width $fortitude-badge-border-style transparent;
60
- } @else {
61
- border: 0; /* [4] */
54
+ margin: fortitude-block-margin($fortitude-badge-height, $fortitude-badge-border-width) 0; /* [3] */
55
+ padding: fortitude-block-padding($fortitude-badge-height, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [5] */
62
56
  }
63
57
 
64
58
  @if ($extension == pill) {
@@ -69,11 +63,13 @@ $fortitude-enable-badge--pill: false !default;
69
63
  }
70
64
 
71
65
  @mixin fortitude-badge--small {
72
- padding: fortitude-block-padding($fortitude-badge-height--small, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [7] */
66
+ margin: fortitude-block-margin($fortitude-badge-height--small, $fortitude-badge-border-width) 0; /* [3] */
67
+ padding: fortitude-block-padding($fortitude-badge-height--small, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [5] */
73
68
  }
74
69
 
75
70
  @mixin fortitude-badge--large {
76
- padding: fortitude-block-padding($fortitude-badge-height--large, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [7] */
71
+ margin: fortitude-block-margin($fortitude-badge-height--large, $fortitude-badge-border-width) 0; /* [3] */
72
+ padding: fortitude-block-padding($fortitude-badge-height--large, $fortitude-badge-border-width) quarter($fortitude-base-spacing-unit); /* [5] */
77
73
  @if ($fortitude-block-height > $fortitude-block-line-height) {
78
74
  line-height: ceil($fortitude-block-height / $fortitude-block-line-height) * $fortitude-block-line-height;
79
75
  }
@@ -5,6 +5,10 @@
5
5
  /**
6
6
  * The box object simply boxes off content.
7
7
  */
8
+ // Predefine the variables below in order to alter and enable specific features.
9
+ $fortitude-box-border-width: 0 !default;
10
+ $fortitude-box-border-style: solid !default;
11
+ $fortitude-box-border-radius--rounded: 0.2rem !default;
8
12
 
9
13
 
10
14
 
@@ -13,11 +17,21 @@
13
17
  @mixin fortitude-box {
14
18
  /**
15
19
  * 1. So we can apply the `.box` class to naturally-inline elements.
20
+ * 2. So we can style the border colors in our extensions.
16
21
  */
17
22
  @include fortitude-clearfix;
18
23
  display: block; /* [1] */
24
+ border: $fortitude-box-border-width $fortitude-box-border-style transparent; /* [2] */
25
+ }
26
+
27
+ @mixin fortitude-box--rounded {
28
+ border-radius: $fortitude-box-border-radius--rounded;
19
29
  }
20
30
 
21
31
  .#{$fortitude-namespace}box {
22
32
  @include fortitude-box;
23
33
  }
34
+
35
+ .#{$fortitude-namespace}box--rounded {
36
+ @include fortitude-box--rounded;
37
+ }
@@ -7,7 +7,7 @@
7
7
  */
8
8
 
9
9
  // Predefine the variables below in order to alter and enable specific features.
10
- $fortitude-button-border-width: 0.1rem !default;
10
+ $fortitude-button-border-width: 0 !default;
11
11
  $fortitude-button-border-style: solid !default;
12
12
  $fortitude-button-border-radius: 0.2rem !default;
13
13
 
@@ -51,6 +51,8 @@ $fortitude-global-border-box: false !default;
51
51
  * the position of the target will be inside of the button.
52
52
  * 10. Required to combine fluid widths and fixed gutters.
53
53
  */
54
+ background-color: transparent;
55
+ border: $fortitude-button-border-width $fortitude-button-border-style transparent;
54
56
  display: inline-block; /* [1] */
55
57
  vertical-align: middle; /* [2] */
56
58
  font: inherit; /* [3] */
@@ -70,12 +72,6 @@ $fortitude-global-border-box: false !default;
70
72
  padding: fortitude-block-padding($fortitude-button-height, $fortitude-button-border-width) $fortitude-button-horizontal-padding; /* [7] */
71
73
  }
72
74
 
73
- @if($fortitude-button-border-width != 0) {
74
- border: $fortitude-button-border-width $fortitude-button-border-style transparent;
75
- } @else {
76
- border: 0; /* [4] */
77
- }
78
-
79
75
  @if ($extension == pill) {
80
76
  @include fortitude-button--pill;
81
77
  } @else if($fortitude-button-border-radius != 0) {
@@ -193,7 +189,6 @@ $fortitude-global-border-box: false !default;
193
189
  .#{$fortitude-namespace}button--large {
194
190
  @include fortitude-button--large;
195
191
  }
196
-
197
192
  }
198
193
 
199
194
 
@@ -40,6 +40,16 @@ $fortitude-global-border-box: false !default;
40
40
  }
41
41
  }
42
42
 
43
+ @mixin fortitude-container--fixed-top {
44
+ z-index: 2;
45
+ position: fixed;
46
+ top: 0;
47
+ }
48
+
43
49
  .#{$fortitude-namespace}container {
44
50
  @include fortitude-container;
45
51
  }
52
+
53
+ .#{$fortitude-namespace}container--fixed-top {
54
+ @include fortitude-container--fixed-top;
55
+ }
@@ -2,6 +2,9 @@
2
2
  #FLASHBAR
3
3
  \*------------------------------------*/
4
4
 
5
+ /**
6
+ * A simple flashbar object.
7
+ */
5
8
 
6
9
  @mixin fortitude-flashbar {
7
10
  @include fortitude-clearfix;
@@ -0,0 +1,21 @@
1
+ .modal {
2
+ position: fixed;
3
+ top: 0;
4
+ right: 0;
5
+ bottom: 0;
6
+ left: 0;
7
+ z-index: 3;
8
+ display: none;
9
+ overflow: hidden;
10
+ overflow-y: auto;
11
+ -webkit-overflow-scrolling: touch;
12
+ -moz-overflow-scrolling: touch;
13
+ overflow-scrolling: touch;
14
+ }
15
+
16
+ .modal__content {
17
+ position: relative;
18
+ width: auto;
19
+ margin: halve($fortitude-base-spacing-unit);
20
+ // set width in extending class
21
+ }
@@ -0,0 +1,206 @@
1
+ $navigationbar-height: 4rem !default;
2
+
3
+ .navigationbar {
4
+ position: relative;
5
+ line-height: $navigationbar-height;
6
+ min-height: $navigationbar-height;
7
+ }
8
+
9
+ .navigationbar__header {
10
+ float: left;
11
+ }
12
+
13
+ .navigationbar__header__logo {
14
+ display: inline-block;
15
+ margin-top: -0.1rem;
16
+ vertical-align: middle;
17
+ }
18
+
19
+ .navigationbar__toggle {
20
+ float: right;
21
+ > .icon {
22
+ display: none;
23
+ }
24
+ }
25
+
26
+ .navigationbar__toggle__helper {
27
+ display: none;
28
+ }
29
+
30
+ .navigationbar__navigation {
31
+ margin-right: -1rem;
32
+ }
33
+
34
+ .navigationbar__item {
35
+ display: inline-block;
36
+
37
+ &:hover .navigationbar__dropdown {
38
+ display: block;
39
+ }
40
+
41
+ a {
42
+ display: block;
43
+ padding: 0 1rem;
44
+ }
45
+ }
46
+
47
+ .navigationbar__dropdown {
48
+ display: none;
49
+ position: absolute;
50
+ list-style: none;
51
+ z-index: 1;
52
+ }
53
+
54
+ @media (max-width: 767px) {
55
+ .navigationbar__header {
56
+ float: none;
57
+ }
58
+
59
+ .navigationbar__header__logo {
60
+ padding-left: 2rem;
61
+ }
62
+
63
+ .navigationbar__toggle {
64
+ float: none;
65
+
66
+ > .icon {
67
+ display: inline-block;
68
+ }
69
+ }
70
+
71
+ .navigationbar__toggle__helper {
72
+ display: inline-block;
73
+ }
74
+
75
+ .navigationbar__dropdown {
76
+ display: block;
77
+ position: static;
78
+ }
79
+
80
+ .navigationbar__item {
81
+ display: block;
82
+ }
83
+
84
+ .navigationbar__toggle {
85
+ margin-top: -$navigationbar-height;
86
+
87
+ &:after {
88
+ content: "";
89
+ display: table;
90
+ clear: both;
91
+ }
92
+
93
+ > .icon {
94
+ float: right;
95
+ display: block;
96
+ }
97
+ }
98
+
99
+ .navigationbar__toggle__helper {
100
+ float: right;
101
+ position: relative;
102
+ outline: 0;
103
+ opacity: 0;
104
+ -webkit-appearance: none;
105
+ -moz-appearance: none;
106
+ -ms-appearance: none;
107
+ -o-appearance: none;
108
+ appearance: none;
109
+
110
+ &:checked + .navigationbar__navigation {
111
+ display: block;
112
+ }
113
+ }
114
+
115
+ .navigationbar__navigation {
116
+ clear: both;
117
+ display: none;
118
+ margin-right: 0;
119
+ }
120
+
121
+ .navigationbar__item {
122
+ + .navigationbar__item {
123
+ margin-top: -0.1rem;
124
+ }
125
+
126
+ a {
127
+ display: block;
128
+ padding: 0 2rem;
129
+ }
130
+ }
131
+ }
132
+
133
+ @media (min-width: 768px) and (max-width: 991px) {
134
+ .navigationbar--employers-offers {
135
+ .navigationbar__header {
136
+ float: none;
137
+ }
138
+
139
+ .navigationbar__toggle {
140
+ float: none;
141
+
142
+ > .icon {
143
+ display: inline-block;
144
+ }
145
+ }
146
+
147
+ .navigationbar__toggle__helper {
148
+ display: inline-block;
149
+ }
150
+
151
+ .navigationbar__dropdown {
152
+ display: block;
153
+ position: static;
154
+ }
155
+
156
+ .navigationbar__item {
157
+ display: block;
158
+ }
159
+
160
+ .navigationbar__toggle {
161
+ margin-top: -$navigationbar-height;
162
+
163
+ &:after {
164
+ content: "";
165
+ display: table;
166
+ clear: both;
167
+ }
168
+
169
+ > .icon {
170
+ float: right;
171
+ display: block;
172
+ }
173
+ }
174
+ .navigationbar__toggle__helper {
175
+ float: right;
176
+ position: relative;
177
+ outline: 0;
178
+ opacity: 0;
179
+ -webkit-appearance: none;
180
+ -moz-appearance: none;
181
+ -ms-appearance: none;
182
+ -o-appearance: none;
183
+ appearance: none;
184
+
185
+ &:checked + .navigationbar__navigation {
186
+ display: block;
187
+ }
188
+ }
189
+
190
+ .navigationbar__navigation {
191
+ clear: both;
192
+ display: none;
193
+ }
194
+
195
+ .navigationbar__item {
196
+ + .navigationbar__item {
197
+ margin-top: -0.1rem;
198
+ }
199
+
200
+ a {
201
+ display: block;
202
+ padding: 0 1rem;
203
+ }
204
+ }
205
+ }
206
+ }
@@ -2,66 +2,26 @@
2
2
  #TEXT
3
3
  \*------------------------------------*/
4
4
 
5
- @mixin fortitude-text-italic {
5
+ .#{$fortitude-namespace}text-italic {
6
6
  font-style: italic;
7
7
  }
8
8
 
9
- @mixin fortitude-text-underline {
9
+ .#{$fortitude-namespace}text-underline {
10
10
  text-decoration: underline;
11
11
  }
12
12
 
13
- @mixin fortitude-text-line-through {
13
+ .#{$fortitude-namespace}text-line-through {
14
14
  text-decoration: line-through;
15
15
  }
16
16
 
17
- @mixin fortitude-text-lowercase {
17
+ .#{$fortitude-namespace}text-lowercase {
18
18
  text-transform: lowercase;
19
19
  }
20
20
 
21
- @mixin fortitude-text-uppercase {
21
+ .#{$fortitude-namespace}text-uppercase {
22
22
  text-transform: uppercase;
23
23
  }
24
24
 
25
- @mixin fortitude-text-capitalize {
25
+ .#{$fortitude-namespace}text-capitalize {
26
26
  text-transform: capitalize;
27
- }
28
-
29
- @mixin fortitude-text($extension: null) {
30
- @if ($extension == italic) {
31
- @include fortitude-text-italic;
32
- } @else if ($extension == underline) {
33
- @include fortitude-text-underline;
34
- } @else if ($extension == line-through) {
35
- @include fortitude-text-line-through;
36
- } @else if ($extension == lowercase) {
37
- @include fortitude-text-lowercase;
38
- } @else if ($extension == uppercase) {
39
- @include fortitude-text-uppercase;
40
- } @else if ($extension == capitalize) {
41
- @include fortitude-text-capitalize;
42
- }
43
- }
44
-
45
- .#{$fortitude-namespace}fortitude-text-italic {
46
- @include fortitude-text-italic;
47
- }
48
-
49
- .#{$fortitude-namespace}fortitude-text-underline {
50
- @include fortitude-text-underline;
51
- }
52
-
53
- .#{$fortitude-namespace}fortitude-text-line-through {
54
- @include fortitude-text-line-through;
55
- }
56
-
57
- .#{$fortitude-namespace}fortitude-text-lowercase {
58
- @include fortitude-text-lowercase;
59
- }
60
-
61
- .#{$fortitude-namespace}fortitude-text-uppercase {
62
- @include fortitude-text-uppercase;
63
- }
64
-
65
- .#{$fortitude-namespace}fortitude-text-capitalize {
66
- @include fortitude-text-capitalize;
67
27
  }
@@ -0,0 +1,43 @@
1
+ .wings {
2
+ display: table;
3
+ width: 100%;
4
+
5
+ &__target {
6
+ display: table-cell;
7
+ vertical-align: middle;
8
+ white-space: nowrap;
9
+ width: 0.1rem;
10
+ padding: 0 double($fortitude-base-spacing-unit);
11
+ }
12
+
13
+ &__wing {
14
+ position: relative;
15
+ display: inline-block;
16
+ height: 100%;
17
+ width: 100%;
18
+ &::before {
19
+ content: '';
20
+ vertical-align: middle;
21
+ position: absolute;
22
+ height: 0.5rem;
23
+ top: -0.1rem;
24
+ left: 0;
25
+ right: 0;
26
+ bottom: 0;
27
+ margin: auto;
28
+ }
29
+ }
30
+ }
31
+
32
+ .wings--thin {
33
+ .wings__wing {
34
+ &::before {
35
+ height: 0.1rem;
36
+ }
37
+ }
38
+ }
39
+
40
+ .wings__target--narrow {
41
+ padding: 0 $fortitude-base-spacing-unit;
42
+ }
43
+
@@ -0,0 +1,10 @@
1
+ @import "theme/settings/colors";
2
+ @import "theme/settings/defaults";
3
+ @import "../fortitude";
4
+ @import "theme/base/page";
5
+ @import "theme/extensions/badge";
6
+ @import "theme/extensions/box";
7
+ @import "theme/extensions/button";
8
+ @import "theme/extensions/flashbar";
9
+ @import "theme/extensions/navigationbar";
10
+ @import "theme/extensions/wings";
@@ -0,0 +1,19 @@
1
+ .text-extra-light { font-weight: 200; }
2
+ .text-light { font-weight: 300; }
3
+ .text-normal { font-weight: 400; }
4
+
5
+ html,
6
+ h1,
7
+ h2,
8
+ h3,
9
+ h4,
10
+ h5,
11
+ h6 {
12
+ @extend .text-extra-light;
13
+ }
14
+
15
+ strong {
16
+ @extend .text-normal;
17
+ }
18
+
19
+
@@ -0,0 +1,7 @@
1
+ @each $intent, $rules in $fortitude-color-intents {
2
+ .badge--#{$intent} {
3
+ @each $property, $value in $rules {
4
+ #{$property}: $value;
5
+ }
6
+ }
7
+ }
@@ -0,0 +1,13 @@
1
+ @each $intent, $rules in $fortitude-color-intents {
2
+ .box--#{$intent} {
3
+ @each $property, $value in $rules {
4
+ #{$property}: $value;
5
+ }
6
+ }
7
+ }
8
+
9
+ .box--hero {
10
+ background-color: $gray-darkest-color;
11
+ border-color: $gray-darker-color;
12
+ color: $gray-lightest-color;
13
+ }
@@ -0,0 +1,7 @@
1
+ @each $intent, $rules in $fortitude-color-intents {
2
+ .button--#{$intent} {
3
+ @each $property, $value in $rules {
4
+ #{$property}: $value;
5
+ }
6
+ }
7
+ }
@@ -0,0 +1,6 @@
1
+ @each $intent, $rules in $fortitude-color-intents {
2
+ .flashbar--#{$intent} {
3
+ background-color: map_get($rules, background-color);
4
+ color: if(lightness(map_get($rules, background-color)) < 75%, $gray-lightest-color, $gray-darkest-color);
5
+ }
6
+ }
@@ -0,0 +1,50 @@
1
+ .navigationbar {
2
+ text-transform: uppercase;
3
+ }
4
+
5
+ .navigationbar--default {
6
+ $navigationbar__toggle__icon-width: 2.2rem;
7
+ $navigationbar__toggle__icon-height: 2.2rem;
8
+
9
+ background-color: $gray-lightest-color;
10
+ border-bottom: 0.1rem solid $gray-light-color;
11
+
12
+ .navigationbar__header__logo {
13
+ @include fortitude-font-size-alias(delta);
14
+ color: $gray-darkest-color;
15
+ text-decoration: none;
16
+ }
17
+
18
+ .navigationbar__toggle {
19
+ > .icon {
20
+ width: $navigationbar__toggle__icon-width;
21
+ height: $navigationbar__toggle__icon-height;
22
+ margin: halve($navigationbar-height - $navigationbar__toggle__icon-height) halve($navigationbar-height - $navigationbar__toggle__icon-height);
23
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIdJREFUeNpiYBgFtAaMbm5uCkD6PBALUMnMD0BsyAQ1UICKjgWbxwhiAV1dQE0X79q1a8IQjDxoUCQAKQUqmfkAGBQLQKnCAJoqqAnAqeIDFDNQMbl9gAWFApWD4sHQzNKgjDEfiAOoZOYGIE4ERZ4BFQ1lgJplAIu89VTO0oGj5TvtAUCAAQCVmCDkKRdAyQAAAABJRU5ErkJggg==');
24
+ // Retina
25
+ @media
26
+ (-webkit-min-device-pixel-ratio: 2),
27
+ (min-resolution: 192dpi) {
28
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQRJREFUeNrsl7ENwjAQRU1oKDNCUBaADVK5zgi0VMAEjADZgBEokSuYgCwQYTpKj8CdZEdHSZWz9J9kn919nc73fcYAAACYklk6WGtPFPZKdZ6dc4dRMIldUXgqT+6aRPdFvJQZVAMn1STBIQPBPW9z3oZh+NR1/aZjQ2uhTCgnc0vlcEPLAQD8Z80thWNq0Iq40+qorV2lNVcUXsqTuyTRPjldlUE1NNKac8BLa/ZkzZXC+k1cqBy6n0cnvpnafm6Bv5XojwAosGZuazuFre0R25qX1lxGa9Y6jIZozaEQE6nmyZm1tVlacyFGaM1uMuqTj47TvtFozfHRBQMAAGByvgIMAOBPRPy+NdlpAAAAAElFTkSuQmCC');
29
+ background-size: $navigationbar__toggle__icon-height $navigationbar__toggle__icon-width;
30
+ }
31
+ }
32
+ }
33
+
34
+ .navigationbar__toggle__helper {
35
+ width: $navigationbar__toggle__icon-width + ($navigationbar-height - $navigationbar__toggle__icon-height);
36
+ height: $navigationbar__toggle__icon-height + ($navigationbar-height - $navigationbar__toggle__icon-height);
37
+ margin-right: (-($navigationbar__toggle__icon-width + ($navigationbar-height - $navigationbar__toggle__icon-height)));
38
+ }
39
+
40
+ .navigationbar__link {
41
+ color: $gray-darkest-color;
42
+ text-decoration: none;
43
+ @include fortitude-font-size-alias(epsilon);
44
+
45
+ &::before {
46
+ content: '';
47
+ color: $info-color;
48
+ }
49
+ }
50
+ }
@@ -0,0 +1,9 @@
1
+ @each $intent, $rules in $fortitude-color-intents {
2
+ .wings--#{$intent} {
3
+ .wings__wing {
4
+ &::before {
5
+ background-color: map_get($rules, background-color);
6
+ }
7
+ }
8
+ }
9
+ }
@@ -0,0 +1,53 @@
1
+ $primary-color: #1CAFC9 !default;
2
+ $success-color: #18D985 !default;
3
+ $info-color : #4DDBC4 !default;
4
+ $warning-color: #E9CB0A !default;
5
+ $danger-color : #DE1843 !default;
6
+
7
+
8
+ $gray-darkest-color : #373942 !default;
9
+ $gray-darker-color : #54565E !default;
10
+ $gray-dark-color : #87898E !default;
11
+ $gray-color : #CFCFD1 !default;
12
+ $gray-light-color : #E7E7E8 !default;
13
+ $gray-lighter-color : #FCFCFC !default;
14
+ $gray-lightest-color: #FFFFFF !default;
15
+
16
+ $fortitude-color-intents: (
17
+ default: (
18
+ background-color: $gray-lightest-color,
19
+ border-color: $gray-lightest-color,
20
+ color: $gray-darkest-color
21
+ ),
22
+ primary: (
23
+ background-color: $primary-color,
24
+ border-color: $primary-color,
25
+ color: $gray-lightest-color
26
+ ),
27
+ success: (
28
+ background-color: $success-color,
29
+ border-color: $success-color,
30
+ color: $gray-lightest-color
31
+ ),
32
+ info: (
33
+ background-color: $info-color,
34
+ border-color: $info-color,
35
+ color: $gray-lightest-color
36
+ ),
37
+ warning: (
38
+ background-color: $warning-color,
39
+ border-color: $warning-color,
40
+ color: $gray-lightest-color
41
+ ),
42
+ danger: (
43
+ background-color: $danger-color,
44
+ border-color: $danger-color,
45
+ color: $gray-lightest-color
46
+ )
47
+ ) !default;
48
+
49
+
50
+ // Fortitude Overrides
51
+
52
+ $fortitude-base-background-color: $gray-lighter-color !default;
53
+ $fortitude-base-color : $gray-darkest-color !default;
@@ -0,0 +1,5 @@
1
+ $navigationbar-height: 6rem !default;
2
+ $fortitude-responsive-font-sizes: (alpha: 5.5rem, beta: 3.0rem, gamma: 2.4rem, delta: 1.8rem, epsilon: 1.4rem, zeta: 1.0rem) !default;
3
+ $fortitude-responsive-line-height-unit-total: 3 !default;
4
+ $fortitude-base-font-size: 1.6rem !default;
5
+ $fortitude-enable-layout--large: true !default;
@@ -56,7 +56,7 @@
56
56
  $fortitude-value: halve($fortitude-block-spacing-unit-height - $fortitude-block-height);
57
57
 
58
58
  // normalize value 0rem to 0.
59
- @if ($fortitude-value == 0) { $fortitude-value: 0; }
59
+ @if (fortitude-strip-unit($fortitude-value) == 0) { $fortitude-value: 0; }
60
60
  @return $fortitude-value;
61
61
  }
62
62
 
@@ -77,7 +77,7 @@
77
77
  }
78
78
 
79
79
  // normalize value 0rem to 0.
80
- @if ($fortitude-value == 0) { $fortitude-value: 0; }
80
+ @if (fortitude-strip-unit($fortitude-value) == 0) { $fortitude-value: 0; }
81
81
  @return $fortitude-value;
82
82
  }
83
83
 
@@ -125,5 +125,10 @@ $fortitude-responsive-negative-margin-unit-total: 10 !default;
125
125
  margin-top: -($fortitude-base-spacing-unit * $i);
126
126
  }
127
127
  }
128
+
129
+ ##{$fortitude-app-id} &-mrlauto {
130
+ margin-right: auto;
131
+ margin-left: auto;
132
+ }
128
133
  }
129
134
 
data/bower.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "fortitude-sass",
3
3
  "homepage": "http://fortitude.io/",
4
- "version": "0.3.8",
4
+ "version": "0.4.0",
5
5
  "main": [
6
6
  "app/assets/stylesheets/fortitude/tools/_functions.scss",
7
7
  "app/assets/stylesheets/fortitude/tools/_mixins.scss",
@@ -1,3 +1,3 @@
1
1
  module Fortitude
2
- VERSION = '0.3.8'
2
+ VERSION = '0.4.0'
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: fortitude-sass
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.8
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Aaron Reisman
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-10-16 00:00:00.000000000 Z
11
+ date: 2014-12-01 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -92,11 +92,15 @@ extra_rdoc_files: []
92
92
  files:
93
93
  - ".gitignore"
94
94
  - ".npmignore"
95
+ - ".ruby-gemset"
96
+ - ".ruby-version"
95
97
  - ".scss-lint.yml"
96
98
  - Gemfile
97
99
  - Gemfile.lock
98
100
  - README.md
99
101
  - Rakefile
102
+ - app/assets/images/icons/hamburger.png
103
+ - app/assets/images/icons_2x/hamburger.png
100
104
  - app/assets/javascripts/fortitude.jquery.js
101
105
  - app/assets/javascripts/fortitude/jquery/blocks/flashbar.js
102
106
  - app/assets/javascripts/fortitude/jquery/blocks/select-input.js
@@ -125,6 +129,8 @@ files:
125
129
  - app/assets/stylesheets/fortitude/blocks/_layout.scss
126
130
  - app/assets/stylesheets/fortitude/blocks/_list-navigation.scss
127
131
  - app/assets/stylesheets/fortitude/blocks/_media.scss
132
+ - app/assets/stylesheets/fortitude/blocks/_modal.scss
133
+ - app/assets/stylesheets/fortitude/blocks/_navigationbar.scss
128
134
  - app/assets/stylesheets/fortitude/blocks/_shade.scss
129
135
  - app/assets/stylesheets/fortitude/blocks/_table.scss
130
136
  - app/assets/stylesheets/fortitude/blocks/_tabs-navigation.scss
@@ -132,11 +138,22 @@ files:
132
138
  - app/assets/stylesheets/fortitude/blocks/_text.scss
133
139
  - app/assets/stylesheets/fortitude/blocks/_tooltip.scss
134
140
  - app/assets/stylesheets/fortitude/blocks/_ui-list.scss
141
+ - app/assets/stylesheets/fortitude/blocks/_wings.scss
135
142
  - app/assets/stylesheets/fortitude/generic/_box-sizing.scss
136
143
  - app/assets/stylesheets/fortitude/generic/_clearfix.scss
137
144
  - app/assets/stylesheets/fortitude/generic/_normalize.scss
138
145
  - app/assets/stylesheets/fortitude/generic/_reset.scss
139
146
  - app/assets/stylesheets/fortitude/settings/_defaults.scss
147
+ - app/assets/stylesheets/fortitude/theme.scss
148
+ - app/assets/stylesheets/fortitude/theme/base/_page.scss
149
+ - app/assets/stylesheets/fortitude/theme/extensions/_badge.scss
150
+ - app/assets/stylesheets/fortitude/theme/extensions/_box.scss
151
+ - app/assets/stylesheets/fortitude/theme/extensions/_button.scss
152
+ - app/assets/stylesheets/fortitude/theme/extensions/_flashbar.scss
153
+ - app/assets/stylesheets/fortitude/theme/extensions/_navigationbar.scss
154
+ - app/assets/stylesheets/fortitude/theme/extensions/_wings.scss
155
+ - app/assets/stylesheets/fortitude/theme/settings/_colors.scss
156
+ - app/assets/stylesheets/fortitude/theme/settings/_defaults.scss
140
157
  - app/assets/stylesheets/fortitude/tools/_functions.scss
141
158
  - app/assets/stylesheets/fortitude/tools/_mixins.scss
142
159
  - app/assets/stylesheets/fortitude/trumps/_responsive-border.scss