From d09e8807808e751b1565a422450bab4e6bd1f9a0 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Thu, 8 Oct 2015 16:50:15 -0700 Subject: [PATCH 1/9] Install tc-ui-kit --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 13835c9ed..383f8a85f 100644 --- a/package.json +++ b/package.json @@ -80,5 +80,8 @@ "sinon-chai": "^2.8.0", "wiredep": "^2.2.2", "yargs": "^3.12.0" + }, + "dependencies": { + "tc-ui-kit": "0.0.0" } } From 1953597fc5c943210564426bc0eb16e3a79205c8 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Thu, 8 Oct 2015 18:28:32 -0700 Subject: [PATCH 2/9] Add tc-ui-kit --- assets/css/account/account.scss | 5 +- assets/css/account/login.scss | 1 + assets/css/account/register.scss | 1 + .../css/account/registered-successfully.scss | 5 +- assets/css/account/reset-password.scss | 3 +- assets/css/directives/challenge-tile.scss | 1 + assets/css/directives/distribution-graph.scss | 1 + assets/css/directives/external-account.scss | 1 + assets/css/directives/external-link-data.scss | 1 + assets/css/directives/history-graph.scss | 1 + .../directives/input-sticky-placeholder.scss | 1 + assets/css/directives/ios-card.scss | 1 + assets/css/directives/profile-widget.scss | 1 + assets/css/directives/skill-tile.scss | 1 + assets/css/directives/srm-tile.scss | 1 + assets/css/directives/tc-paginator.scss | 1 + assets/css/directives/tc-section.scss | 3 +- .../directives/toggle-password-with-tips.scss | 1 + assets/css/directives/toggle-password.scss | 1 + assets/css/directives/track-toggle.scss | 5 +- assets/css/layout/footer.scss | 1 + assets/css/layout/header.scss | 3 +- assets/css/my-challenges/my-challenges.scss | 7 +- .../css/my-dashboard/community-updates.scss | 3 +- assets/css/my-dashboard/header-dashboard.scss | 1 + assets/css/my-dashboard/my-challenges.scss | 1 + assets/css/my-dashboard/my-dashboard.scss | 1 + assets/css/my-dashboard/programs.scss | 1 + assets/css/my-dashboard/srms.scss | 1 + assets/css/my-dashboard/subtrack-stats.scss | 1 + assets/css/my-srms/my-srms.scss | 11 +- assets/css/partials/_combined.scss | 7 +- assets/css/partials/_fonts.scss | 217 ----------------- assets/css/partials/_functions.scss | 4 - .../{_colors.scss => _tc-colors.scss} | 35 --- .../{_mixins.scss => _tc-mixins.scss} | 14 +- assets/css/partials/_urls.scss | 6 - assets/css/peer-review/completed.scss | 1 + assets/css/peer-review/edit.scss | 1 + assets/css/peer-review/peer-review.scss | 1 + assets/css/peer-review/readOnlyScorecard.scss | 1 + assets/css/peer-review/reviewStatus.scss | 1 + assets/css/profile/about.scss | 7 +- assets/css/profile/badges.scss | 5 +- assets/css/profile/header.scss | 1 + assets/css/profile/subtrack.scss | 7 +- assets/css/settings/account-info.scss | 1 + assets/css/settings/edit-profile.scss | 1 + assets/css/settings/preferences.scss | 1 + assets/css/settings/settings.scss | 1 + assets/css/settings/update-password.scss | 1 + assets/css/skill-picker/skill-picker.scss | 1 + assets/css/topcoder.scss | 221 +++++++++++++++++- gulpfile.js | 2 +- package.json | 2 +- 55 files changed, 303 insertions(+), 303 deletions(-) delete mode 100644 assets/css/partials/_fonts.scss delete mode 100644 assets/css/partials/_functions.scss rename assets/css/partials/{_colors.scss => _tc-colors.scss} (54%) rename assets/css/partials/{_mixins.scss => _tc-mixins.scss} (96%) delete mode 100644 assets/css/partials/_urls.scss diff --git a/assets/css/account/account.scss b/assets/css/account/account.scss index 1683fb93b..a69142e4d 100644 --- a/assets/css/account/account.scss +++ b/assets/css/account/account.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; @@ -66,11 +67,11 @@ } .tips { - left: 380px; + left: 380px; } .email-tips { - left: 380px; + left: 380px; } button { diff --git a/assets/css/account/login.scss b/assets/css/account/login.scss index 6bfb386ab..8e50b4e22 100644 --- a/assets/css/account/login.scss +++ b/assets/css/account/login.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .login-container { diff --git a/assets/css/account/register.scss b/assets/css/account/register.scss index c09112c0e..6f8e92834 100644 --- a/assets/css/account/register.scss +++ b/assets/css/account/register.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .register-container { diff --git a/assets/css/account/registered-successfully.scss b/assets/css/account/registered-successfully.scss index ec75c4245..1de96f4c6 100644 --- a/assets/css/account/registered-successfully.scss +++ b/assets/css/account/registered-successfully.scss @@ -1,11 +1,12 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .registered-successfully-container { - p.message { + p.message { font-size: 20px; line-height: 30px; @include source-sans-light; color: #3D3D3D; padding: 62px 90px 154px 90px; } -} \ No newline at end of file +} diff --git a/assets/css/account/reset-password.scss b/assets/css/account/reset-password.scss index 029a3d419..7e5739901 100644 --- a/assets/css/account/reset-password.scss +++ b/assets/css/account/reset-password.scss @@ -1,7 +1,8 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .reset-password-container { - + form { display: flex; flex-flow: column wrap; diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 50af989c8..7f28c88fa 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; // Default Challenge Tile Stylings diff --git a/assets/css/directives/distribution-graph.scss b/assets/css/directives/distribution-graph.scss index adc507834..ae612934e 100644 --- a/assets/css/directives/distribution-graph.scss +++ b/assets/css/directives/distribution-graph.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .distribution-graph-directive { diff --git a/assets/css/directives/external-account.scss b/assets/css/directives/external-account.scss index 591849996..197a16bb8 100644 --- a/assets/css/directives/external-account.scss +++ b/assets/css/directives/external-account.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .ext-tile { diff --git a/assets/css/directives/external-link-data.scss b/assets/css/directives/external-link-data.scss index d51815c97..c7133f11c 100644 --- a/assets/css/directives/external-link-data.scss +++ b/assets/css/directives/external-link-data.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; external-accounts { diff --git a/assets/css/directives/history-graph.scss b/assets/css/directives/history-graph.scss index 48ba5a425..f9fa13870 100644 --- a/assets/css/directives/history-graph.scss +++ b/assets/css/directives/history-graph.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .history-graph-directive { diff --git a/assets/css/directives/input-sticky-placeholder.scss b/assets/css/directives/input-sticky-placeholder.scss index 5fea02661..126a3aeff 100644 --- a/assets/css/directives/input-sticky-placeholder.scss +++ b/assets/css/directives/input-sticky-placeholder.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .input-sticky-placeholder-container { diff --git a/assets/css/directives/ios-card.scss b/assets/css/directives/ios-card.scss index a60830347..ae3c27986 100644 --- a/assets/css/directives/ios-card.scss +++ b/assets/css/directives/ios-card.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; // Default Challenge Tile Stylings diff --git a/assets/css/directives/profile-widget.scss b/assets/css/directives/profile-widget.scss index aedbb53b6..f34c90e02 100644 --- a/assets/css/directives/profile-widget.scss +++ b/assets/css/directives/profile-widget.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .profile-widget-directive { diff --git a/assets/css/directives/skill-tile.scss b/assets/css/directives/skill-tile.scss index ad1cc0227..042198758 100644 --- a/assets/css/directives/skill-tile.scss +++ b/assets/css/directives/skill-tile.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; skill-tile { diff --git a/assets/css/directives/srm-tile.scss b/assets/css/directives/srm-tile.scss index 8cbe6acd6..b7b8cda2e 100644 --- a/assets/css/directives/srm-tile.scss +++ b/assets/css/directives/srm-tile.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .srm.tile-view { diff --git a/assets/css/directives/tc-paginator.scss b/assets/css/directives/tc-paginator.scss index 707aaa3a9..abd575f30 100644 --- a/assets/css/directives/tc-paginator.scss +++ b/assets/css/directives/tc-paginator.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; diff --git a/assets/css/directives/tc-section.scss b/assets/css/directives/tc-section.scss index b4d66e993..cd82362cb 100644 --- a/assets/css/directives/tc-section.scss +++ b/assets/css/directives/tc-section.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .tc-section { @@ -6,6 +7,6 @@ .section-loading { width: 100%; min-height: 100px; - background: $loading no-repeat center center; + background: url(/images/ripple.gif) no-repeat center center; } } diff --git a/assets/css/directives/toggle-password-with-tips.scss b/assets/css/directives/toggle-password-with-tips.scss index 205a97460..100051cb4 100644 --- a/assets/css/directives/toggle-password-with-tips.scss +++ b/assets/css/directives/toggle-password-with-tips.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; // Toggle password with password tips directive diff --git a/assets/css/directives/toggle-password.scss b/assets/css/directives/toggle-password.scss index 4b88c835e..a886cfdb5 100644 --- a/assets/css/directives/toggle-password.scss +++ b/assets/css/directives/toggle-password.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; // Toggle password directive diff --git a/assets/css/directives/track-toggle.scss b/assets/css/directives/track-toggle.scss index 88a23298b..500797cce 100644 --- a/assets/css/directives/track-toggle.scss +++ b/assets/css/directives/track-toggle.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; track-toggle { @@ -111,13 +112,13 @@ track-toggle { right: 20px; border: none; border-radius: 12px; - transition: all 0.3s ease-in 0s; + 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; + right: 0px; } diff --git a/assets/css/layout/footer.scss b/assets/css/layout/footer.scss index defb32cf5..6d7df085c 100644 --- a/assets/css/layout/footer.scss +++ b/assets/css/layout/footer.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .bottom-footer { diff --git a/assets/css/layout/header.scss b/assets/css/layout/header.scss index b5888fa12..0136ababf 100644 --- a/assets/css/layout/header.scss +++ b/assets/css/layout/header.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; #header { @@ -188,7 +189,7 @@ padding-left: 10px; vertical-align: middle; } - + .menu-item-header { text-transform: none; } diff --git a/assets/css/my-challenges/my-challenges.scss b/assets/css/my-challenges/my-challenges.scss index 4cd179535..1d2d80f1c 100644 --- a/assets/css/my-challenges/my-challenges.scss +++ b/assets/css/my-challenges/my-challenges.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .my-challenges-container { @@ -8,7 +9,7 @@ .section-loading { width: 100%; height: 50px; - background: $loading no-repeat center center; + background: url(/images/ripple.gif) no-repeat center center; } .section-title { @@ -75,13 +76,13 @@ .my-challenges { display: block; - color: $accent-color; + color: $accent; font-weight: 700; text-align: center; text-transform: uppercase; @media (min-width: 768px) { display: block; - color: $accent-color; + color: $accent; font-weight: 700; text-align: center; text-transform: uppercase; diff --git a/assets/css/my-dashboard/community-updates.scss b/assets/css/my-dashboard/community-updates.scss index 151091e2b..cf0abe90e 100644 --- a/assets/css/my-dashboard/community-updates.scss +++ b/assets/css/my-dashboard/community-updates.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .community-updates { @@ -94,7 +95,7 @@ a { display: block; margin-top: 25px; - color: $primary-color; + color: $accent; text-decoration: none; @media only screen and (min-width: 1132px) { margin-top: 0; diff --git a/assets/css/my-dashboard/header-dashboard.scss b/assets/css/my-dashboard/header-dashboard.scss index db76997fe..4db4c4a18 100644 --- a/assets/css/my-dashboard/header-dashboard.scss +++ b/assets/css/my-dashboard/header-dashboard.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .header-dashboard { diff --git a/assets/css/my-dashboard/my-challenges.scss b/assets/css/my-dashboard/my-challenges.scss index 649be86ab..eeafa623f 100644 --- a/assets/css/my-dashboard/my-challenges.scss +++ b/assets/css/my-dashboard/my-challenges.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .my-challenges { diff --git a/assets/css/my-dashboard/my-dashboard.scss b/assets/css/my-dashboard/my-dashboard.scss index 7c7ca3eca..8b17313b9 100644 --- a/assets/css/my-dashboard/my-dashboard.scss +++ b/assets/css/my-dashboard/my-dashboard.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .my-dashboard-container { diff --git a/assets/css/my-dashboard/programs.scss b/assets/css/my-dashboard/programs.scss index 92ef8f5e2..db001e58e 100644 --- a/assets/css/my-dashboard/programs.scss +++ b/assets/css/my-dashboard/programs.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .programs { diff --git a/assets/css/my-dashboard/srms.scss b/assets/css/my-dashboard/srms.scss index 9c963fee5..9ba20062b 100644 --- a/assets/css/my-dashboard/srms.scss +++ b/assets/css/my-dashboard/srms.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .srms { diff --git a/assets/css/my-dashboard/subtrack-stats.scss b/assets/css/my-dashboard/subtrack-stats.scss index 1210d5507..7b5cf5125 100644 --- a/assets/css/my-dashboard/subtrack-stats.scss +++ b/assets/css/my-dashboard/subtrack-stats.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .subtrack-stats { diff --git a/assets/css/my-srms/my-srms.scss b/assets/css/my-srms/my-srms.scss index 316710dee..821470675 100644 --- a/assets/css/my-srms/my-srms.scss +++ b/assets/css/my-srms/my-srms.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .my-srms-container { @@ -13,7 +14,7 @@ .section-loading { width: 100%; height: 50px; - background: $loading no-repeat center center; + background: url(/images/ripple.gif) no-repeat center center; } .section-title { @@ -53,7 +54,7 @@ } .my-srms { display: block; - color: $accent-color; + color: $accent; font-weight: 700; text-align: center; text-transform: uppercase; @@ -147,7 +148,7 @@ } } - + .data { display: flex; flex-flow: row wrap; @@ -169,7 +170,7 @@ display: inline; margin-bottom: 15px; &.tile-view { - + margin-bottom: 20px; @media only screen and (max-width: 767px) { display: inline-block; @@ -230,7 +231,7 @@ } .my-srms { display: block; - color: $accent-color; + color: $accent; font-weight: 700; text-align: center; text-transform: uppercase; diff --git a/assets/css/partials/_combined.scss b/assets/css/partials/_combined.scss index 72fa6f9ab..180c72fa7 100644 --- a/assets/css/partials/_combined.scss +++ b/assets/css/partials/_combined.scss @@ -1,5 +1,2 @@ -@import 'colors'; -@import 'mixins'; -@import 'fonts'; -@import 'urls'; -@import 'functions'; \ No newline at end of file +@import 'tc-colors'; +@import 'tc-mixins'; diff --git a/assets/css/partials/_fonts.scss b/assets/css/partials/_fonts.scss deleted file mode 100644 index f6f7e82d8..000000000 --- a/assets/css/partials/_fonts.scss +++ /dev/null @@ -1,217 +0,0 @@ -@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; -} - -/********** SOURCE SANS PRO **********/ -@font-face { - font-family: 'Source Sans Pro'; - src: url('/fonts/SourceSansPro-Light-webfont.eot'); - src: url('/fonts/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'), - url('/fonts/SourceSansPro-Light-webfont.woff') format('woff'), - url('/fonts/SourceSansPro-Light-webfont.ttf') format('truetype'), - url('/fonts/SourceSansPro-Light-webfont.svg#webfont') format('svg'); - font-weight: 300; -} - -@font-face { - font-family: 'Source Sans Pro'; - src: url('/fonts/SourceSansPro-Regular-webfont.eot'); - src: url('/fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('/fonts/SourceSansPro-Regular-webfont.woff') format('woff'), - url('/fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'), - url('/fonts/SourceSansPro-Regular-webfont.svg#webfont') format('svg'); - font-weight: normal; -} - -@font-face { - font-family: 'Source Sans Pro'; - src: url('/fonts/SourceSansPro-It-webfont.eot'); - src: url('/fonts/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'), - url('/fonts/SourceSansPro-It-webfont.woff') format('woff'), - url('/fonts/SourceSansPro-It-webfont.ttf') format('truetype'), - url('/fonts/SourceSansPro-It-webfont.svg#webfont') format('svg'); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: 'Source Sans Pro'; - src: url('/fonts/SourceSansPro-Semibold-webfont.eot'); - src: url('/fonts/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'), - url('/fonts/SourceSansPro-Semibold-webfont.woff') format('woff'), - url('/fonts/SourceSansPro-Semibold-webfont.ttf') format('truetype'), - url('/fonts/SourceSansPro-Semibold-webfont.svg#webfont') format('svg'); - font-weight: 600; -} - -@font-face { - font-family: 'Source Sans Pro'; - src: url('/fonts/SourceSansPro-Bold-webfont.eot'); - src: url('/fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('/fonts/SourceSansPro-Bold-webfont.woff') format('woff'), - url('/fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'), - url('/fonts/SourceSansPro-Bold-webfont.svg#webfont') format('svg'); - font-weight: 700; -} diff --git a/assets/css/partials/_functions.scss b/assets/css/partials/_functions.scss deleted file mode 100644 index 49651f6d5..000000000 --- a/assets/css/partials/_functions.scss +++ /dev/null @@ -1,4 +0,0 @@ -@function url($path) { - $prefix: '' !default; - @return unquote('url(' + unquote($prefix) + unquote($path) + ')'); -} \ No newline at end of file diff --git a/assets/css/partials/_colors.scss b/assets/css/partials/_tc-colors.scss similarity index 54% rename from assets/css/partials/_colors.scss rename to assets/css/partials/_tc-colors.scss index 668651470..f12800889 100644 --- a/assets/css/partials/_colors.scss +++ b/assets/css/partials/_tc-colors.scss @@ -22,41 +22,6 @@ $dark-blue : #0096ff; $review-blue: #0071bc; $login-blue : #26A9E0; -// UI REFRESH COLORS -$primary-color: #00aeff; -$accent-color: #21B2F1; -$success-color: #99cc00; -$danger-color: #ff0066; -$warning-color: #DAD714; - -$accent: #0096FF; -$error: #F31D3D; -$success: #5BC921; - -$level-5: #EF3A3A; -$level-4: #FCB816; -$level-3: #616BD5; -$level-2: #69C329; -$level-1: #9D9FA0; - -$design: #21B2F1; -$data_science: #FC9A00; -$develop: #05C14F; -$copilot: #7D939E; - -$system-dark-gray: #394146; -$system-gray: #A3A3AE; - -$white: #fff; -$black: #000; -$gray-darkest: #3D3D3D; -$gray-darker: #7F7F7F; -$gray-dark: #B7B7B7; -$gray: #D1D3D4; -$gray-light: #F0F0F0; -$gray-lighter: #F6F6F6; -$gray-lightest: #FCFCFC; - // Refactor and get rid of these: $ui-page-gray: #f1f2f2; diff --git a/assets/css/partials/_mixins.scss b/assets/css/partials/_tc-mixins.scss similarity index 96% rename from assets/css/partials/_mixins.scss rename to assets/css/partials/_tc-mixins.scss index d828b939f..60ff69d4a 100644 --- a/assets/css/partials/_mixins.scss +++ b/assets/css/partials/_tc-mixins.scss @@ -136,7 +136,7 @@ } } -@mixin button-s($background: $primary-color) { +@mixin button-s($background: $accent) { height: 20px; line-height: 20px; padding: 0 8px; @@ -153,7 +153,7 @@ outline: 0; } -@mixin button-m($background: $primary-color) { +@mixin button-m($background: $accent) { @include button-s($background); height: 30px; line-height: 30px; @@ -162,7 +162,7 @@ border-radius: 4px; } -@mixin button-l($background: $primary-color) { +@mixin button-l($background: $accent) { @include button-s($background); height: 50px; line-height: 50px; @@ -173,7 +173,7 @@ } -@mixin button-xl($background: $primary-color) { +@mixin button-xl($background: $accent) { @include button-s($background); height: 60px; line-height: 60px; @@ -184,7 +184,7 @@ } -@mixin button-m-wide($background: $primary-color) { +@mixin button-m-wide($background: $accent) { @include button-m($background); padding: 0 30px; } @@ -195,8 +195,8 @@ @mixin button-ghost { background-color: $white; - color: $primary-color; - border: 1px solid $primary-color; + color: $accent; + border: 1px solid $accent; } @mixin button-1($disabled: #b2e7fe, $normal: #1eaefc, $hover: #199ae2, $active: #1792d7) { diff --git a/assets/css/partials/_urls.scss b/assets/css/partials/_urls.scss deleted file mode 100644 index 007254030..000000000 --- a/assets/css/partials/_urls.scss +++ /dev/null @@ -1,6 +0,0 @@ - - -$checkbox: url(/images/check-box.png); -$community-background: url(/images/community-background.png); -$loading: url(/images/ripple.gif); -$sort-arrows: url(/images/sort-arrows.png); diff --git a/assets/css/peer-review/completed.scss b/assets/css/peer-review/completed.scss index ff8474dc8..aa5c907b4 100644 --- a/assets/css/peer-review/completed.scss +++ b/assets/css/peer-review/completed.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .completed-review-container { diff --git a/assets/css/peer-review/edit.scss b/assets/css/peer-review/edit.scss index cd133e668..cf293c9a2 100644 --- a/assets/css/peer-review/edit.scss +++ b/assets/css/peer-review/edit.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .edit-review-container { diff --git a/assets/css/peer-review/peer-review.scss b/assets/css/peer-review/peer-review.scss index 1bc5e796a..ccc46a60e 100644 --- a/assets/css/peer-review/peer-review.scss +++ b/assets/css/peer-review/peer-review.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; @include glyphicons-halflings; diff --git a/assets/css/peer-review/readOnlyScorecard.scss b/assets/css/peer-review/readOnlyScorecard.scss index 0f657d6af..78e3515ca 100644 --- a/assets/css/peer-review/readOnlyScorecard.scss +++ b/assets/css/peer-review/readOnlyScorecard.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .read-only-scorecard-container { diff --git a/assets/css/peer-review/reviewStatus.scss b/assets/css/peer-review/reviewStatus.scss index 089ed340b..9c00491d6 100644 --- a/assets/css/peer-review/reviewStatus.scss +++ b/assets/css/peer-review/reviewStatus.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .review-status-container { diff --git a/assets/css/profile/about.scss b/assets/css/profile/about.scss index 21040df92..b2baf4136 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .profile-about-container { margin-top: 20px; @@ -195,7 +196,7 @@ @include button-2-l; } .list { - + display: flex; flex-direction: row; justify-content: center; @@ -305,7 +306,7 @@ font-family: 'Sofia Pro'; text-transform: uppercase; } - + .categories { padding-bottom: 90px; .activity { @@ -530,7 +531,7 @@ padding: 10px; margin: 20px auto; } - } + } } diff --git a/assets/css/profile/badges.scss b/assets/css/profile/badges.scss index b0a1686a0..9ea4c8742 100644 --- a/assets/css/profile/badges.scss +++ b/assets/css/profile/badges.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .ngdialog.ngdialog-theme-default { @@ -21,7 +22,7 @@ span { display: inline; &.title { - color: $primary-color; + color: $accent; font-weight: bold; } } @@ -32,7 +33,7 @@ margin-bottom: -5px; margin-right: 13px; } - + } .badges { diff --git a/assets/css/profile/header.scss b/assets/css/profile/header.scss index 46efac79d..8ad00c715 100644 --- a/assets/css/profile/header.scss +++ b/assets/css/profile/header.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .profile-container { diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index cde76ccd8..72b6e9471 100644 --- a/assets/css/profile/subtrack.scss +++ b/assets/css/profile/subtrack.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .profile-subtrack-container { @@ -41,7 +42,7 @@ text-decoration: none; color: black; &:hover { - color: $accent-color; + color: $accent; } } } @@ -53,7 +54,7 @@ } .subtrack { display: block; - color: $accent-color; + color: $accent; font-weight: 700; text-align: center; text-transform: uppercase; @@ -152,7 +153,7 @@ padding: 14px; border-bottom: 1px solid #f6f6f6; .right { - color: $accent-color; + color: $accent; } &.first { border-top: 1px solid #f6f6f6; diff --git a/assets/css/settings/account-info.scss b/assets/css/settings/account-info.scss index 7eea0f9e5..50044ac0a 100644 --- a/assets/css/settings/account-info.scss +++ b/assets/css/settings/account-info.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .account-info-container { diff --git a/assets/css/settings/edit-profile.scss b/assets/css/settings/edit-profile.scss index 3b87ff722..4e422911b 100644 --- a/assets/css/settings/edit-profile.scss +++ b/assets/css/settings/edit-profile.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .edit-profile-container { diff --git a/assets/css/settings/preferences.scss b/assets/css/settings/preferences.scss index 6b3ee3d9c..8869cc1c9 100644 --- a/assets/css/settings/preferences.scss +++ b/assets/css/settings/preferences.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .preferences-container { diff --git a/assets/css/settings/settings.scss b/assets/css/settings/settings.scss index def0730fd..fc29279fe 100644 --- a/assets/css/settings/settings.scss +++ b/assets/css/settings/settings.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .settings-header { @include module-full-width; diff --git a/assets/css/settings/update-password.scss b/assets/css/settings/update-password.scss index 06bc8133a..8d1206bac 100644 --- a/assets/css/settings/update-password.scss +++ b/assets/css/settings/update-password.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .update-password-container { diff --git a/assets/css/skill-picker/skill-picker.scss b/assets/css/skill-picker/skill-picker.scss index 5b9a5c0c1..d931f2e38 100644 --- a/assets/css/skill-picker/skill-picker.scss +++ b/assets/css/skill-picker/skill-picker.scss @@ -1,3 +1,4 @@ +@import 'topcoder-includes'; @import '../partials/combined'; .skill-picker-container { diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss index 6a5128742..8f88af830 100644 --- a/assets/css/topcoder.scss +++ b/assets/css/topcoder.scss @@ -1,4 +1,5 @@ @import 'partials/combined'; +@import 'topcoder-styles'; @include glyphicons-halflings; // Resets and top level container stylings @@ -81,7 +82,7 @@ a { .section-loading { width: 100%; min-height: 50px; - background: $loading no-repeat center center; + background: url(/images/ripple.gif) no-repeat center center; } .form-errors { @@ -215,3 +216,221 @@ a { width: 100%; } } + +@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; +} + +/********** SOURCE SANS PRO **********/ +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-Light-webfont.eot'); + src: url('/fonts/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'), + url('/fonts/SourceSansPro-Light-webfont.woff') format('woff'), + url('/fonts/SourceSansPro-Light-webfont.ttf') format('truetype'), + url('/fonts/SourceSansPro-Light-webfont.svg#webfont') format('svg'); + font-weight: 300; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-Regular-webfont.eot'); + src: url('/fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('/fonts/SourceSansPro-Regular-webfont.woff') format('woff'), + url('/fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'), + url('/fonts/SourceSansPro-Regular-webfont.svg#webfont') format('svg'); + font-weight: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-It-webfont.eot'); + src: url('/fonts/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'), + url('/fonts/SourceSansPro-It-webfont.woff') format('woff'), + url('/fonts/SourceSansPro-It-webfont.ttf') format('truetype'), + url('/fonts/SourceSansPro-It-webfont.svg#webfont') format('svg'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-Semibold-webfont.eot'); + src: url('/fonts/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'), + url('/fonts/SourceSansPro-Semibold-webfont.woff') format('woff'), + url('/fonts/SourceSansPro-Semibold-webfont.ttf') format('truetype'), + url('/fonts/SourceSansPro-Semibold-webfont.svg#webfont') format('svg'); + font-weight: 600; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url('/fonts/SourceSansPro-Bold-webfont.eot'); + src: url('/fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('/fonts/SourceSansPro-Bold-webfont.woff') format('woff'), + url('/fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'), + url('/fonts/SourceSansPro-Bold-webfont.svg#webfont') format('svg'); + font-weight: 700; +} diff --git a/gulpfile.js b/gulpfile.js index 3b5fec019..bf1dc6a50 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -49,7 +49,7 @@ gulp.task('styles', ['clean-styles'], function() { return gulp .src(config.sass, {base: './'}) .pipe($.plumber()) - .pipe($.sass()) + .pipe($.sass({includePaths: [require('tc-ui-kit').includePaths]})) .pipe($.autoprefixer({browsers: ['last 2 version']})) .pipe($.replace(/\/fonts/g, assetPrefix + 'fonts')) .pipe(gulp.dest(config.temp)); diff --git a/package.json b/package.json index 383f8a85f..202cc4feb 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,6 @@ "yargs": "^3.12.0" }, "dependencies": { - "tc-ui-kit": "0.0.0" + "tc-ui-kit": "0.0.x" } } From 9390896ac5dd24d3f282d9a5f7a4fe09251137df Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Fri, 9 Oct 2015 14:36:42 -0700 Subject: [PATCH 3/9] Update to correct color names --- assets/css/directives/external-account.scss | 2 +- .../css/directives/input-sticky-placeholder.scss | 2 +- assets/css/directives/skill-tile.scss | 2 +- assets/css/my-challenges/my-challenges.scss | 4 ++-- assets/css/my-dashboard/community-updates.scss | 2 +- assets/css/my-dashboard/subtrack-stats.scss | 2 +- assets/css/my-srms/my-srms.scss | 4 ++-- assets/css/partials/_tc-mixins.scss | 14 +++++++------- assets/css/profile/badges.scss | 2 +- assets/css/profile/subtrack.scss | 6 +++--- 10 files changed, 20 insertions(+), 20 deletions(-) diff --git a/assets/css/directives/external-account.scss b/assets/css/directives/external-account.scss index 197a16bb8..225b03d13 100644 --- a/assets/css/directives/external-account.scss +++ b/assets/css/directives/external-account.scss @@ -68,7 +68,7 @@ line-height: 13px; text-align: center; text-transform: uppercase; - color: $system-gray; + color: $accent-gray; } } diff --git a/assets/css/directives/input-sticky-placeholder.scss b/assets/css/directives/input-sticky-placeholder.scss index 126a3aeff..4c54b8a10 100644 --- a/assets/css/directives/input-sticky-placeholder.scss +++ b/assets/css/directives/input-sticky-placeholder.scss @@ -12,6 +12,6 @@ font-size: 10px; line-height: 40px; text-transform: uppercase; - color: $system-gray; + color: $accent-gray; } } diff --git a/assets/css/directives/skill-tile.scss b/assets/css/directives/skill-tile.scss index 042198758..8b886286e 100644 --- a/assets/css/directives/skill-tile.scss +++ b/assets/css/directives/skill-tile.scss @@ -35,7 +35,7 @@ skill-tile { .name { text-decoration: line-through; - color: $system-gray; + color: $accent-gray; } } diff --git a/assets/css/my-challenges/my-challenges.scss b/assets/css/my-challenges/my-challenges.scss index 1d2d80f1c..e7c03738b 100644 --- a/assets/css/my-challenges/my-challenges.scss +++ b/assets/css/my-challenges/my-challenges.scss @@ -76,13 +76,13 @@ .my-challenges { display: block; - color: $accent; + color: $primary; font-weight: 700; text-align: center; text-transform: uppercase; @media (min-width: 768px) { display: block; - color: $accent; + color: $primary; font-weight: 700; text-align: center; text-transform: uppercase; diff --git a/assets/css/my-dashboard/community-updates.scss b/assets/css/my-dashboard/community-updates.scss index cf0abe90e..7c62b9752 100644 --- a/assets/css/my-dashboard/community-updates.scss +++ b/assets/css/my-dashboard/community-updates.scss @@ -95,7 +95,7 @@ a { display: block; margin-top: 25px; - color: $accent; + color: $primary; text-decoration: none; @media only screen and (min-width: 1132px) { margin-top: 0; diff --git a/assets/css/my-dashboard/subtrack-stats.scss b/assets/css/my-dashboard/subtrack-stats.scss index 7b5cf5125..e1f580ab4 100644 --- a/assets/css/my-dashboard/subtrack-stats.scss +++ b/assets/css/my-dashboard/subtrack-stats.scss @@ -74,7 +74,7 @@ p { @include sofia-pro-regular; font-size: 12px; - color: $system-gray; + color: $accent-gray; &:last-child { text-transform: uppercase; diff --git a/assets/css/my-srms/my-srms.scss b/assets/css/my-srms/my-srms.scss index 821470675..bc702277a 100644 --- a/assets/css/my-srms/my-srms.scss +++ b/assets/css/my-srms/my-srms.scss @@ -54,7 +54,7 @@ } .my-srms { display: block; - color: $accent; + color: $primary; font-weight: 700; text-align: center; text-transform: uppercase; @@ -231,7 +231,7 @@ } .my-srms { display: block; - color: $accent; + color: $primary; font-weight: 700; text-align: center; text-transform: uppercase; diff --git a/assets/css/partials/_tc-mixins.scss b/assets/css/partials/_tc-mixins.scss index 60ff69d4a..e40be7d9f 100644 --- a/assets/css/partials/_tc-mixins.scss +++ b/assets/css/partials/_tc-mixins.scss @@ -136,7 +136,7 @@ } } -@mixin button-s($background: $accent) { +@mixin button-s($background: $primary) { height: 20px; line-height: 20px; padding: 0 8px; @@ -153,7 +153,7 @@ outline: 0; } -@mixin button-m($background: $accent) { +@mixin button-m($background: $primary) { @include button-s($background); height: 30px; line-height: 30px; @@ -162,7 +162,7 @@ border-radius: 4px; } -@mixin button-l($background: $accent) { +@mixin button-l($background: $primary) { @include button-s($background); height: 50px; line-height: 50px; @@ -173,7 +173,7 @@ } -@mixin button-xl($background: $accent) { +@mixin button-xl($background: $primary) { @include button-s($background); height: 60px; line-height: 60px; @@ -184,7 +184,7 @@ } -@mixin button-m-wide($background: $accent) { +@mixin button-m-wide($background: $primary) { @include button-m($background); padding: 0 30px; } @@ -195,8 +195,8 @@ @mixin button-ghost { background-color: $white; - color: $accent; - border: 1px solid $accent; + color: $primary; + border: 1px solid $primary; } @mixin button-1($disabled: #b2e7fe, $normal: #1eaefc, $hover: #199ae2, $active: #1792d7) { diff --git a/assets/css/profile/badges.scss b/assets/css/profile/badges.scss index 9ea4c8742..2f0b5819d 100644 --- a/assets/css/profile/badges.scss +++ b/assets/css/profile/badges.scss @@ -22,7 +22,7 @@ span { display: inline; &.title { - color: $accent; + color: $primary; font-weight: bold; } } diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index 72b6e9471..428611697 100644 --- a/assets/css/profile/subtrack.scss +++ b/assets/css/profile/subtrack.scss @@ -42,7 +42,7 @@ text-decoration: none; color: black; &:hover { - color: $accent; + color: $primary; } } } @@ -54,7 +54,7 @@ } .subtrack { display: block; - color: $accent; + color: $primary; font-weight: 700; text-align: center; text-transform: uppercase; @@ -153,7 +153,7 @@ padding: 14px; border-bottom: 1px solid #f6f6f6; .right { - color: $accent; + color: $primary; } &.first { border-top: 1px solid #f6f6f6; From 61b8bf77195d45142bcdca29ca1c68d3a5b0077c Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Mon, 12 Oct 2015 11:42:45 -0700 Subject: [PATCH 4/9] Add svg sprite gulp plugin to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 202cc4feb..d203a2f82 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "gulp-rev-replace": "^0.4.2", "gulp-sass": "^2.0.1", "gulp-sourcemaps": "^1.5.2", + "gulp-svg-sprite": "^1.2.11", "gulp-task-listing": "^1.0.1", "gulp-uglify": "^1.2.0", "gulp-useref": "^1.2.0", From a38aa56316c0713905c86a60dcc2d46f0c125fa6 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Mon, 12 Oct 2015 17:36:56 -0700 Subject: [PATCH 5/9] Add gulp task to create svg sprite --- assets/css/topcoder.scss | 4 ++++ gulpfile.js | 15 ++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss index c0d69bac7..9c50c21d1 100644 --- a/assets/css/topcoder.scss +++ b/assets/css/topcoder.scss @@ -18,6 +18,10 @@ body { @include source-sans-regular; background-color: $ui-page-gray; height: 100%; + + > svg { + display: none; + } } .fold-wrapper { diff --git a/gulpfile.js b/gulpfile.js index bf1dc6a50..995feb735 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -75,6 +75,19 @@ gulp.task('dev-fonts', ['fonts'], function() { .pipe(gulp.dest(config.build + 'styles/fonts')); }) +gulp.task('svg-sprite', ['clean-images'], function() { + log('Compiling svgs into sprite'); + + return gulp + .src('node_modules/tc-ui-kit/icons/svg/*.svg') + .pipe($.plumber()) + .pipe($.svgSprite({ + log: 'verbose', + mode: { stack: true, inline: true } + })) + .pipe(gulp.dest(config.temp + 'images')); +}); + gulp.task('images', ['clean-images'], function() { log('Copying and compressing the images'); @@ -280,7 +293,7 @@ gulp.task('build-specs', ['templatecache', 'ngConstants'], function() { .pipe(gulp.dest(config.app)); }); -gulp.task('serve', ['inject', 'ngConstants'], function() { +gulp.task('serve', ['inject', 'ngConstants', 'svg-sprite'], function() { gulp.watch(config.sass, ['styles']) .on('change', function(event) { changeEvent(event); }); From 615a721c09b265c2a22445a360db8099d22a60c2 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Tue, 13 Oct 2015 13:55:08 -0700 Subject: [PATCH 6/9] Inject svg sprite into index.html --- app/index.jade | 2 ++ gulpfile.js | 22 ++++++++++++++++++++-- package.json | 1 + 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/app/index.jade b/app/index.jade index 5eae4dd6a..30d86ed54 100644 --- a/app/index.jade +++ b/app/index.jade @@ -79,6 +79,8 @@ html //- endinject // endbuild + // SVG Sprite + body(ng-app="topcoder", ng-controller="TopcoderController as main", ng-class="{'menu-visible': main.menuVisible}", ng-strict-di) #header(ui-view="header") diff --git a/gulpfile.js b/gulpfile.js index 995feb735..e5a0d91a7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,6 +2,7 @@ var gulp = require('gulp'); var args = require('yargs').argv; var config = require('./gulp.config')(); var del = require('del'); // rm -rf +var fs = require('fs'); var $ = require('gulp-load-plugins')({lazy: true}); var browserSync = require('browser-sync'); var histFallback = require('connect-history-api-fallback'); @@ -203,6 +204,23 @@ gulp.task('inject', ['wiredep', 'styles', 'templatecache'], function() { .pipe(gulp.dest(config.app)); }); +gulp.task('insert-svg-sprite', ['jade', 'svg-sprite'], function() { + log('Inserting svg sprite into index.html'); + + return gulp + .src(config.indexHtml) + .pipe($.replaceTask({ + patterns: [ + { + match: '', + replacement: fs.readFileSync(config.temp + 'images/stack/svg/sprite.stack.svg', 'utf8') + } + ], + usePrefix: false + })) + .pipe(gulp.dest(config.temp)) +}); + gulp.task('optimize', ['inject', 'test', 'ngConstants', 'images'], function() { log('Optimizing the JavaScript, CSS, and HTML'); @@ -251,7 +269,7 @@ gulp.task('optimize', ['inject', 'test', 'ngConstants', 'images'], function() { .pipe(gulp.dest(config.build)); }); -gulp.task('build1', ['optimize', 'dev-fonts'], function() { +gulp.task('build1', ['optimize', 'dev-fonts', 'insert-svg-sprite'], function() { log('Building everything'); var msg = { @@ -293,7 +311,7 @@ gulp.task('build-specs', ['templatecache', 'ngConstants'], function() { .pipe(gulp.dest(config.app)); }); -gulp.task('serve', ['inject', 'ngConstants', 'svg-sprite'], function() { +gulp.task('serve', ['inject', 'ngConstants', 'svg-sprite', 'insert-svg-sprite'], function() { gulp.watch(config.sass, ['styles']) .on('change', function(event) { changeEvent(event); }); diff --git a/package.json b/package.json index d203a2f82..f0db0f65a 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "gulp-plumber": "^1.0.1", "gulp-print": "^1.1.0", "gulp-replace": "^0.5.3", + "gulp-replace-task": "^0.11.0", "gulp-rev": "^5.0.1", "gulp-rev-all": "0.8.18", "gulp-rev-replace": "^0.4.2", From 1f1bedaf062eed11dd89e73f0cbc0e0a44b97674 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Tue, 13 Oct 2015 15:38:15 -0700 Subject: [PATCH 7/9] Move svg code to different branch --- app/index.jade | 2 -- assets/css/topcoder.scss | 19 ------------------- gulpfile.js | 34 ++-------------------------------- 3 files changed, 2 insertions(+), 53 deletions(-) diff --git a/app/index.jade b/app/index.jade index 30d86ed54..5eae4dd6a 100644 --- a/app/index.jade +++ b/app/index.jade @@ -79,8 +79,6 @@ html //- endinject // endbuild - // SVG Sprite - body(ng-app="topcoder", ng-controller="TopcoderController as main", ng-class="{'menu-visible': main.menuVisible}", ng-strict-di) #header(ui-view="header") diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss index 9c50c21d1..41fd02f81 100644 --- a/assets/css/topcoder.scss +++ b/assets/css/topcoder.scss @@ -2,22 +2,9 @@ @import 'topcoder-styles'; @include glyphicons-halflings; -// Resets and top level container stylings -html { - min-height: 100%; - height: 100%; - box-sizing: border-box; -} - -*, *:before, *:after { - margin: 0; - box-sizing: inherit; -} - body { @include source-sans-regular; background-color: $ui-page-gray; - height: 100%; > svg { display: none; @@ -64,11 +51,6 @@ body { } } -// Styles for elements used across modules -a { - cursor: pointer; -} - // Country dropdown styles .angucomplete-highlight { color: $black; @@ -80,7 +62,6 @@ a { max-height: 250px; } - // Section loading and form styles .section-loading { width: 100%; diff --git a/gulpfile.js b/gulpfile.js index e5a0d91a7..25834f759 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -76,19 +76,6 @@ gulp.task('dev-fonts', ['fonts'], function() { .pipe(gulp.dest(config.build + 'styles/fonts')); }) -gulp.task('svg-sprite', ['clean-images'], function() { - log('Compiling svgs into sprite'); - - return gulp - .src('node_modules/tc-ui-kit/icons/svg/*.svg') - .pipe($.plumber()) - .pipe($.svgSprite({ - log: 'verbose', - mode: { stack: true, inline: true } - })) - .pipe(gulp.dest(config.temp + 'images')); -}); - gulp.task('images', ['clean-images'], function() { log('Copying and compressing the images'); @@ -204,23 +191,6 @@ gulp.task('inject', ['wiredep', 'styles', 'templatecache'], function() { .pipe(gulp.dest(config.app)); }); -gulp.task('insert-svg-sprite', ['jade', 'svg-sprite'], function() { - log('Inserting svg sprite into index.html'); - - return gulp - .src(config.indexHtml) - .pipe($.replaceTask({ - patterns: [ - { - match: '', - replacement: fs.readFileSync(config.temp + 'images/stack/svg/sprite.stack.svg', 'utf8') - } - ], - usePrefix: false - })) - .pipe(gulp.dest(config.temp)) -}); - gulp.task('optimize', ['inject', 'test', 'ngConstants', 'images'], function() { log('Optimizing the JavaScript, CSS, and HTML'); @@ -269,7 +239,7 @@ gulp.task('optimize', ['inject', 'test', 'ngConstants', 'images'], function() { .pipe(gulp.dest(config.build)); }); -gulp.task('build1', ['optimize', 'dev-fonts', 'insert-svg-sprite'], function() { +gulp.task('build1', ['optimize', 'dev-fonts'], function() { log('Building everything'); var msg = { @@ -311,7 +281,7 @@ gulp.task('build-specs', ['templatecache', 'ngConstants'], function() { .pipe(gulp.dest(config.app)); }); -gulp.task('serve', ['inject', 'ngConstants', 'svg-sprite', 'insert-svg-sprite'], function() { +gulp.task('serve', ['inject', 'ngConstants'], function() { gulp.watch(config.sass, ['styles']) .on('change', function(event) { changeEvent(event); }); From 0dd858408d4964037f2cb32b1d7ffb9224943162 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Wed, 14 Oct 2015 08:07:00 -0700 Subject: [PATCH 8/9] Swap in UI Kit buttons on all pages --- app/account/login/login.jade | 8 +- app/account/register/register.jade | 6 +- .../challenge-tile.directive.jade | 4 +- .../distribution-graph.directive.jade | 2 +- .../history-graph.directive.jade | 2 +- .../ios-card/ios-card.directive.jade | 4 +- .../profile-widget/profile-widget.jade | 6 +- .../srm-tile/srm-tile.directive.jade | 4 +- .../community-updates/community-updates.jade | 2 +- .../my-challenges/my-challenges.jade | 8 +- app/my-dashboard/programs/programs.jade | 6 +- app/my-dashboard/srms/srms.jade | 10 +- app/profile/about/about.jade | 10 +- app/settings/account-info/account-info.jade | 10 +- app/settings/edit-profile/edit-profile.jade | 2 +- app/skill-picker/skill-picker.jade | 5 +- assets/css/account/account.scss | 11 +- assets/css/account/register.scss | 21 +- assets/css/directives/challenge-tile.scss | 3 +- assets/css/directives/distribution-graph.scss | 1 - assets/css/directives/history-graph.scss | 1 - assets/css/directives/ios-card.scss | 1 - assets/css/directives/profile-widget.scss | 109 +++++----- assets/css/directives/skill-tile.scss | 7 +- assets/css/directives/srm-tile.scss | 5 - assets/css/layout/header.scss | 15 +- .../css/my-dashboard/community-updates.scss | 9 +- assets/css/my-dashboard/my-challenges.scss | 26 ++- assets/css/my-dashboard/programs.scss | 4 - assets/css/my-dashboard/srms.scss | 11 +- assets/css/partials/_tc-mixins.scss | 195 ------------------ assets/css/profile/about.scss | 14 +- assets/css/profile/subtrack.scss | 34 +-- assets/css/settings/account-info.scss | 4 - assets/css/settings/settings.scss | 5 - assets/css/skill-picker/skill-picker.scss | 3 +- assets/css/topcoder.scss | 12 +- 37 files changed, 150 insertions(+), 430 deletions(-) diff --git a/app/account/login/login.jade b/app/account/login/login.jade index f35281938..9b8e646e8 100644 --- a/app/account/login/login.jade +++ b/app/account/login/login.jade @@ -21,7 +21,7 @@ p.problem-signin a.forgot-password(ui-sref="resetPassword") Forgot your password? - button(type="submit", ng-disabled="vm.loginForm.$invalid", ng-class="{'enabled-button': vm.loginForm.$valid}") Log In + button.tc-btn.tc-btn-l(type="submit", ng-disabled="vm.loginForm.$invalid") Log In section.social p ------------ Or Log in With ------------ @@ -41,7 +41,7 @@ p Twitter .join-topcoder - span Not a member yet? - p.redirect - a(ui-sref="register(vm.$stateParams)") Join now + span Not a member yet? + + a.tc-btn.tc-btn-ghost-secondary.tc-btn-s(ui-sref="register(vm.$stateParams)") Join now diff --git a/app/account/register/register.jade b/app/account/register/register.jade index 69c8f9d86..00619b37f 100644 --- a/app/account/register/register.jade +++ b/app/account/register/register.jade @@ -91,7 +91,7 @@ section.terms p By clicking "Join," you agree to Topcoder's #[a(href="http://www.topcoder.com/community/how-it-works/terms/", target="_blank") Terms of Service] and #[a(href="http://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank") Privacy Policy] - button(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join + button.tc-btn.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid") Join section.social p ------------ Or Register With ------------ @@ -109,5 +109,5 @@ .join-topcoder span Already a member? - p.redirect - a(ui-sref="login(vm.$stateParams)") Log in + + a.tc-btn.tc-btn-ghost-secondary.tc-btn-s(ui-sref="login(vm.$stateParams)") Log in diff --git a/app/directives/challenge-tile/challenge-tile.directive.jade b/app/directives/challenge-tile/challenge-tile.directive.jade index 99c3ec869..ef6af85d1 100644 --- a/app/directives/challenge-tile/challenge-tile.directive.jade +++ b/app/directives/challenge-tile/challenge-tile.directive.jade @@ -18,7 +18,7 @@ .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused. .phase-action(ng-switch="challenge.userAction") - .submit(ng-switch-when="Submit") Submit + a.tc-btn.tc-btn-s.tc-btn-wide.submit(ng-switch-when="Submit") Submit .submitted(ng-switch-when="Submitted") Submitted @@ -105,7 +105,7 @@ p.ends-in(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused. .phase-action(ng-switch="challenge.userAction") - .submit(ng-switch-when="Submit") Submit + a.tc-btn.tc-btn-s.tc-btn-wide.submit(ng-switch-when="Submit") Submit .submitted(ng-switch-when="Submitted") Submitted diff --git a/app/directives/distribution-graph/distribution-graph.directive.jade b/app/directives/distribution-graph/distribution-graph.directive.jade index f2c65ade2..450c7d92c 100644 --- a/app/directives/distribution-graph/distribution-graph.directive.jade +++ b/app/directives/distribution-graph/distribution-graph.directive.jade @@ -10,6 +10,6 @@ .coders(ng-if="!displayCoders", style="background: {{rating | ratingColor}}") .num {{rating}} .label RATING - button.compare(ng-click="graphState.show = 'history'") + button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'history'") | BACK TO YOUR RATING diff --git a/app/directives/history-graph/history-graph.directive.jade b/app/directives/history-graph/history-graph.directive.jade index acc747b98..eaeb33fd7 100644 --- a/app/directives/history-graph/history-graph.directive.jade +++ b/app/directives/history-graph/history-graph.directive.jade @@ -12,4 +12,4 @@ .history-info .challenge(ng-if="historyRating") {{historyChallenge}} .date(ng-if="historyRating") {{historyDate | date}} - button.compare(ng-click="graphState.show = 'distribution'") COMMUNITY RATINGS + button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'distribution'") COMMUNITY RATINGS diff --git a/app/directives/ios-card/ios-card.directive.jade b/app/directives/ios-card/ios-card.directive.jade index 63589088a..6790b0b9b 100644 --- a/app/directives/ios-card/ios-card.directive.jade +++ b/app/directives/ios-card/ios-card.directive.jade @@ -14,9 +14,9 @@ p.ends-in Ends In p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}} p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}} - + .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused. - + p.prize-money(ng-show="challenge.reviewType === 'PEER'") Peer Review Challenge p.prize-money(ng-hide="challenge.reviewType === 'PEER'") {{challenge.totalCheckpointPrize || 0 | currency:undefined:0}} diff --git a/app/directives/profile-widget/profile-widget.jade b/app/directives/profile-widget/profile-widget.jade index 051b8a10f..7919740e4 100644 --- a/app/directives/profile-widget/profile-widget.jade +++ b/app/directives/profile-widget/profile-widget.jade @@ -15,7 +15,7 @@ p.description {{profile.description}} - button.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile + a.tc-btn.tc-btn-s.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile .tracks-links .tracks @@ -27,7 +27,7 @@ hr .links - a.forums.link(ng-href="http://forums.{{DOMAIN}}/?module=History&userID={{profileVm.profile.userId}}") + a.tc-btn.tc-btn-secondary.tc-btn-s.forums.link(ng-href="http://forums.{{DOMAIN}}/?module=History&userID={{profileVm.profile.userId}}") | Forum Posts - button.badges.link(ng-click="profileVm.showBadges()") + button.tc-btn.tc-btn-secondary.tc-btn-s.badges.link(ng-click="profileVm.showBadges()") | Badges diff --git a/app/directives/srm-tile/srm-tile.directive.jade b/app/directives/srm-tile/srm-tile.directive.jade index fc364ece2..2ba2a464d 100644 --- a/app/directives/srm-tile/srm-tile.directive.jade +++ b/app/directives/srm-tile/srm-tile.directive.jade @@ -19,7 +19,7 @@ i.fa.fa-check-circle-o p You are registered! .unregistered(ng-hide="vm.registered") - button.srm-action Register + button.tc-btn.tc-btn-s.tc-btn-wide.srm-action Register .past-srm(ng-show="srm.status === 'PAST'") .challenge-track @@ -54,7 +54,7 @@ i.fa.fa-check-circle-o p You are registered! .unregistered(ng-hide="vm.registered") - button.srm-action Register + button.tc-btn.tc-btn-s.tc-btn-wide.srm-action Register .past-srm(ng-show="srm.status === 'PAST'") .challenge-track diff --git a/app/my-dashboard/community-updates/community-updates.jade b/app/my-dashboard/community-updates/community-updates.jade index a6c2e35ee..d5a5c3500 100644 --- a/app/my-dashboard/community-updates/community-updates.jade +++ b/app/my-dashboard/community-updates/community-updates.jade @@ -11,4 +11,4 @@ header .description(ng-bind-html="blog.description") .blog-links(ng-hide="vm.loading") - a(ng-href="https://www.{{DOMAIN}}/blog/") View More + a.tc-btn.tc-btn-s.tc-btn-secondary(ng-href="https://www.{{DOMAIN}}/blog/") View More diff --git a/app/my-dashboard/my-challenges/my-challenges.jade b/app/my-dashboard/my-challenges/my-challenges.jade index 23c43b833..fc80180f7 100644 --- a/app/my-dashboard/my-challenges/my-challenges.jade +++ b/app/my-dashboard/my-challenges/my-challenges.jade @@ -31,9 +31,9 @@ section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading") p.info Compete in challenges to win money, test yourself against the world's best, and learn new skills .info-links - a(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges + a.tc-btn.tc-btn-l(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges - a(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More + a.tc-btn.tc-btn-ghost.tc-btn-l(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ 'list-view-active': vm.challengeView === 'list' }") .section-titles(ng-show="vm.challengeView === 'list'") @@ -46,6 +46,6 @@ section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ ' challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.challengeView", ng-class="vm.challengeView + '-view'") .my-challenges-links(id="viewAllChallenges", ng-if="vm.userHasChallenges && !vm.loading") - a(ui-sref="my-challenges({status: 'active'})") View All Active Challenges + a.tc-btn.tc-btn-s.tc-btn-secondary(ui-sref="my-challenges({status: 'active'})") View All Active Challenges - a(ui-sref="my-challenges({status: 'completed'})") View All Past Challenges + a.tc-btn.tc-btn-s.tc-btn-secondary(ui-sref="my-challenges({status: 'completed'})") View All Past Challenges diff --git a/app/my-dashboard/programs/programs.jade b/app/my-dashboard/programs/programs.jade index e7f3ddaba..c4b6fb445 100644 --- a/app/my-dashboard/programs/programs.jade +++ b/app/my-dashboard/programs/programs.jade @@ -15,9 +15,9 @@ section.ios(ng-hide="vm.loading") p Experienced and proven iOS developers are in high-demand. Prove your skills by earning these iOS topcoder badges and gain exclusive access to iOS challenges and prize accelerators, special previews into content and releases, and special community-related events and info. .info-links - a(ng-click="vm.registerUser()") Participate + a.tc-btn(ng-click="vm.registerUser()") Participate - a(ng-href="https://ios.{{DOMAIN}}", target="_blank") Learn More + a.tc-btn.tc-btn-ghost(ng-href="https://ios.{{DOMAIN}}", target="_blank") Learn More .registered(ng-show="vm.registered") .badge-and-challenges @@ -28,6 +28,6 @@ section.ios(ng-hide="vm.loading") .badge-timeline img(src="/images/member-program/svg/Member-06.svg", alt="Development Challenge Icon") - a(href="http://ios.{{vm.domain}}", title="topcoder iOS Member Program") View Challenges + a.tc-btn.tc-btn-s.tc-btn-ghost.tc-btn-wide(href="http://ios.{{vm.domain}}", title="topcoder iOS Member Program") View Challenges ios-card(ng-repeat="challenge in vm.challenges | orderBy:reviewType:true| orderBy:registrationEndDate:true", challenge="challenge", view="'tile'") diff --git a/app/my-dashboard/srms/srms.jade b/app/my-dashboard/srms/srms.jade index 188cfe4cf..d112c44d1 100644 --- a/app/my-dashboard/srms/srms.jade +++ b/app/my-dashboard/srms/srms.jade @@ -12,13 +12,13 @@ section(ng-hide="vm.loading") .flex-wrapper h2 Practice on past problems - a(ng-href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives + a.tc-btn.tc-btn-s.tc-btn-wide(ng-href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives - a(ng-href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials + a.tc-btn.tc-btn-s.tc-btn-wide(ng-href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials - a(ng-href="https://www.{{DOMAIN}}/community/getting-started/") Learn More + a.tc-btn.tc-btn-s.tc-btn-wide(ng-href="https://www.{{DOMAIN}}/community/getting-started/") Learn More .srms-links(ng-hide="vm.loading") - a(ui-sref="my-srms") View Past SRMs + a.tc-btn.tc-btn-s.tc-btn-secondary(ui-sref="my-srms") View Past SRMs - a(ng-href="https://arena.{{DOMAIN}}") Launch Arena + a.tc-btn.tc-btn-s.tc-btn-secondary(ng-href="https://arena.{{DOMAIN}}") Launch Arena diff --git a/app/profile/about/about.jade b/app/profile/about/about.jade index 96e597cbb..853d59f2f 100644 --- a/app/profile/about/about.jade +++ b/app/profile/about/about.jade @@ -12,8 +12,8 @@ .skill(ng-repeat="skill in vm.skills") skill-tile(skill="skill") - button.more(ng-if="vm.skills.length < vm.fullSkills.length", ng-click="vm.skills = vm.fullSkills") VIEW ALL - button.more(ng-if="vm.skills.length > 6", ng-click="vm.skills = vm.someSkills") VIEW LESS + button.tc-btn.tc-btn-secondary.tc-btn-l.more(ng-if="vm.skills.length < vm.fullSkills.length", ng-click="vm.skills = vm.fullSkills") VIEW ALL + button.tc-btn.tc-btn-secondary.tc-btn-l.more(ng-if="vm.skills.length > 6", ng-click="vm.skills = vm.someSkills") VIEW LESS .empty-state(ng-show="!profileVm.skills || (profileVm.skills && profileVm.skills.length == 0)") .action-text Tell everyone what you know @@ -24,7 +24,7 @@ .description You can add languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well. - button.link-button(ui-sref="settings.profile") ADD SKILLS + button.tc-btn.tc-btn-l.link-button(ui-sref="settings.profile") ADD SKILLS tc-section(ng-show="vm.displaySection.stats", state="profileVm.status.stats") @@ -40,7 +40,7 @@ div .text {{track | track}} .description Compete in challenges to win money, test yourself against the world's best, and learn new skills. Your performance rating will show up here. - a.link-button(href="/challenges") FIND CHALLENGES + a.tc-btn.tc-btn-l.link-button(href="/challenges") FIND CHALLENGES .track( ng-repeat="track in profileVm.profile.tracks", @@ -96,4 +96,4 @@ .description Show off your work and experience outside of Topcoder. Connect accounts from popular services and networks or add a link to any site. - button.link-button(ui-sref="settings.profile") CONNECT ACCOUNTS + button.tc-btn.tc-btn-l.link-button(ui-sref="settings.profile") CONNECT ACCOUNTS diff --git a/app/settings/account-info/account-info.jade b/app/settings/account-info/account-info.jade index f3f9982ba..0eae9a722 100644 --- a/app/settings/account-info/account-info.jade +++ b/app/settings/account-info/account-info.jade @@ -38,7 +38,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.button-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.tc-btn-secondary.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 div(ng-show="vm.isSocialRegistration") @@ -82,13 +82,13 @@ .form-input-error(ng-show="vm.accountInfoForm.lastname.$invalid") p(ng-show="vm.accountInfoForm.lastname.$error.required") This is a required field. - + .settings-section.address .section-info h2 address .description Required for payments and in case we need to mail you something. Will be kept private and not shared with anyone. - .section-fields + .section-fields .form-label.address Address input.form-field( name="address", type="text", @@ -98,7 +98,7 @@ ng-class="{'form-field-focused': hasFocus==true}" ) - .form-label Address 2 + .form-label Address 2 span(style="text-transform: none;")  (opt., suite, etc.) input.form-field( name="address2", @@ -155,4 +155,4 @@ .button-container - button.button-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid}") Save + button.tc-btn.tc-btn-secondary.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid}") Save diff --git a/app/settings/edit-profile/edit-profile.jade b/app/settings/edit-profile/edit-profile.jade index 54dec611b..c7b152e5f 100644 --- a/app/settings/edit-profile/edit-profile.jade +++ b/app/settings/edit-profile/edit-profile.jade @@ -49,7 +49,7 @@ .section-fields track-toggle(tracks="vm.tracks") - button(type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': vm.editProfile.$pristine || vm.editProfile.$invalid}") Save + button.tc-btn.tc-btn-secondary.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': vm.editProfile.$pristine || vm.editProfile.$invalid}") Save .settings-section.skills .section-info diff --git a/app/skill-picker/skill-picker.jade b/app/skill-picker/skill-picker.jade index 3630af143..69ba06607 100644 --- a/app/skill-picker/skill-picker.jade +++ b/app/skill-picker/skill-picker.jade @@ -23,7 +23,6 @@ .icon img(ng-src="{{vm.ASSET_PREFIX}}images/skills/id-{{tag.id}}.svg", fallback-src="/images/skills/id-design.svg") .name {{tag.name}} - .skills-section(ng-show="vm.tracks.DEVELOP") .track-title select development skills @@ -48,8 +47,8 @@ .name {{tag.name}} - button.button-l( - type="button", + button.tc-btn.tc-btn-l.done-button( + type="button", tc-busy-button, tc-busy-when="vm.saving", ng-click="vm.submitSkills()", ng-class="{'enabled-button': vm.tracks.design || vm.tracks.develop || vm.tracks.data_science}") Done diff --git a/assets/css/account/account.scss b/assets/css/account/account.scss index f24d1f162..5db7a7ab6 100644 --- a/assets/css/account/account.scss +++ b/assets/css/account/account.scss @@ -72,18 +72,9 @@ } button { - @include ui-submit-button; width: 180px; - border-radius: 4px; align-self: center; - - &.enabled-button { - @include ui-enabled-button; - } - - &[disabled] { - @include ui-disabled-button; - } + text-transform: uppercase; } // Form stylings diff --git a/assets/css/account/register.scss b/assets/css/account/register.scss index d248e8352..22b0d8c72 100644 --- a/assets/css/account/register.scss +++ b/assets/css/account/register.scss @@ -112,35 +112,18 @@ align-items: center; } - .redirect { - border: 1px solid #D1D3D4; - background-color: white; - border-radius : 4px; - width: 66px;/* TODO as per design it should be 63px*/ - height: 30px; + a { margin-left: 10px; - display: flex; - align-items: center; - justify-content: center; @include sofia-pro-light; - text-transform: uppercase; font-size: 12px; - line-height: 14px; + text-transform: uppercase; padding: 8px 12px; - - a { - text-decoration: none; - @include sofia-pro-light; - } } } @media (max-width: 767px) { - .register-container { - form { - .first-last-names { display: flex; flex-direction: column; diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 7ee163f96..6c1c41116 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -109,7 +109,7 @@ challenge-tile .challenge.tile-view { .submit { margin-bottom: 25px; - @include button-m-wide; + display: inline-block; } .submitted { @@ -630,7 +630,6 @@ challenge-tile .challenge.list-view { .phase-action { .submit { display: inline-block; - @include button-m; } .submitted { diff --git a/assets/css/directives/distribution-graph.scss b/assets/css/directives/distribution-graph.scss index ae612934e..ceaea2afd 100644 --- a/assets/css/directives/distribution-graph.scss +++ b/assets/css/directives/distribution-graph.scss @@ -9,7 +9,6 @@ .compare { margin-top: 100px; margin-bottom: 15px; - @include button-1-m; } } diff --git a/assets/css/directives/history-graph.scss b/assets/css/directives/history-graph.scss index f9fa13870..ce3d9d3c4 100644 --- a/assets/css/directives/history-graph.scss +++ b/assets/css/directives/history-graph.scss @@ -9,7 +9,6 @@ .compare { margin-top: 5px; margin-bottom: 15px; - @include button-1-m; } } .history-graph-container { diff --git a/assets/css/directives/ios-card.scss b/assets/css/directives/ios-card.scss index d6327487a..a2d0296c2 100644 --- a/assets/css/directives/ios-card.scss +++ b/assets/css/directives/ios-card.scss @@ -116,7 +116,6 @@ ios-card .challenge.tile-view { .phase-action { margin-bottom: 25px; - @include button-m-wide; } .roles { diff --git a/assets/css/directives/profile-widget.scss b/assets/css/directives/profile-widget.scss index f34c90e02..6a3af1df8 100644 --- a/assets/css/directives/profile-widget.scss +++ b/assets/css/directives/profile-widget.scss @@ -63,10 +63,10 @@ text-align: center; } - button.edit { - @include button-1-m; + .edit { width: 200px; margin-top: 10px; + text-align: center; } .tracks-links { @@ -109,78 +109,73 @@ align-items: center; justify-content: flex-end; .link { - @include button-2-m; text-decoration: none; text-transform: uppercase; margin-left: 5px; margin-right: 5px; } } - - } } @media (min-width: 768px) { - -.profile-widget-directive { - flex-direction: row; - justify-content: space-between; - align-items: flex-start; - img.profile-circle { - margin-top: 10px; - width: 180px; - height: 180px; - } - .info { - margin-left: 15px; - display: flex; - flex-direction: column; - flex-grow: 2; - - h1.handle { - margin: 0; - text-align: left; - font-size: 46px; - line-height: 56px; + .profile-widget-directive { + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + img.profile-circle { + margin-top: 10px; + width: 180px; + height: 180px; } + .info { + margin-left: 15px; + display: flex; + flex-direction: column; + flex-grow: 2; + + h1.handle { + margin: 0; + text-align: left; + font-size: 46px; + line-height: 56px; + } - h3.tenure { - margin-top: 3px; - text-align: left; - } + h3.tenure { + margin-top: 3px; + text-align: left; + } - h3.location-challenges { - margin-top: 36px; - text-align: left; - } + h3.location-challenges { + margin-top: 36px; + text-align: left; + } - p.description { - margin-top: 12px; - max-width: 600px; - text-align: left; - } + p.description { + margin-top: 12px; + max-width: 600px; + text-align: left; + } - } - .tracks-links { - margin-top: -2.1px; - .tracks { - .track { - img { - height: 44px; - } - .text { - margin-top: 8px; + } + .tracks-links { + margin-top: -2.1px; + .tracks { + .track { + img { + height: 44px; + } + .text { + margin-top: 8px; + } } } - } - hr { - margin-bottom: 0; - } + hr { + margin-bottom: 0; + } - .links { - margin-top: 20px; + .links { + margin-top: 20px; + } } } } - -} diff --git a/assets/css/directives/skill-tile.scss b/assets/css/directives/skill-tile.scss index 8b886286e..18432a8d1 100644 --- a/assets/css/directives/skill-tile.scss +++ b/assets/css/directives/skill-tile.scss @@ -14,8 +14,6 @@ skill-tile { width: 100px; } - - .new { .skill-icon { background-color: #F2FAFF; @@ -24,7 +22,12 @@ skill-tile { } } + a:hover { + text-decoration: none; + } + a.hidden { + img { opacity: .3; } diff --git a/assets/css/directives/srm-tile.scss b/assets/css/directives/srm-tile.scss index b7b8cda2e..f0f083bf0 100644 --- a/assets/css/directives/srm-tile.scss +++ b/assets/css/directives/srm-tile.scss @@ -193,7 +193,6 @@ .srm-action { margin-top: 22px; margin-bottom: 40px; - @include button-m-wide; } .phase-status { @@ -357,10 +356,6 @@ } } - .srm-action { - @include button-m-wide; - } - .phase-status { flex : 1; display: flex; diff --git a/assets/css/layout/header.scss b/assets/css/layout/header.scss index 0136ababf..4b0086daf 100644 --- a/assets/css/layout/header.scss +++ b/assets/css/layout/header.scss @@ -216,6 +216,14 @@ cursor: pointer; } +.menu-text { + color: $white; + + &:hover { + color: $white; + } +} + @media only screen and (max-width : 991px) { .header-wrapper { // When autocomplete list is displayed, hide all menu items and footer (except copyright notice) @@ -264,7 +272,7 @@ &.active { background-color: rgba(0, 150, 255, 0.2); - border-left: 5px solid #0096ff; + border-left: 5px solid $primary; color: #fff; margin: 0 -20px; padding-left: 15px; @@ -370,7 +378,8 @@ } .menu-link:hover { - background-color: #0096ff; + background-color: $primary; + text-decoration: none; } .menu-link.active { @@ -380,7 +389,7 @@ .menu-item:not(.anonymous-menu):hover .menu-item-header { position: relative; cursor: pointer; - color: #0096ff; + color: $primary; &:after { content: ''; diff --git a/assets/css/my-dashboard/community-updates.scss b/assets/css/my-dashboard/community-updates.scss index 7c62b9752..11b6f7751 100644 --- a/assets/css/my-dashboard/community-updates.scss +++ b/assets/css/my-dashboard/community-updates.scss @@ -100,6 +100,10 @@ @media only screen and (min-width: 1132px) { margin-top: 0; } + + &:hover { + text-decoration: underline; + } } } } @@ -107,10 +111,5 @@ .blog-links { @include module-links; - - a { - @include button-m; - @include button-secondary; - } } } diff --git a/assets/css/my-dashboard/my-challenges.scss b/assets/css/my-dashboard/my-challenges.scss index eeafa623f..edb7c6c3e 100644 --- a/assets/css/my-dashboard/my-challenges.scss +++ b/assets/css/my-dashboard/my-challenges.scss @@ -52,7 +52,6 @@ &.list:before { background: url(/images/ico-list.svg); } - } } @@ -145,7 +144,6 @@ a { display: block; margin: 30px auto; - @include button-l; text-decoration: none; @media only screen and (min-width: 768px) { display: inline-block; @@ -153,13 +151,18 @@ margin-bottom: 40px; } @media only screen and (min-width: 900px) { - @include button-xl; + height: 60px; margin-top: 30px; margin-bottom: 90px; + padding: 0 30px; + line-height: 60px; + + &:active { + line-height: 62px; + } } &:last-child { - @include button-ghost; @media only screen and (min-width: 768px) { margin-left: 30px; } @@ -291,16 +294,11 @@ padding: 15px 0; } - a { - @include button-m; - @include button-secondary; - - &:not(:first-child) { - margin-left: 10px; - @media only screen and (max-width: 767px) { - margin-top: 10px; - margin-left: 0; - } + a:not(:first-child) { + margin-left: 10px; + @media only screen and (max-width: 767px) { + margin-top: 10px; + margin-left: 0; } } } diff --git a/assets/css/my-dashboard/programs.scss b/assets/css/my-dashboard/programs.scss index db001e58e..dab7f4c93 100644 --- a/assets/css/my-dashboard/programs.scss +++ b/assets/css/my-dashboard/programs.scss @@ -100,7 +100,6 @@ .info-links { a { - @include button-m; display: inline-block; margin-top: 30px; font-size: 13px; @@ -112,7 +111,6 @@ } &:last-child { - @include button-ghost; margin-left: 30px; } } @@ -176,8 +174,6 @@ a { display: block; margin-top: 37px; - @include button-m-wide; - @include button-ghost; text-decoration: none; } } diff --git a/assets/css/my-dashboard/srms.scss b/assets/css/my-dashboard/srms.scss index 9ba20062b..04b85dc9e 100644 --- a/assets/css/my-dashboard/srms.scss +++ b/assets/css/my-dashboard/srms.scss @@ -107,8 +107,6 @@ a { margin-bottom: 21px; - @include button-m-wide; - text-decoration: none; } } } @@ -117,13 +115,8 @@ .srms-links { @include module-links; - a { - @include button-m; - @include button-secondary; - - &:not(:first-child) { - margin-left: 10px; - } + a:not(:first-child) { + margin-left: 10px; } } } diff --git a/assets/css/partials/_tc-mixins.scss b/assets/css/partials/_tc-mixins.scss index 6f948ba2a..1f7ff4f26 100644 --- a/assets/css/partials/_tc-mixins.scss +++ b/assets/css/partials/_tc-mixins.scss @@ -136,201 +136,6 @@ } } -@mixin button-s($background: $primary) { - height: 20px; - line-height: 20px; - padding: 0 8px; - border: none; - border-radius: 3px; - color: $white; - background-color: $background; - @include sofia-pro-regular; - font-size: 11px; - text-transform: uppercase; - text-decoration: none; - text-align: center; - cursor: pointer; - outline: 0; -} - -@mixin button-m($background: $primary) { - @include button-s($background); - height: 30px; - line-height: 30px; - padding: 0 15px; - font-size: 14px; - border-radius: 4px; -} - -@mixin button-l($background: $primary) { - @include button-s($background); - height: 50px; - line-height: 50px; - padding: 0 15px; - @include sofia-pro-bold; - font-size: 18px; - border-radius: 4px; -} - -@mixin button-xl($background: $primary) { - @include button-s($background); - height: 60px; - line-height: 60px; - padding: 0 15px; - @include sofia-pro-bold; - font-size: 24px; - border-radius: 4px; -} - -@mixin button-m-wide($background: $primary) { - @include button-m($background); - padding: 0 30px; -} - -@mixin button-secondary { - background-color: #D1D3D4; -} - -@mixin button-ghost { - background-color: $white; - color: $primary; - border: 1px solid $primary; -} - -@mixin button-1($disabled: #b2e7fe, $normal: #1eaefc, $hover: #199ae2, $active: #1792d7) { - @include button-s; - background-color: $normal; - &:hover { - background-color: $hover; - } - &:active { - background-color: $active; - } - &.disabled { - background-color: $disabled; - cursor: default; - } -} - -@mixin button-1-m { - @include button-1; - @include button-m(#1eaefc); -} - -@mixin button-1-m-wide { - @include button-1; - @include button-m-wide(#1eaefc); -} - -@mixin button-1-l { - @include button-1; - @include button-l(#1eaefc); -} - -@mixin button-1-xl { - @include button-1; - @include button-xl(#1eaefc); -} - -@mixin button-2 { - @include button-1(#edeeee, #d1d3d4, #1eaefc) -} - -@mixin button-2-m { - @include button-2; - @include button-m(#d1d3d4); -} - -@mixin button-2-m-wide { - @include button-2; - @include button-m-wide(#d1d3d4); -} - -@mixin button-2-l { - @include button-2; - @include button-l(#d1d3d4); -} - -@mixin button-2-xl { - @include button-2; - @include button-xl(#d1d3d4); -} - -@mixin button-border($disabled, $normal, $hover, $hover-fill: white, $fill: $normal) { - background-color: white; - color: $fill; - border: 1px solid $normal; - &:hover { - border: 1px solid $hover; - color: $hover-fill; - } - &:active { - color: white; - } - &.disabled { - border: 1px solid $disabled; - cursor: default; - } -} - -@mixin button-3 { - @include button-1(white, white, #1eaefc, #1893d8); - @include button-border(#dedede, #1eaefc, #1eaefc); -} - -@mixin button-3-m { - @include button-3; - @include button-m(#edeeee); - @include button-border(#dedede, #1eaefc, #1eaefc); -} - -@mixin button-3-m-wide { - @include button-3; - @include button-m-wide(#edeeee); - @include button-border(#dedede, #1eaefc, #1eaefc); -} - -@mixin button-3-l { - @include button-3; - @include button-l(white); - @include button-border(#dedede, #1eaefc, #1eaefc); -} - -@mixin button-3-xl { - @include button-3; - @include button-xl(#edeeee); - @include button-border(#dedede, #1eaefc, #1eaefc); -} - -@mixin button-4 { - @include button-1(white, white, white, #1893d8); - @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc); -} - -@mixin button-4-m { - @include button-4; - @include button-m(#edeeee); - @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc); -} - -@mixin button-4-m-wide { - @include button-4; - @include button-m-wide(#edeeee); - @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc); -} - -@mixin button-4-l { - @include button-4; - @include button-l(#edeeee); - @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc); -} - -@mixin button-4-xl { - @include button-4; - @include button-xl(#edeeee); - @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc); -} - @mixin module-s { margin-top: 6px; background-color: $white; diff --git a/assets/css/profile/about.scss b/assets/css/profile/about.scss index b2baf4136..a77e29117 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -8,7 +8,6 @@ .empty-state { a.link-button { margin-top: 20px; - @include button-1-l; } } @@ -30,6 +29,7 @@ flex-direction: column; justify-content: space-between; align-items: center; + .track { margin-top: 22.4px; display: flex; @@ -38,8 +38,6 @@ cursor: pointer; .name { - span { - } margin: auto; font-family: 'Sofia Pro'; font-weight: 200; @@ -158,7 +156,6 @@ width: 60%; } button.link-button { - @include button-1-l; margin-top: 20px; } padding-bottom: 40px; @@ -193,10 +190,9 @@ margin-top: 20px; margin-left: auto; margin-right: auto; - @include button-2-l; } - .list { + .list { display: flex; flex-direction: row; justify-content: center; @@ -210,7 +206,6 @@ .skill { margin: 5px 7.5px; } - } .empty-state { width: 100%; @@ -231,7 +226,6 @@ line-height: 22px; } button.link-button { - @include button-1-l; margin-top: 30px; } .list { @@ -282,7 +276,6 @@ width: 60%; } button.link-button { - @include button-1-l; margin-top: 20px; } .external-account-container { @@ -387,7 +380,6 @@ margin-right: auto; } button.link-button { - @include button-1-l; margin-top: 30px; } .list { @@ -442,7 +434,6 @@ margin-right: auto; } button.link-button { - @include button-1-l; margin-top: 30px; } .list { @@ -521,7 +512,6 @@ margin-right: auto; } button.link-button { - @include button-1-l; margin-top: 30px; } .list { diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss index 74a88e5c7..3a21c7b84 100644 --- a/assets/css/profile/subtrack.scss +++ b/assets/css/profile/subtrack.scss @@ -520,6 +520,7 @@ flex-direction: column; justify-content: space-between; align-items: center; + .track { margin-top: 22.4px; display: flex; @@ -619,38 +620,5 @@ height: 80px; margin: auto; } - - } - .empty-state { - display: flex; - flex-direction: column; - align-items: center; - .action-text { - margin-top: 32px; - font-family: 'Sofia Pro'; - font-size: 18px; - line-height: 24px; - font-weight: 200; - } - .tracks { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 50%; - .track { - } - } - .description { - margin-top: 50px; - font-family: 'Source Sans Pro'; - font-size: 15px; - line-height: 22px; - width: 60%; - } - button.link-button { - @include button-1-l; - margin-top: 20px; - } - padding-bottom: 40px; } } diff --git a/assets/css/settings/account-info.scss b/assets/css/settings/account-info.scss index 50044ac0a..4cf1db0ad 100644 --- a/assets/css/settings/account-info.scss +++ b/assets/css/settings/account-info.scss @@ -21,7 +21,6 @@ .button-container { button.save { margin-top: 20px; - @include button-2-l; } } } @@ -55,9 +54,6 @@ justify-content: center; width: 100%; margin-top: 30px; - button { - @include button-2-l; - } } } } diff --git a/assets/css/settings/settings.scss b/assets/css/settings/settings.scss index fc29279fe..e01fb643e 100644 --- a/assets/css/settings/settings.scss +++ b/assets/css/settings/settings.scss @@ -93,10 +93,6 @@ } // Common element stylings - .button-l { - @include button-l; - } - @include ui-form-placeholder; input:not([type="checkbox"]) { @include ui-form-field; @@ -211,7 +207,6 @@ } button { - @include button-2-l; margin-bottom: 20px; align-self: center; margin-top: 20px; diff --git a/assets/css/skill-picker/skill-picker.scss b/assets/css/skill-picker/skill-picker.scss index d931f2e38..81c697858 100644 --- a/assets/css/skill-picker/skill-picker.scss +++ b/assets/css/skill-picker/skill-picker.scss @@ -144,8 +144,7 @@ font-size: 15px; padding: 5px 0px; } - .button-l{ + .done-button{ margin: 30px; - @include button-l; } } diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss index 41fd02f81..d7e24194a 100644 --- a/assets/css/topcoder.scss +++ b/assets/css/topcoder.scss @@ -464,10 +464,20 @@ body { // Refactor buttons when button mixins and/or style guide is done .introjs-button { - @include button-m; + height: 30px; padding: 0 10px; + line-height: 30px; + border: none; + border-radius: 4px; background-color: $gray; background-image: none; + @include sofia-pro-regular; + font-size: 14px; + text-transform: uppercase; + text-decoration: none; + text-align: center; + cursor: pointer; + outline: 0; color: $white; text-shadow: none; From 9b6b2587ce34d971ca7f10d3a7114bee21416d95 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Wed, 14 Oct 2015 09:45:42 -0700 Subject: [PATCH 9/9] Fix xl button font size --- assets/css/my-dashboard/my-challenges.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/my-dashboard/my-challenges.scss b/assets/css/my-dashboard/my-challenges.scss index edb7c6c3e..5fc6141a2 100644 --- a/assets/css/my-dashboard/my-challenges.scss +++ b/assets/css/my-dashboard/my-challenges.scss @@ -156,6 +156,7 @@ margin-bottom: 90px; padding: 0 30px; line-height: 60px; + font-size: 24px; &:active { line-height: 62px;