Skip to content

Commit 793c584

Browse files
michaelmarcucciomichaelmarcuccio
authored
better style scoped to canvas (#98)
* upd style scope & remove keyframe * bump
1 parent 429d6e0 commit 793c584

3 files changed

Lines changed: 241 additions & 281 deletions

File tree

‎projects/ng-flowchart/assets/styles.scss‎

Lines changed: 115 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,138 @@
11
.ngflowchart-canvas {
22
overflow: auto;
33
display: flex;
4-
}
5-
6-
.ngflowchart-canvas-content.scaling .ngflowchart-step-wrapper,
7-
.ngflowchart-canvas-content.scaling svg,
8-
.ngflowchart-canvas-content.scaling ng-flowchart-connector-pad {
9-
transition: none !important;
10-
}
11-
12-
.ngflowchart-canvas-content {
13-
position: relative;
14-
min-height: 100%;
15-
min-width: 100%;
16-
flex: 1 1 100%;
17-
}
18-
19-
.ngflowchart-step-wrapper {
20-
height: auto;
21-
width: auto;
22-
position: absolute;
23-
box-sizing: border-box;
24-
25-
transition: all 0.2s;
26-
27-
cursor: grab;
28-
}
294

30-
.ngflowchart-step-wrapper[ngflowchart-drop-hover]::before {
31-
content: '';
32-
width: 12px;
33-
height: 12px;
34-
border-radius: 100%;
35-
position: absolute;
36-
z-index: 1;
37-
background: darkred;
38-
}
39-
40-
.ngflowchart-step-wrapper[ngflowchart-drop-hover]::after {
41-
content: '';
42-
width: 20px;
43-
height: 20px;
44-
border-radius: 100%;
45-
position: absolute;
46-
z-index: 0;
47-
background: rgb(192, 123, 123);
48-
//TODO mixin so theme can be set
49-
animation: backgroundOpacity 2s linear infinite;
50-
}
51-
52-
.ngflowchart-step-wrapper:not(
53-
.horizontal
54-
)[ngflowchart-drop-hover='above']::before,
55-
.ngflowchart-step-wrapper:not(
56-
.horizontal
57-
)[ngflowchart-drop-hover='above']::after {
58-
top: 0;
59-
right: 50%;
60-
transform: translate(50%, -50%);
61-
}
5+
.ngflowchart-canvas-content.scaling .ngflowchart-step-wrapper,
6+
.ngflowchart-canvas-content.scaling svg,
7+
.ngflowchart-canvas-content.scaling ng-flowchart-connector-pad {
8+
transition: none !important;
9+
}
6210

63-
.ngflowchart-step-wrapper:not(
64-
.horizontal
65-
)[ngflowchart-drop-hover='below']::before,
66-
.ngflowchart-step-wrapper:not(
67-
.horizontal
68-
)[ngflowchart-drop-hover='below']::after {
69-
bottom: 0;
70-
right: 50%;
71-
transform: translate(50%, 50%);
72-
}
11+
.ngflowchart-canvas-content {
12+
position: relative;
13+
min-height: 100%;
14+
min-width: 100%;
15+
flex: 1 1 100%;
16+
}
7317

74-
.ngflowchart-step-wrapper:not(
75-
.horizontal
76-
)[ngflowchart-drop-hover='right']::before,
77-
.ngflowchart-step-wrapper:not(
78-
.horizontal
79-
)[ngflowchart-drop-hover='right']::after {
80-
right: 0;
81-
top: 50%;
82-
transform: translate(50%, -50%);
83-
}
18+
.ngflowchart-step-wrapper {
19+
height: auto;
20+
width: auto;
21+
position: absolute;
22+
box-sizing: border-box;
8423

85-
.ngflowchart-step-wrapper:not(
86-
.horizontal
87-
)[ngflowchart-drop-hover='left']::before,
88-
.ngflowchart-step-wrapper:not(
89-
.horizontal
90-
)[ngflowchart-drop-hover='left']::after {
91-
left: 0;
92-
top: 50%;
93-
transform: translate(-50%, -50%);
94-
}
24+
transition: all 0.2s;
9525

96-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='above']::before,
97-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='above']::after {
98-
left: 0;
99-
top: 50%;
100-
transform: translate(-50%, -50%);
101-
}
26+
cursor: grab;
27+
}
10228

103-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='below']::before,
104-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='below']::after {
105-
right: 0;
106-
top: 50%;
107-
transform: translate(50%, -50%);
108-
}
29+
.ngflowchart-step-wrapper[ngflowchart-drop-hover]::before {
30+
content: '';
31+
width: 12px;
32+
height: 12px;
33+
border-radius: 100%;
34+
position: absolute;
35+
z-index: 1;
36+
background: darkred;
37+
}
10938

