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