-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
merge igv-widgets source into project
- Loading branch information
Showing
33 changed files
with
3,909 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,366 @@ | ||
| $igv-flw-font-face: 'Open Sans', sans-serif; | ||
| $igv-flw-font-size: .875rem; | ||
| $igv-flw-light-grey-color: #bfbfbf; | ||
| $igv-flw-grey-color: #7F7F7F; | ||
| $igv-flw-dark-grey-color: #373737; | ||
|
|
||
| $igv-flw-label-font-color: #242424; | ||
| $igv-flw-outline-grey-color: #7c7c7c; | ||
|
|
||
| $igv-flw-modal-button-dark-color: #6c757c; | ||
|
|
||
| $igv-flw-button-ok-color: #5ea4e0; | ||
| $igv-flw-button-ok-hover-color: #3b5c7f; | ||
| $igv-flw-button-cancel-color: #c4c4c4; | ||
| $igv-flw-button-cancel-hover-color: #7f7f7f; | ||
|
|
||
| // helga dimensions | ||
| $igv-flw-container-width: 720px; | ||
| $igv-flw-container-height: 400px; | ||
|
|
||
| $igv-flw-button-width: 75px; | ||
| $igv-flw-button-height: 28px; | ||
|
|
||
| $igv-flw-input-row-height: 36px; | ||
|
|
||
| $igv-flw-border-radius: 2px; | ||
|
|
||
| @mixin igv-flw-input { | ||
|
|
||
| input { | ||
| display: block; | ||
| height: 100%; | ||
| width: 100%; | ||
|
|
||
| padding-left: 4px; | ||
|
|
||
| color: $igv-flw-dark-grey-color; | ||
| font-size: $igv-flw-font-size; | ||
| font-family: $igv-flw-font-face; | ||
| font-weight: 400; | ||
| text-align: left; | ||
|
|
||
| outline: none; | ||
|
|
||
| border-style: solid; | ||
| border-width: thin; | ||
| border-color: #dee2e6; | ||
| border-radius: .25rem; | ||
|
|
||
| background-color: white; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .igv-file-load-widget-container { | ||
|
|
||
| position: relative; | ||
| border-color: transparent; | ||
| width:100%; | ||
|
|
||
| //padding-bottom: 20px; | ||
|
|
||
| color: $igv-flw-grey-color; | ||
| font-family: $igv-flw-font-face; | ||
| font-size: $igv-flw-font-size; | ||
| font-weight: 200; | ||
|
|
||
| border-style: solid; | ||
| border-width: thin; | ||
|
|
||
| background-color: white; | ||
|
|
||
| display: flex; | ||
| flex-flow: column; | ||
| flex-wrap: nowrap; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
|
|
||
| // header | ||
| .igv-file-load-widget-header { | ||
| width: 100%; | ||
| height: 24px; | ||
|
|
||
| background-color: $igv-flw-light-grey-color; | ||
|
|
||
| display: flex; | ||
| flex-flow: row; | ||
| flex-wrap: nowrap; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
|
|
||
| // close button container | ||
| div { | ||
| height: 24px; | ||
| width: 16px; | ||
| margin-right: 6px; | ||
|
|
||
| text-align: center; | ||
| line-height: 24px; | ||
|
|
||
| color: $igv-flw-dark-grey-color; | ||
| } | ||
|
|
||
| div:hover { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // input container | ||
| .igv-flw-input-container { | ||
|
|
||
| width: 95%; | ||
|
|
||
| margin-top: 24px; | ||
| margin-bottom: 0; | ||
|
|
||
| display: flex; | ||
| flex-flow: column; | ||
| flex-wrap: nowrap; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
|
|
||
| // input row | ||
| .igv-flw-input-row { | ||
|
|
||
| height: $igv-flw-input-row-height; | ||
| width: 100%; | ||
|
|
||
| margin-top: 8px; | ||
|
|
||
| padding-top: 4px; | ||
| padding-bottom: 4px; | ||
|
|
||
| display: flex; | ||
| flex-flow: row; | ||
| flex-wrap: nowrap; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
|
|
||
| border-color: white; | ||
| border-style: solid; | ||
| border-width: thin; | ||
| border-radius: calc(2 * #{$igv-flw-border-radius}); | ||
|
|
||
| // label | ||
| .igv-flw-input-label { | ||
|
|
||
| //color: rgba(0, 0, 0, 0.76); | ||
| color: $igv-flw-modal-button-dark-color; | ||
| font-weight: 400; | ||
|
|
||
| //margin-left: 8px; | ||
| //width: 128px; | ||
| width: 136px; | ||
| height: $igv-flw-input-row-height; | ||
|
|
||
| line-height: $igv-flw-input-row-height; | ||
| text-align: left; | ||
| } | ||
|
|
||
| // url input | ||
| @include igv-flw-input; | ||
| input { | ||
| height: calc(#{$igv-flw-input-row-height} - 12px); | ||
| } | ||
|
|
||
| // local file chooser | ||
| .igv-flw-file-chooser-container { | ||
| display: flex; | ||
| flex-flow: row; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| width: 130px; | ||
| height: calc(#{$igv-flw-input-row-height} - 8px); | ||
|
|
||
| border-color: $igv-flw-modal-button-dark-color; | ||
| border-style: solid; | ||
| border-width: thin; | ||
| border-radius: calc(2 * #{$igv-flw-border-radius}); | ||
|
|
||
| background-color: white; | ||
|
|
||
| label { | ||
| display: block; | ||
| margin: unset; | ||
| } | ||
|
|
||
| label.igv-flw-label-color { | ||
| color: $igv-flw-modal-button-dark-color; | ||
| } | ||
|
|
||
| label.igv-flw-label-color-hover { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| input.igv-flw-file-chooser-input { | ||
| width: 0.1px; | ||
| height: 0.1px; | ||
| opacity: 0; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .igv-flw-file-chooser-container:hover { | ||
| cursor: pointer; | ||
| background-color: $igv-flw-modal-button-dark-color; | ||
| } | ||
|
|
||
| // button indicating drag/drop capability | ||
| .igv-flw-drag-drop-target { | ||
|
|
||
| cursor: default; | ||
|
|
||
| margin-left: 8px; | ||
|
|
||
| width: 120px; | ||
| height: calc(#{$igv-flw-input-row-height} - 8px); | ||
|
|
||
| line-height: calc(#{$igv-flw-input-row-height} - 8px); | ||
| text-align: center; | ||
|
|
||
| border-color: $igv-flw-grey-color; | ||
| border-style: dashed; | ||
| border-width: thin; | ||
| border-radius: calc(2 * #{$igv-flw-border-radius}); | ||
|
|
||
| //background-color: rgba(173, 255, 47, 0.47); | ||
| } | ||
|
|
||
| // name of local file | ||
| .igv-flw-local-file-name-container { | ||
|
|
||
| max-width: 400px; | ||
| height: $igv-flw-input-row-height; | ||
|
|
||
| color: $igv-flw-dark-grey-color; | ||
| line-height: $igv-flw-input-row-height; | ||
| text-align: left; | ||
| font-weight: 400; | ||
|
|
||
| margin-left: 8px; | ||
|
|
||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
|
|
||
| //background-color: rgba(128, 128, 128, 0.25); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .igv-flw-input-row-hover-state { | ||
| background-color: #efefef; | ||
| border-color: $igv-flw-grey-color; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .igv-flw-error-message-container { | ||
|
|
||
| margin-top: 8px; | ||
|
|
||
| width: 95%; | ||
| height: 24px; | ||
|
|
||
| padding-left: 8px; | ||
|
|
||
| color: white; | ||
| font-size: $igv-flw-font-size; | ||
|
|
||
| background-color: rgba(59, 92, 127, 0.5); | ||
|
|
||
| display: flex; | ||
| flex-flow: row; | ||
| flex-wrap: nowrap; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
|
|
||
| // message container | ||
| div:first-child.igv-flw-error-message { | ||
| height: 24px; | ||
| width: 600px; | ||
|
|
||
| font-style: italic; | ||
| line-height: 24px; | ||
| text-align: left; | ||
|
|
||
| //background-color: coral; | ||
| } | ||
|
|
||
| // close button container | ||
| div:last-child { | ||
| height: 24px; | ||
| width: 16px; | ||
| margin-right: 6px; | ||
|
|
||
| text-align: center; | ||
| line-height: 24px; | ||
|
|
||
| color: $igv-flw-dark-grey-color; | ||
| } | ||
|
|
||
| div:hover { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // ok | cancel | ||
| .igv-file-load-widget-ok-cancel { | ||
|
|
||
| width: 100%; | ||
| height: $igv-flw-button-height; | ||
| margin-top: 32px; | ||
|
|
||
| color: white; | ||
| font-size: $igv-flw-font-size; | ||
|
|
||
| display: flex; | ||
| flex-flow: row; | ||
| flex-wrap: nowrap; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
|
|
||
| div { | ||
| width: $igv-flw-button-width; | ||
| height: $igv-flw-button-height; | ||
|
|
||
| line-height: $igv-flw-button-height; | ||
| text-align: center; | ||
|
|
||
| border-color: transparent; | ||
| border-style: solid; | ||
| border-width: thin; | ||
| border-radius: $igv-flw-border-radius; | ||
|
|
||
| margin-right: 16px; | ||
| } | ||
|
|
||
| div:first-child { | ||
| margin-right: 22px; | ||
| background-color: $igv-flw-button-cancel-color; | ||
| } | ||
|
|
||
| div:first-child:hover { | ||
| cursor: pointer; | ||
| background-color: $igv-flw-button-cancel-hover-color; | ||
| } | ||
|
|
||
| div:last-child { | ||
| background-color: $igv-flw-button-ok-color; | ||
| } | ||
|
|
||
| div:last-child:hover { | ||
| cursor: pointer; | ||
| background-color: $igv-flw-button-ok-hover-color; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } |
Oops, something went wrong.