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

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