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.
1288 lines
30 KiB
1288 lines
30 KiB
// config/_sx_common.scss |
|
//--Inhalt: Farben, Formen, Abstände für Body, Buttons, Formulare-- |
|
|
|
@use "../config/sx_theme"; |
|
@use "../config/sx_mixins"; |
|
|
|
// ======== |
|
// --Body-- |
|
// ======== |
|
|
|
/* -- Bildschirmseite -- */ |
|
body { |
|
@include sx_mixins.body; |
|
@include sx_mixins.font; |
|
} |
|
|
|
div.columns { /*für Abstand zum Seitenrand*/ |
|
margin-top: 1px; |
|
margin-right: 5%; |
|
} |
|
|
|
.hero-body { |
|
margin-left: 0; |
|
margin-right: 1.5em; |
|
} |
|
|
|
|
|
/* -- Tennlinie -- */ |
|
hr { |
|
background-color: sx_theme.theme(hr-background-color); |
|
margin-top: -1rem; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
/* -- Silbentrennung --*/ |
|
.trennung { |
|
-webkit-hyphens: auto; /* Safari 3.1+ */ |
|
-moz-hyphens: auto; /* Firefox 2+ */ |
|
-ms-hyphens: auto; /* IE 10+ */ |
|
hyphens: auto; |
|
} |
|
|
|
/* --Box-Sizing = Border-Box -- */ |
|
*, |
|
*::before, |
|
*::after { |
|
box-sizing: border-box; |
|
} |
|
|
|
// ========================== |
|
// --Buttons, Buttonbar-- |
|
// ========================== |
|
|
|
.button, button.button, span.button, .subdir-button, .stb-button, { |
|
@include sx_mixins.font; |
|
background-color: sx_theme.theme(button-background); |
|
} |
|
|
|
.button { /*für Button-Bezeichner-Ausrichtung*/ |
|
display: flex; |
|
justify-content: left !important; |
|
} |
|
|
|
.button.is-rounded { |
|
border-color: sx_theme.theme(border-color); |
|
background-color: sx_theme.theme(button-background); |
|
} |
|
|
|
.submit_button { /* zum Abschicken, Übernehmen*/ |
|
background-color: sx_theme.theme(button-background); |
|
@include sx_mixins.border; |
|
border-color: sx_theme.theme(submit-button-border-color); /*grün*/ |
|
} |
|
|
|
.reset_button { /* zum Zurücksetzen, Leeren*/ |
|
background-color: sx_theme.theme(button-background); |
|
@include sx_mixins.border; |
|
border-color: sx_theme.theme(reset-button-border-color); |
|
} |
|
|
|
.close_button { /*zum Schließen*/ |
|
background-color: sx_theme.theme(button-background); |
|
@include sx_mixins.border; |
|
border-color: sx_theme.theme(reset-button-border-color); /*hellgrau*/ |
|
} |
|
|
|
.menubutton, .orgunitbutton, .closebutton { /*für Button-Style*/ |
|
display: flex; |
|
justify-content: center; |
|
background: inherit; |
|
padding: 0.4rem 0rem 0.4rem 0rem; /*für Padding: ob re un li*/ |
|
box-shadow: rgba(0, 0, 0, 0.1) 0.1em 1.1px; |
|
width: 1.8rem; |
|
height: 1.8rem; |
|
@include sx_mixins.border; |
|
border-color: white; |
|
} |
|
|
|
.buttonbar { |
|
display: flex; /*für resposive Buttonleiste*/ |
|
flex-flow: row wrap; |
|
justify-content: flex-start; |
|
align-items: normal; |
|
} |
|
|
|
.buttonbar img { /*für Icongröße in Buttonleiste*/ |
|
height: 1.5rem; |
|
width: 1.7rem; |
|
margin: 8px 0px 0px 0px; |
|
padding: 0rem 0.1rem 0rem 0.1rem; /*für Padding: ob re un li*/ |
|
} |
|
|
|
.buttonbar_text { |
|
font-size: 10px; |
|
} |
|
|
|
// ================================== |
|
// -- Tooltip-Style und Positionen -- |
|
// ================================== |
|
|
|
.select select, .input, .field.has-addons .control .button { |
|
height: 2.5em; |
|
} |
|
|
|
.field.has-addons .control:not(:last-child) { |
|
margin-right: -2px; /* damit sich die Ränder optisch überlagern */ |
|
} |
|
|
|
.button.has-tooltip-bottom { |
|
height: 2rem; /* entspricht der Höhe des Eingabeldes*/ |
|
} |
|
|
|
[data-tooltip]:not(.is-disabled).has-tooltip-bottom::before, |
|
[data-tooltip]:not(.is-loading).has-tooltip-bottom::before, |
|
[data-tooltip]:not([disabled]).has-tooltip-bottom::before { |
|
display: flex; |
|
position: absolute; |
|
z-index: 3000; |
|
margin: 0.5em; |
|
padding: 1em; |
|
background-color: sx_theme.theme(tooltip-background); |
|
@include sx_mixins.font; |
|
color: sx_theme.theme(tooltip-font-color); |
|
|
|
text-align: left; |
|
max-width: 250px; |
|
height: fit-content; |
|
overflow-wrap: break-word !important; |
|
word-break: normal !important; |
|
white-space: normal !important; |
|
hyphens: auto; |
|
} |
|
|
|
// ================ |
|
// -- Formulare -- |
|
// ================ |
|
/* -- Label --*/ |
|
|
|
.required:before { |
|
content: "* "; /*Kennz. für obligatorische Eingabefelder*/ |
|
} |
|
|
|
.label, .labelNormal, .labelPflicht, |
|
.label.is-small { |
|
@include sx_mixins.font; |
|
} |
|
|
|
.labelSichtorComboButton, .labelPflicht, .labelNormal, .labelSichtorComboButtonPflicht { |
|
white-space: normal; /* für Zeilenumbrüche nach Standard-Regeln*/ |
|
word-wrap: normal; /* veraltet: für Umbrüche nach Standard-Regeln*/ |
|
overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ |
|
hyphens: auto; |
|
text-align: right; /* für rechtsbündigen und umgebrochenen Text*/ |
|
cursor: pointer; |
|
width: 100%; |
|
} |
|
|
|
.labelSichtorComboButton, .labelSichtorComboButtonPflicht { |
|
@include sx_mixins.font; |
|
color: var(--bulma-link-text); /*Linkfarbe*/ |
|
} |
|
|
|
.labelSichtorComboButtonPflicht::before, .labelPflicht::before { |
|
content: "* " |
|
} |
|
|
|
.label-container, .button-label { /*für einh.responsive Feldbezeichner; vgl. dazu auch: sx_menu.css*/ |
|
display: flex; |
|
background: inherit; |
|
min-width: 7.5rem; /*für kleine Viewports*/ |
|
width: 100%; |
|
} |
|
|
|
.button-label button { |
|
white-space: normal; /* für Zeilenumbrüche nach Standard-Regeln*/ |
|
word-wrap: normal; /* veraltet: für Umbrüche nach Standard-Regeln*/ |
|
overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ |
|
line-height: 1; |
|
padding-left: 0rem !important; |
|
text-align: center; /*für zentrierten Text*/ |
|
width: 100%; |
|
} |
|
|
|
.label-container-dialog { /*für Dialogfelder*/ |
|
display: flex; |
|
justify-content: left; |
|
background: inherit; |
|
min-width: 10rem; /*für kleine Viewports*/ |
|
} |
|
|
|
.labelNormal-dialog { |
|
white-space: normal; /* für Zeilenumbrüche nach Standard-Regeln*/ |
|
overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ |
|
text-align: left; /* für linksbündigen und umgebrochenen Text*/ |
|
width: 100%; |
|
} |
|
|
|
/* -- Selektionsfelder -- */ |
|
.form-submit { |
|
display: flex; |
|
column-gap: 0.5rem; |
|
background: inherit; |
|
border: none; |
|
margin-top: 1em; |
|
margin-left: 22em; |
|
} |
|
|
|
.form-submit-item { |
|
display: flex; |
|
} |
|
|
|
.selectionbox { |
|
display: flex; |
|
width: 80%; |
|
justify-content: left; |
|
padding: 0rem; |
|
} |
|
|
|
.control-new { /*für einheitl. Controlbreite in Masken u. Themenbaum*/ |
|
min-width: 12rem; /*für kleine Viewports*/ |
|
width: 100%; /*für große Viewports*/ |
|
height: 1.6rem; |
|
} |
|
|
|
.control-new-narrow { /*für einheitl. Controlbreite in Masken u. Themenbaum*/ |
|
min-width: 8rem; /*für kleine Viewports*/ |
|
width: 20%; /*für große Viewports*/ |
|
margin: 0rem 0.2rem 0.1rem 0.2rem; /*für Margin: ob re un li*/ |
|
} |
|
|
|
.field-container { |
|
display: flex; |
|
flex-direction: column; /* Ordnet alle Felder vertikal */ |
|
gap: 1px; /* Abstand zwischen den Feldern */ |
|
width: 100%; /* Passt sich verfügbarer Breite an */ |
|
} |
|
|
|
.field { |
|
@include sx_mixins.font; |
|
margin-left: 1%; |
|
align-items: center; /*für horizontale Label-Ausrichtung*/ |
|
} |
|
|
|
.field-body { /*für Feldhöhe/-abstand*/ |
|
height: 1.2rem; |
|
} |
|
|
|
/* -- Input --*/ |
|
.input, .textarea, .select select { |
|
@include sx_mixins.input; |
|
} |
|
|
|
.input.is-small, .select.is-small { |
|
@include sx_mixins.font; |
|
} |
|
|
|
input.schluesselfeld { |
|
background-color: #ffffcc; |
|
@include sx_mixins.font; |
|
font-size: 0.9em; |
|
color: blue; |
|
} |
|
|
|
input.ndSchluesselfeld { |
|
@include sx_mixins.input; |
|
border: sx_theme.theme(border-style); |
|
/*border-color: hsl(var(--bulma-input-focus-h), var(--bulma-input-focus-s), var(--bulma-input-focus-l)); |
|
--bulma-input-border-width: 1px; |
|
--bulma-input-border-l: var(--bulma-border-l); |
|
/*box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);*/ |
|
background-color: sx_theme.theme(input-background-ndSchluesselfeld); /*weißgelb*/ |
|
/*font-size: var(--bulma-size-small);*/ |
|
padding-left: 5px; |
|
line-height: 2; |
|
} |
|
|
|
|
|
/* -- Platzhalter, Textarea -- */ |
|
.placeholder, .input::placeholder, .textarea::placeholder, .select select::placeholder, |
|
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder, |
|
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { |
|
@include sx_mixins.font; |
|
color: sx_theme.theme(mittelgrau); |
|
} |
|
|
|
//.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder, |
|
//.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { |
|
// color: darkgrey; |
|
//} |
|
|
|
.resizable-textarea { |
|
resize: vertical; /* Erlaubt vertikales Vergrößern */ |
|
overflow: auto; /* Scrollt den Inhalt, wenn er zu groß wird */ |
|
min-height: 7em; /* Ausgangshöhe */ |
|
max-height: 300px; /* Maximale Höhe */ |
|
margin-left: 12px; |
|
} |
|
|
|
// ===================================== |
|
// -- Top-, Bottom-, Side-Navigation -- |
|
// ===================================== |
|
|
|
/* Top-Navi */ |
|
.navbar, .bottom-nav { |
|
background: sx_theme.theme(navbar-background); |
|
} |
|
|
|
.navbar { |
|
display: flex; |
|
align-items: center; |
|
flex-flow: row wrap; |
|
} |
|
|
|
.navbar-end { |
|
display: flex; |
|
} |
|
|
|
.navbar-item { |
|
margin-bottom: 0.1rem; |
|
} |
|
|
|
/* Bottom-Navi */ |
|
#nd_navi_bottom { |
|
/*position: fixed; /*20250602 damit gesamtes Menü sichtbar ist*/ |
|
bottom: 0; |
|
width: 100%; |
|
} |
|
|
|
.bottom-nav { /*für Bottomnavi-Zeile*/ |
|
display: flex; |
|
flex-flow: row nowrap; |
|
justify-content: center; |
|
height: 45px; |
|
} |
|
|
|
.bottom-nav li { /*für Bottomnav-Liste*/ |
|
display: flex; |
|
flex: 1; |
|
align-items: center; |
|
justify-content: space-evenly; |
|
} |
|
|
|
.poweredby_sxbi { |
|
display: flex; |
|
content: url(../images/poweredby_sxbi.svg); |
|
width: 10rem; |
|
} |
|
|
|
// =================================== |
|
// -- Menü via Navpanel, Themenbaum -- |
|
// =================================== |
|
/* -- NavPanel -- */ |
|
.panel-block, .panel-tabs, |
|
.navbar-item, .navbar-dropdown, .bottom-nav { |
|
@include sx_mixins.border; |
|
border-color: transparent; |
|
} |
|
|
|
.menu-label { |
|
@include sx_mixins.font; |
|
background: inherit; |
|
} |
|
|
|
.menu-list a { |
|
@include sx_mixins.font; |
|
background: sx_theme.theme(input-background); |
|
} |
|
|
|
a:hover, a:focus { /*für Hervorhebung bei Anwahl*/ |
|
color: sx_theme.theme(font-color); |
|
background-color: white; /*transparent;*/ |
|
} |
|
|
|
.navpanel { |
|
position: static; /*damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/ |
|
padding: 0; |
|
} |
|
|
|
.navpanelFrame { /*für gesamtes NavPanel*/ |
|
display: flex; |
|
flex-flow: column; |
|
list-style: none; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.navpanelFrame { /*zum Ausblenden gesamten NavPanels*/ |
|
display: none; |
|
} |
|
|
|
/*.navpanel a { } /*Eigenschaften deaktiviert da überlagert mit themenbaumStatic/.Nested a und li; sh. Z480+Z486*/ /*für Nav-Elemente*/ |
|
|
|
.level-center { |
|
display: flex; |
|
align-items: center; |
|
flex-grow: 1; |
|
width: 100%; /* Optional: vollständige Breite des Containers */ |
|
height: 100%; /* Optional: vollständige Höhe des Containers */ |
|
} |
|
|
|
.panel-block { |
|
display: flex; |
|
} |
|
|
|
.panel-block-search { |
|
margin-left: 10px; |
|
} |
|
|
|
.menu-label { |
|
margin-left: 5%; |
|
text-transform: unset; |
|
} |
|
|
|
.panel-icon { |
|
margin: 2%; |
|
} |
|
|
|
/* -- Auf-/Zuklappen von NaviPanel-Auswertungen -- */ |
|
.menubutton::before { /*für Button-Grafik*/ |
|
display: flex; |
|
justify-content: center; |
|
content: url(../images/burger.svg); |
|
width: 1rem; |
|
height: 0.8rem; |
|
} |
|
|
|
.closebutton::before { /*für Button-Grafik*/ |
|
display: flex; |
|
justify-content: center; |
|
content: url(../images/close_grey.svg); |
|
width: 1rem; |
|
height: 0.8rem; |
|
} |
|
|
|
.closenavpanel.closebutton::before { /*für Buttonanzeige bei geschlossenem NavPanel*/ |
|
display: flex; |
|
content: url(../images/burger.svg); |
|
} |
|
|
|
/* -- Auf-/Zuklappen von NaviPanel-OrgUnits -- */ |
|
/* Angaben zu closebutton::before; closebutton-Style; closebutton-Grafik s.o. bei Nav-Panel-Auswertungen*/ |
|
.orgunitbutton::before { /*für Button-Grafik*/ |
|
display: flex; |
|
justify-content: center; |
|
content: url(../images/sitemap_blue_dark.svg); |
|
width: 1rem; |
|
height: 0.8; |
|
} |
|
|
|
.shownavpanel_ou + ul { /*nur relevant, wenn NavPanel beim Dialogöffnen ausgeblendet ist*/ |
|
display: flex; /*bitte auch Hinweis zur Code(de)aktivierung im template nd_navi_panel/nd_navi_panel_ou beachten*/ |
|
flex-flow: column; |
|
max-height: 600rem; |
|
transition: 500ms; |
|
overflow: initial; |
|
} |
|
|
|
.shownavpanel_ou.orgunitbutton::before { /*für Buttonanzeige bei geöffnetem NavPanel*/ |
|
display: flex; |
|
content: url(../images/close_grey.svg); |
|
padding-right: 0.9rem; |
|
width: 0.7rem; |
|
height: 0.7rem; |
|
} |
|
|
|
.closenavpanel_ou + ul { /*darf nur AKTIV sein, wenn NavPanel beim Dialogöffnen eingeblendet sein soll*/ |
|
display: none; /*bitte auch Hinweis zur Codeaktivierung in templates nd_navi_panel/nd_navi_panel_orgunits beachten*/ |
|
} |
|
|
|
.closenavpanel_ou.closebutton::before { /*für Buttonanzeige bei geschlossenem navpanel*/ |
|
display: flex; |
|
content: url(../images/sitemap_blue_dark.svg); |
|
} |
|
|
|
// ==================================== |
|
// -- Themenbaum mit Hierarchieebenen-- |
|
// ==================================== |
|
/* -- Auf-/Zuklappen von Themenbaum/ThemenbaumNested -- */ |
|
.themenbaumNested { /*zum Auf-/Zuklappen*/ |
|
display: none; /*erforderlich für initial zusammengklappten Themenbaum*/ |
|
margin-right: 0px; |
|
} |
|
|
|
.themenbaumActive { |
|
display: block; |
|
margin-right: 0px; |
|
} |
|
|
|
.themenbaumStatic li.themenbaumEintrag { /*für ListElemente*/ |
|
margin-left: 23px; |
|
width: 310px; |
|
box-sizing: border-box; /* Beinhaltet Padding und Border in der Breitenberechnung*/ |
|
margin-top: 0; /* ohne zusätzlichen Freiraum oberhalb*/ |
|
margin-bottom: 0; /* ohne zusätzlichen Freiraum unterhalb*/ |
|
} |
|
|
|
.themenbaumStatic li.themenbaumEintrag:not(:last-child) { /*für ListElemente*/ |
|
border-bottom: 0.1px solid sx_theme.theme(border-color); /*#cccccc;*/ |
|
} |
|
|
|
.themenbaumNested li.themenbaumEintrag:not(:last-child) { /*für ListElemente*/ |
|
width: 95%; |
|
box-sizing: border-box; /* Verhindert überschüssige Breitenänderungen */ |
|
margin-top: 0; /* ohne zusätzlichen Freiraum oberhalb */ |
|
margin-bottom: 0; /* ohne zusätzlichen Freiraum unterhalb */ |
|
border-bottom: 0.3px dotted sx_theme.theme(border-color); |
|
} |
|
|
|
.themenbaumStatic a, .themenbaumNested a { /*für BaumElemente*/ |
|
@include sx_mixins.font; |
|
color: blue; /*var(--bulma-link-text);*/ |
|
margin-left: 5px; |
|
} |
|
|
|
.themenbaumEintrag { |
|
display: block; /*Zeigt jedes Thema als Blockelement, sodass es vertikal gestapelt wird */ |
|
} |
|
|
|
.themenbaumLink, .panel-item { /*20250704 panel-item ergänzt*/ |
|
display: inline-flex; /* Flexbox sorgt dafür, dass Icons und Text korrekt ausgerichtet sind */ |
|
align-items: baseline; /* Vertikale Zentrierung von Icon und Text */ |
|
} |
|
|
|
.themenbaumLinkName { |
|
white-space: normal; /* Erlaubt Zeilenumbruch */ |
|
overflow-wrap: break-word; /* Ermöglicht Umbruch bei langen Wörtern */ |
|
padding-left: 0.2em; /* Abstand nach links vom Icon */ |
|
display: block; /* Block, um Zeilenumbrüche zu unterstützen */ |
|
@include sx_mixins.font; |
|
color: blue; |
|
} |
|
|
|
.themenbaumLinkWithSpace { |
|
text-decoration: none; /*keine Unterstreichung für Links */ |
|
box-decoration-break: clone; |
|
-webkit-box-decoration-break: clone; |
|
} |
|
|
|
.themenbaumPlaceholder { |
|
padding-left: 5px; /*für Abstand zu linkem Rand u. Linktext*/ |
|
} |
|
|
|
.themenbaumCaret { |
|
cursor: pointer; /* Zeigt an, dass das Caret klickbar ist */ |
|
-webkit-user-select: none; /* Safari 3.1+ */ |
|
-moz-user-select: none; /* Firefox 2+ */ |
|
-ms-user-select: none; /* IE 10+ */ |
|
user-select: none; |
|
display: inline-block; /* Caret bleibt in der gleichen Zeile wie der Text */ |
|
vertical-align: text-bottom; /* Vertikale Ausrichtung des Carets mit dem Text */ |
|
} |
|
|
|
.themenbaumCaret-down::before { |
|
-ms-transform: rotate(270deg); /* IE 9 */ |
|
-webkit-transform: rotate(270deg); /* Safari */ |
|
transform: rotate(270deg); |
|
} |
|
|
|
.themenbaumCaret::before { |
|
content: ">"; |
|
color: sx_theme.theme(themenbaumCaret-color); |
|
display: inline-block; /* Caret bleibt in der gleichen Zeile wie der Text */ |
|
} |
|
|
|
ol.themenbaumSearchResults { /*für Suchergebnisse*/ |
|
padding-left: 20px; |
|
} |
|
|
|
// ============== |
|
// --Breadcrumb-- |
|
// ============== |
|
|
|
.breadcrumb { |
|
@include sx_mixins.font; |
|
@include sx_mixins.border; |
|
padding: 0.2rem; |
|
white-space: normal; |
|
min-width: 0; |
|
max-width: 100%; |
|
} |
|
|
|
.breadcrumb ul { |
|
display: flex; |
|
flex-wrap: wrap; |
|
max-width: 100%; |
|
align-items: center !important; /*für Höhenausrichtung*/ |
|
} |
|
|
|
.breadcrumb li { |
|
min-width: 0; |
|
white-space: normal; |
|
overflow-wrap: break-word; |
|
word-break: normal; |
|
hyphens: auto; |
|
} |
|
|
|
.breadcrumb.has-path-separator li + li::before { |
|
content: " > "; |
|
color: sx_theme.theme(breadcrumbSeparator-color); |
|
} |
|
|
|
.breadcrumb, .breadcrumb a { |
|
user-select: auto; /*für Markierung des Inhalts */ |
|
} |
|
|
|
|
|
// ====================================================== |
|
// --Article, Box, Card, Cell, Container, Grid, Modal -- |
|
// ====================================================== |
|
.article, .article ul, .card, .cell, .grid { |
|
@include sx_mixins.font; |
|
} |
|
/* -- Article -- */ |
|
.article { /*Position, -style*/ |
|
display: flex; |
|
flex-flow: column; |
|
/*margin: 1%; 20261005 deaktiviert*/ |
|
white-space: normal; /* für Zeilenumbrüche nach Standard-Regeln*/ |
|
word-wrap: normal; /* veraltet: für Umbrüche nach Standard-Regeln*/ |
|
overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ |
|
hyphens: auto; |
|
text-align: left; /* für linksbündigen und umgebrochenen Text*/ |
|
cursor: pointer; |
|
width: 100%; |
|
} |
|
|
|
/* -- Container, Cell -- */ |
|
.container { |
|
display: flex; |
|
flex-wrap: wrap; /*für Zeilenumbruch bei Platzmangel*/ |
|
justify-content: flex-start; /*Inhalte links*/ |
|
align-items: flex-start; /*Inhalte vertikal ausrichten*/ |
|
margin-left: 0rem; |
|
} |
|
|
|
.cell { |
|
flex: 1 1 auto; /*flex-grow, flex-shrink, flex-basis = ; für flexibles Verhalten der Zeile*/ |
|
display: flex; /*flexibles Wachstum ohne feste Breite */ |
|
padding: 0rem 0.25rem; /*padding oben+unten, rechts+links*/ |
|
margin-bottom: 0.1rem; |
|
box-sizing: border-box; |
|
border: thin solid hsl(0, 0%, 60%); /*hellgrau*/ |
|
border-radius: 0.3em; |
|
} |
|
|
|
/* -- Card, Box -- */ |
|
.box, .card { /*Box für Pfad, Buttonleiste bzw. Menü-Kacheln; Card für Formulare, Ergebnistabellen*/ |
|
box-shadow: none; |
|
background-color: sx_theme.theme(card-background); |
|
} |
|
|
|
.card { /*Position, -style*/ |
|
display: flex; |
|
flex-flow: column; |
|
/*margin: 1%; 20261005 deaktiviert*/ |
|
white-space: normal; /* für Zeilenumbrüche nach Standard-Regeln*/ |
|
word-wrap: normal; /* veraltet: für Umbrüche nach Standard-Regeln*/ |
|
overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ |
|
hyphens: auto; |
|
text-align: left; /* für linksbündigen und umgebrochenen Text*/ |
|
cursor: pointer; |
|
//width: 100%; |
|
margin-top: 0.45rem !important; |
|
@include sx_mixins.border; |
|
border-color: white; |
|
} |
|
|
|
.card-content { |
|
padding-left: 1.3rem; |
|
padding-top: 0; |
|
} |
|
|
|
.card-footer, .card-footer-item { /*für submit-buttons*/ |
|
display: flex; |
|
flex-flow: row; /*für horizontale Ausrichtung*/ |
|
background: sx_theme.theme(card-footer-background); |
|
border: none; |
|
margin-top: 1rem; |
|
} |
|
|
|
.card-footer-item:not(:last-child) { |
|
border: none; |
|
} |
|
|
|
/* -- Modal-Cards -- */ |
|
.box-new { /*für Kopfzeile mit Close-Button*/ |
|
display: flex; |
|
justify-content: space-between; |
|
@include sx_mixins.font; |
|
font-weight: bold; |
|
} |
|
|
|
.modal-background { |
|
background-color: sx_theme.theme(card-background); |
|
} |
|
|
|
.modalValues { |
|
background-color: sx_theme.theme(modal-values-background); /*für Abschnitthintergrund, Schrift*/ |
|
@include sx_mixins.font; |
|
font-size: 0.8em; |
|
padding: 1rem; |
|
} |
|
|
|
.modalDl_title { /*für Texthervorhebungen*/ |
|
display: flex; |
|
justify-content: center; |
|
background: inherit; |
|
font-size: 1.2em; |
|
font-weight: 400; |
|
} |
|
|
|
span.feldname { |
|
font-weight: medium; |
|
} |
|
|
|
span.feldwert { |
|
font-weight: bolder; |
|
} |
|
|
|
// ============================ |
|
// --Titel, Untertitel. etc.-- |
|
// ============================ |
|
.title, .subtitle, .supplement, span.report-explanation, dropdown, .resultcount, .searchresult, |
|
.dontprint, .panel-block, .panel-tabs { |
|
@include sx_mixins.font; |
|
} |
|
|
|
.title, .subtitle { /*für Seitentitel*/ |
|
margin-top: 0.4em; |
|
padding-bottom: 0.1em; /* für Padding: ob re un li*/ |
|
white-space: normal; /* für Zeilenumbrüche nach Standard-Regeln*/ |
|
word-wrap: normal; /* veraltet: für Umbrüche nach Standard-Regeln*/ |
|
overflow-wrap: break-word; /* aktuell: für Umbrüche nach Standard-Regeln*/ |
|
hyphens: auto; |
|
} |
|
|
|
// ============= |
|
// -- Listen -- |
|
// ============= |
|
ul { |
|
list-style-type: disc; |
|
} |
|
|
|
ol { |
|
margin: 0px; |
|
padding: 0px; |
|
list-style-type: decimal; |
|
list-style-position: inside; |
|
} |
|
|
|
.menu-list { |
|
padding-left: 0.6rem !important; |
|
list-style-type: none; |
|
} |
|
|
|
li.submenu_listelem { |
|
list-style: none; |
|
margin: 10px; |
|
padding: 0; |
|
border-bottom: thin solid silver; |
|
} |
|
|
|
.submenu_listelem:hover, .submenu_listelem:focus { |
|
background-color: white; |
|
} |
|
|
|
// =========================== |
|
// -- Logobuttons und Icons -- |
|
// =========================== |
|
/* -- allgemein -- */ |
|
img.svg_icon { |
|
height: 20px; |
|
} |
|
|
|
.icon_themenbaum_neutral_small { |
|
content: url(../images/icon_neutral_mini.svg); |
|
height: 21px; |
|
width: 20px; |
|
padding-top: 5px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_neutral_normal { |
|
content: url(../images/icon_neutral_mini.svg); |
|
height: 70px; |
|
width: 60px; |
|
padding-top: 15px; |
|
display: inline; |
|
} |
|
|
|
/* -- Logobuttons und Icons für Auswertungstypen -- */ |
|
.icon_themenbaum_datenblatt_normal { |
|
content: url(../images/th.svg); |
|
height: 25px; |
|
width: 25px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_datenblatt_small { |
|
content: url(../images/th.png); |
|
height: 20px; |
|
width: 20px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_zeitreihe_normal { |
|
content: url(../images/chart-line.svg); |
|
height: 25px; |
|
width: 25px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_zeitreihe_small { |
|
content: url(../images/chart-line.png); |
|
height: 20px; |
|
width: 20px; |
|
display: inline-block; |
|
} |
|
|
|
/* -- Logobuttons und Icons für Module a bis e -- */ |
|
.icon_themenbaum_admin_small { |
|
content: url(../images/logobutton_kern.svg); |
|
height: 20px; |
|
width: 20px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_admin_normal { |
|
content: url(../images/logobutton_kern.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_bau_small { |
|
content: url(../images/icon_bau_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_bau_normal { |
|
content: url(../images/logobutton_bau.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_cob_small { |
|
content: url(../images/icon_cob_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_cob_normal { |
|
content: url(../images/logobutton_cob.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_co_stage_small { |
|
content: url(../images/icon_co_stage_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_co_stage_normal { |
|
content: url(../images/logobutton_co_stage.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_erfolg_small { |
|
content: url(../images/icon_erfolg_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_erfolg_normal { |
|
content: url(../images/logobutton_erfolg.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_etl_small { |
|
content: url(../images/icon_etl_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_etl_normal { |
|
content: url(../images/logobutton_etl.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
/* -- Logobuttons und Icons für Module f bis m -- */ |
|
.icon_themenbaum_fin_small { |
|
content: url(../images/icon_fin_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_fin_normal { |
|
content: url(../images/logobutton_fin.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_gang_small { |
|
content: url(../images/icon_gang_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_gang_normal { |
|
content: url(../images/logobutton_gang.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_gx_stage_small { |
|
content: url(../images/icon_gx_stage_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_gx_stage_normal { |
|
content: url(../images/logobutton_gx_stage.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_hr_stage_small { |
|
content: url(../images/icon_hr_stage_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_hr_stage_normal { |
|
content: url(../images/logobutton_hr_stage.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_ivs_small { |
|
content: url(../images/icon_ivs_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_ivs_normal { |
|
content: url(../images/logobutton_ivs.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_kenn_small { |
|
content: url(../images/icon_kenn_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_kenn_normal { |
|
content: url(../images/logobutton_kenn.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_kern_small { |
|
content: url(../images/icon_kern_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_kern_normal { |
|
content: url(../images/logobutton_kern.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_kern_face_small { |
|
content: url(../images/icon_kern_face_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_kern_face_normal { |
|
content: url(../images/logobutton_kern_face.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_leistungsmonitor_small { |
|
content: url(../images/icon_leistungsmonitor_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_leistungsmonitor_normal { |
|
content: url(../images/logobutton_leistungsmonitor.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_list_normal { |
|
content: url(../images/list.svg); |
|
height: 25px; |
|
width: 25px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_list_small { |
|
content: url(../images/list.png); |
|
height: 20px; |
|
width: 20px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_JR_BerDesign_small { |
|
content: url(../images/icon_JR_BerDesign_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_JR_BerDesign_normal { |
|
content: url(../images/logobutton_JR_BerDesign.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_man_small { |
|
content: url(../images/icon_man_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_man_medium { |
|
content: url(../images/icon_man_mini.svg); |
|
height: 30px; |
|
width: 30px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_man_normal { |
|
content: url(../images/logobutton_man.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
/* -- Logobuttons und Icons für Module n bis z -- */ |
|
.icon_themenbaum_nutzungsantrag_small { |
|
content: url(../images/icon_nutzungsantrag.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_nutzungsantrag_normal { |
|
content: url(../images/logobutton_nutzungsantrag.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline-block; |
|
} |
|
|
|
.icon_themenbaum_portal_konfig_small { |
|
content: url(../images/icon_portal_konfig_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_portal_konfig_normal { |
|
content: url(../images/logobutton_portal_konfig.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_prom_small { |
|
content: url(../images/icon_prom_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_prom_normal { |
|
content: url(../images/logobutton_prom.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_qa_small { |
|
content: url(../images/icon_qa_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_qa_normal { |
|
content: url(../images/logobutton_qa.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_rpta_small { |
|
content: url(../images/icon_rpta_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_rpta_normal { |
|
content: url(../images/logobutton_rpta.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_sos_small { |
|
content: url(../images/icon_sos_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_sos_normal { |
|
content: url(../images/logobutton_sos.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_sva_small { |
|
content: url(../images/icon_sva_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_sva_normal { |
|
content: url(../images/logobutton_sva.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_sx_connect_small { |
|
content: url(../images/icon_sx_connect.png); |
|
height: 20px; |
|
width: 20px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_sx_connect_normal { |
|
content: url(../images/logobutton_sx_connect.png); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_viz_small { |
|
content: url(../images/icon_viz_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 8px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_viz_normal { |
|
content: url(../images/logobutton_viz.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_xcube_small { |
|
content: url(../images/icon_xcube_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 4px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_xcube_medium { |
|
content: url(../images/icon_xcube_mini.svg); |
|
height: 30px; |
|
width: 30px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_xcube_normal { |
|
content: url(../images/logobutton_xcube.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_zul_small { |
|
content: url(../images/icon_zul_mini.svg); |
|
height: 20px; |
|
width: 20px; |
|
padding-top: 3px; |
|
display: inline; |
|
} |
|
|
|
.icon_themenbaum_zul_normal { |
|
content: url(../images/logobutton_zul.svg); |
|
height: 100px; |
|
width: 100px; |
|
display: inline; |
|
} |
|
|
|
|
|
|