1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
/*
* 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;
}
|
