Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit fc79a38

Browse files
author
Victor George
committed
password tips styled, settings pages styled
1 parent 8736549 commit fc79a38

File tree

7 files changed

+307
-296
lines changed

7 files changed

+307
-296
lines changed

‎app/directives/track-toggle/track-toggle.directive.jade

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.track(ng-repeat="track in ['DESIGN', 'DEVELOP', 'DATA_SCIENCE']")
2-
hr(class="{{!$index && 'first'}}")
2+
//- hr(class="{{!$index && 'first'}}")
33
4-
.content
4+
.content(class="{{!tracks[track] && 'disabled'}}")
55
.track-details
66
.icon(ng-class="{'disabled': !tracks[track]}")
77
img(ng-if="track == 'DATA_SCIENCE' && tracks[track]", src="/images/ico-track-data.svg")
@@ -23,5 +23,3 @@
2323
label.onoffswitch-label(for='{{track}}-onoffswitch')
2424
span.onoffswitch-inner
2525
span.onoffswitch-switch
26-
27-
hr.bottom

‎app/index.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,8 +266,8 @@ html
266266
script(src="services/authtoken.service.js")
267267
script(src="services/blog.service.js")
268268
script(src="services/challenge.service.js")
269-
script(src="services/emptyState.service.js")
270269
script(src="services/communityData.service.js")
270+
script(src="services/emptyState.service.js")
271271
script(src="services/externalAccounts.service.js")
272272
script(src="services/helpers.service.js")
273273
script(src="services/image.service.js")

‎assets/css/directives/track-toggle.scss

Lines changed: 28 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@import '../partials/combined';
33

44
track-toggle {
5+
border-top: 1px solid $gray-light;
6+
57
hr {
68
margin-top: 15px;
79
width: 100%;
@@ -12,55 +14,67 @@ track-toggle {
1214
margin-bottom: 0;
1315
}
1416
}
17+
1518
.track {
1619
width: 100%;
1720
display: flex;
1821
flex-direction: column;
1922
align-items: left;
23+
2024
.content {
2125
display: flex;
2226
flex-direction: row;
2327
justify-content: space-between;
28+
padding: 15px 0;
29+
border-bottom: 1px solid $gray-light;
30+
transition: background-color .15s;
31+
32+
&.disabled {
33+
background-color: $gray-lightest;
34+
}
2435

2536
.track-details {
2637
display: flex;
2738
flex-direction: row;
2839
align-items: center;
29-
padding-left: 30px;
40+
padding-left: 10px;
3041

3142
.icon {
3243
&.disabled {
3344
color: #b7b7b7;
3445
}
3546
img {
3647
height: 32px;
37-
width: 35px;
48+
width: 32px;
3849
}
3950
span {
40-
@include sofia-pro-regular;
41-
font-size: 22px;
51+
@include sofia-pro-medium;
52+
font-size: 16px;
4253
}
4354
}
4455
}
4556
}
4657
.text {
47-
margin-left: 25px;
58+
margin-left: 15px;
4859
.title {
49-
font-size: 22px;
60+
font-size: 16px;
5061
line-height: 28px;
51-
@include sofia-pro-regular;
62+
@include sofia-pro-medium;
63+
text-transform: uppercase;
64+
transition: .1s color;
5265
&.disabled {
5366
color: #b7b7b7;
5467
}
5568
}
5669
.description {
57-
font-family: 'Source Sans Pro';
58-
margin-top: 4px;
70+
@include merriweather-sans-regular;
5971
font-size: 13px;
60-
color: #b7b7b7;
72+
margin-top: 4px;
73+
color: $accent-gray;
6174
}
6275
}
6376
}
77+
6478
@media only screen and (min-width: 760px) {
6579
hr {
6680
margin: 20px 0;
@@ -71,60 +85,10 @@ track-toggle {
7185
}
7286
}
7387
}
88+
89+
// Switch location
7490
.onoffswitch {
75-
position: relative; width: 45px;
76-
min-width: 45px;
77-
height: 24px;
7891
align-self: center;
79-
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
80-
margin-right: 30px;
81-
margin-left: 5px;
82-
}
83-
.onoffswitch-checkbox {
84-
display: none;
85-
}
86-
.onoffswitch-label {
87-
display: block; overflow: hidden; cursor: pointer;
88-
border-radius: 12px;
92+
margin-right: 10px;
93+
margin-left: 30px;
8994
}
90-
.onoffswitch-inner {
91-
display: block; width: 200%; margin-left: -100%;
92-
transition: margin 0.3s ease-in 0s;
93-
}
94-
.onoffswitch-inner:before, .onoffswitch-inner:after {
95-
display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
96-
font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
97-
box-sizing: border-box;
98-
}
99-
.onoffswitch-inner:before {
100-
content: "";
101-
padding-left: 10px;
102-
background-color: #0096ff;
103-
color: #0096ff;
104-
}
105-
.onoffswitch-inner:after {
106-
content: "";
107-
padding-right: 10px;
108-
background-color: #d1d3d4;
109-
color: #d1d3d4;
110-
text-align: right;
111-
}
112-
.onoffswitch-switch {
113-
display: block; width: 19px; margin: 2.5px;
114-
height: 19px;
115-
background: #FFFFFF;
116-
position: absolute; top: 0; bottom: 0;
117-
margin-top: 2.45px;
118-
right: 20px;
119-
border: none;
120-
border-radius: 12px;
121-
transition: all 0.3s ease-in 0s;
122-
}
123-
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
124-
margin-left: 0;
125-
}
126-
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
127-
right: 0px;
128-
}
129-
130-

‎assets/css/partials/_tc-inputs.scss

