ecomp-portal-FE/client/app/directives/right-menu/right-menu.less

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20  /**
  21  * Created by nnaffar on 1/28/16.
  22  */
  23 @sidebar-width: 200px;
  24 @transition-duration: 0.25s;
  25 @overlayer-opacity: 0.65;
  26
  27
  28 .close-button {
  29   //width: @sidebar-width;
  30   .a24r;
  31   //.bg_u;
  32   font-size: 3em;
  33   line-height: 18px;
  34   position: absolute;
  35   cursor: pointer;
  36   vertical-align: middle;
  37   top: @second-level-top;
  38   left: 0;
  39   -webkit-font-smoothing: antialiased;
  40   height: 53px;
  41   z-index: 101;
  42   //box-shadow: 0 4px 5px rgba(0, 0, 0, .2);
  43
  44 }
  45 .ecomp-right-sidebar-container{
  46   position: absolute;
  47   display: block;
  48   left: 0;
  49   z-index: 100;
  50   transition: left @transition-duration;
  51   margin-top: -15px;
  52
  53   .ecomp-sidebar-main {
  54     //background-color: ;
  55     position: absolute;
  56     margin-top: 65px;
  57     width: @sidebar-width;
  58     height: 100vh;
  59     .bg_u;//white for 1610
  60     //.bg_w;  // gray for 1702
  61     box-shadow: 0 4px 5px rgba(0, 0, 0, .2);
  62
  63     padding-right: 10px;
  64     padding-left: 10px;
  65
  66     .accordion-container{
  67       margin-top: 45px;
  68     }
  69     .att-accordion-font{
  70       font-size: .875rem;
  71       color: #666;
  72       display: inline-block;
  73       font-family: arial;
  74
  75     }
  76
  77     .att-accordion-active{
  78       color: #199DDF !important;
  79     }
  80
  81     .sub-item{
  82       .att-accordion-font;
  83       cursor: pointer;
  84       height: 37px;
  85       line-height: 37px;
  86       padding-left: 20px;
  87       padding-bottom: 10px;
  88       vertical-align: middle;
  89       width: 100%;
  90     }
  91     .sub-item:hover{
  92       .att-accordion-active;
  93     }
  94
  95     .parent-item{
  96       .att-accordion-font;
  97       border-bottom: 1px solid #bbb;
  98       cursor: pointer;
  99       height: 37px;
 100       line-height: 37px;
 101       padding-bottom: 10px;
 102       vertical-align: middle;
 103       width: 100%;
 104     }
 105     .parent-item:hover{
 106       .att-accordion-active;
 107     }
 108
 109   }
 110 }
 111
 112 .open-sidebar {
 113   right: 0;
 114   transition: right .25s ease-in-out;
 115    -moz-transition: right .25s ease-in-out;
 116    -webkit-transition: right .25s ease-in-out;
 117 }
 118
 119 .close-sidebar {
 120   right: -@sidebar-width;
 121   transition: right .25s ease-in-out;
 122    -moz-transition: right .25s ease-in-out;
 123    -webkit-transition: right .25s ease-in-out;
 124 }
 125
 126 .content-overlayed {
 127   position: fixed;
 128   top: 110px;
 129   right: 0;
 130   bottom: 0;
 131   left: 0;
 132   background: none repeat scroll 0 0 rgb(242, 242, 242);
 133   z-index: 9999;
 134 }
 135 .fade-animation{
 136   opacity: @overlayer-opacity;
 137   transition: opacity @transition-duration ease-in-out;
 138 }
 139 .fade-animation.ng-hide {
 140   opacity:0;
 141   transition: opacity @transition-duration ease-in-out;
 142 }
 143
 144 .activeUserIcon {
 145         transition: all .2s ease-in-out;
 146         display: block;
 147         margin-left: auto; margin-right: auto; height:55px; width:55px; border-radius: 50%;
 148
 149 }
 150 .activeUserIcon:hover { transform: scale(1.5); }
 151
 152 .ecomp-right-sidebar-toggle{
 153         position: absolute;
 154         top: 400px;
 155         right: 35px;
 156 }
 157
 158 .open-sidebar-toggle {
 159  // right: 0;
 160   transition: right .25s ease-in-out;
 161    -moz-transition: right .25s ease-in-out;
 162    -webkit-transition: right .25s ease-in-out;
 163 }
 164
 165 .close-sidebar-toggle {
 166   right: -36px;
 167   transition: right .25s ease-in-out;
 168    -moz-transition: right .25s ease-in-out;
 169    -webkit-transition: right .25s ease-in-out;
 170 }
 171
 172 .ecomp-right-sidebar-title{
 173         font-family: arial;
 174         font-size: 14px;
 175         color: #ef6f00;
 176         margin-bottom:20px;
 177         text-align: center;
 178 }