1 | .header-content { |
---|
2 | padding:1em 1.5em; |
---|
3 | a{ |
---|
4 | text-decoration: none; |
---|
5 | } |
---|
6 | .description{ |
---|
7 | margin: 0; |
---|
8 | } |
---|
9 | } |
---|
10 | |
---|
11 | |
---|
12 | /* logo ----------------------------------------------------------------------*/ |
---|
13 | .logo { |
---|
14 | .font-size(24); |
---|
15 | line-height: 1em; |
---|
16 | font-weight: 800; |
---|
17 | text-transform: uppercase; |
---|
18 | margin: 0; |
---|
19 | display: inline-block; |
---|
20 | span{ |
---|
21 | transition: all 250ms ease-in-out; |
---|
22 | } |
---|
23 | &:hover{ |
---|
24 | span{ |
---|
25 | color: @color-app; |
---|
26 | } |
---|
27 | } |
---|
28 | a { |
---|
29 | @media (max-width: @screen-m){ |
---|
30 | content: ""; |
---|
31 | display: inline-block; |
---|
32 | width: 34px; |
---|
33 | height: 34px; |
---|
34 | background-image: url('/static/media/img/logo-openworkouts.png'); |
---|
35 | background-size: 100%; |
---|
36 | background-repeat: no-repeat; |
---|
37 | span { |
---|
38 | display: none !important; |
---|
39 | } |
---|
40 | } |
---|
41 | } |
---|
42 | } |
---|
43 | .logo-open { |
---|
44 | display: block; |
---|
45 | color: @color-app; |
---|
46 | } |
---|
47 | .logo-work, |
---|
48 | .logo-outs { |
---|
49 | color: @color-app-light; |
---|
50 | } |
---|
51 | |
---|
52 | /* menu navigation -----------------------------------------------------------*/ |
---|
53 | .nav-site{ |
---|
54 | .font-size (13); |
---|
55 | |
---|
56 | ul { |
---|
57 | list-style-type: none; |
---|
58 | padding: 0; |
---|
59 | margin: 0; |
---|
60 | display: flex; |
---|
61 | flex-direction: row; |
---|
62 | justify-content: space-between; |
---|
63 | align-items: center; |
---|
64 | } |
---|
65 | li{ |
---|
66 | border-left: 1px solid @color-main-light; |
---|
67 | flex-grow: 1; |
---|
68 | text-align: center; |
---|
69 | /* this is for the dashboard li element */ |
---|
70 | &:first-child { |
---|
71 | display: none; |
---|
72 | @media (min-width: @screen-m){ |
---|
73 | display: inline-block; |
---|
74 | } |
---|
75 | } |
---|
76 | } |
---|
77 | a{ |
---|
78 | color: @color-main-medium; |
---|
79 | padding: 1.25em; |
---|
80 | display: block; |
---|
81 | &:hover { |
---|
82 | color: @color-main; |
---|
83 | } |
---|
84 | } |
---|
85 | .is-active { |
---|
86 | a { |
---|
87 | color: @color-main; |
---|
88 | } |
---|
89 | } |
---|
90 | } |
---|
91 | |
---|
92 | .icon-dashboard, |
---|
93 | .icon-profile, |
---|
94 | .icon-logout { |
---|
95 | &::before { |
---|
96 | content: ""; |
---|
97 | display: inline-block; |
---|
98 | } |
---|
99 | span { |
---|
100 | display: none; |
---|
101 | } |
---|
102 | @media (min-width: @screen-m){ |
---|
103 | &::before { |
---|
104 | display: none; |
---|
105 | } |
---|
106 | span{ |
---|
107 | display: inline-block; |
---|
108 | } |
---|
109 | } |
---|
110 | &:hover { |
---|
111 | opacity: .5; |
---|
112 | } |
---|
113 | } |
---|
114 | |
---|
115 | .icon-dashboard { |
---|
116 | &::before { |
---|
117 | content: "☰"; |
---|
118 | .font-size(30); |
---|
119 | line-height: 0em; |
---|
120 | position: relative; |
---|
121 | top: 3px; |
---|
122 | margin: 0; |
---|
123 | } |
---|
124 | } |
---|
125 | |
---|
126 | .icon-profile { |
---|
127 | padding: 1em 1.25em !important; |
---|
128 | &::before { |
---|
129 | position: relative; |
---|
130 | top: 3px; |
---|
131 | width: 20px; |
---|
132 | height: 20px; |
---|
133 | background-image: url('/static/media/img/icon-user.svg'); |
---|
134 | background-size: 100%; |
---|
135 | margin: 0; |
---|
136 | } |
---|
137 | } |
---|
138 | |
---|
139 | |
---|
140 | .icon-logout { |
---|
141 | padding: 1em 1.25em !important; |
---|
142 | &::before { |
---|
143 | position: relative; |
---|
144 | top: 3px; |
---|
145 | width: 20px; |
---|
146 | height: 20px; |
---|
147 | background-image: url('/static/media/img/icon-logout.svg'); |
---|
148 | background-size: 100%; |
---|
149 | margin: 0; |
---|
150 | } |
---|
151 | } |
---|
152 | |
---|
153 | |
---|
154 | |
---|
155 | /* Add workout button with submenu -------------------------------------------*/ |
---|
156 | .add-workout { |
---|
157 | position: relative; |
---|
158 | >a{ |
---|
159 | color: @color-app; |
---|
160 | &:before{ |
---|
161 | content: "+"; |
---|
162 | font-weight: 800; |
---|
163 | .font-size(32); |
---|
164 | line-height: 0; |
---|
165 | position: relative; |
---|
166 | top: 8px; |
---|
167 | } |
---|
168 | span{ |
---|
169 | display: none; |
---|
170 | } |
---|
171 | &:hover{ |
---|
172 | background-color: @color-app; |
---|
173 | color:white; |
---|
174 | } |
---|
175 | } |
---|
176 | &:hover{ |
---|
177 | &:after{ |
---|
178 | content: ""; |
---|
179 | position: absolute; |
---|
180 | background-color: white; |
---|
181 | bottom: -1px; |
---|
182 | width: 100%; |
---|
183 | height: 1px; |
---|
184 | display: block; |
---|
185 | z-index: 20; |
---|
186 | } |
---|
187 | ul{ |
---|
188 | /* This fixes some problems in the "add workout" submenu, |
---|
189 | where some elements appeared without full width and on wrong |
---|
190 | positioning */ |
---|
191 | display: flex; |
---|
192 | li { |
---|
193 | width: 100%; |
---|
194 | text-align: center; |
---|
195 | } |
---|
196 | } |
---|
197 | } |
---|
198 | |
---|
199 | /* submenu -------------------------------------------------------------- */ |
---|
200 | ul{ |
---|
201 | display: none; |
---|
202 | flex-direction: column; |
---|
203 | position: absolute; |
---|
204 | background-color: fade(white, 95%); |
---|
205 | right: -1px; |
---|
206 | border: 1px solid @color-main-light; |
---|
207 | width: 153px; |
---|
208 | li{ |
---|
209 | border-left:transparent; |
---|
210 | text-align: left; |
---|
211 | } |
---|
212 | a{ |
---|
213 | &:hover{ |
---|
214 | background-color: @color-main-xtralight; |
---|
215 | } |
---|
216 | } |
---|
217 | } |
---|
218 | } |
---|
219 | |
---|
220 | /* description ---------------------------------------------------------------*/ |
---|
221 | .description { |
---|
222 | .font-size(14); |
---|
223 | font-weight: 300; |
---|
224 | letter-spacing: .025em; |
---|
225 | color: @color-main-medium; |
---|
226 | } |
---|
227 | |
---|
228 | |
---|
229 | /* ------------------------------ STATES ------------------------------------ */ |
---|
230 | |
---|
231 | /* when user is login --------------------------------------------------------*/ |
---|
232 | .is-login { |
---|
233 | .header-content { |
---|
234 | border-bottom: 1px solid @color-main-light; |
---|
235 | display: flex; |
---|
236 | padding: 0em 1.5em; |
---|
237 | justify-content: space-between; |
---|
238 | align-items: center; |
---|
239 | } |
---|
240 | .description { |
---|
241 | .hide; |
---|
242 | } |
---|
243 | .logo-open { |
---|
244 | display: inline-block; |
---|
245 | } |
---|
246 | } |
---|