kern/superx/style/scss/components/_sx_field_dialogue.scss

// pages/_sx_field_dialogue.scss
//--Inhalt: Farben, Formen, Abstände für sx_field_dialogue--

@use "../config/sx_theme";
@use "../config/sx_mixins";


// =============================================================
// -- Titel, Navi, Linie --
// =============================================================

.title-dialogue.is-4 {
    color: sx_theme.theme(title-dialogue-color);
    font-weight: bold;
    font-size: 25px;
}

.title-dialogue.is-4:before {
  content: "";
}

.title-dialogue.is-4:after {
  content: " Filter";
}

.navbar-dialogue {
  position: sticky; /* 202606 ergänzt:Kopfzeile bleibt beim Scrollen "kleben"*/
  top: 0;
  left: 0;
  width: 100%;
  height: 105px;
  z-index: 1000;
  margin-top: -55px;
  background: sx_theme.theme(navbar-dialogue-background);
}

hr {
  margin-top: -1rem;
  margin-bottom: 0.5rem;
}


// =====================================
// -- Buttons, Input, Auswahlfelder --
// =====================================
.a-dialogue {
  @include sx_mixins.font;
  color: black;
  font-weight: bold;
}

button.button-dialogue {
  @include sx_mixins.button-dialogue; 
  background-color: sx_theme.theme(button-background);  //UDE-Grau: #d9d9d9;
  padding: 8px;
  width: 11em;
}

.input-container.sticky-filter { /*202606 Filter ergänzt f. äußeren Container*/
  background: #d9d9d9;
}

input[type=checkbox] {
  vertical-align: bottom;
  line-height: 1.25;
}

.comboDiv-dialogue { 		
  margin-left: 1.6rem;
}

/* -- Standarddarstellung -- */
.comboDiv {
  display: flex;
  justify-content: left;
  margin-top: 1em; 		
}

.input-container.sticky-filter {/*202606 Filter ergänzt f. äußeren Container*/
  position: sticky; 		/*202606 neu: bleibt beim Scrollen sichtbar*/
  top: 105px; 			/* Höhe der Navbar > siehe oben */
  z-index: 999;
  padding: 0.5rem 0;
}

.input-container {
  display: flex;
  flex-direction: row; /* Ordnet Felder horizontal*/
  margin-top: 0.2rem;
 }

.input-container > .label {
  margin-bottom: 1rem; 
  margin-right: 0.5rem; 
  text-align: right; 
}

.field is-grouped is-grouped-multiline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.field.is-grouped {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 0.5rem;
  gap: 1rem;
}

.field {
  align-items: flex-start; /*für gleiche vertik. Feldausrichtung*/
}

.label {
  margin-top: 5px;
  width: 8em; 
 font-weight: bold;  
}

.select select, .input { /*für Auswahlfeldstyle*/
   padding-left: 5px;
}

// ========================================
// Media-Queries für responsives Verhalten
// ========================================

/*--Anpassungen für Viewports Mobile bis 768px=tablet-Hochformat --*/
@media screen and (min-width: 585px) and (max-width: 768px) {
  .input-container {
    flex-direction: row;
    gap: 1px; 		/* Abstand zwischen den Feldern*/
  }
  .input-container > .label { 
    margin-bottom: 0rem;
    text-align: right; 
  }
  .field.is-grouped {
    flex-direction: row;
  }
  .field {
    align-items: flex-start;
  }
}

/* --Anpassung für kleine Viewports (Mobile) -- */
@media screen and (max-width: 584px) {
  .input-container {
    flex-direction: column; /* Stapelt Felder*/
    margin-top: 0rem; 
    padding-bottom: 0.2rem; 
  }
  .input-container > .label { 
    margin-bottom: 0rem;
    text-align: left; 
  }
  .field.is-grouped {
    flex-direction: row;
    column-gap: 5px; /* Abstand label und Input/Select-Felder */
    row-gap: 1px;    /* Höhenabstand zwischen Feldern; ohne Angabe wird Abstand zu groß*/
  }
}

// =========================================================
// --- Ergebnislisten von Sichten und gesuchten Elementen --
// =========================================================

ul {
  list-style: none !important;
}

.sichtentreeUL {
  list-style-type: none;
  margin-left: 2em;
  padding: 0;
}

.sichtentreeCaret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1 */
  -moz-user-select: none; /* Firefox 2 */
  -ms-user-select: none; /* IE 10 */
  user-select: none;
}

.sichtentreeCaret::before {
  content: "▶";
  color: #014A7B;
  display: inline-block;
  margin-right: 0px;
}

.sichtentreeCaret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);
}

.sichtentreePlaceholder {
  margin-left: 16px;
}

.sichtentreeNested {
  display: none;
  margin-right: 0px;
  padding-left: 13px;
}

.sichtentreeActive {
  display: block;
  margin-right: 0px;
  padding-left: 13px;
}

.sichtentreeSpacer {
  padding-left: 10px; /*wofür nötig?*/
}

.sichtentreeLink {
  text-decoration: none; /* keine Unterstreichung für links */
}

.sichtentreeLinkWithSpace {
  text-decoration: none; /* keine Unterstreichung für links */
  margin-left: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

ul.sichtentreeChildUL {
  margin: 0px;
  padding-left: 10px;
  list-style-type: none;
  list-style-position: inside;
  list-style-image: none;
}