Commit 9516e54a authored by Aria Givi's avatar Aria Givi
Browse files

IcoNavigationselemente besser positioniert, Icons hinzugefuegt

parent 02f1b467
@metager-dropdown-toggle-hover-or-focus-color: fade(@static-pages-color-black, 15%);
@metager-dropdown-menu-background-color: @static-pages-color-white;
@metager-dropdown-menu-box-shadow-color: fade(@static-pages-color-black, 17.5%);
@metager-dropdown-menu-li-a-color: @static-pages-color-almost-black;
@metager-dropdown-menu-li-a-hover-color: @static-pages-color-strong-grey;
@metager-dropdown-menu-li-a-hover-background-color: @static-pages-color-almost-white;
#closeSidebar {
z-index: 998;
font-size: 36px;
......@@ -43,7 +50,8 @@
}
&>ul {
padding-top: 20%;
padding-left: 0%;
padding-left: 3%;
padding-right: 1%;
}
& a {
font-size: 12px;
......@@ -56,6 +64,102 @@
}
}
}
/*
ul.metager-dropdown-menu {
list-style-type: none;
padding-left: 0;
top: 100%;
left: auto;
z-index: 1000;
float: left;
min-width: 160px;
margin: 2px 0 0;
margin-top: 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: @metager-dropdown-menu-background-color;
border-radius: 4px;
box-shadow: 0 6px 12px @metager-dropdown-menu-box-shadow-color;
background-clip: padding-box;
max-height: 0px;
overflow: hidden;
&>li>a {
display: block;
padding: 3px 20px;
width: 100%;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: @metager-dropdown-menu-li-a-color;
white-space: nowrap;
&:hover {
text-decoration: none;
color: @metager-dropdown-menu-li-a-hover-color;
background-color: @metager-dropdown-menu-li-a-hover-background-color;
}
}
}*/
#navbar-static-pages {
z-index: 4;
width: 100%;
}
@keyframes dropdown-animation {
0% {
max-height: 0px;
padding: 0px 0;
border: none
}
1% {
padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
}
100% {
max-height: 1000px;
padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
}
}
#metager-static-nav-list > li:hover {
background-color: @metager-navbar-toggle-hover-background-color;
&>.metager-dropdown-menu {
animation-name: dropdown-animation;
animation-duration: 0.7s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
}
#metager-static-nav-list>li {
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 10px;
margin-bottom: 1%;
&>a:hover {
color: red;
}
}
@media (max-width: 979px) {
#metager-static-nav-list {
width: 100%;
overflow: hidden;
}
#metager-static-nav-list:target {
max-height: 1000px;
}
ul.metager-dropdown-menu {
position: inherit;
width: 100%;
border-radius: 0;
box-shadow: initial;
}
}
input#nav0:checked {
& ~.sideBar {
......
@quicktip-background-color: @static-pages-color-white;
@metager-dropdown-menu-background-color: @static-pages-color-white;
@metager-dropdown-menu-box-shadow-color: fade(@static-pages-color-black, 17.5%);
@metager-dropdown-menu-li-a-color: @static-pages-color-almost-black;
@metager-dropdown-menu-li-a-hover-color: @static-pages-color-strong-grey;
@metager-dropdown-menu-li-a-hover-background-color: @static-pages-color-almost-white;
@spruch-color: @static-pages-spruch-color;
@spruch-border-left-color: @spruch-color;
@spruch-author-color: @static-pages-color-grey;
@metager-dropdown-toggle-hover-or-focus-color: fade(@static-pages-color-black, 15%);
@metager-navbar-toggle-color: @static-pages-color-grey;
@metager-navbar-toggle-background-color: @static-pages-color-white;
@metager-navbar-toggle-border-color: @static-pages-color-almost-white;
@metager-navbar-toggle-visited-color: @static-pages-color-grey;
@metager-navbar-toggle-hover-background-color: @static-pages-color-almost-white;
@toggle-nav-hide-or-metager-navbar-toggle-background-color: @static-pages-color-almost-white;
@toggle-nav-hide-or-metager-navbar-toggle-background-color: rgb(255,128,0);
@more-information-ul-li-color: @static-pages-color-grey;
@more-information-h2-color: @static-pages-color-grey;
@div-right-background-color: @static-pages-color-almost-white;
......@@ -86,41 +80,6 @@ nav {
}
}
ul.metager-dropdown-menu {
list-style-type: none;
padding-left: 0;
top: 100%;
left: auto;
z-index: 1000;
float: left;
min-width: 160px;
margin: 2px 0 0;
margin-top: 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: @metager-dropdown-menu-background-color;
border-radius: 4px;
box-shadow: 0 6px 12px @metager-dropdown-menu-box-shadow-color;
background-clip: padding-box;
max-height: 0px;
overflow: hidden;
&>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: @metager-dropdown-menu-li-a-color;
white-space: nowrap;
&:hover {
text-decoration: none;
color: @metager-dropdown-menu-li-a-hover-color;
background-color: @metager-dropdown-menu-li-a-hover-background-color;
}
}
}
#mglogo {
color: rgb(255,128,0);
text-shadow: 2px 2px 10px rgba(150, 150, 150, 1);
......@@ -141,39 +100,6 @@ ul.metager-dropdown-menu {
}
}
#navbar-static-pages {
z-index: 4;
width: 100%;
}
@keyframes dropdown-animation {
0% {
max-height: 0px;
padding: 0px 0;
border: none
}
1% {
padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
}
100% {
max-height: 1000px;
padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
}
}
#metager-static-nav-list > li:hover {
background-color: @metager-navbar-toggle-hover-background-color;
&>.metager-dropdown-menu {
animation-name: dropdown-animation;
animation-duration: 0.7s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
}
.metager-navbar-toggle {
color: @metager-navbar-toggle-color;
background-color: @metager-navbar-toggle-background-color;
......@@ -193,42 +119,6 @@ ul.metager-dropdown-menu {
background-color: @toggle-nav-hide-or-metager-navbar-toggle-background-color;
}
#metager-static-nav-list>li {
width: 100%;
padding-top: 10%;
&>a:hover {
color: red;
}
}
@media (max-width: 979px) {
#metager-static-nav-list {
width: 100%;
max-height: 40px;
overflow: hidden;
}
#metager-static-nav-list:target {
max-height: 1000px;
}
#metager-static-nav-list>li {
padding-top: 5px;
display: initial;
}
ul.metager-dropdown-menu {
position: inherit;
width: 100%;
border-radius: 0;
box-shadow: initial;
}
ul#metager-static-nav-list:target #toggle-nav-show {
display: none;
}
ul#metager-static-nav-list:target #toggle-nav-hide {
display: initial!important;
}
}
#color-chooser {
padding: 0;
a {
......
......@@ -4,12 +4,14 @@
<label role="button" for="nav0"></label>
<ul id="metager-static-nav-list" class="list-inline pull-right">
<li @if ( !isset($navbarFocus) || $navbarFocus === 'suche') class="active" @endif >
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="200" id="navigationSuche">{{ trans('staticPages.nav1') }}</a>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="200" id="navigationSuche"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav1') }}</a>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'foerdern') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" role="button" aria-expanded="false" tabindex="201">{{ trans('staticPages.nav16') }}
<a class="metager-dropdown-toggle" role="button" aria-expanded="false" tabindex="201"><i class="fa fa-money" aria-hidden="true"></i>
&nbsp;{{ trans('staticPages.nav16') }}
<span class="caret"></span></a>
<ul class="metager-dropdown-menu">
<!--<ul class="metager-dropdown-menu">
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/spende/") }}" tabindex="202">{{ trans('staticPages.nav2') }}</a>
</li>
......@@ -20,14 +22,17 @@
<a href="https://www.boost-project.com/de/shops?charity_id=1129&amp;tag=bl" tabindex="204">{{ trans('staticPages.nav17') }}</a>
</li>
</ul>
-->
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'datenschutz') class="active" @endif >
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/datenschutz/") }}" id="navigationPrivacy" tabindex="215">{{ trans('staticPages.nav3') }}</a>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/datenschutz/") }}" id="navigationPrivacy" tabindex="215"><i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav3') }}</a>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'hilfe') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationHilfe" tabindex="216">{{ trans('staticPages.nav20') }}
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationHilfe" tabindex="216"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav20') }}
<span class="caret"></span></a>
<ul class="metager-dropdown-menu">
<!-- <ul class="metager-dropdown-menu">
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/hilfe/") }}" tabindex="217">{{ trans('staticPages.nav20') }}</a>
</li>
......@@ -35,11 +40,13 @@
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/faq/") }}" tabindex="218">{{ trans('staticPages.nav21') }}</a>
</li>
</ul>
-->
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'kontakt') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationKontakt" tabindex="219">{{ trans('staticPages.nav18') }}
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationKontakt" tabindex="219"><i class="fa fa-comments-o" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav18') }}
<span class="caret"></span></a>
<ul class="metager-dropdown-menu">
<!-- <ul class="metager-dropdown-menu">
<li>
<a href="http://forum.suma-ev.de/" tabindex="220">{{ trans('staticPages.nav4') }}</a>
</li>
......@@ -55,12 +62,13 @@
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/impressum/") }}" tabindex="224">{{ trans('staticPages.nav8') }}</a>
</li>
</ul>
</ul> -->
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'dienste') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" tabindex="225">{{ trans('staticPages.nav15') }}
<a class="metager-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" tabindex="225"><i class="fa fa-wrench" aria-hidden="true"></i>
&nbsp;{{ trans('staticPages.nav15') }}
<span class="caret"></span></a>
<ul class="metager-dropdown-menu">
<!-- <ul class="metager-dropdown-menu">
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/widget/") }}" tabindex="226">{{ trans('staticPages.nav10') }}</a>
</li>
......@@ -85,18 +93,20 @@
<li>
<a href="http://forum.suma-ev.de/viewtopic.php?f=3&amp;t=43" tabindex="234">{{ trans('staticPages.nav14') }}</a>
</li>
</ul>
</ul> -->
</li>
<li class="metager-dropdown">
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationSprache" tabindex="235">{{ trans('staticPages.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationSprache" tabindex="235"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})
<span class="caret"></span></a>
<ul class="metager-dropdown-menu">
<!-- <ul class="metager-dropdown-menu">
@foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
<li>
<a rel="alternate" hreflang="{{$localeCode}}" href="{{LaravelLocalization::getLocalizedURL($localeCode) }}" tabindex="{{235 + $loop->index}}">{{{ $properties['native'] }}}</a>
</li>
@endforeach
</ul>
-->
</li>
</ul>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment