4 changed files with 496 additions and 142 deletions
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["sx_field_dialogue.scss"],"names":[],"mappings":";AA6DA;EApCE;EACA;EACA;EACA;EACA;EACA;;;AAkCF;EA9BE;EACA;EACA;EACA;EACA;;;AA8BF;AACA;EAAO;;;AAEP;EACG;EACA;EACA;;;AAGH;EACE,kBAzDoB;EA0DpB;EACA;;;AAGF;AACA;EACI;EACA;EACA;EACA;EACA;EACA,YAhFc;EAiFd;EACA;;;AAGJ;EAA8B;;;AAC9B;EAA6B;;;AAC7B;EACG,OAzFM;EA0FN;EACA;;;AAGH;AAAA;AAEE;AAAA;AAAA;AAAA;AAKF;EACG;EACA;EACA;EACA;;;AAGH;EACE;EACA;AACA;;;AAEF;AACE;EACA;;;AAGF;EACG;;;AAEH;AACA;EACG;EACA;;;AAGH;EACI;EACA;EACA;EACA,YAlIc;EAmId;;;AAGJ;EACI;EACA;EACA;EACA,YA1Ic;;;AA6IlB;EACI;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EAAQ;;;AAGR;EACE;EACA;EACA;;;AAGF;EACG,QA9Ja;EA+Jb;AACA;EACA;EACA;;;AAGH;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGH;IAAoB;;EACpB;IAAQ;;;AAGT;AACA;EACE;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;AAIJ;AACA;EAAK;;;AAEL;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,OA9NsB;EA+NtB;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACA;;;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACA;EACA;EACA;EACA;EACA","file":"sx_field_dialogue.css"} |
||||
@ -0,0 +1,292 @@
@@ -0,0 +1,292 @@
|
||||
@charset "utf-8"; |
||||
// ***Auswahleigenschaften***. |
||||
// *Brand colors* |
||||
$purple: #8a4d76; |
||||
$pink: #fa7c91; |
||||
$brown: #757763; |
||||
$beige-light: #d0d1cd; |
||||
$beige-lighter: #eff0eb; |
||||
$blue: #3333ff; |
||||
$dklgrau:hsl(0, 0%, 21%); |
||||
$memtext-blaugrau:#ECF0F3; |
||||
$mittelgrau:hsl(0, 0%, 60%); |
||||
$hellgrau:hsl(0, 0%, 71%); |
||||
$grün:hsl(141, 71%, 48%); |
||||
$gelb-orange:hsl(48, 100%, 67%); |
||||
|
||||
// ***SuperX-Default*** |
||||
$navbar-dialogue-background: $memtext-blaugrau; |
||||
$title-dialogue-color: $dklgrau; |
||||
$input-container-background: $memtext-blaugrau; |
||||
$sichtentreeCaret-color:#014A7B; |
||||
$hr-background-color: whitesmoke; |
||||
$select-border: thin solid $hellgrau; |
||||
|
||||
@mixin default-button-dialogue { |
||||
border: thin solid $hellgrau; |
||||
border-radius: 0.3em; |
||||
background-color: white; |
||||
color: black; |
||||
padding: 8px; |
||||
width: 11em; |
||||
} |
||||
|
||||
@mixin default-input { |
||||
border: thin solid $hellgrau; |
||||
border-radius: 0.3em; |
||||
background-color: white; |
||||
color: black; |
||||
line-height: 2.5em; |
||||
} |
||||
|
||||
// ***Hochschul-Spezifika*** |
||||
//$navbar-dialogue-background:#003c7aff; //UDE-Blau |
||||
//$title-dialogue-color: white; //passend zum dunklen background |
||||
//$input-container-background:#d9d9d9ff; //UDE-Grau |
||||
|
||||
@mixin hochschul-button-dialogue { |
||||
border: thin solid black; |
||||
background-color: #d9d9d9; //UDE-Grau |
||||
color: black; |
||||
padding: 8px; |
||||
width: 11em; |
||||
} |
||||
|
||||
@mixin hochschul-input { |
||||
background-color: white; |
||||
color: black; |
||||
line-height: 2.5em; |
||||
} |
||||
|
||||
// ***Aktuelle Konfiguration via mixins*** |
||||
button.button-dialogue {@include default-button-dialogue;} |
||||
//button.button-dialogue {@include hochschul-button-dialogue;} |
||||
|
||||
input.input {@include default-input;} |
||||
//input.input {@include hochschul-input;} |
||||
|
||||
|
||||
/*dateispezifische Basics*/ |
||||
body { padding-top: 0px; /*202606 ergänzt die höhe der navbar*/} |
||||
|
||||
body, .label, .searchresult, .placeholder { /*Schrift für Kopf, Suchform.Teile, Suchergebnisse*/ |
||||
font-family: sans serif; |
||||
font-weight: normal; |
||||
font-size: 15px; /*202604 geändert von ursprgl. 12px;*/ |
||||
} |
||||
|
||||
hr { |
||||
background-color: $hr-background-color; |
||||
margin-top: -1rem; |
||||
margin-bottom: 0.5rem; |
||||
} |
||||
|
||||
/*HS-spezifische Anpassungen*/ |
||||
.navbar-dialogue { |
||||
position: sticky; /* 202606 ergänzt:Kopfzeile bleibt beim Scrollen "kleben"*/ |
||||
top:0; |
||||
left: 0; |
||||
width: 100%; |
||||
height:105px; |
||||
background: $navbar-dialogue-background; |
||||
z-index: 1000; |
||||
margin-top: -55px; |
||||
} |
||||
|
||||
.title-dialogue.is-4:before { content:""; } |
||||
.title-dialogue.is-4:after { content:" Filter"; } |
||||
.title-dialogue.is-4 { |
||||
color: $title-dialogue-color; |
||||
font-weight: bold; |
||||
font-size: 25px; |
||||
} |
||||
|
||||
/**20260611 auskomm zum Test.button-dialogue { |
||||
background-color: $button-dialogue-background; /*202604 für ok/reset/sbbruch-button*/ |
||||
/* padding: 8px; |
||||
border: thin solid black; |
||||
width: 11em; |
||||
}*/ |
||||
|
||||
.a-dialogue { |
||||
color: black; |
||||
font-family: sans-serif; |
||||
font-weight: bold; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
input[type="checkbox"] { |
||||
vertical-align: bottom; |
||||
line-height: 1.25; |
||||
/*20260611 auskommentiert zum Test background: $input-background;*/ } |
||||
|
||||
.input::placeholder, .textarea::placeholder, .select select::placeholder { /*202604 eingefügt*/ |
||||
/*20260611 auskomentiert zum Test color: $input-color; */ |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.comboDiv-dialogue { /*202605 ergänzt*/ |
||||
margin-left: 1.6rem;} |
||||
|
||||
/* Standarddarstellung für größere Viewports */ |
||||
.comboDiv { |
||||
display: flex; |
||||
justify-content: left; } |
||||
|
||||
|
||||
.input-container.sticky-filter { /*202606 neu: äußerer Container*/ |
||||
position: sticky; /*202606 neu: bleibt beim Scrollen sichtbar*/ |
||||
top: 105px; /* Höhe der Navbar > siehe oben */ |
||||
z-index: 999; |
||||
background: $input-container-background; |
||||
padding: 0.5rem 0; |
||||
} |
||||
|
||||
.input-container { |
||||
display: flex; |
||||
flex-direction: row; /* Ordnet Felder horizontal*/ |
||||
margin-top: 0.2rem; |
||||
background: $input-container-background; |
||||
} |
||||
|
||||
.input-container > .label { |
||||
margin-bottom: 1rem; /*202604 geänd. v urprgl. 0*/ |
||||
margin-right: 0.5rem; /*202606 geänd v. 2.2rem*; 202604 geänd. v. 1.2em*/ |
||||
text-align: right; /*202606 ergänzt*/ |
||||
} |
||||
|
||||
.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; /*202604 geänd. v urprgl. 2em*/ |
||||
font-weight: bold; /*202604: ergänzt*/ |
||||
} |
||||
|
||||
.select select, .input { /*für Auswahlfeldstyle*/ |
||||
border: $select-border; |
||||
border-radius: 0.3em; |
||||
/*20260611 auskommentiert zum Test color: $input-color; */ /*202604 ergänzt*/ |
||||
font-size: 16px; /*202604 ergänzt*/ |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
/*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; /* Fügt Abstand zwischen den Feldern hinzu */ |
||||
} |
||||
|
||||
.input-container > .label { /*202605 ergänzt*/ |
||||
margin-bottom: 0rem; |
||||
text-align: right; /*202606 ergänzt*/ |
||||
} |
||||
|
||||
.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; /*202604 geändert v ursprgl. 1rem*/ |
||||
padding-bottom: 0.2rem; /*202604 eingefügt*/ |
||||
} |
||||
|
||||
.input-container > .label { /*202605 ergänzt*/ |
||||
margin-bottom: 0rem; |
||||
text-align: left; /*202606 ergänzt*/ |
||||
} |
||||
|
||||
.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; } |
||||
|
||||
.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: "\25B6"; |
||||
color: $sichtentreeCaret-color; |
||||
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; |
||||
} |
||||
|
||||
Loading…
Reference in new issue