You are here

Home » API reference » Drupal 10

table.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/olivero/css/components/table.css
  2. 10 core/themes/bartik/css/components/table.css
Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/table.css

User generated tables.

File

core/themes/olivero/css/components/table.css
View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * User generated tables.

  11.  */

  12. 

  13. /*

  14.  * Media query breakpoints.

  15.  * Processed by postcss/postcss-custom-media.

  16.  */

  17. 

  18. /* Navigation related breakpoints */

  19. 

  20. /* Grid related breakpoints */

  21. 

  22. /* Grid shifts from 6 to 14 columns. */

  23. 

  24. /* Width of the entire grid maxes out. */

  25. 

  26. .forum table,

  27. .text-content table,

  28. .views-table,

  29. .draggable-table {

  30.   margin-top: var(--sp2);

  31.   margin-bottom: var(--sp2);

  32.   border-spacing: 0;

  33.   color: var(--color-text-neutral-medium);

  34.   border: 0;

  35.   border-collapse: collapse;

  36.   font-family: var(--font-sans);

  37.   font-size: 1rem;

  38.   line-height: var(--sp1-5)

  39. }

  40. 

  41. [dir="ltr"] .forum table caption,[dir="ltr"]  .text-content table caption,[dir="ltr"]  .views-table caption,[dir="ltr"]  .draggable-table caption {

  42.     text-align: left

  43. }

  44. 

  45. [dir="rtl"] .forum table caption,[dir="rtl"]  .text-content table caption,[dir="rtl"]  .views-table caption,[dir="rtl"]  .draggable-table caption {

  46.     text-align: right

  47. }

  48. 

  49. .forum table caption, .text-content table caption, .views-table caption, .draggable-table caption {

  50.     margin-bottom: var(--sp1);

  51.     color: var(--color-text-neutral-medium);

  52.     font-family: var(--font-serif);

  53.     font-size: 0.875rem;

  54.     font-style: italic;

  55.     line-height: var(--sp);

  56.   }

  57. 

  58. .forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td, .draggable-table tr:last-child td {

  59.         border-bottom: 0;

  60.       }

  61. 

  62. [dir="ltr"] .forum table td,[dir="ltr"] 

  63.   .forum table th,[dir="ltr"] 

  64.   .text-content table td,[dir="ltr"] 

  65.   .text-content table th,[dir="ltr"] 

  66.   .views-table td,[dir="ltr"] 

  67.   .views-table th,[dir="ltr"] 

  68.   .draggable-table td,[dir="ltr"] 

  69.   .draggable-table th {

  70.     padding-left: 0

  71. }

  72. 

  73. [dir="rtl"] .forum table td,[dir="rtl"] 

  74.   .forum table th,[dir="rtl"] 

  75.   .text-content table td,[dir="rtl"] 

  76.   .text-content table th,[dir="rtl"] 

  77.   .views-table td,[dir="rtl"] 

  78.   .views-table th,[dir="rtl"] 

  79.   .draggable-table td,[dir="rtl"] 

  80.   .draggable-table th {

  81.     padding-right: 0

  82. }

  83. 

  84. [dir="ltr"] .forum table td,[dir="ltr"] 

  85.   .forum table th,[dir="ltr"] 

  86.   .text-content table td,[dir="ltr"] 

  87.   .text-content table th,[dir="ltr"] 

  88.   .views-table td,[dir="ltr"] 

  89.   .views-table th,[dir="ltr"] 

  90.   .draggable-table td,[dir="ltr"] 

  91.   .draggable-table th {

  92.     padding-right: var(--sp1)

  93. }

  94. 

  95. [dir="rtl"] .forum table td,[dir="rtl"] 

  96.   .forum table th,[dir="rtl"] 

  97.   .text-content table td,[dir="rtl"] 

  98.   .text-content table th,[dir="rtl"] 

  99.   .views-table td,[dir="rtl"] 

  100.   .views-table th,[dir="rtl"] 

  101.   .draggable-table td,[dir="rtl"] 

  102.   .draggable-table th {

  103.     padding-left: var(--sp1)

  104. }

  105. 

  106. .forum table td,

  107.   .forum table th,

  108.   .text-content table td,

  109.   .text-content table th,

  110.   .views-table td,

  111.   .views-table th,

  112.   .draggable-table td,

  113.   .draggable-table th {

  114.     padding-top: var(--sp1);

  115.     padding-bottom: var(--sp1);

  116.     vertical-align: top;

  117.   }

  118. 

  119. [dir="ltr"] .forum table th,[dir="ltr"]  .text-content table th,[dir="ltr"]  .views-table th,[dir="ltr"]  .draggable-table th {

  120.     margin-left: 0

  121. }

  122. 

  123. [dir="rtl"] .forum table th,[dir="rtl"]  .text-content table th,[dir="rtl"]  .views-table th,[dir="rtl"]  .draggable-table th {

  124.     margin-right: 0

  125. }

  126. 

  127. [dir="ltr"] .forum table th,[dir="ltr"]  .text-content table th,[dir="ltr"]  .views-table th,[dir="ltr"]  .draggable-table th {

  128.     margin-right: 0

  129. }

  130. 

  131. [dir="rtl"] .forum table th,[dir="rtl"]  .text-content table th,[dir="rtl"]  .views-table th,[dir="rtl"]  .draggable-table th {

  132.     margin-left: 0

  133. }

  134. 

  135. [dir="ltr"] .forum table th,[dir="ltr"]  .text-content table th,[dir="ltr"]  .views-table th,[dir="ltr"]  .draggable-table th {

  136.     text-align: left

  137. }

  138. 

  139. [dir="rtl"] .forum table th,[dir="rtl"]  .text-content table th,[dir="rtl"]  .views-table th,[dir="rtl"]  .draggable-table th {

  140.     text-align: right

  141. }

  142. 

  143. .forum table th, .text-content table th, .views-table th, .draggable-table th {

  144.     margin-top: 0;

  145.     margin-bottom: 0;

  146.     letter-spacing: 0.02em;

  147.     color: var(--color-text-neutral-loud);

  148.     border-bottom: 2px solid var(--color--primary-50);

  149.     font-family: var(--font-sans);

  150.     font-size: 0.875rem;

  151.     line-height: var(--sp)

  152. 

  153.     /**

  154.      * Fixes for styles injected by CKEditor

  155.      */

  156.   }

  157. 

  158. [dir="ltr"] .forum table th.text-align-left,[dir="ltr"]  .text-content table th.text-align-left,[dir="ltr"]  .views-table th.text-align-left,[dir="ltr"]  .draggable-table th.text-align-left {

  159.       text-align: left

  160. }

  161. 

  162. [dir="rtl"] .forum table th.text-align-left,[dir="rtl"]  .text-content table th.text-align-left,[dir="rtl"]  .views-table th.text-align-left,[dir="rtl"]  .draggable-table th.text-align-left {

  163.       text-align: right

  164. }

  165. 

  166. [dir="ltr"] .forum table th.text-align-right,[dir="ltr"]  .text-content table th.text-align-right,[dir="ltr"]  .views-table th.text-align-right,[dir="ltr"]  .draggable-table th.text-align-right {

  167.       text-align: right

  168. }

  169. 

  170. [dir="rtl"] .forum table th.text-align-right,[dir="rtl"]  .text-content table th.text-align-right,[dir="rtl"]  .views-table th.text-align-right,[dir="rtl"]  .draggable-table th.text-align-right {

  171.       text-align: left

  172. }

  173. 

  174. .forum table th.text-align-center, .text-content table th.text-align-center, .views-table th.text-align-center, .draggable-table th.text-align-center {

  175.       text-align: center;

  176.     }

  177. 

  178. .forum table th.text-align-justify, .text-content table th.text-align-justify, .views-table th.text-align-justify, .draggable-table th.text-align-justify {

  179.       text-align: justify;

  180.     }

  181. 

  182. .forum table td, .text-content table td, .views-table td, .draggable-table td {

  183.     white-space: normal;

  184.     border-bottom: 2px solid var(--color--gray-65);

  185.   }

  186. 

  187. .forum table th.checkbox,

  188.   .forum table td.checkbox,

  189.   .text-content table th.checkbox,

  190.   .text-content table td.checkbox,

  191.   .views-table th.checkbox,

  192.   .views-table td.checkbox,

  193.   .draggable-table th.checkbox,

  194.   .draggable-table td.checkbox {

  195.     text-align: center;

  196.   }

  197. 

  198. .draggable-table {

  199.   width: 100%;

  200. }

  201. 

  202. .draggable-table .form-item {

  203.   margin-top: 0;

  204. }

  205. 

  206. .tablesort {

  207.   vertical-align: middle;

  208. }

  209. 

  210. .sticky-header {

  211.   z-index: 0;

  212.   margin: 0;

  213.   border-bottom: 4px solid var(--color--primary-50);

  214. }

  215. 

  216. /* Properly align VBO checkboxes. */

  217. 

  218. .views-field-node-bulk-form .form-item {

  219.   margin: 0;

  220. }