piecss 0.6.0 → 0.7.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/sass/piecss/_behavior.scss +5 -0
- data/sass/piecss/_settings.scss +2 -2
- data/sass/piecss/_utilities.scss +2 -4
- data/sass/piecss/behavior/anchor/_anchor.scss +7 -21
- data/sass/piecss/behavior/anchor/_settings.scss +11 -0
- data/sass/piecss/behavior/base/_base.scss +0 -1
- data/sass/piecss/behavior/base/_collection.scss +3 -3
- data/sass/piecss/behavior/base/_settings.scss +1 -1
- data/sass/piecss/behavior/debug/_behavior.scss +22 -0
- data/sass/piecss/behavior/debug/_mixins.scss +127 -0
- data/sass/piecss/behavior/debug/_settings.scss +81 -0
- data/sass/piecss/behavior/is/_collection.scss +57 -0
- data/sass/piecss/behavior/is/_settings.scss +12 -0
- data/sass/piecss/behavior/layout/_bleed.scss +23 -0
- data/sass/piecss/behavior/layout/_chain.scss +45 -0
- data/sass/piecss/behavior/layout/_column.scss +14 -0
- data/sass/piecss/behavior/layout/_grid.scss +13 -3
- data/sass/piecss/behavior/layout/_gutters.scss +32 -0
- data/sass/piecss/behavior/layout/_layout.scss +29 -29
- data/sass/piecss/behavior/layout/_leader.scss +57 -0
- data/sass/piecss/behavior/layout/_trailer.scss +57 -0
- data/sass/piecss/behavior/layout/_wings.scss +122 -0
- data/sass/piecss/behavior/list/_list.scss +134 -175
- data/sass/piecss/behavior/list/_settings.scss +9 -31
- data/sass/piecss/settings/_colour.scss +10 -1
- data/sass/piecss/settings/_font.scss +0 -1
- data/sass/piecss/settings/_grid.scss +119 -0
- data/sass/piecss/settings/_legacy.scss +24 -0
- data/sass/piecss/settings/_rhythm.scss +0 -10
- data/sass/piecss/utilities/_collection.scss +5 -1
- data/sass/piecss/utilities/_colour.scss +3 -3
- data/sass/piecss/utilities/_grid.scss +355 -0
- data/sass/piecss/utilities/_legacy.scss +42 -0
- data/sass/piecss/utilities/_miscellaneous.scss +8 -82
- data/sass/piecss/utilities/_rhythm.scss +7 -36
- data/sass/piecss/utilities/_typography.scss +8 -98
- data/templates/project/_sets.scss +2 -3
- data/templates/project/_settings.scss +26 -27
- data/{sass/piecss/_behavior.css → templates/project/assets/css/screen.css} +100 -5
- data/templates/project/assets/images/piecss.png +0 -0
- data/templates/project/assets/images/piecss.svg +25 -0
- data/templates/project/examples.html +2 -2
- data/templates/project/screen.scss +8 -11
- metadata +21 -61
- data/sass/piecss/_behavior.css.map +0 -7
- data/sass/piecss/_settings.css +0 -2
- data/sass/piecss/_settings.css.map +0 -7
- data/sass/piecss/_utilities.css +0 -3
- data/sass/piecss/_utilities.css.map +0 -7
- data/sass/piecss/behavior/layout/_rhythm.scss +0 -21
- data/sass/piecss/settings/_breakpoint.css +0 -70
- data/sass/piecss/settings/_colour.css +0 -2
- data/sass/piecss/settings/_colour.css.map +0 -7
- data/sass/piecss/settings/_constants.css +0 -2
- data/sass/piecss/settings/_constants.css.map +0 -7
- data/sass/piecss/settings/_fallback.css +0 -2
- data/sass/piecss/settings/_fallback.css.map +0 -7
- data/sass/piecss/settings/_fallback.scss +0 -15
- data/sass/piecss/settings/_font.css +0 -2
- data/sass/piecss/settings/_font.css.map +0 -7
- data/sass/piecss/settings/_layout.css +0 -60
- data/sass/piecss/settings/_layout.scss +0 -168
- data/sass/piecss/settings/_miscellaneous.css +0 -2
- data/sass/piecss/settings/_miscellaneous.css.map +0 -7
- data/sass/piecss/settings/_rhythm.css +0 -2
- data/sass/piecss/settings/_rhythm.css.map +0 -7
- data/sass/piecss/settings/_typography.css +0 -2
- data/sass/piecss/settings/_typography.css.map +0 -7
- data/sass/piecss/settings/_unit.css +0 -2
- data/sass/piecss/settings/_unit.css.map +0 -7
- data/sass/piecss/settings/fonts/_verdana.scss +0 -40
- data/sass/piecss/utilities/_breakpoint.css +0 -2
- data/sass/piecss/utilities/_breakpoint.css.map +0 -7
- data/sass/piecss/utilities/_cache.css +0 -2
- data/sass/piecss/utilities/_cache.css.map +0 -7
- data/sass/piecss/utilities/_cache.scss +0 -78
- data/sass/piecss/utilities/_colour.css +0 -2
- data/sass/piecss/utilities/_colour.css.map +0 -7
- data/sass/piecss/utilities/_element.css +0 -2
- data/sass/piecss/utilities/_element.css.map +0 -7
- data/sass/piecss/utilities/_image.css +0 -2
- data/sass/piecss/utilities/_image.css.map +0 -7
- data/sass/piecss/utilities/_layout.css +0 -2
- data/sass/piecss/utilities/_layout.css.map +0 -7
- data/sass/piecss/utilities/_layout.scss +0 -570
- data/sass/piecss/utilities/_list.css +0 -2
- data/sass/piecss/utilities/_list.css.map +0 -7
- data/sass/piecss/utilities/_list.scss +0 -26
- data/sass/piecss/utilities/_miscellaneous.css +0 -2
- data/sass/piecss/utilities/_miscellaneous.css.map +0 -7
- data/sass/piecss/utilities/_rhythm.css +0 -2
- data/sass/piecss/utilities/_rhythm.css.map +0 -7
- data/sass/piecss/utilities/_side.css +0 -2
- data/sass/piecss/utilities/_side.css.map +0 -7
- data/sass/piecss/utilities/_side.scss +0 -370
- data/sass/piecss/utilities/_string.css +0 -2
- data/sass/piecss/utilities/_string.css.map +0 -7
- data/sass/piecss/utilities/_svg.css +0 -2
- data/sass/piecss/utilities/_svg.css.map +0 -7
- data/sass/piecss/utilities/_typography.css +0 -2
- data/sass/piecss/utilities/_typography.css.map +0 -7
- data/sass/piecss/utilities/_unit.css +0 -2
- data/sass/piecss/utilities/_unit.css.map +0 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d2a23652a5d0b03880f5b75d6d3e8f3c5315aabe
|
4
|
+
data.tar.gz: 74c6228fe81d6404fcb7254de21d36272735c294
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 11bdda0c25b8d4d5a5b30e7674c5e1a028a24c23d868d32501503615c826bcbc6e45675347d0eb3854a896424eb244eabe2e03bd779339d65bd7c7c3e05ea56f
|
7
|
+
data.tar.gz: 6608f6cef2707995919e47efb1a13260a1be241fcf3e5f788931db40985b6987d3b14977b3d6316cb6f6415d7b871cf028a6a0f928187c58f7263cc96747f6f0
|
data/sass/piecss/_behavior.scss
CHANGED
data/sass/piecss/_settings.scss
CHANGED
@@ -7,15 +7,15 @@
|
|
7
7
|
|
8
8
|
@import "settings/constants";
|
9
9
|
@import "settings/colour";
|
10
|
-
@import "settings/fallback";
|
11
10
|
@import "settings/font";
|
12
11
|
@import "settings/rhythm";
|
13
12
|
@import "settings/unit";
|
14
13
|
@import "settings/typography";
|
14
|
+
@import "settings/legacy";
|
15
15
|
@import "settings/miscellaneous";
|
16
16
|
|
17
17
|
// settings/breakpoint on settings/unit and settings/typography
|
18
18
|
@import "settings/breakpoint";
|
19
19
|
|
20
20
|
// settings/layout on settings/breakpoint
|
21
|
-
@import "settings/
|
21
|
+
@import "settings/grid";
|
data/sass/piecss/_utilities.scss
CHANGED
@@ -1,16 +1,14 @@
|
|
1
1
|
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
2
2
|
|
3
|
-
@import "utilities/cache";
|
4
3
|
@import "utilities/unit";
|
5
4
|
@import "utilities/string";
|
6
|
-
@import "utilities/side";
|
7
5
|
@import "utilities/rhythm";
|
8
6
|
@import "utilities/breakpoint";
|
9
|
-
@import "utilities/
|
7
|
+
@import "utilities/grid";
|
10
8
|
@import "utilities/typography";
|
11
9
|
@import "utilities/collection";
|
12
10
|
@import "utilities/image";
|
13
|
-
@import "utilities/list";
|
14
11
|
@import "utilities/colour";
|
15
12
|
@import "utilities/svg";
|
13
|
+
@import "utilities/legacy";
|
16
14
|
@import "utilities/miscellaneous";
|
@@ -1,29 +1,15 @@
|
|
1
|
-
//
|
2
|
-
// * @copyright Copyright (C) 2013 Babs Gösgens. All rights reserved.
|
3
|
-
// * @license GNU General Public License version 2 or later; see LICENSE.txt
|
4
|
-
// */
|
1
|
+
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
5
2
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
-----------------------------------------------------------------------------
|
10
|
-
*/
|
11
|
-
|
12
|
-
// @include anchor("#{$anchor-base-selector}", $color-anchor, $color-anchor--hover, $color-anchor--active, $color-anchor--visited, $anchor-mixin-states);
|
3
|
+
// -----------------------------------------------------------------------------
|
4
|
+
// Element (Atom): Anchor
|
5
|
+
// -----------------------------------------------------------------------------
|
13
6
|
|
14
7
|
%anchor {
|
15
|
-
|
16
|
-
|
17
|
-
color: inherit;
|
8
|
+
&--hush {
|
9
|
+
&,
|
18
10
|
&:hover {
|
11
|
+
text-decoration: none;
|
19
12
|
color: inherit;
|
20
13
|
}
|
21
14
|
}
|
22
15
|
}
|
23
|
-
|
24
|
-
a {
|
25
|
-
@extend %anchor !optional;
|
26
|
-
&:hover {
|
27
|
-
color: $color-anchor--hover;
|
28
|
-
}
|
29
|
-
}
|
@@ -206,7 +206,7 @@ $base-collection: add-properties(
|
|
206
206
|
(
|
207
207
|
text-decoration: dotted /* 2 */
|
208
208
|
),
|
209
|
-
|
209
|
+
true
|
210
210
|
);
|
211
211
|
|
212
212
|
|
@@ -218,7 +218,7 @@ $base-collection: add-properties(
|
|
218
218
|
$base-collection,
|
219
219
|
"b, strong",
|
220
220
|
(
|
221
|
-
|
221
|
+
font-weight: inherit
|
222
222
|
)
|
223
223
|
);
|
224
224
|
|
@@ -232,7 +232,7 @@ $base-collection: add-properties(
|
|
232
232
|
(
|
233
233
|
font-weight: bolder
|
234
234
|
),
|
235
|
-
|
235
|
+
true
|
236
236
|
);
|
237
237
|
|
238
238
|
/**
|
@@ -0,0 +1,22 @@
|
|
1
|
+
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
2
|
+
|
3
|
+
@if $debug-grid or $debug-columns {
|
4
|
+
#{$debug-grid-selector},
|
5
|
+
#{$debug-columns-selector} {
|
6
|
+
@include debug-columns();
|
7
|
+
}
|
8
|
+
}
|
9
|
+
|
10
|
+
@if $debug-grid or $debug-rhythm {
|
11
|
+
#{$debug-grid-selector},
|
12
|
+
#{$debug-rhythm-selector} {
|
13
|
+
@include debug-rhythm(rgba($color-body, .05));
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
@if $debug-grid or $debug-breakpoint {
|
18
|
+
#{$debug-grid-selector},
|
19
|
+
#{$debug-breakpoint-selector} {
|
20
|
+
@include debug-breakpoint();
|
21
|
+
}
|
22
|
+
}
|
@@ -0,0 +1,127 @@
|
|
1
|
+
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
2
|
+
|
3
|
+
|
4
|
+
///
|
5
|
+
/// Renders columns.
|
6
|
+
///
|
7
|
+
/// @since 0.7
|
8
|
+
///
|
9
|
+
/// @param {Number} $columns - The number of columns
|
10
|
+
/// @param {String} $color - The debug color
|
11
|
+
/// @param {Number} $gutter-width - The gutter-width
|
12
|
+
///
|
13
|
+
|
14
|
+
@mixin _columns($columns: $columns, $color: $black, $gutter-width: $gutter-width) {
|
15
|
+
background-size: percentage(1 / $columns) 100%;
|
16
|
+
// scss-lint:disable SpaceAfterPropertyColon
|
17
|
+
background-image:
|
18
|
+
linear-gradient(to right,
|
19
|
+
rgba($color, .1) 0,
|
20
|
+
rgba($color, .1) $gutter-width / 2,
|
21
|
+
transparent $gutter-width / 2,
|
22
|
+
transparent percentage($columns / $columns)
|
23
|
+
),
|
24
|
+
linear-gradient(to left,
|
25
|
+
rgba($color, .1) 0,
|
26
|
+
rgba($color, .1) $gutter-width / 2,
|
27
|
+
transparent $gutter-width / 2,
|
28
|
+
transparent percentage($columns / $columns)
|
29
|
+
),
|
30
|
+
linear-gradient(to left,
|
31
|
+
transparent 0%,
|
32
|
+
rgba($black, .5) 1px,
|
33
|
+
transparent 1px,
|
34
|
+
transparent percentage($columns / $columns)
|
35
|
+
);
|
36
|
+
// scss-lint:disable SpaceAfterPropertyColon
|
37
|
+
}
|
38
|
+
|
39
|
+
|
40
|
+
|
41
|
+
|
42
|
+
///
|
43
|
+
/// Reveals the document's horizontal rhythm. Will automatically be mixed in
|
44
|
+
/// when [$debug-columns](./#variable-debug-layout) or when
|
45
|
+
/// [$debug](./#variable-debug) is set to true.
|
46
|
+
///
|
47
|
+
/// @since 0.1
|
48
|
+
///
|
49
|
+
|
50
|
+
@mixin debug-columns() {
|
51
|
+
position: relative;
|
52
|
+
@include pseudo-element("before") {
|
53
|
+
pointer-events: none;
|
54
|
+
content: "";
|
55
|
+
display: block;
|
56
|
+
position: absolute;
|
57
|
+
z-index: -1;
|
58
|
+
left: 0;
|
59
|
+
top: 0;
|
60
|
+
width: 100%;
|
61
|
+
height: 100%;
|
62
|
+
|
63
|
+
background-color: transparent;
|
64
|
+
background-repeat: repeat-x;
|
65
|
+
background-position: 0 0;
|
66
|
+
|
67
|
+
@include _columns($columns, $debug-color, $gutter-width);
|
68
|
+
}
|
69
|
+
@each $breakpoint, $grid in $grids {
|
70
|
+
$debug-color: get-grid-debug-color($grid);
|
71
|
+
$columns: get-grid-columns($grid);
|
72
|
+
$gutter-width: get-grid-gutter-width($grid);
|
73
|
+
@include breakpoint($breakpoint) {
|
74
|
+
@include pseudo-element("before") {
|
75
|
+
@include _columns($columns, $debug-color, $gutter-width);
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
///
|
82
|
+
/// Reveals the document's vertical rhythm. Will automatically be mixed in when
|
83
|
+
/// [$debug-rhythm](./#variable-debug-rhythm) or when
|
84
|
+
/// [$debug](./#variable-debug) is set to true.
|
85
|
+
///
|
86
|
+
/// @since 0.1
|
87
|
+
///
|
88
|
+
/// @param {String} $color - The debug color
|
89
|
+
///
|
90
|
+
|
91
|
+
@mixin debug-rhythm($color) {
|
92
|
+
background-image: linear-gradient($color 50%, transparent 50%);
|
93
|
+
background-size: 2 * $rhythm 2 * $rhythm;
|
94
|
+
}
|
95
|
+
|
96
|
+
///
|
97
|
+
/// Reveals the active breakpoint. Will automatically be mixed in when
|
98
|
+
/// [$debug-rhythm](./#variable-debug-breakpoint) or when
|
99
|
+
/// [$debug](./#variable-debug) is set to true.
|
100
|
+
///
|
101
|
+
/// @since 0.7
|
102
|
+
///
|
103
|
+
|
104
|
+
@mixin debug-breakpoint() {
|
105
|
+
position: relative;
|
106
|
+
@include pseudo-element("after") {
|
107
|
+
position: fixed;
|
108
|
+
z-index: 10;
|
109
|
+
top: rhythm(2);
|
110
|
+
left: rhythm(2);
|
111
|
+
display: inline-block;
|
112
|
+
padding: rhythm(2);
|
113
|
+
background: rgba($white, .9);
|
114
|
+
color: $color-body;
|
115
|
+
font-size: small;
|
116
|
+
content: "no breakpoint, columns: #{$columns}";
|
117
|
+
border: 2px solid mix($debug-color, $color-shadow, 90%);
|
118
|
+
}
|
119
|
+
@each $breakpoint, $grid in $grids {
|
120
|
+
@include breakpoint($breakpoint) {
|
121
|
+
@include pseudo-element("after") {
|
122
|
+
content: "#{$breakpoint}, columns: #{get-grid-columns($grid)}";
|
123
|
+
border: 2px solid mix(get-grid-debug-color($grid), $color-shadow, 90%);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
}
|
127
|
+
}
|
@@ -0,0 +1,81 @@
|
|
1
|
+
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
2
|
+
|
3
|
+
///
|
4
|
+
/// If true,reveals the document's columns.
|
5
|
+
///
|
6
|
+
/// @since 0.1
|
7
|
+
///
|
8
|
+
/// @type {Bool} (false)
|
9
|
+
///
|
10
|
+
|
11
|
+
$debug-columns: false !default;
|
12
|
+
|
13
|
+
///
|
14
|
+
/// If true,reveals the document's vertical rhythm.
|
15
|
+
///
|
16
|
+
/// @since 0.1
|
17
|
+
///
|
18
|
+
/// @type {Bool} (false)
|
19
|
+
///
|
20
|
+
|
21
|
+
$debug-rhythm: false !default;
|
22
|
+
|
23
|
+
///
|
24
|
+
/// If true,reveals the current active breakpoint.
|
25
|
+
///
|
26
|
+
/// @since 0.1
|
27
|
+
///
|
28
|
+
/// @type {Bool} (false)
|
29
|
+
///
|
30
|
+
|
31
|
+
$debug-breakpoint: false !default;
|
32
|
+
|
33
|
+
///
|
34
|
+
/// Set all debug types to true at once.
|
35
|
+
///
|
36
|
+
/// @since 0.1
|
37
|
+
///
|
38
|
+
/// @type {Bool} (false)
|
39
|
+
///
|
40
|
+
|
41
|
+
$debug-grid: false !default;
|
42
|
+
|
43
|
+
///
|
44
|
+
/// The selector for the debug class.
|
45
|
+
///
|
46
|
+
/// @since 0.1
|
47
|
+
///
|
48
|
+
/// @type {String} (.debug-layout)
|
49
|
+
///
|
50
|
+
|
51
|
+
$debug-columns-selector: ".debug-layout" !default;
|
52
|
+
|
53
|
+
///
|
54
|
+
/// The selector for the debug class.
|
55
|
+
///
|
56
|
+
/// @since 0.1
|
57
|
+
///
|
58
|
+
/// @type {String} (.debug-rhythm)
|
59
|
+
///
|
60
|
+
|
61
|
+
$debug-rhythm-selector: ".debug-rhythm" !default;
|
62
|
+
|
63
|
+
///
|
64
|
+
/// The selector for the debug class.
|
65
|
+
///
|
66
|
+
/// @since 0.1
|
67
|
+
///
|
68
|
+
/// @type {String} (.debug-breakpoint)
|
69
|
+
///
|
70
|
+
|
71
|
+
$debug-breakpoint-selector: ".debug-breakpoint" !default;
|
72
|
+
|
73
|
+
///
|
74
|
+
/// The selector for the debug class.
|
75
|
+
///
|
76
|
+
/// @since 0.1
|
77
|
+
///
|
78
|
+
/// @type {String} (.debug)
|
79
|
+
///
|
80
|
+
|
81
|
+
$debug-grid-selector: ".debug-grid" !default;
|
@@ -0,0 +1,57 @@
|
|
1
|
+
// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
|
2
|
+
|
3
|
+
/*
|
4
|
+
General reset that can be applied to most elements.
|
5
|
+
|
6
|
+
markup:
|
7
|
+
<ol>
|
8
|
+
<li>I</li>
|
9
|
+
<li>look</li>
|
10
|
+
<li>like</li>
|
11
|
+
<li>single</li>
|
12
|
+
<li>lines</li>
|
13
|
+
</ol>
|
14
|
+
*/
|
15
|
+
|
16
|
+
@include set-selector(
|
17
|
+
$is-collection,
|
18
|
+
".is-reset",
|
19
|
+
(
|
20
|
+
margin: 0,
|
21
|
+
padding: 0,
|
22
|
+
border: 0,
|
23
|
+
background: none,
|
24
|
+
box-shadow: 0,
|
25
|
+
list-style-type: none,
|
26
|
+
color: inherit,
|
27
|
+
text-decoration: none,
|
28
|
+
font-style: inherit,
|
29
|
+
font-variant: inherit,
|
30
|
+
font-weight: inherit,
|
31
|
+
font-size: inherit,
|
32
|
+
line-height: inherit,
|
33
|
+
font-family: inherit,
|
34
|
+
text-decoration: none
|
35
|
+
)
|
36
|
+
);
|
37
|
+
|
38
|
+
/*
|
39
|
+
Hides content outside of the viewport while keeping its content accessible to
|
40
|
+
screenreaders.
|
41
|
+
|
42
|
+
markup:
|
43
|
+
<a class="is-narrative" href="javascript(void);">Skiplink</a>
|
44
|
+
*/
|
45
|
+
|
46
|
+
@include set-selector(
|
47
|
+
$is-collection,
|
48
|
+
".is-narrative",
|
49
|
+
(
|
50
|
+
margin: 0,
|
51
|
+
padding: 0,
|
52
|
+
border: 0,
|
53
|
+
background: none,
|
54
|
+
box-shadow: 0,
|
55
|
+
text-decoration: none
|
56
|
+
)
|
57
|
+
);
|
@@ -0,0 +1,23 @@
|
|
1
|
+
/*
|
2
|
+
bleed
|
3
|
+
|
4
|
+
Bleeds a half gutter-width so that elements with gutters can be aligned
|
5
|
+
|
6
|
+
.bleed - Bleed both sides
|
7
|
+
.bleed--left - Bleed left side
|
8
|
+
.bleed--right - Bleed right side
|
9
|
+
|
10
|
+
markup:
|
11
|
+
<div class="{$modifiers}">{$modifiers}</div>
|
12
|
+
*/
|
13
|
+
|
14
|
+
.bleed {
|
15
|
+
&,
|
16
|
+
&--left {
|
17
|
+
margin-left: -1 * gutter();
|
18
|
+
}
|
19
|
+
&,
|
20
|
+
&--right {
|
21
|
+
margin-right: -1 * gutter();
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/*
|
2
|
+
Chain
|
3
|
+
|
4
|
+
Chain is a more verstatile alternative to the media object.
|
5
|
+
* Apply a `chain__item--stretch` to any `chain__item` to make that item take up maximum available space.
|
6
|
+
* Apply a `chain__item--nowrap` to any `chain__item` to keep child content on a single line.
|
7
|
+
|
8
|
+
.chain - Chains elements horizontally.
|
9
|
+
|
10
|
+
markup:
|
11
|
+
<div class="{$modifiers}">
|
12
|
+
<div class="chain__item chain__item--stretch">
|
13
|
+
I take up all the space I can
|
14
|
+
</div>
|
15
|
+
<div class="chain__item">
|
16
|
+
<span>I take whatever space is left</span>
|
17
|
+
</div>
|
18
|
+
<div class="chain__item chain__item--nowrap">
|
19
|
+
<span>I claim my space!</span>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
|
23
|
+
|
24
|
+
Styleguide 3.97.4
|
25
|
+
*/
|
26
|
+
|
27
|
+
.chain {
|
28
|
+
display: flex;
|
29
|
+
box-shadow: 0 3px 6px rgba($color-shadow, 0);
|
30
|
+
&__item {
|
31
|
+
}
|
32
|
+
&,
|
33
|
+
&__item--stretch {
|
34
|
+
flex: 1 0 auto;
|
35
|
+
}
|
36
|
+
&__item--nowrap {
|
37
|
+
white-space: nowrap;
|
38
|
+
}
|
39
|
+
&--bottom {
|
40
|
+
align-items: bottom;
|
41
|
+
}
|
42
|
+
&--middle {
|
43
|
+
align-items: center;
|
44
|
+
}
|
45
|
+
}
|
@@ -1,5 +1,15 @@
|
|
1
|
-
|
1
|
+
/*
|
2
|
+
Grid
|
2
3
|
|
4
|
+
Styleguide 3.97.7
|
5
|
+
*/
|
3
6
|
|
4
|
-
|
5
|
-
@
|
7
|
+
.grid {
|
8
|
+
@include breakpoint($gt-medium-handheld) {
|
9
|
+
column-count: 2;
|
10
|
+
column-gap: 0;
|
11
|
+
}
|
12
|
+
@include breakpoint($gt-small-desktop) {
|
13
|
+
column-count: 4;
|
14
|
+
}
|
15
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
/*
|
2
|
+
Gutter
|
3
|
+
|
4
|
+
.gutter--left - Small padding on left side
|
5
|
+
.gutter--right - Small padding on right side
|
6
|
+
.gutters - Small padding on left and right side
|
7
|
+
.gutter-outside--left - Small padding on left side
|
8
|
+
.gutter-outside--right - Small padding on right side
|
9
|
+
.gutters-outside - Small padding on left and right side
|
10
|
+
|
11
|
+
markup:
|
12
|
+
<div class="{$modifiers}">{$modifiers}</div>
|
13
|
+
*/
|
14
|
+
|
15
|
+
.gutter {
|
16
|
+
&s,
|
17
|
+
&--left {
|
18
|
+
padding-left: gutter();
|
19
|
+
}
|
20
|
+
&s,
|
21
|
+
&--right {
|
22
|
+
padding-right: gutter();
|
23
|
+
}
|
24
|
+
&s-outside,
|
25
|
+
&-outside--left {
|
26
|
+
margin-left: gutter();
|
27
|
+
}
|
28
|
+
&-outside,
|
29
|
+
&-outside--right {
|
30
|
+
margin-right: gutter();
|
31
|
+
}
|
32
|
+
}
|
@@ -170,36 +170,36 @@
|
|
170
170
|
// }
|
171
171
|
|
172
172
|
|
173
|
-
@if $debug-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
}
|
198
|
-
}
|
173
|
+
@if $debug-columns {
|
174
|
+
%debug-layout {
|
175
|
+
position: relative;
|
176
|
+
&::after {
|
177
|
+
content: '';
|
178
|
+
display: block;
|
179
|
+
position: absolute;
|
180
|
+
z-index: -1;
|
181
|
+
left: 0;
|
182
|
+
top: 0;
|
183
|
+
width: 100%;
|
184
|
+
height: 100%;
|
185
|
+
|
186
|
+
background-color: transparent;
|
187
|
+
background-repeat: repeat-x;
|
188
|
+
background-position: 0 0;
|
189
|
+
|
190
|
+
@include debug-layout();
|
191
|
+
|
192
|
+
@each $breakpoint, $layout in $layouts {
|
193
|
+
@include breakpoint($breakpoint) {
|
194
|
+
$columns: map-get($layout, columns);
|
195
|
+
$color: map-get($layout, color);
|
196
|
+
@include debug-layout($columns, $color, $gutter-width);
|
199
197
|
}
|
198
|
+
}
|
200
199
|
}
|
200
|
+
}
|
201
201
|
|
202
|
-
|
203
|
-
|
204
|
-
|
202
|
+
.debug-layout {
|
203
|
+
@extend %debug-layout;
|
204
|
+
}
|
205
205
|
}
|