groundworkcss 2.0.2 → 2.0.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -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