Skip to content

Commit 1313e35

Browse files
jneviusjnevius
committed
- Styling: migrated styles from sankey diagram obs to LESS/SCSS.
1 parent aac22b3 commit 1313e35

File tree

6 files changed

+368
-122
lines changed

6 files changed

+368
-122
lines changed

‎Rock.JavaScript.Obsidian/Framework/Controls/Internal/SankeyDiagram/sankeyDiagram.obs‎

Lines changed: 0 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -26,128 +26,6 @@
2626
</div>
2727
</template>
2828

29-
<style>
30-
.flow-node-diagram-container {
31-
position: relative;
32-
width: max-content;
33-
max-width: 100%;
34-
margin: 0 auto;
35-
}
36-
37-
.flow-node-diagram-container .flow-tooltip {
38-
position: absolute;
39-
background: var(--color-interface-softest);
40-
max-width: 260px;
41-
border: 1px solid var(--color-interface-soft);
42-
border-radius: var(--rounded-xsmall);
43-
padding: var(--spacing-xsmall);
44-
font-size: var(--font-size-small);
45-
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
46-
color: var(--color-interface-strong);
47-
}
48-
49-
.flow-node-diagram-container svg {
50-
max-width: 100%;
51-
height: auto;
52-
min-height: 50px;
53-
}
54-
55-
.flow-node-diagram-container .loadingContainer {
56-
position: absolute;
57-
z-index: 0;
58-
top: 0;
59-
left: 0;
60-
right: 0;
61-
bottom: 0;
62-
display: flex;
63-
justify-content: center;
64-
align-items: center;
65-
background: rgba(255, 255, 255, .75);
66-
}
67-
68-
.flow-node-diagram-container .loadingContainer h3 {
69-
margin: 0;
70-
}
71-
72-
.flow-node-diagram-container .fade-enter-from,
73-
.flow-node-diagram-container .fade-leave-to {
74-
opacity: 0;
75-
}
76-
77-
.flow-node-diagram-container .fade-enter-active,
78-
.flow-node-diagram-container .fade-leave-active {
79-
transition: opacity .2s ease-in-out;
80-
}
81-
82-
.step-flow-svg .edge:hover {
83-
fill: rgba(170, 170, 170, 0.8);
84-
}
85-
86-
.step-flow-svg .edge {
87-
opacity: 0;
88-
transform-origin: left center;
89-
animation: flow-edges 0.25s ease-in-out forwards;
90-
}
91-
92-
.step-flow-svg .edge.level-2 {
93-
animation-delay: 0.25s;
94-
}
95-
96-
.step-flow-svg .edge.level-3 {
97-
animation-delay: .5s;
98-
}
99-
100-
.step-flow-svg .edge.level-4 {
101-
animation-delay: .75s;
102-
}
103-
104-
.step-flow-svg .edge.level-5 {
105-
animation-delay: 1s;
106-
}
107-
108-
.step-flow-svg .edge.level-6 {
109-
animation-delay: 1.25s;
110-
}
111-
112-
@keyframes flow-edges {
113-
0% {
114-
opacity: 0;
115-
-webkit-clip-path: inset(0 100% 0 0);
116-
clip-path: inset(0 100% 0 0);
117-
}
118-
119-
100% {
120-
opacity: 1;
121-
-webkit-clip-path: inset(0 0 0 0);
122-
clip-path: inset(0 0 0 0);
123-
}
124-
}
125-
126-
.flow-legend {
127-
display: flex;
128-
flex-wrap: wrap;
129-
justify-content: center;
130-
margin: 20px auto 0;
131-
gap: 12px;
132-
width: 100%;
133-
}
134-
135-
.flow-key {
136-
display: inline-flex;
137-
align-items: center;
138-
font-size: 12px;
139-
line-height: 1.1;
140-
}
141-
142-
.flow-key .color {
143-
width: 18px;
144-
height: 18px;
145-
margin-right: 4px;
146-
border-radius: 3px;
147-
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
148-
}
149-
</style>
150-
15129
<script setup lang="ts">
15230
import SankeyDiagramLevel from "./sankeyDiagramLevel.partial.obs";
15331
import { computed, PropType, reactive } from "vue";

