1 | import styled, { createGlobalStyle } from 'styled-components';
|
2 |
|
3 | import Colors from '../Colors';
|
4 | import TextHelper from '../TextHelper';
|
5 |
|
6 | export const Navigation = styled.nav<{ axisZ: boolean }>`
|
7 | background-color: ${Colors.urbanSky};
|
8 | text-align: center;
|
9 | position: sticky;
|
10 | z-index: 1;
|
11 | top: 0;
|
12 | transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
13 |
|
14 | ${({ axisZ }) => axisZ && `box-shadow: 0 0px 16px 7px rgba(0,0,0,0.1);`}
|
15 |
|
16 | @media screen and (max-width: 768px) {
|
17 | white-space: nowrap;
|
18 | overflow-x: auto;
|
19 | -webkit-overflow-scrolling: touch;
|
20 | -ms-overflow-style: -ms-autohiding-scrollbar;
|
21 |
|
22 | &::-webkit-scrollbar {
|
23 | display: none;
|
24 | }
|
25 | }
|
26 |
|
27 | ul {
|
28 | margin: 0;
|
29 | padding: 0;
|
30 | }
|
31 |
|
32 | li {
|
33 | display:inline-block;
|
34 |
|
35 | &:nth-child(2) {
|
36 | margin:0 20px;
|
37 | }
|
38 |
|
39 | a {
|
40 | text-decoration: none;
|
41 | font-family: ${TextHelper.fontVariant('medium')};
|
42 | color: ${Colors.support};
|
43 | padding: 20px 20px;
|
44 | display: inherit;
|
45 |
|
46 | @media screen and (max-width: 768px) {
|
47 | padding: 20px 11px;
|
48 | }
|
49 |
|
50 | &:hover, &.active {
|
51 | color: ${Colors.mongeral};
|
52 | }
|
53 | }
|
54 | }
|
55 | `;
|
56 |
|
57 | export const Smooth = createGlobalStyle`html { scroll-behavior: smooth; }`;
|