nav and notification fixes
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
@import "_typography.scss";
|
||||
@import "_layout.scss";
|
||||
@import "modules/_header.scss";
|
||||
@import "modules/_notification.scss";
|
||||
@import "modules/_footer.scss";
|
||||
@import "modules/_search.scss";
|
||||
@import "modules/_navigation.scss";
|
||||
|
||||
@@ -123,14 +123,16 @@ $max-width: 100%;
|
||||
}
|
||||
|
||||
.content__navigation__title {
|
||||
font-size: em(16px);
|
||||
color: $green;
|
||||
padding-top: em(10px);
|
||||
font-size: em(18px);
|
||||
color: $gray;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
margin-bottom: em(20px);
|
||||
}
|
||||
|
||||
.content__navigation__content {
|
||||
@@ -161,7 +163,7 @@ $max-width: 100%;
|
||||
}
|
||||
|
||||
.content__navigation__anchor {
|
||||
font-size: em(16px);
|
||||
font-size: em(14px);
|
||||
color: $gray;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
z-index: 506;
|
||||
overflow: hidden;
|
||||
transition: z-index 0s 1s;
|
||||
will-change: transform, top;
|
||||
will-change: transform;
|
||||
.search_open &, .navigation_open & {
|
||||
z-index: 909;
|
||||
transition: z-index 0s;
|
||||
@@ -186,11 +186,8 @@
|
||||
.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;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -346,6 +343,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
10% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.header__button--notification {
|
||||
font-size: 0;
|
||||
padding-left: 0;
|
||||
.header__button__icon {
|
||||
transform-origin: 50% 30%;
|
||||
animation: ring 2s $easeOutQuad infinite;
|
||||
}
|
||||
svg {
|
||||
transform: none;
|
||||
transition: transform 0.3s $easeOutQuart;
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
transform: scale(1.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__button__icon {
|
||||
width: em(32px);
|
||||
height: em(32px);
|
||||
|
||||
@@ -59,6 +59,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__extra {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: em(50px);
|
||||
.header__languages {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
95
private/scss/modules/_notification.scss
Normal file
95
private/scss/modules/_notification.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: em(80px);
|
||||
right: em(30px);
|
||||
width: em(260px);
|
||||
z-index: 1000;
|
||||
height: auto;
|
||||
background: $white;
|
||||
box-shadow: 0 0 em(30px) rgba($black, 0.2);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transform-origin: 23% 5%;
|
||||
transition: transform 0.3s $easeOutQuad, opacity 0.3s $easeOutQuad;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
background: $white;
|
||||
z-index: -2;
|
||||
position: absolute;
|
||||
top: em(-10px);
|
||||
right: em(187px);
|
||||
width: em(20px);
|
||||
height: em(20px);
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 30px rgba($black, 0.2);
|
||||
}
|
||||
.notification_open & {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.cms-toolbar-expanded & {
|
||||
margin-top: 46px;
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
transform-origin: 36% 5%;
|
||||
&:before {
|
||||
right: em(157px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification__content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: em(20px) em(30px);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
max-height: 70vh;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.notification__title {
|
||||
line-height: 1.35;
|
||||
color: $green;
|
||||
font-size: em(18px);
|
||||
font-weight: 700;
|
||||
padding-right: em(55px);
|
||||
margin-bottom: em(10px);
|
||||
}
|
||||
|
||||
.notification__text {
|
||||
line-height: 1.4;
|
||||
color: $dark_gray;
|
||||
font-size: em(14px);
|
||||
}
|
||||
|
||||
.notification__button {
|
||||
margin-top: em(20px);
|
||||
height: em(38px) !important;
|
||||
line-height: em(36px) !important;
|
||||
font-size: em(12px) !important;
|
||||
svg {
|
||||
width: em(24px) !important;
|
||||
height: em(24px) !important;
|
||||
margin: em(7px) 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notification__close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: em(25px);
|
||||
svg {
|
||||
width: em(20px);
|
||||
height: em(20px);
|
||||
fill: $dark_gray;
|
||||
transition: fill 0.3s;
|
||||
}
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $near_black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -52,7 +52,7 @@
|
||||
top: 0;
|
||||
transform: none;
|
||||
}
|
||||
input {
|
||||
input[type="text"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: em(90px);
|
||||
@@ -97,7 +97,7 @@
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
input {
|
||||
input[type="text"] {
|
||||
height: em(60px);
|
||||
font-size: em(23px);
|
||||
text-indent: em(17px);
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
background: $green;
|
||||
border-radius: 0;
|
||||
color: $white;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.02em;
|
||||
position: relative;
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
padding-right: em(105px);
|
||||
transition: padding 0.3s ease-in-out;
|
||||
will-change: padding;
|
||||
input {
|
||||
input[type="text"] {
|
||||
border: none;
|
||||
background: $white;
|
||||
height: em(45px);
|
||||
|
||||
@@ -131,7 +131,8 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: em(180px);
|
||||
bottom: 0;
|
||||
padding-bottom: 56%;
|
||||
max-height: 100%;
|
||||
z-index: -1;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
right: 10%;
|
||||
@@ -173,7 +174,7 @@
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-bottom: em(40px);
|
||||
padding-bottom: em(50px);
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: 90%;
|
||||
}
|
||||
@@ -263,28 +264,27 @@
|
||||
.slider__text__item__email {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: $white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: em(-30px);
|
||||
bottom: -30px;
|
||||
left: 20%;
|
||||
transform: none;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s;
|
||||
box-shadow: 0 0 em(30px) rgba($black, 0);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
box-shadow: 0 0 30px rgba($black, 0.1);
|
||||
text-align: center;
|
||||
line-height: em(69px);
|
||||
line-height: 69px;
|
||||
svg {
|
||||
display: inline-block;
|
||||
fill: $green;
|
||||
width: em(30px);
|
||||
height: em(30px);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 em(30px) rgba($black, 0.1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user