Skip to content

Commit 1c01016

Browse files
ScrumScrum
committed
#12 resolve partly
1 parent 4cc3689 commit 1c01016

6 files changed

Lines changed: 65 additions & 69 deletions

File tree

‎.editorconfig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ charset = utf-8
77
trim_trailing_whitespace = true
88
insert_final_newline = true
99

10-
[{package.json,*.yml}]
10+
[{package.json,*.yml, *.pss, *.css}]
1111
indent_style = space
1212
indent_size = 2
1313

‎.stylelintrc‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"extends": "stylelint-config-suitcss"
2+
"extends": "stylelint-config-suitcss",
3+
"rules": {
4+
"except": ["all-nested"]
5+
}
36
}

‎src/pss/layout/_grid.pss‎

Lines changed: 38 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,57 @@
11
[class*="sl-col"],
2-
[class*="sl-row"] {
3-
box-sizing: border-box;
4-
}
2+
[class*="sl-row"] { box-sizing: border-box; }
53

6-
[class*="sl-container"] {
7-
@mixin clearfix;
8-
}
4+
[class*="sl-container"] { @mixin clearfix; }
95

10-
/* row grid */
116
.container-row {
12-
> [class*="sl-row"]:first-child { padding-top: 0;}
13-
> [class*="sl-row"]:last-child { padding-bottom: 0;}
7+
> [class*="l-row"]:last-child { padding-bottom: 0; }
8+
> [class*="sl-row"]:first-child { padding-top: 0; }
149
}
1510

1611
[class*="sl-row"] {
17-
padding-top: calc(var(--grid-gutter) / 2)var(--grid-gutter-ext);
18-
padding-bottom: calc(var(--grid-gutter) / 2)var(--grid-gutter-ext);
19-
}
20-
* {
21-
height: inherit;
12+
padding-bottom: calc(var(--grid-gutter) / 2 * (1var(--grid-gutter-ext)));
13+
padding-top: calc(var(--grid-gutter) / 2 * (1var(--grid-gutter-ext)));
2214
}
15+
16+
* { height: inherit; }
17+
2318
@for $i from 1 to var(--grid-row-count) {
24-
.container-row-$i {
25-
height: calc(var(--grid-row-height) * $i)var(--grid-gutter-ext);
26-
27-
@for $k from 1 to var(--grid-row-count) {
28-
@if($k != var(--grid-row-count)) {
29-
.row-offset-$k {
30-
margin-top: calc( (( $i * var(--grid-row-height) ) / var(--grid-row-count)) * $k )var(--grid-gutter-ext);
31-
}
32-
}
33-
}
34-
35-
}
36-
.row-$i {
37-
height: calc( ( $i * 100% ) / var(--grid-col-count));
38-
}
19+
.container-row-$i {
20+
height: calc(var(--grid-row-height) * $i * (1var(--grid-gutter-ext)));
21+
22+
@for $k from 1 to var(--grid-row-count) {
23+
@if($k != var(--grid-row-count)) {
24+
.r-offset-$k {
25+
rgin-top: c alc((($i * var(--grid-row-height)) / var(--grid-row-count)) * $k * (1var(--grid-gutter-ext)));
26+
}
27+
}
28+
}
29+
}
30+
31+
.row-$i {
32+
height: calc(($i * 100%) / var(--grid-col-count));
33+
}
3934
}
4035

41-
/* col grid */
4236
.container-col {
43-
margin-left: -calc( var(--grid-gutter) / 2)var(--grid-gutter-ext);
44-
margin-right: -calc( var(--grid-gutter) / 2)var(--grid-gutter-ext);
37+
margin-left: -calc(var(--grid-gutter) / 2 * (1var(--grid-gutter-ext)));
38+
margin-right: -calc(var(--grid-gutter) / 2 * (1var(--grid-gutter-ext)));
4539
}
4640

4741
[class*="sl-col"] {
48-
float: left;
49-
padding-left: calc( var(--grid-gutter) / 2)var(--grid-gutter-ext);
50-
padding-right: calc( var(--grid-gutter) / 2)var(--grid-gutter-ext);
42+
float: left;
43+
padding-left: calc(var(--grid-gutter) / 2 * (1var(--grid-gutter-ext)));
44+
padding-right: calc(var(--grid-gutter) / 2 * (1var(--grid-gutter-ext)));
5145
}
5246

5347
@for $i from 1 to var(--grid-col-count) {
54-
@if($i != var(--grid-col-count)) {
55-
.col-offset-$i {
56-
margin-left: calc( ( 100% / var(--grid-col-count) ) * $i );
57-
}
58-
}
59-
.col-$i {
60-
width: calc( ( $i * 100% ) / var(--grid-col-count) );
61-
}
48+
@if($i != var(--grid-col-count)) {
49+
.col-offset-$i {
50+
margin-left: calc((100% / var(--grid-col-count)) * $i);
51+
}
52+
}
53+
54+
.col-$i {
55+
width: calc(($i * 100%) / var(--grid-col-count));
56+
}
6257
}

‎src/pss/utils/_mixins.pss‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
@define-mixin clearfix {
2-
&:after, &:before {
3-
content: "";
4-
display: table;
5-
}
6-
&:after {
7-
clear: both;
8-
}
9-
}
2+
&:after {
3+
clear: both;
4+
}
5+
6+
&:after,
7+
&:before {
8+
content: "";
9+
display: table;
10+
}
11+
}

‎src/pss/utils/_variables.pss‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
:root {
2-
3-
/* components grid */
4-
--grid-gutter: 20;
5-
--grid-gutter-ext: px;
6-
--grid-col-count: 12;
7-
--grid-row-count: 12;
8-
--grid-row-height: 40;
9-
10-
/* utils helpers */
11-
--space-gutter: 20;
12-
--space-gutter-ext: px;
13-
}
2+
--grid-gutter: 20;
3+
--grid-gutter-ext: px;
4+
--grid-col-count: 12;
5+
--grid-row-count: 12;
6+
--grid-row-height: 40;
7+
--space-gutter: 20;
8+
--space-gutter-ext: px;
9+
}

‎src/pss/utils/helpers/_space.pss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.space-xs { margin-bottom: calc( var(--space-gutter) / 4 )var(--space-gutter-ext); }
2-
.space-sm { margin-bottom: calc( var(--space-gutter) / 2 )var(--space-gutter-ext); }
3-
.space-md { margin-bottom: calc( var(--space-gutter) )var(--space-gutter-ext); }
4-
.space-lg { margin-bottom: calc( var(--space-gutter) * 2 )var(--space-gutter-ext); }
1+
.space-xs { margin-bottom: calc(var(--space-gutter) / 4 * (1var(--space-gutter-ext))); }
2+
.space-sm { margin-bottom: calc(var(--space-gutter) / 2 * (1var(--space-gutter-ext))); }
3+
.space-md { margin-bottom: calc(var(--space-gutter) * (1var(--space-gutter-ext))); }
4+
.space-lg { margin-bottom: calc(var(--space-gutter) * 2 * (1var(--space-gutter-ext))); }

0 commit comments

Comments
 (0)