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.
- data/app/assets/stylesheets/groundworkcss/_settings.scss +1 -1
- data/app/assets/stylesheets/groundworkcss/base/_grid.scss +1 -1
- data/app/assets/stylesheets/groundworkcss/base/_helpers.scss +15 -6
- data/app/assets/stylesheets/groundworkcss/core/_mixins-core.scss +106 -0
- data/app/assets/stylesheets/groundworkcss/groundwork.scss +56 -12
- data/app/assets/stylesheets/groundworkcss/responsive/_desktop.scss +3 -0
- data/app/assets/stylesheets/groundworkcss/responsive/_ipad.scss +3 -0
- data/app/assets/stylesheets/groundworkcss/responsive/_mobile.scss +3 -0
- data/app/assets/stylesheets/groundworkcss/responsive/_small-tablet.scss +3 -0
- data/app/assets/stylesheets/groundworkcss/type/_typography.scss +0 -14
- data/app/assets/stylesheets/groundworkcss/ui/_nav.scss +2 -91
- data/groundworkcss-2.0.2.gem +0 -0
- data/lib/groundworkcss/version.rb +1 -1
- metadata +3 -2
|
@@ -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;
|
|
@@ -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:
|
|
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 {
|
|
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
|
-
|
|
8
|
-
@import "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
|
-
|
|
21
|
-
@import "
|
|
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 %
|
|
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
|
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.
|
|
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-
|
|
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
|