client/src/app/menu/menu.component.scss

   1 menu {
   2   background-color: $black-background;
   3   margin: 0;
   4   padding: 0;
   5   height: 100%;
   6   white-space: nowrap;
   7   text-overflow: ellipsis;
   8   overflow: hidden;
   9   z-index: 1000;
  10   color: $menu-color;
  11
  12   @media screen and (max-width: 550px) {
  13     font-size: 90%;
  14   }
  15
  16   .logged-in-block {
  17     height: 100px;
  18     background-color: rgba(255, 255, 255, 0.15);
  19     display: flex;
  20     align-items: center;
  21     justify-content: center;
  22     margin-bottom: 35px;
  23
  24     img {
  25       margin-left: 20px;
  26       margin-right: 10px;
  27
  28       @include avatar(34px);
  29     }
  30
  31     .logged-in-info {
  32       flex-grow: 1;
  33
  34       .logged-in-username {
  35         font-size: 16px;
  36         font-weight: $font-semibold;
  37         color: $menu-color;
  38         cursor: pointer;
  39
  40         @include disable-default-a-behaviour;
  41       }
  42
  43       .logged-in-email {
  44         font-size: 13px;
  45         color: #C6C6C6;
  46         white-space: nowrap;
  47         overflow: hidden;
  48         text-overflow: ellipsis;
  49         max-width: 140px;
  50       }
  51     }
  52
  53     .logged-in-more {
  54       margin-right: 20px;
  55
  56       .glyphicon {
  57         cursor: pointer;
  58         font-size: 18px;
  59       }
  60     }
  61   }
  62
  63   .button-block {
  64     margin: 30px 25px 35px 25px;
  65
  66     .login-button, .create-account-button {
  67       font-weight: $font-semibold;
  68       font-size: 15px;
  69       height: $button-height;
  70       line-height: $button-height;
  71       width: 190px;
  72       border-radius: 3px;
  73       text-align: center;
  74       color: $menu-color;
  75       display: block;
  76       cursor: pointer;
  77       margin-bottom: 15px;
  78
  79       @include disable-default-a-behaviour;
  80
  81       &.login-button {
  82         background-color: $orange-color;
  83         margin-bottom: 10px;
  84       }
  85
  86       &.create-account-button {
  87         background-color: rgba(255, 255, 255, 0.25);
  88       }
  89     }
  90   }
  91
  92   .block-title {
  93     text-transform: uppercase;
  94     font-weight: $font-bold; // Bold
  95     font-size: 13px;
  96     margin-bottom: 25px;
  97   }
  98
  99   .panel-block {
 100     margin-bottom: 45px;
 101     margin-left: 26px;
 102
 103     a {
 104       display: flex;
 105       color: $menu-color;
 106       cursor: pointer;
 107       height: 22px;
 108       line-height: 22px;
 109       font-size: 16px;
 110       margin-bottom: 15px;
 111       @include disable-default-a-behaviour;
 112
 113       .icon {
 114         @include icon(22px);
 115
 116         margin-right: 18px;
 117
 118         &.icon-videos-trending {
 119           position: relative;
 120           top: -2px;
 121           background-image: url('../../assets/images/menu/trending.svg');
 122         }
 123
 124         &.icon-videos-recently-added {
 125           width: 23px;
 126           height: 23px;
 127           position: relative;
 128           top: -1px;
 129           background-image: url('../../assets/images/menu/recently-added.svg');
 130         }
 131
 132         &.icon-administration {
 133           width: 23px;
 134           height: 23px;
 135
 136           background-image: url('../../assets/images/menu/administration.svg');
 137         }
 138       }
 139     }
 140   }
 141 }