Skip to content

Commit 261fd2b

Browse files
jthrillyjthrilly
authored
Merge pull request #32 from codaco/css/base-node-size
Css/base node size
2 parents cabda20 + c10e680 commit 261fd2b

File tree

6 files changed

+175
-91
lines changed

6 files changed

+175
-91
lines changed

‎lib/components/Spinner.js‎

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

‎lib/components/Spinner.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/styles/components/node.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1+
:root {
2+
--node-base-size: 160px;
3+
@include breakpoint('full') {
4+
--node-base-size: 200px;
5+
}
6+
}
7+
18
.node {
29
cursor: pointer;
310
position: relative;
411
overflow:visible;
512
margin: 0;
6-
font-size: 150px;
13+
font-size: var(--node-base-size);
714
width: 1em;
815
height: 1em;
916
filter: drop-shadow(0 4px 0 transparentize(palette('dark-background'), .25));

‎lib/styles/components/spinner.scss‎

Lines changed: 81 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,107 @@
1-
$circle-size: 10px;
2-
$container-size: $circle-size * 3;
3-
$animation-time: 1.7s;
41

5-
$network-canvas-coral: #e2215b;
6-
$light-sea-green: #00c9a2;
7-
$mustard: #f2b700;
8-
$sea-serpent: #0fb2e2;
9-
$navy-taupe: #2d2955;
2+
$light-color-list: (color('sea-serpent'), color('mustard'), color('neon-coral'), color('sea-green'));
3+
$dark-color-list: (color('sea-serpent--dark'), color('mustard--dark'), color('neon-coral--dark'), color('sea-green--dark'));
104

11-
$color-list: ($sea-serpent, $mustard, $network-canvas-coral, $light-sea-green);
5+
.spinner {
6+
--circle-size: 20px;
7+
--container-size: calc(var(--circle-size) * 3);
8+
--animation-duration: 1.5s;
129

13-
body {
14-
background: $navy-taupe;
15-
}
10+
&--small {
11+
--circle-size: 10px;
12+
}
1613

17-
.nc-spinner {
18-
position: absolute;
19-
width: $container-size;
20-
height: $container-size;
21-
top: calc(50% - #{$container-size/2});
22-
left: calc(50% - #{$container-size/2});
23-
animation: spin $animation-time cubic-bezier(0.77, 0, 0.175, 1) infinite;
14+
&--large {
15+
--circle-size: 40px;
16+
}
17+
18+
width: var(--container-size);
19+
height: var(--container-size);
20+
margin: var(--circle-size);
21+
animation: spin var(--animation-duration) cubic-bezier(0.77, 0, 0.175, 1) infinite;
2422
transform: rotate(45deg);
25-
}
2623

27-
.circle-container {
28-
position: absolute;
24+
.circle {
25+
position: absolute;
2926

30-
&:nth-child(1) {
31-
top: -#{$circle-size};
32-
left: 0px;
33-
}
27+
&:nth-child(1) {
28+
top: calc(var(--circle-size) * -1);
29+
left: 0px;
30+
}
3431

35-
&:nth-child(2) {
36-
top: 0px;
37-
left: #{$circle-size * 2};
38-
transform: rotate(90deg);
39-
}
32+
&:nth-child(2) {
33+
top: 0px;
34+
left: calc(var(--circle-size) * 2);
35+
transform: rotate(90deg);
36+
}
4037

41-
&:nth-child(3) {
42-
top: #{$circle-size};
43-
left: -#{$circle-size};
44-
transform: rotate(-90deg);
45-
}
38+
&:nth-child(3) {
39+
top: var(--circle-size);
40+
left: calc(var(--circle-size) * -1);
41+
transform: rotate(-90deg);
42+
}
43+
44+
&:nth-child(4) {
45+
top: calc(var(--circle-size) * 2);
46+
left: var(--circle-size);
47+
transform: rotate(-180deg);
48+
}
4649

47-
&:nth-child(4) {
48-
top: #{$circle-size * 2};
49-
left: #{$circle-size};
50-
transform: rotate(-180deg);
50+
.half-circle {
51+
height: var(--circle-size);
52+
width: calc(var(--circle-size) * 2);
53+
border-top-left-radius: calc(var(--circle-size) * 2);
54+
border-top-right-radius: calc(var(--circle-size) * 2);
55+
56+
&--rotated {
57+
transform: rotate(180deg);
58+
position: relative;
59+
top: -1px;
60+
}
61+
}
5162
}
52-
}
5363

54-
.half-circle {
55-
height: $circle-size;
56-
width: $circle-size * 2;
57-
background: #9e978e;
58-
border-top-left-radius: $circle-size * 2;
59-
border-top-right-radius: $circle-size * 2;
60-
&.rot {
61-
transform: rotate(180deg);
62-
position: relative;
63-
top: -1px;
64+
@each $color in $light-color-list {
65+
66+
$color-index: index($light-color-list, $color);
67+
68+
@keyframes circle-color-#{$color-index} {
69+
0% {
70+
transform: translateX(var(--circle-size));
71+
background: item($dark-color-list, $color-index);
72+
}
73+
100% {
74+
trasform: translateX(0px);
75+
background: $color;
76+
}
77+
}
78+
79+
.circle {
80+
&:nth-child(#{$color-index}) {
81+
:nth-child(1) {
82+
background: darken($color, 10%);
83+
animation: circle-color-#{$color-index} calc(var(--animation-duration) / 2) cubic-bezier(0.77, 0, 0.175, 1) alternate infinite;
84+
}
85+
:nth-child(2) {
86+
background: $color;
87+
}
88+
}
89+
}
6490
}
91+
6592
}
6693

6794
@keyframes spin {
6895
0% {
69-
transform: rotate(45deg) scale(1.4);
96+
transform: rotate(45deg) scale(1);
7097
}
7198

7299
40% {
73-
transform: rotate(45deg) scale(1);
100+
transform: rotate(45deg) scale(0.8);
74101
}
75102
100% {
76-
transform: rotate(405deg) scale(1.4);
103+
transform: rotate(405deg) scale(1);
77104
}
78105
}
79106

80-
@each $color in $color-list {
81-
82-
$color-index: index($color-list, $color);
83-
84-
@keyframes circle-color-#{$color-index} {
85-
0% {
86-
transform: translateX($circle-size);
87-
background: darken($color, 10%);
88-
}
89-
100% {
90-
trasform: translateX(0px);
91-
background: $color;
92-
}
93-
}
94-
95-
.circle-container {
96107

97-
&:nth-child(#{$color-index}) {
98-
:nth-child(1) {
99-
background: darken($color, 10%);
100-
animation: circle-color-#{$color-index} #{$animation-time / 2} cubic-bezier(0.77, 0, 0.175, 1) alternate infinite;
101-
}
102-
:nth-child(2) {
103-
background: $color;
104-
}
105-
}
106-
}
107-
108-
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "network-canvas-ui",
3-
"version": "1.10.0",
3+
"version": "1.10.1",
44
"description": "Styles and React components for the Network Canvas project",
55
"main": "lib/components/index.js",
66
"scripts": {

‎src/styles/components/node.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1+
:root {
2+
--node-base-size: 160px;
3+
@include breakpoint('full') {
4+
--node-base-size: 200px;
5+
}
6+
}
7+
18
.node {
29
cursor: pointer;
310
position: relative;
411
overflow:visible;
512
margin: 0;
6-
font-size: 150px;
13+
font-size: var(--node-base-size);
714
width: 1em;
815
height: 1em;
916
filter: drop-shadow(0 4px 0 transparentize(palette('dark-background'), .25));

0 commit comments

Comments
 (0)