groundworkcss 2.0.2 → 2.0.4

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.
@@ -314,7 +314,7 @@
314
314
  // "center";
315
315
  // $typography-classes: true;
316
316
  // $typography-helpers: "align-top" "align-right" "align-bottom" "align-left" "align-center" "justify"
317
- // "truncate";
317
+ // "truncate" "unstyled";
318
318
  // $border-classes: true;
319
319
  // $border-helpers: "bordered" "border-right" "border-left" "border-top" "border-bottom";
320
320
  // $radius-classes: true;
@@ -32,7 +32,7 @@ $responsive: true !default;
32
32
  }
33
33
 
34
34
  %row {
35
- @extend %clear;
35
+ @include _clear;
36
36
  width: $one-whole;
37
37
  }
38
38
 
@@ -25,7 +25,7 @@ $layout-helpers: "inline" "inline-block" "block"
25
25
 
26
26
  $typography-classes: true !default;
27
27
  $typography-helpers: "align-top" "align-right" "align-bottom" "align-left" "align-center" "justify"
28
- "truncate" !default;
28
+ "truncate" "unstyled" !default;
29
29
 
30
30
  $border-classes: true !default;
31
31
  $border-helpers: "bordered" "border-right" "border-left" "border-top" "border-bottom" !default;
@@ -44,7 +44,7 @@ $transition-classes: true !default;
44
44
  ///////////////////////
45
45
 
