forked from TagesschuleElementa/www.tagesschule-elementa.ch
navigation frame
This commit is contained in:
61
private/scss/modules/_footer.scss
Normal file
61
private/scss/modules/_footer.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: em(51px);
|
||||
border-top: em(1px) solid $light_gray;
|
||||
background: $white;
|
||||
text-align: right;
|
||||
font-size: 0;
|
||||
z-index: 912;
|
||||
transform: translateY(em(60px));
|
||||
transition: transform 0.5s $easeOutQuad, opacity 0s 0.5s;
|
||||
opacity: 0;
|
||||
.navigation_open & {
|
||||
transition: transform 0.5s $easeOutQuad, opacity 0s;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.header__button {
|
||||
position: relative;
|
||||
top: 100%;
|
||||
}
|
||||
.social_media {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 100%;
|
||||
width: auto;
|
||||
padding: em(8px) em(15px);
|
||||
border-left: em(1px) solid $light_gray;
|
||||
transition: transform 0.5s 0.5s;
|
||||
.navigation_open & {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer__login {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
bottom: -100%;
|
||||
background: $green;
|
||||
color: $white !important;
|
||||
height: em(60px);
|
||||
line-height: em(60px);
|
||||
border: none;
|
||||
padding: 0 em(30px) !important;
|
||||
.header__button__icon {
|
||||
width: em(16px);
|
||||
height: em(16px);
|
||||
top: em(-1px);
|
||||
margin-right: em(10px);
|
||||
}
|
||||
}
|
||||
@@ -9,11 +9,12 @@
|
||||
text-align: right;
|
||||
font-size: 0;
|
||||
z-index: 506;
|
||||
box-shadow: 0 -1px 0 0 $light_gray, 0 em(-50px) 0 0 $white;
|
||||
transition: top 1s $easeInOutQuart;
|
||||
overflow: hidden;
|
||||
transition: z-index 0s 1s;
|
||||
will-change: transform, top;
|
||||
.search_open & {
|
||||
top: 100%;
|
||||
.search_open &, .navigation_open & {
|
||||
z-index: 909;
|
||||
transition: z-index 0s;
|
||||
}
|
||||
&.reveal {
|
||||
transform: translateY(-100%);
|
||||
@@ -23,6 +24,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: em(62px);
|
||||
z-index: 2;
|
||||
.search_open & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -37,7 +48,7 @@
|
||||
height: em(100px);
|
||||
display: block;
|
||||
}
|
||||
.search_open & {
|
||||
.search_open &, .navigation_open & {
|
||||
z-index: 910;
|
||||
transition: z-index 0s;
|
||||
}
|
||||
@@ -55,6 +66,20 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding: em(8px) em(10px) em(10px) em(10px);
|
||||
img {
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $tiny_breakpoint) {
|
||||
padding: em(4px) em(5px) em(8px) em(5px);
|
||||
img {
|
||||
width: em(60px);
|
||||
height: em(60px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__slogan {
|
||||
@@ -72,7 +97,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header__logo, .header__slogan {
|
||||
.header__logo, .header__slogan, .footer__login {
|
||||
left: 15%;
|
||||
.timetable_body & {
|
||||
left: em(100px);
|
||||
@@ -83,14 +108,78 @@
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
left: em(30px) !important;
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
left: em(15px) !important;
|
||||
}
|
||||
@media screen and (max-width: $tiny_breakpoint) {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header__languages {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0 em(15px);
|
||||
transition: transform 0.5s 0.1s;
|
||||
transform: none;
|
||||
li {
|
||||
display: inline-block;
|
||||
height: em(50px);
|
||||
&:first-child {
|
||||
a:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $dark_gray;
|
||||
text-decoration: none;
|
||||
font-size: em(14px);
|
||||
line-height: em(50px);
|
||||
width: em(40px);
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s $easeOutQuad;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: em(15px);
|
||||
bottom: em(15px);
|
||||
width: em(1px);
|
||||
background: $medium_light_gray;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search_open &, .navigation_open & {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding: 0 em(5px);
|
||||
}
|
||||
@media screen and (max-width: $tiny_breakpoint) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header__button {
|
||||
height: em(50px);
|
||||
vertical-align: top;
|
||||
line-height: em(48px);
|
||||
display: inline-block;
|
||||
border-left: em(1px) solid $light_gray;
|
||||
border-bottom: em(1px) solid $light_gray;
|
||||
font-size: em(18px);
|
||||
font-weight: 800;
|
||||
color: $green;
|
||||
@@ -98,14 +187,60 @@
|
||||
padding: 0 em(64px) 0 em(18px);
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: background 0.3s ease-in-out;
|
||||
vertical-align: middle;
|
||||
transition: transform 0.5s, border 0.3s, color 0.3s;
|
||||
transform: none;
|
||||
@for $i from 0 through 5 {
|
||||
&.data_id_#{$i} {
|
||||
transition-delay: $i * 0.1s, 0s, 0s;
|
||||
.header__button__icon {
|
||||
transition: transform 0.5s $i * 0.1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.header__button--reverse {
|
||||
padding: 0 em(18px) 0 em(64px);
|
||||
}
|
||||
&.header__button--light {
|
||||
padding: 0 em(15px);
|
||||
}
|
||||
&.header__button--light {
|
||||
font-size: em(14px);
|
||||
font-weight: 400;
|
||||
color: $dark_gray;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: em(1px) solid $light_gray;
|
||||
}
|
||||
.search_open &, .navigation_open & {
|
||||
transform: translateY(em(-50px));
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding: 0 em(54px) 0 em(12px);
|
||||
&.header__button--reverse {
|
||||
padding: 0 em(12px) 0 em(54px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__button--light {
|
||||
line-height: em(50px);
|
||||
.header__button__icon {
|
||||
transition: transform 0.2s 0s !important;
|
||||
}
|
||||
&:hover {
|
||||
background: darken($white, 1);
|
||||
color: darken($dark_gray, 20);
|
||||
.header__button__icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
.search_open & {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header__button--navigation {
|
||||
height: em(100px);
|
||||
padding-bottom: em(50px);
|
||||
rect {
|
||||
transform: none;
|
||||
transform-origin: 100% 50%;
|
||||
@@ -125,6 +260,32 @@
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
.search_open &, .navigation_open & {
|
||||
border-color: transparent;
|
||||
.header__button__icon {
|
||||
transform: translateY(em(50px));
|
||||
}
|
||||
rect {
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.line-top {
|
||||
transform: rotate(-45deg) translateY(10px);
|
||||
}
|
||||
.line-bottom {
|
||||
transform: rotate(45deg) translateY(-10px);
|
||||
}
|
||||
.line-middle {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
&:hover {
|
||||
.line-top {
|
||||
transform: rotate(-45deg) scaleX(0.8) translateY(10px);
|
||||
}
|
||||
.line-bottom {
|
||||
transform: rotate(45deg) scaleX(0.8) translateY(-10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__button--close {
|
||||
@@ -176,5 +337,28 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: $green;
|
||||
.header__button--light & {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
.header__button--reverse & {
|
||||
right: auto;
|
||||
left: em(16px);
|
||||
}
|
||||
.header__button--light & {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
right: em(12px);
|
||||
.header__button--reverse & {
|
||||
right: auto;
|
||||
left: em(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,58 +1,15 @@
|
||||
.navigation__close {
|
||||
font-size: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
background: rgba($green, 0.9);
|
||||
opacity: 0;
|
||||
transition: height 0s 1s, opacity 1s;
|
||||
overflow: hidden;
|
||||
z-index: 940;
|
||||
.header__button {
|
||||
transform: translateX(100%);
|
||||
transition: transform 1s $easeInOutQuart;
|
||||
color: $white;
|
||||
svg {
|
||||
fill: $white;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
font-size: 0;
|
||||
padding-left: 0;
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translateX(em(640px));
|
||||
}
|
||||
}
|
||||
body.navigation_open & {
|
||||
opacity: 1;
|
||||
height: 100vh;
|
||||
transition: height 0s, opacity 1s;
|
||||
.header__button {
|
||||
transform: translateX(em(-640px));
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation {
|
||||
position: fixed;
|
||||
z-index: 950;
|
||||
z-index: 905;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: em(640px);
|
||||
height: 100%;
|
||||
transform: none;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: em(50px) 0;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 1s $easeInOutQuart;
|
||||
body.navigation_open & {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: calc(100% - #{em(64px)});
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -164,38 +121,4 @@
|
||||
|
||||
.navigation__list__meta--bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.navigation__languages {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: em(30px);
|
||||
margin-bottom: em(20px);
|
||||
li {
|
||||
display: inline-block;
|
||||
height: em(34px);
|
||||
margin-left: em(9px);
|
||||
padding: em(6px) 0;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
a {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $dark_gray;
|
||||
text-decoration: none;
|
||||
font-size: em(15px);
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
border-left: 1px solid $light_gray;
|
||||
padding-left: em(10px);
|
||||
line-height: em(20px);
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -128,11 +128,5 @@
|
||||
.search_results & {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
&.loading {
|
||||
opacity: 0.2;
|
||||
&:before {
|
||||
top: em(180px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user