-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtabs.css
254 lines (226 loc) · 9.48 KB
/
tabs.css
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
/**
* The inspiration for this CSS came from two projects
*
* The early days of: https://github.com/ThermoMan/3M-50-Thermostat-Tracking
* and
* http://www.w3.org/Style/Examples/007/target
*
* The latter had the tabs fully implemented using only CSS.
*
* Code by
______ __ __ ___
/_ __// /_ ___ _____ ____ ___ ____ / |/ /____ _ ____
/ / / __ \ / _ \ / ___// __ `__ \ / __ \ / /|_/ // __ `// __ \
/ / / / / // __// / / / / / / // /_/ // / / // /_/ // / / /
/_/ /_/ /_/ \___//_/ /_/ /_/ /_/ \____//_/ /_/ \__,_//_/ /_/
*/
@font-face
{
font-family: 'theToolbarFonts';
src: local( 'Arial' ); /* A common font for use in the demo, you may want to use another choice in your applicaiton. */
/* Here is how to use some other font */
/* src: local( 'Copperplate Gothic Light' ), url( '../fonts/Copperplate_Gothic_Light.ttf' ) format( 'truetype' ); */
}
/* All color references have been moved to a separate CSS file so that appearance and function are isolated from each other */
/**
* Establish a containing block for tabbed area controls
*/
div.all_tabs
{
position: relative; /* Wherever it may fall on the page */
line-height: 1em; /* Easier to calculate with */
z-index: 0; /* So that we can put other things behind */
/* No, actually these do NOT stop text hiding behind the tabs panel */
/*float: left;*/ /* These two commands stop page text from hiding behind the tabs */
/*margin: 50px;*/ /* These two commands stop page text from hiding behind the tabs */
}
/**
* We want all the tab buttons on one line, so first level nesting is the individual tab
* title - which is a container for all the content of that tab.
*/
div.all_tabs > div.tab
{
display: inline;
}
/* Visually connect tab and tab body (border around tabs and between tabs and body) */
div.all_tabs > div.tab > a
{ /* top right bottom left */
padding: 0.6em 0.4em 0.4em 0.4em; /* Some breathing space - space around tab title text - leave gap between button and content (see below) */
/* Works in Chrome: padding: 0.6em 0.4em 0.5em 0.4em; */
/* Works in Firefox: padding: 0.6em 0.4em 0.4em 0.4em; */
border: 0.15em outset; /* Gives the tab a 3Dish effect */
font-family: 'theToolbarFonts', Gadget, sans-serif; /* This font choice impacts the padding-bottom choice (see above) */
font-size: 0.6em; /* This size choice impacts the padding-bottom choice (see above) */
/* border-bottom does not matter because it is superceded later to show which tab is selected */
/* border-bottom: 0.1em solid; */
}
/**
* Will need to make all icons consistent with each other -OR-
* individually adjust vertical and horizontal spacing a few pixels.
*
*/
div.all_tabs > div.tab > a > img.tab-icon
{
position: relative;
top: -3px;
height: 24px; /* Make the icon fit regardless of source image size */
width: 24px; /* Make the icon fit regardless of source image size */
vertical-align: top;
}
/**
* These next three classes distinguish between the 4 states a tab can be in.
*
* Selected - this one tab has the emphasis color.
* Inactive (Not selected) - all of the other tabs are other color.
* Mouse over - this one tab is hilighted in another.
* Disabled - This tab is unclickable (has no link). This is not yet implemented.
*
* The CSS does not change position or anything else, just the appearance of the tab.
*/
/* Selected tab */
div.all_tabs > div.tab:target > a, /* Apply to the targeted item or... */
:target #default2 > a
{ /* ... to the default item */
border-bottom: 0.1em solid; /* Visually connect tab and tab body - remove gap between button and content (see above) */
border-radius: 8px 8px 0px 0px; /* Tab border is rounded */
text-decoration: none; /* Remove underline from href */
}
/* Inactive tabs */
div.all_tabs > div.tab:not(:target) > a
{
border-bottom: none; /* Make the bottom border disappear */
border-radius: 8px 8px 0px 0px; /* Tab border is rounded */
text-decoration: none; /* Remove underline from href */
}
/* Mouse over tab is hilighted */
div.all_tabs > div.tab:not(:target) > a:hover
{
/* border-bottom: none; */ /* Make the bottom border disappear */
/* border-radius: 8px 8px 0px 0px; */ /* Tab border is rounded */
}
/* Disabled tab appearance */
/* At present there is no disabled tab - the easy way to disable it is to hide the whole thing. */
/* Apply to the space between the tabs */
div.all_tabs > div.tab_gap
{
display: inline;
padding-left: 1px;
}
/**
* Container for toolbar and contents - nothing else should be in here - this is the thing who's z-order should shift
*/
div.all_tabs > div.tab > div.container
{
top: 1.3em; /* The top needs some calculation... */
border: solid 3px; /* This is the color of the main border around the tab content */
width: 840px; /* Set the horizontal width of the tab content area */
height: 460px; /* This sets the vertical height of the tab content area - regardless of the content vertical height */
z-index: -2; /* Behind, because the borders overlap */
overflow: hidden; /* Do not allow overflow to show - be very careful in what is placed in the toolbar */
}
/**
* Set up a toolbar for contents of the tab - this is technically inside the section described immediately above
*/
div.all_tabs > div.tab > div.container > div.tab-toolbar
{
position: relative;
width: inherit;
height: 30px; /* Tall enough that wierd elements don't make it grow */
display: table-cell;
vertical-align: middle;
font-family: 'theToolbarFonts', Gadget, sans-serif; /* This font choice impacts the padding-bottom choice (see above) */
font-size: 0.6em; /* This size choice impacts the padding-bottom choice (see above) */
overflow: hidden; /* Do not allow overflow to show - be very careful in what is placed in the toolbar */
}
/* BEGIN -- This is a work in progress to change the appearance of controls and text on the toolbar */
/**
* Set style/appearance of text on controls in the toolbar
*/
div.all_tabs > div.tab > div.container > div.tab-toolbar > select,
div.all_tabs > div.tab > div.container > div.tab-toolbar > input
{
vertical-align: middle;
font-family: 'theToolbarFonts';
font-size: 1em;
}
/**
* Set style/appearance of controls in the toolbar
*
* Specifically for checkbox - unchecked look
*/
div.all_tabs > div.tab > div.container > div.tab-toolbar > input[type='checkbox']
{
/* width: 21px; */
/* height: 21px; */
/* background: url( '../images/CheckBox.png' ) 21px 0px; */
/* The image came form this site... */
/* http://www.dailycoding.com/Posts/customized_html_controls_creating_custom_checkbox.aspx */
/* cursor: crosshair; */
padding: 0px;
margin: 0px;
background-repeat: no-repeat;
display: inline-block;
}
/**
* Specifically for checkbox - checked look
*/
div.all_tabs > div.tab > div.container > div.tab-toolbar > input[type='checkbox']:checked
{
/* background: url( 'images/CheckBox.png' ) 0px 0px; */
/* cursor: crosshair; */
/* crosshair, progress, wait */
}
/* END -- This is a work in progress to change the appearance of controls and text on the toolbar */
/* This CSS styles the CONTENTS of the tabs (only visible on the Selected tab - duh) */
div.all_tabs > div.tab > div.container > div.content
{
/* The scroll bars are placed INSIDE the div which effectively narrows the text area by several px */
overflow-y: auto; /* Scroll bar if needed */
height: 427px; /* Requires computation height = container-height - toolbar-height - border-height */
/* Will cause tabs that don't have a toolbar to be toolbar height (presently 30px) short at the bottom */
/* 427 = 460 - 30 - 3*/
/* To use the left/right modifiers the width must be computed instead of inherited */
/*margin-left: 10px;*/
padding-left: 10px;
padding-right: 10px;
/*width: inherit;*/
width: 820px; /* Requires computation width = container-width - padding-left - padding-right */
/* 820 = 840 - 10 - 10 */
}
/**
* All the DIVs for content overlap with each other and are hidden/shown by changing the z-index
*/
div.all_tabs > div.tab:not(:target) > div.container
{ /* Protect CSS1 & CSS2 browsers (I will remove this code in the next revision if it really is only for those old browsers) */
position: absolute;
}
/**
* Raise Select tab content above the other tabs so that you can see it
*/
div.all_tabs > div.tab:target > div.container, :target #about > div.container
{
position: absolute; /* All these DIVs should overlap completely with each other */
z-index: -1;
}
div.all_tabs > div.tab :target
{
outline: none;
}
/**
* BEGIN -- This is a work in progress to have visual indicator that a value was saved in a cookie
*
* This was largely a failed experiment.
* You simply CANNOT set the background color of an HTML input element (like the checkbox)
* without having to go into the entire effort of having to create a whole set of inputs yhourself.
*
* Browsers default these elements to the appearance of the OS on which they live and actively resist change.
*/
/**
* This is the background color that informs users that the input field is remembered via cookie.
* Clear the style to remove the chroma code.
*/
.remembered_input
{
/* background: #BBFFBB; */
}
/* END -- This is a work in progress to have visual indicator that a value was saved in a cookie */