UNPKG

1.66 kBSCSSView Raw
1.wp-block-table {
2 $subtle-light-gray: #f3f4f5;
3 $subtle-pale-green: #e9fbe5;
4 $subtle-pale-blue: #e7f5fe;
5 $subtle-pale-pink: #fcf0ef;
6
7 // Fixed layout toggle
8 &.has-fixed-layout {
9 table-layout: fixed;
10 width: 100%;
11 }
12
13 &.alignleft,
14 &.aligncenter,
15 &.alignright {
16 // Override default display property for align styles.
17 // The table element needs to be kept as display table
18 // for table features to work reliably.
19 display: table;
20
21 // Table cannot be 100% width if it is aligned, so set
22 // width as auto.
23 width: auto;
24 }
25
26 &.has-subtle-light-gray-background-color {
27 background-color: $subtle-light-gray;
28 }
29
30 &.has-subtle-pale-green-background-color {
31 background-color: $subtle-pale-green;
32 }
33
34 &.has-subtle-pale-blue-background-color {
35 background-color: $subtle-pale-blue;
36 }
37
38 &.has-subtle-pale-pink-background-color {
39 background-color: $subtle-pale-pink;
40 }
41
42 // "Stripes" style variation.
43 &.is-style-stripes {
44 border-spacing: 0;
45 border-collapse: inherit;
46 background-color: transparent;
47
48 tr:nth-child(odd) {
49 background-color: $light-gray-200;
50 }
51
52 &.has-subtle-light-gray-background-color {
53 tr:nth-child(odd) {
54 background-color: $subtle-light-gray;
55 }
56 }
57
58 &.has-subtle-pale-green-background-color {
59 tr:nth-child(odd) {
60 background-color: $subtle-pale-green;
61 }
62 }
63
64 &.has-subtle-pale-blue-background-color {
65 tr:nth-child(odd) {
66 background-color: $subtle-pale-blue;
67 }
68 }
69
70 &.has-subtle-pale-pink-background-color {
71 tr:nth-child(odd) {
72 background-color: $subtle-pale-pink;
73 }
74 }
75
76 td {
77 border-color: transparent;
78 }
79
80 border-bottom: 1px solid $light-gray-200;
81 }
82}