Skip to content

Commit

Permalink
Converted the CSS to SCSS.
Browse files Browse the repository at this point in the history
This is a small change and might not be completely necessary, but it
was a chance to get used to using SCSS.
  • Loading branch information
hkelly93 committed Jul 19, 2016
1 parent ef99943 commit 5034135
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 65 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.idea/*
*.iml
node_modules/*
/.idea/
/src/.sass-cache/*
118 changes: 54 additions & 64 deletions src/RelationshipGraph.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

90 changes: 90 additions & 0 deletions src/RelationshipGraph.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
$font-stack: Helvetica, sans-serif;
$tooltip-gray: #323232;

.relationshipGraph-block {
stroke: #F7F7F7;
stroke-width: 1px;
pointer-events: all;
}

.relationshipGraph-block:hover {
cursor: pointer;
}

.relationshipGraph-Text {
font-family: $font-stack;
font-size: 10pt;
fill: $tooltip-gray;
}

.relationshipGraph-measurement {
font-family: $font-stack;
font-size: 13px;
position: absolute;
width: auto;
height: auto;
left: -100%;
top: -100%;
}

.relationshipGraph-tip {
font-weight: bold;
font-family: $font-stack;
font-size: 9pt;
line-height: 1;
padding: 12px;
background: $tooltip-gray;
color: #e7e7e7;
border-radius: 6px;
z-index: 50;
max-width: 350px;
max-height: 300px;
}

.relationshipGraph-tip:after {
display: inline-block;
font-size: 15px;
width: 100%;
height: 5px;
color: $tooltip-gray;
content: "\25B6";
position: absolute;
}

.relationshipGraph-tip.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 12px;
text-align: center;
}

.relationshipGraph-tip.e {
margin-left: 15px;
}

.relationshipGraph-tip.e:after {
content: "\25C0";
margin: -2px 0 0 0;
top: 50%;
left: -11px;
}

.relationshipGraph-tip.s {
margin-top: 15px;
}

.relationshipGraph-tip.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -12px;
left: 12px;
text-align: center;
}

.relationshipGraph-tip.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}

0 comments on commit 5034135

Please sign in to comment.