You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
10 KiB
413 lines
10 KiB
// pages/_sx_tabelle.scss |
|
//--Inhalt: Farben, Formen, Abstände für sx_tabelle-- |
|
|
|
@use "../config/sx_theme"; |
|
@use "../config/sx_mixins"; |
|
|
|
// =========== |
|
// -- Body -- |
|
// =========== |
|
|
|
/* -- Bildschirmseite mit scrollbar -- */ |
|
html, body { |
|
max-width: 100%; |
|
overflow-x: visible; |
|
} |
|
|
|
|
|
// ================================================= |
|
// -- Elemente über und unter der Ergebnistabelle -- |
|
// ================================================= |
|
/* --Container im Ergebnisbereich -- */ |
|
.hero-body > .container { /*in _sx_common.scss*/ |
|
display: block; |
|
width: 100%; |
|
max-width: 100%; /*none;*/ |
|
min-width: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
.container { |
|
// overflow-x: auto; /* Nur horizontales Scrollen */ |
|
// overflow-y: auto; /* Vertikales Scrollen */ |
|
// max-height: 80vh; /* max. Container-Höhe 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ |
|
// max-width: 190vb; /* max. Container-Breite 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */ |
|
// max-width: 100%; /* volle Container-Breite */ |
|
white-space: normal; /* Ermöglicht Zeilenumbrüche in den Tabellenzellen */ |
|
hyphens: auto; |
|
/*white-space: nowrap; /* Verhindert Zeilenumbrüche in den Tabellenzellen */ |
|
-webkit-overflow-scrolling: touch; /* Für bessere Scroll-Erfahrung auf Mobilgeräten */ |
|
} |
|
|
|
|
|
/* -- Card -- */ |
|
.hero-body > .container > .card { |
|
width: fit-content; |
|
max-width: 100%; |
|
min-width: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
|
|
/* -- Input-container unter Buttonbar mit: Label, Auswahlfeld, Button --*/ |
|
.input-container { |
|
display: flex; |
|
align-items: center; |
|
flex-wrap: normal; |
|
flex: 1 1 auto; /* 20260304; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/ |
|
padding-bottom: 0.1rem; |
|
} |
|
|
|
.input-container > .label { /*Standarddarstellung für größere Viewports*/ |
|
margin-bottom: 0.3rem; |
|
margin-right: 0.5rem; /* Abstand zwischen Label und Eingabefeld*/ |
|
} |
|
|
|
.field { |
|
margin-left: 1px; /*für Abstand Buttonbar-SelectFeld*/ |
|
} |
|
|
|
/* -- Legende --*/ |
|
.legende, p.legende { |
|
display: flex; |
|
/*flex-grow: 1; |
|
/*flex-shrink: 1;*/ |
|
flex: 1 1 auto; |
|
flex-flow: row wrap; |
|
justify-content: flex-start; |
|
align-items: normal; |
|
padding: 0.3rem; |
|
margin-bottom: 0.1rem; |
|
width: auto; |
|
} |
|
|
|
p.legende { |
|
@include sx_mixins.font; |
|
@include sx_mixins.border; |
|
display: flex; |
|
flex-wrap: wrap; |
|
max-width: fit-content; |
|
min-width: 0; |
|
white-space: normal; |
|
overflow-wrap: break-word; |
|
word-break: normal; |
|
hyphens: auto; |
|
gap: 1px; |
|
} |
|
|
|
|
|
/* -- Unterhalb Ergebnistabelle: Datensatzinfo -- */ |
|
.pagination-container { |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: left; |
|
gap: 2px; /* Abstand zwischen den Elementen */ |
|
} |
|
|
|
/* -- Fehlermeldung --*/ |
|
p.errmsg { |
|
border: medium solid red; |
|
text-align: left; |
|
background-color: #d7d7d7; |
|
} |
|
|
|
span.hidden_navi { |
|
margin: 0px; |
|
padding: 0px; |
|
font-size: smaller; |
|
display: inline; |
|
} |
|
|
|
// ====================== |
|
// -- Ergebnistabellen -- |
|
// ====================== |
|
/* -- Tabelle -- */ |
|
.level-center, .treebutton { /*für zentrierte Icons in Tabelle*/ |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
table, |
|
table.ergtabelle, |
|
table.nd_ergtabelle { |
|
/*min-width: 130%;*/ /* Tabellen-Breite gößer als Container-Breite, damit Scrollbalken sichtbar ist */ |
|
width: 100%; |
|
max-width: 100%; |
|
table-layout: auto; |
|
white-space: normal; |
|
hyphens: auto; |
|
margin: 0; |
|
padding: 0; |
|
border-spacing: 0px; /*Abstand zwischen den Zellen*/ |
|
border-collapse: collapse; |
|
@include sx_mixins.font; |
|
font-size: 0.8rem; |
|
} |
|
|
|
/* -- Tabellenkopf -- */ |
|
table th.printheader { |
|
font-size: 10pt; |
|
font-weight: bold; |
|
text-align: center; |
|
background-color: white; |
|
border-top: 1px solid; |
|
border-right: 1px solid; |
|
border-bottom: 1px solid; |
|
border-left: 0; |
|
} |
|
|
|
|
|
table th, |
|
table.ergtabelle th, |
|
table.nd_ergtabelle th { |
|
border: sx_theme.theme(border-style); |
|
border-collapse: separate; |
|
background-color: sx_theme.theme(table-background-header); |
|
vertical-align: top; |
|
white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/ |
|
text-align: left; |
|
text-align-last:left; |
|
hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ |
|
padding: 3px 0px !important; /*Textabstand innerhalb der Zelle: oben/unten sowie rechts/links*/ |
|
/*padding-inline: 2px;*/ |
|
} |
|
|
|
|
|
table.thead, |
|
table.ergtabelle thead, |
|
table.nd.ergtabelle thead, |
|
table.thead th, |
|
table.ergtabelle thead th, |
|
table.nd_ergtabelle thead th { /*wirkt auf einz. Kopfzeile*/ |
|
border: sx_theme.theme(border-style); |
|
border-collapse: separate; |
|
background-color: sx_theme.theme(table-background-header); |
|
position: sticky; |
|
top: 50px; /*0*/ |
|
z-index: 20; |
|
} |
|
|
|
|
|
/*-- fixierte Zeilen und Spalten --*/ |
|
table th.fixed-column1-title, /*table th.header,*/ |
|
table td.fixed-column1 { /*für Spaltentitel*/ |
|
border: sx_theme.theme(border-style); |
|
border-collapse: separate; |
|
background-color: sx_theme.theme(table-background-header); |
|
@include sx_mixins.font; |
|
font-size: 0.8rem; |
|
font-weight: bold; |
|
} |
|
|
|
table th.fixed-column1-title, |
|
table td.fixed-column1 |
|
table.ergtabelle th.fixed-column1-title, |
|
table.ergtabelle td.fixed-column1, |
|
table.nd_ergtabelle th.fixed-column1-title, |
|
table.nd_ergtabelle td.fixed-column1 { /*zum Fixieren des 1. Spaltentitels b. horizont. Scrollen*/ |
|
border: sx_theme.theme(border-style); |
|
border-collapse: separate; |
|
position: sticky; |
|
z-index: 25; |
|
left: 0em; |
|
/*text-align: center;*/ |
|
} |
|
|
|
table td.fixed-column1 |
|
table.ergtabelle td.fixed-column1 |
|
table.nd_ergtabelle td.fixed-column1 { |
|
filter: opacity(1); |
|
} |
|
|
|
/* -- Tabellenzellen, allg. -- */ |
|
//table.td, |
|
table.ergtabelle td, |
|
table.nd_ergtabelle td { |
|
border: sx_theme.theme(border-style); |
|
vertical-align: bottom; /*top; |
|
white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/ |
|
//text-align: left; |
|
//text-align-last:left; |
|
hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ |
|
padding: 3px 0px !important; /*Textabstand innerhalb der Zelle: oben/unten sowie rechts/links*/ |
|
/*padding-inline: 2px;*/ |
|
} |
|
|
|
/* -- Hierarchiezeilen -- */ |
|
table tr.erglevel_1 { |
|
background: sx_theme.theme(table-background-row-level-1); |
|
font-weight:bold; |
|
} |
|
|
|
table tr.erglevel_2 { |
|
background: sx_theme.theme(table-background-row-level-2); |
|
} |
|
|
|
table tr.erglevel_3 { |
|
background: sx_theme.theme(table-background-row-level-3); |
|
} |
|
|
|
table tr.erglevel_4 { |
|
background: sx_theme.theme(table-background-row-level-4); |
|
} |
|
|
|
table tr.erglevel_5 { |
|
background: sx_theme.theme(table-background-row-level-5); |
|
} |
|
|
|
table tr.erglevel_6 { |
|
background: sx_theme.theme(table-background-row-level-6); |
|
} |
|
|
|
/* -- Spezielle Zeilen und Zellen -- */ |
|
table td.string { |
|
text-align: left; |
|
empty-cells:show; |
|
} |
|
|
|
table td.boldnumber { |
|
text-align: right; |
|
empty-cells:show; |
|
font-weight:bold; |
|
} |
|
|
|
table td.decimal, |
|
table td.integer, |
|
table td.prozent { |
|
text-align: right; |
|
empty-cells:show; |
|
} |
|
|
|
table td.lt5:before { |
|
content: "< 5"; |
|
color: sx_theme.theme(error-color); /*rot*/ |
|
} |
|
|
|
table td.prozent { |
|
text-align: right; |
|
font-style: italic; |
|
//color: #999999; |
|
color: sx_theme.theme(table-color-special-value); /*default-blaugrau*/ |
|
} |
|
|
|
table td.result { |
|
font-size: 10pt; |
|
empty-cells:show; |
|
} |
|
|
|
table tr.issumme { |
|
font-weight: bolder; |
|
//background-color: #d7d7d7; /*hellgrau*/ |
|
background-color: sx_theme.theme(table-background-row-sum); /*hellgrau*/ |
|
} |
|
|
|
/* -- Hervorhebungen --*/ |
|
table.ergtabelle tr:hover, table.nd_ergtabelle tr:hover, |
|
table.ergtabelle tr:focus, table.nd_ergtabelle tr:focus { |
|
//background-color: hsl(219, 70%, 76%); /*graublau*/ |
|
background-color: sx_theme.theme(table-background-row-hover); /*graublau*/ |
|
} |
|
|
|
/* -- Tabellenzeilen ohne Hierarchie -- */ |
|
.listRowEven { /*gerade Zeile*/ |
|
background-color: sx_theme.theme(table-background-row-even); /*weißgrau*/ |
|
} |
|
|
|
.listRowOdd { /*ungerade Tabellenzeile*/ |
|
//background-color: #FFFFFF; |
|
background-color: sx_theme.theme(table-background-row-odd); /*weiß*/ |
|
} |
|
|
|
.listRowEvenHover, .listRowOddHover { |
|
//background-color: #FFFABF; |
|
background-color: sx_theme.theme(table-background-row-even-odd-hover); /*hellgelb*/ |
|
} |
|
|
|
/* -- Teiltabelle --*/ |
|
p.teiltabelle_titel { |
|
clear: left; |
|
line-height: 2em; |
|
border-bottom: 2px solid black; |
|
color: black; |
|
display: block; |
|
font-size: 2em; |
|
font-weight: bolder; |
|
margin: 5px 0 20px 5px; |
|
padding: 0px 0px 0px 5px; |
|
} |
|
|
|
// ============================================== |
|
// --- Media-Queries für responsives Verhalten--- |
|
// ============================================== |
|
|
|
/* -- Mobile -- */ |
|
@media (max-width: 768px) { |
|
.hero-body { |
|
margin-left: 0; |
|
margin-right: 0; |
|
} |
|
.container, .input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ |
|
max-width: 100%; |
|
white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/ |
|
hyphens: auto; |
|
} |
|
|
|
table.ergtabelle, |
|
table.nd_ergtabelle { |
|
max-width: 70%; |
|
font-size: 0.65rem; |
|
} |
|
|
|
table.ergtabelle th, |
|
table.ergtabelle td, |
|
table.nd_ergtabelle th, |
|
table.nd_ergtabelle td { |
|
min-width: 50px; |
|
max-width: 60px; |
|
white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/ |
|
hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ |
|
} |
|
} |
|
|
|
/* -- Tablet -- */ |
|
@media (min-width: 769px) and (max-width: 1023px) { /*202608 geändert auf 1023px gem. Bulma-Breakpoint*/ |
|
.container, .input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/ |
|
max-width: 100%; |
|
white-space: normal; /*Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/ |
|
hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ |
|
} |
|
|
|
table.ergtabelle, |
|
table.nd_ergtabelle { |
|
max-width: 80%; |
|
font-size: 0.7rem; |
|
} |
|
|
|
table.ergtabelle th, |
|
table.ergtabelle td, |
|
table.nd_ergtabelle th, |
|
table.nd_ergtabelle td { |
|
max-width: 80%; |
|
white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/ |
|
hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ |
|
} |
|
} |
|
|
|
/* -- Desktop -- */ |
|
@media (min-width: 1024px) { /*202608 geändert auf 1024px gem. Bulma-Breakpoint*/ |
|
table.ergtabelle, |
|
table.nd_ergtabelle { |
|
font-size: 0.75rem; |
|
} |
|
} |
|
|
|
|
|
@media screen and (min-width: 1216px) { |
|
.container:not(.is-max-desktop) { |
|
max-width: 1000px; |
|
} |
|
} |
|
|
|
/*# sourceMappingURL=sx_tabelle.css.map */ |
|
|
|
|
|
|