// // Brandnav // ---------------------------------------- @media (max-width: #{$grid-float-breakpoint-max}px) { .brandnav { position: absolute; width: 100%; overflow: visible; top: 100%; left: 0; margin-left: 0; margin-right: 0; z-index: 1; display: none; transition: margin-left .3s ease-in-out; .brandnav { top: 0; } .active > & { display: block; left: 100%; } &.brandnav-lvl-1 { left: 0; margin-top: 1px; } &.has-active { margin-left: -100%; } @media all and (transform-3d), (-webkit-transform-3d) { transition: transform .3s ease-in-out; perspective: 1000px; &.has-active { margin-left: 0; transform: translate3d(-100%, 0, 0); } } > ul > li { padding-left: 0; padding-right: 0; width: 100%; position: static; } > ul > li > a { font-size: 21px; @include button-variant($font-color-regular, #fff, transparent); padding: capline-bu(2.25, 21px) 24px baseline-bu(2.25, 21px); &:not(:only-child):after { content: '\a7'; font-family: 'Telekom-Icon'; float: right; } } } } @media (min-width: #{$grid-float-breakpoint}px) { .brandnav-lvl-1 { float: left; > ul { padding-top: 19px; padding-bottom: 22px; > li { float: left; position: static; margin-right: 24px; > a { border-radius: 3px; font-size: 21px; @include button-variant($font-color-regular, #fff, transparent); padding-top: capline-bu(.75, 21px) + 1px; padding-bottom: baseline-bu(.75, 21px) - 1px; } } > .active > a { &, &:focus { color: $color-brand; } } } } .brandnav-lvl-2 { position: absolute; width: 100%; top: 100%; left: 0; background-color: #fff; margin-top: 1px; padding-top: 0; padding-bottom: 0; height: 0; overflow: hidden; > ul { margin-left: auto; margin-right: auto; @include container-fixed(24px); @include clearfix(); opacity: 0; transition: opacity .25s $telekom-ease-out-medium; > li > a { text-transform: uppercase; color: $font-color-regular; cursor: default; font-weight: bold; font-size: $font-size-regular; padding-top: capline-bu(1.5, $font-size-regular) - 2px; padding-bottom: baseline-bu(1.5, $font-size-regular) - 1px; } } .active > & { height: auto; padding-top: 10px; padding-bottom: 18px; z-index: 1; > ul { opacity: 1; } } @media all and (transform-3d), (-webkit-transform-3d) { transition: transform .25s $telekom-ease-in-medium; perspective: 1000px; transform: scaleY(0); transform-origin: top; height: auto; transition-delay: .25s; padding-top: 10px; padding-bottom: 18px; .cancel { opacity: 0; transition: opacity .25s $telekom-ease-out-medium; transition-delay: 0s; } > ul { transition-delay: 0s; } .active > & { transform: scaleY(1); transition-delay: 0s; > ul { transition-delay: .25s; } .cancel { opacity: 1; transition-delay: .25s; } } } } .brandnav-lvl-3 > ul > li > a { @include button-variant($font-color-regular, #fff, transparent); font-size: $font-size-regular; padding-top: capline-bu(1.5, $font-size-regular) - 2px; padding-bottom: baseline-bu(1.5, $font-size-regular) - 1px; } } .brandnav-lvl-2-head { margin-left: auto; margin-right: auto; width: 100%; min-height: building-units(2.5); @include clearfix(); @include container-fixed(); display: none; padding-left: 12px; padding-right: 12px; @media (min-width: #{$grid-float-breakpoint}px) { display: block; } } .brandnav-control-up { display: none; &.in { display: block; } } .brandnavhead { min-height: building-units(6.5) - 1px; background-color: #fff; padding-left: 12px; padding-right: 12px; display: none; .active & { display: block; } @media (min-width: #{$grid-float-breakpoint}px) { display: none !important; } }