tooltip and navbar cleanup

closes #86
This commit is contained in:
Felix Hamann 2018-09-30 21:55:09 +02:00
parent 4579fe56be
commit f05c6c66b2
4 changed files with 20 additions and 3 deletions

View File

@ -16,5 +16,5 @@ $# new files
<label for=#{fieldId}_zip>ZIPs automatisch entpacken <label for=#{fieldId}_zip>ZIPs automatisch entpacken
<input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}> <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
<div class="js-tooltip"> <div class="js-tooltip">
<div class="tooltip__handle">? <div class="tooltip__handle">
<div class="tooltip__content">Entpackt hochgeladene Zip-Dateien (*.zip) automatisch und fügt den Inhalt dem Stamm-Verzeichnis der Abgabe hinzu. <div class="tooltip__content">Entpackt hochgeladene Zip-Dateien (*.zip) automatisch und fügt den Inhalt dem Stamm-Verzeichnis der Abgabe hinzu.

View File

@ -19,6 +19,23 @@
text-align: center; text-align: center;
margin: 0 10px; margin: 0 10px;
cursor: default; cursor: default;
position: relative;
&::before {
content: '\f128';
position: absolute;
top: 0;
left: 0;
font-family: "Font Awesome 5 Free";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
}
&:hover {
background-color: var(--color-light);
}
} }
.tooltip__content { .tooltip__content {

View File

@ -10,5 +10,5 @@ $case formLayout
^{fvInput view} ^{fvInput view}
$maybe tooltip <- fvTooltip view $maybe tooltip <- fvTooltip view
<div .js-tooltip> <div .js-tooltip>
<div .tooltip__handle>? <div .tooltip__handle>
<div .tooltip__content>^{tooltip} <div .tooltip__content>^{tooltip}

View File

@ -41,7 +41,7 @@
background: linear-gradient(to top, var(--color-dark) 0%,var(--color-darker) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to top, var(--color-dark) 0%,var(--color-darker) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: white; color: white;
margin-right: 40px; margin-right: 40px;
z-index: 10; z-index: 20;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
overflow: auto; overflow: auto;
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1); transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);