You are here

Home » API reference » AT Tools 8.3

responsive-tables.css in AT Tools 8.3

Same filename and directory in other branches
  1. 8 at_theme_generator/starterkits/starterkit/styles/css/components/responsive-tables.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/responsive-tables.css
@charset "UTF-8";
/**
 * Basic styles to support the Responsive Tables jQuery feature.
 *  - to enable responsive tables turn on the extension in your
 *    themes appearance settings and apply the class 'responsive-enabled'
 *    to any tables you want to make responsive.
 ============================================================================ */
.responsive-table {
  position: relative;
  margin: 0 0 1.25rem;
}

.responsive-table__scroll {
  width: 100%;
  overflow-x: auto;
}

.responsive-table__scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #ffffff;
  background-color: rgba(0, 0, 0, 0.3);
}

.responsive-table__message {
  font-size: 0.75rem;
}

.responsive-table__message em:after {
  font-family: FontAwesome, sans-serif;
  content: "";
  margin: 0;
  padding: 0 0.1875rem;
  width: 1rem;
  display: none;
}

.fa-loaded .responsive-table__message em:after {
  display: inline-block;
}

[dir="rtl"] .responsive-table__message em:after {
  content: "";
}

.responsive-table table {
  margin-bottom: 0;
}

@media screen and (max-width: 60em) {
  th.priority-low,
  td.priority-low,
  th.priority-medium,
  td.priority-medium {
    display: none;
  }
}

table.responsive-enabled {
  width: 100%;
}
/*# sourceMappingURL=responsive-tables.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/responsive-tables.css
View source 
  1. @charset "UTF-8";

  2. /**

  3.  * Basic styles to support the Responsive Tables jQuery feature.

  4.  *  - to enable responsive tables turn on the extension in your

  5.  *    themes appearance settings and apply the class 'responsive-enabled'

  6.  *    to any tables you want to make responsive.

  7.  ============================================================================ */

  8. .responsive-table {

  9.   position: relative;

  10.   margin: 0 0 1.25rem;

  11. }

  12. 

  13. .responsive-table__scroll {

  14.   width: 100%;

  15.   overflow-x: auto;

  16. }

  17. 

  18. .responsive-table__scroll::-webkit-scrollbar-thumb {

  19.   border-radius: 8px;

  20.   border: 3px solid #ffffff;

  21.   background-color: rgba(0, 0, 0, 0.3);

  22. }

  23. 

  24. .responsive-table__message {

  25.   font-size: 0.75rem;

  26. }

  27. 

  28. .responsive-table__message em:after {

  29.   font-family: FontAwesome, sans-serif;

  30.   content: "";

  31.   margin: 0;

  32.   padding: 0 0.1875rem;

  33.   width: 1rem;

  34.   display: none;

  35. }

  36. 

  37. .fa-loaded .responsive-table__message em:after {

  38.   display: inline-block;

  39. }

  40. 

  41. [dir="rtl"] .responsive-table__message em:after {

  42.   content: "";

  43. }

  44. 

  45. .responsive-table table {

  46.   margin-bottom: 0;

  47. }

  48. 

  49. @media screen and (max-width: 60em) {

  50.   th.priority-low,

  51.   td.priority-low,

  52.   th.priority-medium,

  53.   td.priority-medium {

  54.     display: none;

  55.   }

  56. }

  57. 

  58. table.responsive-enabled {

  59.   width: 100%;

  60. }

  61. /*# sourceMappingURL=responsive-tables.css.map */