‎RockWeb/Styles/_components.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
@import "rock-components/rating.less"; // 38. Rating Input
4040
@import "rock-components/value-list.less"; // 39. Value List Control
4141
@import "rock-components/hero-section.less"; // 40. Hero Section
42+
@import "rock-components/sankey.less"; // 41. Sankey Diagram
4243

4344
// 40. Color Picker
4445
@import (less) "./bootstrap-colorpicker/colorpicker.less";

‎RockWeb/Styles/rock-components/sankey.less‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
2+
3+
// Sankey Diagram Styles
4+
// ================================
5+
6+
.flow-node-diagram-container {
7+
position: relative;
8+
width: max-content;
9+
max-width: 100%;
10+
margin: 0 auto;
11+
}
12+
13+
.flow-node-diagram-container .flow-tooltip {
14+
position: absolute;
15+
background: var(--color-interface-softest);
16+
max-width: 260px;
17+
border: 1px solid var(--color-interface-soft);
18+
border-radius: var(--rounded-xsmall);
19+
padding: var(--spacing-xsmall);
20+
font-size: var(--font-size-small);
21+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
22+
color: var(--color-interface-strong);
23+
}
24+
25+
.flow-node-diagram-container svg {
26+
max-width: 100%;
27+
height: auto;
28+
min-height: 50px;
29+
}
30+
31+
.flow-node-diagram-container .loadingContainer {
32+
position: absolute;
33+
z-index: 0;
34+
top: 0;
35+
left: 0;
36+
right: 0;
37+
bottom: 0;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
background: rgba(255, 255, 255, .75);
42+
}
43+
44+
.flow-node-diagram-container .loadingContainer h3 {
45+
margin: 0;
46+
}
47+
48+
.flow-node-diagram-container .fade-enter-from,
49+
.flow-node-diagram-container .fade-leave-to {
50+
opacity: 0;
51+
}
52+
53+
.flow-node-diagram-container .fade-enter-active,
54+
.flow-node-diagram-container .fade-leave-active {
55+
transition: opacity .2s ease-in-out;
56+
}
57+
58+
.step-flow-svg .edge:hover {
59+
fill: rgba(170, 170, 170, 0.8);
60+
}
61+
62+
.step-flow-svg .edge {
63+
opacity: 0;
64+
transform-origin: left center;
65+
animation: flow-edges 0.25s ease-in-out forwards;
66+
}
67+
68+
.step-flow-svg .edge.level-2 {
69+
animation-delay: 0.25s;
70+
}
71+
72+
.step-flow-svg .edge.level-3 {
73+
animation-delay: .5s;
74+
}
75+
76+
.step-flow-svg .edge.level-4 {
77+
animation-delay: .75s;
78+
}
79+
80+
.step-flow-svg .edge.level-5 {
81+
animation-delay: 1s;
82+
}
83+
84+
.step-flow-svg .edge.level-6 {
85+
animation-delay: 1.25s;
86+
}
87+
88+
@keyframes flow-edges {
89+
0% {
90+
opacity: 0;
91+
-webkit-clip-path: inset(0 100% 0 0);
92+
clip-path: inset(0 100% 0 0);
93+
}
94+
95+
100% {
96+
opacity: 1;
97+
-webkit-clip-path: inset(0 0 0 0);
98+
clip-path: inset(0 0 0 0);
99+
}
100+
}
101+
102+
.flow-legend {
103+
display: flex;
104+
flex-wrap: wrap;
105+
justify-content: center;
106+
margin: 20px auto 0;
107+
gap: 12px;
108+
width: 100%;
109+
}
110+
111+
.flow-key {
112+
display: inline-flex;
113+
align-items: center;
114+
font-size: 12px;
115+
line-height: 1.1;
116+
}
117+
118+
.flow-key .color {
119+
width: 18px;
120+
height: 18px;
121+
margin-right: 4px;
122+
border-radius: 3px;
123+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
124+
}

