1
0
Fork 0
blog/src/components/Search/Search.module.scss

47 lines
661 B
SCSS
Raw Normal View History

2018-08-25 11:15:40 +02:00
@import 'variables';
.search {
2019-10-02 13:35:50 +02:00
position: absolute;
left: $spacer / 2;
right: $spacer / 2;
top: -($spacer / 4);
z-index: 10;
input {
width: 100%;
}
@media (min-width: $screen-md) {
left: 0;
right: 0;
}
2018-08-25 11:15:40 +02:00
}
2018-08-27 19:42:09 +02:00
.appear,
.enter {
2019-10-02 13:35:50 +02:00
opacity: 0.01;
transform: translate3d(0, -100px, 0);
2018-08-27 19:42:09 +02:00
2019-10-02 13:35:50 +02:00
&.appearActive,
&.enterActive {
opacity: 1;
transition: 0.2s ease-out;
transform: translate3d(0, 0, 0);
}
2018-08-27 19:42:09 +02:00
}
.exit {
2019-10-02 13:35:50 +02:00
opacity: 1;
transform: translate3d(0, 0, 0);
2018-08-27 19:42:09 +02:00
2019-10-02 13:35:50 +02:00
&.exitActive {
opacity: 0.01;
transition: 0.2s ease-in;
transform: translate3d(0, -100px, 0);
}
2018-08-27 19:42:09 +02:00
}
2018-11-18 16:41:37 +01:00
:global(.hasSearchOpen) {
2019-10-02 13:35:50 +02:00
overflow: hidden;
2018-11-18 16:41:37 +01:00
}