ui/legacy/css/src/scss/components/navigation.scss

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

#navigation {
  position: relative;
  float: left;
  width: 230px;
  /*+box-shadow:inset -1px 4px 7px #DDDDDD;*/
  box-shadow: inset -1px 4px 7px #dddddd;
  background: #ede8e8;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjZWRlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==');
  background: -moz-linear-gradient(top, #ffffff 0%, #ede8e8 6%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(6%, #ede8e8));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ede8e8 6%);
  background: -o-linear-gradient(top, #ffffff 0%, #ede8e8 6%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ede8e8 6%);
  background: linear-gradient(to bottom, #ffffff 0%, #ede8e8 6%);
  -moz-box-shadow: inset -1px 4px 7px #dddddd;
  -webkit-box-shadow: inset -1px 4px 7px #dddddd;
  -o-box-shadow: inset -1px 4px 7px #dddddd;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ede8e8', GradientType=0);
}

.project-view #navigation {
  background: #6d747d;
}

#navigation ul {
  height: 700px;
  padding-top: 29px;
}

.project-view #navigation ul {
  border-right: 1px solid #464c53;
  background: #6d747d;
}

#navigation ul li {
  height: 42px;
  border-bottom: 1px solid #d2d2d2;
  cursor: pointer;
}

.project-view #navigation ul li {
  border: 0;
  background-image: url('../images/bg-nav-item-project-view.png');
  background-position: 0 0;
}

.project-view #navigation ul li span {
  color: #ffffff;
  /*+text-shadow:0px 1px 1px #000000;*/
  text-shadow: 0 1px 1px #000000;
  -moz-text-shadow: 0 1px 1px #000000;
  -webkit-text-shadow: 0 1px 1px #000000;
  -o-text-shadow: 0 1px 1px #000000;
}

#navigation ul li:hover,
#navigation ul li.active {
  width: 230px;
  box-shadow: inset 0 0 7px #000000;
  /*+box-shadow:inset 0px 0px 7px #000000;*/
  background: #2c5d7b;
  -moz-box-shadow: inset 0 0 7px #000000;
  -webkit-box-shadow: inset 0 0 7px #000000;
  -o-box-shadow: inset 0 0 7px #000000;
}

#navigation ul li.disabled {
  /*+opacity:60%;*/
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  -moz-opacity: 0.6;
}

.project-view #navigation ul li:hover,
.project-view #navigation ul li.active {
  width: 230px;
  background: url('../images/bg-nav-item-active-project-view.png');
  background-position: 0 0;
}

.project-view #navigation ul li.disabled:hover {
  background: #d5d5d5;
  color: #596d7f;
  cursor: default;
}

#navigation ul li:hover span,
#navigation ul li.active span {
  color: #ffffff;
  /*+text-shadow:0px 1px #000000;*/
  text-shadow: 0 1px #000000;
  -moz-text-shadow: 0 1px #000000;
  -webkit-text-shadow: 0 1px #000000;
  -o-text-shadow: 0 1px #000000;
}

#navigation ul li.disabled:hover {
  cursor: not-allowed !important;
}

#navigation ul li.disabled:hover span {
  color: #596d7f;
  /*+text-shadow:0px 0px;*/
  text-shadow: 0 0;
  -moz-text-shadow: 0 0;
  -webkit-text-shadow: 0 0;
  -o-text-shadow: 0 0;
  -moz-text-shadow: 0 0 none;
  -webkit-text-shadow: 0 0 none;
  -o-text-shadow: 0 0 none;
  -moz-text-shadow: none;
  -webkit-text-shadow: none;
  -o-text-shadow: none;
}

#navigation ul li.last {
  background-repeat: repeat;
  background-position: 0 0;
  /*[empty]color:;*/
}

#navigation ul li span {
  /*+placement:shift 14px 13px;*/
  position: relative;
  top: 13px;
  left: 14px;
  padding-left: 19px;
  font-size: 12px;
  color: #515151;
  /*+text-shadow:0px 1px #FFFFFF;*/
  text-shadow: 0 1px #ffffff;
  -moz-text-shadow: 0 1px #ffffff;
  -webkit-text-shadow: 0 1px #ffffff;
  -o-text-shadow: 0 1px #ffffff;
}

