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

8
/*
9
 * Styling for buttons created by goog.ui.ImagelessButtonRenderer.
10
 *
11
 * WARNING: This file uses some ineffecient selectors and it may be
12
 * best to avoid using this file in extremely large, or performance
13
 * critical applications.
14
 *
15
 * @author: [email protected] (Emil A Eklund)
16
 * @author: [email protected] (Garrett Boyer)
17
 */
18

19

20
/* Imageless button styles. */
21

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

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

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

78
/* Actual content area for the button. */
79
.goog-imageless-button-content {
80
  line-height: 1.5em;
81
  padding: 0px 4px;
82
  text-align: center;
83
}
84

85

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

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

101

102
/* Disabled styles. */
103
.goog-imageless-button-disabled,
104
.goog-imageless-button-disabled .goog-imageless-button-outer-box {
105
  background: #eee;
106
  border-color: #ccc;
107
  color: #666; /* For text */
108
}
109

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

115

116
/*
117
 * Active and checked styles.
118
 * Identical except for text color according to GUIG.
119
 */
120
.goog-imageless-button-active, .goog-imageless-button-checked {
121
  background: #f9f9f9;
122
}
123

124
.goog-imageless-button-active .goog-imageless-button-top-shadow,
125
.goog-imageless-button-checked .goog-imageless-button-top-shadow {
126
  background: #e3e3e3;
127
}
128

129
.goog-imageless-button-active {
130
  color: #000;
131
}
132

133

134
/* Hover styles. Higher priority to override other border styles. */
135
.goog-imageless-button-hover,
136
.goog-imageless-button-hover .goog-imageless-button-outer-box,
137
.goog-imageless-button-focused,
138
.goog-imageless-button-focused .goog-imageless-button-outer-box {
139
  border-color: #000;
140
}
141

142

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

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

162