1 /** |
1 .wp-block-table{ |
2 * Colors |
2 overflow-x:auto; |
3 */ |
|
4 /** |
|
5 * Breakpoints & Media Queries |
|
6 */ |
|
7 /** |
|
8 * SCSS Variables. |
|
9 * |
|
10 * Please use variables from this sheet to ensure consistency across the UI. |
|
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
|
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
|
13 */ |
|
14 /** |
|
15 * Colors |
|
16 */ |
|
17 /** |
|
18 * Fonts & basic variables. |
|
19 */ |
|
20 /** |
|
21 * Grid System. |
|
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
|
23 */ |
|
24 /** |
|
25 * Dimensions. |
|
26 */ |
|
27 /** |
|
28 * Shadows. |
|
29 */ |
|
30 /** |
|
31 * Editor widths. |
|
32 */ |
|
33 /** |
|
34 * Block & Editor UI. |
|
35 */ |
|
36 /** |
|
37 * Block paddings. |
|
38 */ |
|
39 /** |
|
40 * React Native specific. |
|
41 * These variables do not appear to be used anywhere else. |
|
42 */ |
|
43 /** |
|
44 * Converts a hex value into the rgb equivalent. |
|
45 * |
|
46 * @param {string} hex - the hexadecimal value to convert |
|
47 * @return {string} comma separated rgb values |
|
48 */ |
|
49 /** |
|
50 * Breakpoint mixins |
|
51 */ |
|
52 /** |
|
53 * Long content fade mixin |
|
54 * |
|
55 * Creates a fading overlay to signify that the content is longer |
|
56 * than the space allows. |
|
57 */ |
|
58 /** |
|
59 * Focus styles. |
|
60 */ |
|
61 /** |
|
62 * Applies editor left position to the selector passed as argument |
|
63 */ |
|
64 /** |
|
65 * Styles that are reused verbatim in a few places |
|
66 */ |
|
67 /** |
|
68 * Allows users to opt-out of animations via OS-level preferences. |
|
69 */ |
|
70 /** |
|
71 * Reset default styles for JavaScript UI based pages. |
|
72 * This is a WP-admin agnostic reset |
|
73 */ |
|
74 /** |
|
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
|
76 */ |
|
77 .wp-block-table { |
|
78 margin: 0 0 1em 0; |
|
79 overflow-x: auto; |
|
80 } |
3 } |
81 .wp-block-table table { |
4 .wp-block-table table{ |
82 border-collapse: collapse; |
5 border-collapse:collapse; |
83 width: 100%; |
6 width:100%; |
84 } |
7 } |
85 .wp-block-table .has-fixed-layout { |
8 .wp-block-table thead{ |
86 table-layout: fixed; |
9 border-bottom:3px solid; |
87 width: 100%; |
|
88 } |
10 } |
89 .wp-block-table .has-fixed-layout td, |
11 .wp-block-table tfoot{ |
90 .wp-block-table .has-fixed-layout th { |
12 border-top:3px solid; |
91 word-break: break-word; |
|
92 } |
13 } |
93 .wp-block-table.alignleft, .wp-block-table.aligncenter, .wp-block-table.alignright { |
14 .wp-block-table td,.wp-block-table th{ |
94 display: table; |
15 border:1px solid; |
95 width: auto; |
16 padding:.5em; |
96 } |
17 } |
97 .wp-block-table.alignleft td, |
18 .wp-block-table .has-fixed-layout{ |
98 .wp-block-table.alignleft th, .wp-block-table.aligncenter td, |
19 table-layout:fixed; |
99 .wp-block-table.aligncenter th, .wp-block-table.alignright td, |
20 width:100%; |
100 .wp-block-table.alignright th { |
|
101 word-break: break-word; |
|
102 } |
21 } |
103 .wp-block-table .has-subtle-light-gray-background-color { |
22 .wp-block-table .has-fixed-layout td,.wp-block-table .has-fixed-layout th{ |
104 background-color: #f3f4f5; |
23 word-break:break-word; |
105 } |
24 } |
106 .wp-block-table .has-subtle-pale-green-background-color { |
25 .wp-block-table.aligncenter,.wp-block-table.alignleft,.wp-block-table.alignright{ |
107 background-color: #e9fbe5; |
26 display:table; |
|
27 width:auto; |
108 } |
28 } |
109 .wp-block-table .has-subtle-pale-blue-background-color { |
29 .wp-block-table.aligncenter td,.wp-block-table.aligncenter th,.wp-block-table.alignleft td,.wp-block-table.alignleft th,.wp-block-table.alignright td,.wp-block-table.alignright th{ |
110 background-color: #e7f5fe; |
30 word-break:break-word; |
111 } |
31 } |
112 .wp-block-table .has-subtle-pale-pink-background-color { |
32 .wp-block-table .has-subtle-light-gray-background-color{ |
113 background-color: #fcf0ef; |
33 background-color:#f3f4f5; |
114 } |
34 } |
115 .wp-block-table.is-style-stripes { |
35 .wp-block-table .has-subtle-pale-green-background-color{ |
116 border-spacing: 0; |
36 background-color:#e9fbe5; |
117 border-collapse: inherit; |
|
118 background-color: transparent; |
|
119 border-bottom: 1px solid #f0f0f0; |
|
120 } |
37 } |
121 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { |
38 .wp-block-table .has-subtle-pale-blue-background-color{ |
122 background-color: #f0f0f0; |
39 background-color:#e7f5fe; |
123 } |
40 } |
124 .wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd) { |
41 .wp-block-table .has-subtle-pale-pink-background-color{ |
125 background-color: #f3f4f5; |
42 background-color:#fcf0ef; |
126 } |
43 } |
127 .wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd) { |
44 .wp-block-table.is-style-stripes{ |
128 background-color: #e9fbe5; |
45 background-color:initial; |
|
46 border-bottom:1px solid #f0f0f0; |
|
47 border-collapse:inherit; |
|
48 border-spacing:0; |
129 } |
49 } |
130 .wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd) { |
50 .wp-block-table.is-style-stripes tbody tr:nth-child(odd){ |
131 background-color: #e7f5fe; |
51 background-color:#f0f0f0; |
132 } |
52 } |
133 .wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd) { |
53 .wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd){ |
134 background-color: #fcf0ef; |
54 background-color:#f3f4f5; |
135 } |
55 } |
136 .wp-block-table.is-style-stripes th, |
56 .wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd){ |
137 .wp-block-table.is-style-stripes td { |
57 background-color:#e9fbe5; |
138 border-color: transparent; |
|
139 } |
58 } |
140 .wp-block-table .has-border-color > *, |
59 .wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd){ |
141 .wp-block-table .has-border-color tr, |
60 background-color:#e7f5fe; |
142 .wp-block-table .has-border-color th, |
|
143 .wp-block-table .has-border-color td { |
|
144 border-color: inherit; |
|
145 } |
61 } |
146 .wp-block-table table[style*=border-style] > *, |
62 .wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd){ |
147 .wp-block-table table[style*=border-style] tr, |
63 background-color:#fcf0ef; |
148 .wp-block-table table[style*=border-style] th, |
|
149 .wp-block-table table[style*=border-style] td { |
|
150 border-style: inherit; |
|
151 } |
64 } |
152 .wp-block-table table[style*=border-width] > *, |
65 .wp-block-table.is-style-stripes td,.wp-block-table.is-style-stripes th{ |
153 .wp-block-table table[style*=border-width] tr, |
66 border-color:#0000; |
154 .wp-block-table table[style*=border-width] th, |
|
155 .wp-block-table table[style*=border-width] td { |
|
156 border-width: inherit; |
|
157 border-style: inherit; |
|
158 } |
67 } |
|
68 .wp-block-table .has-border-color td,.wp-block-table .has-border-color th,.wp-block-table .has-border-color tr,.wp-block-table .has-border-color>*{ |
|
69 border-color:inherit; |
|
70 } |
|
71 .wp-block-table table[style*=border-top-color] tr:first-child,.wp-block-table table[style*=border-top-color] tr:first-child td,.wp-block-table table[style*=border-top-color] tr:first-child th,.wp-block-table table[style*=border-top-color]>*,.wp-block-table table[style*=border-top-color]>* td,.wp-block-table table[style*=border-top-color]>* th{ |
|
72 border-top-color:inherit; |
|
73 } |
|
74 .wp-block-table table[style*=border-top-color] tr:not(:first-child){ |
|
75 border-top-color:initial; |
|
76 } |
|
77 .wp-block-table table[style*=border-right-color] td:last-child,.wp-block-table table[style*=border-right-color] th,.wp-block-table table[style*=border-right-color] tr,.wp-block-table table[style*=border-right-color]>*{ |
|
78 border-left-color:inherit; |
|
79 } |
|
80 .wp-block-table table[style*=border-bottom-color] tr:last-child,.wp-block-table table[style*=border-bottom-color] tr:last-child td,.wp-block-table table[style*=border-bottom-color] tr:last-child th,.wp-block-table table[style*=border-bottom-color]>*,.wp-block-table table[style*=border-bottom-color]>* td,.wp-block-table table[style*=border-bottom-color]>* th{ |
|
81 border-bottom-color:inherit; |
|
82 } |
|
83 .wp-block-table table[style*=border-bottom-color] tr:not(:last-child){ |
|
84 border-bottom-color:initial; |
|
85 } |
|
86 .wp-block-table table[style*=border-left-color] td:first-child,.wp-block-table table[style*=border-left-color] th,.wp-block-table table[style*=border-left-color] tr,.wp-block-table table[style*=border-left-color]>*{ |
|
87 border-right-color:inherit; |
|
88 } |
|
89 .wp-block-table table[style*=border-style] td,.wp-block-table table[style*=border-style] th,.wp-block-table table[style*=border-style] tr,.wp-block-table table[style*=border-style]>*{ |
|
90 border-style:inherit; |
|
91 } |
|
92 .wp-block-table table[style*=border-width] td,.wp-block-table table[style*=border-width] th,.wp-block-table table[style*=border-width] tr,.wp-block-table table[style*=border-width]>*{ |
|
93 border-style:inherit; |
|
94 border-width:inherit; |
|
95 } |