codelation_assets 0.4.0 → 0.5.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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/codelation.scss +7 -1
- data/app/assets/stylesheets/codelation/mixins/col_span.scss +2 -0
- data/app/assets/stylesheets/codelation/mixins/has_cards.scss +16 -7
- data/app/assets/stylesheets/codelation/mixins/has_columns.scss +19 -11
- data/app/assets/stylesheets/codelation/mixins/has_grid.scss +22 -13
- data/app/assets/stylesheets/codelation/mixins/outer_container.scss +0 -2
- data/lib/codelation_assets/version.rb +1 -1
- metadata +3 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fdebd262466fc70df3328ab7c43c7c1b07dd4f45
|
|
4
|
+
data.tar.gz: 0db96a3e23a92e411bf20918b5b8936fd644d144
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a7e9b3740c57a73271d489624e0fb96e042f3f4643df49642fb0ecfba1e2bf42cfacafe3928bb9cb8e0baa7603279e125840f03bda30a9fd60259381fa1cbe86
|
|
7
|
+
data.tar.gz: d96524b63072206cffb7dbe8011dd63928adb3a32da0d1fde722e5b0b8553632071be0ccbe32d154158668ec204fb3bbfae0fd40d5da9f6f34984f303d1e192a
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
// A collection of mixins used
|
|
1
|
+
// A collection of Sass functions and mixins used by Codelation
|
|
2
2
|
// https://codelation.com
|
|
3
|
+
|
|
4
|
+
// Used to set the max-width with the outer-container mixin
|
|
5
|
+
$max-width: 1024px !default;
|
|
6
|
+
|
|
7
|
+
// Used for has-cards, has-columns, and has-grid mixins. When the
|
|
8
|
+
// viewport reaches the mobile-breakpoint, the columns will be stacked.
|
|
3
9
|
$mobile-breakpoint: 767px !default;
|
|
4
10
|
|
|
5
11
|
@import "bourbon/bourbon";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
// Used to create create columns in a row that span the width of multiple columns in another row.
|
|
2
|
+
// See the readme for more details on usage.
|
|
1
3
|
@mixin col-span($span: $columns of $total-columns, $gutter: 0) {
|
|
2
4
|
$columns: nth($span, 1);
|
|
3
5
|
$container-columns: nth($span, 3);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Sets up a element and its child elements with the flexbox properties needed
|
|
2
2
|
// to have the given number of columns with optional gutters or margins.
|
|
3
|
-
@mixin has-cards($columns, $margin: 0) {
|
|
3
|
+
@mixin has-cards($columns, $margin: 0, $column-class: "auto", $mobile: "auto") {
|
|
4
4
|
@include align-content(flex-start);
|
|
5
5
|
@include align-items(stretch);
|
|
6
6
|
@include display(flex);
|
|
@@ -10,7 +10,13 @@
|
|
|
10
10
|
column-count: $columns; // Used as a reference for JavaScript functions
|
|
11
11
|
padding: $margin 0 0 $margin;
|
|
12
12
|
|
|
13
|
-
> *:not(script)
|
|
13
|
+
$column-selector: "> *:not(script)";
|
|
14
|
+
|
|
15
|
+
@if $column-class != "auto" {
|
|
16
|
+
$column-selector: "." + $column-class;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
#{$column-selector} {
|
|
14
20
|
@include flex(1 1 auto);
|
|
15
21
|
margin: 0 $margin $margin 0;
|
|
16
22
|
width: (1 / $columns) * 85%;
|
|
@@ -22,12 +28,15 @@
|
|
|
22
28
|
}
|
|
23
29
|
}
|
|
24
30
|
|
|
25
|
-
@
|
|
26
|
-
|
|
27
|
-
|
|
31
|
+
@if $mobile == "auto" {
|
|
32
|
+
// Stack columns on mobile by default
|
|
33
|
+
@media (max-width: $mobile-breakpoint) {
|
|
34
|
+
#{$column-selector} {
|
|
35
|
+
width: 100%;
|
|
28
36
|
|
|
29
|
-
|
|
30
|
-
|
|
37
|
+
&:empty {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
31
40
|
}
|
|
32
41
|
}
|
|
33
42
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Sets up a element and its child elements with the flexbox properties needed
|
|
2
2
|
// to have the given number of columns with an optional gutter value.
|
|
3
|
-
@mixin has-columns($columns: 0, $gutter: 0, $grow: true) {
|
|
3
|
+
@mixin has-columns($columns: 0, $gutter: 0, $column-class: "auto", $mobile: "auto", $grow: true) {
|
|
4
4
|
@include align-content(stretch);
|
|
5
5
|
@include align-items(stretch);
|
|
6
6
|
@include display(flex);
|
|
@@ -8,7 +8,13 @@
|
|
|
8
8
|
@include flex-wrap(nowrap);
|
|
9
9
|
@include justify-content(flex-start);
|
|
10
10
|
|
|
11
|
-
> *:not(script)
|
|
11
|
+
$column-selector: "> *:not(script)";
|
|
12
|
+
|
|
13
|
+
@if $column-class != "auto" {
|
|
14
|
+
$column-selector: "." + $column-class;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#{$column-selector} {
|
|
12
18
|
@if $grow {
|
|
13
19
|
@include flex(1 1 auto);
|
|
14
20
|
}
|
|
@@ -41,17 +47,19 @@
|
|
|
41
47
|
}
|
|
42
48
|
}
|
|
43
49
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
@
|
|
50
|
+
@if $mobile == "auto" {
|
|
51
|
+
// Stack columns on mobile by default
|
|
52
|
+
@media (max-width: $mobile-breakpoint) {
|
|
53
|
+
@include flex-wrap(wrap);
|
|
47
54
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
55
|
+
#{$column-selector} {
|
|
56
|
+
margin-bottom: $gutter;
|
|
57
|
+
margin-right: 0;
|
|
58
|
+
width: 100%;
|
|
52
59
|
|
|
53
|
-
|
|
54
|
-
|
|
60
|
+
&:last-child {
|
|
61
|
+
margin-bottom: 0;
|
|
62
|
+
}
|
|
55
63
|
}
|
|
56
64
|
}
|
|
57
65
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Sets up a element and its child elements with the flexbox properties needed
|
|
2
2
|
// to have the given number of columns per row with multiple rows in the container
|
|
3
3
|
// and an optional gutter value that will be used between columns and rows.
|
|
4
|
-
@mixin has-grid($columns, $gutter: 0) {
|
|
4
|
+
@mixin has-grid($columns, $gutter: 0, $column-class: "auto", $mobile: "auto") {
|
|
5
5
|
@include align-content(stretch);
|
|
6
6
|
@include align-items(stretch);
|
|
7
7
|
@include display(flex);
|
|
@@ -10,7 +10,13 @@
|
|
|
10
10
|
@include justify-content(space-around);
|
|
11
11
|
column-count: $columns; // Used as a reference for JavaScript functions
|
|
12
12
|
|
|
13
|
-
> *:not(script)
|
|
13
|
+
$column-selector: "> *:not(script)";
|
|
14
|
+
|
|
15
|
+
@if $column-class != "auto" {
|
|
16
|
+
$column-selector: "." + $column-class;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
#{$column-selector} {
|
|
14
20
|
@include flex(1 1 auto);
|
|
15
21
|
|
|
16
22
|
@if $gutter == 0 {
|
|
@@ -52,19 +58,22 @@
|
|
|
52
58
|
}
|
|
53
59
|
}
|
|
54
60
|
|
|
55
|
-
@
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
@if $mobile == "auto" {
|
|
62
|
+
// Stack columns on mobile by default
|
|
63
|
+
@media (max-width: $mobile-breakpoint) {
|
|
64
|
+
#{$column-selector} {
|
|
65
|
+
margin-bottom: $gutter;
|
|
66
|
+
margin-right: 0;
|
|
67
|
+
margin-top: 0;
|
|
68
|
+
width: 100%;
|
|
61
69
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
70
|
+
&:last-of-type {
|
|
71
|
+
margin-bottom: 0;
|
|
72
|
+
}
|
|
65
73
|
|
|
66
|
-
|
|
67
|
-
|
|
74
|
+
&:empty {
|
|
75
|
+
display: none;
|
|
76
|
+
}
|
|
68
77
|
}
|
|
69
78
|
}
|
|
70
79
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: codelation_assets
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.5.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Brian Pattison
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-
|
|
11
|
+
date: 2016-07-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -177,9 +177,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
177
177
|
version: '0'
|
|
178
178
|
requirements: []
|
|
179
179
|
rubyforge_project:
|
|
180
|
-
rubygems_version: 2.
|
|
180
|
+
rubygems_version: 2.5.1
|
|
181
181
|
signing_key:
|
|
182
182
|
specification_version: 4
|
|
183
183
|
summary: A collection of Sass mixins and JavaScript helpers.
|
|
184
184
|
test_files: []
|
|
185
|
-
has_rdoc:
|