Skip to content

Commit

Permalink
Support 2 fold and 3 fold large icons
Browse files Browse the repository at this point in the history
  • Loading branch information
zhx828 committed Oct 14, 2024
1 parent 21d2662 commit 574d5f3
Show file tree
Hide file tree
Showing 6 changed files with 288 additions and 95 deletions.
140 changes: 139 additions & 1 deletion dist/oncokb.css

Large diffs are not rendered by default.

41 changes: 41 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,47 @@ <h3>Icons</h3>
<i class="oncokb icon level-Px2"></i>
<i class="oncokb icon level-Px3"></i>
</div>
<div style="display: flex; flex-direction: row">
<i class="oncokb icon s2 oncogenic"></i>
<i class="oncokb icon s2 likely-oncogenic"></i>
<i class="oncokb icon s2 resistance"></i>
<i class="oncokb icon s2 neutral"></i>
<i class="oncokb icon s2 likely-neutral"></i>
<i class="oncokb icon s2 inconclusive"></i>
<i class="oncokb icon s2 vus"></i>
<i class="oncokb icon s2 unknown"></i>
</div>
<div style="display: flex; flex-direction: row">
<i class="oncokb icon s2 level-1"></i>
<i class="oncokb icon s2 level-2"></i>
<i class="oncokb icon s2 level-3"></i>
<i class="oncokb icon s2 level-4"></i>
</div>
<div style="display: flex; flex-direction: row">
<i class="oncokb icon s2 level-R1"></i>
<i class="oncokb icon s2 level-R2"></i>
<i class="oncokb icon s2 level-R3"></i>
</div>
<div style="display: flex; flex-direction: row">
<i class="oncokb icon s2 level-Dx1"></i>
<i class="oncokb icon s2 level-Dx2"></i>
<i class="oncokb icon s2 level-Dx3"></i>
</div>
<div style="display: flex; flex-direction: row">
<i class="oncokb icon s2 level-Px1"></i>
<i class="oncokb icon s2 level-Px2"></i>
<i class="oncokb icon s2 level-Px3"></i>
</div>
<div style="display: flex; flex-direction: row">
<i class="oncokb icon s3 oncogenic"></i>
<i class="oncokb icon s3 likely-oncogenic"></i>
<i class="oncokb icon s3 resistance"></i>
<i class="oncokb icon s3 neutral"></i>
<i class="oncokb icon s3 likely-neutral"></i>
<i class="oncokb icon s3 inconclusive"></i>
<i class="oncokb icon s3 vus"></i>
<i class="oncokb icon s3 unknown"></i>
</div>
<h3>Annotation Icons</h3>
<div style="display: flex; flex-direction: row">
<i class="oncokb annotation-icon oncogenic no-level"></i>
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

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

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "oncokb-styles",
"version": "1.5.0",
"version": "1.6.0",
"description": "OncoKB Styles",
"main": "dist/css/oncokb.css",
"keywords": [
Expand Down
106 changes: 99 additions & 7 deletions scss/_mixins.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,104 @@
@mixin icon-background-position($x, $y) {
background-position-x: -(13px + ($x - 1) * 25px);
background-position-y: -(19px + ($y - 1) * 30px);
@mixin icon-background-position($x, $y, $scale:1) {
background-position-x: -(13px + ($x - 1) * 25px) * $scale;
background-position-y: -(19px + ($y - 1) * 30px) * $scale;
}

@mixin annotation-icon-background-position-x($x) {
background-position-x: -(9px + ($x - 1) * 30px);
@mixin annotation-icon-background-position-x($x, $scale:1) {
background-position-x: -(9px + ($x - 1) * 30px) * $scale;
}

@mixin annotation-icon-background-position-y($y) {
background-position-y: -(9px + ($y - 1) * 30px);
@mixin annotation-icon-background-position-y($y, $scale:1) {
background-position-y: -(9px + ($y - 1) * 30px) * $scale;
}

@mixin icon-size($scale:1) {
background-image: url('images/v4/icons.png');
width: 18px * $scale;
height: 18px * $scale;
flex-shrink: 0;
line-height: 18px * $scale;
// background size is the same of corresponding to the width of svg file
background-size: 170px * $scale;
margin: 0 3px;
display: block;

&.oncogenic, &.likely-oncogenic, &.resistance {
@include icon-background-position(1, 1, $scale);
}

&.neutral, &.likely-neutral {
@include icon-background-position(2, 1, $scale);
}

&.inconclusive {
@include icon-background-position(3, 1, $scale);
}

&.vus {
@include icon-background-position(4, 1, $scale);
}

&.unknown {
@include icon-background-position(5, 1, $scale);
}

&.level-1 {
@include icon-background-position(1, 2, $scale);
}

&.level-2 {
@include icon-background-position(2, 2, $scale);
}

&.level-3 {
@include icon-background-position(3, 2, $scale);
}

&.level-3A {
@include icon-background-position(4, 2, $scale);
}

&.level-3B {
@include icon-background-position(5, 2, $scale);
}

&.level-4 {
@include icon-background-position(6, 2, $scale);
}

&.level-R1 {
@include icon-background-position(1, 3, $scale);
}

&.level-R2 {
@include icon-background-position(2, 3, $scale);
}

&.level-R3 {
@include icon-background-position(3, 3, $scale);
}

&.level-Dx1 {
@include icon-background-position(1, 4, $scale);
}

&.level-Dx2 {
@include icon-background-position(2, 4, $scale);
}

&.level-Dx3 {
@include icon-background-position(3, 4, $scale);
}

&.level-Px1 {
@include icon-background-position(1, 5, $scale);
}

&.level-Px2 {
@include icon-background-position(2, 5, $scale);
}

&.level-Px3 {
@include icon-background-position(3, 5, $scale);
}
}
92 changes: 7 additions & 85 deletions scss/oncokb.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,94 +85,16 @@
}

&.icon {
background-image: url('images/v4/icons.png');
width: 18px;
height: 18px;
flex-shrink: 0;
line-height: 18px;
// background size is the same of corresponding to the width of svg file
background-size: 170px;
margin: 0 3px;
display: block;

&.oncogenic, &.likely-oncogenic, &.resistance {
@include icon-background-position(1, 1);
}

&.neutral, &.likely-neutral{
@include icon-background-position(2, 1);
}

&.inconclusive {
@include icon-background-position(3, 1);
}

&.vus {
@include icon-background-position(4, 1);
}

&.unknown {
@include icon-background-position(5, 1);
}

&.level-1 {
@include icon-background-position(1, 2);
}

&.level-2 {
@include icon-background-position(2, 2);
}

&.level-3 {
@include icon-background-position(3, 2);
}

&.level-3A {
@include icon-background-position(4, 2);
}

&.level-3B {
@include icon-background-position(5, 2);
}

&.level-4 {
@include icon-background-position(6, 2);
}

&.level-R1 {
@include icon-background-position(1, 3);
}

&.level-R2 {
@include icon-background-position(2, 3);
}

&.level-R3 {
@include icon-background-position(3, 3);
}

&.level-Dx1 {
@include icon-background-position(1, 4);
}

&.level-Dx2 {
@include icon-background-position(2, 4);
}

&.level-Dx3 {
@include icon-background-position(3, 4);
}

&.level-Px1 {
@include icon-background-position(1, 5);
}
@include icon-size();

&.level-Px2 {
@include icon-background-position(2, 5);
// Scale for 2x
&.s2 {
@include icon-size(2);
}

&.level-Px3 {
@include icon-background-position(3, 5);
// Scale for 3x
&.s3 {
@include icon-size(3);
}
}

Expand Down

0 comments on commit 574d5f3

Please sign in to comment.