Skip to content
Snippets Groups Projects
Commit ab0f5920 authored by AndiMajore's avatar AndiMajore
Browse files

moved stylesheets to own folder

parent 0be60f28
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 406 additions and 335 deletions
angular.json
+ 4
− 3
View file @ ab0f5920
......@@ -33,8 +33,8 @@
"src/assets"
],
"styles": [
"src/theme-styles.scss",
"src/styles.scss"
"src/stylesheets/theme-styles.scss",
"src/stylesheets/styles.scss"
],
"scripts": [],
"crossOrigin": "use-credentials",
......@@ -199,7 +199,8 @@
],
"styles": [
"node_modules/animate.css/animate.min.css",
"src/styles.scss"
"src/stylesheets/styles.scss",
"src/stylesheets/theme-styles.scss"
],
"scripts": []
}
......
drugstone-test.html
+ 1
− 1
View file @ ab0f5920
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="src/theme.css">
<link rel="stylesheet" type="text/css" href="src/stylesheets/theme.css">
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.9-rc3/uhh/drugsTone.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.9-rc3/uhh/styles.css">-->
<link rel="stylesheet" type="text/css" href="./drugsTone-build/styles.css">
......
src/app/components/analysis-panel/analysis-panel.component.html
+ 39
− 31
View file @ ab0f5920
......@@ -143,7 +143,7 @@
<ng-container *ngIf="myConfig.showFooterButtonScreenshot">
<button class="button is-primary is-rounded has-tooltip network-footer-toolbar-element"
pTooltip="Take a screenshot of the current network." tooltipPosition="top" (click)="toImage()">
pTooltip="Take a screenshot of the current network." tooltipStyleClass="drgstn" tooltipPosition="top" (click)="toImage()">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
......@@ -156,7 +156,7 @@
<div class="field network-footer-toolbar-element">
<p class="control footer-buttons">
<a [href]="graphmlLink()" class="button is-success is-rounded has-tooltip"
pTooltip="Export this network as .graphml file." tooltipPosition="top">
pTooltip="Export this network as .graphml file." tooltipStyleClass="drgstn" tooltipPosition="top">
<span class="icon">
<i class="fas fa-download" aria-hidden="true"></i>
</span>
......@@ -181,12 +181,13 @@
<!-- </p>-->
<!-- </div>-->
<div class="footer-buttons dropdown is-up network-footer-toolbar-element" [class.is-active]="expressionExpanded">
<div class="footer-buttons dropdown is-up network-footer-toolbar-element"
[class.is-active]="expressionExpanded">
<div class="dropdown-trigger">
<button (click)="expressionExpanded=!expressionExpanded"
class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
aria-haspopup="true" aria-controls="dropdown-menu" [ngClass]="{'button-small':smallStyle}"
pTooltip="Tissue expression data is provided by the GTEx project." tooltipPosition="top"
pTooltip="Tissue expression data is provided by the GTEx project." tooltipStyleClass="drgstn" tooltipPosition="top"
>
<div [ngClass]="{'text-small':smallStyle}">
<span *ngIf="!selectedTissue">Tissue</span>
......@@ -224,7 +225,8 @@
[smallStyle]="smallStyle"
[value]="highlightSeeds" (valueChange)="updateHighlightSeeds($event)"></app-toggle>
<app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons network-footer-toolbar-element" textOn="Drugs On" textOff="Off"
<app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons network-footer-toolbar-element"
textOn="Drugs On" textOff="Off"
tooltipOn="Display adjacent drugs ON."
tooltipOff="Display adjacent drugs OFF."
[smallStyle]="smallStyle"
......@@ -238,10 +240,11 @@
</div>
</footer>
</div>
<div class="content tab-content scrollable table-tab" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
<div class="content tab-content scrollable table-tab" *ngIf="task && task.info.done"
[class.is-visible]="tab === 'table'">
<div class="field has-addons" *ngIf="tableHasScores && task.info.algorithm !== 'proximity'">
<p class="control">
<button class="button is-rounded has-tooltip" pTooltip="Normalize the scores" tooltipPosition="top"
<button class="button is-rounded has-tooltip" pTooltip="Normalize the scores" tooltipStyleClass="drgstn" tooltipPosition="top"
[class.is-primary]="tableNormalize" (click)="toggleNormalization(true)">
<span class="icon is-small">
<i class="fa fa-ruler-vertical"></i>
......@@ -250,7 +253,8 @@
</button>
</p>
<p class="control">
<button class="button is-rounded has-tooltip" pTooltip="Disable normalization of the scores." tooltipPosition="top"
<button class="button is-rounded has-tooltip" pTooltip="Disable normalization of the scores." tooltipStyleClass="drgstn"
tooltipPosition="top"
[class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
<span>Off</span>
</button>
......@@ -270,7 +274,8 @@
<span>Download</span>
</a>
</div>
<app-drug-table [tableDrugs]="tableDrugs" [tableDrugScoreTooltip]="tableDrugScoreTooltip" [tableHasScores]="tableHasScores"></app-drug-table>
<app-drug-table [tableDrugs]="tableDrugs" [tableDrugScoreTooltip]="tableDrugScoreTooltip"
[tableHasScores]="tableHasScores"></app-drug-table>
<div *ngIf="tableProteins.length > 0" class="table-header">
<h4 class="is-4">
<span class="icon"><i class="fa fa-dna"></i></span>
......@@ -281,7 +286,10 @@
<span>Download</span>
</a>
</div>
<app-prot-table [tableHasScores]="tableHasScores" [tableProteins]="tableProteins" [tableProteinScoreTooltip]="tableDrugScoreTooltip" [tableProteinSelection]="tableProteinSelection" [tableSelectedProteins]="tableSelectedProteins"></app-prot-table>
<app-prot-table [tableHasScores]="tableHasScores" [tableProteins]="tableProteins"
[tableProteinScoreTooltip]="tableDrugScoreTooltip"
[tableProteinSelection]="tableProteinSelection"
[tableSelectedProteins]="tableSelectedProteins"></app-prot-table>
</div>
</div>
</div>
......
src/app/components/analysis-panel/analysis-panel.component.scss
+ 2
− 2
View file @ ab0f5920
@import "../../../variables";
@import "src/stylesheets/variables";
.analysis {
position: absolute;
......
src/app/components/analysis-panel/drug-table/drug-table.component.html
+ 1
− 1
View file @ ab0f5920
......@@ -24,7 +24,7 @@
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<button class="button is-light has-tooltip tooltip-button"
[pTooltip]="tableDrugScoreTooltip" tooltipPosition="top">
[pTooltip]="tableDrugScoreTooltip" tooltipStyleClass="drgstn" tooltipPosition="top">
<fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
</button>
<p-sortIcon [field]="'score'"></p-sortIcon>
......
src/app/components/analysis-panel/prot-table/prot-table.component.html
+ 1
− 1
View file @ ab0f5920
......@@ -21,7 +21,7 @@
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<button class="button is-light has-tooltip tooltip-button"
[pTooltip]="tableProteinScoreTooltip" tooltipPosition="top">
[pTooltip]="tableProteinScoreTooltip" tooltipStyleClass="drgstn" tooltipPosition="top">
<fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
</button>
<p-sortIcon [field]="'score'"></p-sortIcon>
......
src/app/components/dataset-tile/dataset-tile.component.html
+ 1
− 1
View file @ ab0f5920
<div class="content">
<ng-select [items]="datasetItems" bindLabel="label" [virtualScroll]="true" class="custom"
placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" pTooltip="Choose the dataset you want to explore." tooltipPosition="top">
placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" pTooltip="Choose the dataset you want to explore." tooltipStyleClass="drgstn" tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
{{item.strains}} <br/>
<small>{{item.datasetNames}}</small>
......
src/app/components/network-legend/network-legend.component.scss
+ 3
− 3
View file @ ab0f5920
@import "~src/variables";
@import "src/stylesheets/variables";
div.legend {
......
src/app/components/query-tile/query-tile.component.html
+ 1
− 1
View file @ ab0f5920
<div class="content">
<ng-select [items]="queryItems" bindLabel="label" bindValue="data" [virtualScroll]="true" class="custom"
placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." tooltipPosition="top">
placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." tooltipStyleClass="drgstn" tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
<p>{{item.data.label}}</p>
</ng-template>
......
src/app/components/task-list/task-list.component.html
+ 1
− 1
View file @ ab0f5920
......@@ -40,7 +40,7 @@
</p>
<progress class="progress is-success" [value]="task.info.progress * 100" max="100"></progress>
</div>
<div *ngIf="task.info.done" (click)="open(task.token)" pTooltip="Show analysis results" tooltipPosition="top">
<div *ngIf="task.info.done" (click)="open(task.token)" pTooltip="Show analysis results" tooltipStyleClass="drgstn" tooltipPosition="top">
<p>
<span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'"
[class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{algorithmNames[task.info.algorithm]}}</span>
......
src/app/components/toggle/toggle.component.html
+ 2
− 2
View file @ ab0f5920
<div class="field has-addons">
<p class="control has-tooltip">
<button class="button is-rounded has-tooltip" [pTooltip]="tooltipOn" tooltipPosition="top" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
<button class="button is-rounded has-tooltip" [pTooltip]="tooltipOn" tooltipStyleClass="drgstn" tooltipPosition="top" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
<span class="icon is-small">
<i class="fa {{iconOn}}"></i>
</span>
......@@ -8,7 +8,7 @@
</button>
</p>
<p class="control">
<button class="button is-rounded has-tooltip" [pTooltip]="tooltipOff" tooltipPosition="top" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
<button class="button is-rounded has-tooltip" [pTooltip]="tooltipOff" tooltipStyleClass="drgstn" tooltipPosition="top" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
<span [ngClass]="{'text-small':smallStyle}">{{textOff}}</span>
<span *ngIf="iconOff" class="icon is-small">
<i class="fa {{iconOff}}"></i>
......
src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html
+ 3
− 3
View file @ ab0f5920
......@@ -37,7 +37,7 @@
</section>
<footer class="modal-card-foot">
<button (click)="addProteins();" class="button is-success is-rounded has-tooltip"
pTooltip="Add all to the selection." tooltipPosition="top"
pTooltip="Add all to the selection." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || !selectedTissue || loading">
<span class="icon">
<i class="fas fa-plus"></i>
......@@ -47,7 +47,7 @@
</span>
</button>
<button (click)="addVisibleProteins();" class="button is-success is-rounded has-tooltip"
pTooltip="Add to selection if they appear in the current network." tooltipPosition="top"
pTooltip="Add to selection if they appear in the current network." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || !selectedTissue || loading">
<span class="icon">
<i class="fas fa-expand"></i>
......@@ -56,7 +56,7 @@
Select proteins ({{proteins.length}})
</span>
</button>
<button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">
<button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipStyleClass="drgstn" tooltipPosition="top">
Close
</button>
</footer>
......
src/app/dialogs/custom-proteins/custom-proteins.component.html
+ 3
− 3
View file @ ab0f5920
......@@ -43,7 +43,7 @@
</section>
<footer class="modal-card-foot">
<button (click)="addProteins();" class="button is-success is-rounded has-tooltip"
pTooltip="Add all to the selection." tooltipPosition="top"
pTooltip="Add all to the selection." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || loading">
<span class="icon">
<i class="fa fa-plus"></i>
......@@ -53,7 +53,7 @@
</span>
</button>
<button (click)="addVisibleProteins();" class="button is-success is-rounded has-tooltip"
pTooltip="Add to selection if they appear in the current network." tooltipPosition="top"
pTooltip="Add to selection if they appear in the current network." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || loading">
<span class="icon">
<i class="fas fa-expand"></i>
......@@ -62,7 +62,7 @@
Select
</span>
</button>
<button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">Close
<button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipStyleClass="drgstn" tooltipPosition="top">Close
</button>
</footer>
</div>
......
src/app/dialogs/launch-analysis/launch-analysis.component.html
+ 2
− 2
View file @ ab0f5920
......@@ -455,7 +455,7 @@
<footer class="modal-card-foot">
<button (click)="startTask(); close()" class="button is-success is-rounded has-tooltip"
pTooltip="Run the analysis." tooltipPosition="top"
pTooltip="Run the analysis." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="!analysis.canLaunchTask()">
<span class="icon">
<i class="fa fa-rocket"></i>
......@@ -464,7 +464,7 @@
Launch
</span>
</button>
<button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">Close
<button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipStyleClass="drgstn" tooltipPosition="top">Close
</button>
</footer>
</div>
......
src/app/pages/explorer-page/explorer-page.component.html
+ 14
− 5
View file @ ab0f5920
......@@ -181,6 +181,7 @@
network-footer-toolbar-element
"
pTooltip="Take a screenshot of the current network."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
......@@ -210,6 +211,7 @@
aria-haspopup="true"
aria-controls="dropdown-menu"
pTooltip="Tissue expression data is provided by the GTEx project."
tooltipStyleClass="drgstn"
tooltipPosition="top"
[ngClass]="{ 'button-small': smallStyle }"
>
......@@ -366,6 +368,7 @@
[disabled]="analysis.isLaunchingQuick()"
class="button is-white is-rounded has-tooltip"
pTooltip="Find drugs for all proteins."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
......@@ -409,8 +412,9 @@
analysis.getCount() === 0 ||
analysis.isLaunchingQuick()
"
class="button is-white is-rounded has-tooltip"
class="button is-white is-rounded"
pTooltip="Find drugs for the selected proteins."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
......@@ -466,6 +470,7 @@
<div
class="control"
pTooltip="Find drug targets for the selected proteins."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<button
......@@ -492,6 +497,7 @@
<div
class="control"
pTooltip="Find drugs for the selected proteins."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<button
......@@ -527,6 +533,7 @@
has-tooltip
"
pTooltip="Use enrichment analysis via g:Profiler (external)."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
......@@ -545,6 +552,7 @@
has-tooltip
"
pTooltip="Use enrichment analysis via g:Profiler (external)."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
......@@ -600,6 +608,7 @@
"
class="card-footer-item text-danger"
pTooltip="Delete all tasks."
tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
......
src/app/pages/explorer-page/explorer-page.component.scss
+ 2
− 1
View file @ ab0f5920
@import "../../../variables";
@import "src/stylesheets/variables";
.quick-find {
.notification {
......@@ -75,3 +75,4 @@
}
src/app/pages/explorer-page/explorer-page.component.ts
+ 0
− 1
View file @ ab0f5920
......@@ -12,7 +12,6 @@ import {
getDrugNodeId,
getWrapperFromNode,
legendContext,
NetworkEdge,
Node,
NodeAttributeMap,
NodeInteraction,
......
src/styles.scss deleted 100644 → 0
+ 0
− 273
View file @ 0be60f28
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import "~bulma/bulma.sass";
@import '~bulma-tooltip';
@import "~animate.css/animate.min";
@import '~primeng/resources/themes/md-dark-deeppurple/theme.css';
@import "~primeng/resources/primeng.min.css";
@import "~primeicons/primeicons.css";
@import "variables";
.fullheight {
height: 100%;
}
.canvas-content {
height: calc(100% - #{$network-footer-height});
z-index: $explorer-network-z;
}
// general network settings, some will be overwritten in analysis
.network-footer-toolbar {
position: absolute;
width: 100%;
bottom: 0;
height: $network-footer-height;
&-inner-container{
width: 100%;
display: inline-flex;
overflow-x: auto;
overflow-y: hidden;
height: $network-footer-inner-container-height;
position: absolute;
bottom: 0;
}
&-element {
position: relative;
margin-top: calc(#{$network-footer-inner-container-height} - #{$network-footer-height} + #{$network-footer-space-button-to-border});
}
.dropdown-menu{
z-index: $explorer-network-toolbar-dropdown-z;
.scroll-area{
height: calc(#{$network-footer-inner-container-height} - #{$network-footer-height});
}
}
}
nav.navbar {
height: 60px;
}
img.menu-icon.is-hoverable.navbar-item.logo {
height: 40px;
width: 125px;
padding: 0;
}
.tissue-dropdown {
padding: 5px;
background-color: rgba(255.0, 255.0, 255.0, 0.85);
.scroll-area {
max-height: 600px;
overflow-y: scroll;
padding-right: 5px;
}
}
div.navbar-menu {
margin-left: 5px;
}
span.icon {
margin-right: 5px;
}
.mb-3 {
margin-bottom: 10px;
}
img.inline {
height: 30px;
align: middle;
}
button.i {
margin-left: 5px;
}
input.checkbox {
margin-left: 15px;
}
div.covex.sidebar {
height: $height;
overflow-y: auto;
overflow-x: hidden;
}
div.covex.bar-left {
float: left;
width: $sidebar-left-width;
max-width: 300px;
min-width: $sidebar-left-min-width;
height: 100%;
}
div.covex.bar-right {
float: left;
width: $sidebar-right-width;
max-width: 450px;
min-width: $sidebar-right-min-width;
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
div.card.bar-small {
margin-bottom: 15px;
word-wrap: break-word;
height: 130px;
}
div.card.bar-medium {
margin-bottom: 15px;
word-wrap: break-word;
height: 170px;
}
div.card.bar-large {
margin-bottom: 15px;
max-height: 600px;
}
div.card-content.overflow {
overflow: auto;
max-height: 350px;
}
div.covex.network {
height: 100%;
float: left;
position: relative;
}
.center-panel {
width: $main-width;
&.leftgone {
width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
}
&.rightgone {
width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
}
&.rightgone.leftgone {
width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
}
}
div.card.network {
width: 100%;
height: $height;
}
div.parent {
position: relative;
}
div.image1 {
position: relative;
}
div.center {
display: flex;
align-items: center;
justify-content: center;
}
div.covex.explorer {
height: #{$height};
margin-left: 10px;
margin-right: 10px;
}
.analysis-view {
height: 100%;
width: 100%;
position: absolute;
margin-top: 0;
z-index: $analysis-view-z;
.canvas-content {
z-index: $analysis-network-z;
}
}
div.field.has-addons.add-remove-toggle {
margin-top: 20px;
}
.fa-spinner {
color: $light-invert;
}
.footer-buttons {
margin-left: 20px;
margin-right: 10px;
}
.toolbar {
padding: 5px;
border-top: 2px solid #d0d0d0;
.field {
margin-bottom: 0;
.control {
margin-bottom: 0;
}
}
}
.p-tooltip-text:before {
content: '';
position: absolute;
display: block;
width: 0;
left: 50%;
bottom: +7px;
border: 6px solid transparent;
border-bottom: 0;
border-top: 6px solid var(--drgstn-tooltip);
transform: translate(-50%, calc(100% + 3px));
}
html, #appWindow {
height: 100%;
}
#appWindow {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
// classes for different screen sizes
.text-small {
font-size: $text-small-font-size;
}
.text-normal{
font-size: $text-normal-font-size;
}
.b-text-small{
font-size: $b-text-small-font-size;
}
.b-text-smaller{
font-size: $b-text-smaller-font-size;
}
.button-small{
padding: $button-small-padding;
}
src/stylesheets/primeng.scss 0 → 100644
+ 62
− 0
View file @ ab0f5920
@import '../../node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css';
@import "../../node_modules/primeng/resources/primeng.min.css";
@import "../../node_modules/primeicons/primeicons.css";
.-datatable .p-sortable-column .p-sortable-column-icon {
color: inherit !important;
}
.p-datatable .p-datatable-tfoot > tr > td, .p-datatable .p-datatable-thead > tr > th {
background-color: var(--drgstn-panel) !important;
border-color: var(--drgstn-border) !important;
color: var(--drgstn-text-primary) !important;
}
.p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column:not(.p-highlight):hover, .p-datatable .p-sortable-column.p-highlight:hover {
background-color: var(--drgstn-panel) !important;
border-color: var(--drgstn-border) !important;
color: var(--drgstn-primary) !important;
}
.p-checkbox .p-checkbox-box {
border-color: var(--drgstn-text-primary) !important;
color: var(--drgstn-text-primary) !important;
background-color: var(--drgstn-panel) !important;
border-radius: 1px !important;
border-style: solid !important;
width: 18px !important;
height: 18px !important;
position: relative !important;
}
.p-datatable .p-datatable-tbody > tr > td, .button.is-light {
border-color: var(--drgstn-border) !important;
background-color: var(--drgstn-panel) !important;
color: var(--drgstn-text-primary) !important;
}
.drgstn {
.p-tooltip-text, .p-tooltip-arrow {
background: var(--drgstn-tooltip) !important;
border-radius: 2px !important;
padding: .5rem 1rem .5rem 1rem !important;
color: var(--drgstn-text-secondary) !important;
font-size: .75rem !important;
}
.p-tooltip-text:before {
content: '';
position: absolute;
display: block;
width: 0;
left: 50%;
bottom: +7px;
border: 6px solid transparent;
border-bottom: 0;
border-top: 6px solid var(--drgstn-tooltip);
transform: translate(-50%, calc(100% + 3px));
}
}
src/stylesheets/styles.scss 0 → 100644
+ 264
− 0
View file @ ab0f5920
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import "../../node_modules/bulma/bulma";
@import "../../node_modules/animate.css/animate.min.css";
@import "variables";
@import "primeng";
#appWindow {
height: 100%;
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
.fullheight {
height: 100%;
}
.canvas-content {
height: calc(100% - #{$network-footer-height});
z-index: $explorer-network-z;
}
// general network settings, some will be overwritten in analysis
.network-footer-toolbar {
position: absolute;
width: 100%;
bottom: 0;
height: $network-footer-height;
&-inner-container {
width: 100%;
display: inline-flex;
overflow-x: auto;
overflow-y: hidden;
height: $network-footer-inner-container-height;
position: absolute;
bottom: 0;
}
&-element {
position: relative;
margin-top: calc(#{$network-footer-inner-container-height} - #{$network-footer-height} + #{$network-footer-space-button-to-border});
}
.dropdown-menu {
z-index: $explorer-network-toolbar-dropdown-z;
.scroll-area {
height: calc(#{$network-footer-inner-container-height} - #{$network-footer-height});
}
}
}
nav.navbar {
height: 60px;
}
img.menu-icon.is-hoverable.navbar-item.logo {
height: 40px;
width: 125px;
padding: 0;
}
.tissue-dropdown {
padding: 5px;
background-color: rgba(255.0, 255.0, 255.0, 0.85);
.scroll-area {
max-height: 600px;
overflow-y: scroll;
padding-right: 5px;
}
}
div.navbar-menu {
margin-left: 5px;
}
span.icon {
margin-right: 5px;
}
.mb-3 {
margin-bottom: 10px;
}
img.inline {
height: 30px;
align: middle;
}
button.i {
margin-left: 5px;
}
input.checkbox {
margin-left: 15px;
}
div.covex.sidebar {
height: $height;
overflow-y: auto;
overflow-x: hidden;
}
div.covex.bar-left {
float: left;
width: $sidebar-left-width;
max-width: 300px;
min-width: $sidebar-left-min-width;
height: 100%;
}
div.covex.bar-right {
float: left;
width: $sidebar-right-width;
max-width: 450px;
min-width: $sidebar-right-min-width;
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
div.card.bar-small {
margin-bottom: 15px;
word-wrap: break-word;
height: 130px;
}
div.card.bar-medium {
margin-bottom: 15px;
word-wrap: break-word;
height: 170px;
}
div.card.bar-large {
margin-bottom: 15px;
max-height: 600px;
}
div.card-content.overflow {
overflow: auto;
max-height: 350px;
}
div.covex.network {
height: 100%;
float: left;
position: relative;
}
.center-panel {
width: $main-width;
&.leftgone {
width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
}
&.rightgone {
width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
}
&.rightgone.leftgone {
width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
}
}
div.card.network {
width: 100%;
height: $height;
}
div.parent {
position: relative;
}
div.image1 {
position: relative;
}
div.center {
display: flex;
align-items: center;
justify-content: center;
}
div.covex.explorer {
height: #{$height};
margin-left: 10px;
margin-right: 10px;
}
.analysis-view {
height: 100%;
width: 100%;
position: absolute;
margin-top: 0;
z-index: $analysis-view-z;
.canvas-content {
z-index: $analysis-network-z;
}
}
div.field.has-addons.add-remove-toggle {
margin-top: 20px;
}
.fa-spinner {
color: $light-invert;
}
.footer-buttons {
margin-left: 20px;
margin-right: 10px;
}
.toolbar {
padding: 5px;
border-top: 2px solid #d0d0d0;
.field {
margin-bottom: 0;
.control {
margin-bottom: 0;
}
}
}
// classes for different screen sizes
.text-small {
font-size: $text-small-font-size;
}
.text-normal {
font-size: $text-normal-font-size;
}
.b-text-small {
font-size: $b-text-small-font-size;
}
.b-text-smaller {
font-size: $b-text-smaller-font-size;
}
.button-small {
padding: $button-small-padding;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment