forked from sqlpad/sqlpad
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathQueryResultDataTable.module.css
More file actions
81 lines (69 loc) · 2.47 KB
/
Copy pathQueryResultDataTable.module.css
File metadata and controls
81 lines (69 loc) · 2.47 KB
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
/*
Fancy CSS to apply a shadow when content is overflowing
Approach modified from https://codepen.io/matthewbeta/pen/fzoHI
There's an issue with this approach in that the content needs to overflow by 10 pixels
so that the "covering" shadow is moved and reveals the actual shadow.
This can be fixed if 10 pixels of content can be added to the right hand side of a result grid cell.
Prior attempt using flex and a hidden value resulted in strange padding behavior.
If this cannot be accomplished with CSS it might make sense to render cell values off screen and measure them?
That could get expensive.
We might not need to measure much though if we map measurements to number of characters,
since we're using a monospace font.
Open to other ideas if anyone has them!
*/
.scrollboxEven {
background-image:
/* Shadows */ linear-gradient(
to right,
rgb(250, 250, 250),
rgb(250, 250, 250)
),
linear-gradient(to right, rgb(250, 250, 250), rgb(250, 250, 250)),
/* Shadow covers */
linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-color: rgb(250, 250, 250);
background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
.scrollboxOdd {
background-image:
/* Shadows */ linear-gradient(to right, white, white),
linear-gradient(to right, white, white),
/* Shadow covers */
linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-color: white;
background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
.faderEven {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 16px;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0),
rgb(250, 250, 250)
);
}
.faderOdd {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 16px;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0),
rgb(255, 255, 255)
);
}