#navigation ul li span.icon {
  position: relative;
  top: 10px;
  /*+placement:shift 17px 10px;*/
  left: 17px;
  padding: 16px 16px 13px;
  background: url('../images/icons.png') no-repeat 0 0;
}

#navigation ul li.custom-icon span.icon {
  display: block;
  position: relative;
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -47px;
  background: none;
}

#navigation ul li.custom-icon span.icon img {
  position: relative;
  position: absolute;
  float: left;
  /*+placement:shift -6px -17px;*/
  top: -17px;
  left: -6px;
  width: 50px;
  height: 50px;
  margin-right: -14px;
}

/*Navigation icons*/
#navigation ul li.dashboard span.icon,
#navigation ul li.dashboard-user span.icon {
  background-position: -14px -18px;
}

#navigation ul li.dashboard:hover span.icon,
#navigation ul li.dashboard-user:hover span.icon span.icon,
#navigation ul li.dashboard.active span.icon,
#navigation ul li.dashboard-user.active span.icon span.icon {
  background-position: -23px -687px;
}

#navigation ul li.instances span.icon {
  background-position: -73px -18px;
}

#navigation ul li.instances.active span.icon,
#navigation ul li.instances:hover span.icon {
  background-position: -82px -686px;
}

#navigation ul li.vmsnapshots span.icon {
  background: url('../images/sprites.png') no-repeat -34px -666px;
}

#navigation ul li.affinityGroups span.icon {
  background-position: -73px -87px;
}

#navigation ul li.affinityGroups.active span.icon,
#navigation ul li.affinityGroups:hover span.icon {
  background-position: -82px -755px;
}

#navigation ul li.storage span.icon {
  background-position: -127px -19px;
}

#navigation ul li.storage.active span.icon,
#navigation ul li.storage:hover span.icon {
  background-position: -137px -687px;
}

#navigation ul li.network span.icon {
  background-position: -180px -20px;
}

#navigation ul li.network.active span.icon,
#navigation ul li.network:hover span.icon {
  background-position: -189px -690px;
}

#navigation ul li.templates span.icon {
  background-position: -233px -21px;
}

#navigation ul li.templates.active span.icon,
#navigation ul li.templates:hover span.icon {
  background-position: -242px -690px;
}

#navigation ul li.projects span.icon {
  background-position: -294px -21px;
}

#navigation ul li.projects.active span.icon,
#navigation ul li.projects:hover span.icon {
  background-position: -303px -690px;
}

#navigation ul li.events span.icon {
  background-position: -351px -23px;
}

#navigation ul li.events.active span.icon,
#navigation ul li.events:hover span.icon {
  background-position: -359px -692px;
}

#navigation ul li.configuration span.icon {
  background-position: -401px -21px;
}

#navigation ul li.configuration.active span.icon,
#navigation ul li.configuration:hover span.icon {
  background-position: -410px -690px;
}

#navigation ul li.global-settings span.icon {
  background-image: url('../images/sprites.png');
  background-position: -143px -240px;
}

#navigation ul li.global-settings.active span.icon,
#navigation ul li.global-settings:hover span.icon {
  background-image: url('../images/sprites.png');
  background-position: -366px -239px;
}

#navigation ul li.roles span.icon {
  background-position: -460px -80px;
}

#navigation ul li.roles.active span.icon,
#navigation ul li.roles:hover span.icon {
  background-position: -469px -750px;
}

#navigation ul li.accounts span.icon {
  background-position: -458px -19px;
}

#navigation ul li.accounts.active span.icon,
#navigation ul li.accounts:hover span.icon {
  background-position: -467px -688px;
}

#navigation ul li.system span.icon {
  background-position: -569px -24px;
}

#navigation ul li.system.active span.icon,
#navigation ul li.system:hover span.icon {
  background-position: -578px -692px;
}

#navigation ul li.domains span.icon {
  background-position: -520px -21px;
}

#navigation ul li.domains.active span.icon,
#navigation ul li.domains:hover span.icon {
  background-position: -529px -690px;
}

#navigation ul li.plugins span.icon {
  background: url('../images/sprites.png') no-repeat -140px -291px;
}

#navigation ul li.regions span.icon {
  background: url('../images/sprites.png') no-repeat -141px -379px;
}

#navigation ul li.regions.active span.icon,
#navigation ul li.regions:hover span.icon {
  background: url('../images/sprites.png') no-repeat -365px -377px;
}