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

current
Last change on this file was dba0ae9, checked in by Borja Lopez <borja@…>, 5 years ago

Fixed broken "add workouts" submenu
(at least for computers, we still have the problem in mobile devices
described in ticket #70)

  • Property mode set to 100644
File size: 5.2 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        /* 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}
Note: See TracBrowser for help on using the repository browser.