| /* |
| * 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. |
| * |
| * @author: eae@google.com (Emil A Eklund) |
| * @author: gboyer@google.com (Garrett Boyer) |
| */ |
| |
| |
| /* 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; |
| } |
| |
| * 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; |
| } |