source: OpenWorkouts-current/ow/static/less/modules/header.less @ 2a71053

currentfeature/docs
Last change on this file since 2a71053 was 2a71053, checked in by Segundo Fdez <segun.2@…>, 5 years ago

update favicon and responsive navigation

  • Property mode set to 100644
File size: 4.7 KB
Line 
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    }
70    a{
71        color: @color-main-medium;
72        padding: 1.25em;
73        display: block;
74        &:hover {
75            color: @color-main;
76        }
77    }
78    .is-active {
79        a {
80            color: @color-main;
81        }
82    }
83}
84
85.icon-dashboard,
86.icon-profile,
87.icon-logout {
88    &::before {
89        content: "";
90        display: inline-block;
91    }
92    span {
93        display: none;
94    }
95    @media (min-width: @screen-m){
96        &::before {
97            display: none;
98        }
99        span{
100            display: inline-block;
101        }
102    }
103    &:hover {
104        opacity: .5;
105    }
106}
107
108.icon-dashboard {
109    &::before {
110        content: "☰";
111        .font-size(30);
112        line-height: 0em;
113        position: relative;
114        top: 3px;
115        margin: 0;
116    }
117}
118
119.icon-profile {
120    padding: 1em 1.25em !important;
121    &::before {
122        position: relative;
123        top: 3px;
124        width: 20px;
125        height: 20px;
126        background-image: url('/static/media/img/icon-user.svg');
127        background-size: 100%;
128        margin: 0;
129    }
130}
131
132
133.icon-logout {
134    padding: 1em 1.25em !important;
135    &::before {
136        position: relative;
137        top: 3px;
138        width: 20px;
139        height: 20px;
140        background-image: url('/static/media/img/icon-logout.svg');
141        background-size: 100%;
142        margin: 0;
143    }
144}
145
146
147
148/* Add workout button with submenu -------------------------------------------*/
149.add-workout {
150    position: relative;
151    >a{
152        color: @color-app;
153        &:before{
154            content: "+";
155            font-weight: 800;
156            .font-size(32);
157            line-height: 0;
158            position: relative;
159            top: 8px;
160        }
161        span{
162            display: none;
163        }
164        &:hover{
165            background-color: @color-app;
166            color:white;
167        }
168    }
169    &:hover{
170        &:after{
171            content: "";
172            position: absolute;
173            background-color: white;
174            bottom: -1px;
175            width: 100%;
176            height: 1px;
177            display: block;
178            z-index: 20;
179        }
180        ul{
181            display: inline-block;
182        }
183    }
184
185    /* submenu -------------------------------------------------------------- */
186    ul{
187        display: none;
188        flex-direction: column;
189        position: absolute;
190        background-color: fade(white, 95%);
191        right: -1px;
192        border: 1px solid @color-main-light;
193        width: 153px;
194        li{
195            border-left:transparent;
196            text-align: left;
197        }
198        a{
199            &:hover{
200                background-color: @color-main-xtralight;
201            }
202        }
203    }
204}
205
206/* description ---------------------------------------------------------------*/
207.description {
208    .font-size(14);
209    font-weight: 300;
210    letter-spacing: .025em;
211    color: @color-main-medium;
212}
213
214
215/* ------------------------------ STATES ------------------------------------ */
216
217/* when user is login --------------------------------------------------------*/
218.is-login {
219    .header-content {
220        border-bottom: 1px solid @color-main-light;
221        display: flex;
222        padding: 0em 1.5em;
223        justify-content: space-between;
224        align-items: center;
225    }
226    .description {
227        .hide;
228    }
229    .logo-open {
230        display: inline-block;
231    }
232}
Note: See TracBrowser for help on using the repository browser.