GeneView.scss 2.14 KB
Newer Older
1 2
@import 'src/styles/common';

3 4 5 6 7 8 9 10 11 12 13
$backgroundColor: $black;

.geneViewLoadingContainer {
  background-color: $backgroundColor;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

14
.geneView {
15
  color: $white;
16
  display: grid;
17
  background-color: $backgroundColor;
18
  grid-template-columns: 178px 902px 1fr;
19
  grid-template-rows: min-content minmax(76px, auto) minmax(0, 1fr);  
20
  padding: 60px 20px 10px;
21 22
  height: 100%; // may need to change this later
  width: 100%;
Andrey Azov's avatar
Andrey Azov committed
23
  overflow: auto;
24 25 26 27 28 29 30 31
}

.featureImage {
  grid-area: 1 / 1 / 2 / 3;
}

.viewInLinks {
  grid-area: 1 / 3 / 2 / 4;
32 33 34
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: end;
Andrey Azov's avatar
Andrey Azov committed
35
  padding-right: 30px;
36 37 38
}

.geneViewTabs {
39
  grid-area: 2 / 1 / 3 / 4;
40 41 42 43 44 45
  display: grid;
  grid-template-areas:
                  "filter-toggle tabs"
                  "filters filters";
  grid-template-columns: 170px auto;
  grid-template-rows: auto auto;
46 47
  z-index: 2;
  position: sticky;
Jyothish's avatar
Jyothish committed
48
  top: -80px;
49 50 51 52 53 54 55 56 57
  height: 100%;  
}

.tabWrapper {
  grid-area: tabs;
  height: 76px;
  display: flex;
  align-items: flex-end;
  padding: 4px;
58
  background-color: $backgroundColor;
59 60 61 62
}

.filtersWrapper {
  grid-area: filters;
63 64
}

65
.geneViewTabContent {
66 67
  grid-area: 3 / 1 / 4 / 4;
}
68 69 70 71 72 73 74 75 76 77 78

.filterLabelContainer {
  background-color: $backgroundColor;
  grid-area: filter-toggle;  
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: sticky;
  top: 0;      
}

Andrey Azov's avatar
Andrey Azov committed
79 80 81
.filterLabelWrapper {
  display: flex;
  justify-content: flex-end;
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
  padding-right: 20px;
  padding-bottom: 9px;
  padding-top: 6px;
} 

.openFilterLabelContainer {
  background-color: $backgroundColor;
  top: -80px;

  .filterLabelWrapper {
    background-color: $soft-black;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;  
  }  
}

.filterLabel {
  text-align: right;
  padding-right: 2px;
  cursor: pointer;
  color: $blue;
}

.openFilterLabel {
  color: $white;
}

.labelWithActivityIndicator {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    border-radius: 100%;
    height: 8px;
    width: 8px;
    background: $red;
    right: -10px;
    top: -2px;
  }
}