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 .logo {
  33   border-bottom: 1px solid $border-inverse-color;
  34   height: $title-height;
  35   padding-left: $gutter-size;
  36   display: flex;
  37   align-items: center;
  38
  39   img {
  40     width: 100px;
  41     height: 23.86px;
  42   }
  43 }
  44
  45 .settings {
  46   cursor: pointer;
  47   line-height: $title-height;
  48   padding-right: 10px;
  49   position: absolute;
  50   right: 0;
  51   top: 0;
  52
  53   img {
  54     width: 28px;
  55     height: 28px;
  56   }
  57 }
  58
  59 .languagesContainer {
  60   position: absolute;
  61   right: 38px;
  62   top: 0px;
  63   height: 60px;
  64 }
  65
  66 .languages {
  67   top: 50%;
  68   transform: translateY(-50%);
  69   border: none;
  70   background-color: transparentize($background-content-color, 0.9);
  71   color: $background-content-color;
  72   height: 27px;
  73   line-height: 27px !important;
  74 }
  75
  76 .connectionIssue {
  77   padding: $gutter-size/2;
  78   text-align: center;
  79   background: $highlight-danger-background;
  80   color: $highlight-danger;
  81   border-bottom: 1px solid $highlight-danger;
  82 }
  83
  84 .languagesMenu {
  85   right: -26px;
  86 }