src/features/app/components/Main/Main.scss

   1 .main {
   2   display: flex;
   3   flex-direction: column;
   4   flex: 1;
   5 }
   6
   7 .sidebar {
   8   width: $sidebar-width;
   9   position: fixed;
  10   z-index: 10;
  11 }
  12
  13 .content {
  14   width: 100%;
  15   background: $background-content-color;
  16   padding-left: $sidebar-width;
  17 }
  18
  19 .sidebarContent {
  20   background-color: $background-inverse-color;
  21   position: fixed;
  22   width: $sidebar-width;
  23   height: 100%;
  24   padding-bottom: 30px;
  25
  26   overflow-y: auto;
  27   -ms-overflow-style: none; // MS Edge fix
  28
  29   z-index: 10;
  30 }
  31
  32 .version {
  33   position: fixed;
  34   width: $sidebar-width;
  35   bottom: 0;
  36   border-top: solid 1px $border-inverse-color;
  37
  38   padding: $gutter-size/2 $gutter-size;
  39   background: $background-inverse-color;
  40   font-size: $font-size-chrome;
  41 }
  42
  43 .logo {
  44   border-bottom: 1px solid $border-inverse-color;
  45   height: $title-height;
  46   padding-left: $gutter-size;
  47   display: flex;
  48   align-items: center;
  49
  50   img {
  51     width: 100px;
  52     height: 23.86px;
  53   }
  54 }
  55
  56 .settings {
  57   cursor: pointer;
  58   line-height: $title-height;
  59   padding-right: 10px;
  60   position: absolute;
  61   right: 0;
  62   top: 0;
  63
  64   img {
  65     width: 28px;
  66     height: 28px;
  67   }
  68 }
  69
  70 .languagesContainer {
  71   position: absolute;
  72   right: 38px;
  73   top: 0px;
  74   height: 60px;
  75 }
  76
  77 .languages {
  78   top: 50%;
  79   transform: translateY(-50%);
  80   border: none;
  81   background-color: transparentize($background-content-color, 0.9);
  82   color: $background-content-color;
  83   height: 27px;
  84   line-height: 27px !important;
  85 }
  86
  87 .connectionIssue {
  88   padding: $gutter-size/2;
  89   text-align: center;
  90   background: $highlight-danger-background;
  91   color: $highlight-danger;
  92   border-bottom: 1px solid $highlight-danger;
  93 }
  94
  95 .languagesMenu {
  96   right: -26px;
  97 }