Commit f7a22400 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Die Sidebar hat ein neues einfacheres Design. Die less-Dateien sind teilweise vereinfacht

parent 8a598960
/* Navigations-Seitenleiste */
.sideBar {
.sidebar {
border-left: 1px solid #ccc;
box-shadow: 0px 1px 1.5px 1px #c0c0c0;
/**/
position: fixed;
display: block;
top: 0px;
right: -270px;
width: 270px;
height: 100%;
padding-top: 70px;
padding-top: 55px;
overflow: hidden;
overflow-y: auto;
z-index: 999;
z-index: 1;
background-color: white;
transition: 0.5s;
border-left: none;
&>label#closeSidebar {
position: absolute;
font-size: 36px;
top: 0px;
right: 20px;
color: grey;
&:after {
content: "×";
}
&:hover {
color: @metager-orange;
}
}
&>ul {
padding-top: 20%;
padding-top: 20px;
padding-left: 0;
list-style: none;
margin-left: -5px;
}
#metager-static-nav-list>li {
.sidebar-list>li {
width: 100%;
padding-top: 3%;
padding-bottom: 3%;
border-bottom: 1px solid LightGray;
padding: 10px 0px;
&:hover {
background-color: @color-almost-white;
}
&>label,
&>a {
&:focus {
outline: none;
}
&>i.fa {
width: 30px;
}
}
&>label {
font-size: 16px;
font-weight: normal;
......@@ -57,19 +57,17 @@
max-height: 0px;
text-align: left;
list-style-type: none;
z-index: 1000;
float: left;
z-index: 3;
overflow: hidden;
transition: 0.5s ease;
&>li>a {
display: block;
font-size: 12px;
padding: 3px 20px;
font-size: 13px;
padding: 6px 20px;
width: 100%;
clear: both;
font-weight: normal;
line-height: 1.42857143;
border-top: 1px solid LightGray;
margin-left: 2px;
&:hover {
text-decoration: none;
......@@ -112,12 +110,12 @@
left: 90%;
margin-top: 8px;
}
input.sideBarCheckbox {
input.sidebarCheckbox {
display: none;
&:checked {
&~.metager-dropdown-menu {
max-height: 1000px;
padding: 5px 0;
padding: 5px 0px 0px 0px;
}
&~label>.caret {
border-top: 0 solid;
......@@ -136,10 +134,15 @@
}
}
input#sideBarToggle:checked {
&~.sideBar {
input#sidebarToggle:checked {
&~.sidebar {
right: 0px;
}
&~.openSidebar {
&:after {
content: "×";
}
}
}
.openSidebar {
......@@ -147,7 +150,7 @@ input#sideBarToggle:checked {
position: fixed;
top: 23px;
right: 25px;
z-index: 998;
z-index: 2;
}
font-size: 36px;
line-height: 23px;
......@@ -163,13 +166,13 @@ input#sideBarToggle:checked {
}
@media (max-width: @screen-xs-max) {
.sideBar {
.sidebar {
right: -90%;
width: 90%;
overflow: auto;
}
#metager-static-nav-list:target {
max-height: 1000px;
.sidebar-list {
max-height: 1000px;
}
}
ul.metager-dropdown-menu {
position: inherit;
......
......@@ -9,7 +9,7 @@
@color-almost-black: mix(@color-white, @color-black, 10%);
@color-black: black;
// General Background Color
@background-color: white;
@background-color: #FAFAFA;
// Signal Colors
@brand-success: #5cb85c;
@brand-info: #FB0;
......
<label class="openSidebar navigation-element {{$class or ''}}" for="sideBarToggle"></label>
\ No newline at end of file
<label class="openSidebar navigation-element {{$class or ''}}" for="sidebarToggle"></label>
<input id="sideBarToggle" style="display: none;" type="checkbox">
<div class="sideBar">
<label class="navigation-element" id="closeSidebar" for="sideBarToggle"></label>
<input id="sidebarToggle" class="hidden" type="checkbox">
<div class="sidebar">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
<p>MetaGer</p>
</a>
<ul id="metager-static-nav-list" class="list-inline pull-right">
<ul class="sidebar-list">
<li @if ( !isset($navbarFocus) || $navbarFocus === 'suche') class="active" @endif >
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="200" id="navigationSuche">
<i class="fa fa-search" aria-hidden="true"></i>
......@@ -12,7 +11,7 @@
</a>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'dienste') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<input id="servicesToggle" class="sideBarCheckbox" type="checkbox">
<input id="servicesToggle" class="sidebarCheckbox" type="checkbox">
<label for="servicesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" tabindex="225">
<i class="fa fa-wrench" aria-hidden="true"></i>
<span>&nbsp;{{ trans('sidebar.nav15') }}</span>
......@@ -52,7 +51,7 @@
</a>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'hilfe') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<input id="helpToggle" class="sideBarCheckbox" type="checkbox">
<input id="helpToggle" class="sidebarCheckbox" type="checkbox">
<label for="helpToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationHilfe" tabindex="216">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span>&nbsp;{{ trans('sidebar.nav20') }}</span>
......@@ -68,7 +67,7 @@
</ul>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'foerdern') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<input id="donationToggle" class="sideBarCheckbox" type="checkbox">
<input id="donationToggle" class="sidebarCheckbox" type="checkbox">
<label for="donationToggle" class="metager-dropdown-toggle navigation-element" tabindex="201">
<i class="fa fa-money" aria-hidden="true"></i>
<span>&nbsp;{{ trans('sidebar.nav16') }}</span>
......@@ -92,7 +91,7 @@
</ul>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'kontakt') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<input id="contactToggle" class="sideBarCheckbox" type="checkbox">
<input id="contactToggle" class="sidebarCheckbox" type="checkbox">
<label for="contactToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationKontakt" tabindex="219">
<i class="fa fa-comments-o" aria-hidden="true"></i>
<span>&nbsp;{{ trans('sidebar.nav18') }}</span>
......@@ -117,7 +116,7 @@
</ul>
</li>
<li class="metager-dropdown">
<input id="languagesToggle" class="sideBarCheckbox" type="checkbox">
<input id="languagesToggle" class="sidebarCheckbox" type="checkbox">
<label for="languagesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationSprache" tabindex="235">
<i class="fa fa-globe" aria-hidden="true"></i>
<span>&nbsp;{{ trans('sidebar.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})</span>
......
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