1.navigationFull {
2  display: none;
3}
4
5.navigationSlider {
6  position: absolute;
7  right: 0px;
8
9  .navSlideout {
10    cursor: pointer;
11    padding-top: 4px;
12    position: absolute;
13    right: 10px;
14    top: 0;
15    transition: top 0.3s;
16    z-index: 101;
17  }
18
19  .slidingNav {
20    background: $secondary-bg;
21    box-sizing: border-box;
22    height: 0px;
23    overflow-x: hidden;
24    padding: 0;
25    position: absolute;
26    right: 0px;
27    top: 0;
28    transition: height 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
29    width: 0;
30
31    ul {
32      flex-flow: column nowrap;
33      list-style: none;
34      padding: 10px;
35
36      li {
37        margin: 0;
38        padding: 2px 0;
39
40        a {
41          color: $primary-bg;
42          display: inline;
43          margin: 3px 5px;
44          padding: 2px 0px;
45          transition: background-color 0.3s;
46
47          &:focus,
48          &:hover {
49            border-bottom: 2px solid $primary-bg;
50          }
51        }
52      }
53    }
54  }
55
56  .navSlideoutActive {
57    .slidingNav {
58      height: auto;
59      padding-top: $header-height + $header-pbot;
60      width: 300px;
61    }
62
63    .navSlideout {
64      top: -2px;
65      .menuExpand {
66        span:nth-child(1) {
67          background-color: $text;
68          top: 16px;
69          transform: rotate(45deg);
70        }
71        span:nth-child(2) {
72          opacity: 0;
73        }
74        span:nth-child(3) {
75          background-color: $text;
76          transform: rotate(-45deg);
77        }
78      }
79    }
80  }
81}
82
83.menuExpand {
84  display: flex;
85  flex-flow: column nowrap;
86  height: 20px;
87  justify-content: space-between;
88
89  span {
90    background: $primary-overlay;
91    border-radius: 3px;
92    display: block;
93    flex: 0 0 4px;
94    height: 4px;
95    position: relative;
96    top: 0;
97    transition: background-color 0.3s, top 0.3s, opacity 0.3s, transform 0.3s;
98    width: 20px;
99  }
100}
101
102.navPusher {
103  border-top: $header-height + $header-ptop + $header-pbot solid $primary-bg;
104	position: relative;
105	left: 0;
106	z-index: 99;
107	height: 100%;
108
109  &::after {
110    position: absolute;
111    top: 0;
112    right: 0;
113    width: 0;
114    height: 0;
115    background: rgba(0,0,0,0.4);
116    content: '';
117    opacity: 0;
118    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
119    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
120  }
121
122  .sliderActive &::after {
123    width: 100%;
124    height: 100%;
125    opacity: 1;
126    -webkit-transition: opacity 0.5s;
127    transition: opacity 0.5s;
128    z-index: 100;
129  }
130}
131
132
133@media only screen and (min-width: 1024px) {
134  .navigationFull {
135    display: block;
136  }
137
138  .navigationSlider {
139    display: none;
140  }
141}