Lines changed: 109 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,108 @@ angucomplete-alt {
293293
left: 3px;
294294
}
295295

296+
// Error and success styles
297+
.validation-bar {
298+
position: relative;
299+
300+
&:before {
301+
content: '';
302+
display: none;
303+
position: absolute;
304+
top: 0px;
305+
left: 1px;
306+
height: 38px;
307+
width: 2px;
308+
border-radius: 3px 0 0 3px;
309+
}
310+
311+
&.error-bar:before {
312+
display: block;
313+
background-color: $error;
314+
}
315+
316+
&.success-bar:before {
317+
display: block;
318+
background-color: $success;
319+
}
320+
}
321+
322+
// FORM TIPS
323+
// probably structure needs to be redone
324+
325+
.tips {
326+
position: absolute;
327+
width: 320px;
328+
text-align: left;
329+
top: 13px;
330+
background-color: $gray-lightest;
331+
border-radius: 4px;
332+
// box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.20);
333+
-webkit-filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
334+
-moz-filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
335+
filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
336+
padding: 20px;
337+
z-index: 1000;
338+
339+
// CSS-olny arrow
340+
&:before {
341+
// content: '◀';
342+
// top: 15px;
343+
// left: -15px;
344+
font-size: 24px;
345+
color: $gray-lightest;
346+
position: absolute;
347+
z-index: -1;
348+
// text-shadow: 0px 2px 6px rgba(0,0,0,0.20);
349+
left: -35px;
350+
top: 30px;
351+
border: solid transparent;
352+
content: " ";
353+
height: 0;
354+
width: 0;
355+
position: absolute;
356+
pointer-events: none;
357+
border-color: rgba(136, 183, 213, 0);
358+
border-width: 20px;
359+
margin-top: -20px;
360+
border-right-color: $gray-lightest;
361+
-webkit-transform:rotate(360deg);
362+
}
363+
364+
h3, p {
365+
margin-bottom: 10px;
366+
}
367+
368+
h3 {
369+
@include sofia-pro-medium;
370+
font-size: 16px;
371+
@media only screen and (max-width: 915px) {
372+
font-size: 15px;
373+
}
374+
}
375+
376+
p {
377+
font-size: 13px;
378+
color: $gray-darkest;
379+
line-height: 1.3;
380+
position: relative;
381+
padding-left: 20px;
382+
}
383+
384+
p:before {
385+
// font-family: 'FontAwesome';
386+
@include sofia-pro-medium;
387+
font-size: 14px;
388+
content: "\2713 ";
389+
position: absolute;
390+
top: 0;
391+
left: 0;
392+
width: 20px;
393+
}
394+
}
395+
396+
397+
296398

297399
// SWITCHES
298400
// TODO: Refactor
@@ -301,7 +403,7 @@ angucomplete-alt {
301403
$switch-width: 44px;
302404
$switch-height: 24px;
303405
$switch-handle-offset: 3px;
304-
$switch-handle-size: ($switch-height - 2 * $switch-handle-offset);
406+
$switch-handle-size: $switch-height - (2 * $switch-handle-offset);
305407
$switch-active-color: $primary;
306408
$switch-inactive-color: $gray;
307409

@@ -313,6 +415,7 @@ $switch-inactive-color: $gray;
313415
.onoffswitch {
314416
position: relative;
315417
width: $switch-width;
418+
height: $switch-height;
316419
-webkit-user-select:none;
317420
-moz-user-select:none;
318421
-ms-user-select: none;
@@ -328,6 +431,7 @@ $switch-inactive-color: $gray;
328431

329432
.onoffswitch-label {
330433
display: block;
434+
width: $switch-width;
331435
overflow: hidden;
332436
cursor: pointer;
333437
border-radius: $switch-height;
@@ -340,7 +444,7 @@ $switch-inactive-color: $gray;
340444
@include switch-transition;
341445
}
342446

343-
// Pseudo-elements that slide to create background of the switch
447+
// Pseudo-elements that slide to create background of the switch; TODO: Remove those
344448
.onoffswitch-inner:before, .onoffswitch-inner:after {
345449
display: block;
346450
float: left;
@@ -392,14 +496,16 @@ $switch-inactive-color: $gray;
392496
// SWITCH HANDLE
393497
.onoffswitch-switch {
394498
display: block;
499+
background-color: $white;
500+
color: $white;
395501
width: $switch-handle-size;
396502
height: $switch-handle-size;
397503
background: $white;
398504
position: absolute;
399505
margin: $switch-handle-offset;
400506
top: 0;
401507
bottom: 0;
402-
right: $switch-handle-offset + $switch-handle-size;
508+
right: $switch-handle-offset + $switch-handle-size -1;
403509
border: none;
404510
border-radius: $switch-height;
405511
@include switch-transition;

‎assets/css/partials/_tc-mixins.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -228,19 +228,19 @@
228228
}
229229

230230
@mixin develop-icon-outline {
231-
background-image: url(/images/ico-track-develop-outline.svg);
231+
background-image: url(/images/ico-track-develop.svg);
232232
}
233233

234234
@mixin design-icon-outline {
235-
background-image: url(/images/ico-track-design-outline.svg);
235+
background-image: url(/images/ico-track-design.svg);
236236
}
237237

238238
@mixin data-icon-outline {
239-
background-image: url(/images/ico-track-data-outline.svg);
239+
background-image: url(/images/ico-track-data.svg);
240240
}
241241

242242
@mixin copilot-icon-outline {
243-
background-image: url(/images/ico-track-co_pilot-outline.svg);
243+
background-image: url(/images/ico-track-copilot.svg);
244244
}
245245

246246
// UI REFRESH STYLES

0 commit comments

Comments
 (0)