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   .logged-in-block {
  13     height: 100px;
  14     background-color: rgba(255, 255, 255, 0.15);
  15     display: flex;
  16     align-items: center;
  17     justify-content: center;
  18     margin-bottom: 35px;
  19
  20     img {
  21       margin-left: 20px;
  22       margin-right: 10px;
  23
  24       @include avatar(34px);
  25     }
  26
  27     .logged-in-info {
  28       flex-grow: 1;
  29
  30       .logged-in-username {
  31         font-size: 16px;
  32         font-weight: $font-semibold;
  33         color: $menu-color;
  34         cursor: pointer;
  35
  36         @include disable-default-a-behaviour;
  37       }
  38
  39       .logged-in-email {
  40         font-size: 13px;
  41         color: #C6C6C6;
  42         white-space: nowrap;
  43         overflow: hidden;
  44         text-overflow: ellipsis;
  45         max-width: 140px;
  46       }
  47     }
  48
  49     .logged-in-more {
  50       margin-right: 20px;
  51
  52       .glyphicon {
  53         cursor: pointer;
  54         font-size: 18px;
  55       }
  56     }
  57   }
  58
  59   .button-block {
  60     margin: 30px 25px 35px 25px;
  61
  62     .login-button, .create-account-button {
  63       font-weight: $font-semibold;
  64       font-size: 15px;
  65       height: $button-height;
  66       line-height: $button-height;
  67       width: 100%;
  68       border-radius: 3px;
  69       text-align: center;
  70       color: $menu-color;
  71       display: block;
  72       cursor: pointer;
  73       margin-bottom: 15px;
  74
  75       @include disable-default-a-behaviour;
  76
  77       &.login-button {
  78         background-color: $orange-color;
  79         margin-bottom: 10px;
  80       }
  81
  82       &.create-account-button {
  83         background-color: rgba(255, 255, 255, 0.25);
  84       }
  85     }
  86   }
  87
  88   .block-title {
  89     text-transform: uppercase;
  90     font-weight: $font-bold; // Bold
  91     font-size: 13px;
  92     margin-bottom: 25px;
  93   }
  94
  95   .panel-block {
  96     margin-bottom: 45px;
  97     margin-left: 26px;
  98
  99     a {
 100       display: flex;
 101       color: $menu-color;
 102       cursor: pointer;
 103       height: 22px;
 104       line-height: 22px;
 105       font-size: 16px;
 106       margin-bottom: 15px;
 107       @include disable-default-a-behaviour;
 108
 109       .icon {
 110         @include icon(22px);
 111
 112         margin-right: 18px;
 113
 114         &.icon-videos-trending {
 115           position: relative;
 116           top: -2px;
 117           background-image: url('../../assets/images/menu/trending.svg');
 118         }
 119
 120         &.icon-videos-recently-added {
 121           width: 23px;
 122           height: 23px;
 123           position: relative;
 124           top: -1px;
 125           background-image: url('../../assets/images/menu/recently-added.svg');
 126         }
 127
 128         &.icon-administration {
 129           width: 23px;
 130           height: 23px;
 131
 132           background-image: url('../../assets/images/menu/administration.svg');
 133         }
 134       }
 135     }
 136   }
 137 }
 138
 139 @media screen and (max-width: 800px) {
 140   menu {
 141     .logged-in-block {
 142       padding-left: 10px;
 143
 144       img {
 145         display: none;
 146       }
 147
 148       .logged-in-info {
 149         .logged-in-username {
 150           font-size: 14px;
 151         }
 152
 153         .logged-in-email {
 154           font-size: 11px;
 155           max-width: 120px;
 156         }
 157       }
 158
 159       .logged-in-more {
 160         margin-right: 5px;
 161
 162         .login-button, .create-account-button {
 163           font-weight: $font-semibold;
 164           font-size: 15px;
 165           height: $button-height;
 166           line-height: $button-height;
 167           width: 190px;
 168         }
 169       }
 170     }
 171
 172     .button-block {
 173       margin: 20px 10px 25px 10px;
 174
 175       .login-button, .create-account-button {
 176         font-size: 13px;
 177       }
 178     }
 179
 180     .panel-block {
 181       margin-bottom: 30px;
 182       margin-left: 10px;
 183
 184       a {
 185         font-size: 14px;
 186
 187         .icon {
 188           margin-right: 10px;
 189         }
 190       }
 191     }
 192   }
 193 }