mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Ulf Gebhardt
6fe5fd6d7e
git-subtree-dir: community_server git-subtree-mainline: ff11f6efe35bba180260fe84077bcd94298895c1 git-subtree-split: b6544b9e69fb85d4da100934675323c3e8c8ef67
452 lines
8.1 KiB
Plaintext
452 lines
8.1 KiB
Plaintext
/* ============================================================
|
|
|
|
Navigation
|
|
|
|
Datei : navi.less
|
|
Datum : 2020-04-30
|
|
Autor : einhornimmond / Christine Slotty
|
|
Copyright : Gradido
|
|
|
|
============================================================*/
|
|
@media screen {
|
|
.logo {
|
|
display: none;
|
|
vertical-align: middle;
|
|
height: 30px;
|
|
padding: .5em;
|
|
}
|
|
|
|
.logo.big.visible,
|
|
.logo.small.visible {
|
|
display: block !important;
|
|
}
|
|
|
|
.logo.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.logo.small.visible {
|
|
padding-left: 41px;
|
|
}
|
|
|
|
/*
|
|
SIDEBARS
|
|
*/
|
|
.sidebar1 {
|
|
background-color: @menu-background;
|
|
font-size: @nav-fs;
|
|
font-weight: 500;
|
|
line-height: @sidebar1-lh;
|
|
padding: 0;
|
|
border-right: 1px solid @menu-border-color;
|
|
}
|
|
|
|
.sidebar2 {
|
|
padding: 1em;
|
|
background-color: @main-background;
|
|
}
|
|
|
|
.sidebar1-header {
|
|
font-size: @sidebar1-header-fs;
|
|
font-style: italic;
|
|
color: @unobtrusive;
|
|
}
|
|
|
|
/* set general icons size here! */
|
|
.nav-icon {
|
|
font-size: @nav-icons-fs !important;
|
|
color: @menu-link-text;
|
|
vertical-align: middle;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
/* important! order matters! we need to overwrite the main button's size here */
|
|
.nav-main-button {
|
|
font-size: @nav-icon-main-fs !important;
|
|
color: @unobtrusive;
|
|
margin: .3em;
|
|
}
|
|
|
|
/* Hide mobile menu button! */
|
|
.nav-main-button.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.nav-menu.nav-menu-maximized {
|
|
width: 280px;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-menu.nav-menu-minimized {
|
|
width: 120px;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-menu-maximized {
|
|
-webkit-animation: slide-out 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
animation: slide-out 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
}
|
|
|
|
.nav-menu-minimized {
|
|
-webkit-animation: slide-in 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
animation: slide-in 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
}
|
|
|
|
.nav-menu-minimized .link-title {
|
|
display: none;
|
|
}
|
|
|
|
.nav-menu-minimized .nav-icon,
|
|
.nav-menu-minimized .nav-main-button {
|
|
padding-left: 72px;
|
|
}
|
|
|
|
/**
|
|
* ----------------------------------------
|
|
* animations slide-in / slide-out
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
/* slide-in */
|
|
@-webkit-keyframes slide-in {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-74px);
|
|
transform: translateX(-74px);
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes slide-in {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-74px);
|
|
transform: translateX(-74px);
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
/* slide-out */
|
|
@-webkit-keyframes slide-out {
|
|
0% {
|
|
-webkit-transform: translateX(-74px);
|
|
transform: translateX(-74px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes slide-out {
|
|
0% {
|
|
-webkit-transform: translateX(-74px);
|
|
transform: translateX(-74px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
NAVI MOBILE
|
|
*/
|
|
@media @tablet-down {
|
|
.logo.big,
|
|
.logo.small {
|
|
display: none;
|
|
}
|
|
|
|
.logo.visible {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.logo,
|
|
.logo.mobile,
|
|
.logo.mobile.visible {
|
|
display: block;
|
|
position: fixed;
|
|
top: 12px;
|
|
left: 12px;
|
|
}
|
|
|
|
.logo.big,
|
|
.logo.big.visible {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-main-button {
|
|
display: none;
|
|
}
|
|
|
|
.nav-main-button.mobile {
|
|
display: block;
|
|
position: fixed;
|
|
top: 2px;
|
|
right: 46px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.nav-menu.nav-menu-minimized,
|
|
.nav-menu.nav-menu-maximized {
|
|
width: 280px;
|
|
height: 300px;
|
|
}
|
|
|
|
/* .nav-menu-minimized .link-title {
|
|
display: inherit;
|
|
}
|
|
*/
|
|
.nav-menu-minimized .nav-icon,
|
|
.nav-menu-minimized .nav-main-button {
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Here we "revert' maximized / minimized and change the animation */
|
|
.nav-menu-maximized {
|
|
-webkit-animation: slide-down 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
animation: slide-down 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
}
|
|
|
|
.nav-menu-minimized {
|
|
-webkit-animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
}
|
|
|
|
/**
|
|
* ----------------------------------------
|
|
* animations slide-down / slide-up
|
|
* ----------------------------------------
|
|
*/
|
|
|
|
/* slide-down */
|
|
@-webkit-keyframes slide-down {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(300px);
|
|
transform: translateX(300px);
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(300px);
|
|
transform: translateY(300px);
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
|
|
/* slide-up */
|
|
@-webkit-keyframes slide-up {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(-300px);
|
|
transform: translateY(-300px);
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(-300px);
|
|
transform: translateY(-300px);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* END navi mobile base */
|
|
.selected {
|
|
color: @menu-link-selected;
|
|
}
|
|
|
|
.link-title {
|
|
vertical-align: middle;
|
|
line-height: @link-title-lh;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nav-horizontal {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
list-style-type: none;
|
|
gap: 5%;
|
|
padding: 1em;
|
|
}
|
|
|
|
.footer .nav-horizontal {
|
|
gap: 0;
|
|
padding: 0 1em;
|
|
padding-inline-start: 0 !important;
|
|
}
|
|
|
|
.nav-top-smaller {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-smaller {
|
|
justify-content: left;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-smaller li {
|
|
padding: 0 !important;
|
|
padding: .2em .5em !important;
|
|
border: 1px solid @action-button-border;
|
|
margin: .1em .3em;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.nav-smaller .heading {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-vertical {
|
|
margin-top: -2em;
|
|
}
|
|
|
|
.nav-horizontal li {
|
|
padding: .5em;
|
|
}
|
|
|
|
.nav-vertical > ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
list-style-type: none;
|
|
gap: 5%;
|
|
padding: 1em;
|
|
}
|
|
|
|
.nav-vertical li {
|
|
padding: .5em;
|
|
}
|
|
|
|
.nav-top > ul {
|
|
padding: 0;
|
|
padding-right: 2em;
|
|
}
|
|
|
|
@media @tablet-down {
|
|
.nav-vertical {
|
|
margin-top: 55px;
|
|
}
|
|
|
|
}
|
|
|
|
.nav-bottom {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
list-style-type: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nav-bottom p {
|
|
font-size: @nav-bottom-fs;
|
|
color: @unobtrusive;
|
|
margin: 0;
|
|
}
|
|
|
|
@media @tablet-down {
|
|
.nav-bottom p {
|
|
font-size: @nav-bottom-fs-mobile;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
}
|
|
|
|
nav {
|
|
&.grd-left-bar {
|
|
position: fixed;
|
|
top: 80.5px;
|
|
}
|
|
|
|
.grd-nav-bn {
|
|
width: 100px;
|
|
}
|
|
|
|
ul {
|
|
margin-top: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
}
|
|
|
|
/* buttons */
|
|
.grd-nav-bn:hover,
|
|
.grd-active {
|
|
background-color: @button-background-active;
|
|
border-color: @main-link-text;
|
|
}
|
|
|
|
.grd-nav-bn {
|
|
padding: 10px;
|
|
border: 1px solid @unobtrusive;
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
color: @unobtrusive;
|
|
}
|
|
|
|
.grd-nav-bn-large {
|
|
width: 40vw;
|
|
height: 18vh;
|
|
font-size: @nav-btn-large-fs;
|
|
}
|
|
|
|
a.grd-nav-bn,
|
|
a.grd-nav-bn:visited {
|
|
color: @main-link-text;
|
|
text-decoration: none;
|
|
}
|
|
|
|
}
|