Skip to content

Commit dccb319

Browse files
legomushroomlegomushroom
committed
Merge branch 'master' into dev
2 parents 1d7ed7f + 39eb512 commit dccb319

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+5376
-3399
lines changed

‎app/build/mojs-curve-editor.js

Lines changed: 3240 additions & 2979 deletions
Large diffs are not rendered by default.

‎app/build/mojs-curve-editor.min.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/css/assets/colors.postcss.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
$c-purple: #3A0839;
3+
$c-light-purple: #572B51;
34
$c-pastel-purple: #9C829A;
45
$c-orange: #FF512F;
56
$c-white : #FFFFFF;

‎app/css/blocks/curve-editor.postcss.css

Lines changed: 77 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
21
@import '../assets/globals.postcss.css';
32

43
.curve-editor {
4+
/*border: calc( 2*$PX ) dotted transparent;*/
55
position: fixed;
66
left: 0;
77
top: 0;
88
width: calc( 403 * $PX );
99
height: calc( 378 * $PX );
1010
border-radius: calc( 12 * $PX );
11-
background: #572B51;
11+
background: $c-light-purple;
1212
z-index: 100;
13-
box-shadow: 2px 2px 2px rgba(0,0,0,.38);
13+
box-shadow: 0 0 calc( 3*$PX ) calc( 1*$PX ) rgba(0,0,0,.38);
14+
15+
& * {
16+
box-sizing: border-box;
17+
}
1418

1519
$gap : 10;
1620

@@ -20,13 +24,17 @@
2024

2125
&__left {
2226
position: absolute;
23-
width: calc( 42 * $PX );
27+
width: calc(42*$PX);
2428
left: 0;
2529
top: 0;
2630
bottom: 0;
27-
padding: calc( $gap * $PX );
31+
padding: calc($gap*$PX);
2832
cursor: move;
2933

34+
[data-component="code-button"] {
35+
margin-top: calc(5*$PX);
36+
}
37+
3038
& [data-component="icon-divider"] {
3139
margin: calc( 10*$PX ) auto;
3240
}
@@ -38,6 +46,16 @@
3846
top: 0;
3947
right: 0;
4048
bottom: 0;
49+
&:after {
50+
content: '';
51+
position: absolute;
52+
left: 0;
53+
top: 0;
54+
right: 0;
55+
bottom: 0;
56+
z-index: 2;
57+
display: none;
58+
}
4159
}
4260

4361
$radius: 16;
@@ -46,11 +64,11 @@
4664
position: absolute;
4765

4866
&[data-type="top"] {
49-
top: calc( -$radius*$PX );
67+
top: calc( (-$radius - 1)*$PX );
5068
}
5169

5270
&[data-type="bottom"] {
53-
bottom: 0;
71+
bottom: calc( 1*$PX );
5472
}
5573

5674
&[data-type="top"],
@@ -60,7 +78,7 @@
6078
}
6179

6280
&[data-type="right"] {
63-
right: calc( -$radius*$PX );
81+
right: calc( (-$radius + 1)*$PX );
6482
top: 50%;
6583
margin-top: calc( -$radius*$PX );
6684
}
@@ -74,10 +92,6 @@
7492
& [data-component="icon-button"] {
7593
margin-bottom: calc( 5*$PX );
7694
}
77-
78-
/*&.is-show {
79-
display: block;
80-
}*/
8195
}
8296

8397
&__mojs-logo {
@@ -93,4 +107,55 @@
93107
height: calc( 12*$PX );
94108
}
95109
}
110+
111+
[data-component="maximize-button"] {
112+
display: none;
113+
}
114+
115+
&.is-inactive {
116+
.curve-editor__mojs-logo {
117+
& [data-component="icon"] {
118+
fill: $c-pastel-purple;
119+
}
120+
}
121+
}
122+
123+
&.is-minimized {
124+
width: calc(100*$PX) !important;
125+
height: calc(45*$PX) !important;
126+
border-radius: calc(7 * $PX);
127+
128+
[data-component="resize-handle"],
129+
[data-component="point"],
130+
[data-component="icon-divider"],
131+
[data-component="minimize-button"],
132+
[data-component="code-button"],
133+
.curve-editor__anchor-buttons,
134+
.curve-editor__mojs-logo {
135+
display: none;
136+
}
137+
138+
.curve-editor__right:after {
139+
display: block;
140+
}
141+
142+
.curve__svg-wrapper {
143+
margin-top: calc(-200*$PX);
144+
}
145+
146+
[data-component="maximize-button"] {
147+
display: block;
148+
}
149+
}
150+
151+
/* all static on minimize classes */
152+
&.is-hidden-on-min.is-minimized {
153+
display: none;
154+
}
155+
156+
157+
/*&.is-highlighted {
158+
border-color: $c-orange;
159+
}*/
160+
96161
}

