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
161
|
/*
*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*
*/
/**
* Stylesheet to try and make things look not *too* bad in IE8 and below
*/
/**
* To handle opacity in IE < 9 we animate progid:DXImageTransform.Microsoft.gradient in itablet.js
* We use a transparent background image rather than background: transparent to block mouse events to the main page.
* progid:DXImageTransform messes with the font so we only use it for animating and use a 50% alpha png as end style.
*/
.popup-window, input, textarea
{
background: url(/itablet/images/ie/transparent.png) repeat;
}
.popup-window.smoked
{
background: url(/itablet/images/ie/smoked.png) repeat;
}
/**
* Create fake top rounded corners using images. Fortunately we can do this using pure CSS as ie8 supports
* :first-child, :before and :after so we supply the images as content.
*/
.header:before, .header:after
{
position: absolute;
content: "";
top: 0;
left: 0;
width: 5px;
height: 5px;
background: url(/itablet/images/ie/radius-5px-sprite.png);
}
.header:after
{
left: auto;
right: 0;
background-position: -5px;
}
ul.list li:first-child:before, ul.list li:first-child:after,
ul.horiz-checkbox li.horiz-checkbox:first-child:before, ul.list li.horiz-checkbox:first-child label.first-child:before,
ul.horiz-checkbox li.horiz-checkbox:first-child:after, ul.list li.horiz-checkbox:first-child label.last-child:after
{
position: absolute;
content: "";
top: -2px;
left: -2px;
width: 10px;
height: 10px;
background: url(/itablet/images/ie/radius-10px-sprite.png);
}
ul.list li:first-child:after,
ul.horiz-checkbox li.horiz-checkbox:first-child:after, ul.list li.horiz-checkbox:first-child label.last-child:after
{
left: auto;
right: -2px;
background-position: -10px 0;
}
/**
* Create fake bottom rounded corners using images. Unfortunately this isn't as easy as the top corners because
* a) ie8 doesn't support :last-child and b) if we have a single list item we've already used :before and :after
* Unfortunately we have to resort to some JavaScript so itablet.js has some ie8 specific code to add a
* "last-child" class and prepend/append div elements with "before" and "after" classes. Fortunately this is
* fairly clean to do using jQuery using $("ul.list li:last-child") to find the item that we need to modify.
*/
ul.list li.last-child
{
border-bottom: 2px groove #fff;
}
ul.list li.last-child > .before, ul.list li.last-child > .after
{
position: absolute;
bottom: -2px;
left: -2px;
width: 10px;
height: 10px;
z-index: 1;
background: url(/itablet/images/ie/radius-10px-sprite.png) 0 -10px;
}
ul.list li.last-child > .after
{
left: auto;
right: -2px;
background-position: -10px -10px;
}
/**
* For IE < 9 use solid background colour instead of a gradient - no bigee, it was a subtle gradient anyway.
*/
ul li.active, ul li.radio.checked.active /* Highlight in blue with white text */
{
background: #035de7;
}
ul li.active.arrow
{
background: #035de7 url(/itablet/images/chevron-active.png) no-repeat right;
}
ul.list li.arrow.radio.active
{
background: #035de7 url(/itablet/images/blue-chevron.png) no-repeat right;
}
/**
* We need to apply the fake border radius to the labels in the horiz-checkbox too as child elements aren't clipped.
* Unfortunately IE8 doesn't seem to distinguish between the selectors ul.list li:first-child:before and
* ul.list li.horiz-checkbox:first-child:before when horiz-checkbox is dynamically added (though it does if it's
* placed in the static HTML) this stops the <li> fake radiused border being correctly repositioned
* for horiz-checkboxes. By adding horiz-checkbox to the <ul> too we can use a more explicit rule in the CSS.
*/
/* First we remove the original borders that were previously added for ul.list li:first-child:before and after. */
ul.list li.horiz-checkbox:first-child:before, ul.list li.horiz-checkbox:first-child:after
{
content: ".";
}
/* The we re-add them in the correct position using the more explicit rule on ul.horiz-checkbox */
/* We need to add the rounded borders to the labels too as they are positioned above the li in the stack. */
ul.horiz-checkbox li.horiz-checkbox:first-child:before, ul.list li.horiz-checkbox:first-child label.first-child:before,
ul.horiz-checkbox li.horiz-checkbox:first-child:after, ul.list li.horiz-checkbox:first-child label.last-child:after
{
top: -1px;
}
canvas /* For IE < 9 the radiused borders for the canvas are actually rendered on the canvas. */
{
border: 0;
}
|