110-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='right']::before,
111-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='right']::after {
112-
bottom: 0;
113-
right: 50%;
114-
transform: translate(50%, 50%);
115-
}
39+
.ngflowchart-step-wrapper[ngflowchart-drop-hover]::after {
40+
content: '';
41+
width: 20px;
42+
height: 20px;
43+
border-radius: 100%;
44+
position: absolute;
45+
z-index: 0;
46+
background: rgb(192, 123, 123);
47+
//TODO mixin so theme can be set
48+
animation: backgroundOpacity 2s linear infinite;
49+
}
11650

117-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='left']::before,
118-
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='left']::after {
119-
top: 0;
120-
right: 50%;
121-
transform: translate(50%, -50%);
122-
}
51+
.ngflowchart-step-wrapper:not(
52+
.horizontal
53+
)[ngflowchart-drop-hover='above']::before,
54+
.ngflowchart-step-wrapper:not(
55+
.horizontal
56+
)[ngflowchart-drop-hover='above']::after {
57+
top: 0;
58+
right: 50%;
59+
transform: translate(50%, -50%);
60+
}
12361

124-
@keyframes wiggle {
125-
0% {
126-
transform: translateX(0);
127-
border: 2px solid red;
62+
.ngflowchart-step-wrapper:not(
63+
.horizontal
64+
)[ngflowchart-drop-hover='below']::before,
65+
.ngflowchart-step-wrapper:not(
66+
.horizontal
67+
)[ngflowchart-drop-hover='below']::after {
68+
bottom: 0;
69+
right: 50%;
70+
transform: translate(50%, 50%);
12871
}
129-
25% {
130-
transform: translateX(-10px);
72+
73+
.ngflowchart-step-wrapper:not(
74+
.horizontal
75+
)[ngflowchart-drop-hover='right']::before,
76+
.ngflowchart-step-wrapper:not(
77+
.horizontal
78+
)[ngflowchart-drop-hover='right']::after {
79+
right: 0;
80+
top: 50%;
81+
transform: translate(50%, -50%);
13182
}
132-
50% {
133-
transform: translateX(0);
83+
84+
.ngflowchart-step-wrapper:not(
85+
.horizontal
86+
)[ngflowchart-drop-hover='left']::before,
87+
.ngflowchart-step-wrapper:not(
88+
.horizontal
89+
)[ngflowchart-drop-hover='left']::after {
90+
left: 0;
91+
top: 50%;
92+
transform: translate(-50%, -50%);
13493
}
135-
75% {
136-
transform: translateX(10px);
94+
95+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='above']::before,
96+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='above']::after {
97+
left: 0;
98+
top: 50%;
99+
transform: translate(-50%, -50%);
137100
}
138-
100% {
139-
transform: translateX(0);
140-
border: 2px solid red;
101+
102+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='below']::before,
103+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='below']::after {
104+
right: 0;
105+
top: 50%;
106+
transform: translate(50%, -50%);
141107
}
142-
}
143108

144-
@keyframes backgroundOpacity {
145-
0% {
146-
opacity: 0.8;
109+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='right']::before,
110+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='right']::after {
111+
bottom: 0;
112+
right: 50%;
113+
transform: translate(50%, 50%);
147114
}
148-
50% {
149-
opacity: 0.3;
115+
116+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='left']::before,
117+
.ngflowchart-step-wrapper.horizontal[ngflowchart-drop-hover='left']::after {
118+
top: 0;
119+
right: 50%;
120+
transform: translate(50%, -50%);
150121
}
151-
100% {
152-
opacity: 0.8;
122+
123+
@keyframes backgroundOpacity {
124+
0% {
125+
opacity: 0.8;
126+
}
127+
50% {
128+
opacity: 0.3;
129+
}
130+
100% {
131+
opacity: 0.8;
132+
}
153133
}
154-
}
155134

156-
.ngflowchart-step-wrapper.connector-target {
157-
box-shadow: 0 0 4px 1px green;
135+
.ngflowchart-step-wrapper.connector-target {
136+
box-shadow: 0 0 4px 1px green;
137+
}
158138
}

‎projects/ng-flowchart/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@joelwenzel/ng-flowchart",
3-
"version": "1.0.0-beta.30",
3+
"version": "1.0.0-beta.31",
44
"license": "Apache-2.0",
55
"peerDependencies": {
66
"@angular/common": "14 - 18",

0 commit comments

Comments
 (0)