‎app/css/blocks/curve-editor.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"curve-editor":"_curve-editor_1itz1_4","curve-editor__left":"_curve-editor__left_1itz1_1","curve-editor__right":"_curve-editor__right_1itz1_1","curve-editor__resize-handle":"_curve-editor__resize-handle_1itz1_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1itz1_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1itz1_1"}
1+
{"curve-editor":"_curve-editor_10g8s_3","curve-editor__left":"_curve-editor__left_10g8s_1","curve-editor__right":"_curve-editor__right_10g8s_133","curve-editor__resize-handle":"_curve-editor__resize-handle_10g8s_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_10g8s_128","curve-editor__mojs-logo":"_curve-editor__mojs-logo_10g8s_111","is-inactive":"_is-inactive_10g8s_110","is-minimized":"_is-minimized_10g8s_118","curve__svg-wrapper":"_curve__svg-wrapper_10g8s_137","is-hidden-on-min":"_is-hidden-on-min_10g8s_147"}

‎app/css/blocks/curve.postcss.css

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
@import '../assets/globals.postcss.css';
33

4-
$gap : 10;
4+
$gap: 10;
55
.curve {
66
position: absolute;
77
left: 0;
@@ -13,6 +13,7 @@ $gap : 10;
1313
border: 1px solid $c-pastel-purple;
1414
box-shadow: inset calc( 4 * $PX ) calc( 4 * $PX ) 0 rgba(0,0,0,0.5);
1515
z-index: 2;
16+
overflow: hidden;
1617

1718
$size: 350;
1819
&__background {
@@ -21,12 +22,17 @@ $gap : 10;
2122
top: 0;
2223
bottom: 0;
2324
width: calc( $size * $PX );
24-
/*height: calc( $size * $PX );*/
25-
left: 50%;
26-
margin-left: calc( -$size/2 * $PX );
25+
left: 0;
2726
opacity: 0.5;
2827
border-radius: inherit;
29-
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMzUwcHgiIGhlaWdodD0iMzUwcHgiIHZpZXdCb3g9IjAgMCAzNTAgMzUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuMDAwMDAwLCAwLjAwMDAwMCkiIHN0cm9rZT0iI0ZGRkZGRiI+ICAgICAgICAgICAgPHBhdGggZD0iTTMzMy40OTc4MjEsMzUwLjUwMTA4OCBMMzMzLjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTMxNS45OTc4MjEsMzUwLjUwMTA4OCBMMzE1Ljk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTI5OC40OTc4MjEsMzUwLjUwMTA4OCBMMjk4LjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTI4MC45OTc4MjEsMzUwLjUwMTA4OCBMMjgwLjk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTI0NS45OTc4MjEsMzUwLjUwMTA4OCBMMjQ1Ljk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTIyOC40OTc4MjEsMzUwLjUwMTA4OCBMMjI4LjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTIxMC45OTc4MjEsMzUwLjUwMTA4OCBMMjEwLjk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE5My40OTc4MjEsMzUwLjUwMTA4OCBMMTkzLjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE1OS4zNzI4MjEsMzUwLjUwMTA4OCBMMTU5LjM3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE0MS44NzI4MjEsMzUwLjUwMTA4OCBMMTQxLjg3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTEyNC4zNzI4MjEsMzUwLjUwMTA4OCBMMTI0LjM3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTEwNi44NzI4MjEsMzUwLjUwMTA4OCBMMTA2Ljg3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTcxLjg3MjgyMDcsMzUwLjUwMTA4OCBMNzEuODcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTU0LjM3MjgyMDcsMzUwLjUwMTA4OCBMNTQuMzcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM2Ljg3MjgyMDcsMzUwLjUwMTA4OCBMMzYuODcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE5LjM3MjgyMDcsMzUwLjUwMTA4OCBMMTkuMzcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMTkuMDAyMTc5MyBMMS4wMDEwODgzLDE5LjAwMjE3OTMiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDM2LjUwMjE3OTMgTDEuMDAxMDg4MywzNi41MDIxNzkzIiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCw1NC4wMDIxNzkzIEwxLjAwMTA4ODMsNTQuMDAyMTc5MyIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsNzEuNTAyMTc5MyBMMS4wMDEwODgzLDcxLjUwMjE3OTMiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDEwNi41MDIxNzkgTDEuMDAxMDg4MywxMDYuNTAyMTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwxMjQuMDAyMTc5IEwxLjAwMTA4ODMsMTI0LjAwMjE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMTQxLjUwMjE3OSBMMS4wMDEwODgzLDE0MS41MDIxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDE1OS4wMDIxNzkgTDEuMDAxMDg4MywxNTkuMDAyMTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwxOTMuMTI3MTc5IEwxLjAwMTA4ODMsMTkzLjEyNzE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMjEwLjYyNzE3OSBMMS4wMDEwODgzLDIxMC42MjcxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDIyOC4xMjcxNzkgTDEuMDAxMDg4MywyMjguMTI3MTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwyNDUuNjI3MTc5IEwxLjAwMTA4ODMsMjQ1LjYyNzE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMjgwLjYyNzE3OSBMMS4wMDEwODgzLDI4MC42MjcxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDI5OC4xMjcxNzkgTDEuMDAxMDg4MywyOTguMTI3MTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwzMTUuNjI3MTc5IEwxLjAwMTA4ODMsMzE1LjYyNzE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMzMzLjEyNzE3OSBMMS4wMDEwODgzLDMzMy4xMjcxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik04OC4wNjQxMzUyLDEgTDg4LjA2NDEzNTIsMzUxIiBpZD0icGF0aDgyMTUiIG9wYWNpdHk9IjAuNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNzUuMTI4MjcsMSBMMTc1LjEyODI3LDM1MSIgaWQ9InBhdGg4MjE1IiBvcGFjaXR5PSIwLjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMjYyLjE5MjQwNiwxIEwyNjIuMTkyNDA2LDM1MSIgaWQ9InBhdGg4MjE1IiBvcGFjaXR5PSIwLjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUwLjU2MzU5MSw4OC4wNjQ2NzkzIEwwLjU2MzU5MTAyMiw4OC4wNjQ2NzkzIiBpZD0icGF0aDgyMTUiIG9wYWNpdHk9IjAuNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTAuNTYzNTkxLDE3NS41NjQ2NzkgTDAuNTYzNTkxMDIyLDE3NS41NjQ2NzkiIGlkPSJwYXRoODIxNSIgb3BhY2l0eT0iMC41Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MC41NjM1OTEsMjYzLjA2NDY3OSBMMC41NjM1OTEwMjIsMjYzLjA2NDY3OSIgaWQ9InBhdGg4MjE1IiBvcGFjaXR5PSIwLjUiPjwvcGF0aD4gICAgICAgICAgICA8cmVjdCBpZD0icmVjdDEwMDc4IiBvcGFjaXR5PSIwLjc1IiB4PSIwLjg3MjgxNzk1NSIgeT0iMSIgd2lkdGg9IjM1MCIgaGVpZ2h0PSIzNTAiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
28+
29+
& svg {
30+
width: 100%;
31+
}
32+
33+
& path {
34+
vector-effect: non-scaling-stroke;
35+
}
3036
}
3137

3238
&__svg-wrapper {
@@ -35,11 +41,13 @@ $gap : 10;
3541
left: calc( -1*$PX );
3642
right: calc( -1*$PX );
3743
}
38-
44+
3945
&__svg {
4046
display: block;
4147
overflow: visible;
4248
width: 100%;
49+
position: relative;
50+
z-index: 1;
4351
}
4452
&__svg-segment {
4553
stroke: white;

‎app/css/blocks/curve.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"curve":"_curve_k9lsx_5","curve__background":"_curve__background_k9lsx_1","curve__svg-wrapper":"_curve__svg-wrapper_k9lsx_1","curve__svg":"_curve__svg_k9lsx_1","curve__svg-segment":"_curve__svg-segment_k9lsx_1"}
1+
{"curve":"_curve_1w89w_5","curve__background":"_curve__background_1w89w_1","curve__svg-wrapper":"_curve__svg-wrapper_1w89w_1","curve__svg":"_curve__svg_1w89w_1","curve__svg-segment":"_curve__svg-segment_1w89w_1"}

‎app/css/blocks/resize-handle.postcss.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ $radius: 16;
1212
border-top-left-radius: calc( 3*$PX );
1313
border-top-right-radius: calc( 3*$PX );
1414
transform-origin: 50% 100%;
15+
box-shadow: inset 0 0 0 calc( 1*$PX ) $c-light-purple;
1516

1617
&:after {
1718
content: '';

‎app/css/blocks/resize-handle.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"resize-handle":"_resize-handle_k81kc_4","resize-handle--right":"_resize-handle--right_k81kc_1","resize-handle--bottom":"_resize-handle--bottom_k81kc_1"}
1+
{"resize-handle":"_resize-handle_1uncf_4","resize-handle--right":"_resize-handle--right_1uncf_1","resize-handle--bottom":"_resize-handle--bottom_1uncf_1"}

‎app/css/blocks/ruler.postcss.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import '../assets/globals.postcss.css';
2+
3+
$size: 350;
4+
.ruler {
5+
position: absolute;
6+
left: 0;
7+
top: calc( -$size*3 * $PX );
8+
height: calc( $size * 7 * $PX );
9+
width: calc( 18*$PX );
10+
11+
&--right {
12+
left: auto;
13+
right: 0;
14+
}
15+
16+
$itemSize: 14;
17+
&__item {
18+
position: absolute;
19+
color: $c-pastel-purple;
20+
font-size: 8px;
21+
font-family: sans-serif;
22+
border-radius: 50%;
23+
left: 50%;
24+
width: calc($itemSize/2*$PX);
25+
height: calc($itemSize*$PX);
26+
text-align: center;
27+
line-height: calc($itemSize*$PX);
28+
29+
margin-top: calc(3*$PX);
30+
margin-left: calc((-$itemSize/4)*$PX);
31+
32+
&--0 {
33+
top: calc(4*$size*$PX);
34+
}
35+
36+
&--1 {
37+
top: calc(3*$size*$PX);
38+
}
39+
40+
&--2 {
41+
top: calc(2*$size*$PX);
42+
}
43+
44+
&--n1 {
45+
top: calc(5*$size*$PX);
46+
}
47+
48+
&--n2 {
49+
top: calc(6*$size*$PX);
50+
}
51+
}
52+
}

0 commit comments

Comments
 (0)