46
46
  @mixin _clear { clear: both;
47
- &:after { content:''; display:block; clear:both; }
47
+ &:after { content: " "; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
48
48
  }
49
49
  @mixin _clearfix { @include _clear; } // alias
50
50
 
@@ -96,6 +96,9 @@ $transition-classes: true !default;
96
96
  @mixin _medium { font-size:1em; }
97
97
  @mixin _large { font-size:1.5em; }
98
98
 
99
+ @mixin _italic { font-style: italic; }
100
+ @mixin _bold { font-weight: 900; }
101
+
99
102
  @mixin _zero { margin:0; padding:0; }
100
103
 
101
104
  @mixin _pull-right { float:right; }
@@ -114,6 +117,8 @@ $transition-classes: true !default;
114
117
  @mixin _align-left { text-align:left; }
115
118
  @mixin _align-center { text-align:center; }
116
119
  @mixin _justify { text-align:justify; }
120
+ @mixin _unstyled { margin: 0; padding: 0; list-style: none; }
121
+
117
122
 
118
123
  @mixin _truncate { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
119
124
 
@@ -138,7 +143,9 @@ $transition-classes: true !default;
138
143
  // placeholders //
139
144
  ///////////////////////
140
145
 
141
- %clear, %clearfix { @include _clear;}
146
+ %clear, %clearfix { clear: both;
147
+ &:after { content: " "; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
148
+ }
142
149
 
143
150
  %padded { @include _padded;
144
151
  &.half { @include _padded(0.5); }
@@ -246,6 +253,9 @@ $transition-classes: true !default;
246
253
  %medium { @include _medium; }
247
254
  %big, %large { @include _large; }
248
255
 
256
+ %em, %italic { @include _italic; }
257
+ %b, %bold, %strong{ @include _bold; }
258
+
249
259
  %zero { @include _zero; }
250
260
 
251
261
  %pull-right { @include _pull-right; }
@@ -264,6 +274,7 @@ $transition-classes: true !default;
264
274
  %align-left { @include _align-left; }
265
275
  %align-center { @include _align-center; }
266
276
  %justify { @include _justify; }
277
+ %unstyled { @extend %zero; list-style: none; }
267
278
 
268
279
  %truncate { @include _truncate; }
269
280
 
@@ -292,9 +303,7 @@ $transition-classes: true !default;
292
303
  @for $i from 1 through length($layout-helpers) {
293
304
  .#{nth($layout-helpers, $i)} { @extend %#{nth($layout-helpers, $i)}; }
294
305
  }
295
- .clear, .clearfix { @extend %clear;
296
- &:after { content:''; display:block; clear:both; }
297
- }
306
+ .clear, .clearfix { @extend %clear; }
298
307
  }
299
308
  @if $positioning-classes {
300
309
  .stick, .fixed { @extend %fixed;
@@ -148,6 +148,112 @@ $font-family: Helvetica, Arial, Geneva, sans-serif !default;
148
148
  }
149
149
 
150
150
 
151
+ ///////////////////////
152
+ // Typography //
153
+ ///////////////////////
154
+
155
+ // multi-columns
156
+ @mixin _multi-column($count: 2) {
157
+ column-count: $count;
158
+ }
159
+
160
+
161
+ ///////////////////////
162
+ // Navigation //
163
+ ///////////////////////
164
+
165
+ // responsive navigation
166
+ @mixin hamburger-mode($filters: "") {
167
+ .nav#{$filters} {
168
+ &:before {
169
+ float: left;
170
+ display: inline-block;
171
+ content: attr(title);
172
+ padding: 0.25em 0.5em;
173
+ font-weight: bold;
174
+ }
175
+ button.hamburger {
176
+ display: inline-block;
177
+ &:before {
178
+ @include icon-FontAwesome();
179
+ content: $icon-list;
180
+ }
181
+ &[aria-expanded="true"] {
182
+ &:before {
183
+ content: $icon-collapse-top;
184
+ }
185
+ }
186
+ }
187
+ > ul {
188
+ display: none;
189
+ }
190
+ > ul[aria-expanded="true"] {
191
+ display: block;
192
+ }
193
+ li {
194
+ float: none;
195
+ display: block;
196
+ ul {
197
+ position: static;
198
+ }
199
+ li {
200
+ a, button {
201
+ text-indent: $gutter;
202
+ }
203
+ li {
204
+ a, button {
205
+ text-indent: ($gutter * 2);
206
+ }
207
+ }
208
+ }
209
+ &[role="menu"] {
210
+ ul {
211
+ border: none;
212
+ a, button {
213
+ border-top: none;
214
+ border-bottom: $border-thickness $border-style $nav-border-color;
215
+ }
216
+ }
217
+ > a, > button {
218
+ &:after {
219
+ float: none;
220
+ content: $icon-caret-down;
221
+ }
222
+ }
223
+ &[aria-pressed="true"] {
224
+ > a, > button {
225
+ &:after {
226
+ content: $icon-caret-up;
227
+ }
228
+ }
229
+ }
230
+ }
231
+ }
232
+ a, button:not(.hamburger) {
233
+ display: block;
234
+ width: 100%;
235
+ text-align: left;
236
+ border-bottom: $border-thickness $border-style $nav-border-color;
237
+ }
238
+ @for $i from 1 through length($modifier-name) {
239
+ &.#{nth($modifier-name, $i)} {
240
+ li ul a, li[role="menu"] ul a, a,
241
+ li ul button, li[role="menu"] ul button, button {
242
+ border-top: none;
243
+ border-bottom: $border-thickness $border-style darken(nth($modifier-code, $i), 5%);
244
+ @include rounded(0);
245
+ }
246
+ }
247
+ }
248
+ }
249
+ > ul li:last-child {
250
+ a, button {
251
+ border-bottom: none;
252
+ }
253
+ }
254
+ }
255
+
256
+
151
257
  ///////////////////////
152
258
  // CSS3 helpers //
153
259
  ///////////////////////
@@ -4,18 +4,62 @@
4
4
  // ============================================
5
5
 
6
6
 
7
- // custom settings
8
- @import "settings"; // customizable settings
7
+ //---------- CUSTOM SETTINGS: ----------//
8
+ @import "settings"; // customizable settings
9
9
 
10
- // core
11
- @import "core/all-core"; // constants, defaults, mixins, breakpoints, color palette
12
- @import "base/all-base"; // reset, globals, grid, flexbox, helpers
13
10
 
14
- // components
15
- @import "icons/all-icons"; // font awesome icons
16
- @import "type/all-type"; // typography, web fonts
17
- @import "ui/all-ui"; // navigation, buttons, boxes, messages, tables, tabs, forms
18
- @import "anim/all-animations"; // animations
19
11
 
20
- // responsive adjustments
21
- @import "responsive/all-responsive"; // responsive (helpers, desktop, ipad, small-tablet, mobile)
12
+ //-------- REQUIRED COMPONENTS: --------//
13
+ @import "core/all-core"; // constants, defaults, mixins, breakpoints, color palette
14
+ @import "base/all-base"; // reset, globals, grid, flexbox, helpers
15
+ @import "icons/all-icons"; // font awesome icons
16
+
17
+
18
+
19
+ //-------- OPTIONAL COMPONENTS: --------//
20
+
21
+ // Typography
22
+ @import "type/all-type";
23
+ // individual typography modules
24
+ // @import "type/link-type-icons";
25
+ // @import "type/typography";
26
+ // @import "type/webfonts";
27
+
28
+ // UI
29
+ @import "ui/all-ui";
30
+ // individual UI modules
31
+ // @import "ui/boxes";
32
+ // @import "ui/buttons";
33
+ // @import "ui/forms";
34
+ // @import "ui/messages";
35
+ // @import "ui/nav";
36
+ // @import "ui/tables";
37
+ // @import "ui/tabs";
38
+
39
+ // Animations
40
+ @import "anim/all-animations";
41
+ // individual animation modules
42
+ // @import "anim/bounce";
43
+ // @import "anim/fade";
44
+ // @import "anim/flash";
45
+ // @import "anim/flip";
46
+ // @import "anim/hinge";
47
+ // @import "anim/lightspeed";
48
+ // @import "anim/pulse";
49
+ // @import "anim/roll";
50
+ // @import "anim/rotate";
51
+ // @import "anim/shake";
52
+ // @import "anim/spin";
53
+ // @import "anim/swing";
54
+ // @import "anim/tada";
55
+ // @import "anim/wiggle";
56
+ // @import "anim/wobble";
57
+
58
+ // Responsive Components
59
+ @import "responsive/all-responsive";
60
+ // individual responsive modules
61
+ // @import "responsive/helpers-responsive";
62
+ // @import "responsive/desktop";
63
+ // @import "responsive/ipad";
64
+ // @import "responsive/small-tablet";
65
+ // @import "responsive/mobile";
@@ -4,6 +4,9 @@
4
4
  // =============================================
5
5
 
6
6
  $responsive: true !default;
7
+ $navigation-classes: true !default;
8
+ $multi-column-classes: true !default;
9
+ $multi-column-names: "one-column" "two-column" "three-column" "four-column" "five-column" !default;
7
10
 
8
11
 
9
12
  @mixin desktop {
@@ -4,6 +4,9 @@
4
4
  // =============================================
5
5
 
6
6
  $responsive: true !default;
7
+ $navigation-classes: true !default;
8
+ $multi-column-classes: true !default;
9
+ $multi-column-names: "one-column" "two-column" "three-column" "four-column" "five-column" !default;
7
10
 
8
11
 
9
12
  @mixin ipad {
@@ -4,6 +4,9 @@
4
4
  // =============================================
5
5
 
6
6
  $responsive: true !default;
7
+ $navigation-classes: true !default;
8
+ $multi-column-classes: true !default;
9
+ $multi-column-names: "one-column" "two-column" "three-column" "four-column" "five-column" !default;
7
10
 
8
11
 
9
12
  @mixin mobile {
@@ -4,6 +4,9 @@
4
4
  // =============================================
5
5
 
6
6
  $responsive: true !default;
7
+ $navigation-classes: true !default;
8
+ $multi-column-classes: true !default;
9
+ $multi-column-names: "one-column" "two-column" "three-column" "four-column" "five-column" !default;
7
10
 
8
11
 
9
12
  @mixin small-tablet {
@@ -158,11 +158,6 @@ $placeholderText-fallback: true !default;
158
158
  }
159
159
  }
160
160
 
161
- %unstyled {
162
- @extend %zero;
163
- list-style: none;
164
- }
165
-
166
161
  %ul-checklist {
167
162
  @extend %unstyled;
168
163
  margin-left: 0;
@@ -242,20 +237,11 @@ $placeholderText-fallback: true !default;
242
237
  }
243
238
  }
244
239
 
245
- %small { @include _small; }
246
- %medium { @include _medium; }
247
- %big, %large { @include _large; }
248
- %em, %italic { font-style: italic; }
249
- %b, %bold, %strong { font-weight: 900; }
250
240
  %sup { @extend %relative, %small; top: -0.4em; }
251
241
  %sub { @extend %relative, %small; top: 0.2em; }
252
242
  %monospace { font-family: monospace; }
253
243
  %del, %strike { text-decoration: line-through; }
254
244
 
255
- @mixin _multi-column($count: 2) {
256
- column-count: $count;
257
- }
258
-
259
245
  %one-column {
260
246
  @include _multi-column(1);
261
247
  }
@@ -19,7 +19,8 @@ $default-radius: 4px !default;
19
19
 
20
20
 
21
21
  %navigation {
22
- @extend %clear, %relative;
22
+ @extend %relative;
23
+ @include _clear;
23
24
  background: $nav-color;
24
25
  color: $nav-text;
25
26
  border: $border-thickness $border-style $nav-border-color;
@@ -99,96 +100,6 @@ $default-radius: 4px !default;
99
100
  }
100
101
  }
101
102
 
102
- @mixin hamburger-mode($filters: "") {
103
- .nav#{$filters} {
104
- &:before {
105
- float: left;
106
- display: inline-block;
107
- content: attr(title);
108
- padding: 0.25em 0.5em;
109
- font-weight: bold;
110
- }
111
- button.hamburger {
112
- display: inline-block;
113
- &:before {
114
- @include icon-FontAwesome();
115
- content: $icon-list;
116
- }
117
- &[aria-expanded="true"] {
118
- &:before {
119
- content: $icon-collapse-top;
120
- }
121
- }
122
- }
123
- > ul {
124
- display: none;
125
- }
126
- > ul[aria-expanded="true"] {
127
- display: block;
128
- }
129
- li {
130
- float: none;
131
- display: block;
132
- ul {
133
- position: static;
134
- }
135
- li {
136
- a, button {
137
- text-indent: $gutter;
138
- }
139
- li {
140
- a, button {
141
- text-indent: ($gutter * 2);
142
- }
143
- }
144
- }
145
- &[role="menu"] {
146
- ul {
147
- border: none;
148
- a, button {
149
- border-top: none;
150
- border-bottom: $border-thickness $border-style $nav-border-color;
151
- }
152
- }
153
- > a, > button {
154
- &:after {
155
- float: none;
156
- content: $icon-caret-down;
157
- }
158
- }
159
- &[aria-pressed="true"] {
160
- > a, > button {
161
- &:after {
162
- content: $icon-caret-up;
163
- }
164
- }
165
- }
166
- }
167
- }
168
- a, button:not(.hamburger) {
169
- display: block;
170
- width: 100%;
171
- text-align: left;
172
- border-bottom: $border-thickness $border-style $nav-border-color;
173
- }
174
- @for $i from 1 through length($modifier-name) {
175
- &.#{nth($modifier-name, $i)} {
176
- li ul a, li[role="menu"] ul a, a,
177
- li ul button, li[role="menu"] ul button, button {
178
- border-top: none;
179
- border-bottom: $border-thickness $border-style darken(nth($modifier-code, $i), 5%);
180
- @include rounded(0);
181
- }
182
- }
183
- }
184
- }
185
- > ul li:last-child {
186
- a, button {
187
- border-bottom: none;
188
- }
189
- }
190
- }
191
-
192
103
  @if $navigation-classes {
193
104
  .no-js {
194
105
  .nav {
Binary file
@@ -1,3 +1,3 @@
1
1
  module Groundworkcss
2
- VERSION = "2.0.2"
2
+ VERSION = "2.0.4"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: groundworkcss
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.0.2
4
+ version: 2.0.4
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2013-09-18 00:00:00.000000000 Z
13
+ date: 2013-09-20 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: colorize
@@ -320,6 +320,7 @@ files:
320
320
  - groundworkcss-0.4.3.gem
321
321
  - groundworkcss-2.0.0.gem
322
322
  - groundworkcss-2.0.1.gem
323
+ - groundworkcss-2.0.2.gem
323
324
  - groundworkcss.gemspec
324
325
  - lib/groundworkcss.rb
325
326
  - lib/groundworkcss/engine.rb