Skip to content

Commit

Permalink
Merge branch 'master' into cnvpytor_dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@arpanda
arpanda authored Oct 18, 2023
2 parents 8cdc14c + 2a96b2f commit 5c75c55
Show file tree
Hide file tree
Showing 73 changed files with 3,540 additions and 1,270 deletions.
246 changes: 206 additions & 40 deletions css/_navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ $igv-navbar-button-border-radius: 6px;

$igv-navbar-locus-search-height: $igv-navbar-height - 10px;

$igv-navbar-icon-button-size: 24px;

$igv-save-image-y-origin: 1.5 * $igv-navbar-icon-button-size;
$igv-save-svg-image-x-origin: -3*$igv-navbar-icon-button-size/4;
$igv-save-png-image-x-origin: 3*$igv-navbar-icon-button-size/4;

.igv-navbar {

display: flex;
Expand All @@ -21,8 +27,7 @@ $igv-navbar-locus-search-height: $igv-navbar-height - 10px;
align-items: center;

box-sizing: border-box;
width: 100%
;
width: 100%;
color: #444;
font-size: $igv-navbar-font-size;
font-family: $igv-default-font-face;
Expand Down Expand Up @@ -197,33 +202,24 @@ $igv-navbar-locus-search-height: $igv-navbar-height - 10px;
justify-content: space-between;
align-items: center;

height: $igv-navbar-height;
line-height: $igv-navbar-height;

.igv-navbar-toggle-button-container {

display: flex;
flex-flow: row;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: flex-end;
align-items: center;
}

height: 100%;

div {
margin-left: 0;
margin-right: 4px;
}
.igv-navbar-toggle-button-container-hidden {

div:last-child {
margin-left: 0;
margin-right: 0;
}
display: flex;
flex-flow: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;

}
height: 100%;

.igv-navbar-toggle-button-container-750 {
display: none;
}

.igv-zoom-widget {
Expand All @@ -232,8 +228,8 @@ $igv-navbar-locus-search-height: $igv-navbar-height - 10px;

font-size: 18px;

height: $igv-navbar-height;
line-height: $igv-navbar-height;
//height: $igv-navbar-height;
//line-height: $igv-navbar-height;

margin-left: 8px;

Expand All @@ -254,20 +250,18 @@ $igv-navbar-locus-search-height: $igv-navbar-height - 10px;

// zoom-out
div:first-child {
height: 24px;
width: 24px;
height: 20px;
width: 20px;
margin-left: unset;
margin-right: 8px;
//background-color: magenta;
margin-right: 4px;
}

// zoom-in
div:last-child {
height: 24px;
width: 24px;
margin-left: 8px;
height: 20px;
width: 20px;
margin-left: 4px;
margin-right: unset;
//background-color: lime;
}

div:nth-child(even) {
Expand Down Expand Up @@ -306,26 +300,26 @@ $igv-navbar-locus-search-height: $igv-navbar-height - 10px;
justify-content: flex-end;
align-items: center;


// container: zoom-out | zoom-slider | zoom-in
div {
cursor: pointer;
margin-left: unset;
margin-right: unset;
}

// "-" zoom button
// zoom-out
div:first-child {
height: 24px;
width: 24px;
height: 20px;
width: 20px;
margin-left: unset;
margin-right: 8px;
margin-right: 4px;
}

// "+" zoom button
// zoom-in
div:last-child {
height: 24px;
width: 24px;
margin-left: 8px;
height: 20px;
width: 20px;
margin-left: 4px;
margin-right: unset;
}

Expand Down Expand Up @@ -387,11 +381,183 @@ $igv-navbar-locus-search-height: $igv-navbar-height - 10px;
border-radius: $igv-navbar-button-border-radius;
}

.igv-navbar-button:hover {
cursor: pointer;
}

.igv-navbar-button-clicked {
color: white;
background-color: $igv-navbar-toggle-dark-dark;
}

.igv-navbar-button:hover {
.igv-navbar-icon-button {
cursor: pointer;
//z-index: 2048;

position: relative;
width: $igv-navbar-icon-button-size;
height: $igv-navbar-icon-button-size;
margin-left: 4px;
margin-right: 4px;
border: none;

background-size: contain;
background-repeat: no-repeat;
background-position: center;

>div:first-child {

z-index: 512;

position: absolute;
top: $igv-save-image-y-origin;
left: $igv-save-svg-image-x-origin;

width: $igv-navbar-icon-button-size;
height: $igv-navbar-icon-button-size;

border: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

>div:last-child {

z-index: 512;

position: absolute;
top: $igv-save-image-y-origin;
left: $igv-save-png-image-x-origin;

width: $igv-navbar-icon-button-size;
height: $igv-navbar-icon-button-size;

border: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}

.igv-navbar-text-button {
cursor: pointer;
//z-index: 2049;

position: relative;
//width: 90px;
//height: 20px;
margin-left: 2px;
margin-right: 2px;
border: none;

// to position svg properly
display: flex;
justify-content: center;
align-items: center;

>div:nth-child(2) {

z-index: 512;

position: absolute;
top: $igv-save-image-y-origin;
left: 0;

width: 38px;
height: 18px;

border: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

>div:nth-child(3) {

z-index: 512;

position: absolute;
top: $igv-save-image-y-origin;
left: 42px;

width: 38px;
height: 18px;

border: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

}

#igv-text-button-label {
text-anchor: middle;
dominant-baseline: middle;
}

.igv-navbar-text-button-svg-inactive {
rect {
stroke: #737373;
fill: white;
}
text {
fill: #737373;
}
}

.igv-navbar-text-button-svg-hover {
rect {
stroke: #737373;
fill: #737373;
}
text {
fill: white;
}

}

#igv-save-svg-group {
rect {
stroke: #737373;
fill: white;
}
text {
fill: #737373;
}

}

#igv-save-svg-group:hover {
rect {
stroke: #737373;
fill: #737373;
}
text {
fill: white;
}

}

#igv-save-png-group {
rect {
stroke: #737373;
fill: white;
}
text {
fill: #737373;
}

}

#igv-save-png-group:hover {
rect {
stroke: #737373;
fill: #737373;
}
text {
fill: white;
}

}
Loading

0 comments on commit 5c75c55

Please sign in to comment.