diff --git a/src/app/components/toggle/toggle.component.html b/src/app/components/toggle/toggle.component.html
index a1e7735ef9a33539ebd81a796e1fec654e6a29a0..cab8b7a9b60f5802293db0963dfb64ecd1a67415 100644
--- a/src/app/components/toggle/toggle.component.html
+++ b/src/app/components/toggle/toggle.component.html
@@ -1,6 +1,6 @@
<div class="field has-addons">
<p class="control has-tooltip">
- <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOn" [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
+ <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOn" [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'switch-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" [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
+ <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOff" [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'switch-small':smallStyle}">
<span [ngClass]="{'text-small':smallStyle}">{{textOff}}</span>
<span *ngIf="iconOff" class="icon is-small">
<i class="fa {{iconOff}}"></i>
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 44a1fd5552e2661cf735b3abec3b9deaf56a166a..189fa8eaf875c732a509502e62201aafdca91414 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -73,7 +73,7 @@
<div>
<p class="heading">Nodes</p>
<p class="title">
- {{ currentViewNodes != null ? currentViewNodes.length :0 }}
+ {{ currentViewNodes != null ? currentViewNodes.length : 0 }}
</p>
</div>
</div>
@@ -81,7 +81,7 @@
<div>
<p class="heading">Interactions</p>
<p class="title">
- {{ currentViewEdges!=null ? currentViewEdges.length :0 }}
+ {{ currentViewEdges != null ? currentViewEdges.length : 0 }}
</p>
</div>
</div>
@@ -181,6 +181,7 @@
network-footer-toolbar-element
"
pTooltip="Take a screenshot of the current network."
+ [ngClass]="{ 'button-small': smallStyle }"
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
>
@@ -202,6 +203,7 @@
has-tooltip
network-footer-toolbar-element
"
+ [ngClass]="{ 'button-small': smallStyle }"
pTooltip="Export this network as .graphml file."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
@@ -377,82 +379,84 @@
</a>
</header>
<div *ngIf="collapseAnalysisQuick">
- <div class="card-content quick-find">
+ <div class="card-content quick-find" [ngClass]="{small:smallStyle}">
<div class="field">
<div class="control">
- <div class="tile notification is-danger">
+ <div class="tile notification quick-start warning" [ngClass]="{small:smallStyle}">
<div class="align-vmiddle">
- <div class="digit">
+ <div [ngClass]="{'digit':!smallStyle, 'digit-small': smallStyle}">
<i class="fa fa-fast-forward"></i>
</div>
- <button
- (click)="analysis.startQuickAnalysis(true, null)"
- [disabled]="analysis.isLaunchingQuick()"
- class="button is-white is-rounded has-tooltip"
- pTooltip="Find drugs for all proteins."
- [tooltipStyleClass]="'drgstn drgstn-tooltip'"
- tooltipPosition="top"
- >
- <span class="icon">
- <i
- class="fa fa-capsules"
- *ngIf="!analysis.isLaunchingQuick()"
- ></i>
- <i
- class="fa fa-spin fa-spinner"
- *ngIf="analysis.isLaunchingQuick()"
- ></i>
+ <div style="display: flex; justify-content: center; width:100%">
+ <button
+ (click)="analysis.startQuickAnalysis(true, null)"
+ [disabled]="analysis.isLaunchingQuick()"
+ class="button is-white is-rounded has-tooltip quick-start-btn"
+ pTooltip="Find drugs for all proteins."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+ tooltipPosition="top"
+ >
+ <span class="icon quick-icon">
+ <span *ngIf="!analysis.isLaunchingQuick()">
+ <i class="fa fa-capsules"></i>
+ </span>
+ <span *ngIf="analysis.isLaunchingQuick()">
+ <i class="fa fa-spin fa-spinner"></i>
+ </span>
</span>
- <span [ngClass]="{ 'text-normal': smallStyle }">
+ <span [ngClass]="{ 'text-normal': smallStyle }">
Quick Start
</span>
- </button>
+ </button>
+ </div>
</div>
</div>
<div class="divisor-rapid">— or —</div>
- <div class="tile notification is-info">
+ <div class="tile notification quick-start info" [ngClass]="{small:smallStyle}">
<div class="align-vmiddle">
- <div class="digit" *ngIf="analysis.getCount() == 0">
+ <div [ngClass]="{'digit':!smallStyle, 'digit-small': smallStyle}"
+ *ngIf="analysis.getCount() == 0">
1
</div>
- <div class="digit" *ngIf="analysis.getCount() > 0">
+ <div [ngClass]="{ 'digit': !smallStyle, 'digit-small': smallStyle }"
+ *ngIf="analysis.getCount() > 0">
<i class="fa fa-check"></i>
</div>
- <div>
- <span [ngClass]="{ 'text-normal': smallStyle }"
- >Select Proteins</span
+ <div style="display: flex; justify-content: center; width:100%">
+ <div [ngClass]="{ 'text-normal': smallStyle }" class="quick-start-btn"
+ >Select Proteins
+ </div
>
</div>
</div>
</div>
- <div class="tile notification is-info">
+ <div class="tile notification quick-start info" [ngClass]="{small:smallStyle}">
<div class="align-vmiddle">
- <div class="digit">2</div>
- <button
- (click)="analysis.startQuickAnalysis(false, null)"
- [disabled]="
+ <div [ngClass]="{'digit':!smallStyle, 'digit-small': smallStyle}">2</div>
+ <div style="display: flex; justify-content: center; width:100%">
+ <button
+ (click)="analysis.startQuickAnalysis(false, null)"
+ [disabled]="
analysis.getCount() === 0 ||
analysis.isLaunchingQuick()
"
- class="button is-white is-rounded"
- pTooltip="Find drugs for the selected proteins."
- [tooltipStyleClass]="'drgstn drgstn-tooltip'"
- tooltipPosition="top"
- >
- <span class="icon">
- <i
- class="fa fa-capsules"
- *ngIf="!analysis.isLaunchingQuick()"
- ></i>
- <i
- class="fa fa-spin fa-spinner"
- *ngIf="analysis.isLaunchingQuick()"
- ></i>
+ class="button is-white is-rounded quick-start-btn drugs-btn"
+ pTooltip="Find drugs for the selected proteins."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+ tooltipPosition="top"
+ ><span class="icon quick-icon">
+ <span *ngIf="!analysis.isLaunchingQuick()">
+ <i class="fa fa-capsules"></i>
+ </span>
+ <span *ngIf="analysis.isLaunchingQuick()">
+ <i class="fa fa-spin fa-spinner"></i>
+ </span>
</span>
- <span [ngClass]="{ 'text-normal': smallStyle }">
- {{ myConfig.taskName }}
+ <span [ngClass]="{ 'text-normal': smallStyle }">
+ Find Drugs
</span>
- </button>
+ </button>
+ </div>
</div>
</div>
</div>
@@ -678,45 +682,45 @@
*ngIf="analysis.getCount() > 0"
>
<thead>
- <tr>
- <td>Label</td>
- <td>Group</td>
- <td *ngIf="myConfig.identifier !== 'symbol'">Symbol</td>
- <td *ngIf="myConfig.identifier !== 'uniprot'">Uniprot</td>
- <td>Actions</td>
- </tr>
+ <tr>
+ <td>Label</td>
+ <td>Group</td>
+ <td *ngIf="myConfig.identifier !== 'symbol'">Symbol</td>
+ <td *ngIf="myConfig.identifier !== 'uniprot'">Uniprot</td>
+ <td>Actions</td>
+ </tr>
</thead>
<tbody>
- <tr *ngFor="let p of analysis.getSelection()">
- <td>
- <p class="is-capitalized">{{ p.data.label }}</p>
- </td>
- <td>
- <p>
- {{ myConfig.nodeGroups[p.data.group]["groupName"] }}
- </p>
- </td>
- <td *ngIf="myConfig.identifier !== 'symbol'">
- <p>{{ p.data.symbol }}</p>
- </td>
- <td *ngIf="myConfig.identifier !== 'uniprot'">
- <p>{{ p.data.uniprotAc }}</p>
- </td>
- <td>
- <button
- (click)="analysis.removeItems([p])"
- class="
+ <tr *ngFor="let p of analysis.getSelection()">
+ <td>
+ <p class="is-capitalized">{{ p.data.label }}</p>
+ </td>
+ <td>
+ <p>
+ {{ myConfig.nodeGroups[p.data.group]["groupName"] }}
+ </p>
+ </td>
+ <td *ngIf="myConfig.identifier !== 'symbol'">
+ <p>{{ p.data.symbol }}</p>
+ </td>
+ <td *ngIf="myConfig.identifier !== 'uniprot'">
+ <p>{{ p.data.uniprotAc }}</p>
+ </td>
+ <td>
+ <button
+ (click)="analysis.removeItems([p])"
+ class="
button
is-small is-danger is-outlined
has-tooltip
"
- tooltipPosition="top"
- pTooltip="Remove from selection."
- >
- <i class="fa fa-trash"></i>
- </button>
- </td>
- </tr>
+ tooltipPosition="top"
+ pTooltip="Remove from selection."
+ >
+ <i class="fa fa-trash"></i>
+ </button>
+ </td>
+ </tr>
</tbody>
</table>
<i *ngIf="analysis.getCount() === 0">
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index 31e60eeae29b789d3937229f07be27613af537c1..568ebd60a9b56fdb39238fb8c375c3f24fc21994 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -1,19 +1,46 @@
@import "src/stylesheets/variables";
+
+.quick-icon {
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ margin: auto;
+}
+
.quick-find {
.notification {
- padding: 15px;
-
+ padding: 1.25rem 1rem 1.25rem 1rem !important;
.digit {
color: rgba(255, 255, 255, 0.5);
font-size: 32px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 30px;
width: 50px;
+ min-width: 50px;
height: 50px;
text-align: center;
+ align-self: center;
+ margin: auto 0;
+ font-weight: bold;
+ }
+ .digit-small {
+ color: rgba(255, 255, 255, 0.5);
+ font-size: 24px;
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ border-radius: 30px;
+ width: 42px;
+ min-width: 42px;
+ height: 42px;
+ text-align: center;
+ align-self: center;
+ margin: auto 0;
font-weight: bold;
}
+
+ }
+ .notification.small {
+ padding: .5rem 1rem !important;
}
.divisor-rapid {
@@ -22,6 +49,15 @@
text-align: center;
}
}
+.card-content.quick-find.small{
+ padding: .5rem !important;
+}
+
+.card-content.quick-find {
+ padding: 1.5rem !important;
+}
+
+
.explorer-network-view-settings {
// remove margin from tab header when network is displayed, so that network
@@ -30,8 +66,19 @@
height: calc(100% - #{$network-header-height});
}
+
+.quick-start-btn {
+ align-self: center;
+ justify-self: center;
+ margin-top: auto;
+ margin-bottom: auto;
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+
.align-vmiddle {
- display: table-cell;
+ width:100%;
+ display: flex;
vertical-align: middle;
height: 50px;
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 1009341cda87cf7dc5d5407d3f0b92977d3382e4..85b68167fc0e93b789d9d8a95949ce0f20621076 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -242,7 +242,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
@HostListener('window:resize', ['$event'])
onResize(event) {
- this.setWindowWidth(event.target.innerWidth);
+ this.setWindowWidth(document.getElementById('appWindow').getBoundingClientRect().width);
}
ngOnInit() {
diff --git a/src/index.html b/src/index.html
index 2d55cd164c7c2e0c6bc96db92b3cbf1f673e6fea..2935b81d96d0e4a5f15807d28fef88e9fb0b604a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -40,10 +40,10 @@
<button onclick="setNetwork('netexp1')">Add nodes</button>
-<div style="width: 1300px">
+<div >
<network-expander id="netexp1"
- config='{"nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#000000"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590","highlight":{"border":"#F12590","background":"#F12590"}},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
+ config='{"showSimpleAnalysis":true, "nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#000000"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590","highlight":{"border":"#F12590","background":"#F12590"}},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
network='{"nodes":[{"id":"patient-1","group":"patient","x":592,"y":446},{"id":"patient-2","group":"patient","x":235,"y":87},{"id":"patient-3","group":"patient","x":105,"y":369},{"id":"ATM","label":"ATM","group":"gene","x":289,"y":242},{"id":"BARD1","label":"BARD1","group":"gene","x":44,"y":250},{"id":"BRCA1","label":"BRCA1","group":"gene","x":466,"y":576},{"id":"BRCA2","label":"BRCA2","group":"gene","x":507,"y":285},{"id":"BRIP1","label":"BRIP1","group":"gene","x":54,"y":474},{"id":"CHEK2","label":"CHEK2","group":"gene","x":216,"y":590},{"id":"CDH1","label":"CDH1","group":"gene","x":320,"y":-57},{"id":"NF1","label":"NF1","group":"gene","x":481,"y":111},{"id":"NBN","label":"NBN","group":"gene","x":-57,"y":314},{"id":"PALB2","label":"PALB2","group":"gene","x":450,"y":190},{"id":"PTEN","label":"PTEN","group":"important","x":305,"y":494},{"id":"RAD51C","label":"RAD51C","group":"gene","x":182,"y":-90},{"id":"RAD51D","label":"RAD51D","group":"gene","x":368,"y":73},{"id":"STK11","label":"STK11","group":"gene","x":686,"y":330},{"id":"TP53","label":"TP53","group":"important","x":333,"y":316},{"id":"subtype-1","label":"Subtype 1","group":"condition","x":556,"y":171},{"id":"subtype-2","label":"Subtype 2","group":"condition","x":-87,"y":221}],"edges":[{"from":"BRCA1","to":"BRCA2","group":"ggi"},{"from":"ATM","to":"BARD1","group":"ggi"},{"from":"BRCA1","to":"CHEK2","group":"ggi"},{"from":"RAD51C","to":"RAD51D","group":"ggi"},{"from":"STK11","to":"TP53","group":"ggi"},{"from":"TP53","to":"PALB2","group":"ggi"},{"from":"TP53","to":"RAD51D","group":"ggi"},{"from":"TP53","to":"NF1","group":"ggi"},{"from":"TP53","to":"BRCA1","group":"ggi"},{"from":"TP53","to":"BRCA2","group":"ggi"},{"from":"PTEN","to":"BRCA1","group":"ggi"},{"from":"PTEN","to":"BRCA2","group":"ggi"},{"from":"TP53","to":"PTEN","group":"ggi"},{"from":"ATM","to":"PTEN","group":"ggi"},{"from":"CDH1","to":"RAD51D","group":"ggi"},{"from":"CDH1","to":"PALB2","group":"ggi"},{"from":"NBN","to":"BRIP1","group":"ggi"},{"from":"BRIP1","to":"PTEN","group":"ggi"},{"from":"patient-1","to":"BRCA1","group":"genotype"},{"from":"patient-1","to":"TP53","group":"genotype"},{"from":"patient-1","to":"BRCA2","group":"genotype"},{"from":"patient-1","to":"PTEN","group":"genotype"},{"from":"patient-2","to":"TP53","group":"genotype"},{"from":"patient-2","to":"NF1","group":"genotype"},{"from":"patient-2","to":"BARD1","group":"genotype"},{"from":"patient-3","to":"TP53","group":"genotype"},{"from":"patient-3","to":"PTEN","group":"genotype"},{"from":"patient-3","to":"NBN","group":"genotype"},{"from":"patient-1","to":"subtype-1","group":"has-condition"},{"from":"patient-2","to":"subtype-1","group":"has-condition"},{"from":"patient-3","to":"subtype-2","group":"has-condition"}]}'>
}'></network-expander>
</div>
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index 7249708febfb74ed842b6c67ed92d9030b4d1c61..e6074382230828ff7b01e19b159d07d888029c17 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -114,7 +114,7 @@
div.covex.bar-left {
float: left;
width: $sidebar-left-width;
- max-width: 300px;
+ max-width: $sidebar-left-max-width;
min-width: $sidebar-left-min-width;
height: 100%;
}
@@ -122,7 +122,7 @@
div.covex.bar-right {
float: left;
width: $sidebar-right-width;
- max-width: 450px;
+ max-width: $sidebar-right-max-width;
min-width: $sidebar-right-min-width;
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
@@ -235,10 +235,10 @@
border-top: 2px solid #d0d0d0;
.field {
- margin-bottom: 0;
+ margin-bottom: 0 !important;
.control {
- margin-bottom: 0;
+ margin-bottom: 0 !important;
}
}
}
@@ -263,6 +263,12 @@
.button-small {
padding: $button-small-padding;
+ height: 30px !important;
}
+ .switch-small {
+ padding: $button-small-padding;
+ height: 36px !important;
+ }
+
}
diff --git a/src/stylesheets/theme-styles.scss b/src/stylesheets/theme-styles.scss
index 85a906fd88c0275ee195413ddc552fbfd3bc9812..92daedd1c5271900aaf9f8e83dda9ac7693a278b 100644
--- a/src/stylesheets/theme-styles.scss
+++ b/src/stylesheets/theme-styles.scss
@@ -17,6 +17,14 @@
#appWindow {
background-color: var(--drgstn-background) !important;
+ .tile.notification.quick-start.warning {
+ background-color: var(--drgstn-info) !important;
+ }
+
+ .tile.notification.quick-start {
+ background-color: var(--drgstn-primary) !important;
+ color: var(--drgstn-text-secondary) !important;
+ }
.card-header-title, .card-content, .title {
color: var(--drgstn-text-primary) !important;
@@ -123,7 +131,7 @@
color: var(--drgstn-primary) !important;
}
- a.dropdown-item:hover, button.dropdown-item:hover{
+ a.dropdown-item:hover, button.dropdown-item:hover {
background-color: var(--drgstn-panel-secondary) !important;
}
@@ -218,33 +226,37 @@
.ng-select-container, .ng-dropdown-panel.ng-select-bottom {
background-color: var(--drgstn-panel-secondary) !important;
border-color: var(--drgstn-border) !important;
+
.ng-value-container {
- .ng-placeholder{
+ .ng-placeholder {
color: var(--drgstn-text-primary) !important;
}
}
}
+
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
background-color: var(--drgstn-panel) !important;
- color:var(--drgstn-text-primary) !important;
+ color: var(--drgstn-text-primary) !important;
}
+
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
background-color: var(--drgstn-panel-secondary) !important;
- color:var(--drgstn-text-primary) !important;
+ color: var(--drgstn-text-primary) !important;
}
.ng-select {
.ng-arrow-wrapper .ng-arrow {
border-top-color: var(--drgstn-text-primary) !important;
}
+
.ng-clear-wrapper, .ng-select-container {
color: var(--drgstn-text-primary) !important;
}
}
- .ng-select.ng-select-opened>.ng-select-container .ng-arrow{
+ .ng-select.ng-select-opened > .ng-select-container .ng-arrow {
border-bottom-color: var(--drgstn-text-primary) !important;
}
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 92d52bd127889d7b834da2afd18ea60f9a2ef10e..943a772546faff0ecc0a11c89f84a53c382f6bc9 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -36,9 +36,11 @@ $height: 100%;
// Settings Interface Components
$sidebar-right-width: 25%;
-$sidebar-right-min-width: 210px;
+$sidebar-right-min-width: 235px;
+$sidebar-right-max-width: 320px;
$sidebar-left-width: 18%;
$sidebar-left-min-width: 200px;
+$sidebar-left-max-width: 260px;
$main-width: calc(100% - (max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width})));
@@ -48,4 +50,4 @@ $b-text-smaller-font-size: 12px;
$text-normal-font-size: 12px;
$text-small-font-size: 11px;
-$button-small-padding: 3px 10px 3px 10px;
\ No newline at end of file
+$button-small-padding: 3px 10px 3px 10px;