source: OpenWorkouts-current/ow/static/less/modules/workout.less @ 5cbc4a0

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

Update dashboard and login with less.

  • Property mode set to 100644
File size: 4.3 KB
Line 
1.workout-content {
2    padding: 2em  1em;
3    @media (min-width: @screen-s){
4        padding: 2em 6em;
5    }
6     @media (min-width: @screen-m){
7        display: flex;
8        justify-content:space-between;
9    }
10}
11
12/* list mode */
13.workout-list {
14    margin-right: 2em;
15    width: 100%;
16    >h2{
17        font-weight: 300;
18        margin: 0 0 1.5em;
19    }
20    /* provisional layout, replace this with grid layout system based on final content */
21}
22
23/* Module resume on dashboard workouts */
24.workout-resume {
25    padding: 1.5em 0;
26    position: relative;
27    max-width: 700px;
28    @media (min-width: @screen-m){
29        padding-left: 2em;
30        border-left: 1px solid @color-main-light;
31        transition: all 250ms ease-in-out;
32    }
33    &:hover{
34        border-color: @color-main;
35        .workout-title{
36            &:before{
37                color: @color-main;
38            }
39        }
40    }
41    ul{
42        padding: 0;
43        list-style-type: none;
44        .font-size(13);
45        a{
46            display: block;
47            text-decoration: none;
48        }
49    }
50}
51.bike{
52    &:before{
53        display: block;
54        //position: absolute;
55        content: "";
56        width: 30px;
57        height: 30px;
58        //left:-3.25em;
59        //top: 1.6em;
60        background-image: url('../media/img/bike.svg');
61        background-size: 100%;
62    }
63}
64
65.workout-title{
66    .font-size(14);
67    margin: 0 0 0em 0;
68    position: relative;
69    &:before{
70        transition: all 250ms ease-in-out;
71        content: "▶";
72        position: absolute;
73        left: -3.25em;
74        top:.35em;
75        color:@color-main-light;
76        .font-size(10);
77    }
78    a{
79        color: @color-main;
80        text-decoration: none;
81        &:hover {
82            color: @color-app;
83        }
84    }
85}
86
87.workout-info {
88    display: flex;
89    align-items:center;
90    margin: .25em 0;
91    li{
92        color: @color-main-medium;
93        &:after{
94            content: "|";
95            margin:0 .5em;
96        }
97        &:last-child{
98            &:after{
99                content: "";
100                margin:0;
101            }
102        }
103    }
104}
105
106.workout-intro {
107    .font-size(13);
108    color: @color-main;
109}
110
111.workout-options{
112    display: inline-block;
113    border:1px solid @color-main-light;
114    margin-bottom: 0;
115    border-radius: 4px;
116    li{
117        display: inline-block;
118        border-right: 1px solid @color-main-light;
119        &:last-child{
120            border-right:none;
121        }
122    }
123    a{
124        color: @color-main-medium;
125        padding: .5em .75em;
126        &:hover{
127            color: @color-main;
128        }
129    }
130}
131
132.owo-del{
133    a{
134        &:hover{
135            color: red;
136        }
137    }
138}
139
140.workout-aside{
141    width: 100%;
142    @media (min-width: @screen-m){
143        max-width: 300px;
144        padding-left: 1.5em;
145        border-left:1px solid @color-main-light;
146    }
147}
148
149.aside-profile {
150    margin-bottom: 2em;
151    img {
152        width: 80px;
153        height: 80px;
154        object-fit: cover;
155        border-radius: 50%;
156    }
157    h2 {
158        font-weight: 400;
159        .font-size(18);
160         margin: 0 0 .5em 0;
161    }
162    ul {
163        list-style-type: none;
164        margin:0;
165        padding:0;
166        .font-size(13);
167        color: @color-main-dark;
168    }
169}
170
171
172
173.workout-activity-tree {
174    list-style-type: none;
175    padding: 0;
176    margin: 0;
177    transition:all 250ms ease-in-out;
178    .font-size(13);
179    >li {
180        margin-bottom: .5em;
181        padding-bottom: .5em;
182        border-bottom: 1px solid @color-main-light;
183    }
184    a {
185        text-decoration: none;
186        display: block;
187        color: @color-app;
188        &:hover{
189            color: @color-main;
190        }
191
192        &.viewing-year {
193            color: @color-main;
194            font-weight: 700;
195            margin-bottom: .5em;
196        }
197        &.viewing-month {
198            background-color: @color-main-light;
199            color: @color-main;
200            font-weight: 700;
201        }
202    }
203}
204
205
206.workout-activity-tree-year {
207    list-style-type: none;
208    padding: 0;
209    margin: 0;
210    >li {
211        display: block;
212        margin-bottom: .5em;
213    }
214    a {
215        display: flex;
216        justify-content: space-between;
217        padding: .5em;
218        background-color: @color-main-xtralight;
219        color: @color-main-dark;
220        &:hover {
221            background-color: @color-main-light;
222        }
223    }
224}
225
226
Note: See TracBrowser for help on using the repository browser.