You are here

Home » API reference » AT Tools 8

responsive-tables.css in AT Tools 8

Same filename and directory in other branches
  1. 8.3 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 18px;
  margin: 0 0 1.125rem;
}
.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: 11px;
  font-size: 0.6875rem;
  line-height: 15px;
  line-height: 0.9375rem;
}
.responsive-table__message em:after {
  font-family: FontAwesome, sans-serif;
  content: "";
  margin: 0;
  padding: 0 3px;
  padding: 0 0.1875rem;
  width: 16px;
  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 all and (max-width: 60em) {
  th.priority-low,
  td.priority-low,
  th.priority-medium,
  td.priority-medium {
    display: none;
  }
}
table.responsive-enabled {
  width: 100%;
}

/*# sourceMappingURL=maps/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 18px;

  11.   margin: 0 0 1.125rem;

  12. }

  13. .responsive-table__scroll {

  14.   width: 100%;

  15.   overflow-x: auto;

  16. }

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

  18.   border-radius: 8px;

  19.   border: 3px solid #ffffff;

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

  21. }

  22. .responsive-table__message {

  23.   font-size: 11px;

  24.   font-size: 0.6875rem;

  25.   line-height: 15px;

  26.   line-height: 0.9375rem;

  27. }

  28. .responsive-table__message em:after {

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

  30.   content: "";

  31.   margin: 0;

  32.   padding: 0 3px;

  33.   padding: 0 0.1875rem;

  34.   width: 16px;

  35.   width: 1rem;

  36.   display: none;

  37. }

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

  39.   display: inline-block;

  40. }

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

  42.   content: "";

  43. }

  44. .responsive-table table {

  45.   margin-bottom: 0;

  46. }

  47. 

  48. @media all and (max-width: 60em) {

  49.   th.priority-low,

  50.   td.priority-low,

  51.   th.priority-medium,

  52.   td.priority-medium {

  53.     display: none;

  54.   }

  55. }

  56. table.responsive-enabled {

  57.   width: 100%;

  58. }

  59. 

  60. /*# sourceMappingURL=maps/responsive-tables.css.map */