Commit d1d36894 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

Navigationsleiste ausgetauscht

Gegen eine, die mit CSS3 Transitions arbeitet. Dadurch funktioniert die Navigationsleiste nun auch ohne JavaScript, erfordert aber einen Browser mit CSS3 Unterstützung (alle moderneren). Irgendwo  muss man halt leider bei der Unterstützung abstriche machen.
parent 1d3e40ea
......@@ -4124,7 +4124,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar {
position: relative;
min-height: 50px;
min-height: 40px;
margin-bottom: 20px;
border: 1px solid transparent;
}
......@@ -4230,10 +4230,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-brand {
float: left;
padding: 15px 15px;
padding: 10px 15px;
font-size: 18px;
line-height: 20px;
height: 50px;
height: 40px;
}
.navbar-brand:hover,
.navbar-brand:focus {
......@@ -4253,8 +4253,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
margin-top: 3px;
margin-bottom: 3px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
......@@ -4278,7 +4278,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-nav {
margin: 7.5px -15px;
margin: 5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
......@@ -4316,8 +4316,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
}
.navbar-form {
......@@ -4327,8 +4327,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
margin-top: 8px;
margin-bottom: 8px;
margin-top: 3px;
margin-bottom: 3px;
}
@media (min-width: 768px) {
.navbar-form .form-group {
......@@ -4412,20 +4412,20 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-bottom-left-radius: 0;
}
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
margin-top: 3px;
margin-bottom: 3px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
margin-top: 9px;
margin-bottom: 9px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
margin-top: 10px;
margin-bottom: 10px;
}
@media (min-width: 865px) {
.navbar-text {
......@@ -6760,6 +6760,15 @@ By ID
*/
#gutscheine > a {
display: inline-block;
}
#gutscheine > a:first-child {
padding-right: 0;
}
#gutscheine > a:first-child + a {
padding-left: 0;
}
#color-chooser {
padding: 0;
}
......@@ -6782,23 +6791,127 @@ By ID
font-size: 16px;
font-family: Georgia, "Times New Roman", Palatino, Times, serif;
}
li#gutscheine.dropdown:hover ul.dropdown-menu {
display: block;
margin-top: 0px;
nav.navbar-resultpage {
position: absolute;
width: 100%;
}
li#gutscheine > span {
padding-top: 15px!important;
padding-bottom: 15px!important;
position: relative;
nav.navbar-resultpage > ul > li {
padding-left: 0;
padding-right: 0;
}
#navbar-static-pages {
z-index: 4;
}
nav.navbar-resultpage > ul > li > a:not(.metager-navbar-toggle) {
display: block;
padding: 10px 15px;
padding: 10px;
color: #777;
line-height: 20px;
}
li#gutscheine > span a {
nav.navbar-resultpage > ul > li.active > a,
a.metager-dropdown-toggle:hover,
a.metager-dropdown-toggle:focus {
background-color: #e7e7e7;
}
nav.navbar-resultpage > ul.list-inline {
margin-bottom: 0;
}
ul.metager-dropdown-menu {
list-style-type: none;
padding-left: 0;
position: absolute;
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: #fff;
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 1s ease;
transition: max-height 1s ease;
}
.metager-dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.metager-dropdown-menu > li > a:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
a.metager-dropdown-toggle:hover + ul.metager-dropdown-menu,
a.metager-dropdown-toggle:focus + ul.metager-dropdown-menu,
ul.metager-dropdown-menu:hover,
#gutscheine > a:first-child:hover + a + ul.metager-dropdown-menu {
max-height: 1000px;
padding: 5px 0;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.metager-navbar-toggle {
color: #777;
background-color: white;
padding: 5px 10px;
margin: 5px 8px 5px 0;
border-radius: 7px;
border: 1px solid #ddd;
display: block;
width: 36px;
height: 30px;
}
.metager-navbar-toggle:visited {
color: #777;
}
.metager-navbar-toggle:hover {
background-color: #ddd;
}
#toggle-nav-hide .metager-navbar-toggle {
background-color: #ddd;
}
@media (max-width: 979px) {
#metager-static-nav-list {
width: 100%;
max-height: 40px;
overflow: hidden;
-webkit-transition: max-height 1s ease;
transition: max-height 1s ease;
}
#metager-static-nav-list:target {
max-height: 1000px;
}
#metager-static-nav-list > li {
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;
}
}
@media (min-width: 980px) {
.metager-navbar-toggle {
display: none;
}
}
/*
......@@ -7157,10 +7270,19 @@ a.content.hidden-xs {
a.navbar-brand {
line-height: 100%!important;
padding: 0;
position: absolute;
z-index: 5;
left: 10px;
}
nav .navbar-brand > div.logo {
height: 100%;
}
.logo {
height: 30px!important;
}
.logo > h1 {
font-size: 30px;
}
.dotlist li {
margin-bottom: 5px;
}
......
This diff is collapsed.
{
"css/themes/default.css": "css/themes/default-932aa22ca4.css",
"css/themes/default.css": "css/themes/default-0ec60d81ba.css",
"js/all.js": "js/all-70e38f5f5e.js",
"js/quicktips.js": "js/quicktips-34d41bc58a.js"
}
\ No newline at end of file
......@@ -50,7 +50,7 @@ input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=tel]
color: <?=$color?>;
}
.navbar {
.navbar, #navbar-static-pages {
border-bottom: 3px solid <?=$color?>;
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
}
......
......@@ -4124,7 +4124,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar {
position: relative;
min-height: 50px;
min-height: 40px;
margin-bottom: 20px;
border: 1px solid transparent;
}
......@@ -4230,10 +4230,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-brand {
float: left;
padding: 15px 15px;
padding: 10px 15px;
font-size: 18px;
line-height: 20px;
height: 50px;
height: 40px;
}
.navbar-brand:hover,
.navbar-brand:focus {
......@@ -4253,8 +4253,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
margin-top: 3px;
margin-bottom: 3px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
......@@ -4278,7 +4278,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-nav {
margin: 7.5px -15px;
margin: 5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
......@@ -4316,8 +4316,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
}
.navbar-form {
......@@ -4327,8 +4327,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
margin-top: 8px;
margin-bottom: 8px;
margin-top: 3px;
margin-bottom: 3px;
}
@media (min-width: 768px) {
.navbar-form .form-group {
......@@ -4412,20 +4412,20 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-bottom-left-radius: 0;
}
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
margin-top: 3px;
margin-bottom: 3px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
margin-top: 9px;
margin-bottom: 9px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
margin-top: 10px;
margin-bottom: 10px;
}
@media (min-width: 865px) {
.navbar-text {
......@@ -6760,6 +6760,15 @@ By ID
*/
#gutscheine > a {
display: inline-block;
}
#gutscheine > a:first-child {
padding-right: 0;
}
#gutscheine > a:first-child + a {
padding-left: 0;
}
#color-chooser {
padding: 0;
}
......@@ -6782,23 +6791,127 @@ By ID
font-size: 16px;
font-family: Georgia, "Times New Roman", Palatino, Times, serif;
}
li#gutscheine.dropdown:hover ul.dropdown-menu {
display: block;
margin-top: 0px;
nav.navbar-resultpage {
position: absolute;
width: 100%;
}
li#gutscheine > span {
padding-top: 15px!important;
padding-bottom: 15px!important;
position: relative;
nav.navbar-resultpage > ul > li {
padding-left: 0;
padding-right: 0;
}
#navbar-static-pages {
z-index: 4;
}
nav.navbar-resultpage > ul > li > a:not(.metager-navbar-toggle) {
display: block;
padding: 10px 15px;
padding: 10px;
color: #777;
line-height: 20px;
}
li#gutscheine > span a {
nav.navbar-resultpage > ul > li.active > a,
a.metager-dropdown-toggle:hover,
a.metager-dropdown-toggle:focus {
background-color: #e7e7e7;
}
nav.navbar-resultpage > ul.list-inline {
margin-bottom: 0;
}
ul.metager-dropdown-menu {
list-style-type: none;
padding-left: 0;
position: absolute;
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: #fff;
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 1s ease;
transition: max-height 1s ease;
}
.metager-dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.metager-dropdown-menu > li > a:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
a.metager-dropdown-toggle:hover + ul.metager-dropdown-menu,
a.metager-dropdown-toggle:focus + ul.metager-dropdown-menu,
ul.metager-dropdown-menu:hover,
#gutscheine > a:first-child:hover + a + ul.metager-dropdown-menu {
max-height: 1000px;
padding: 5px 0;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.metager-navbar-toggle {
color: #777;
background-color: white;
padding: 5px 10px;
margin: 5px 8px 5px 0;
border-radius: 7px;
border: 1px solid #ddd;
display: block;
width: 36px;
height: 30px;
}
.metager-navbar-toggle:visited {
color: #777;
}
.metager-navbar-toggle:hover {
background-color: #ddd;
}
#toggle-nav-hide .metager-navbar-toggle {
background-color: #ddd;
}
@media (max-width: 979px) {
#metager-static-nav-list {
width: 100%;
max-height: 40px;
overflow: hidden;
-webkit-transition: max-height 1s ease;
transition: max-height 1s ease;
}
#metager-static-nav-list:target {
max-height: 1000px;
}
#metager-static-nav-list > li {
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;
}
}
@media (min-width: 980px) {
.metager-navbar-toggle {
display: none;
}
}
/*
......@@ -7157,10 +7270,19 @@ a.content.hidden-xs {
a.navbar-brand {
line-height: 100%!important;
padding: 0;
position: absolute;
z-index: 5;
left: 10px;
}
nav .navbar-brand > div.logo {
height: 100%;
}
.logo {
height: 30px!important;
}
.logo > h1 {
font-size: 30px;
}
.dotlist li {
margin-bottom: 5px;
}
......
This diff is collapsed.
......@@ -357,7 +357,7 @@
//##
// Basics of a navbar
@navbar-height: 50px;
@navbar-height: 40px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
......
......@@ -71,6 +71,8 @@ border-radius: 0;
margin: 0px 5px;
}
.dense-col {
padding: 0px
}
......
......@@ -28,6 +28,17 @@ By ID
*/
#gutscheine > a {
display: inline-block;
}
#gutscheine > a:first-child{
padding-right: 0;
}
#gutscheine > a:first-child + a{
padding-left: 0;
}
#color-chooser {
padding: 0;
}
......@@ -54,24 +65,135 @@ By ID
font-family: Georgia, "Times New Roman", Palatino, Times, serif;
}
li#gutscheine.dropdown:hover ul.dropdown-menu{
display: block;
margin-top:0px
nav.navbar-resultpage {
position: absolute;
width: 100%;
}
li#gutscheine > span {
padding-top: 15px!important;
padding-bottom: 15px!important;
position: relative;
display: block;
padding: 10px 15px;
color: #777;
line-height: 20px;
nav.navbar-resultpage > ul > li {
padding-left: 0;
padding-right: 0;
}
li#gutscheine > span a {
text-decoration: none;
color: #777;
#navbar-static-pages{
z-index: 4;
}