‎RockWeb/Styles/styles-v2/_core.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
@import 'rock-components/structured-editor';
141141
@import 'rock-components/drag-pallet';
142142
@import 'rock-components/_monaco-editor';
143+
@import 'rock-components/sankey';
143144

144145
/* ===================== BLOCK =================== */
145146
@import 'blocks/blocks-core'; // Fully Format. There are Some hard coded value.

‎RockWeb/Styles/styles-v2/rock-components/_sankey.scss‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
2+
3+
// Sankey Diagram Styles
4+
// ================================
5+
6+
.flow-node-diagram-container {
7+
position: relative;
8+
width: max-content;
9+
max-width: 100%;
10+
margin: 0 auto;
11+
}
12+
13+
.flow-node-diagram-container .flow-tooltip {
14+
position: absolute;
15+
background: var(--color-interface-softest);
16+
max-width: 260px;
17+
border: 1px solid var(--color-interface-soft);
18+
border-radius: var(--rounded-xsmall);
19+
padding: var(--spacing-xsmall);
20+
font-size: var(--font-size-small);
21+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
22+
color: var(--color-interface-strong);
23+
}
24+
25+
.flow-node-diagram-container svg {
26+
max-width: 100%;
27+
height: auto;
28+
min-height: 50px;
29+
}
30+
31+
.flow-node-diagram-container .loadingContainer {
32+
position: absolute;
33+
z-index: 0;
34+
top: 0;
35+
left: 0;
36+
right: 0;
37+
bottom: 0;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
background: rgba(255, 255, 255, .75);
42+
}
43+
44+
.flow-node-diagram-container .loadingContainer h3 {
45+
margin: 0;
46+
}
47+
48+
.flow-node-diagram-container .fade-enter-from,
49+
.flow-node-diagram-container .fade-leave-to {
50+
opacity: 0;
51+
}
52+
53+
.flow-node-diagram-container .fade-enter-active,
54+
.flow-node-diagram-container .fade-leave-active {
55+
transition: opacity .2s ease-in-out;
56+
}
57+
58+
.step-flow-svg .edge:hover {
59+
fill: rgba(170, 170, 170, 0.8);
60+
}
61+
62+
.step-flow-svg .edge {
63+
opacity: 0;
64+
transform-origin: left center;
65+
animation: flow-edges 0.25s ease-in-out forwards;
66+
}
67+
68+
.step-flow-svg .edge.level-2 {
69+
animation-delay: 0.25s;
70+
}
71+
72+
.step-flow-svg .edge.level-3 {
73+
animation-delay: .5s;
74+
}
75+
76+
.step-flow-svg .edge.level-4 {
77+
animation-delay: .75s;
78+
}
79+
80+
.step-flow-svg .edge.level-5 {
81+
animation-delay: 1s;
82+
}
83+
84+
.step-flow-svg .edge.level-6 {
85+
animation-delay: 1.25s;
86+
}
87+
88+
@keyframes flow-edges {
89+
0% {
90+
opacity: 0;
91+
-webkit-clip-path: inset(0 100% 0 0);
92+
clip-path: inset(0 100% 0 0);
93+
}
94+
95+
100% {
96+
opacity: 1;
97+
-webkit-clip-path: inset(0 0 0 0);
98+
clip-path: inset(0 0 0 0);
99+
}
100+
}
101+
102+
.flow-legend {
103+
display: flex;
104+
flex-wrap: wrap;
105+
justify-content: center;
106+
margin: 20px auto 0;
107+
gap: 12px;
108+
width: 100%;
109+
}
110+
111+
.flow-key {
112+
display: inline-flex;
113+
align-items: center;
114+
font-size: 12px;
115+
line-height: 1.1;
116+
}
117+
118+
.flow-key .color {
119+
width: 18px;
120+
height: 18px;
121+
margin-right: 4px;
122+
border-radius: 3px;
123+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
124+
}

0 commit comments

Comments
 (0)