wave/src/main/resources/org/waveprotocol/wave/client/wavepanel/view/dom/full/Collapsible.css

/*
 * 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.
 *
 * CSS Stylesheet for a collapsible object.
 *
 * author: hearnden@google.com (David Hearnden)
 */

.collapsible {
  display: inline;
}

.toggle {
  display: inline-block;
  cursor: pointer;
  margin: 0 0.3em;
  white-space: nowrap;    /* Keeps bubble and arrow together. */
  font-size: 0.8em;
  vertical-align: 0.1em;  /* Keep center alignment with shrinking font. */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.expanded {
}

.collapsed {
}

.arrow {
  display: inline-block;  /* Inline, but with background. */
  height: 7px;
  width: 7px;
}

@sprite .expanded.unread .arrow {
  gwt-image: 'expandedUnread';
  overflow: visible;
}

@sprite .collapsed.unread .arrow {
  gwt-image: 'collapsedUnread';
  overflow: visible;
}

@sprite .expanded.read .arrow {
  gwt-image: 'expandedRead';
  overflow: visible;
}

@sprite .collapsed.read .arrow {
  gwt-image: 'collapsedRead';
  overflow: visible;
}

.count {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 0 0.5em;
  margin: 0 0.3em;
  font-weight: bold;
  position: relative;
}

.unread .count {
  color: white;
  background-image: literal("-moz-linear-gradient(0% 100% 90deg, rgb(93,140,9), rgb(149,184,0))");
  background-image: literal("-webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(93,140,9)), to(rgb(149,184,0)))");
  border: 1px solid rgb(93,140,9);
}

.read .count {
  color: gray;
  background-image: literal("-moz-linear-gradient(0% 100% 90deg, rgb(220,220,220), white)");
  background-image: literal("-webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(220,220,220)), to(white))");
  border: 1px solid rgb(154,154,154);
}

.expanded.dropContainer {
  display: block;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 0;  /* Height comes only from image. */
}

/*
 * The collapsed rule must come after the expanded rule for precedence, in order
 * to handle correctly the case of multiply nested collapsibles, where both
 * (.expanded .dropContainer) and (.collapsed .dropContainer) may match.
 */ 
.collapsed.dropContainer {
  display: none;
}

@sprite .drop {
  gwt-image: 'callout';
  vertical-align: bottom;
  display: inline-block;
  background-color: #FFF;
}

/* Firefox gets it wrong. */
@if user.agent gecko1_8 {
  .drop {
    margin-bottom: -15px; /* Magic height. */
  }
} @else {
  .drop {
    margin-bottom: -16px; /* Magic height. */
  }
}

.chrome {
  /*
   * It is assumed that this box is inside something with a left margin, and
   * that when the box is expanded, the callout is to creep into that margin.
   * All other sides go in.
   */
  margin: 1em 0.5em 1em -2em;
  box-shadow: 0px 0px 4px #808080;
  -moz-box-shadow: 0px 0px 4px #808080;
  -webkit-box-shadow: 0px 0px 4px #808080;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

@if user.agent ie6 ie8 {
  /*
   * Force the .chrome element to get hasLayout.
   */
  .chrome {
    zoom: 1;
  }
}

.chrome.collapsed  {
  display: none;
}