diff --git a/app/account/register/register.jade b/app/account/register/register.jade
index 5dbc5b50e..df8763bbb 100644
--- a/app/account/register/register.jade
+++ b/app/account/register/register.jade
@@ -46,6 +46,7 @@
input(ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
.tips.username-tips(ng-show="vm.usernameTips")
+ .arrow
h3 Username Tips:
p Your username will be public
@@ -67,6 +68,7 @@
input(ng-model="vm.email", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
.tips.email-tips(ng-show="vm.emailTips")
+ .arrow
h3 Email Tips:
p Your email address will be private and not shared with anyone.
@@ -84,9 +86,10 @@
toggle-password-with-tips(ng-if="!vm.isSocialRegistration")
.tips.password-tips(ng-show="vm.passwordFocus")
- h3 Password Tips:
+ .arrow
+ //- h3 Password Tips:
- p Your password must have:
+ H3 Your password must have:
p(ng-class="{ 'has-length-between-range': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.minlength && !vm.registerForm.password.$error.maxlength && !vm.registerForm.password.$error.required) }") At least 8 characters
@@ -117,5 +120,4 @@
.join-topcoder
span Have an account?
-
a(ui-sref="login(vm.$stateParams)") Log in
diff --git a/app/account/reset-password/reset-password.jade b/app/account/reset-password/reset-password.jade
index 3feaf1f30..ef628b810 100644
--- a/app/account/reset-password/reset-password.jade
+++ b/app/account/reset-password/reset-password.jade
@@ -15,6 +15,7 @@
input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="EMAIL ADDRESS", type="email", valid-email, required)
.tips.email-tips(ng-show="vm.emailTips")
+ .arrow
h3 Email Tips:
p Enter your email address and we'll get back to you with a reset link
@@ -49,6 +50,7 @@
toggle-password-with-tips
.tips.password-tips(ng-show="vm.passwordFocus")
+ .arrow
h3 Password Tips:
p(ng-class="{ 'has-length-between-range': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.minlength && !vm.resetPasswordForm.password.$error.maxlength && !vm.resetPasswordForm.password.$error.required) }") Must be between 8 and 64 characters
diff --git a/app/directives/challenge-tile/challenge-tile.directive.jade b/app/directives/challenge-tile/challenge-tile.directive.jade
index 1c817e48d..f5e705fdd 100644
--- a/app/directives/challenge-tile/challenge-tile.directive.jade
+++ b/app/directives/challenge-tile/challenge-tile.directive.jade
@@ -31,7 +31,7 @@
// Only show if not data science track
p.roles
span(ng-hide="challenge.track === 'DATA_SCIENCE'")
- #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
+ #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
.completed-challenge(
ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
@@ -65,7 +65,7 @@
// Only show if not data science track
p.roles
span(ng-hide="challenge.track === 'DATA_SCIENCE'")
- #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
+ #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
.challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
.active-challenge(ng-show="challenge.status === 'ACTIVE'")
@@ -76,7 +76,7 @@
p.subtrack-color {{challenge.subTrack | underscoreStrip}}
- p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
+ p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
.challenge-details
.challenge-info
@@ -106,7 +106,7 @@
p.subtrack-color {{challenge.subTrack | underscoreStrip}}
- p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
+ p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
.challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track")
diff --git a/app/directives/track-toggle/track-toggle.directive.jade b/app/directives/track-toggle/track-toggle.directive.jade
index 825c7e855..e6ec86cf9 100644
--- a/app/directives/track-toggle/track-toggle.directive.jade
+++ b/app/directives/track-toggle/track-toggle.directive.jade
@@ -1,7 +1,6 @@
.track(ng-repeat="track in ['DESIGN', 'DEVELOP', 'DATA_SCIENCE']")
- hr(class="{{!$index && 'first'}}")
- .content
+ .content(class="{{!tracks[track] && 'disabled'}}")
.track-details
.icon(ng-class="{'disabled': !tracks[track]}")
img(ng-if="track == 'DATA_SCIENCE' && tracks[track]", src="/images/ico-track-data.svg")
@@ -23,5 +22,3 @@
label.onoffswitch-label(for='{{track}}-onoffswitch')
span.onoffswitch-inner
span.onoffswitch-switch
-
-hr.bottom
diff --git a/app/index.jade b/app/index.jade
index fd826f179..9a357c398 100644
--- a/app/index.jade
+++ b/app/index.jade
@@ -28,6 +28,7 @@ html
// build:css /styles/app.css
//- inject:css
link(rel="stylesheet", href="assets/css/reset.css")
+ link(rel="stylesheet", href="assets/css/vendors/angucomplete.css")
link(rel="stylesheet", href="assets/css/topcoder.css")
link(rel="stylesheet", href="assets/css/skill-picker/skill-picker.css")
link(rel="stylesheet", href="assets/css/sitemap/sitemap.css")
diff --git a/app/settings/account-info/account-info.jade b/app/settings/account-info/account-info.jade
index 1cf589b2f..08952d57a 100644
--- a/app/settings/account-info/account-info.jade
+++ b/app/settings/account-info/account-info.jade
@@ -1,14 +1,14 @@
.account-info-container
.settings-section.credentials
.section-info
- h2 credentials
+ h2 Credentials
.description Used to log in to your account and cannot be edited. Please contact support@topcoder.com if you need to make changes.
.section-fields
.form-label.username Username
input.form-field.grey(name="username", value="{{vm.userData.handle}}", disabled=true)
- .form-label email
+ .form-label Email
input.form-field.grey(name="email", value="{{vm.userData.email}}", disabled=true)
div(ng-hide="vm.isSocialRegistration")
@@ -31,6 +31,7 @@
placeholder="Pick a new password"
)
.tips.password-tips(ng-show="vm.passwordFocus")
+ .arrow
h3 Password Tips:
p Your password must have:
@@ -42,7 +43,7 @@
p(ng-class="{ 'has-symbol-or-number': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
.button-container
- button.tc-btn.tc-btn-l.save(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.newPasswordForm", ng-disabled="vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine", ng-class="{'disabled': vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine}") Change Password
+ button.tc-btn.save(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.newPasswordForm", ng-disabled="vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine", ng-class="{'disabled': vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine}") Change Password
div(ng-show="vm.isSocialRegistration")
@@ -163,4 +164,4 @@
.save-section
- button.save.tc-btn.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid || vm.accountInfoForm.$pristine", ng-class="{'enabled-button': vm.accountInfoForm.$valid}", ng-click="vm.accountInfoForm.$valid && vm.accountInfoForm.$dirty && vm.saveAccountInfo()") Save
+ button.save.tc-btn.tc-btn-wide(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid || vm.accountInfoForm.$pristine", ng-class="{'enabled-button': vm.accountInfoForm.$valid}", ng-click="vm.accountInfoForm.$valid && vm.accountInfoForm.$dirty && vm.saveAccountInfo()") Save
diff --git a/app/settings/edit-profile/edit-profile.jade b/app/settings/edit-profile/edit-profile.jade
index 78bd005cc..dcd246ee8 100644
--- a/app/settings/edit-profile/edit-profile.jade
+++ b/app/settings/edit-profile/edit-profile.jade
@@ -5,7 +5,7 @@
.settings-section.about
.section-info
- h2 about me
+ h2 About Me
.description The most important information that other community members should know about you.
.section-fields
@@ -25,7 +25,7 @@
button.tc-btn.tc-btn-secondary.tc-btn-s(ng-click="vm.deleteImage()", type="button") Delete
.country
- .form-label country to represent
+ .form-label Country to represent
angucomplete-alt(
id="countryId",
input-name="location",
@@ -59,12 +59,12 @@
track-toggle(tracks="vm.tracks")
.save-section
- button.tc-btn.tc-btn-primary.tc-btn-s(ng-show="!(vm.editProfile.$invalid || vm.editProfile.$pristine)", type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': disabled}") Save
- button.tc-btn.tc-btn-secondary.tc-btn-s(ng-show="vm.editProfile.$invalid || vm.editProfile.$pristine", type="button", disabled="disabled") Save
+ button.tc-btn.tc-btn-primary.tc-btn-wide(ng-show="!(vm.editProfile.$invalid || vm.editProfile.$pristine)", type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': disabled}") Save
+ button.tc-btn.tc-btn-secondary.tc-btn-wide(ng-show="vm.editProfile.$invalid || vm.editProfile.$pristine", type="button", disabled="disabled") Save
.settings-section.skills
.section-info
- h2 skills
+ h2 Skills
.description Languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.
.section-fields
@@ -91,7 +91,7 @@
.settings-section.links
.section-info
- h2 external links
+ h2 External links
.description Show off your work and experience outside of Topcoder. Connect accounts from popular services and networks or add a link to any site.
.section-fields
diff --git a/assets/css/account/account.scss b/assets/css/account/account.scss
index 6bc93969e..4abcc9c99 100644
--- a/assets/css/account/account.scss
+++ b/assets/css/account/account.scss
@@ -5,15 +5,17 @@
.register-container,
.reset-password-container,
.registered-successfully-container {
+ position: relative;
width: 560px;
margin: 60px auto 0;
display: flex;
flex-direction: column;
text-align: center;
justify-content: flex-start;
- @include source-sans-regular;
- background-color: white;
+ @include font-with-weight('Merriweather Sans');
+ background-color: $white;
border-radius: 3px;
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
header {
height: 70px;
@@ -50,41 +52,67 @@
h1 {
margin-top: 39px;
margin-bottom: 40px;
- @include ui-h1;
- color: #3D3D3D;
+ @media (max-width: 767px) {
+ margin: 30px auto;
+ }
+ color: $gray-darkest;
line-height: 30px;
font-size: 20px;
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
width: 380px;
align-self: center;
text-transform: uppercase;
}
- input:not([type="checkbox"]), button {
- display: block;
- margin-bottom: 10px;
+ // registration sizes, remove
+ input[name="firstname"], input[name="lastname"] {
+ width: 185px;
+ padding-right: 45px;
+ }
+
+ input[name="username"], input[name="email"] {
+ padding-right: 85px;
+ }
+
+ input[type="text"],
+ toggle-password {
+ width: 380px;
}
input:not([type="checkbox"]) {
- height: 40px;
width: 300px;
- padding: 0;
- padding-left: 15px;
- border: 0;
- @include source-sans-regular;
- font-size: 16px;
- color: #231F20;
- box-shadow: none;
- outline: none;
}
- .tips {
- left: 380px;
+ toggle-password {
+ input#current-password-input {
+ width: 300px;
+ height: 20px;
+ border: none;
+ outline: none;
+ box-shadow: none;
+ }
+ }
+
+ .tips,
+ .email-tips,
+ .password-tips {
+ @media screen and (min-width: 915px) {
+ left: 395px;
+ }
}
- .email-tips {
- left: 380px;
+ // Autocomplete
+ .angucomplete-dropdown {
+ width: 100%;
+ color: $gray-darkest;
+ text-align: left;
+ box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.4);
+ }
+ .angucomplete-selected-row {
+ background-color: $primary-lighter;
+ color: $gray-darkest;
}
+ // Autocomplete end
button {
// width: 180px;
@@ -100,56 +128,10 @@
width: 380px;
}
- input[type="text"],
- input[type="password"],
- input[type="email"],
- input.email,
- toggle-password,
- toggle-password-with-tips {
- height: 38px;
- background: $white;
- border: 1px solid #B7B7B7;
- box-shadow: inset 0px 0px 2px 0px rgba(183,183,183,0.30);
- border-radius: 2px;
- cursor: auto;
- color: #3d3d3d;
- font-family: "Merriweather Sans";
- font-size: 15px;
-
- &:hover {
- border: 1px solid #A3A3AE;
- box-shadow: inset 0px 0px 2px 0px #B7B7B7;
- }
-
- &:focus,
- &.focus {
- border: 1px solid #0096FF;
- outline: none;
- box-shadow: inset 0px 0px 2px 1px rgba(133,203,255,0.60);
- }
-
- transition: .15s all;
- }
-
- input:not([type="checkbox"]) {
- box-shadow: none;
- }
toggle-password {
input#current-password-input {
width: 300px;
- height: 20px;
- border: none;
- outline: none;
- box-shadow: none;
- }
- }
-
- toggle-password-with-tips {
- input#password-input {
- border: none;
- outline: none;
- box-shadow: none;
}
}
@@ -176,7 +158,7 @@
color: #A3A3AE;
font-size: 10px;
line-height: 13px;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
@@ -199,7 +181,7 @@
color: #A3A3AE;
font-size: 13px;
line-height: 22px;
- @include sofia-pro-regular;
+ @include font-with-weight;
text-transform: uppercase;
}
@@ -217,7 +199,7 @@
color: #A3A3AE;
font-size: 10px;
line-height: 13px;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
text-transform: uppercase;
cursor: pointer;
margin-top: 10px;
@@ -276,9 +258,9 @@
flex-flow: row wrap;
margin-top: 30px;
justify-content: center;
- font-size: 12px;
text-transform: uppercase;
- font-size: 12px;
+ font-size: $label-small;
+ @include font-with-weight('Sofia Pro', 500);
a {
display: inline;
diff --git a/assets/css/account/login.scss b/assets/css/account/login.scss
index cc198e83e..d1e1fef22 100644
--- a/assets/css/account/login.scss
+++ b/assets/css/account/login.scss
@@ -2,13 +2,6 @@
@import '../partials/combined';
.login-container {
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
-
- h1 {
- @media (max-width: 767px) {
- margin: 30px auto;
- }
- }
form {
display: flex;
@@ -19,45 +12,12 @@
input[type="text"],
toggle-password {
width: 380px;
- }
-
- input[type="text"],
- input[type="password"],
- toggle-password {
- height: 38px;
- background: $white;
- border: 1px solid #B7B7B7;
- box-shadow: inset 0px 0px 2px 0px rgba(183,183,183,0.30);
- border-radius: 2px;
- cursor: auto;
- color: #3d3d3d;
-
- &:hover {
- border: 1px solid #A3A3AE;
- box-shadow: inset 0px 0px 2px 0px #B7B7B7;
- }
-
- &:focus,
- &.focus {
- border: 1px solid #0096FF;
- outline: none;
- box-shadow: inset 0px 0px 2px 1px rgba(133,203,255,0.60);
- }
-
- transition: .15s all;
- }
-
- input:not([type="checkbox"]) {
- box-shadow: none;
+ padding-right: 10px;
}
toggle-password {
input#current-password-input {
width: 300px;
- height: 20px;
- border: none;
- outline: none;
- box-shadow: none;
}
}
@@ -76,7 +36,7 @@
color: #A3A3AE;
font-size: 12px;
line-height: 15px;
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
margin-top: 10px;
.forgot-password {
diff --git a/assets/css/account/register.scss b/assets/css/account/register.scss
index 00051658a..a11de1095 100644
--- a/assets/css/account/register.scss
+++ b/assets/css/account/register.scss
@@ -2,7 +2,6 @@
@import '../partials/combined';
.register-container {
- position: relative;
form {
display: flex;
@@ -17,9 +16,6 @@
toggle-password,
toggle-password-with-tips {
width: 380px;
- height: 42px;
- border-radius: 2px;
- border: 1px solid #D1D3D4;
}
toggle-password,
@@ -27,8 +23,6 @@
input#password-input,
input#current-password-input {
width: 300px;
- height: 20px;
- border: none;
}
}
@@ -69,29 +63,6 @@
}
// login-options section
- .login-options {
-
- .networks {
-
- i {
- cursor: pointer;
- }
-
- .network {
- &.github {
-
- }
-
- &.facebook {
- margin-left: 41px;
- }
-
- &.google-plus {
- margin-left: 43px;
- }
- }
- }
- }
.section-break {
hr {
max-width: 180px;
@@ -123,3 +94,9 @@
margin-top: 30px;
}
}
+
+toggle-password-with-tips label {
+ display: flex !important;
+ line-height: 20px !important;
+ padding-right: 10px !important;
+}
diff --git a/assets/css/account/registered-successfully.scss b/assets/css/account/registered-successfully.scss
index 1de96f4c6..0710f8645 100644
--- a/assets/css/account/registered-successfully.scss
+++ b/assets/css/account/registered-successfully.scss
@@ -2,10 +2,9 @@
@import '../partials/combined';
.registered-successfully-container {
- p.message {
+ p {
font-size: 20px;
line-height: 30px;
- @include source-sans-light;
color: #3D3D3D;
padding: 62px 90px 154px 90px;
}
diff --git a/assets/css/account/reset-password.scss b/assets/css/account/reset-password.scss
index 7e5739901..c7e04df2f 100644
--- a/assets/css/account/reset-password.scss
+++ b/assets/css/account/reset-password.scss
@@ -14,11 +14,6 @@
input[type="email"],
toggle-password-with-tips {
width: 380px;
- height: 42px;
- border-radius: 2px;
- border: 1px solid #D1D3D4;
- font-size: 12px;
- line-height: 14px;
}
toggle-password,
@@ -26,21 +21,17 @@
input#password-input,
input#current-password-input {
width: 300px;
- height: 20px;
- border: none;
}
}
.email-label {
- font-size: 13px;
+ @include font-with-weight('Merriweather Sans', 300);
+ font-size: 15px;
line-height: 18px;
- @include source-sans-regular;
}
button {
align-self: center;
- font-size: 18px;
- line-height: 20px;
}
}
diff --git a/assets/css/community/_community.scss b/assets/css/community/_community.scss
index 0b05b03b5..19333ddeb 100644
--- a/assets/css/community/_community.scss
+++ b/assets/css/community/_community.scss
@@ -4,7 +4,7 @@
.header-community {
@include module-full-width;
background-color: $white;
- @include sofia-pro-bold;
+ @include font-with-weight('Sofia Pro', 500);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
header {
text-align: center;
diff --git a/assets/css/community/members.scss b/assets/css/community/members.scss
index 431bf5c87..732de8a34 100644
--- a/assets/css/community/members.scss
+++ b/assets/css/community/members.scss
@@ -13,7 +13,7 @@
padding: 10px;
margin-bottom: 6px;
h2 {
- @include sofia-pro-bold;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 18px;
text-transform: uppercase;
text-align: center;
@@ -25,7 +25,7 @@
padding-bottom: 82px;
}
small {
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 16px;
display: block;
text-transform: capitalize;
@@ -58,7 +58,7 @@
}
input[type="text"] {
@include module-full-width;
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
font-size: 14px;
border-width: 0;
background: transparent;
@@ -89,7 +89,7 @@
}
}
h2 {
- @include sofia-pro-bold;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 20px;
text-transform: uppercase;
text-align: center;
@@ -97,7 +97,7 @@
padding-bottom: 17px;
position: relative;
small {
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 16px;
display: block;
text-transform: capitalize;
@@ -136,7 +136,7 @@
}
}
.user-tile {
- @include sofia-pro-regular;
+ @include font-with-weight;
border: 1px solid $member-tile-border;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
@@ -149,7 +149,7 @@
overflow: hidden;
}
.user-country {
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
}
.user-tag,
.user-country,
@@ -270,7 +270,7 @@
}
}
.member-congratulation {
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 11px;
color: $gray-dark-alt;
text-align: center;
@@ -417,7 +417,7 @@
}
}
.user-more {
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
display: none;
text-transform: capitalize;
position: absolute;
@@ -472,7 +472,7 @@
display: none;
}
label {
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
font-size: 11px;
text-transform: uppercase;
padding-left: 20px;
@@ -551,7 +551,7 @@
.reviewboard-container,
.record-books-container {
@extend %reviewboard-panel;
- @include sofia-pro-regular;
+ @include font-with-weight;
text-align: center;
padding-bottom: 16px;
min-height: 165px;
diff --git a/assets/css/community/statistics.scss b/assets/css/community/statistics.scss
index cf20e6427..795f38789 100644
--- a/assets/css/community/statistics.scss
+++ b/assets/css/community/statistics.scss
@@ -15,7 +15,7 @@
padding: 10px;
margin-bottom: 6px;
h2 {
- @include sofia-pro-bold;
+ @include font-with-weight('Sofia Pro', 700);
font-size: 18px;
text-transform: uppercase;
text-align: center;
@@ -27,7 +27,6 @@
padding-bottom: 82px;
}
small {
- @include sofia-pro-regular;
font-size: 16px;
display: block;
text-transform: capitalize;
@@ -40,7 +39,7 @@
}
}
.winner-tile {
- @include sofia-pro-regular;
+ @include font-with-weight;
display: flex;
flex-direction: row;
background: $white;
@@ -200,7 +199,7 @@
}
.top-performers-container {
@extend %statistics-panel;
- @include sofia-pro-regular;
+ @include font-with-weight;
padding-bottom: 40px;
.performers-container {
display: flex;
@@ -306,7 +305,7 @@
.tops-container,
.record-books-container {
@extend %statistics-panel;
- @include sofia-pro-regular;
+ @include font-with-weight;
text-align: center;
padding-bottom: 16px;
min-height: 165px;
diff --git a/assets/css/directives/challenge-links.directive.scss b/assets/css/directives/challenge-links.directive.scss
index 50c251938..ca7a54597 100644
--- a/assets/css/directives/challenge-links.directive.scss
+++ b/assets/css/directives/challenge-links.directive.scss
@@ -16,7 +16,7 @@
text-decoration: none;
p {
color: $accent-gray;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
@@ -89,7 +89,7 @@
p {
order: 1;
color: $accent-gray;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss
index bc8e1b879..a46af148f 100644
--- a/assets/css/directives/challenge-tile.scss
+++ b/assets/css/directives/challenge-tile.scss
@@ -29,7 +29,7 @@ challenge-tile .challenge.tile-view {
a.name {
display: block;
padding: 15px 20px 0px 20px;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 14px;
line-height: 20px;
color: $gray-darkest;
@@ -45,7 +45,7 @@ challenge-tile .challenge.tile-view {
p.subtrack-color {
padding: 0 20px;
margin-top: 5px;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
@@ -96,7 +96,7 @@ challenge-tile .challenge.tile-view {
.currentPhase {
margin-top: 40px;
margin-bottom: 20px;
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
font-size: 18px;
line-height: 23px;
text-transform: uppercase;
@@ -113,7 +113,7 @@ challenge-tile .challenge.tile-view {
background-image: url(/images/ico-calendar.svg);
> p {
- @include sofia-pro-bold;
+ @include font-with-weight('Sofia Pro', 700);
}
.ends-in {
@@ -141,7 +141,7 @@ challenge-tile .challenge.tile-view {
.stalled-challenge {
min-height: 83px;
padding: 21px 20px 0px 20px;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 12px;
line-height: 18px;
text-transform: uppercase;
@@ -167,7 +167,7 @@ challenge-tile .challenge.tile-view {
border: 1px solid #F0F0F0;
border-radius: 4px;
background-color: $white;
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 12px;
text-transform: uppercase;
color: $gray-darkest;
@@ -204,7 +204,7 @@ challenge-tile .challenge.tile-view {
position: relative;
.date-completed {
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 12px;
text-transform: uppercase;
color: $accent-gray;
@@ -238,14 +238,14 @@ challenge-tile .challenge.tile-view {
.score {
margin-top: 28px;
margin-bottom: 5px;
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 32px;
line-height: 38px;
color: #3D3D3D;
}
p:last-child {
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 12px;
line-height: 14px;
color: #A3A3AE;
@@ -299,7 +299,7 @@ challenge-tile .challenge.list-view {
a.name {
display: block;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 14px;
line-height: 20px;
color: $gray-darkest;
@@ -314,7 +314,7 @@ challenge-tile .challenge.list-view {
p.subtrack-color {
margin-bottom: 12px;
- @include sofia-pro-medium;
+ @include font-with-weight('Sofia Pro', 500);
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
@@ -322,7 +322,7 @@ challenge-tile .challenge.list-view {
.roles {
max-width: 362px;
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
font-size: 13px;
line-height: 18px;
color: $gray-darkest;
@@ -350,14 +350,14 @@ challenge-tile .challenge.list-view {
.challenge-info {
.currentPhase {
margin-bottom: 10px;
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
font-size: 18px;
color: $gray-darkest;
text-transform: uppercase;
}
.ends-in {
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 14px;
color: #A3A3AE;
}
@@ -368,7 +368,7 @@ challenge-tile .challenge.list-view {
.score {
margin-bottom: 5px;
- @include sofia-pro-regular;
+ @include font-with-weight;
font-size: 32px;
line-height: 38px;
color: #3D3D3D;
diff --git a/assets/css/directives/input-sticky-placeholder.scss b/assets/css/directives/input-sticky-placeholder.scss
index 4c54b8a10..7dbf40d78 100644
--- a/assets/css/directives/input-sticky-placeholder.scss
+++ b/assets/css/directives/input-sticky-placeholder.scss
@@ -1,17 +1,2 @@
@import 'topcoder-includes';
@import '../partials/combined';
-
-.input-sticky-placeholder-container {
- position: relative;
-
- span.placeholder-text {
- position: absolute;
- top: 3px;
- right: 10px;
- @include sofia-pro-regular;
- font-size: 10px;
- line-height: 40px;
- text-transform: uppercase;
- color: $accent-gray;
- }
-}
diff --git a/assets/css/directives/ios-card.scss b/assets/css/directives/ios-card.scss
index d972fd20e..637b93a8f 100644
--- a/assets/css/directives/ios-card.scss
+++ b/assets/css/directives/ios-card.scss
@@ -103,7 +103,7 @@ ios-card .challenge.tile-view {
.prize-money {
margin-top: 32px;
margin-bottom: 10px;
- @include sofia-pro-light;
+ @include font-with-weight('Sofia Pro', 300);
font-size: 20px;
line-height: 24px;
}
@@ -112,7 +112,7 @@ ios-card .challenge.tile-view {
height: 36px;
margin-bottom: 33px;
padding: 0 20px;
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
font-size: 13px;
line-height: 18px;
}
@@ -173,7 +173,7 @@ ios-card .challenge.tile-view {
min-height: 36px;
margin-bottom: 25px;
color: $gray-darkest;
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
font-size: 13px;
line-height: 18px;
}
diff --git a/assets/css/directives/toggle-password-with-tips.scss b/assets/css/directives/toggle-password-with-tips.scss
index a34799a18..c8b794222 100644
--- a/assets/css/directives/toggle-password-with-tips.scss
+++ b/assets/css/directives/toggle-password-with-tips.scss
@@ -8,17 +8,6 @@ toggle-password-with-tips {
align-items: center;
justify-content: space-between;
- height: 40px;
- width: 300px;
- margin-bottom: 10px;
- padding-left: 15px;
- padding-right: 10px;
- border: 0;
-
- @include source-sans-regular;
- font-size: 16px;
- background-color: $white;
- color: #231F20;
input#password-input {
width: 155px;
@@ -26,15 +15,4 @@ toggle-password-with-tips {
padding-left: 0;
outline: 0;
}
-
- label {
- text-transform: uppercase;
- font-size: 9.8px;
- color: #808285;
-
- input[type="checkbox"] {
- width: 15px;
- margin: 0;
- }
- }
}
diff --git a/assets/css/directives/toggle-password.scss b/assets/css/directives/toggle-password.scss
index 6ce541083..775c633d9 100644
--- a/assets/css/directives/toggle-password.scss
+++ b/assets/css/directives/toggle-password.scss
@@ -8,17 +8,6 @@ toggle-password {
align-items: center;
justify-content: space-between;
- height: 40px;
- width: 300px;
- margin-bottom: 10px;
- padding-left: 15px;
- padding-right: 10px;
- border: 0;
-
- @include source-sans-regular;
- font-size: 16px;
- background-color: $white;
- color: #231F20;
input#current-password-input {
width: 155px;
@@ -26,15 +15,4 @@ toggle-password {
padding-left: 0;
outline: 0;
}
-
- label {
- text-transform: uppercase;
- font-size: 9.8px;
- color: #808285;
-
- input[type="checkbox"] {
- width: 15px;
- margin: 0;
- }
- }
}
diff --git a/assets/css/directives/track-toggle.scss b/assets/css/directives/track-toggle.scss
index d11a3b2c8..586b691ae 100644
--- a/assets/css/directives/track-toggle.scss
+++ b/assets/css/directives/track-toggle.scss
@@ -2,6 +2,8 @@
@import '../partials/combined';
track-toggle {
+ border-top: 1px solid $gray-light;
+
hr {
margin-top: 15px;
width: 100%;
@@ -12,21 +14,31 @@ track-toggle {
margin-bottom: 0;
}
}
+
.track {
width: 100%;
display: flex;
flex-direction: column;
align-items: left;
+
.content {
display: flex;
flex-direction: row;
justify-content: space-between;
+ padding: 15px 0;
+ border-bottom: 1px solid $gray-light;
+ width: 100%;
+ transition: background-color .15s;
+
+ &.disabled {
+ background-color: $gray-lightest;
+ }
.track-details {
display: flex;
flex-direction: row;
align-items: center;
- padding-left: 30px;
+ padding-left: 10px;
.icon {
&.disabled {
@@ -34,33 +46,36 @@ track-toggle {
}
img {
height: 32px;
- width: 35px;
+ width: 32px;
}
span {
- @include sofia-pro-regular;
- font-size: 22px;
+ @include font-with-weight('Sofia Pro', 500);
+ font-size: 16px;
}
}
}
}
.text {
- margin-left: 25px;
+ margin-left: 15px;
.title {
- font-size: 22px;
+ font-size: 16px;
line-height: 28px;
- @include sofia-pro-regular;
+ @include sofia-pro-medium;
+ text-transform: uppercase;
+ transition: .1s color;
&.disabled {
color: #b7b7b7;
}
}
.description {
- font-family: 'Source Sans Pro';
- margin-top: 4px;
+ @include merriweather-sans-regular;
font-size: 13px;
- color: #b7b7b7;
+ margin-top: 4px;
+ color: $accent-gray;
}
}
}
+
@media only screen and (min-width: 760px) {
hr {
margin: 20px 0;
@@ -71,60 +86,10 @@ track-toggle {
}
}
}
+
+// Switch location
.onoffswitch {
- position: relative; width: 45px;
- min-width: 45px;
- height: 24px;
align-self: center;
- -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
- margin-right: 30px;
- margin-left: 5px;
-}
-.onoffswitch-checkbox {
- display: none;
-}
-.onoffswitch-label {
- display: block; overflow: hidden; cursor: pointer;
- border-radius: 12px;
+ margin-right: 10px;
+ margin-left: 30px;
}
-.onoffswitch-inner {
- display: block; width: 200%; margin-left: -100%;
- transition: margin 0.3s ease-in 0s;
-}
-.onoffswitch-inner:before, .onoffswitch-inner:after {
- display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
- font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
- box-sizing: border-box;
-}
-.onoffswitch-inner:before {
- content: "";
- padding-left: 10px;
- background-color: #0096ff;
- color: #0096ff;
-}
-.onoffswitch-inner:after {
- content: "";
- padding-right: 10px;
- background-color: #d1d3d4;
- color: #d1d3d4;
- text-align: right;
-}
-.onoffswitch-switch {
- display: block; width: 19px; margin: 2.5px;
- height: 19px;
- background: #FFFFFF;
- position: absolute; top: 0; bottom: 0;
- margin-top: 2.45px;
- right: 20px;
- border: none;
- border-radius: 12px;
- transition: all 0.3s ease-in 0s;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
- margin-left: 0;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
- right: 0px;
-}
-
-
diff --git a/assets/css/my-dashboard/community-updates.scss b/assets/css/my-dashboard/community-updates.scss
index 715ee3163..c0b67247d 100644
--- a/assets/css/my-dashboard/community-updates.scss
+++ b/assets/css/my-dashboard/community-updates.scss
@@ -89,7 +89,7 @@
.description {
padding: 20px 10px;
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
font-size: 13px;
line-height: 18px;
@media only screen and (min-width: 570px) {
diff --git a/assets/css/partials/_tc-buttons.scss b/assets/css/partials/_tc-buttons.scss
index bd3d1597a..212b075d8 100644
--- a/assets/css/partials/_tc-buttons.scss
+++ b/assets/css/partials/_tc-buttons.scss
@@ -128,6 +128,20 @@ a.tc-btn, button.tc-btn {
}
}
+ &.tc-btn-warning {
+ &:hover {
+ background-color: $error;
+ border-color: $error-dark;
+
+ }
+ &:active {
+ background-color: $error-dark;
+
+ }
+ }
+
+
+
&.tc-btn-xs {
height: 20px;
padding: 0 10px;
diff --git a/assets/css/partials/_tc-inputs.scss b/assets/css/partials/_tc-inputs.scss
index 27a31f4c8..d56edae9f 100644
--- a/assets/css/partials/_tc-inputs.scss
+++ b/assets/css/partials/_tc-inputs.scss
@@ -1,34 +1,150 @@
// Topcoder Inputs
// tc- is the default prefix that we use for all classes
-
@import 'topcoder-includes';
-input.tc-input,
-.tc-input > input,
-.tc-input {
- color: #231f20;
+
+//
+// TOPCODER FORMS AND FIELDS SECTION
+// ----------------------------------------------------------------------
+// Topcoder Inputs
+// tc- is the default prefix that we use for all classes
+
+//Empty state
+
+input,
+textarea,
+.tc-input,
+toggle-password,
+toggle-password-with-tips {
+ height: 38px;
+ font-size: 15px;
+ @include merriweather-sans-regular;
+ line-height: 20px;
+ color: $gray-darkest;
+ padding-left: 10px;
+ margin-bottom: 10px;
outline: none;
- background: white;
- border: 1px solid #b7b7b7;
- box-shadow: inset 0px 0px 2px 0px rgba(183,183,183,0.30);
+ background: $white;
+ border: 1px solid $gray-dark;
+ box-shadow: inset 0px 0px 2px 0px rgba(183, 183, 183, 0.2);
border-radius: 2px;
cursor: auto;
- color: #3d3d3d;
- height: 30px;
&:hover {
border: 1px solid #A3A3AE;
box-shadow: inset 0px 0px 2px 0px #B7B7B7;
- padding-left: 15px;
}
&:focus,
&.focus {
border: 1px solid #0096FF;
outline: none;
- box-shadow: inset 0px 0px 2px 1px rgba(133,203,255,0.60);
- padding-left: 15px;
+ box-shadow: inset 0px 0px 2px 1px rgba(133,203,255,0.4);
}
-
+
transition: .15s all;
}
+
+// Style the placeholders
+input {
+ @include placeholder {
+ color: $accent-gray;
+ font-size: 12px;
+ @include font-with-weight;
+ text-transform: uppercase;
+ transition: opacity .15s;
+ opacity: 1;
+ }
+}
+
+input:focus {
+ @include placeholder {
+ opacity: 0;
+ transition: opacity .15s;
+ }
+}
+
+
+textarea {
+ padding: 10px;
+ line-height: 24px;
+
+ @include placeholder {
+ color: $accent-gray;
+ font-weight: 300;
+ }
+
+ &:focus {
+ @include placeholder {
+ opacity: 0;
+ transition: opacity .15s;
+ }
+ }
+}
+
+
+
+// Compound fields, reset the input element and style the parent container to resemble input
+.tc-input,
+toggle-password,
+toggle-password-with-tips {
+ // Reset the input styles
+ input {
+ height: 20px;
+ border: none;
+ background: none;
+ box-shadow: none;
+ padding: none;
+
+ &:hover,
+ &:focus,
+ &.focus {
+ border: none;
+ box-shadow: none;
+ outline: none;
+ }
+ }
+
+ label {
+ display: inline-block;
+ text-transform: uppercase;
+ @include sofia-pro-medium;
+ font-size: 10px;
+ line-height: 10px;
+ color: $accent-gray;
+ height: 20px;
+ width: 60px;
+ padding: 0;
+
+ input[type='checkbox'] {
+ height: 14px;
+ width: 14px;
+ }
+ }
+}
+
+
+angucomplete-alt {
+ width: 100%;
+ margin-top: 6px;
+}
+
+
+
+// Custom Inputs
+//
+
+.input-sticky-placeholder-container {
+ position: relative;
+
+ span.placeholder-text {
+ position: absolute;
+ top: 14px;
+ right: 10px;
+ @include sofia-pro-light;
+ font-size: 10px;
+ line-height: 10px;
+ text-transform: uppercase;
+ color: $accent-gray;
+ }
+}
diff --git a/assets/css/partials/_tc-mixins.scss b/assets/css/partials/_tc-mixins.scss
index 0f5d05901..a71c34df0 100644
--- a/assets/css/partials/_tc-mixins.scss
+++ b/assets/css/partials/_tc-mixins.scss
@@ -1,3 +1,109 @@
+@import '_tc-variables';
+
+// SPECIFY FONTS THE SMART WAY
+// ----------------------------------------------------------------------------
+// Instead of repeating the use of fonts, we can build a simple mixin to do that for us
+@mixin font-with-weight($family: 'Sofia Pro', $weight: 400, $fallback: sans-serif){
+ @if $fallback == serif {
+ font-family: $family, $fonts-family-serif;
+ font-weight: $weight;
+
+ }
+ @else if $fallback == sans-serif {
+ font-family: $family, $fonts-family-sans-serif;
+ font-weight: $weight;
+
+ }
+ @else if $fallback == monospace {
+ font-family: $family, $fonts-family-monospace;
+ font-weight: $weight;
+ }
+ @else {
+ font-family: $family, $fonts-family-monospace;
+ font-weight: $familyt-base;
+ }
+}
+
+
+// Placeholders refactored
+// ----------------------------------------------------------------------------
+// from 'http://stackoverflow.com/questions/17181849/placeholder-mixin-scss-css'
+//
+// Usage:
+//
+// .foo {
+// @include placeholder {
+// color: green;
+// }
+// }
+
+// @include placeholder {
+// color: red;
+// }
+
+
+// Smart, but not working for me currently :(
+// @mixin optional-at-root($sel) {
+// @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+// @content;
+// }
+// }
+
+// @mixin placeholder {
+// @include optional-at-root('::-webkit-input-placeholder') {
+// @content;
+// }
+
+// @include optional-at-root(':-moz-placeholder') {
+// @content;
+// }
+
+// @include optional-at-root('::-moz-placeholder') {
+// @content;
+// }
+
+// @include optional-at-root(':-ms-input-placeholder') {
+// @content;
+// }
+// }
+
+@mixin placeholder {
+ &::-webkit-input-placeholder {@content}
+ &:-moz-placeholder {@content}
+ &::-moz-placeholder {@content}
+ &:-ms-input-placeholder {@content}
+}
+
+
+//
+// Pass a number, and use in different places. How to use:
+//
+// @include media(320px) {
+// background: red; // the content will be wrapped with the mixin;
+// }
+//
+// from 'https://robots.thoughtbot.com/sasss-content-directive'
+
+
+// @MEDIA MIXIN
+// ----------------------------------------------------------------------------
+
+@mixin media-max($width) {
+ @media only screen and (max-width: $width) {
+ @content;
+ }
+}
+
+@mixin media-min($width) {
+ @media only screen and (min-width: $width) {
+ @content;
+ }
+}
+
+
+
+// HELPERS
+// ----------------------------------------------------------------------------
@mixin clearfix {
&:after {
content: "";
@@ -39,32 +145,6 @@
// Font Stack: BODY
// Refactor to use non-typeface specific name; best - use variables;
-@mixin source-sans-light {
- font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
- font-weight: 300;
-}
-
-@mixin source-sans-regular {
- font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
- font-weight: 400;
-}
-
-@mixin source-sans-italic {
- font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
- font-weight: 400;
- font-style: italic;
-}
-
-@mixin source-sans-semi-bold {
- font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
- font-weight: 600;
-}
-
-@mixin source-sans-bold {
- font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
- font-weight: 700;
-}
-
// Replacement for Merriweather Sans
@mixin label-description {
@@ -170,7 +250,7 @@
margin-right: 10px;
padding-top: 30px;
@media only screen and (min-width: 900px) {
- padding-top: 90px;
+ padding-top: 30px;
}
}
@@ -189,20 +269,20 @@
padding: 30px 0;
}
}
-
+// VIC: Left for refactoring
@mixin form-field {
- padding-left: 10px;
- margin-bottom: 5px;
- background-color: #FCFCFC;
- border: 1px solid #F0F0F0;
- border-radius: 2px;
- height: 40px;
+ // padding-left: 10px;
+ // margin-bottom: 5px;
+ // background-color: #FCFCFC;
+ // border: 1px solid #F0F0F0;
+ // border-radius: 2px;
+ // height: 40px;
+ // TODO REMOVED: use _tc-inputs !!!!
}
@mixin form-field-focused {
- background-color: $white;
- border: 1px solid #D1D3D4;
- // TODO shadow?
+ // background-color: $white;
+ // TODO REMOVED: use _tc-inputs !!!!
}
@mixin horizontal-scroll {
@@ -227,20 +307,22 @@
background-repeat: no-repeat;
}
+
+// TODO: Reafactor those as $variables; you can also build a mixin to pass a parameter;
@mixin develop-icon-outline {
- background-image: url(/images/ico-track-develop-outline.svg);
+ background-image: url(/images/ico-track-develop.svg);
}
@mixin design-icon-outline {
- background-image: url(/images/ico-track-design-outline.svg);
+ background-image: url(/images/ico-track-design.svg);
}
@mixin data-icon-outline {
- background-image: url(/images/ico-track-data-outline.svg);
+ background-image: url(/images/ico-track-data.svg);
}
@mixin copilot-icon-outline {
- background-image: url(/images/ico-track-co_pilot-outline.svg);
+ background-image: url(/images/ico-track-copilot.svg);
}
// UI REFRESH STYLES
@@ -258,50 +340,60 @@
}
@mixin ui-h1 {
- @include source-sans-light;
font-size: 46px;
}
+
+// TODO: Cleanup
@mixin ui-form-field {
- height: 40px;
- width: 300px;
- padding: 0;
- padding-left: 15px;
- background-color: $gray-lightest;
- @include source-sans-regular;
- font-size: 16px;
- color: #231F20;
+ // height: 40px;
+ // width: 300px;
+ // padding: 0;
+ // padding-left: 15px;
+ // background-color: $gray-lightest;
+ // @include source-sans-regular;
+ // font-size: 16px;
+ // color: #231F20;
+ // TODO REMOVED: use _tc-inputs !!!!
}
@mixin ui-form-placeholder {
- ::-webkit-input-placeholder {
- color: #B7B7B7;
- }
- ::-moz-placeholder { /* Firefox 19+ */
- color: #B7B7B7;
- }
- :-ms-input-placeholder {
- color: #B7B7B7;
- }
- :-moz-placeholder { /* Firefox 18- */
- color: #B7B7B7;
- }
+ // ::-webkit-input-placeholder {
+ // color: #B7B7B7;
+ // }
+ // ::-moz-placeholder { /* Firefox 19+ */
+ // color: #B7B7B7;
+ // }
+ // :-ms-input-placeholder {
+ // color: #B7B7B7;
+ // }
+ // :-moz-placeholder { /* Firefox 18- */
+ // color: #B7B7B7;
+ // }
+ // TODO REMOVED: use _tc-inputs !!!!
}
@mixin community-form-placeholder {
- ::-webkit-input-placeholder {
- color: #ADADB7;
- }
- ::-moz-placeholder { /* Firefox 19+ */
- color: #ADADB7;
- }
- :-ms-input-placeholder {
- color: #ADADB7;
- }
- :-moz-placeholder { /* Firefox 18- */
- color: #ADADB7;
- }
-}
+ // ::-webkit-input-placeholder {
+ // color: #ADADB7;
+ // }
+ // ::-moz-placeholder { /* Firefox 19+ */
+ // color: #ADADB7;
+ // }
+ // :-ms-input-placeholder {
+ // color: #ADADB7;
+ // }
+ // :-moz-placeholder { /* Firefox 18- */
+ // color: #ADADB7;
+ // }
+ // TODO REMOVED: use _tc-inputs !!!!
+}
+
+
+
+// OLD MIXINS
+// ----------------------------------------------------------------------------
+// We have to review those;
@mixin ui-enabled-button {
background-color: $ui-enabled-button-blue;
diff --git a/assets/css/partials/_tc-typography.scss b/assets/css/partials/_tc-typography.scss
index 784d50245..918d8d997 100644
--- a/assets/css/partials/_tc-typography.scss
+++ b/assets/css/partials/_tc-typography.scss
@@ -1,344 +1,54 @@
-// h1, h2, h3, h4, h5, h6 {
-// text-transform: uppercase;
-// }
-
-// h1 {
-// font-size: 40px;
-// }
-
-// h2 {
-// font-size: 30px;
-// }
-
-// h3 {
-// font-size: 22px;
-// }
-
-// h4 {
-// font-size: 18px;
-// }
-
-// h5 {
-// font-size: 16px;
-// }
-
-// h6 {
-// font-size: 16px;
-// }
-
-// p {
-// font-size: 120px;
-// }
-
-
// FONT STACK
-// All the fonts we use, have to clean them up!
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-black-webfont.eot');
- src: url('/fonts/sofiapro-black-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-black-webfont.woff') format('woff'),
- url('/fonts/sofiapro-black-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-black-webfont.svg#webfont') format('svg');
- font-weight: 800;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-black-italic-webfont.eot');
- src: url('/fonts/sofiapro-black-italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-black-italic-webfont.woff') format('woff'),
- url('/fonts/sofiapro-black-italic-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-black-italic-webfont.svg#webfont') format('svg');
- font-weight: 800;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-bold-webfont.eot');
- src: url('/fonts/sofiapro-bold-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-bold-webfont.woff') format('woff'),
- url('/fonts/sofiapro-bold-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-bold-webfont.svg#webfont') format('svg');
- font-weight: bold;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-bold-italic-webfont.eot');
- src: url('/fonts/sofiapro-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-bold-italic-webfont.woff') format('woff'),
- url('/fonts/sofiapro-bold-italic-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-bold-italic-webfont.svg#webfont') format('svg');
- font-weight: bold;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-semibold-webfont.eot');
- src: url('/fonts/sofiapro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-semibold-webfont.woff') format('woff'),
- url('/fonts/sofiapro-semibold-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-semibold-webfont.svg#webfont') format('svg');
- font-weight: 600;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-semibold-italic-webfont.eot');
- src: url('/fonts/sofiapro-semibold-italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-semibold-italic-webfont.woff') format('woff'),
- url('/fonts/sofiapro-semibold-italic-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-semibold-italic-webfont.svg#webfont') format('svg');
- font-weight: 600;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-medium-webfont.eot');
- src: url('/fonts/sofiapro-medium-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-medium-webfont.woff') format('woff'),
- url('/fonts/sofiapro-medium-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-medium-webfont.svg#webfont') format('svg');
- font-weight: 500;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-medium-italic.eot');
- src: url('/fonts/sofiapro-medium-italic.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-medium-italic.woff') format('woff'),
- url('/fonts/sofiapro-medium-italic.ttf') format('truetype'),
- url('/fonts/sofiapro-medium-italic.svg#webfont') format('svg');
- font-style: italic;
- font-weight: 500;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-regular-webfont.eot');
- src: url('/fonts/sofiapro-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-regular-webfont.woff') format('woff'),
- url('/fonts/sofiapro-regular-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-regular-webfont.svg#webfont') format('svg');
- font-weight: 400;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-regular-webfont.eot');
- src: url('/fonts/sofiapro-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-regular-webfont.woff') format('woff'),
- url('/fonts/sofiapro-regular-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-regular-webfont.svg#webfont') format('svg');
- font-weight: 400;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-light-webfont.eot');
- src: url('/fonts/sofiapro-light-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-light-webfont.woff') format('woff'),
- url('/fonts/sofiapro-light-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-light-webfont.svg#webfont') format('svg');
- font-weight: 300;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-light-italic-webfont.eot');
- src: url('/fonts/sofiapro-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-light-italic-webfont.woff') format('woff'),
- url('/fonts/sofiapro-light-italic-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-light-italic-webfont.svg#webfont') format('svg');
- font-weight: 300;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-extralight-webfont.eot');
- src: url('/fonts/sofiapro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-extralight-webfont.woff') format('woff'),
- url('/fonts/sofiapro-extralight-webfont.svg#webfont') format('svg');
- font-weight: 200;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-extralight-italic-webfont.eot');
- src: url('/fonts/sofiapro-extralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-extralight-italic-webfont.woff') format('woff'),
- url('/fonts/sofiapro-extralight-italic-webfont.svg#webfont') format('svg');
- font-weight: 200;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-ultralight-webfont.eot');
- src: url('/fonts/sofiapro-ultralight-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-ultralight-webfont.woff') format('woff'),
- url('/fonts/sofiapro-ultralight-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-ultralight-webfont.svg#webfont') format('svg');
- font-weight: 100;
-}
-
-@font-face {
- font-family: 'Sofia Pro';
- src: url('/fonts/sofiapro-ultralight-italic-webfont.eot');
- src: url('/fonts/sofiapro-ultralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sofiapro-ultralight-italic-webfont.woff') format('woff'),
- url('/fonts/sofiapro-ultralight-italic-webfont.ttf') format('truetype'),
- url('/fonts/sofiapro-ultralight-italic-webfont.svg#webfont') format('svg');
- font-weight: 100;
- font-style: italic;
-}
-
-
-// Merriweather Sans
-// Converted at www.fontsqirrel.com
-
-@font-face {
- font-family: 'Merriweather Sans';
- src: url('/fonts/merriweather-sans/../fonts/merriweather-sans/merriweathersans-bold-webfont.eot');
- src: url('/fonts/merriweather-sans/merriweathersans-bold-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/merriweather-sans/merriweathersans-bold-webfont.woff2') format('woff2'),
- url('/fonts/merriweather-sans/merriweathersans-bold-webfont.woff') format('woff'),
- url('/fonts/merriweather-sans/merriweathersans-bold-webfont.ttf') format('truetype'),
- url('/fonts/merriweather-sans/merriweathersans-bold-webfont.svg#merriweather_sansbold') format('svg');
- font-weight: 700;
- font-style: normal;
-
-}
-
-
-@font-face {
- font-family: 'Merriweather Sans';
- src: url('/fonts/merriweather-sans/merriweathersans-bolditalic-webfont.eot');
- src: url('/fonts/merriweather-sans/merriweathersans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/merriweather-sans/merriweathersans-bolditalic-webfont.woff2') format('woff2'),
- url('/fonts/merriweather-sans/merriweathersans-bolditalic-webfont.woff') format('woff'),
- url('/fonts/merriweather-sans/merriweathersans-bolditalic-webfont.ttf') format('truetype'),
- url('/fonts/merriweather-sans/merriweathersans-bolditalic-webfont.svg#merriweather_sansbold_italic') format('svg');
- font-weight: 700;
- font-style: italic;
-
-}
-
-
-@font-face {
- font-family: 'Merriweather Sans';
- src: url('/fonts/merriweather-sans/merriweathersans-regular-webfont.eot');
- src: url('/fonts/merriweather-sans/merriweathersans-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/merriweather-sans/merriweathersans-regular-webfont.woff2') format('woff2'),
- url('/fonts/merriweather-sans/merriweathersans-regular-webfont.woff') format('woff'),
- url('/fonts/merriweather-sans/merriweathersans-regular-webfont.ttf') format('truetype'),
- url('/fonts/merriweather-sans/merriweathersans-regular-webfont.svg#merriweather_sansregular') format('svg');
- font-weight: 400;
- font-style: normal;
-
-}
-
-
-@font-face {
- font-family: 'Merriweather Sans';
- src: url('/fonts/merriweather-sans/merriweathersans-italic-webfont.eot');
- src: url('/fonts/merriweather-sans/merriweathersans-italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/merriweather-sans/merriweathersans-italic-webfont.woff2') format('woff2'),
- url('/fonts/merriweather-sans/merriweathersans-italic-webfont.woff') format('woff'),
- url('/fonts/merriweather-sans/merriweathersans-italic-webfont.ttf') format('truetype'),
- url('/fonts/merriweather-sans/merriweathersans-italic-webfont.svg#merriweather_sansitalic') format('svg');
- font-weight: 400;
- font-style: italic;
-
-}
-
-
-@font-face {
- font-family: 'Merriweather Sans';
- src: url('/fonts/merriweather-sans/merriweathersans-light-webfont.eot');
- src: url('/fonts/merriweather-sans/merriweathersans-light-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/merriweather-sans/merriweathersans-light-webfont.woff2') format('woff2'),
- url('/fonts/merriweather-sans/merriweathersans-light-webfont.woff') format('woff'),
- url('/fonts/merriweather-sans/merriweathersans-light-webfont.ttf') format('truetype'),
- url('/fonts/merriweather-sans/merriweathersans-light-webfont.svg#merriweather_sansbook') format('svg');
- font-weight: 300;
- font-style: normal;
-
-}
-
-
-@font-face {
- font-family: 'Merriweather Sans';
- src: url('/fonts/merriweather-sans/merriweathersans-lightitalic-webfont.eot');
- src: url('/fonts/merriweather-sans/merriweathersans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/merriweather-sans/merriweathersans-lightitalic-webfont.woff2') format('woff2'),
- url('/fonts/merriweather-sans/merriweathersans-lightitalic-webfont.woff') format('woff'),
- url('/fonts/merriweather-sans/merriweathersans-lightitalic-webfont.ttf') format('truetype'),
- url('/fonts/merriweather-sans/merriweathersans-lightitalic-webfont.svg#merriweather_sansbookitalic') format('svg');
- font-weight: 300;
- font-style: italic;
-
-}
-
-
-
-/********** SOURCE SANS PRO **********/
-// We are cleaning this out. Keep here for the time being though;
-
-@font-face {
- font-family: 'Source Sans Pro';
- src: url('/fonts/sourcesanspro/SourceSansPro/SourceSansPro-Light-webfont.eot');
- src: url('/fonts/sourcesanspro/SourceSansPro/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sourcesanspro/SourceSansPro/SourceSansPro-Light-webfont.woff') format('woff'),
- url('/fonts/sourcesanspro/SourceSansPro/SourceSansPro-Light-webfont.ttf') format('truetype'),
- url('/fonts/sourcesanspro/SourceSansPro/SourceSansPro-Light-webfont.svg#webfont') format('svg');
- font-weight: 300;
-}
-
-@font-face {
- font-family: 'Source Sans Pro';
- src: url('/fonts/sourcesanspro/SourceSansPro-Regular-webfont.eot');
- src: url('/fonts/sourcesanspro/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sourcesanspro/SourceSansPro-Regular-webfont.woff') format('woff'),
- url('/fonts/sourcesanspro/SourceSansPro-Regular-webfont.ttf') format('truetype'),
- url('/fonts/sourcesanspro/SourceSansPro-Regular-webfont.svg#webfont') format('svg');
- font-weight: normal;
-}
-
-@font-face {
- font-family: 'Source Sans Pro';
- src: url('/fonts/sourcesanspro/SourceSansPro-It-webfont.eot');
- src: url('/fonts/sourcesanspro/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sourcesanspro/SourceSansPro-It-webfont.woff') format('woff'),
- url('/fonts/sourcesanspro/SourceSansPro-It-webfont.ttf') format('truetype'),
- url('/fonts/sourcesanspro/SourceSansPro-It-webfont.svg#webfont') format('svg');
- font-weight: normal;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'Source Sans Pro';
- src: url('/fonts/sourcesanspro/SourceSansPro-Semibold-webfont.eot');
- src: url('/fonts/sourcesanspro/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sourcesanspro/SourceSansPro-Semibold-webfont.woff') format('woff'),
- url('/fonts/sourcesanspro/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
- url('/fonts/sourcesanspro/SourceSansPro-Semibold-webfont.svg#webfont') format('svg');
- font-weight: 600;
-}
-
-@font-face {
- font-family: 'Source Sans Pro';
- src: url('/fonts/sourcesanspro/SourceSansPro-Bold-webfont.eot');
- src: url('/fonts/sourcesanspro/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
- url('/fonts/sourcesanspro/SourceSansPro-Bold-webfont.woff') format('woff'),
- url('/fonts/sourcesanspro/SourceSansPro-Bold-webfont.ttf') format('truetype'),
- url('/fonts/sourcesanspro/SourceSansPro-Bold-webfont.svg#webfont') format('svg');
- font-weight: 700;
-}
\ No newline at end of file
+// --------------------------------------------------------------------------------------------
+// Use the mixin to include fonts. The power of Sass to the boring CSS repeat.
+// DON'T REPEAT YOURSELF!
+
+@mixin font-family($font-name, $font-weight, $font-style, $font-url, $font-file) {
+ @font-face {
+ font-family: '#{$font-name}';
+ src: url('#{$font-url}#{$font-file}-webfont.eot');
+ src: url('#{$font-url}#{$font-file}-webfont.eot?#iefix') format('embedded-opentype'),
+ url('#{$font-url}#{$font-file}-webfont.woff2') format('woff2'),
+ url('#{$font-url}#{$font-file}-webfont.woff') format('woff'),
+ url('#{$font-url}#{$font-file}-webfont.ttf') format('truetype'),
+ url('#{$font-url}-webfont.svg##{$font-file}') format('svg');
+ font-weight: $font-weight;
+ font-style: $font-style;
+
+ }
+}
+
+
+// FONT WEIGHTS
+// --------------------------------------------------------------------------------------------
+// Use the numerical value instead of the weight name;
+//
+// 100 Thin (Hairline)
+// 200 Extra Light (Ultra Light)
+// 300 Light
+// 400 Normal
+// 500 Medium
+// 600 Semi Bold (Demi Bold)
+// 700 Bold
+// 800 Extra Bold (Ultra Bold)
+// 900 Black (Heavy)
+
+ // Sofia Pro
+@include font-family('Sofia Pro', 700, normal, '/fonts/sofiapro/', 'sofiapro-bold'); // Bold
+@include font-family('Sofia Pro', 700, italic, '/fonts/sofiapro/', 'sofiapro-bold-italic'); // Bold Italic
+@include font-family('Sofia Pro', 600, normal, '/fonts/sofiapro/', 'sofiapro-semibold'); // Semibold
+@include font-family('Sofia Pro', 600, italic, '/fonts/sofiapro/', 'sofiapro-semibold-italic'); // Semibold Italic
+@include font-family('Sofia Pro', 500, normal, '/fonts/sofiapro/', 'sofiapro-medium'); // Medium
+@include font-family('Sofia Pro', 500, italic, '/fonts/sofiapro/', 'sofiapro-medium-italic'); // Medium Italic
+@include font-family('Sofia Pro', 400, normal, '/fonts/sofiapro/', 'sofiapro-regular'); // Regular
+@include font-family('Sofia Pro', 400, italic, '/fonts/sofiapro/', 'sofiapro-regular-italic'); // Italic
+@include font-family('Sofia Pro', 300, normal, '/fonts/sofiapro/', 'sofiapro-light'); // Light
+@include font-family('Sofia Pro', 300, italic, '/fonts/sofiapro/', 'sofiapro-light-italic'); // Light Italic
+
+ // Merriweather Sans
+@include font-family('Merriweather Sans', 700, normal, '/fonts/merriweather-sans/', 'merriweathersans-bold'); // Bold
+@include font-family('Merriweather Sans', 700, italic, '/fonts/merriweather-sans/', 'merriweathersans-bolditalic'); // Bold Italic
+@include font-family('Merriweather Sans', 400, normal, '/fonts/merriweather-sans/', 'merriweathersans-regular'); // Regular
+@include font-family('Merriweather Sans', 400, italic, '/fonts/merriweather-sans/', 'merriweathersans-italic'); // Italic
+@include font-family('Merriweather Sans', 300, normal, '/fonts/merriweather-sans/', 'merriweathersans-light'); // Light
+@include font-family('Merriweather Sans', 300, italic, '/fonts/merriweather-sans/', 'merriweathersans-lightitalic'); // Light Italic
diff --git a/assets/css/partials/_tc-variables.scss b/assets/css/partials/_tc-variables.scss
index 874e37f08..0d4bb7547 100644
--- a/assets/css/partials/_tc-variables.scss
+++ b/assets/css/partials/_tc-variables.scss
@@ -2,14 +2,15 @@
//
// Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
-$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
-$font-family-base: $font-family-sans-serif !default;
+$text-rendering: auto;
+$fonts-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$fonts-family-serif: Georgia, "Times New Roman", Times, serif !default;
+$fonts-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$fonts-family-base: $fonts-family-sans-serif !default;
// The label is showing in many places; particulary on data/stats
-$label-medium: 14px;
-$label-small: 11.5px;
$label-xs: 10px;
+$label-small: 12px;
+$label-medium: 14px;
$label-large: 16px;
diff --git a/assets/css/peer-review/completed.scss b/assets/css/peer-review/completed.scss
index d41ab8b31..95c27f351 100644
--- a/assets/css/peer-review/completed.scss
+++ b/assets/css/peer-review/completed.scss
@@ -5,7 +5,7 @@
form .scorecard {
.answer {
- @include source-sans-italic;
+ @include font-with-weight('Merriweather Sans');
margin: 25px 0;
padding-left: 30px;
}
diff --git a/assets/css/peer-review/edit.scss b/assets/css/peer-review/edit.scss
index 74b778a3e..10f586834 100644
--- a/assets/css/peer-review/edit.scss
+++ b/assets/css/peer-review/edit.scss
@@ -39,7 +39,7 @@
margin-top: 15px;
padding: 5px 17px;
border: 0;
- @include source-sans-light;
+ @include font-with-weight('Merriweather Sans');
font-size: 15px;
@media only screen and (max-width: 380px) {
padding-right: 10px;
diff --git a/assets/css/peer-review/peer-review.scss b/assets/css/peer-review/peer-review.scss
index ccc46a60e..3a0e9f309 100644
--- a/assets/css/peer-review/peer-review.scss
+++ b/assets/css/peer-review/peer-review.scss
@@ -21,7 +21,7 @@
width: 8px;
}
p {
- @include source-sans-light;
+ @include font-with-weight('Merriweather Sans', 300);
font-size: 18px;
}
@@ -59,7 +59,7 @@
h1 {
@include ellipsis;
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
display: inline-block;
vertical-align: middle;
font-size: 38px;
@@ -71,7 +71,7 @@
}
table.review-info {
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
margin-top: 15px;
margin-left: 5px;
@@ -80,7 +80,7 @@
padding-bottom: 5px;
&.info {
- @include source-sans-semi-bold;
+ @include font-with-weight('Merriweather Sans');
font-size: 16px;
width: 195px;
@media only screen and (max-width: 380px) {
@@ -107,14 +107,14 @@
background-color: $white;
.scorecard {
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
color: $dark-gray;
h5.description {
border-top: 1px solid $review-border;
border-bottom: 1px solid $review-border;
background-color: $table-rows-gray;
- @include source-sans-semi-bold;
+ @include font-with-weight('Merriweather Sans', 500);
padding: 12px 0 12px 20px;
margin-bottom: 32px;
line-height: 1.2;
diff --git a/assets/css/peer-review/reviewStatus.scss b/assets/css/peer-review/reviewStatus.scss
index 9c00491d6..2c93dfa37 100644
--- a/assets/css/peer-review/reviewStatus.scss
+++ b/assets/css/peer-review/reviewStatus.scss
@@ -3,7 +3,7 @@
.review-status-container {
h1 {
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
font-size: 38px;
color: $light-black;
margin-top: 11px;
@@ -17,7 +17,7 @@
.help-center {
margin-top: 13px;
- @include source-sans-light;
+ @include font-with-weight('Merriweather Sans');
font-size: 15px;
color: $light-gray;
@media only screen and (max-width: 1020px) {
@@ -39,7 +39,7 @@
hgroup {
margin-top: 38px;
- @include source-sans-light;
+ @include font-with-weight('Merriweather Sans');
h2 {
font-size: 24px;
@@ -70,7 +70,7 @@
width: 100%;
color: $dark-gray;
text-align: center;
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
thead {
background-color: $table-head-gray;
@@ -116,7 +116,7 @@
border-bottom: 4px solid $tc-btn-dark-orange;
border-radius: 4px;
color: $white;
- @include source-sans-light;
+ @include font-with-weight;
font-size: 19px;
text-transform: uppercase;
float: right;
diff --git a/assets/css/settings/account-info.scss b/assets/css/settings/account-info.scss
index 51a7862d3..00e73faf4 100644
--- a/assets/css/settings/account-info.scss
+++ b/assets/css/settings/account-info.scss
@@ -2,7 +2,7 @@
@import '../partials/combined';
.account-info-container {
- padding-bottom: 75px;
+ // padding-bottom: 75px;
.account-info-error {
color: #ef3a3a;
@@ -16,13 +16,19 @@
.section-fields {
display: flex;
flex-direction: column;
+
.form-field {
+
&.grey {
background-color: #fcfcfc;
}
}
+
.form-label {
- margin-top: 30px;
+ margin-top: 10px;
+ width: 100%;
+
+
&.username {
margin-top: 0px;
}
@@ -36,8 +42,11 @@
display: flex;
flex-direction: column;
align-items: flex-start;
+
.form-label {
- margin-top: 30px;
+ width: 100%;
+ margin-top: 10px;
+
&.first {
margin-top: 0;
}
@@ -48,7 +57,7 @@
.address {
.section-fields {
.form-label {
- margin-top: 30px;
+ margin-top: 10px;
&.address {
margin-top: 0px;
}
@@ -67,7 +76,7 @@
width: 630px;
.address-fields {
- @media only screen and (min-width: 768px) {
+ @include media-min(768) {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -96,9 +105,8 @@
}
}
.save-section {
- width: 95%;
- margin-left: auto;
- margin-right: auto;
+ width: 100%;
+ margin: 0 auto;
background-color: #fcfcfc;
border-top: 1px solid #f0f0f0;
display: flex;
@@ -114,18 +122,37 @@
}
}
-@media only screen and (min-width: 760px) {
- .account-info-container {
- .section-fields {
+.validation-bar,
+.angucomplete-holder {
+ width: 100%;
+ display: block;
+
+ & input[type='text'],
+ & input[type='password'] {
+ width: 100% !important;
+ }
+}
+
+.address.settings-section {
+ border-bottom: none;
+}
+
+@include media-min(768px) {
+ .account-info-container .section-fields {
margin-top: 0px;
- }
- .section-info {
- h2 {
- font-size: 18px;
- }
- .description {
- margin-top: 10px;
- }
- }
+ }
+
+ // size the main container to accomodate for the tooltips
+ // HaCKY!
+ .account-info-container .credentials .section-fields,
+ .account-info-container .name .section-fields,
+ .account-info-container .address .section-fields {
+ min-width: 400px;
+ width: 100%;
+ padding-right: 340px;
+ }
+
+ .tips {
+ left: 105%;
}
}
diff --git a/assets/css/settings/edit-profile.scss b/assets/css/settings/edit-profile.scss
index fdbfba1e0..48083432a 100644
--- a/assets/css/settings/edit-profile.scss
+++ b/assets/css/settings/edit-profile.scss
@@ -137,12 +137,6 @@
position: relative;
}
- .form-errors {
- position: absolute;
- top: 70px;
- left: 3px;
- }
-
.external-account-container {
display: flex;
flex-direction: row;
@@ -156,3 +150,7 @@
margin-bottom: 30px;
}
}
+
+.links.settings-section {
+ border-bottom: none;
+}
diff --git a/assets/css/settings/settings.scss b/assets/css/settings/settings.scss
index e0b994108..3e4798a18 100644
--- a/assets/css/settings/settings.scss
+++ b/assets/css/settings/settings.scss
@@ -1,5 +1,8 @@
@import 'topcoder-includes';
@import '../partials/combined';
+
+
+
.settings-header {
@include module-full-width;
background-color: $white;
@@ -20,6 +23,7 @@
@media only screen and (min-width: 900px) {
padding: 40px 50px 33px;
}
+
h1 {
margin-bottom: 10px;
@include sofia-pro-bold;
@@ -37,27 +41,19 @@
}
.settings-container {
+ // Autocomplete
.angucomplete-dropdown {
width: 100%;
+ color: $gray-darkest;
+ text-align: left;
+ box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.4);
}
.angucomplete-selected-row {
- background-color: #097DCE;
- }
- input, textarea {
- font-size: 15px;
- font-family: 'Merriweather Sans';
- font-weight: 400;
- padding-left: 15px;
- }
- textarea {
- padding-left: 10px;
- &:hover, &:focus {
- padding-left: 10px;
- }
- }
- input:focus, textarea:focus {
- outline: 1px solid #4cb5ff;
+ background-color: $primary-lighter;
+ color: $gray-darkest;
}
+ // Autocomplete end
+
@include module-l;
margin: 30px auto 0;
@@ -120,197 +116,196 @@
}
}
+
+// Main Container
+.edit-profile-container,
+.account-info-container,
+.prefferences-container {
+ padding: 0 60px 30px;
+}
+
+
// Common element stylings
- @include ui-form-placeholder;
- input:not([type="checkbox"]) {
- @include ui-form-field;
- background-color: white;
- height: 38px;
- }
- .settings-section {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 30px;
- margin-bottom: 20px;
- padding-bottom: 20px;
- @media only screen and (min-width: 768px) {
- flex-direction: row;
- padding-bottom: 40px;
- }
- border-bottom: 1px solid;
- border-color: #F0F0F0;
- width: 95%;
- margin-left: auto;
- margin-right: auto;
- .section-info {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-self: flex-start;
- @media only screen and (min-width: 768px) {
- width: 270px;
- margin-right: 33px;
- margin-left: 30px;
- }
+.settings-section {
+ display: flex;
+ box-sizing: border-box;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ margin: 20px auto;
+ @media only screen and (min-width: 768px) {
+ flex-direction: row;
+ margin: 30px auto 0;
+ padding-bottom: 30px;
+
+ .section-info {
h2 {
- text-transform: uppercase;
- font-family: 'Sofia Pro';
- font-weight: 500;
- font-size: 16px;
+ font-size: 18px;
}
-
.description {
- font-size: 13px;
- line-height: 20px;
- color: #A3A3AE;
- // @include source-sans-italic;
- @include label-description;
- margin-top: 5px;
+ margin-top: 10px;
}
}
- .section-fields {
- display: flex;
- flex-direction: column;
- @media only screen and (min-width: 768px) {
- border-left: 6px solid #F6F6F6;
- padding-left: 60px;
- width: 65%;
+
+ &.skills {
+ input {
+ width: 100%;
}
- .form-label {
- @include sofia-pro-regular;
- font-size: 12px;
- color: black;
- text-transform: uppercase;
- margin-bottom: 5px;
- margin-top: 5px;
- width: 300px;
-
- .mandatory {
- text-transform: none;
- color: #0096ff;
- float: right;
- }
+ .section-fields {
+ max-width: 768px;
+ }
+ }
+ }
- .char-count {
- font-family: 'Source Sans Pro';
- float: right;
- }
+ border-bottom: 1px solid;
+ border-color: $gray-light;
- .grey {
- color: #a3a3ae;
- }
+
+ .section-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-self: flex-start;
+ @media only screen and (min-width: 768px) {
+ width: 270px;
+ margin-right: 30px;
+ }
+
+ h2 {
+ text-transform: uppercase;
+ font-family: 'Sofia Pro';
+ font-weight: 500;
+ font-size: 16px;
+ }
+
+ .description {
+ font-size: 13px;
+ line-height: 20px;
+ color: $accent-gray;
+ @include font-with-weight('Merriweather Sans');
+ font-style: italic;
+ @include label-description;
+ margin-top: 5px;
+ }
+ }
+ .section-fields {
+ display: flex;
+ flex-direction: column;
+ @media only screen and (min-width: 768px) {
+ border-left: 6px solid #F6F6F6;
+ padding-left: 60px;
+ width: 65%;
+ }
+
+ .form-field {
+ @include form-field;
+ @include ui-form-placeholder;
+ background: white;
+ color: black;
+ &:disabled {
+ color: #B7B7B7;
}
- .form-field {
- @include form-field;
- @include ui-form-placeholder;
- background: white;
- color: black;
- &:disabled {
- color: #B7B7B7;
+ }
+ .form-field-focused {
+ }
+ .image {
+ .edit-image {
+ img.profile-circle {
+ margin-top: 10px;
}
- }
- .form-field-focused {
- }
- .image {
- .edit-image {
- img.profile-circle {
- margin-top: 10px;
- }
- .buttons {
- padding-top: 20px;
- .file-upload {
- position: relative;
- display: block;
- overflow: hidden;
- margin: 10px;
- margin-left: 0;
- margin-top: 20px;
- width: 120px;
- input {
- position: absolute;
- top: 0;
- right: 0;
- margin: 0;
- padding: 0;
- font-size: 20px;
- cursor: pointer;
- opacity: 0;
- filter: alpha(opacity=0);
- }
+ .buttons {
+ padding-top: 20px;
+ .file-upload {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ margin: 10px;
+ margin-left: 0;
+ margin-top: 20px;
+ width: 120px;
+ input {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0;
+ padding: 0;
+ font-size: 20px;
+ cursor: pointer;
+ opacity: 0;
+ filter: alpha(opacity=0);
}
- .file-delete {
- button {
- width: 80px;
- }
+ }
+ .file-delete {
+ button {
+ width: 80px;
}
}
}
}
- .country {
- margin-top: 30px;
-
- input {
- background-color: white;
- width: 100%;
- }
+ }
+ .country {
+ margin-top: 30px;
- span.error-message {
- color: #EF3A3A;
- @include sofia-pro-regular;
- font-size: 10px;
- text-transform: uppercase;
- }
+ input {
+ background-color: white;
+ width: 100%;
+ }
+ span.error-message {
+ color: #EF3A3A;
+ @include sofia-pro-regular;
+ font-size: 10px;
+ text-transform: uppercase;
}
- .bio {
- margin-top: 30px;
+ }
- textarea {
- background: white;
- width: 100%;
- height: 115px;
- }
+ .bio {
+ margin-top: 30px;
+
+ textarea {
+ background: white;
+ width: 100%;
+ height: 115px;
}
}
}
- .tracks {
- padding-bottom: 0px;
- border-bottom: none;
-
- .section-fields {
- margin-top: 40px;
- }
+}
+.tracks {
+ border-bottom: none;
+}
+.save-section {
+
+ background-color: #fcfcfc;
+ border-top: 1px solid #f0f0f0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ button {
+ margin-bottom: 15px;
+ margin-top: 15px;
+ width: 120px;
}
- .save-section {
- width: 95%;
- margin-left: auto;
- margin-right: auto;
- background-color: #fcfcfc;
- border-top: 1px solid #f0f0f0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- button {
- margin-bottom: 15px;
- margin-top: 15px;
- width: 120px;
- }
- }
+}
+
.skills {
border-top: 1px solid $gray-light;
+ padding-top: 20px;
+ @media screen and (min-width: 768) {
+ padding-top: 30px;
+ }
+
.section-fields {
- margin-top: 20px;
display: flex;
flex-direction: column;
- .field-label, angucomplete-alt {
+ .field-label,
+ angucomplete-alt {
align-self: flex-start;
}
@@ -320,15 +315,7 @@
text-transform: uppercase;
}
- angucomplete-alt {
- width: 100%;
- margin-top: 6px;
-
- input {
- @include source-sans-italic;
- color: #7f7f7f;
- }
- }
+
.list {
display: flex;
@@ -385,7 +372,7 @@
.tab-title {
margin-bottom: 35px;
font-size: 32px;
- @include source-sans-light;
+ @include font-with-weight('Sofia Pro', 300);
color: $ui-light-gray;
@media only screen and (min-width: 768px) {
margin-top: 50px;
@@ -410,92 +397,15 @@
}
}
-.onoffswitch {
- position: relative; width: 60px;
- -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
-}
-.onoffswitch-checkbox {
- display: none;
-}
-.onoffswitch-label {
- display: block; overflow: hidden; cursor: pointer;
- border-radius: 36px;
-}
-.onoffswitch-inner {
- display: block; width: 200%; margin-left: -100%;
- transition: margin 0.3s ease-in 0s;
-}
-.onoffswitch-inner:before, .onoffswitch-inner:after {
- display: block; float: left; width: 50%; height: 26px; padding: 0; line-height: 26px;
- font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
- box-sizing: border-box;
-}
-.onoffswitch-inner:before {
- content: "";
- padding-left: 10px;
- background-color: #0096ff;
- color: #0096ff;
-}
-.onoffswitch-inner:after {
- content: "";
- padding-right: 10px;
- background-color: #d1d3d4;
- color: #d1d3d4;
- text-align: right;
-}
-.onoffswitch-switch {
- display: block; width: 19px; margin: 3.5px;
- height: 19px;
- background: #FFFFFF;
- position: absolute; top: 0; bottom: 0;
- margin-top: 3.45px;
- right: 30px;
- border: none;
- border-radius: 36px;
- transition: all 0.3s ease-in 0s;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
- margin-left: 0;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
- right: 0px;
-}
-.settings-section {
- @media only screen and (min-width: 768px) {
- padding-top: 40px;
- padding-bottom: 40px;
- .section-fields {
- // Remove !important during refactor
- margin-top: 0px !important;
- }
- .section-info {
- h2 {
- font-size: 18px;
- }
- .description {
- margin-top: 10px;
- }
- }
- &.tracks {
- padding-bottom: 40px;
- .section-fields {
- margin-top: 40px;
- }
- }
- &.skills {
- input {
- width: 100%;
- }
- .section-fields {
- max-width: 768px;
- }
- }
- }
-}
+
.settings-container {
@media only screen and (min-width: 768px) {
.links {
+ & .external-link-list {
+ padding: 0;
+ }
+
.existing-links {
display: flex;
flex-direction: row;
diff --git a/assets/css/settings/update-password.scss b/assets/css/settings/update-password.scss
index 8d1206bac..5dae2f3ae 100644
--- a/assets/css/settings/update-password.scss
+++ b/assets/css/settings/update-password.scss
@@ -12,13 +12,6 @@
button {
width: 200px;
- text-transform: none;
- @include source-sans-light;
- font-size: 18px;
-
- &.enabled-button {
- @include ui-enabled-button;
- }
}
}
diff --git a/assets/css/skill-picker/skill-picker.scss b/assets/css/skill-picker/skill-picker.scss
index 694190850..51dce5c4e 100644
--- a/assets/css/skill-picker/skill-picker.scss
+++ b/assets/css/skill-picker/skill-picker.scss
@@ -27,7 +27,7 @@
margin-bottom: 25px;
font-size: 22px;
line-height: 32px;
- @include source-sans-light;
+ @include font-with-weight('Sofia Pro', 300);
color: $accent-gray;
}
@@ -40,7 +40,7 @@
padding-bottom: 10px;
}
>.description {
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
color: #A3A3AE;
font-size: 13px;
line-height: 18px;
@@ -65,7 +65,8 @@
padding-bottom: 10px;
}
.description {
- @include source-sans-italic;
+ @include font-with-weight('Merriweather Sans');
+ font-style: italic;
color: #A3A3AE;
font-size: 13px;
line-height: 20px;
@@ -117,7 +118,7 @@
background-color: $white;
border: none;
}
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
font-size: 14px;
padding: 5px;
color: $black;
diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss
index 0b8b98b74..ac94db5bb 100644
--- a/assets/css/topcoder.scss
+++ b/assets/css/topcoder.scss
@@ -3,15 +3,15 @@
@include glyphicons-halflings;
body {
- @include merriweather-sans-regular;
- background-color: $ui-page-gray;
+ @include font-with-weight('Merriweather Sans', 400);
+ background-color: $gray-lighter;
> svg {
display: none;
}
}
-// TODO move hidden and visible classes to ui kit
+// TODO move hidden and visible classes to ui helpers kit
.hidden {
visibility: hidden;
}
@@ -60,17 +60,6 @@ body {
}
}
-// Country dropdown styles
-.angucomplete-highlight {
- color: $black;
- font-weight: bold;
-}
-
-.angucomplete-dropdown {
- overflow-y: auto;
- max-height: 250px;
-}
-
// Section loading and form styles
.section-loading {
width: 100%;
@@ -92,117 +81,19 @@ body {
color: #ed5d5d;
}
-.validation-bar {
- position: relative;
-
- &:before {
- content: '';
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- height: 42px;
- width: 5px;
- }
-
- &.error-bar:before {
- display: block;
- background-color: #ed5d5d;
- }
- &.success-bar:before {
- display: block;
- background-color: #7ece95;
- }
-}
.form-input-error {
padding: 10px;
margin-bottom: 10px;
- background-color: #FFCCE1;
- border: 1px solid #FF99C2;
- color: #FF0066;
- @include sofia-pro-italic;
-}
-
-// Sidebar form field tips (e.g. username, email, password)
-.tips {
- position: absolute;
- width: 320px;
+ background-color: $error-lighter;
+ border: 1px solid $error-light;
+ color: $error;
text-align: left;
- top: 13px;
- @media only screen and (max-width: 915px) {
- position: initial;
- margin-left: 5px;
- width: 300px;
- }
-
- h3, p {
- margin-bottom: 10px;
- }
-
- h3 {
- @include source-sans-semi-bold;
- font-size: 18px;
- @media only screen and (max-width: 915px) {
- font-size: 15px;
- }
- }
-
- h3:before {
- font-family: 'FontAwesome';
- content: '\f053';
- display: inline-block;
- width: 20px;
- @media only screen and (max-width: 915px) {
- display: none;
- }
- }
-
- p {
- font-size: 14px;
- color: #808285;
- padding-left: 20px;
- line-height: 1.2;
- position: relative;
- }
- p:before {
- font-family: 'FontAwesome';
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 20px;
- }
-}
-
-.username-tips {
- left: 330px;
-}
-
-.email-tips {
- left: 330px;
-
- p:last-child {
- line-height: 1.5;
- }
+ font-size: 12px;
+ line-height: 20px;
}
-.password-tips {
- left: 330px;
-
- p:before {
- content: '\f05d';
- color: #7ece95;
- display: none;
- }
- .has-length-between-range:before,
- .has-letter:before,
- .has-symbol-or-number:before,
- .has-number:before {
- display: block;
- }
-}
@media (max-width: 767px) {
.form-errors {
@@ -211,6 +102,8 @@ body {
}
// Intro JS
+// -----------------------------------------------------------
+
.introjs-overlay {
background: rgba(239, 239, 239, 0.60);
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
@@ -222,7 +115,7 @@ body {
}
.introjs-tooltiptext {
- @include source-sans-regular;
+ @include font-with-weight('Merriweather Sans');
font-size: 14px;
line-height: 24px;
color: $gray-darker;
@@ -290,27 +183,304 @@ body {
}
}
-// UI KIT - INPUT ELEMENTS
+// Intro JS END
-input[type="text"],
-input[type="password"],
-toggle-password {
- height: 38px;
- background: #FFFFFF;
- border: 1px solid #B7B7B7;
- box-shadow: inset 0px 0px 2px 0px rgba(183,183,183,0.30);
- border-radius: 2px;
+// FORMS
+// ----------------------------------------------------------------------
+//
+// Form Labels
+
+.form-label {
+ @include sofia-pro-medium;
+ font-size: 12px;
+ color: $gray-darkest;
+ text-transform: uppercase;
+ margin-bottom: 5px;
+ margin-top: 5px;
+
+ .mandatory {
+ text-transform: none;
+ color: $primary-light;
+ float: right;
+ }
+
+ .char-count {
+ float: right;
+ font-size: 11px;
+ padding-right: 5px;
+ }
+
+ .grey {
+ color: $accent-gray;
+ }
+}
+
+.form-errors {
+ position: relative;
+ line-height: 22px;
+ //top: 70px;
+ //left: 3px;
}
-input {
- &[type='text']:focus,
- &[type='password']:focus {
- background: #FFFFFF;
- border: 1px solid #0096FF;
- box-shadow: inset 0px 0px 2px 1px rgba(133,203,255,0.60);
- border-radius: 2px;
+.form-errors {
+ text-align: left;
+
+ p {
+ margin: 2px 0 12px 5px;
}
+}
+// Error and success styles
+.validation-bar {
+ position: relative;
+
+ &:before {
+ content: '';
+ display: none;
+ position: absolute;
+ top: 0px;
+ left: 1px;
+ height: 38px;
+ width: 2px;
+ border-radius: 3px 0 0 3px;
+ }
+
+ &.error-bar:before {
+ display: block;
+ background-color: $error;
+ }
+
+ &.success-bar:before {
+ display: block;
+ background-color: $success;
+ }
}
+// FORM TIPS
+// ----------------------------------------------------------------------
+// probably structure needs to be redone
+
+$tips-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.2);
+$tips-background: $gray-lighter;
+
+// Tip conatiner
+.tips {
+ background-color: $tips-background;
+ border-radius: 4px;
+ padding: 20px;
+ z-index: 1000;
+ opacity: 1;
+ transition: all .1s ease-in-out;
+ padding-bottom: 20px;
+ @media screen and (min-width: 915px) {
+ position: absolute;
+ width: 320px;
+ text-align: left;
+ top: -10px;
+ box-shadow: $tips-shadow;
+ padding-bottom: 0;
+ }
+
+ // The tip container is hidden
+ &.ng-hide {
+ opacity: 0;
+ }
+
+ // Tip container arrow element
+ .arrow {
+ display: none;
+ @media screen and (min-width: 915px){
+ display: block;
+ position: absolute;
+ left: -24px;
+ top: 10px;
+ width: 24px;
+ height: 34px;
+ overflow: hidden;
+
+ &:after {
+ content: '';
+ position: absolute;
+ display: block;
+ top: 10px;
+ left: 18px;
+ width: 12px;
+ height: 12px;
+ background-color: $tips-background;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ box-shadow: $tips-shadow;
+ }
+ }
+ }
+
+ h3 {
+ @include sofia-pro-medium;
+ padding-bottom: 15px;
+ font-size: 14px;
+ @media only screen and (max-width: 915px) {
+ font-size: 16px;
+ }
+ }
+
+ p {
+ font-size: 13px;
+ color: $gray-darkest;
+ line-height: 1.3;
+ position: relative;
+ padding-bottom: 10px;
+ text-align: left;
+ }
+
+ p:before {
+ // font-family: 'FontAwesome';
+ @include sofia-pro-medium;
+ font-size: 14px;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 20px;
+ }
+}
+
+// Password tips show checkmark validation
+// TODO: refactor name to be context independent, like .validation-tips
+.password-tips {
+ p {
+ padding-left: 20px
+ }
+
+ p:before {
+ content: '\2713 ';
+ color: $success;
+ display: none;
+ }
+
+ .has-length-between-range:before,
+ .has-letter:before,
+ .has-symbol-or-number:before,
+ .has-number:before {
+ display: block;
+ }
+}
+
+
+// SWITCHES
+// ----------------------------------------------------------------------
+// TODO: Refactor
+
+// Switch parameters
+$switch-width: 44px;
+$switch-height: 24px;
+$switch-handle-offset: 3px;
+$switch-handle-size: $switch-height - (2 * $switch-handle-offset);
+$switch-active-color: $primary;
+$switch-inactive-color: $gray;
+
+@mixin switch-transition {
+ transition: all 0.15s ease-in-out;
+}
+
+// Parent container
+.onoffswitch {
+ position: relative;
+ width: $switch-width;
+ height: $switch-height;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select: none;
+ box-sizing: border-box;
+ border-radius: $switch-height;
+ background-color: $switch-inactive-color;
+ @include switch-transition;
+}
+
+.onoffswitch-checkbox {
+ display: none;
+}
+
+.onoffswitch-label {
+ display: block;
+ width: $switch-width;
+ overflow: hidden;
+ cursor: pointer;
+ border-radius: $switch-height;
+}
+
+.onoffswitch-inner {
+ display: block;
+ width: 200%;
+ margin-left: -100%;
+ @include switch-transition;
+}
+
+// Pseudo-elements that slide to create background of the switch; TODO: Remove those
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+ display: block;
+ float: left;
+ width: 50%;
+ height: $switch-height;
+ padding: 0;
+ line-height: $switch-height;
+ font-size: 15px;
+ color: white;
+ font-weight: bold;
+ box-sizing: border-box;
+}
+
+.onoffswitch-checkbox + .onoffswitch-label {
+ background-color: $switch-inactive-color;
+ @include switch-transition;
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label {
+ background-color: $switch-active-color;
+ & .onoffswitch-inner {
+ // margin-left: 0;
+ // background-color: $switch-active-color;
+ }
+
+ & .onoffswitch-switch {
+ right: 0;
+ }
+}
+
+
+// Switch is on
+.onoffswitch-inner:before {
+ content: "";
+ padding-left: 10px;
+ background-color: transparent; //$switch-active-color;
+ color: transparent;// $switch-active-color;
+}
+
+// switch is off
+.onoffswitch-inner:after {
+ content: "";
+ padding-right: 10px;
+ background-color: transparent; // $switch-inactive-color;
+ color: transparent; // $switch-inactive-color;
+ text-align: right;
+}
+
+// SWITCH HANDLE
+.onoffswitch-switch {
+ display: block;
+ background-color: $white;
+ color: $white;
+ width: $switch-handle-size;
+ height: $switch-handle-size;
+ background: $white;
+ position: absolute;
+ margin: $switch-handle-offset;
+ top: 0;
+ bottom: 0;
+ right: $switch-handle-offset + $switch-handle-size -1;
+ border: none;
+ border-radius: $switch-height;
+ @include switch-transition;
+}
diff --git a/assets/css/vendors/angucomplete.scss b/assets/css/vendors/angucomplete.scss
new file mode 100644
index 000000000..f135ef28c
--- /dev/null
+++ b/assets/css/vendors/angucomplete.scss
@@ -0,0 +1,75 @@
+@import 'topcoder-includes';
+@import '../partials/combined';
+
+
+// aNGucomplete overrides
+
+.angucomplete-holder {
+ position: relative;
+ width: 100%;
+}
+
+.angucomplete-dropdown {
+ width: 100%;
+ border-color: #ececec;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 2px;
+ width: 250px;
+ padding: 6px;
+ cursor: pointer;
+ z-index: 9999;
+ position: absolute;
+ /*top: 32px;
+ left: 0px;
+ */
+ margin-top: -6px;
+ background-color: #ffffff;
+}
+
+.angucomplete-searching {
+ color: #acacac;
+ font-size: 14px;
+}
+
+.angucomplete-description {
+ font-size: 14px;
+}
+
+.angucomplete-row {
+ padding: 5px;
+ color: #000000;
+ margin-bottom: 4px;
+ clear: both;
+}
+
+.angucomplete-selected-row {
+ background-color: $gray-light;
+ color: #ffffff;
+}
+
+.angucomplete-image-holder {
+ padding-top: 2px;
+ float: left;
+ margin-right: 10px;
+ margin-left: 5px;
+}
+
+.angucomplete-image {
+ height: 34px;
+ width: 34px;
+ border-radius: 50%;
+ border-color: #ececec;
+ border-style: solid;
+ border-width: 1px;
+}
+
+.angucomplete-image-default {
+ /* Add your own default image here
+ background-image: url('/assets/default.png');
+ */
+ background-position: center;
+ background-size: contain;
+ height: 34px;
+ width: 34px;
+}
\ No newline at end of file
diff --git a/assets/fonts/sofiapro-black-italic-webfont.eot b/assets/fonts/sofiapro-black-italic-webfont.eot
deleted file mode 100755
index 9bd8dcf84..000000000
Binary files a/assets/fonts/sofiapro-black-italic-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-black-italic-webfont.svg b/assets/fonts/sofiapro-black-italic-webfont.svg
deleted file mode 100755
index af81f69e4..000000000
--- a/assets/fonts/sofiapro-black-italic-webfont.svg
+++ /dev/null
@@ -1,1430 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/assets/fonts/sofiapro-black-italic-webfont.woff b/assets/fonts/sofiapro-black-italic-webfont.woff
deleted file mode 100755
index 87a6d0780..000000000
Binary files a/assets/fonts/sofiapro-black-italic-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-black-italic-webfont.woff2 b/assets/fonts/sofiapro-black-italic-webfont.woff2
deleted file mode 100755
index f668a9e29..000000000
Binary files a/assets/fonts/sofiapro-black-italic-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-black-webfont.eot b/assets/fonts/sofiapro-black-webfont.eot
deleted file mode 100755
index ec7ba17d5..000000000
Binary files a/assets/fonts/sofiapro-black-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-black-webfont.svg b/assets/fonts/sofiapro-black-webfont.svg
deleted file mode 100755
index 03736a815..000000000
--- a/assets/fonts/sofiapro-black-webfont.svg
+++ /dev/null
@@ -1,1430 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/assets/fonts/sofiapro-black-webfont.ttf b/assets/fonts/sofiapro-black-webfont.ttf
deleted file mode 100755
index 6783f7c73..000000000
Binary files a/assets/fonts/sofiapro-black-webfont.ttf and /dev/null differ
diff --git a/assets/fonts/sofiapro-black-webfont.woff b/assets/fonts/sofiapro-black-webfont.woff
deleted file mode 100755
index 1f3d990e0..000000000
Binary files a/assets/fonts/sofiapro-black-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-black-webfont.woff2 b/assets/fonts/sofiapro-black-webfont.woff2
deleted file mode 100755
index 745c39c95..000000000
Binary files a/assets/fonts/sofiapro-black-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-bold-italic-webfont.eot b/assets/fonts/sofiapro-bold-italic-webfont.eot
deleted file mode 100755
index 0ea00daf8..000000000
Binary files a/assets/fonts/sofiapro-bold-italic-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-bold-italic-webfont.woff b/assets/fonts/sofiapro-bold-italic-webfont.woff
deleted file mode 100755
index 8d7a2214f..000000000
Binary files a/assets/fonts/sofiapro-bold-italic-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-bold-webfont.eot b/assets/fonts/sofiapro-bold-webfont.eot
deleted file mode 100755
index 53ba026f2..000000000
Binary files a/assets/fonts/sofiapro-bold-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-bold-webfont.woff b/assets/fonts/sofiapro-bold-webfont.woff
deleted file mode 100755
index d3be40b1d..000000000
Binary files a/assets/fonts/sofiapro-bold-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-bold-webfont.woff2 b/assets/fonts/sofiapro-bold-webfont.woff2
deleted file mode 100755
index 5b47fee6c..000000000
Binary files a/assets/fonts/sofiapro-bold-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-extralight-italic-webfont.eot b/assets/fonts/sofiapro-extralight-italic-webfont.eot
deleted file mode 100755
index 5e190eeda..000000000
Binary files a/assets/fonts/sofiapro-extralight-italic-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-extralight-italic-webfont.ttf b/assets/fonts/sofiapro-extralight-italic-webfont.ttf
deleted file mode 100755
index 95fd1355f..000000000
Binary files a/assets/fonts/sofiapro-extralight-italic-webfont.ttf and /dev/null differ
diff --git a/assets/fonts/sofiapro-extralight-italic-webfont.woff b/assets/fonts/sofiapro-extralight-italic-webfont.woff
deleted file mode 100755
index f63c95374..000000000
Binary files a/assets/fonts/sofiapro-extralight-italic-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-extralight-italic-webfont.woff2 b/assets/fonts/sofiapro-extralight-italic-webfont.woff2
deleted file mode 100755
index 010e1f3c1..000000000
Binary files a/assets/fonts/sofiapro-extralight-italic-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-extralight-webfont.eot b/assets/fonts/sofiapro-extralight-webfont.eot
deleted file mode 100755
index c0688c967..000000000
Binary files a/assets/fonts/sofiapro-extralight-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-extralight-webfont.svg b/assets/fonts/sofiapro-extralight-webfont.svg
deleted file mode 100755
index 2ecd01489..000000000
--- a/assets/fonts/sofiapro-extralight-webfont.svg
+++ /dev/null
@@ -1,1408 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/assets/fonts/sofiapro-extralight-webfont.woff b/assets/fonts/sofiapro-extralight-webfont.woff
deleted file mode 100755
index 00acfc32f..000000000
Binary files a/assets/fonts/sofiapro-extralight-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-extralight-webfont.woff2 b/assets/fonts/sofiapro-extralight-webfont.woff2
deleted file mode 100755
index bcb251e45..000000000
Binary files a/assets/fonts/sofiapro-extralight-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-light-italic-webfont.eot b/assets/fonts/sofiapro-light-italic-webfont.eot
deleted file mode 100755
index 3ad8b27d9..000000000
Binary files a/assets/fonts/sofiapro-light-italic-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-light-italic-webfont.woff b/assets/fonts/sofiapro-light-italic-webfont.woff
deleted file mode 100755
index 4dd302ec1..000000000
Binary files a/assets/fonts/sofiapro-light-italic-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-light-webfont.eot b/assets/fonts/sofiapro-light-webfont.eot
deleted file mode 100755
index 425e2b749..000000000
Binary files a/assets/fonts/sofiapro-light-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-light-webfont.woff b/assets/fonts/sofiapro-light-webfont.woff
deleted file mode 100755
index f2bf1a479..000000000
Binary files a/assets/fonts/sofiapro-light-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-light-webfont.woff2 b/assets/fonts/sofiapro-light-webfont.woff2
deleted file mode 100755
index 6fbc1476d..000000000
Binary files a/assets/fonts/sofiapro-light-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-medium-italic.eot b/assets/fonts/sofiapro-medium-italic.eot
deleted file mode 100755
index 906bf2414..000000000
Binary files a/assets/fonts/sofiapro-medium-italic.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-medium-italic.woff b/assets/fonts/sofiapro-medium-italic.woff
deleted file mode 100755
index 9e798a325..000000000
Binary files a/assets/fonts/sofiapro-medium-italic.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-medium-webfont.eot b/assets/fonts/sofiapro-medium-webfont.eot
deleted file mode 100755
index 1d7f4de3c..000000000
Binary files a/assets/fonts/sofiapro-medium-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-medium-webfont.woff b/assets/fonts/sofiapro-medium-webfont.woff
deleted file mode 100755
index 363feef56..000000000
Binary files a/assets/fonts/sofiapro-medium-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-medium-webfont.woff2 b/assets/fonts/sofiapro-medium-webfont.woff2
deleted file mode 100755
index ef54fd293..000000000
Binary files a/assets/fonts/sofiapro-medium-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-regular-webfont.eot b/assets/fonts/sofiapro-regular-webfont.eot
deleted file mode 100755
index 6e3ae693b..000000000
Binary files a/assets/fonts/sofiapro-regular-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-regular-webfont.woff b/assets/fonts/sofiapro-regular-webfont.woff
deleted file mode 100755
index c573bcd7c..000000000
Binary files a/assets/fonts/sofiapro-regular-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-regular-webfont.woff2 b/assets/fonts/sofiapro-regular-webfont.woff2
deleted file mode 100755
index 724f5bc16..000000000
Binary files a/assets/fonts/sofiapro-regular-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-semibold-italic-webfont.eot b/assets/fonts/sofiapro-semibold-italic-webfont.eot
deleted file mode 100755
index 21d62ccf1..000000000
Binary files a/assets/fonts/sofiapro-semibold-italic-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-semibold-italic-webfont.woff b/assets/fonts/sofiapro-semibold-italic-webfont.woff
deleted file mode 100755
index 9de9973ca..000000000
Binary files a/assets/fonts/sofiapro-semibold-italic-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-semibold-webfont.eot b/assets/fonts/sofiapro-semibold-webfont.eot
deleted file mode 100755
index 194d7467c..000000000
Binary files a/assets/fonts/sofiapro-semibold-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-semibold-webfont.woff b/assets/fonts/sofiapro-semibold-webfont.woff
deleted file mode 100755
index 22cc49888..000000000
Binary files a/assets/fonts/sofiapro-semibold-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-semibold-webfont.woff2 b/assets/fonts/sofiapro-semibold-webfont.woff2
deleted file mode 100755
index 078798af8..000000000
Binary files a/assets/fonts/sofiapro-semibold-webfont.woff2 and /dev/null differ
diff --git a/assets/fonts/sofiapro-ultralight-italic-webfont.eot b/assets/fonts/sofiapro-ultralight-italic-webfont.eot
deleted file mode 100755
index 529f05653..000000000
Binary files a/assets/fonts/sofiapro-ultralight-italic-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-ultralight-italic-webfont.svg b/assets/fonts/sofiapro-ultralight-italic-webfont.svg
deleted file mode 100755
index 8ceed2de2..000000000
--- a/assets/fonts/sofiapro-ultralight-italic-webfont.svg
+++ /dev/null
@@ -1,1455 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/assets/fonts/sofiapro-ultralight-italic-webfont.ttf b/assets/fonts/sofiapro-ultralight-italic-webfont.ttf
deleted file mode 100755
index 21c85fe2d..000000000
Binary files a/assets/fonts/sofiapro-ultralight-italic-webfont.ttf and /dev/null differ
diff --git a/assets/fonts/sofiapro-ultralight-italic-webfont.woff b/assets/fonts/sofiapro-ultralight-italic-webfont.woff
deleted file mode 100755
index 59e52d612..000000000
Binary files a/assets/fonts/sofiapro-ultralight-italic-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro-ultralight-webfont.eot b/assets/fonts/sofiapro-ultralight-webfont.eot
deleted file mode 100755
index 1ad4290af..000000000
Binary files a/assets/fonts/sofiapro-ultralight-webfont.eot and /dev/null differ
diff --git a/assets/fonts/sofiapro-ultralight-webfont.svg b/assets/fonts/sofiapro-ultralight-webfont.svg
deleted file mode 100755
index 70a4f46d5..000000000
--- a/assets/fonts/sofiapro-ultralight-webfont.svg
+++ /dev/null
@@ -1,1455 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/assets/fonts/sofiapro-ultralight-webfont.ttf b/assets/fonts/sofiapro-ultralight-webfont.ttf
deleted file mode 100755
index 7b6610869..000000000
Binary files a/assets/fonts/sofiapro-ultralight-webfont.ttf and /dev/null differ
diff --git a/assets/fonts/sofiapro-ultralight-webfont.woff b/assets/fonts/sofiapro-ultralight-webfont.woff
deleted file mode 100755
index 4e0ff9f2f..000000000
Binary files a/assets/fonts/sofiapro-ultralight-webfont.woff and /dev/null differ
diff --git a/assets/fonts/sofiapro/sofiapro-bold-italic-webfont.eot b/assets/fonts/sofiapro/sofiapro-bold-italic-webfont.eot
new file mode 100755
index 000000000..c70c63ac9
Binary files /dev/null and b/assets/fonts/sofiapro/sofiapro-bold-italic-webfont.eot differ
diff --git a/assets/fonts/sofiapro-bold-italic-webfont.svg b/assets/fonts/sofiapro/sofiapro-bold-italic-webfont.svg
similarity index 99%
rename from assets/fonts/sofiapro-bold-italic-webfont.svg
rename to assets/fonts/sofiapro/sofiapro-bold-italic-webfont.svg
index cbd3316f3..786dda605 100755
--- a/assets/fonts/sofiapro-bold-italic-webfont.svg
+++ b/assets/fonts/sofiapro/sofiapro-bold-italic-webfont.svg
@@ -1,6 +1,6 @@
-