4 changed files with 496 additions and 142 deletions
@ -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 @@ |
|||||||
|
@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