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

hopefully full encapsulation done

parent cf1be65c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 323 additions and 76 deletions
src/app/app.component.scss 0 → 100644
+ 0
− 0
View file @ 6a8f0085
src/app/app.module.ts
+ 1
− 1
View file @ 6a8f0085
......@@ -49,7 +49,7 @@ import {TooltipModule} from 'primeng/tooltip';
AddExpressedProteinsComponent,
NetworkLegendComponent,
ProtTableComponent,
DrugTableComponent
DrugTableComponent,
],
imports: [
BrowserModule,
......
src/app/components/analysis-panel/analysis-panel.component.scss
+ 7
− 6
View file @ 6a8f0085
@import "src/stylesheets/variables";
.analysis {
position: absolute;
height: 100%;
width: 100%;
position: absolute !important;
height: 100% !important;
width: 100% !important;
}
.network-view-settings {
// remove margin from tab header when network is displayed, so that network
// does not disappear in empty border
padding-left: 0;
padding-right: 0;
padding-left: 0 !important;
padding-right: 0 !important;
.tabs {
margin: 0;
}
......@@ -37,7 +37,8 @@
}
&.table-tab {
// 100% - #{$network-header-height} - #{$analysis-tab-header-height} - normalization-button
height: calc(100% - 40px - 1.5rem - 72px);
height: calc(100% - 40px - 1.5rem - 72px - 6px);
}
h4 {
......
src/app/components/network-legend/network-legend.component.html
+ 0
− 1
View file @ 6a8f0085
......@@ -59,7 +59,6 @@
<td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
</ng-container>
</ng-container>
</tr>
</ng-container>
......
src/app/components/network-legend/network-legend.component.scss
+ 6
− 5
View file @ 6a8f0085
......@@ -14,18 +14,19 @@ div.legend {
// margin-bottom: 1rem;
}
td.group-name{
color:var(--drgstn-text-primary);
color:var(--drgstn-text-primary) !important;
}
tr.list-item{
line-height: calc(#{$legend-row-height} / 2);
border-top: var(--drgstn-text-primary) 1px solid;
th{
height: $legend-row-height;
width: $legend-row-height;
vertical-align: middle !important;
padding: 0 !important;
padding: 2px !important;
.text{
font-style: italic;
color:var(--drgstn-text-primary);
color:var(--drgstn-text-primary) !important;
}
.diamond {
height: $legend-diamond-size;
......@@ -130,8 +131,8 @@ div.legend {
/* Center edge icon */
margin: 0 auto;
&.dashes {
border-top: dotted;
background-color: transparent;
border-top: dotted !important;
background-color: transparent !important;
}
}
}
......
src/app/components/query-tile/query-tile.component.html
+ 2
− 2
View file @ 6a8f0085
<div class="content">
<ng-select [items]="queryItems" bindLabel="data.label" bindValue="data.label" [virtualScroll]="true" class="custom"
placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
<ng-select [items]="queryItems" bindLabel="data.label" bindValue="data.label" [virtualScroll]="true"
[placeholder]="getLabel()" [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
<span>{{item.data.label}}</span>
</ng-template>
......
src/app/components/query-tile/query-tile.component.ts
+ 36
− 8
View file @ 6a8f0085
import {Component, Input, Output, EventEmitter} from '@angular/core';
import { element } from 'protractor';
import {element} from 'protractor';
import {Node, Wrapper} from '../../interfaces';
@Component({
......@@ -12,6 +12,7 @@ export class QueryTileComponent {
@Output() selectItem: EventEmitter<any> = new EventEmitter();
@Input() queryItems: Wrapper[];
selectedItem = undefined;
private listStartsWith = (elments: any[], term) => {
for (const e of elments) {
......@@ -26,13 +27,34 @@ export class QueryTileComponent {
term = term.toLowerCase();
const data = {...item.data}
// add possible missing attributes to not throw errors
if (data.ensg === undefined) {data.ensg = []};
if (data.groupName === undefined) {data.groupName = ''};
if (data.type === undefined) {data.type = ''};
if (data.symbol === undefined) {data.symbol = ''};
if (data.proteinName === undefined) {data.proteinName = ''};
if (data.uniprotAc === undefined) {data.uniprotAc = ''};
if (data.drugId === undefined) {data.drugId = ''};
if (data.ensg === undefined) {
data.ensg = []
}
;
if (data.groupName === undefined) {
data.groupName = ''
}
;
if (data.type === undefined) {
data.type = ''
}
;
if (data.symbol === undefined) {
data.symbol = ''
}
;
if (data.proteinName === undefined) {
data.proteinName = ''
}
;
if (data.uniprotAc === undefined) {
data.uniprotAc = ''
}
;
if (data.drugId === undefined) {
data.drugId = ''
}
;
return data.symbol.toLowerCase().indexOf(term) > -1 || data.uniprotAc.toLowerCase().indexOf(term) > -1 ||
data.label.toLowerCase().indexOf(term) > -1 || this.listStartsWith(data.ensg, term) || data.id.toLowerCase().indexOf(term) > -1
......@@ -41,7 +63,13 @@ export class QueryTileComponent {
}
select(item) {
this.selectedItem = item;
this.selectItem.emit(item);
}
getLabel() {
if (this.selectedItem != null)
return ""
return "Search...";
}
}
src/app/pages/explorer-page/explorer-page.component.scss
+ 2
− 1
View file @ 6a8f0085
@import "src/stylesheets/variables";
.quick-find {
.notification {
padding: 15px;
......@@ -70,7 +71,7 @@
}
.task-list-container {
padding: 0.5rem;
padding: 0.5rem !important;
}
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 3
− 9
View file @ 6a8f0085
......@@ -2,12 +2,12 @@ import {
AfterViewInit,
Component,
ElementRef,
EventEmitter,
HostListener,
Input,
OnInit, Output,
OnInit,
Output,
ViewChild,
EventEmitter,
ViewEncapsulation
} from '@angular/core';
import {
getDrugNodeId,
......@@ -30,13 +30,7 @@ import {downLoadFile, removeDuplicateObjectsFromList} from '../../utils'
import * as merge from 'lodash/fp/merge';
import {AnalysisPanelComponent} from 'src/app/components/analysis-panel/analysis-panel.component';
// import * as 'vis' from 'vis-network';
// import {DataSet} from 'vis-data';
// import {vis} from 'src/app/scripts/vis-network.min.js';
declare var vis: any;
// import {Network, Data} from 'vis-network';
// declare var DataSet: any;
// declare var Network: any;
@Component({
selector: 'app-explorer-page',
......
src/index.html
+ 3
− 4
View file @ 6a8f0085
......@@ -31,7 +31,7 @@
<button onclick=changeConfigStr('{"interactions":"omnipath"}') >Get Omnipath Interactions </button> <br>
<button onclick="initTaskEventListener()">Init Task-Eventlistener</button> <br>
<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) >Load TaskID</button> <br>
<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) class="button is-primary" >Load TaskID</button> <br>
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
......@@ -43,10 +43,9 @@
<div style="width: 1300px">
<network-expander id="netexp1"
config='{"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#f0f0f0"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"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":"white","groupName":"Relevant Gene"},"has-condition":{"color":"white","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#ffffff","groupName":"default edge"},"ggi":{"color":"#ffffff","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":false,"showLegend":true}'
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}'
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>
}'></network-expander>
</div>
<br>
......
src/stylesheets/bulma.scss 0 → 100644
+ 34
− 0
View file @ 6a8f0085
@import "toast";
#appWindow {
@import "../../node_modules/bulma/bulma";
height: var(--drgstn-height, 500px);
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
p {
margin-bottom: .4rem !important;
}
.card-content.explorer-network-view-settings {
padding: 0 !important;
}
.delete, .modal-close {
padding: 0 !important;
}
hr {
margin-top: .25rem;
margin-bottom: .25rem;
}
button {
height: auto !important;
}
.box {
padding: .5rem !important;
margin-bottom: .5rem !important;
}
}
src/stylesheets/primeng.scss
+ 116
− 3
View file @ 6a8f0085
@import '../stylesheets/icons';
.drgstn-tooltip {
position: absolute !important;
padding: .25em .5rem !important;
......@@ -21,9 +20,10 @@
.p-tooltip-text {
white-space: pre-line !important;
background: var(--drgstn-tooltip) !important;
border-radius: 2px !important;
padding: .25rem 1rem .25rem 1rem !important;
border-radius: 4px !important;
padding: .5rem 1rem .5rem 1rem !important;
color: var(--drgstn-text-secondary) !important;
font-family: Roboto,Helvetica Neue,sans-serif !important;
font-size: .75rem !important;
}
......@@ -82,3 +82,116 @@
}
}
#appWindow {
//.ng-select{
// box-sizing: border-box !important;
// display: block !important;
// position: relative !important;
// clear: both;
// font-size: 1rem;
// text-align: inherit;
//}
//
//.ng-select.ng-select-single .ng-select-container .ng-value-container, .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value {
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
//}
//
//.ng-select .ng-select-container .ng-value-container {
// display: flex;
// flex: 1;
//}
//
//.ng-select .ng-select-container .ng-value-container {
// align-items: center;
// padding-left: 10px;
//}
//
//.ng-select.ng-select-single .ng-select-container {
// height: 36px;
//}
//
//.control {
// box-sizing: border-box;
// clear: both;
// font-size: 1rem;
// position: relative;
// text-align: inherit;
//}
//
//.ng-select .ng-select-container {
// cursor: default;
// display: flex;
// outline: none;
// overflow: hidden;
// position: relative;
// width: 100%;
// color: #333;
// background-color: #fff;
// border-radius: 4px;
// border: 1px solid #ccc;
// min-height: 36px;
// align-items: center;
//}
//
//.ng-dropdown-panel.ng-select-bottom {
// top: 100%;
// border-bottom-right-radius: 4px;
// border-bottom-left-radius: 4px;
// border-top-color: #e6e6e6;
// margin-top: -1px;
//}
//
//.ng-dropdown-panel {
// -webkit-overflow-scrolling: touch;
// box-sizing: border-box;
// opacity: 0;
// position: absolute;
// width: 100%;
// z-index: 1050;
//}
//
//.ng-dropdown-panel {
// background-color: #fff;
// border: 1px solid #ccc;
// box-shadow: 0 1px 0 rgba(0,0,0,.06);
// left: 0;
//}
//
//.ng-dropdown-panel .total-padding {
// opacity: 0;
// width: 1px;
//}
//
//.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
// box-sizing: border-box;
// cursor: pointer;
// display: block;
//}
//
//.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
// background-color: #fff;
// color: rgba(0,0,0,.87);
// padding: 8px 10px;
//}
//
//.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
//}
//
//
//.ng-select-container {
// background-color: var(--drgstn-panel-secondary);
// border-color: var(--drgstn-border);
//}
//
//.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container {
// border-bottom-right-radius: 0;
// border-bottom-left-radius: 0;
//}
}
src/stylesheets/styles.scss
+ 10
− 11
View file @ 6a8f0085
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
//@import "~@ng-select/ng-select/themes/default.theme.css";
@import "../../node_modules/bulma/bulma";
@import "../../node_modules/animate.css/animate.min.css";
@import "variables";
@import "../../node_modules/animate.css/animate.min";
@import "primeng";
@import "bulma";
@import "variables";
#appWindow {
height: var(--drgstn-height, 500px);
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
.fullheight {
height: 100%;
}
.card-content .tabs-header {
margin-bottom: 0;
}
.canvas-content {
height: calc(100% - #{$network-footer-height});
z-index: $explorer-network-z;
......@@ -206,7 +207,7 @@
.analysis-view {
height: 100%;
width: 100%;
position: absolute;
position: absolute !important;
margin-top: 0;
z-index: $analysis-view-z;
......@@ -219,9 +220,6 @@
margin-top: 20px;
}
.fa-spinner {
color: $light-invert;
}
.footer-buttons {
margin-left: 10px;
......@@ -262,3 +260,4 @@
padding: $button-small-padding;
}
}
src/stylesheets/theme-styles.scss
+ 33
− 25
View file @ 6a8f0085
......@@ -15,7 +15,7 @@
}
#appWindow {
background-color: var(--drgstn-background);
background-color: var(--drgstn-background) !important;
.card-header-title, .card-content, .title {
......@@ -38,13 +38,17 @@
border-color: var(--drgstn-border) !important;
}
.fa-spinner {
color: var(--drgstn-secondary) !important;
}
.tabs.is-toggle a:hover {
background-color: var(--drgstn-panel) !important;
}
.tabs li.is-active a, .tabs.is-toggle li.is-active a, .tabs a:hover {
border-color: var(--drgstn-primary) !important;
color: var(--drgstn-primary) !important;
color: var(--drgstn-text-primary) !important;
}
.content h4, .content h6 {
......@@ -64,9 +68,13 @@
background-color: var(--drgstn-border) !important;
}
.tr {
border-color: var(--drgstn-text-primary) !important;
}
// legend styles
.legend {
color: var(--drgstn-text-primary);
color: var(--drgstn-text-primary) !important;
}
.modal-card-body {
......@@ -107,11 +115,11 @@
}
a.dropdown-item:hover, button.dropdown-item:hover{
background-color: var(--drgstn-panel-secondary)
background-color: var(--drgstn-panel-secondary) !important;
}
.tissue-dropdown {
background-color: var(--drgstn-panel);
background-color: var(--drgstn-panel) !important;
}
.button.is-primary.is-focused, .button.is-primary:focus {
......@@ -199,66 +207,66 @@
}
.ng-select-container, .ng-dropdown-panel.ng-select-bottom {
background-color: var(--drgstn-panel-secondary);
border-color: var(--drgstn-border);
background-color: var(--drgstn-panel-secondary) !important;
border-color: var(--drgstn-border) !important;
.ng-value-container {
.ng-placeholder{
color: var(--drgstn-text-primary);
color: var(--drgstn-text-primary) !important;
}
}
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
background-color: var(--drgstn-panel);
color:var(--drgstn-text-primary);
background-color: var(--drgstn-panel) !important;
color:var(--drgstn-text-primary) !important;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
background-color: var(--drgstn-panel-secondary);
color:var(--drgstn-text-primary);
background-color: var(--drgstn-panel-secondary) !important;
color:var(--drgstn-text-primary) !important;
}
.ng-select {
.ng-arrow-wrapper .ng-arrow {
border-top-color: var(--drgstn-text-primary);
border-top-color: var(--drgstn-text-primary) !important;
}
.ng-clear-wrapper, .ng-select-container {
color: var(--drgstn-text-primary);
color: var(--drgstn-text-primary) !important;
}
}
.ng-select.ng-select-opened>.ng-select-container .ng-arrow{
border-bottom-color: var(--drgstn-text-primary);
border-bottom-color: var(--drgstn-text-primary) !important;
}
::-webkit-scrollbar {
width: 5px;
width: 10px !important;
}
::-webkit-scrollbar-track {
background: var(--scrollbarBG);
background: var(--scrollbarBG) !important;
}
::-webkit-scrollbar-thumb {
background: var(--thumbBG);
border-radius: 6px;
border: 3px solid var(--scrollbarBG);
background: var(--thumbBG) !important;
border-radius: 6px !important;
border: 3px solid var(--scrollbarBG) !important;
}
::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
width: 0px;
width: 0px !important;
}
}
// scrolllbar styles
network-expander {
--thumbBG: var(--drgstn-primary);
--scrollbarBG: var(--drgstn-background);
--thumbBG: var(--drgstn-primary) !important;
--scrollbarBG: var(--drgstn-background) !important;
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
scrollbar-width: thin !important;
scrollbar-color: var(--thumbBG) var(--scrollbarBG) !important;
}
src/stylesheets/toast.scss 0 → 100644
+ 70
− 0
View file @ 6a8f0085
.notification {
background-color: #f5f5f5;
border-radius: 4px;
position: relative;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight: 400;
font-size: 1em;
line-height: 1.5;
}
.notification.is-success{
background-color: var(--drgstn-success);
color: var(--drgstn-text-secondary);
}
.notification.is-danger{
background-color: var(--drgstn-danger);
color: var(--drgstn-text-secondary);
}
.notification>.delete{
right: .5rem;
position: absolute;
top: .5rem;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: hsla(0,0%,4%,.2);
border: none;
border-radius: 290486px;
cursor: pointer;
pointer-events: auto;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 0;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: none;
//position: relative;
vertical-align: top;
width: 20px;
}
.notification>.delete:before {
height: 2px;
width: 50%;
}
.notification>.delete:after {
height: 50%;
width: 2px;
}
.notification>.delete:after, .notification>.delete:before{
background-color: #fff;
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment