Andreas Hocevar
161 lines
4.7 KiB
CSS
161 lines
4.7 KiB
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.
|
|
*
|
|
* @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;
|
|
}
|