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     .logged-in-info {
  25       flex-grow: 1;
  26       margin-left: 40px;
  27
  28       .logged-in-username {
  29         font-size: 16px;
  30         font-weight: $font-semibold;
  31         color: $menu-color;
  32         cursor: pointer;
  33
  34         @include disable-default-a-behaviour;
  35       }
  36
  37       .logged-in-email {
  38         font-size: 13px;
  39         color: #C6C6C6;
  40       }
  41     }
  42
  43     .logged-in-more {
  44       margin-right: 20px;
  45
  46       .glyphicon {
  47         cursor: pointer;
  48         font-size: 18px;
  49       }
  50     }
  51   }
  52
  53   .button-block {
  54     margin: 30px 25px 35px 25px;
  55
  56     .login-button, .create-account-button {
  57       font-weight: $font-semibold;
  58       font-size: 15px;
  59       height: $button-height;
  60       line-height: $button-height;
  61       width: 190px;
  62       border-radius: 3px;
  63       text-align: center;
  64       color: $menu-color;
  65       display: block;
  66       cursor: pointer;
  67       margin-bottom: 15px;
  68
  69       @include disable-default-a-behaviour;
  70
  71       &.login-button {
  72         background-color: $orange-color;
  73         margin-bottom: 10px;
  74       }
  75
  76       &.create-account-button {
  77         background-color: rgba(255, 255, 255, 0.25);
  78       }
  79     }
  80   }
  81
  82   .block-title {
  83     text-transform: uppercase;
  84     font-weight: $font-bold; // Bold
  85     font-size: 13px;
  86     margin-bottom: 25px;
  87   }
  88
  89   .panel-block {
  90     margin-bottom: 45px;
  91     margin-left: 26px;
  92
  93     a {
  94       display: flex;
  95       color: $menu-color;
  96       cursor: pointer;
  97       height: 22px;
  98       line-height: 22px;
  99       font-size: 16px;
 100       margin-bottom: 15px;
 101       @include disable-default-a-behaviour;
 102
 103       .icon {
 104         width: 22px;
 105         height: 22px;
 106         display: inline-block;
 107         margin-right: 18px;
 108         background-size: contain;
 109
 110         &.icon-videos-trending {
 111           position: relative;
 112           top: -2px;
 113           background-image: url('../../assets/menu/trending.svg');
 114         }
 115
 116         &.icon-videos-recently-added {
 117           width: 23px;
 118           height: 23px;
 119           position: relative;
 120           top: -1px;
 121           background-image: url('../../assets/menu/recently-added.svg');
 122         }
 123
 124         &.icon-administration {
 125           width: 23px;
 126           height: 23px;
 127
 128           background-image: url('../../assets/menu/administration.svg');
 129         }
 130       }
 131     }
 132   }
 133 }