ProteinsListItemInfo.scss 1.46 KB
Newer Older
Jyothish's avatar
Jyothish committed
1
@import 'src/styles/common';
Jyothish's avatar
Jyothish committed
2
@import 'src/content/app/entity-viewer/gene-view/styles/constants';
Jyothish's avatar
Jyothish committed
3

Jyothish's avatar
Jyothish committed
4
$content-width: $gene_image_width;
5

Imran Salam's avatar
Imran Salam committed
6
.proteinSummary {
Imran Salam's avatar
Imran Salam committed
7
  margin-left: 178px;
8
  width: $content-width;
9
  padding-top: 10px;
10 11
}

Jyothish's avatar
Jyothish committed
12 13
.keyline {
  border-bottom: 1px solid $orange;
14
  width: $content-width;
Jyothish's avatar
Jyothish committed
15 16 17 18 19
  padding: 0;
  margin-top: 40px;
  margin-bottom: 20px;
}

Imran Salam's avatar
Imran Salam committed
20 21
.proteinSummaryTop {
  display: grid;
22 23
  grid-template-columns: [references] 350px [download] 345px;
  align-items: start;
Imran Salam's avatar
Imran Salam committed
24 25 26 27 28 29
}

.downloadWrapper {
  display: flex;
  justify-content: flex-end;
  grid-column: download;
30 31
}

32 33
.proteinExternalReference {
  &:first-child {
34
    margin-right: 16px;
35
  }
Imran Salam's avatar
Imran Salam committed
36 37 38 39
}

.proteinFeaturesCountWrapper {
  display: inline-block;
40
}
41

42 43 44
.proteinStatsWrapper {
  display: flex;
}
45 46 47 48 49 50 51 52 53

.imageLoadingContainer {
  width: $content-width;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 177px;
}

54 55
.statusContainer {
  height: 50px;
56 57 58
  display: flex;
  align-items: center;
  justify-content: center;
59 60
  margin-top: 40px;
}
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

.xrefWithChevron {
  display: flex;
}

.xrefGroupChevron {
  text-align: right;
  padding-right: 2px;
  cursor: pointer;
  font-weight: $normal;
  min-width: 50px;
}

.chevron {
  margin-left: 6px;
  margin-bottom: -1px;
  height: 12px;
  width: 12px;
  transition: transform linear 0.2s;
  &Up {
    transform: rotate(-180deg);
  }
}

.xrefCountChevronOpen {
  color: $medium-dark-grey;
}

.xrefsWrapper {
  padding-bottom: 10px;

  &:first-child {
    padding-top: 6px;
  }
}