ui/css/src/scss/components/toolbar.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.

div.toolbar {
  position: relative;
  position: absolute;
  /*+box-shadow:0px 1px 4px #CFCFCF;*/
  z-index: $z-index-toolbar;
  top: -1px;
  top: 0;
  left: 0;
  /*+placement:shift 0px -1px;*/
  width: 100%;
  height: 32px;
  box-shadow: 0 1px 4px #cfcfcf;
  background: #ececec 0 -6px;
  -moz-box-shadow: 0 1px 4px #cfcfcf;
  -webkit-box-shadow: 0 1px 4px #cfcfcf;
  -o-box-shadow: 0 1px 4px #cfcfcf;
}

.detail-view .ui-tabs-panel div.toolbar {
  width: 968px;
  margin-top: 8px;
  border: 0;
  background: transparent;
}

.project-view div.toolbar {
  background: #808080 url('../images/bg-nav-item-active-project-view.png') 0 -210px;
}

div.toolbar div.filters {
  margin: 5px 0 0 12px;
}

div.toolbar div.filters label {
  display: block;
  float: left;
  padding: 5px 11px 0 0;
  font-size: 12px;
  font-weight: 100;
  color: #3f3b3b;
}

.project-view div.toolbar div.filters label {
  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;
}

div.toolbar div.filters select {
  width: 142px;
  border: 1px solid #808080;
}

div.toolbar div.text-search {
  position: relative;
  float: right;
}

div.toolbar div.text-search div.search-bar {
  position: relative;
  z-index: $z-index-search;
  float: left;
  width: 141px;
  height: 20px;
  margin: 5px 0 0 12px;
  border: 1px solid #8b7e7e;
  border-right: 1px solid #8b8989;
  border-radius: 4px 0 0 4px;
  /*+border-radius:4px 0 0 4px;*/
  background: #ffffff;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  -khtml-border-radius: 4px 0 0 4px;
}

div.toolbar div.text-search div.search-bar input {
  float: left;
  width: 90%;
  height: 68%;
  margin: 1px 0 0;
  border: 0;
}

div.toolbar div.text-search div.search-bar div.filter {
  float: left;
  width: 74px;
  height: 15px;
  margin: 2px 0 0;
  padding: 1px;
  border-left: 1px solid #6d6d6d;
  background: #ffffff;
  font-size: 12px;
  text-align: center;
}

div.toolbar div.button.search {
  position: relative;
  z-index: $z-index-system-chart2;
  top: 5px;
  /*+placement:shift -10px 5px;*/
  left: -10px;
  width: 33px;
  height: 22px;
  background: url('../images/sprites.png') no-repeat -592px -328px;
  cursor: pointer;
}

div.toolbar div.button.search:hover {
  background-position: -592px -359px;
}

div.toolbar div.button.add,
div.toolbar div.button.refresh,
div.toolbar div.button.add,
div.toolbar div.button.main-action,
.toolbar div.button.header-action,
.detail-group .button.add {
  /*+placement:shift 0px 5px;*/
  position: relative;
  float: right;
  top: 5px;
  left: 0;
  height: 12px;
  margin: 0 10px 0 0;
  padding: 5px 5px 5px 5px;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  /*+text-shadow:0px 1px 1px #DEE5EA;*/
  border-radius: 4px 4px 4px 4px;
  background: #eaeaea;
  background: #f7f7f7;
  background: rgb(247, 247, 247);
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
  background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(234, 234, 234, 1)));
  background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%);
  background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%);
  background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%);
  background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%);
  font-size: 12px;
  font-weight: 100;
  color: #000000;
  text-shadow: 0 1px 1px #dee5ea;
  cursor: pointer;
  -moz-text-shadow: 0 1px 1px #dee5ea;
  /*+border-radius:4px;*/
  -webkit-text-shadow: 0 1px 1px #dee5ea;
  -o-text-shadow: 0 1px 1px #dee5ea;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
}

div.toolbar div.button.export:hover,
div.toolbar div.button.add:hover,
div.toolbar div.button.refresh:hover,
div.toolbar div.button.main-action:hover,
.toolbar div.button.header-action:hover,
.detail-group .button.add:hover {
  box-shadow: inset 0 0 5px #c3c3c3;
  /*+box-shadow:inset 0px 0px 5px #C3C3C3;*/
  background: #e5e5e5;
  -moz-box-shadow: inset 0 0 5px #c3c3c3;
  -webkit-box-shadow: inset 0 0 5px #c3c3c3;
  -o-box-shadow: inset 0 0 5px #c3c3c3;
}

div.toolbar div.button.main-action span.icon {
  display: block;
  position: relative;
  float: left;
  top: -7px;
  left: 0;
  width: 34px;
  /*+placement:shift 0px -7px;*/
  height: 20px;
  background-image: url('../images/sprites.png');
  cursor: pointer;
}

div.toolbar div.button.refresh {
  float: right;
  margin: 0 20px 0 0;
}

div.toolbar div.button.refresh span {
  padding: 1px 1px 1px 16px;
  background-image: url('../images/icons.png');
  background-repeat: no-repeat;
  background-position: -629px -232px;
}

div.toolbar div.button.add span,
.detail-group .button.add span.icon {
  position: relative;
  top: 0;
  /*+placement:shift 0px 0px;*/
  left: 0;
  padding: 0 0 3px 18px;
  background: url('../images/icons.png') no-repeat -626px -209px;
}

#browser div.panel.selected div.toolbar {
  border-right: 1px solid #43586b;
}

#browser div.panel div.detail-view .toolbar {
  width: 100%;
}