StandardAppLayout.scss 2.91 KB
Newer Older
Andrey Azov's avatar
Andrey Azov committed
1 2
@import 'src/styles/common';

Andrey Azov's avatar
Andrey Azov committed
3 4 5
$headerHeight: 79px; // launchbar height + topbar height
$appbarHeight: 80px;
$availableScreenHeight: calc(100vh - #{$headerHeight} - #{$appbarHeight});
6 7 8
$sidebarContentWidth: 320px;
$sidebarToolstripWidth: 46px;
$topbarHeight: 38px;
Andrey Azov's avatar
Andrey Azov committed
9 10 11
$drawerWindowWidth: 45px;

.standardAppLayout {
Andrey Azov's avatar
Andrey Azov committed
12
  height: $availableScreenHeight;
13
  min-height: 550px; // based on the current interface of genome browser
Andrey Azov's avatar
Andrey Azov committed
14 15 16
  overflow: hidden;
}

17 18
.topbar {
  height: $topbarHeight;
Andrey Azov's avatar
Andrey Azov committed
19 20 21 22
  background: $light-grey;
  box-shadow: 0 2px 3px $grey;
  position: relative;
  padding-left: 18px;
23
  width: 100%;
24
  z-index: 10;
25 26 27 28

  &_withSidebarNavigation {
    display: grid;
    align-items: center;
29 30
    grid-template-columns: 1fr $sidebarContentWidth;
    grid-column-gap: $sidebarToolstripWidth;
31 32 33 34 35 36 37 38 39 40
  }

  &_withoutSidebarNavigation {
    display: flex;
    align-items: center;

    & > div {
      padding-right: 1em;
    }
  }
Andrey Azov's avatar
Andrey Azov committed
41 42 43
}

.mainWrapper {
44
  height: calc(100% - #{$topbarHeight});
Andrey Azov's avatar
Andrey Azov committed
45 46 47 48 49
  position: relative;
}

.main {
  height: 100%;
Andrey Azov's avatar
Andrey Azov committed
50
  overflow: auto;
Andrey Azov's avatar
Andrey Azov committed
51 52

  &Default {
53
    margin-right: calc(#{$sidebarContentWidth} + #{$sidebarToolstripWidth});
Andrey Azov's avatar
Andrey Azov committed
54 55 56
  }

  &FullWidth {
57
    margin-right: $sidebarToolstripWidth;
Andrey Azov's avatar
Andrey Azov committed
58 59 60
  }
}

61
.sidebarWrapper {
Andrey Azov's avatar
Andrey Azov committed
62 63 64 65 66 67
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
68
  z-index: 5;
Andrey Azov's avatar
Andrey Azov committed
69 70 71 72
  transition: transform 0.3s ease-in-out;

  &Open {
    transform: translateX(
73
      calc(100% - #{$sidebarContentWidth} - #{$sidebarToolstripWidth})
Andrey Azov's avatar
Andrey Azov committed
74 75 76 77
    );
  }

  &DrawerOpen {
78
    transform: translateX(#{$drawerWindowWidth});
Andrey Azov's avatar
Andrey Azov committed
79 80 81
  }

  &Closed {
82
    transform: translateX(calc(100% - #{$sidebarToolstripWidth}));
Andrey Azov's avatar
Andrey Azov committed
83 84 85
  }
}

86 87 88 89
.instantaneous {
  transition: none;
}

90
.sidebar {
Andrey Azov's avatar
Andrey Azov committed
91 92
  flex: 0 0 auto;
  height: 100%;
93
  width: $sidebarContentWidth;
Andrey Azov's avatar
Andrey Azov committed
94 95 96
  border-left: 1px solid $grey;
  padding: 15px;
  background-color: white;
97
  overflow: auto;
Andrey Azov's avatar
Andrey Azov committed
98 99
}

100
.sidebarToolstrip {
101
  padding: 20px 0 30px;
Andrey Azov's avatar
Andrey Azov committed
102 103 104 105
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
106
  width: $sidebarToolstripWidth;
Andrey Azov's avatar
Andrey Azov committed
107 108 109 110 111 112 113 114 115 116 117 118
  height: 100%;
  background: $light-grey;
  border-left: 1px solid $grey;
}

.sidebarToolstripContent {
  overflow-x: hidden;
}

.sidebarModeToggle {
  width: 22px;
  height: 22px;
119
  margin-bottom: 55px;
Andrey Azov's avatar
Andrey Azov committed
120 121 122 123
}

.sidebarModeToggleChevron {
  cursor: pointer;
124
  fill: $blue;
Andrey Azov's avatar
Andrey Azov committed
125 126 127 128 129 130 131 132 133 134 135 136

  &Open {
    transform: rotate(180deg);
  }
}

.sidebarTabs {
  display: flex;
  justify-content: space-around;
  padding: 0 15px;
}

137 138 139 140 141 142
.sidebarIcon {
  width: 22px;
  height: 22px;
  margin: 6px 6px 23px;
}

Andrey Azov's avatar
Andrey Azov committed
143 144 145 146
.drawer {
  height: 100%;
  flex-grow: 1;
  position: relative;
147
  padding: 15px calc(#{$drawerWindowWidth} + 26px) 15px 30px;
Andrey Azov's avatar
Andrey Azov committed
148 149 150 151 152
  border-left: solid $medium-light-grey 1px;
  background-color: white;
}

.drawerWindow {
153 154 155 156
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100%);
Andrey Azov's avatar
Andrey Azov committed
157 158 159 160 161 162
  width: $drawerWindowWidth;
  height: 100%;
}

.drawerClose {
  position: absolute;
163
  right: calc(#{$drawerWindowWidth} + 10px);
Andrey Azov's avatar
Andrey Azov committed
164 165 166 167 168
  top: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}