
| Current Path : /var/www/html/atstandard001/styles/uikit/components/partials/component/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html/atstandard001/styles/uikit/components/partials/component/_tables.responsive.scss |
/**
* 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.
============================================================================ */
// This is a wrapper DIV around the responsive-enabled table, it is added via JS
// when the Responsive Tables theme extension is enabled and you have added the
// class "responsive-enabled" to a table.
.responsive-table {
position: relative;
@include output-rhythm(margin, 0 0 $large);
&__scroll {
width: 100%;
overflow-x: auto;
&::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #ffffff;
background-color: rgba(0, 0, 0, .3);
}
}
&__message {
@include output-rhythm(font-size, $small);
em:after {
font-family: $icon-font;
content: $fa-var-long-arrow-right;
margin: 0;
@include output-rhythm(padding, 0 3px);
@include output-rhythm(width, $medium);
// Wait for FontAwesome to load.
display: none;
.fa-loaded & {
display: inline-block;
}
[dir="rtl"] & {
content: $fa-var-long-arrow-left;
}
}
}
table {
margin-bottom: 0;
}
}
/// Hide priority columns in small screens. Normally these classes are set when
// creating a table with Views, or you can add classes to tables created using
// the CK Editor. SEE https://www.youtube.com/watch?v=Dn2RY9tvcfM
@media #{$mobile} {
th.priority-low,
td.priority-low,
th.priority-medium,
td.priority-medium {
display: none;
}
}
table {
// responsive-enabled is the class you add to tables to make them responsive,
// after having enabled the Responsive Tables theme extension.
&.responsive-enabled {}
// has-overflow is added to the table element via JS if you have the Responsive
// Table theme extension enabled, have added the "responsive-enabled" class to
// a table and the tables width overflows the viewport.
&.has-overflow {}
// Drupal core includes a responsive tables feature, we're not using it by
// default but we can set some styles for core tables by targeting it's selector.
&.responsive-enabled {
width: 100%;
}
}