Commit 9fe79e0c authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

set breakpoint for hiding logo in sidebar to min-height

parent df929fbd
...@@ -15,42 +15,52 @@ ...@@ -15,42 +15,52 @@
color: @text-color; color: @text-color;
transition: 0.5s; transition: 0.5s;
border-left: none; border-left: none;
.sidebar-logo { .sidebar-logo {
> span { >span {
display: block; display: block;
margin: 20px; margin: 20px;
padding: 10px 0; padding: 10px 0;
text-align: center; text-align: center;
border-radius: 10px; border-radius: 10px;
>img { >img {
width: 10em; width: 10em;
} }
} }
} }
.sidebar-list { .sidebar-list {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
margin-left: -5px; margin-left: -5px;
&>li { &>li {
width: 100%; width: 100%;
&:hover { &:hover {
background-color: @sidebar-list-hover-color; background-color: @sidebar-list-hover-color;
} }
&>label, &>label,
&>a { &>a {
padding: 10px 0px; padding: 10px 0px;
&:focus { &:focus {
outline: none; outline: none;
} }
&>i.fa { &>i.fa {
width: 30px; width: 30px;
text-align: center; text-align: center;
margin-right: 7px; margin-right: 7px;
} }
&>img { &>img {
filter: invert(@icon-color); filter: invert(@icon-color);
} }
} }
&>label { &>label {
font-size: 1.1em; font-size: 1.1em;
font-weight: normal; font-weight: normal;
...@@ -60,12 +70,15 @@ ...@@ -60,12 +70,15 @@
line-height: 20px; line-height: 20px;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
&:hover, &:focus {
&:hover,
&:focus {
color: red; color: red;
} }
} }
} }
} }
.metager-dropdown-content { .metager-dropdown-content {
display: none; display: none;
min-width: 160px; min-width: 160px;
...@@ -75,6 +88,7 @@ ...@@ -75,6 +88,7 @@
z-index: 30; z-index: 30;
overflow: hidden; overflow: hidden;
transition: 0.5s ease; transition: 0.5s ease;
&>li>a { &>li>a {
display: block; display: block;
font-size: .9em; font-size: .9em;
...@@ -84,10 +98,12 @@ ...@@ -84,10 +98,12 @@
font-weight: normal; font-weight: normal;
line-height: 1.42857143; line-height: 1.42857143;
margin-left: 2px; margin-left: 2px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
label:after { label:after {
#navbar-static-pages { #navbar-static-pages {
z-index: 40; z-index: 40;
...@@ -95,6 +111,7 @@ ...@@ -95,6 +111,7 @@
} }
} }
} }
a { a {
font-size: 1.1em; font-size: 1.1em;
line-height: 20px; line-height: 20px;
...@@ -103,10 +120,13 @@ ...@@ -103,10 +120,13 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
color: @text-color; color: @text-color;
&:hover, &:focus {
&:hover,
&:focus {
color: red; color: red;
} }
} }
p { p {
width: 90%; width: 90%;
text-align: center; text-align: center;
...@@ -120,57 +140,70 @@ ...@@ -120,57 +140,70 @@
font-size: 30px; font-size: 30px;
line-height: 35px; line-height: 35px;
} }
.caret { .caret {
position: absolute; position: absolute;
left: 90%; left: 90%;
margin-top: 8px; margin-top: 8px;
} }
input.sidebarCheckbox { input.sidebarCheckbox {
display: none; display: none;
&:checked { &:checked {
&~.metager-dropdown-content { &~.metager-dropdown-content {
display: initial; display: initial;
max-height: 1000px; max-height: 1000px;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
} }
&~label>.caret { &~label>.caret {
border-top: 0 solid; border-top: 0 solid;
border-bottom: 4px solid; border-bottom: 4px solid;
transition: border-top .1s, border-bottom .1s .1s; transition: border-top .1s, border-bottom .1s .1s;
} }
} }
&:not(:checked) { &:not(:checked) {
&~.metager-dropdown-content { &~.metager-dropdown-content {
padding: 0px 0; padding: 0px 0;
} }
} }
} }
input#nav0:checked~& { input#nav0:checked~& {
border-left: 1px solid LightGray; border-left: 1px solid LightGray;
} }
hr { hr {
margin: 0px; margin: 0px;
border-color: #e0e0e0; border-color: #e0e0e0;
} }
} }
@media(max-height: 635px) {
.sidebar .sidebar-logo {
display: none;
}
}
@media (max-width: @screen-mobile) { @media (max-width: @screen-mobile) {
.sidebar { .sidebar {
padding-top: 15px; padding-top: 15px;
right: -90%; right: -90%;
width: 90%; width: 90%;
overflow: auto; overflow: auto;
.sidebar-list { .sidebar-list {
max-height: 1000px; max-height: 1000px;
} }
.sidebar-logo {
display: none;
}
ul.metager-dropdown-content { ul.metager-dropdown-content {
position: inherit; position: inherit;
width: 100%; width: 100%;
} }
} }
.sidebar-opener { .sidebar-opener {
// Make the open and close button bigger, so it is easier to hit // Make the open and close button bigger, so it is easier to hit
@sidebar-opener-mobile-magnification: 10px; @sidebar-opener-mobile-magnification: 10px;
...@@ -178,6 +211,7 @@ ...@@ -178,6 +211,7 @@
top: (@sidebar-opener-position-top - @sidebar-opener-mobile-magnification); top: (@sidebar-opener-position-top - @sidebar-opener-mobile-magnification);
right: (@sidebar-opener-position-right - @sidebar-opener-mobile-magnification); right: (@sidebar-opener-position-right - @sidebar-opener-mobile-magnification);
} }
.sidebar-opener-placeholder { .sidebar-opener-placeholder {
display: initial; display: initial;
} }
...@@ -188,6 +222,7 @@ ...@@ -188,6 +222,7 @@
// Top right starting position of the sidebar icon // Top right starting position of the sidebar icon
@sidebar-opener-position-top: 22px; @sidebar-opener-position-top: 22px;
@sidebar-opener-position-right: 25px; @sidebar-opener-position-right: 25px;
.sidebar-opener { .sidebar-opener {
position: fixed; position: fixed;
top: @sidebar-opener-position-top; top: @sidebar-opener-position-top;
...@@ -199,9 +234,11 @@ ...@@ -199,9 +234,11 @@
border-radius: 5px; border-radius: 5px;
color: grey; color: grey;
background-color: transparent; background-color: transparent;
&:after { &:after {
content: "≡"; content: "≡";
} }
&:hover { &:hover {
color: @metager-orange; color: @metager-orange;
} }
...@@ -213,7 +250,7 @@ ...@@ -213,7 +250,7 @@
} }
/* Sidebar toggle checkbox */ /* Sidebar toggle checkbox */
#sidebarToggle { #sidebarToggle {
display: none; display: none;
} }
...@@ -221,72 +258,86 @@ ...@@ -221,72 +258,86 @@
&~.sidebar { &~.sidebar {
right: 0px; right: 0px;
} }
&~.sidebar-opener { &~.sidebar-opener {
&:after { &:after {
content: "×"; content: "×";
} }
} }
} }
#sidebar-img-app { #sidebar-img-app {
height:20px; height: 20px;
margin-right:13px; margin-right: 13px;
margin-left:13px; margin-left: 13px;
} }
#sidebar-img-lock { #sidebar-img-lock {
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
#sidebar-img-help{
height:20px; #sidebar-img-help {
height: 20px;
margin-right: 15px; margin-right: 15px;
margin-left: 15px; margin-left: 15px;
} }
#sidebar-img-donate{
height:20px; #sidebar-img-donate {
height: 20px;
margin-right: 7px; margin-right: 7px;
margin-left: 9px; margin-left: 9px;
} }
#sidebar-img-member{
height:20px; #sidebar-img-member {
margin-right:8px; height: 20px;
margin-left:12px; margin-right: 8px;
margin-left: 12px;
} }
#sidebar-img-contact { #sidebar-img-contact {
height: 13px; height: 13px;
margin-left: 10px; margin-left: 10px;
margin-right: 8px; margin-right: 8px;
} }
#sidebar-img-language { #sidebar-img-language {
height: 20px; height: 20px;
margin-right: 9px; margin-right: 9px;
margin-left: 12px; margin-left: 12px;
} }
#sidebar-img-services { #sidebar-img-services {
height:20px; height: 20px;
margin-right: 9px; margin-right: 9px;
margin-left: 10px; margin-left: 10px;
} }
#sidebar-img-map{
#sidebar-img-map {
height: 15px; height: 15px;
margin-left: 10px;; margin-left: 10px;
;
margin-right: 9px; margin-right: 9px;
} }
#sidebar-img-lupe { #sidebar-img-lupe {
height: 20px; height: 20px;
margin-left: 10px; margin-left: 10px;
margin-right: 8px; margin-right: 8px;
} }
#sidebar-img-outlink { #sidebar-img-outlink {
height: 20px; height: 20px;
margin-left: 10px; margin-left: 10px;
} }
#sidebar-img-info { #sidebar-img-info {
height: 18px; height: 18px;
margin-top: -4px; margin-top: -4px;
margin-left: 7px; margin-left: 7px;
margin-right: 8px; margin-right: 8px;
} }
\ No newline at end of file
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