imagelessbutton.css

/*
 * Copyright 2008 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */

/*
 * Styling for buttons created by goog.ui.ImagelessButtonRenderer.
 *
 * WARNING: This file uses some ineffecient selectors and it may be
 * best to avoid using this file in extremely large, or performance
 * critical applications.
 *
 */

@provide 'goog.css.imagelessbutton';

@require './common';

/* Imageless button styles. */

/* The base element of the button. */
.goog-imageless-button {
  /* Set the background color at the outermost level. */
  background: #e3e3e3;
  /* Place a top and bottom border.  Do it on this outermost div so that
   * it is easier to make pill buttons work properly. */
  border-color: #bbb;
  border-style: solid;
  border-width: 1px 0;
  color: #222; /* Text content color. */
  cursor: default;
  font-family: Arial, sans-serif;
  line-height: 0; /* For Opera and old WebKit. */
  list-style: none;
  /* Built-in margin for the component.  Because of the negative margins
   * used to simulate corner rounding, the effective left and right margin is
   * actually only 1px. */
  margin: 2px;
  outline: none;
  padding: 0;
  text-decoration: none;
  vertical-align: middle;
}

/*
 * Pseudo-rounded corners.  Works by pulling the left and right sides slightly
 * outside of the parent bounding box before drawing the left and right
 * borders.
 */
.goog-imageless-button-outer-box {
  /* Left and right border that protrude outside the parent. */
  border-color: #bbb;
  border-style: solid;
  border-width: 0 1px;
  /* Same as margin: 0 -1px, except works better cross browser.  These are
   * intended to be RTL flipped to work better in IE7. */
  left: -1px;
  margin-right: -2px;
}

/*
 * A div to give the light and medium shades of the button that takes up no
 * vertical space.
 */
.goog-imageless-button-top-shadow {
  /* Light top color in the content. */
  background: #f9f9f9;
  /* Thin medium shade. */
  border-bottom: 3px solid #eee;
  /* Control height with line-height, since height: will trigger hasLayout.
   * Specified in pixels, as a compromise to avoid rounding errors. */
  line-height: 9px;
  /* Undo all space this takes up. */
  margin-bottom: -12px;
}

/* Actual content area for the button. */
.goog-imageless-button-content {
  line-height: 1.5em;
  padding: 0px 4px;
  text-align: center;
}


/* Pill (collapsed border) styles. */
.goog-imageless-button-collapse-right {
  /* Draw a border on the root element to square the button off.  The border
   * on the outer-box element remains, but gets obscured by the next button. */
  border-right-width: 1px;
  margin-right: -2px; /* Undoes the margins between the two buttons. */
}

.goog-imageless-button-collapse-left .goog-imageless-button-outer-box {
  /* Don't bleed to the left -- keep the border self contained in the box. */
  border-left-color: #eee;
  left: 0;
  margin-right: -1px; /* Versus the default of -2px. */
}


/* Disabled styles. */
.goog-imageless-button-disabled,
.goog-imageless-button-disabled .goog-imageless-button-outer-box {
  background: #eee;
  border-color: #ccc;
  color: #666; /* For text */
}

.goog-imageless-button-disabled .goog-imageless-button-top-shadow {
  /* Just hide the shadow instead of setting individual colors. */
  visibility: hidden;
}


/*
 * Active and checked styles.
 * Identical except for text color according to GUIG.
 */
.goog-imageless-button-active, .goog-imageless-button-checked {
  background: #f9f9f9;
}

.goog-imageless-button-active .goog-imageless-button-top-shadow,
.goog-imageless-button-checked .goog-imageless-button-top-shadow {
  background: #e3e3e3;
}

.goog-imageless-button-active {
  color: #000;
}


/* Hover styles. Higher priority to override other border styles. */
.goog-imageless-button-hover,
.goog-imageless-button-hover .goog-imageless-button-outer-box,
.goog-imageless-button-focused,
.goog-imageless-button-focused .goog-imageless-button-outer-box {
  border-color: #000;
}


/* IE6 hacks.  This is the only place inner-box is used. */
* html .goog-imageless-button-inner-box {
  /* Give the element inline-block behavior so that the shadow appears.
   * The main requirement is to give the element layout without having the side
   * effect of taking up a full line. */
  display: inline;
  /* Allow the shadow to show through, overriding position:relative from the
   * goog-inline-block styles. */
  position: static;
  zoom: 1;
}

/* rtl:begin:ignore */
* html .goog-imageless-button-outer-box {
  /* In RTL mode, IE is off by one pixel.  To fix, override the left: -1px
   * (which was flipped to right) without having any effect on LTR mode
   * (where IE ignores right when left is specified). */
  /* @noflip */ right: 0;
}
/* rtl:end:ignore */